/* ═══════════════════════════════════════════════════════
   RÉSIDENCE NÉHÉMIE — SUPPORT PLATFORM
   Design System — Couleurs issues du logo
   Vert (feuilles) + Bordeaux (lotus) + Bleu ("Residence")
═══════════════════════════════════════════════════════ */
@import url('https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@300;400;500;600;700;800&family=Fraunces:wght@400;600;700&display=swap');

:root {
  /* ─ Palette Logo ─ */
  --green:        #2E7D52;
  --green-dark:   #1E5C3A;
  --green-mid:    #3D9966;
  --green-light:  #EAF6EE;
  --green-glow:   rgba(46,125,82,.12);

  --red:          #8B1A2E;
  --red-dark:     #6B1020;
  --red-light:    #FBE9EC;
  --red-glow:     rgba(139,26,46,.1);

  --blue:         #2B7CB8;
  --blue-light:   #EBF4FC;
  --blue-glow:    rgba(43,124,184,.1);

  /* ─ Neutral ─ */
  --white:        #FFFFFF;
  --bg:           #F4F6F5;
  --surface:      #FFFFFF;
  --border:       #E2EAE6;
  --border-soft:  #EEF3F0;
  --text:         #1A2B23;
  --text-mid:     #4A6358;
  --text-soft:    #7A9488;
  --text-muted:   #A8BDB5;

  /* ─ Status ─ */
  --status-new:       #2B7CB8;
  --status-open:      #E8860A;
  --status-progress:  #7C3AED;
  --status-waiting:   #6B7280;
  --status-resolved:  #2E7D52;
  --status-closed:    #374151;
  --status-escalated: #8B1A2E;
  --status-urgent:    #DC2626;

  /* ─ Priority ─ */
  --p-low:      #2E7D52;
  --p-medium:   #E8860A;
  --p-high:     #DC2626;
  --p-critical: #8B1A2E;

  /* ─ Sidebar ─ */
  --sidebar-bg:    #0F2318;
  --sidebar-hover: rgba(255,255,255,.06);
  --sidebar-active:rgba(46,125,82,.25);
  --sidebar-text:  rgba(255,255,255,.75);
  --sidebar-width: 260px;

  /* ─ Shadow ─ */
  --shadow-sm:  0 1px 4px rgba(30,92,58,.08);
  --shadow-md:  0 4px 16px rgba(30,92,58,.1);
  --shadow-lg:  0 12px 40px rgba(30,92,58,.14);
  --shadow-xl:  0 24px 64px rgba(30,92,58,.18);

  /* ─ Radius ─ */
  --r-sm:  8px;
  --r-md:  14px;
  --r-lg:  20px;
  --r-xl:  28px;
  --r-full:100px;
}

*, *::before, *::after { margin:0; padding:0; box-sizing:border-box; }
html { scroll-behavior:smooth; font-size:15px; }
body {
  font-family:'Plus Jakarta Sans', sans-serif;
  color:var(--text); background:var(--bg);
  overflow-x:hidden; min-height:100vh;
}
h1,h2,h3 { font-family:'Fraunces', serif; }
a { text-decoration:none; color:inherit; }
img { max-width:100%; display:block; }
button { cursor:pointer; font-family:'Plus Jakarta Sans', sans-serif; }

/* ═══ DASHBOARD LAYOUT ═══ */
.app-layout { display:flex; min-height:100vh; }

/* ─── SIDEBAR ─── */
.sidebar {
  width:var(--sidebar-width); background:var(--sidebar-bg);
  display:flex; flex-direction:column;
  position:fixed; left:0; top:0; bottom:0; z-index:200;
  overflow-y:auto; overflow-x:hidden;
  transition:transform .3s;
}
.sidebar::-webkit-scrollbar { width:4px; }
.sidebar::-webkit-scrollbar-thumb { background:rgba(255,255,255,.1); border-radius:2px; }

.sidebar-logo {
  padding:1.75rem 1.5rem 1.25rem;
  border-bottom:1px solid rgba(255,255,255,.07);
  display:flex; align-items:center; gap:.85rem;
}
.sidebar-logo-icon {
  width:42px; height:42px; border-radius:12px;
  background:linear-gradient(135deg,var(--green),var(--green-mid));
  display:flex; align-items:center; justify-content:center;
  font-size:1.25rem; flex-shrink:0;
}
.sidebar-logo-text .brand { font-family:'Fraunces',serif; font-size:1.05rem; font-weight:700; color:#fff; line-height:1.2; }
.sidebar-logo-text .sub { font-size:.68rem; color:rgba(255,255,255,.45); letter-spacing:.05em; text-transform:uppercase; margin-top:.1rem; }

.sidebar-user {
  padding:1.25rem 1.5rem;
  border-bottom:1px solid rgba(255,255,255,.07);
  display:flex; align-items:center; gap:.85rem;
}
.sidebar-avatar {
  width:38px; height:38px; border-radius:10px; flex-shrink:0;
  background:linear-gradient(135deg,var(--green-mid),var(--green));
  display:flex; align-items:center; justify-content:center;
  font-weight:800; font-size:.9rem; color:#fff;
}
.sidebar-user-info .name { font-size:.82rem; font-weight:700; color:#fff; }
.sidebar-user-info .role { font-size:.68rem; color:rgba(255,255,255,.45); margin-top:.1rem; }
.sidebar-badge {
  margin-left:auto; background:var(--red); color:#fff;
  font-size:.65rem; font-weight:800; border-radius:6px; padding:.15rem .45rem;
}

.sidebar-section { padding:.85rem 1.5rem .4rem; }
.sidebar-section-label {
  font-size:.62rem; font-weight:800; letter-spacing:.12em; text-transform:uppercase;
  color:rgba(255,255,255,.28);
}

.sidebar-nav { padding:.4rem .75rem; flex:1; }
.nav-item {
  display:flex; align-items:center; gap:.85rem;
  padding:.7rem .85rem; border-radius:10px; margin-bottom:.2rem;
  color:var(--sidebar-text); font-size:.82rem; font-weight:500;
  transition:all .2s; position:relative; cursor:pointer;
}
.nav-item:hover { background:var(--sidebar-hover); color:#fff; }
.nav-item.active { background:var(--sidebar-active); color:#fff; font-weight:700; }
.nav-item.active::before { content:''; position:absolute; left:0; top:20%; bottom:20%; width:3px; border-radius:2px; background:var(--green-mid); }
.nav-item .ni { font-size:1rem; width:20px; text-align:center; flex-shrink:0; }
.nav-item .badge { margin-left:auto; background:var(--red); color:#fff; font-size:.6rem; font-weight:800; border-radius:6px; padding:.15rem .45rem; }
.nav-item .badge-g { margin-left:auto; background:var(--green); color:#fff; font-size:.6rem; font-weight:800; border-radius:6px; padding:.15rem .45rem; }

.sidebar-footer {
  padding:1.25rem 1.5rem; border-top:1px solid rgba(255,255,255,.07);
}
.sidebar-footer a {
  display:flex; align-items:center; gap:.75rem; color:rgba(255,255,255,.4);
  font-size:.78rem; padding:.5rem 0; transition:color .2s;
}
.sidebar-footer a:hover { color:rgba(255,255,255,.75); }

/* ─── MAIN CONTENT ─── */
.main-content {
  margin-left:var(--sidebar-width); flex:1;
  display:flex; flex-direction:column; min-height:100vh;
}

/* ─── TOPBAR ─── */
.topbar {
  background:#fff; border-bottom:1px solid var(--border);
  padding:0 2rem; height:64px;
  display:flex; align-items:center; justify-content:space-between;
  position:sticky; top:0; z-index:100;
  box-shadow:var(--shadow-sm);
}
.topbar-left { display:flex; align-items:center; gap:1rem; }
.topbar-title { font-family:'Fraunces',serif; font-size:1.15rem; font-weight:700; color:var(--text); }
.topbar-subtitle { font-size:.75rem; color:var(--text-soft); margin-top:.1rem; }
.topbar-right { display:flex; align-items:center; gap:.75rem; }

.topbar-btn {
  width:38px; height:38px; border-radius:10px; border:none; background:var(--bg);
  display:flex; align-items:center; justify-content:center; font-size:1rem;
  color:var(--text-mid); transition:all .2s; position:relative;
}
.topbar-btn:hover { background:var(--green-light); color:var(--green); }
.topbar-btn .notif-dot {
  position:absolute; top:6px; right:6px; width:8px; height:8px;
  background:var(--red); border-radius:50%; border:2px solid #fff;
}

.search-bar {
  display:flex; align-items:center; gap:.6rem;
  background:var(--bg); border:1.5px solid var(--border);
  border-radius:10px; padding:.45rem .85rem;
  transition:border-color .2s; width:280px;
}
.search-bar:focus-within { border-color:var(--green); }
.search-bar input { border:none; background:transparent; font-family:inherit; font-size:.82rem; color:var(--text); outline:none; flex:1; }
.search-bar input::placeholder { color:var(--text-muted); }

/* ─── PAGE BODY ─── */
.page-body { padding:2rem; flex:1; }

/* ─── CARDS ─── */
.card {
  background:#fff; border-radius:var(--r-lg); border:1px solid var(--border);
  box-shadow:var(--shadow-sm);
}
.card-header {
  padding:1.5rem; border-bottom:1px solid var(--border-soft);
  display:flex; align-items:center; justify-content:space-between;
}
.card-title { font-family:'Fraunces',serif; font-size:1rem; font-weight:700; }
.card-body { padding:1.5rem; }

/* ─── STAT CARDS ─── */
.stats-row { display:grid; grid-template-columns:repeat(4,1fr); gap:1.25rem; margin-bottom:1.75rem; }
.stat-card {
  background:#fff; border-radius:var(--r-lg); padding:1.5rem;
  border:1px solid var(--border); box-shadow:var(--shadow-sm);
  position:relative; overflow:hidden; transition:transform .3s,box-shadow .3s;
}
.stat-card:hover { transform:translateY(-3px); box-shadow:var(--shadow-md); }
.stat-card::after { content:''; position:absolute; bottom:-20px; right:-20px; width:90px; height:90px; border-radius:50%; opacity:.07; }
.stat-card.green::after { background:var(--green); }
.stat-card.red::after { background:var(--red); }
.stat-card.blue::after { background:var(--blue); }
.stat-card.orange::after { background:#E8860A; }
.stat-icon { width:44px; height:44px; border-radius:12px; display:flex; align-items:center; justify-content:center; font-size:1.25rem; margin-bottom:1rem; }
.stat-icon.green { background:var(--green-light); }
.stat-icon.red { background:var(--red-light); }
.stat-icon.blue { background:var(--blue-light); }
.stat-icon.orange { background:#FEF3E0; }
.stat-num { font-family:'Fraunces',serif; font-size:2rem; font-weight:700; line-height:1; color:var(--text); }
.stat-label { font-size:.75rem; color:var(--text-soft); margin-top:.3rem; }
.stat-trend { font-size:.72rem; font-weight:700; margin-top:.5rem; }
.stat-trend.up { color:var(--green); }
.stat-trend.down { color:var(--red); }

/* ─── BADGES / TAGS ─── */
.badge {
  display:inline-flex; align-items:center; gap:.3rem;
  border-radius:100px; padding:.25rem .7rem;
  font-size:.7rem; font-weight:700; white-space:nowrap;
}
.badge::before { content:''; width:5px; height:5px; border-radius:50%; background:currentColor; }
.badge-new { background:#EBF4FC; color:var(--status-new); }
.badge-open { background:#FEF3E0; color:var(--status-open); }
.badge-progress { background:#F3EFFE; color:var(--status-progress); }
.badge-waiting { background:#F3F4F6; color:var(--status-waiting); }
.badge-resolved { background:var(--green-light); color:var(--status-resolved); }
.badge-closed { background:#F9FAFB; color:var(--status-closed); }
.badge-escalated { background:var(--red-light); color:var(--status-escalated); }

.priority-badge { border-radius:6px; padding:.2rem .55rem; font-size:.67rem; font-weight:800; letter-spacing:.04em; }
.priority-low { background:var(--green-light); color:var(--p-low); }
.priority-medium { background:#FEF3E0; color:var(--p-medium); }
.priority-high { background:#FEE2E2; color:var(--p-high); }
.priority-critical { background:var(--red-light); color:var(--p-critical); }

.category-badge { border-radius:8px; padding:.25rem .65rem; font-size:.7rem; font-weight:600; border:1px solid; }
.cat-plainte { background:#FBE9EC; color:var(--red); border-color:#F5C6CE; }
.cat-incident { background:#FEF3E0; color:#B45309; border-color:#FDE08D; }
.cat-suggestion { background:var(--blue-light); color:var(--blue); border-color:#BFD9F0; }
.cat-maintenance { background:var(--green-light); color:var(--green); border-color:#B2D8C2; }
.cat-info { background:#F3F4F6; color:#4B5563; border-color:#D1D5DB; }
.cat-urgence { background:#FFF0F0; color:#991B1B; border-color:#FCA5A5; }

/* ─── BUTTONS ─── */
.btn {
  display:inline-flex; align-items:center; gap:.5rem;
  border-radius:10px; border:none; font-family:inherit;
  font-size:.82rem; font-weight:700; cursor:pointer;
  transition:all .2s; text-decoration:none;
}
.btn-sm { padding:.45rem .9rem; font-size:.75rem; }
.btn-md { padding:.65rem 1.25rem; }
.btn-lg { padding:.85rem 1.75rem; font-size:.9rem; }
.btn-green { background:var(--green); color:#fff; }
.btn-green:hover { background:var(--green-dark); transform:translateY(-1px); box-shadow:0 4px 16px rgba(46,125,82,.3); }
.btn-red { background:var(--red); color:#fff; }
.btn-red:hover { background:var(--red-dark); }
.btn-blue { background:var(--blue); color:#fff; }
.btn-outline { background:transparent; border:1.5px solid var(--border); color:var(--text-mid); }
.btn-outline:hover { border-color:var(--green); color:var(--green); background:var(--green-light); }
.btn-ghost { background:transparent; color:var(--text-soft); }
.btn-ghost:hover { background:var(--bg); color:var(--text); }
.btn-danger { background:#FEE2E2; color:#991B1B; }
.btn-danger:hover { background:#FECACA; }

/* ─── TABLES ─── */
.table-wrap { overflow-x:auto; }
table { width:100%; border-collapse:collapse; }
thead th {
  padding:.75rem 1rem; text-align:left;
  font-size:.7rem; font-weight:800; letter-spacing:.08em; text-transform:uppercase;
  color:var(--text-soft); background:var(--bg); border-bottom:1px solid var(--border);
  white-space:nowrap;
}
tbody tr { border-bottom:1px solid var(--border-soft); transition:background .15s; }
tbody tr:hover { background:var(--bg); }
tbody td { padding:.9rem 1rem; font-size:.82rem; color:var(--text); }
tbody tr:last-child { border-bottom:none; }

/* ─── FORMS ─── */
.form-group { margin-bottom:1.25rem; }
.form-group label { display:block; font-size:.78rem; font-weight:700; color:var(--text); margin-bottom:.45rem; }
.form-group label span { color:var(--red); }
.form-control {
  width:100%; border:1.5px solid var(--border); border-radius:10px;
  padding:.75rem 1rem; font-family:inherit; font-size:.88rem;
  background:#fff; color:var(--text); outline:none;
  transition:border-color .2s, box-shadow .2s;
}
.form-control:focus { border-color:var(--green); box-shadow:0 0 0 4px rgba(46,125,82,.1); }
.form-control::placeholder { color:var(--text-muted); }
textarea.form-control { resize:vertical; min-height:110px; }
select.form-control { appearance:none; background-image:url("data:image/svg+xml,%3Csvg width='12' height='8' viewBox='0 0 12 8' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M1 1L6 6L11 1' stroke='%237A9488' stroke-width='1.5' stroke-linecap='round'/%3E%3C/svg%3E"); background-repeat:no-repeat; background-position:right 1rem center; }
.form-row { display:grid; grid-template-columns:1fr 1fr; gap:1rem; }
.form-hint { font-size:.72rem; color:var(--text-soft); margin-top:.35rem; }
.form-error { font-size:.72rem; color:var(--red); margin-top:.35rem; }

/* ─── UPLOAD ZONE ─── */
.upload-zone {
  border:2px dashed var(--border); border-radius:var(--r-md); padding:2.5rem;
  text-align:center; cursor:pointer; transition:all .2s; background:var(--bg);
}
.upload-zone:hover { border-color:var(--green); background:var(--green-light); }
.upload-icon { font-size:2rem; margin-bottom:.75rem; }
.upload-text { font-size:.82rem; color:var(--text-soft); }
.upload-text strong { color:var(--green); }

/* ─── SLA BAR ─── */
.sla-bar { height:5px; border-radius:3px; background:var(--bg); overflow:hidden; margin-top:.35rem; }
.sla-fill { height:100%; border-radius:3px; transition:width .5s; }
.sla-ok { background:var(--green); }
.sla-warn { background:#E8860A; }
.sla-breach { background:var(--red); }

/* ─── TIMELINE ─── */
.timeline { display:flex; flex-direction:column; gap:0; }
.tl-item { display:flex; gap:1rem; padding-bottom:1.5rem; position:relative; }
.tl-item:not(:last-child)::before { content:''; position:absolute; left:17px; top:36px; bottom:0; width:1.5px; background:var(--border); }
.tl-dot { width:36px; height:36px; border-radius:10px; flex-shrink:0; display:flex; align-items:center; justify-content:center; font-size:.85rem; }
.tl-dot-green { background:var(--green-light); }
.tl-dot-red { background:var(--red-light); }
.tl-dot-blue { background:var(--blue-light); }
.tl-dot-gray { background:var(--bg); }
.tl-content { flex:1; padding-top:.35rem; }
.tl-meta { font-size:.72rem; color:var(--text-muted); margin-top:.2rem; }

/* ─── NOTIFICATION PANEL ─── */
.notif-panel {
  position:absolute; top:calc(100% + .5rem); right:0;
  width:360px; background:#fff; border-radius:var(--r-lg);
  border:1px solid var(--border); box-shadow:var(--shadow-xl);
  z-index:500; overflow:hidden; display:none;
}
.notif-panel.open { display:block; }
.notif-header { padding:1rem 1.25rem; border-bottom:1px solid var(--border-soft); display:flex; justify-content:space-between; align-items:center; }
.notif-header h4 { font-size:.88rem; font-weight:800; }
.notif-item { padding:1rem 1.25rem; border-bottom:1px solid var(--border-soft); display:flex; gap:.85rem; transition:background .15s; cursor:pointer; }
.notif-item:hover { background:var(--bg); }
.notif-item.unread { background:var(--green-light); }
.notif-dot-icon { width:36px; height:36px; border-radius:10px; flex-shrink:0; display:flex; align-items:center; justify-content:center; font-size:.9rem; }
.notif-text { font-size:.78rem; line-height:1.5; }
.notif-time { font-size:.68rem; color:var(--text-muted); margin-top:.2rem; }

/* ─── DROPDOWN MENU ─── */
.dropdown { position:relative; }
.dropdown-menu {
  position:absolute; top:calc(100% + .5rem); right:0;
  background:#fff; border-radius:var(--r-md); border:1px solid var(--border);
  box-shadow:var(--shadow-lg); min-width:180px; z-index:400; overflow:hidden;
  display:none; animation:dropIn .15s ease;
}
.dropdown-menu.open { display:block; }
@keyframes dropIn { from{opacity:0;transform:translateY(-6px)} to{opacity:1;transform:translateY(0)} }
.dropdown-item { display:flex; align-items:center; gap:.75rem; padding:.7rem 1rem; font-size:.8rem; font-weight:500; color:var(--text-mid); transition:background .15s; cursor:pointer; }
.dropdown-item:hover { background:var(--bg); color:var(--text); }
.dropdown-item.danger { color:var(--red); }
.dropdown-divider { height:1px; background:var(--border-soft); margin:.25rem 0; }

/* ─── TICKET CARD (Resident) ─── */
.ticket-card {
  background:#fff; border-radius:var(--r-md); border:1px solid var(--border);
  padding:1.25rem; transition:transform .2s, box-shadow .2s, border-color .2s;
  cursor:pointer;
}
.ticket-card:hover { transform:translateY(-2px); box-shadow:var(--shadow-md); border-color:var(--green); }
.ticket-card-head { display:flex; justify-content:space-between; align-items:flex-start; margin-bottom:.75rem; }
.ticket-id { font-size:.68rem; font-weight:800; color:var(--text-muted); letter-spacing:.08em; }
.ticket-title { font-size:.92rem; font-weight:700; margin:.4rem 0 .35rem; line-height:1.4; }
.ticket-meta { font-size:.72rem; color:var(--text-soft); display:flex; align-items:center; gap:.85rem; flex-wrap:wrap; }
.ticket-meta span { display:flex; align-items:center; gap:.3rem; }

/* ─── MODAL ─── */
.modal-overlay {
  position:fixed; inset:0; background:rgba(15,35,24,.6); z-index:900;
  display:flex; align-items:center; justify-content:center; padding:1.5rem;
  opacity:0; pointer-events:none; transition:opacity .2s;
}
.modal-overlay.open { opacity:1; pointer-events:all; }
.modal {
  background:#fff; border-radius:var(--r-xl); max-width:580px; width:100%;
  max-height:90vh; overflow-y:auto; box-shadow:var(--shadow-xl);
  transform:scale(.96); transition:transform .2s;
}
.modal-overlay.open .modal { transform:scale(1); }
.modal-header { padding:1.75rem; border-bottom:1px solid var(--border-soft); display:flex; justify-content:space-between; align-items:center; }
.modal-header h3 { font-family:'Fraunces',serif; font-size:1.1rem; font-weight:700; }
.modal-close { width:32px; height:32px; border-radius:8px; border:none; background:var(--bg); font-size:1.1rem; display:flex; align-items:center; justify-content:center; cursor:pointer; }
.modal-body { padding:1.75rem; }
.modal-footer { padding:1.25rem 1.75rem; border-top:1px solid var(--border-soft); display:flex; justify-content:flex-end; gap:.75rem; }

/* ─── RATING STARS ─── */
.stars { display:flex; gap:.25rem; }
.star { font-size:1.25rem; cursor:pointer; transition:transform .15s; }
.star:hover { transform:scale(1.25); }

/* ─── PROGRESS ─── */
.progress { height:8px; border-radius:4px; background:var(--bg); overflow:hidden; }
.progress-fill { height:100%; border-radius:4px; transition:width .6s; }

/* ─── QUICK ACTION CARDS ─── */
.quick-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:1rem; }
.quick-card {
  background:#fff; border-radius:var(--r-lg); padding:1.75rem 1.5rem;
  border:1.5px solid var(--border); text-align:center; cursor:pointer;
  transition:all .25s; text-decoration:none; display:flex; flex-direction:column; align-items:center; gap:.65rem;
}
.quick-card:hover { border-color:var(--green); background:var(--green-light); transform:translateY(-4px); box-shadow:var(--shadow-md); }
.quick-card .qi { font-size:2.2rem; }
.quick-card .ql { font-size:.8rem; font-weight:700; color:var(--text); }
.quick-card .qs { font-size:.7rem; color:var(--text-soft); }

/* ─── ANNOUNCEMENT BANNER ─── */
.announcement {
  border-radius:var(--r-md); padding:1rem 1.25rem; margin-bottom:.75rem;
  display:flex; gap:.85rem; align-items:flex-start; border:1px solid;
}
.ann-green { background:var(--green-light); border-color:#B2D8C2; }
.ann-red { background:var(--red-light); border-color:#F5C6CE; }
.ann-blue { background:var(--blue-light); border-color:#BFD9F0; }
.ann-orange { background:#FEF3E0; border-color:#FDE08D; }
.ann-icon { font-size:1.2rem; flex-shrink:0; margin-top:.1rem; }
.ann-title { font-size:.82rem; font-weight:800; margin-bottom:.2rem; }
.ann-text { font-size:.78rem; color:var(--text-mid); line-height:1.55; }
.ann-close { margin-left:auto; background:none; border:none; font-size:1rem; color:var(--text-muted); cursor:pointer; flex-shrink:0; }

/* ─── CHARTS (CSS) ─── */
.chart-bar-row { display:flex; align-items:center; gap:.85rem; margin-bottom:.65rem; }
.chart-bar-label { font-size:.75rem; color:var(--text-mid); min-width:90px; }
.chart-bar-track { flex:1; height:10px; border-radius:5px; background:var(--bg); overflow:hidden; }
.chart-bar-fill { height:100%; border-radius:5px; }
.chart-bar-val { font-size:.75rem; font-weight:700; min-width:32px; text-align:right; color:var(--text); }
.donut-wrap { display:flex; align-items:center; gap:2rem; }
.donut-legend { display:flex; flex-direction:column; gap:.5rem; }
.donut-leg-item { display:flex; align-items:center; gap:.6rem; font-size:.75rem; }
.donut-leg-dot { width:10px; height:10px; border-radius:3px; flex-shrink:0; }

/* ─── EMPTY STATE ─── */
.empty-state { text-align:center; padding:3.5rem 2rem; }
.empty-icon { font-size:3rem; margin-bottom:1rem; }
.empty-title { font-size:.95rem; font-weight:700; margin-bottom:.4rem; }
.empty-text { font-size:.8rem; color:var(--text-soft); }

/* ─── TOAST ─── */
.toast-container { position:fixed; bottom:1.5rem; right:1.5rem; z-index:9999; display:flex; flex-direction:column; gap:.5rem; }
.toast {
  background:#fff; border-radius:var(--r-md); padding:.85rem 1.25rem;
  box-shadow:var(--shadow-xl); border:1px solid var(--border);
  display:flex; align-items:center; gap:.75rem; min-width:280px; max-width:380px;
  animation:slideIn .3s ease;
}
@keyframes slideIn { from{transform:translateX(100%);opacity:0} to{transform:translateX(0);opacity:1} }
.toast-icon { font-size:1.1rem; flex-shrink:0; }
.toast-msg { font-size:.8rem; font-weight:600; flex:1; }
.toast-close { background:none; border:none; font-size:1rem; color:var(--text-muted); cursor:pointer; }
.toast-success { border-left:4px solid var(--green); }
.toast-error { border-left:4px solid var(--red); }
.toast-info { border-left:4px solid var(--blue); }
.toast-warn { border-left:4px solid #E8860A; }

/* ─── TABS ─── */
.tabs { display:flex; gap:.25rem; border-bottom:2px solid var(--border); margin-bottom:1.5rem; }
.tab { padding:.7rem 1.1rem; font-size:.8rem; font-weight:700; color:var(--text-soft); border:none; background:none; cursor:pointer; border-bottom:2px solid transparent; margin-bottom:-2px; transition:all .2s; }
.tab.active { color:var(--green); border-bottom-color:var(--green); }
.tab:hover { color:var(--green); }
.tab-pane { display:none; }
.tab-pane.active { display:block; }

/* ─── FILTERS BAR ─── */
.filters-bar { display:flex; align-items:center; gap:.75rem; flex-wrap:wrap; margin-bottom:1.25rem; }
.filter-chip {
  display:flex; align-items:center; gap:.4rem;
  background:#fff; border:1.5px solid var(--border); border-radius:8px;
  padding:.4rem .85rem; font-size:.75rem; font-weight:600; color:var(--text-mid);
  cursor:pointer; transition:all .2s;
}
.filter-chip:hover, .filter-chip.active { border-color:var(--green); color:var(--green); background:var(--green-light); }

/* ─── SCROLLBAR GLOBAL ─── */
::-webkit-scrollbar { width:6px; height:6px; }
::-webkit-scrollbar-track { background:transparent; }
::-webkit-scrollbar-thumb { background:var(--border); border-radius:3px; }
::-webkit-scrollbar-thumb:hover { background:var(--text-muted); }

/* ─── ANIMATIONS ─── */
.reveal { opacity:0; transform:translateY(18px); }
.reveal.in { opacity:1; transform:translateY(0); transition:opacity .5s ease, transform .5s ease; }
.fade-in { animation:fadeIn .4s ease; }
@keyframes fadeIn { from{opacity:0} to{opacity:1} }
.pulse-dot { width:8px; height:8px; border-radius:50%; animation:pulseDot 2s infinite; }
@keyframes pulseDot { 0%,100%{opacity:1;transform:scale(1)} 50%{opacity:.5;transform:scale(.8)} }

/* ─── LOGIN PAGE ─── */
.login-page {
  min-height:100vh; display:grid; grid-template-columns:1fr 1fr;
  background:#fff;
}
.login-left {
  background:linear-gradient(160deg,var(--green-dark) 0%,var(--green) 50%,#4CAF7D 100%);
  display:flex; flex-direction:column; justify-content:center; align-items:center;
  padding:4rem; text-align:center; position:relative; overflow:hidden;
}
.login-left::before { content:''; position:absolute; width:400px; height:400px; border-radius:50%; background:rgba(255,255,255,.05); top:-100px; right:-100px; }
.login-left::after { content:''; position:absolute; width:300px; height:300px; border-radius:50%; background:rgba(139,26,46,.15); bottom:-80px; left:-60px; }
.login-brand { position:relative; z-index:1; color:#fff; }
.login-brand .logo-icon { font-size:4rem; margin-bottom:1.5rem; }
.login-brand h1 { font-size:2rem; font-weight:700; margin-bottom:.5rem; }
.login-brand .tagline { font-size:.9rem; color:rgba(255,255,255,.75); line-height:1.65; margin-top:.75rem; max-width:320px; }
.login-features { margin-top:3rem; display:flex; flex-direction:column; gap:.85rem; position:relative; z-index:1; }
.login-feature { display:flex; align-items:center; gap:.85rem; color:rgba(255,255,255,.85); font-size:.82rem; }
.login-feature-icon { width:34px; height:34px; border-radius:10px; background:rgba(255,255,255,.12); display:flex; align-items:center; justify-content:center; font-size:.95rem; flex-shrink:0; }

.login-right { display:flex; align-items:center; justify-content:center; padding:3rem; background:var(--bg); }
.login-form-wrap { background:#fff; border-radius:var(--r-xl); padding:3rem; width:100%; max-width:440px; box-shadow:var(--shadow-lg); border:1px solid var(--border); }
.login-form-wrap h2 { font-size:1.5rem; font-weight:700; margin-bottom:.4rem; }
.login-form-wrap .sub { font-size:.82rem; color:var(--text-soft); margin-bottom:2rem; }
.role-tabs { display:flex; gap:.5rem; margin-bottom:1.75rem; }
.role-tab {
  flex:1; padding:.65rem; border-radius:10px; border:2px solid var(--border);
  font-size:.78rem; font-weight:700; color:var(--text-soft); background:#fff;
  cursor:pointer; transition:all .2s; text-align:center;
}
.role-tab.active { border-color:var(--green); color:var(--green); background:var(--green-light); }
.login-link { color:var(--green); font-weight:700; font-size:.8rem; }

/* ─── RESPONSIVE ─── */
@media(max-width:1200px) { .stats-row { grid-template-columns:repeat(2,1fr); } }
@media(max-width:900px) {
  .sidebar { transform:translateX(-100%); }
  .sidebar.open { transform:translateX(0); }
  .main-content { margin-left:0; }
  .quick-grid { grid-template-columns:repeat(2,1fr); }
  .login-page { grid-template-columns:1fr; }
  .login-left { display:none; }
}
@media(max-width:640px) {
  .stats-row { grid-template-columns:1fr 1fr; }
  .form-row { grid-template-columns:1fr; }
  .page-body { padding:1rem; }
  .quick-grid { grid-template-columns:1fr 1fr; }
}

/* ─── PHP SPECIFIC ADDITIONS ─── */
.badge-blue { background:#EBF4FC; color:#2B7CB8; }
.badge-orange { background:#FEF3E0; color:#E8860A; }
.badge-purple { background:#F3EFFE; color:#7C3AED; }
.badge-gray { background:#F3F4F6; color:#6B7280; }
.badge-green { background:var(--green-light); color:var(--green); }
.badge-dark { background:#F9FAFB; color:#374151; }
.badge-red { background:var(--red-light); color:var(--red); }
.badge-red { background:var(--red-light); color:var(--red); }
.badge::before { display:none; }

.flash {
  display:flex; align-items:center; gap:.75rem;
  padding:.85rem 1.25rem; border-radius:var(--r-md);
  font-size:.85rem; font-weight:600; margin-bottom:1.25rem;
}
.flash-success { background:var(--green-light); color:var(--green); border:1px solid #B2D8C2; }
.flash-error { background:var(--red-light); color:var(--red); border:1px solid #F5C6CE; }
.flash-warn { background:#FEF3E0; color:#E8860A; border:1px solid #FDE08D; }
.flash-info { background:var(--blue-light); color:var(--blue); border:1px solid #BFD9F0; }

.image-preview { max-width:200px; max-height:100px; object-fit:contain; border-radius:8px; border:1px solid var(--border); }
.logo-preview-wrap { display:flex; align-items:center; gap:1rem; margin-top:.65rem; }
.color-preview { display:inline-block; width:32px; height:32px; border-radius:8px; border:1px solid var(--border); vertical-align:middle; }
.section-header { font-size:.72rem; font-weight:800; letter-spacing:.12em; text-transform:uppercase; color:var(--text-muted); padding:.85rem 0 .45rem; }