/* === RESET & BASE === */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
body { font-family: 'Segoe UI', Arial, sans-serif; background: #f4f4f7; color: #333; min-height: 100vh; }

/* === VARIABLES === */
:root {
  --wine:   #DA4330;
  --wine2:  #e55540;
  --wine3:  #b83322;
  --light:  #fdf4f6;
  --white:  #fff;
  --gray:   #e9ecef;
  --text:   #333;
  --shadow: 0 2px 8px rgba(123,29,58,.15);
}

/* === LOGIN PAGE === */
body.login-page { display:flex; align-items:center; justify-content:center; min-height:100vh; background: linear-gradient(135deg,var(--wine3),var(--wine2)); padding:2rem; }
.login-wrap { display:flex; flex-direction:column; align-items:center; width:100%; max-width:420px; }
.login-banner { width:100%; margin-bottom:1.2rem; border-radius:10px; overflow:hidden; }
.login-banner img { width:100%; display:block; border-radius:10px; }
.login-box { background:var(--white); border-radius:12px; padding:2.5rem 2rem; width:100%; box-shadow:var(--shadow); }
.login-box h2 { text-align:center; color:var(--wine); font-size:2rem; margin-bottom:1.5rem; letter-spacing:2px; }
.login-box label { display:block; margin-bottom:.3rem; font-weight:600; color:var(--wine3); }
.login-box input { width:100%; padding:.65rem .85rem; border:1.5px solid #ccc; border-radius:7px; font-size:1rem; margin-bottom:1rem; outline:none; transition:border .2s; }
.login-box input:focus { border-color:var(--wine); }
.login-box button { width:100%; padding:.75rem; background:var(--wine); color:var(--white); border:none; border-radius:7px; font-size:1rem; font-weight:700; cursor:pointer; transition:background .2s; }
.login-box button:hover { background:var(--wine2); }

/* === LAYOUT === */
.wrapper { display:flex; min-height:100vh; }
.sidebar { width:220px; background:#111; color:#fff; flex-shrink:0; display:flex; flex-direction:column; }
.sidebar .brand { padding:1.4rem 1rem; font-size:1.4rem; font-weight:700; letter-spacing:2px; border-bottom:1px solid rgba(255,255,255,.1); color:#fff; }
.sidebar nav a { display:block; padding:.75rem 1.2rem; color:rgba(255,255,255,.8); text-decoration:none; font-size:.95rem; transition:background .2s; }
.sidebar nav a:hover, .sidebar nav a.active { background:#333; color:#fff; }
.sidebar .logout { margin-top:auto; padding:1rem 1.2rem; }
.sidebar .logout a { color:rgba(255,255,255,.6); text-decoration:none; font-size:.9rem; }
.sidebar .logout a:hover { color:#fff; }

/* === MAIN CONTENT === */
.main { flex:1; display:flex; flex-direction:column; overflow:hidden; }
.topbar { background:var(--white); padding:.85rem 1.5rem; display:flex; align-items:center; justify-content:space-between; box-shadow:0 1px 4px rgba(0,0,0,.08); }
.topbar h1 { font-size:1.15rem; color:var(--wine); font-weight:700; }
.topbar .user-info { font-size:.9rem; color:#666; }
.content { padding:1.5rem; flex:1; overflow-y:auto; }

/* === CARDS === */
.cards { display:flex; flex-wrap:wrap; gap:1rem; margin-bottom:1.5rem; }
.card { background:var(--white); border-left:5px solid var(--wine); border-radius:10px; padding:1.2rem 1.5rem; flex:1; min-width:160px; box-shadow:var(--shadow); }
.card .card-title { font-size:.85rem; color:#888; text-transform:uppercase; letter-spacing:1px; }
.card .card-value { font-size:2rem; font-weight:700; color:var(--wine); }

/* === TABLES === */
.table-wrap { background:var(--white); border-radius:10px; box-shadow:var(--shadow); overflow:hidden; }
.table-wrap .table-header { padding:1rem 1.2rem; display:flex; align-items:center; justify-content:space-between; border-bottom:1px solid var(--gray); }
.table-wrap .table-header h2 { font-size:1rem; color:var(--wine); }
.table-scroll { overflow-x:auto; -webkit-overflow-scrolling:touch; }
table { width:100%; border-collapse:collapse; font-size:.9rem; }
thead th { background:var(--wine); color:var(--white); padding:.7rem 1rem; text-align:left; white-space:nowrap; cursor:pointer; user-select:none; }
thead th:hover { background:var(--wine2); }
tbody tr:nth-child(even) { background:#fdf0f3; }
tbody tr:hover { background:#f9e0e6; }
tbody td { padding:.65rem 1rem; border-bottom:1px solid var(--gray); white-space:nowrap; }

/* === BADGES === */
.badge { display:inline-block; padding:.25em .65em; border-radius:20px; font-size:.78rem; font-weight:600; }
.badge-green  { background:#d4edda; color:#155724; }
.badge-red    { background:#f8d7da; color:#721c24; }
.badge-yellow { background:#fff3cd; color:#856404; }
.badge-blue   { background:#cce5ff; color:#004085; }

/* === BUTTONS === */
.btn { display:inline-block; padding:.45rem .95rem; border-radius:6px; font-size:.85rem; font-weight:600; text-decoration:none; border:none; cursor:pointer; transition:background .2s,opacity .2s; }
.btn-primary   { background:var(--wine); color:var(--white); }
.btn-primary:hover { background:var(--wine2); }
.btn-secondary { background:#6c757d; color:var(--white); }
.btn-secondary:hover { background:#5a6268; }
.btn-danger    { background:#dc3545; color:var(--white); }
.btn-danger:hover { background:#c82333; }
.btn-sm { padding:.3rem .7rem; font-size:.8rem; }

/* === FORMS === */
.form-box { background:var(--white); border-radius:10px; padding:1.5rem; box-shadow:var(--shadow); max-width:560px; }
.form-box h2 { color:var(--wine); margin-bottom:1.2rem; font-size:1.1rem; }
.form-group { margin-bottom:1rem; }
.form-group label { display:block; margin-bottom:.3rem; font-weight:600; font-size:.9rem; color:var(--wine3); }
.form-group input, .form-group select, .form-group textarea {
    width:100%; padding:.6rem .8rem; border:1.5px solid #ccc; border-radius:7px;
    font-size:.95rem; outline:none; transition:border .2s;
}
.form-group input:focus, .form-group select:focus, .form-group textarea:focus { border-color:var(--wine); }
.form-actions { display:flex; gap:.7rem; margin-top:1.2rem; }

/* === SEARCH/FILTER BAR === */
.filter-bar { display:flex; flex-wrap:wrap; gap:.6rem; margin-bottom:1rem; align-items:center; }
.filter-bar input, .filter-bar select { padding:.45rem .75rem; border:1.5px solid #ccc; border-radius:7px; font-size:.9rem; outline:none; }
.filter-bar input:focus, .filter-bar select:focus { border-color:var(--wine); }

/* === MODAL === */
.modal-overlay { display:none; position:fixed; inset:0; background:rgba(0,0,0,.45); z-index:999; align-items:center; justify-content:center; }
.modal-overlay.active { display:flex; }
.modal { background:var(--white); border-radius:12px; padding:2rem; width:100%; max-width:400px; box-shadow:0 8px 32px rgba(0,0,0,.2); }
.modal h3 { color:var(--wine); margin-bottom:1rem; }
.modal .modal-actions { display:flex; gap:.7rem; margin-top:1.2rem; justify-content:flex-end; }

/* === ALERTS === */
.alert { padding:.75rem 1rem; border-radius:7px; margin-bottom:1rem; font-size:.93rem; }
.alert-error   { background:#f8d7da; color:#721c24; border:1px solid #f5c6cb; }
.alert-success { background:#d4edda; color:#155724; border:1px solid #c3e6cb; }

/* === PAGINATION === */
.pagination { display:flex; gap:.4rem; margin-top:1rem; flex-wrap:wrap; }
.pagination a, .pagination span {
    padding:.35rem .75rem; border-radius:6px; font-size:.88rem;
    text-decoration:none; border:1px solid var(--gray);
}
.pagination a { color:var(--wine); } 
.pagination a:hover { background:var(--wine); color:var(--white); }
.pagination span.current { background:var(--wine); color:var(--white); border-color:var(--wine); }


/* === SIDEBAR BANNER === */
.sidebar-banner { padding:.8rem; margin-top:auto; }
.sidebar-banner img { width:100%; border-radius:8px; display:block; }
.sidebar .logout { padding:1rem 1.2rem; }

/* === RESPONSIVE === */
@media (max-width: 700px) {
  .sidebar { width:60px; background:#111; }
  .sidebar .brand span, .sidebar nav a span, .sidebar .logout span { display:none; }
  .cards .card { min-width:120px; }
  .topbar h1 { font-size:1rem; }
}