/* SayFormally — Super Admin Design System */
:root {
  --sa-bg:       #0f172a;
  --sa-sidebar:  #111827;
  --sa-card:     #1e293b;
  --sa-border:   #334155;
  --sa-text:     #e2e8f0;
  --sa-muted:    #64748b;
  --sa-accent:   #dc2626;
  --sa-accent2:  #6366f1;
  --sa-green:    #22c55e;
  --sa-yellow:   #f59e0b;
  font-family: 'DM Sans', system-ui, sans-serif;
}
*,*::before,*::after { box-sizing: border-box; }
body { margin:0; background:var(--sa-bg); color:var(--sa-text); font-size:14px; line-height:1.5; -webkit-font-smoothing:antialiased; }

/* Layout */
.sa-layout { display:flex; min-height:100vh; }

/* Sidebar */
.sa-sidebar { width:240px; min-width:240px; background:var(--sa-sidebar); border-right:1px solid var(--sa-border); display:flex; flex-direction:column; position:sticky; top:0; height:100vh; overflow-y:auto; }
.sa-brand { display:flex; align-items:center; gap:12px; padding:20px 16px; border-bottom:1px solid var(--sa-border); }
.sa-brand-icon { width:40px; height:40px; border-radius:10px; background:var(--sa-accent); display:flex; align-items:center; justify-content:center; color:#fff; font-weight:800; font-size:15px; flex-shrink:0; }
.sa-brand-name { font-size:15px; font-weight:700; color:#f1f5f9; }
.sa-brand-sub  { font-size:11px; color:var(--sa-muted); }
.sa-nav { flex:1; padding:12px 8px; }
.sa-nav-item { display:flex; align-items:center; gap:10px; padding:9px 12px; border-radius:8px; color:var(--sa-muted); font-size:13px; font-weight:500; text-decoration:none; transition:all .15s; margin-bottom:2px; cursor:pointer; background:none; border:none; width:100%; text-align:left; }
.sa-nav-item:hover { background:rgba(255,255,255,.05); color:var(--sa-text); }
.sa-nav-item.active { background:rgba(220,38,38,.15); color:#fca5a5; }
.sa-sidebar-footer { padding:12px 8px; border-top:1px solid var(--sa-border); }

/* Main */
.sa-main { flex:1; display:flex; flex-direction:column; overflow:hidden; }
.sa-topbar { height:52px; border-bottom:1px solid var(--sa-border); padding:0 24px; display:flex; align-items:center; justify-content:space-between; background:var(--sa-sidebar); flex-shrink:0; }
.sa-topbar-left { display:flex; align-items:center; gap:6px; }
.sa-topbar-right { display:flex; align-items:center; gap:10px; }
.sa-breadcrumb { font-size:13px; font-weight:600; color:var(--sa-text); }
.sa-breadcrumb-link { font-size:13px; color:var(--sa-muted); text-decoration:none; }
.sa-breadcrumb-link:hover { color:var(--sa-text); }
.sa-breadcrumb-sep { color:var(--sa-border); margin:0 4px; }
.sa-admin-name { font-size:12px; color:var(--sa-muted); }
.sa-admin-avatar { width:28px; height:28px; border-radius:50%; background:var(--sa-accent); display:flex; align-items:center; justify-content:center; color:#fff; font-size:10px; font-weight:700; }
.sa-content { flex:1; overflow-y:auto; padding:24px; }

/* Page header */
.sa-page-header { display:flex; justify-content:space-between; align-items:flex-start; margin-bottom:24px; flex-wrap:wrap; gap:12px; }
.sa-page-title { font-size:22px; font-weight:800; letter-spacing:-.4px; margin:0 0 4px; color:#f1f5f9; }
.sa-page-sub { font-size:13px; color:var(--sa-muted); margin:0; }

/* Cards */
.sa-card { background:var(--sa-card); border:1px solid var(--sa-border); border-radius:12px; padding:20px; margin-bottom:16px; }
.sa-card-header { display:flex; justify-content:space-between; align-items:center; margin-bottom:16px; }
.sa-card-title { font-size:14px; font-weight:700; color:#f1f5f9; margin:0; }
.sa-link { font-size:12px; color:var(--sa-accent2); text-decoration:none; }
.sa-link:hover { text-decoration:underline; }
.sa-row { display:flex; gap:16px; flex-wrap:wrap; }

/* Stats */
.sa-stats-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(160px,1fr)); gap:14px; margin-bottom:20px; }
.sa-stat-card { background:var(--sa-card); border:1px solid var(--sa-border); border-radius:12px; padding:18px; display:flex; flex-direction:column; gap:8px; }
.sa-stat-icon { width:36px; height:36px; border-radius:8px; display:flex; align-items:center; justify-content:center; font-size:16px; }
.sa-stat-value { font-size:28px; font-weight:800; letter-spacing:-1px; line-height:1; }
.sa-stat-label { font-size:12px; color:var(--sa-muted); }

/* Info rows */
.sa-info-rows { display:flex; flex-direction:column; gap:2px; }
.sa-info-row { display:flex; justify-content:space-between; align-items:center; padding:8px 0; border-bottom:1px solid rgba(255,255,255,.05); font-size:13px; color:var(--sa-muted); }
.sa-info-row:last-child { border-bottom:none; }
.sa-info-row strong { color:var(--sa-text); }

/* Tables */
.sa-table { width:100%; border-collapse:collapse; font-size:13px; }
.sa-table thead th { background:rgba(255,255,255,.03); color:var(--sa-muted); padding:10px 12px; font-weight:600; font-size:11px; text-transform:uppercase; letter-spacing:.6px; text-align:left; border-bottom:1px solid var(--sa-border); white-space:nowrap; }
.sa-table tbody td { padding:12px 12px; border-bottom:1px solid rgba(255,255,255,.04); vertical-align:middle; }
.sa-table tbody tr:last-child td { border-bottom:none; }
.sa-table tbody tr:hover td { background:rgba(255,255,255,.02); }

/* Filters */
.sa-filters { margin-bottom:0; }

/* Badges */
.sa-plan-badge { display:inline-flex; align-items:center; font-size:11px; font-weight:700; padding:3px 9px; border-radius:20px; }
.sa-status-badge { display:inline-flex; align-items:center; font-size:11px; font-weight:600; padding:3px 9px; border-radius:20px; }
.sa-status-badge.active   { background:rgba(34,197,94,.15); color:#86efac; }
.sa-status-badge.suspended,.sa-status-badge.inactive { background:rgba(239,68,68,.15); color:#fca5a5; }
.sa-status-badge.open     { background:rgba(99,102,241,.15); color:#a5b4fc; }
.sa-status-badge.in-progress { background:rgba(245,158,11,.15); color:#fcd34d; }
.sa-status-badge.escalated { background:rgba(239,68,68,.15); color:#fca5a5; }
.sa-status-badge.closed   { background:rgba(34,197,94,.15); color:#86efac; }
.sa-action-badge { display:inline-flex; font-size:11px; font-weight:600; padding:2px 8px; border-radius:4px; background:rgba(99,102,241,.15); color:#a5b4fc; font-family:'JetBrains Mono',monospace; }

/* Buttons */
.sa-btn { display:inline-flex; align-items:center; gap:6px; padding:8px 16px; border-radius:8px; font-size:13px; font-weight:600; cursor:pointer; font-family:inherit; text-decoration:none; border:none; transition:all .15s; white-space:nowrap; }
.sa-btn-primary { background:var(--sa-accent); color:#fff; }
.sa-btn-primary:hover { opacity:.9; }
.sa-btn-ghost { background:rgba(255,255,255,.06); border:1px solid var(--sa-border); color:var(--sa-muted); }
.sa-btn-ghost:hover { background:rgba(255,255,255,.1); color:var(--sa-text); }
.sa-btn-danger { background:rgba(239,68,68,.2); border:1px solid rgba(239,68,68,.4); color:#fca5a5; }
.sa-btn-success { background:rgba(34,197,94,.2); border:1px solid rgba(34,197,94,.4); color:#86efac; }
.sa-icon-btn { width:30px; height:30px; border-radius:6px; display:inline-flex; align-items:center; justify-content:center; background:rgba(255,255,255,.06); border:1px solid var(--sa-border); color:var(--sa-muted); cursor:pointer; font-size:13px; transition:all .15s; }
.sa-icon-btn:hover { background:rgba(255,255,255,.12); color:var(--sa-text); }
.sa-icon-btn.danger { color:#fca5a5; }
.sa-icon-btn.danger:hover { background:rgba(239,68,68,.2); }
.sa-icon-btn.success { color:#86efac; }
.sa-icon-btn.success:hover { background:rgba(34,197,94,.2); }

/* Form controls */
.sa-input { background:var(--sa-bg); border:1.5px solid var(--sa-border); border-radius:8px; padding:9px 12px; font-size:13px; font-family:inherit; color:var(--sa-text); outline:none; width:100%; transition:border-color .2s; }
.sa-input:focus { border-color:var(--sa-accent2); }
.sa-form-field { margin-bottom:14px; }
.sa-form-field label { display:block; font-size:12px; font-weight:600; color:var(--sa-muted); margin-bottom:5px; }

/* Log list */
.sa-log-list { display:flex; flex-direction:column; gap:2px; }
.sa-log-row { display:flex; align-items:center; gap:12px; padding:8px 12px; border-radius:6px; font-size:12px; transition:background .1s; }
.sa-log-row:hover { background:rgba(255,255,255,.03); }
.sa-log-action { font-family:'JetBrains Mono',monospace; font-size:11px; font-weight:600; color:var(--sa-accent2); min-width:140px; flex-shrink:0; }
.sa-log-detail { flex:1; color:var(--sa-muted); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.sa-log-time { font-size:11px; color:#475569; flex-shrink:0; white-space:nowrap; }

/* Announcements */
.sa-ann-row { display:flex; align-items:flex-start; gap:12px; padding:14px 16px; border-radius:8px; margin-bottom:8px; border:1px solid var(--sa-border); }
.sa-ann-row.info { border-color:rgba(99,102,241,.4); background:rgba(99,102,241,.08); }
.sa-ann-row.warning { border-color:rgba(245,158,11,.4); background:rgba(245,158,11,.08); }
.sa-ann-row.critical { border-color:rgba(239,68,68,.4); background:rgba(239,68,68,.08); }
.sa-ann-type-badge { font-size:10px; font-weight:700; text-transform:uppercase; padding:3px 8px; border-radius:4px; flex-shrink:0; margin-top:2px; }
.sa-ann-type-badge.info { background:rgba(99,102,241,.2); color:#a5b4fc; }
.sa-ann-type-badge.warning { background:rgba(245,158,11,.2); color:#fcd34d; }
.sa-ann-type-badge.critical { background:rgba(239,68,68,.2); color:#fca5a5; }

/* Modals */
.sa-modal-backdrop { position:fixed; inset:0; background:rgba(0,0,0,.7); backdrop-filter:blur(4px); z-index:500; display:flex; align-items:center; justify-content:center; padding:16px; }
.sa-modal { background:var(--sa-card); border:1px solid var(--sa-border); border-radius:16px; width:100%; max-width:480px; max-height:90vh; overflow-y:auto; box-shadow:0 25px 50px rgba(0,0,0,.5); animation:saSlideUp .2s ease; }
.sa-modal-header { display:flex; justify-content:space-between; align-items:center; padding:20px 24px; border-bottom:1px solid var(--sa-border); }
.sa-modal-header h3 { margin:0; font-size:16px; font-weight:700; color:#f1f5f9; }
.sa-modal-close { background:none; border:none; color:var(--sa-muted); cursor:pointer; font-size:20px; padding:4px; }
.sa-modal-body { padding:20px 24px; }
.sa-modal-footer { padding:16px 24px; border-top:1px solid var(--sa-border); display:flex; justify-content:flex-end; gap:10px; }

/* Toast notifications */
.sa-toast { position:fixed; bottom:24px; right:24px; padding:12px 20px; border-radius:10px; font-size:13px; font-weight:600; z-index:999; transform:translateY(20px); opacity:0; transition:all .3s ease; max-width:360px; }
.sa-toast.ok { background:#0f3b1f; border:1px solid #166534; color:#86efac; }
.sa-toast.err { background:#450a0a; border:1px solid #dc2626; color:#fca5a5; }
.sa-toast.show { transform:translateY(0); opacity:1; }

@keyframes saSlideUp { from { opacity:0; transform:translateY(16px) scale(.98); } to { opacity:1; transform:translateY(0) scale(1); } }

/* Responsive */
@media(max-width:768px) {
  .sa-sidebar { display:none; }
  .sa-stats-grid { grid-template-columns:repeat(2,1fr); }
  .sa-row { flex-direction:column; }
  .sa-content { padding:16px; }
}