/* ============================================================
   RED TOP Support — Design System v2.0
   Neutral professional palette · Sidebar navigation layout
   ============================================================ */

/* ── 1. Variables ─────────────────────────────────────────── */
:root {
  --sidebar-w: 260px;
  --sidebar-cw: 68px;
  --topbar-h: 56px;

  --sidebar-bg: #1e2235;
  --sidebar-hover: rgba(255,255,255,.06);
  --sidebar-active: rgba(255,255,255,.10);
  --sidebar-text: #8b92a8;
  --sidebar-text-active: #fff;
  --sidebar-section: #555d75;
  --sidebar-border: #2b3048;

  --bg-page: #f2f4f7;
  --bg-white: #fff;
  --bg-primary: #fff;
  --bg-secondary: #f7f8fa;
  --bg-accent: #eef2ff;
  --bg-gray-50: #f8f9fa;
  --bg-gray-100: #f1f3f5;
  --bg-hover: #f1f3f5;
  --bg-overlay: rgba(0,0,0,.4);

  --text-primary: #1e293b;
  --text-secondary: #64748b;
  --text-muted: #94a3b8;
  --text-white: #fff;

  --primary: #5a67d8;
  --primary-hover: #4c51bf;
  --primary-light: #eef2ff;
  --secondary: #64748b;
  --accent: #5a67d8;

  --success: #22c55e; --success-bg: #dcfce7;
  --error:   #ef4444; --error-bg:   #fee2e2;
  --warning: #f59e0b; --warning-bg: #fef3c7;
  --info:    #3b82f6; --info-bg:    #dbeafe;

  --border:        #e2e8f0;
  --border-color:  #e2e8f0;
  --border-medium: #cbd5e1;
  --border-strong: #94a3b8;

  --shadow-sm: 0 1px 2px rgba(0,0,0,.04);
  --shadow:    0 1px 3px rgba(0,0,0,.06), 0 1px 2px rgba(0,0,0,.04);
  --shadow-md: 0 4px 6px rgba(0,0,0,.04);
  --shadow-lg: 0 10px 20px rgba(0,0,0,.06);
  --shadow-xl: 0 20px 40px rgba(0,0,0,.08);

  --radius-sm: 6px;
  --radius: 8px;
  --radius-lg: 12px;
  --radius-xl: 16px;

  --transition: .2s ease;

  --space-1:4px; --space-2:8px; --space-3:12px; --space-4:16px;
  --space-5:20px; --space-6:24px; --space-8:32px; --space-10:40px; --space-12:48px;

  --font-sans: -apple-system,BlinkMacSystemFont,'Segoe UI',Inter,Roboto,sans-serif;
  --font-mono: 'SF Mono','Fira Code','Cascadia Code',monospace;
}

/* ── 2. Reset ─────────────────────────────────────────────── */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{font-size:16px;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}
body{font-family:var(--font-sans);color:var(--text-primary);background:var(--bg-page);line-height:1.5;min-height:100vh}
a{color:var(--primary);text-decoration:none;transition:color var(--transition)}
a:hover{color:var(--primary-hover)}
img{max-width:100%;height:auto}
code{font-family:var(--font-mono);font-size:.875em;background:var(--bg-gray-100);padding:2px 6px;border-radius:4px}

/* ── 3. Sidebar layout ───────────────────────────────────── */
body.has-sidebar{display:flex}
.sidebar{
  position:fixed;top:0;left:0;bottom:0;width:var(--sidebar-w);
  background:var(--sidebar-bg);color:var(--sidebar-text);
  display:flex;flex-direction:column;z-index:1000;
  transition:width .25s ease;overflow:hidden;
  border-right:1px solid var(--sidebar-border);
}
.sidebar-header{
  display:flex;align-items:center;justify-content:space-between;
  padding:16px 18px;height:var(--topbar-h);border-bottom:1px solid var(--sidebar-border);
  flex-shrink:0;
}
.sidebar-brand{display:flex;align-items:center;gap:10px;overflow:hidden;white-space:nowrap}
.brand-dot{width:10px;height:10px;border-radius:50%;background:#ef4444;flex-shrink:0}
.brand-text{font-size:1rem;font-weight:700;color:#fff;letter-spacing:.5px}
.sidebar-toggle{
  background:none;border:none;color:var(--sidebar-text);cursor:pointer;
  width:28px;height:28px;border-radius:6px;display:flex;align-items:center;justify-content:center;
  transition:background var(--transition);flex-shrink:0;font-size:18px;
}
.sidebar-toggle:hover{background:var(--sidebar-hover);color:#fff}
.sidebar-toggle::after{content:'\276E';display:block}

.sidebar-nav{flex:1;overflow-y:auto;overflow-x:hidden;padding:12px 0;scrollbar-width:thin;scrollbar-color:var(--sidebar-border) transparent}
.nav-section{margin-bottom:8px}
.nav-section-title{
  padding:8px 20px 4px;font-size:.65rem;font-weight:700;text-transform:uppercase;
  letter-spacing:1px;color:var(--sidebar-section);white-space:nowrap;overflow:hidden;
}
.nav-item{
  display:flex;align-items:center;gap:12px;padding:8px 20px;
  color:var(--sidebar-text);font-size:.875rem;font-weight:500;
  transition:all var(--transition);cursor:pointer;white-space:nowrap;
  border-left:3px solid transparent;text-decoration:none;
}
.nav-item:hover{background:var(--sidebar-hover);color:var(--sidebar-text-active)}
.nav-item.active{background:var(--sidebar-active);color:var(--sidebar-text-active);border-left-color:var(--primary)}
.nav-icon{width:20px;text-align:center;flex-shrink:0;font-size:1rem;line-height:1}
.nav-text{overflow:hidden;text-overflow:ellipsis}

.sidebar-footer{padding:12px 0;border-top:1px solid var(--sidebar-border);flex-shrink:0}

/* collapsed */
body.sidebar-collapsed .sidebar{width:var(--sidebar-cw)}
body.sidebar-collapsed .brand-text,
body.sidebar-collapsed .nav-text,
body.sidebar-collapsed .nav-section-title,
body.sidebar-collapsed .user-name{display:none}
body.sidebar-collapsed .sidebar-toggle::after{content:'\276F'}
body.sidebar-collapsed .nav-item{padding:8px 0;justify-content:center}
body.sidebar-collapsed .nav-item .nav-icon{width:100%;font-size:1.1rem}
body.sidebar-collapsed .sidebar-header{justify-content:center;padding:16px 8px}
body.sidebar-collapsed .sidebar-brand{justify-content:center}

/* ── 4. Main wrapper + topbar ─────────────────────────────── */
.main-wrapper{
  flex:1;margin-left:var(--sidebar-w);display:flex;flex-direction:column;
  min-height:100vh;transition:margin-left .25s ease;
}
body.sidebar-collapsed .main-wrapper{margin-left:var(--sidebar-cw)}

.topbar{
  position:sticky;top:0;z-index:100;height:var(--topbar-h);
  background:var(--bg-white);border-bottom:1px solid var(--border);
  display:flex;align-items:center;padding:0 24px;gap:16px;
  box-shadow:var(--shadow-sm);flex-shrink:0;
}
.topbar-burger{display:none;background:none;border:none;font-size:1.3rem;cursor:pointer;color:var(--text-primary);padding:4px 8px}
.topbar-title{font-size:1rem;font-weight:600;color:var(--text-primary);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.topbar-spacer{flex:1}
.topbar-actions{display:flex;align-items:center;gap:10px;margin-left:auto}

/* ── 5. Content area ──────────────────────────────────────── */
.content{flex:1;padding:24px}

/* No sidebar fallback */
body:not(.has-sidebar) .main-wrapper{margin-left:0}

/* ── 6. Container (backward compat) ──────────────────────── */
.container{max-width:1400px;margin:0 auto;width:100%}

/* ── 7. Page header (backward compat) ────────────────────── */
.page-header{margin-bottom:24px;padding:20px 24px;background:var(--bg-white);border:1px solid var(--border);border-radius:var(--radius-lg);box-shadow:var(--shadow-sm)}
.page-header-content{display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap}
.page-header-content h1{font-size:1.3rem;font-weight:700;margin:0}
.page-header-content p{font-size:.85rem;color:var(--text-secondary);margin:4px 0 0}
.page-header-actions{display:flex;align-items:center;gap:8px;flex-wrap:wrap}

/* ── 8. Cards ─────────────────────────────────────────────── */
.card{background:var(--bg-white);border:1px solid var(--border);border-radius:var(--radius-lg);padding:20px 24px;box-shadow:var(--shadow-sm);transition:box-shadow var(--transition)}

/* ── 9. Buttons ───────────────────────────────────────────── */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:6px;
  padding:8px 16px;border:1px solid transparent;border-radius:var(--radius);
  font-size:.875rem;font-weight:500;cursor:pointer;transition:all var(--transition);
  font-family:inherit;line-height:1.4;text-decoration:none;white-space:nowrap;
}
.btn:hover{transform:translateY(-1px)}
.btn:active{transform:translateY(0)}
.btn-primary{background:var(--primary);color:#fff;border-color:var(--primary)}
.btn-primary:hover{background:var(--primary-hover);border-color:var(--primary-hover);color:#fff}
.btn-secondary{background:transparent;color:var(--text-secondary);border-color:var(--border-medium)}
.btn-secondary:hover{background:var(--bg-gray-100);color:var(--text-primary);border-color:var(--border-strong)}
.btn-success{background:var(--success);color:#fff;border-color:var(--success)}
.btn-success:hover{background:#16a34a;border-color:#16a34a;color:#fff}
.btn-danger{background:var(--error);color:#fff;border-color:var(--error)}
.btn-danger:hover{background:#dc2626;border-color:#dc2626;color:#fff}
.btn-warning{background:var(--warning);color:#fff;border-color:var(--warning)}
.btn-sm{padding:4px 10px;font-size:.78rem;border-radius:var(--radius-sm)}
.btn-lg{padding:12px 24px;font-size:1rem}
.btn-block{display:flex;width:100%}
.btn-icon{padding:6px;min-width:34px;min-height:34px}

/* ── 10. Tables ───────────────────────────────────────────── */
table,.table{width:100%;border-collapse:collapse}
th{text-align:left;padding:10px 14px;font-size:.75rem;font-weight:600;color:var(--text-secondary);text-transform:uppercase;letter-spacing:.5px;border-bottom:2px solid var(--border);background:var(--bg-gray-50)}
td{padding:10px 14px;font-size:.875rem;border-bottom:1px solid var(--border);vertical-align:middle}
tbody tr:hover{background:var(--bg-hover)}

/* ── 11. Forms ────────────────────────────────────────────── */
input[type="text"],input[type="email"],input[type="password"],input[type="number"],input[type="search"],input[type="tel"],input[type="url"],input[type="date"],input[type="time"],
select,textarea{
  width:100%;padding:8px 12px;border:1px solid var(--border);border-radius:var(--radius);
  font-size:.875rem;font-family:inherit;color:var(--text-primary);background:var(--bg-white);
  transition:border-color var(--transition),box-shadow var(--transition);
}
input:focus,select:focus,textarea:focus{outline:none;border-color:var(--primary);box-shadow:0 0 0 3px rgba(90,103,216,.12)}
textarea{resize:vertical;min-height:80px}
label{display:block;font-size:.8rem;font-weight:500;color:var(--text-secondary);margin-bottom:4px}
.form-group{margin-bottom:16px}
.form-row{display:grid;grid-template-columns:1fr 1fr;gap:16px}

/* ── 12. Badges ───────────────────────────────────────────── */
.badge{display:inline-flex;align-items:center;gap:4px;padding:3px 10px;border-radius:20px;font-size:.72rem;font-weight:600;white-space:nowrap}
.badge-success{background:var(--success-bg);color:#16a34a}
.badge-danger,.badge-error{background:var(--error-bg);color:#dc2626}
.badge-warning{background:var(--warning-bg);color:#b45309}
.badge-info{background:var(--info-bg);color:#2563eb}
.badge-secondary{background:var(--bg-gray-100);color:var(--text-secondary)}
.badge-primary{background:var(--primary-light);color:var(--primary)}
.sla-badge{padding:2px 8px;border-radius:4px;font-size:.7rem;font-weight:600}

/* ── 13. Alerts ───────────────────────────────────────────── */
.alert{padding:14px 18px;border-radius:var(--radius);font-size:.875rem;margin-bottom:16px;border:1px solid transparent}
.alert-success{background:var(--success-bg);color:#16a34a;border-color:#bbf7d0}
.alert-danger,.alert-error{background:var(--error-bg);color:#dc2626;border-color:#fecaca}
.alert-warning{background:var(--warning-bg);color:#b45309;border-color:#fde68a}
.alert-info{background:var(--info-bg);color:#2563eb;border-color:#bfdbfe}

/* ── 14. Dashboard grid ──────────────────────────────────── */
.admin-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:16px}
.dashboard-card{
  display:flex;flex-direction:column;align-items:flex-start;gap:8px;
  padding:20px;background:var(--bg-white);border:1px solid var(--border);border-radius:var(--radius-lg);
  text-decoration:none;color:var(--text-primary);transition:all var(--transition);box-shadow:var(--shadow-sm);
}
.dashboard-card:hover{transform:translateY(-3px);box-shadow:var(--shadow-md);border-color:var(--border-medium);color:var(--text-primary)}
.dashboard-card .card-icon{font-size:1.5rem;margin-bottom:4px}
.dashboard-card h3{font-size:.95rem;font-weight:600;margin:0}
.dashboard-card p{font-size:.78rem;color:var(--text-secondary);margin:0;line-height:1.4}

/* Stat cards (dashboard) */
.stat-card{background:var(--bg-white);border:1px solid var(--border);border-radius:var(--radius-lg);padding:20px;box-shadow:var(--shadow-sm);display:flex;flex-direction:column;gap:8px}
.stat-value{font-size:2rem;font-weight:700;line-height:1}
.stat-label{font-size:.78rem;font-weight:500;color:var(--text-secondary);text-transform:uppercase;letter-spacing:.5px}
.stat-change{font-size:.75rem;font-weight:600}
.stat-change.up{color:var(--success)}
.stat-change.down{color:var(--error)}

/* ── 15. Gradient cards (legacy) ─────────────────────────── */
.gradient-purple{background:linear-gradient(135deg,#667eea,#764ba2);color:#fff}
.gradient-pink{background:linear-gradient(135deg,#f093fb,#f5576c);color:#fff}
.gradient-blue{background:linear-gradient(135deg,#4facfe,#00f2fe);color:#fff}
.gradient-green{background:linear-gradient(135deg,#43e97b,#38f9d7);color:#fff}
.gradient-orange{background:linear-gradient(135deg,#fa709a,#fee140);color:#fff}
.gradient-dark{background:linear-gradient(135deg,#30cfd0,#330867);color:#fff}
.gradient-mint{background:linear-gradient(135deg,#a8edea,#fed6e3)}
.gradient-peach{background:linear-gradient(135deg,#ffecd2,#fcb69f)}
.gradient-rose{background:linear-gradient(135deg,#ff9a9e,#fecfef)}
.gradient-lavender{background:linear-gradient(135deg,#fbc2eb,#a6c1ee)}

/* ── 16. Chart containers ────────────────────────────────── */
.chart-card{background:var(--bg-white);border:1px solid var(--border);border-radius:var(--radius-lg);padding:20px;box-shadow:var(--shadow-sm)}
.chart-card h3{font-size:.95rem;font-weight:600;margin:0 0 16px;color:var(--text-primary)}
.charts-row{display:grid;grid-template-columns:2fr 1fr;gap:16px}

/* ── 17. Toast / Notification ────────────────────────────── */
.toast-container{position:fixed;top:16px;right:16px;z-index:9999;display:flex;flex-direction:column;gap:8px}
.toast{padding:12px 18px;border-radius:var(--radius);font-size:.85rem;color:#fff;box-shadow:var(--shadow-lg);animation:toast-in .3s ease}
.toast-success{background:#22c55e}
.toast-error{background:#ef4444}
.toast-info{background:#3b82f6}
@keyframes toast-in{from{transform:translateX(100%);opacity:0}to{transform:translateX(0);opacity:1}}

/* ── 18. Tabs ─────────────────────────────────────────────── */
.tabs{display:flex;gap:2px;border-bottom:2px solid var(--border);margin-bottom:20px}
.tab{padding:10px 18px;font-size:.875rem;font-weight:500;color:var(--text-secondary);cursor:pointer;border-bottom:2px solid transparent;margin-bottom:-2px;transition:all var(--transition);background:none;border-top:none;border-left:none;border-right:none}
.tab:hover{color:var(--text-primary)}
.tab.active{color:var(--primary);border-bottom-color:var(--primary);font-weight:600}

/* ── 19. Utilities ────────────────────────────────────────── */
.text-center{text-align:center}
.text-right{text-align:right}
.text-muted{color:var(--text-muted)}
.text-secondary{color:var(--text-secondary)}
.text-success{color:var(--success)}
.text-danger{color:var(--error)}
.text-sm{font-size:.875rem}
.text-xs{font-size:.75rem}
.font-bold{font-weight:700}
.font-semibold{font-weight:600}
.flex{display:flex}
.flex-col{flex-direction:column}
.items-center{align-items:center}
.justify-between{justify-content:space-between}
.gap-1{gap:4px}.gap-2{gap:8px}.gap-3{gap:12px}.gap-4{gap:16px}
.mt-0{margin-top:0}.mt-1{margin-top:4px}.mt-2{margin-top:8px}.mt-3{margin-top:12px}.mt-4{margin-top:16px}
.mb-0{margin-bottom:0}.mb-1{margin-bottom:4px}.mb-2{margin-bottom:8px}.mb-3{margin-bottom:12px}.mb-4{margin-bottom:16px}.mb-5{margin-bottom:20px}.mb-6{margin-bottom:24px}
.mr-1{margin-right:4px}.mr-2{margin-right:8px}.mr-3{margin-right:12px}
.ml-auto{margin-left:auto}
.p-0{padding:0}.p-2{padding:8px}.p-3{padding:12px}.p-4{padding:16px}
.w-full{width:100%}
.hidden{display:none!important}
.truncate{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.masked-phone{filter:blur(4px);transition:filter .2s}
.masked-phone:hover{filter:none}

/* ── 20. Scrollbar ────────────────────────────────────────── */
::-webkit-scrollbar{width:6px;height:6px}
::-webkit-scrollbar-track{background:transparent}
::-webkit-scrollbar-thumb{background:var(--border-medium);border-radius:3px}
::-webkit-scrollbar-thumb:hover{background:var(--border-strong)}

/* ── 21. Mobile overlay ───────────────────────────────────── */
.sidebar-overlay{display:none;position:fixed;inset:0;background:rgba(0,0,0,.4);z-index:999}

/* ── 22. Responsive ───────────────────────────────────────── */
@media(max-width:1024px){
  .sidebar{transform:translateX(-100%);width:var(--sidebar-w)!important}
  body.sidebar-open .sidebar{transform:translateX(0)}
  body.sidebar-open .sidebar-overlay{display:block}
  .main-wrapper{margin-left:0!important}
  .topbar-burger{display:flex}
  .charts-row{grid-template-columns:1fr}
}
@media(max-width:768px){
  .content{padding:16px}
  .page-header{padding:16px}
  .page-header-content{flex-direction:column;align-items:flex-start}
  .admin-grid{grid-template-columns:1fr 1fr}
  .form-row{grid-template-columns:1fr}
  .topbar{padding:0 16px}
}
@media(max-width:480px){
  .admin-grid{grid-template-columns:1fr}
  .content{padding:12px}
}

/* ── 23. Print ────────────────────────────────────────────── */
@media print{
  .sidebar,.topbar,.sidebar-overlay{display:none!important}
  .main-wrapper{margin-left:0!important}
  .content{padding:0}
  .btn{display:none}
}

/* ── 24. Legacy compat & missing utilities ────────────────── */

/* Tab aliases (old markup compat) */
.tabs-container{margin-bottom:20px}
.tabs-navigation{display:flex;gap:2px;border-bottom:2px solid var(--border);margin-bottom:20px}
.tab-item{padding:10px 18px;font-size:.875rem;font-weight:500;color:var(--text-secondary);cursor:pointer;border:none;border-bottom:2px solid transparent;margin-bottom:-2px;transition:all var(--transition);background:none;text-decoration:none;display:inline-block}
.tab-item:hover{color:var(--text-primary)}
.tab-item.active{color:var(--primary);border-bottom-color:var(--primary);font-weight:600}
.tab-content{display:none}
.tab-content.active{display:block}

/* Form compat */
.form-control{width:100%;padding:8px 12px;border:1px solid var(--border);border-radius:var(--radius);font-size:.875rem;font-family:inherit;color:var(--text-primary);background:var(--bg-white);transition:border-color var(--transition),box-shadow var(--transition)}
.form-control:focus{outline:none;border-color:var(--primary);box-shadow:0 0 0 3px rgba(90,103,216,.12)}
.form-label{display:block;font-size:.8rem;font-weight:500;color:var(--text-secondary);margin-bottom:4px}
.form-grid{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.form-text{font-size:.75rem;color:var(--text-muted);margin-top:4px}
.form-full,.full-width{grid-column:1/-1}
.input{width:100%;padding:8px 12px;border:1px solid var(--border);border-radius:var(--radius);font-size:.875rem;font-family:inherit}
.input:focus{outline:none;border-color:var(--primary);box-shadow:0 0 0 3px rgba(90,103,216,.12)}

/* Table compat */
.table-wrapper{overflow-x:auto;margin-top:16px}
.table-responsive{overflow-x:auto}

/* Inline forms */
.inline-form{display:inline-flex;align-items:center;gap:8px}
.inline-block{display:inline-block}
.w-auto{width:auto!important}

/* Display helpers */
.d-flex{display:flex}
.d-grid{display:grid}
.d-block{display:block}
.d-none{display:none}
.d-inline{display:inline}

/* Flex helpers */
.flex-row{flex-direction:row}
.flex-wrap{flex-wrap:wrap}
.flex-gap-8{gap:8px}
.flex-gap-12{gap:12px}
.align-center{align-items:center}
.justify-end{justify-content:flex-end}

/* Grid helpers */
.grid{display:grid;gap:16px}
.grid-2{grid-template-columns:1fr 1fr}
.grid-3{grid-template-columns:1fr 1fr 1fr}
.grid-2col{grid-template-columns:1fr 1fr}

/* Width helpers */
.w-80{width:80px}.w-100{width:100px}.w-120{width:120px}.w-140{width:140px}.w-150{width:150px}
.w-160{width:160px}.w-180{width:180px}.w-200{width:200px}.w-250{width:250px}

/* Font helpers */
.font-11{font-size:.6875rem}.font-12{font-size:.75rem}.font-13{font-size:.8125rem}
.font-14{font-size:.875rem}.font-16{font-size:1rem}.font-18{font-size:1.125rem}
.font-weight-600,.font-semibold{font-weight:600}
.font-bold{font-weight:700}

/* Text helpers */
.text-gray{color:var(--text-secondary)}
.text-light-gray{color:var(--text-muted)}
.text-white{color:#fff}
.whitespace-nowrap{white-space:nowrap}
.cursor-pointer{cursor:pointer}

/* Spacing extras */
.mb-8{margin-bottom:8px}
.mb-24,.mb-6{margin-bottom:24px}
.mt-6{margin-top:24px}
.mt-15{margin-top:15px}
.mt-20{margin-top:20px}
.mt-24{margin-top:24px}
.p-40{padding:40px}

/* Card structure */
.card-header{padding:16px 20px;border-bottom:1px solid var(--border);font-weight:600}
.card-body{padding:20px}
.card-title{font-size:1rem;font-weight:600;margin:0 0 16px}
.card-footer{padding:16px 20px;border-top:1px solid var(--border)}

/* Section headers */
.section-header{margin-bottom:16px}
.section-title{font-size:1.05rem;font-weight:600;margin:0}
.subtitle{font-size:.85rem;color:var(--text-secondary);margin:4px 0 0}

/* Status badges */
.status-badge{display:inline-flex;align-items:center;gap:4px;padding:4px 12px;border-radius:20px;font-size:.75rem;font-weight:600;white-space:nowrap}
.status-badge-custom{display:inline-flex;align-items:center;gap:4px;padding:4px 12px;border-radius:20px;font-size:.75rem;font-weight:600}

/* Empty state */
.empty-state{text-align:center;padding:48px 24px;color:var(--text-muted)}
.empty-state-icon{font-size:2.5rem;margin-bottom:12px}
.empty-state-title{font-size:1.1rem;font-weight:600;color:var(--text-primary);margin-bottom:8px}
.empty-state-text{font-size:.875rem;color:var(--text-secondary)}

/* Stats grid */
.stats-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:16px;margin-bottom:20px}
.stat-item{background:var(--bg-white);border:1px solid var(--border);border-radius:var(--radius-lg);padding:16px;box-shadow:var(--shadow-sm)}
.stat-content{display:flex;flex-direction:column;gap:4px}
.stat-icon{font-size:1.3rem}

/* Detail pages */
.detail-grid{display:grid;gap:16px}
.detail-section{background:var(--bg-white);border:1px solid var(--border);border-radius:var(--radius-lg);padding:20px;box-shadow:var(--shadow-sm)}
.detail-row{display:flex;justify-content:space-between;align-items:flex-start;padding:8px 0;border-bottom:1px solid var(--bg-gray-100)}
.detail-row:last-child{border-bottom:none}
.detail-label{font-size:.8rem;font-weight:500;color:var(--text-secondary);min-width:140px}
.detail-value{font-size:.875rem;color:var(--text-primary);text-align:right;flex:1}

/* Info grid (similar to detail) */
.info-grid{display:grid;gap:8px}
.info-row{display:flex;justify-content:space-between;padding:6px 0;border-bottom:1px solid var(--bg-gray-100)}
.info-row:last-child{border-bottom:none}
.info-label{font-size:.8rem;font-weight:500;color:var(--text-secondary)}
.info-value{font-size:.875rem;color:var(--text-primary)}

/* Modal system */
.modal-overlay,.modal-overlay-export{position:fixed;inset:0;background:rgba(0,0,0,.4);z-index:2000;display:none;align-items:center;justify-content:center}
.modal-overlay.active{display:flex}
.modal-dialog,.modal-content,.modal-content-export{background:#fff;border-radius:var(--radius-xl);padding:0;width:100%;max-width:500px;box-shadow:var(--shadow-xl);max-height:90vh;overflow-y:auto}
.modal-header{padding:20px 24px;border-bottom:1px solid var(--border);display:flex;align-items:center;justify-content:space-between}
.modal-header h2,.modal-header h3{font-size:1.1rem;font-weight:700;margin:0}
.modal-body{padding:20px 24px}
.modal-footer{padding:16px 24px;border-top:1px solid var(--border);display:flex;justify-content:flex-end;gap:8px}
.modal-close{background:none;border:none;font-size:1.3rem;cursor:pointer;color:var(--text-secondary);padding:4px}
.modal-close:hover{color:var(--text-primary)}

/* Image preview */
.photo-preview{max-width:300px;border-radius:var(--radius);margin:8px 0}
.image-modal{position:fixed;inset:0;background:rgba(0,0,0,.8);z-index:3000;display:none;align-items:center;justify-content:center}
.image-modal.active{display:flex}
.modal-image{max-width:90%;max-height:90%;border-radius:var(--radius)}

/* Notification */
.notification,.success-message{position:fixed;top:16px;right:16px;z-index:9999;padding:12px 24px;border-radius:var(--radius);color:#fff;background:var(--success);font-size:.875rem;box-shadow:var(--shadow-lg);display:none;animation:toast-in .3s ease}
.error-message{position:fixed;top:16px;right:16px;z-index:9999;padding:12px 24px;border-radius:var(--radius);color:#fff;background:var(--error);font-size:.875rem;box-shadow:var(--shadow-lg);display:none}

/* ── 25. Interface editor ─────────────────────────────────── */
.editor-textarea{width:100%;min-height:120px;padding:12px;border:1px solid var(--border);border-radius:var(--radius);font-family:var(--font-mono);font-size:.85rem;color:var(--text-primary);background:var(--bg-gray-50);resize:vertical;transition:border-color var(--transition)}
.editor-textarea:focus{outline:none;border-color:var(--primary);box-shadow:0 0 0 3px rgba(90,103,216,.12)}
.preview-box{margin-top:12px;padding:14px 18px;background:var(--bg-gray-50);border:1px solid var(--border);border-radius:var(--radius);font-size:.875rem}
.preview-title{font-size:.75rem;font-weight:600;color:var(--text-secondary);text-transform:uppercase;letter-spacing:.5px;margin-bottom:8px}
.preview-content{color:var(--text-primary);line-height:1.6}
.button-group{display:flex;gap:8px;margin-top:16px}
.text-section{margin-bottom:20px}
.button-labels{display:grid;gap:12px}

/* Menu config */
.menu-items{display:flex;flex-direction:column;gap:8px}
.menu-item{display:flex;align-items:center;gap:12px;padding:10px 14px;background:var(--bg-gray-50);border:1px solid var(--border);border-radius:var(--radius);transition:background var(--transition)}
.menu-item:hover{background:var(--bg-hover)}
.menu-checkbox{width:18px;height:18px;cursor:pointer;accent-color:var(--primary)}
.menu-label{font-size:.9rem;font-weight:500;cursor:pointer}

/* ── 26. Calendar styles ──────────────────────────────────── */
.calendar-wrapper{overflow-x:auto}
.cal-grid{display:grid;grid-template-columns:repeat(7,1fr);gap:2px;background:var(--border);border:1px solid var(--border);border-radius:var(--radius)}
.cal-header-cell{padding:8px 4px;text-align:center;font-size:.75rem;font-weight:600;color:var(--text-secondary);background:var(--bg-gray-50);text-transform:uppercase}
.cal-cell{background:var(--bg-white);min-height:80px;padding:6px;font-size:.8rem;position:relative}
.cal-cell.empty{background:var(--bg-gray-50)}
.cal-cell.today{box-shadow:inset 0 0 0 2px var(--primary)}
.day-num{font-weight:600;font-size:.8rem;margin-bottom:4px}
.shift-chip{display:inline-block;padding:2px 6px;border-radius:4px;font-size:.65rem;font-weight:500;margin:1px 0;white-space:nowrap}
.del-btn{background:none;border:none;color:var(--error);cursor:pointer;font-size:.7rem;padding:0 2px}
.month-navigation{display:flex;align-items:center;justify-content:space-between;margin-bottom:16px}
.month-title{font-size:1.1rem;font-weight:600}
.nav-buttons{display:flex;gap:8px}
.calendar-legend{margin-top:12px}
.legend-items{display:flex;gap:16px;flex-wrap:wrap}
.legend-item{display:flex;align-items:center;gap:6px;font-size:.78rem}
.legend-color{width:14px;height:14px;border-radius:3px}
.sform-row{display:flex;gap:8px;align-items:center;margin-bottom:8px}
.sform-times{display:flex;gap:8px}

/* ── 27. Moderator cards ──────────────────────────────────── */
.moderators-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:16px}
.mod-card{background:var(--bg-white);border:1px solid var(--border);border-radius:var(--radius-lg);padding:16px;box-shadow:var(--shadow-sm)}
.mod-header{display:flex;align-items:center;gap:12px;margin-bottom:12px}
.mod-name{font-weight:600;font-size:.95rem}
.mod-status{display:inline-flex;align-items:center;gap:4px;font-size:.75rem;padding:3px 10px;border-radius:20px}
.mod-info{font-size:.8rem;color:var(--text-secondary)}
.current-task{margin-top:8px;padding:8px 12px;background:var(--bg-gray-50);border-radius:var(--radius);font-size:.8rem}
.task-title{font-weight:500}
.task-time{font-size:.72rem;color:var(--text-muted)}

/* ── 28. SLA badges ───────────────────────────────────────── */
.sla-badge-ok,.sla-ok{background:var(--success-bg);color:#16a34a}
.sla-badge-warn,.sla-warn{background:var(--warning-bg);color:#b45309}
.sla-badge-crit,.sla-crit{background:var(--error-bg);color:#dc2626}

/* ── 29. Misc page components ─────────────────────────────── */
.row-cb{width:18px;height:18px;cursor:pointer;accent-color:var(--primary)}
.search-box{position:relative}
.search-input{width:100%;padding:8px 12px 8px 36px;border:1px solid var(--border);border-radius:var(--radius);font-size:.875rem}
.search-icon{position:absolute;left:10px;top:50%;transform:translateY(-50%);color:var(--text-muted);font-size:.9rem}
.remove-btn{background:none;border:none;color:var(--error);cursor:pointer;font-size:1rem;padding:4px 8px;border-radius:var(--radius-sm);transition:background var(--transition)}
.remove-btn:hover{background:var(--error-bg)}
.filter-group{display:flex;flex-wrap:wrap;gap:8px;align-items:center}
.filter-btn,.filter-buttons{display:flex;gap:4px}
.help-text,.smtp-warning{font-size:.78rem;color:var(--text-muted);margin-top:4px}
.required{color:var(--error)}
.page-info{font-size:.8rem;color:var(--text-secondary);text-align:center;margin-top:8px}
.pagination{display:flex;justify-content:center;gap:4px;margin-top:16px}
.btn-page{min-width:36px;padding:6px 10px;border:1px solid var(--border);border-radius:var(--radius-sm);background:var(--bg-white);cursor:pointer;font-size:.8rem;text-align:center}
.btn-page:hover{background:var(--bg-hover)}
.btn-page.active{background:var(--primary);color:#fff;border-color:var(--primary)}

/* File upload */
.upload-area{border:2px dashed var(--border);border-radius:var(--radius);padding:24px;text-align:center;cursor:pointer;transition:border-color var(--transition)}
.upload-area:hover{border-color:var(--primary)}
.upload-icon{font-size:2rem;margin-bottom:8px;color:var(--text-muted)}
.file-input{display:none}
.file-preview{margin-top:8px}

/* Export section */
.export-section{margin-top:16px}
.export-btn{display:inline-flex;align-items:center;gap:6px}

/* Action buttons */
.action-buttons,.actions{display:flex;gap:8px;flex-wrap:wrap}
.btn-view{display:inline-flex;align-items:center;gap:4px;padding:4px 10px;border-radius:var(--radius-sm);font-size:.78rem;background:var(--primary-light);color:var(--primary);border:none;cursor:pointer;transition:background var(--transition)}
.btn-view:hover{background:var(--primary);color:#fff}
.btn-large{padding:12px 24px;font-size:1rem}

/* Bg helpers */
.bg-warning{background:var(--warning)!important}
.bg-error-dark{background:#dc2626!important}
.bg-success{background:var(--success)!important}

/* Badge role compat */
.badge-role-admin{background:linear-gradient(135deg,#dc2626,#b91c1c);color:#fff;padding:4px 12px;font-weight:600}
.badge-role-moderator{background:linear-gradient(135deg,#667eea,#764ba2);color:#fff;padding:4px 12px;font-weight:600}
.badge-role-client{background:linear-gradient(135deg,#6b7280,#4b5563);color:#fff;padding:4px 12px;font-weight:600}

/* Tech panel */
.tech-metrics{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:12px;margin-bottom:20px}
.metric-box{background:var(--bg-white);border:1px solid var(--border);border-radius:var(--radius);padding:14px;box-shadow:var(--shadow-sm)}
.metric-value{font-size:1.4rem;font-weight:700;line-height:1}
.metric-label{font-size:.72rem;font-weight:500;color:var(--text-secondary);text-transform:uppercase;margin-top:4px}
.status-item{display:flex;justify-content:space-between;padding:8px 0;border-bottom:1px solid var(--bg-gray-100);font-size:.85rem}
.status-label{color:var(--text-secondary)}
.status-value{font-weight:500}
.log-container{max-height:300px;overflow-y:auto;background:#1e2235;border-radius:var(--radius);padding:12px;font-family:var(--font-mono);font-size:.75rem}
.log-line{color:#a0aec0;line-height:1.8;white-space:pre-wrap}

/* Summary / top5 cards */
.summary-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:16px}
.summary-card{background:var(--bg-white);border:1px solid var(--border);border-radius:var(--radius-lg);padding:16px;box-shadow:var(--shadow-sm)}
.top5-section{margin-top:20px}
.top5-grid{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.top5-card{background:var(--bg-white);border:1px solid var(--border);border-radius:var(--radius-lg);padding:16px;box-shadow:var(--shadow-sm)}

/* Charts */
.charts-grid{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.chart-container{position:relative;height:260px}

/* Account manage */
.btn-group-vertical{display:flex;flex-direction:column;gap:8px}

/* Stat icon variants */
.stat-icon-success{color:var(--success)}
.stat-icon-warning{color:var(--warning)}
.stat-icon-error{color:var(--error)}
.stat-icon-info{color:var(--info)}

/* Responsive fixes for added components */
@media(max-width:768px){
  .form-grid,.grid-2,.grid-2col,.top5-grid,.charts-grid{grid-template-columns:1fr}
  .grid-3{grid-template-columns:1fr 1fr}
  .detail-row,.info-row{flex-direction:column;gap:4px}
  .detail-value,.info-value{text-align:left}
  .moderators-grid{grid-template-columns:1fr}
}
@media(max-width:480px){
  .grid-3{grid-template-columns:1fr}
  .stats-grid{grid-template-columns:1fr 1fr}
  .button-group{flex-direction:column}
}