/* ==========================================================================
   AAM Operations Hub — shared design system
   One stylesheet for all 8 pages. See BACKLOG.md / CHANGELOG.md for history.
   ========================================================================== */

:root{
  /* Shell / surfaces */
  --shell:#121826;
  --bg:#F6F7F9;
  --surface:#FFFFFF;
  --surface-2:#FAFBFC;
  --border:#E4E7EC;
  --border-strong:#D0D5DD;

  /* Ink */
  --ink:#101828;
  --ink-2:#475467;
  --ink-3:#667085;
  --ink-4:#98A2B3;

  /* Accent */
  --accent:#4F46E5;
  --accent-hover:#4338CA;
  --accent-soft:#EEF2FF;

  /* AI accent — reserved, never decoration */
  --ai:#7C3AED;
  --ai-hover:#6D28D9;
  --ai-soft:#F5F3FF;

  /* Status */
  --st-new-fg:#1D4ED8;      --st-new-bg:#EFF4FF;
  --st-assigned-fg:#4F46E5; --st-assigned-bg:#EEF2FF;
  --st-progress-fg:#B54708; --st-progress-bg:#FFFAEB;
  --st-waiting-fg:#C11574;  --st-waiting-bg:#FDF2FA;
  --st-resolved-fg:#067647; --st-resolved-bg:#ECFDF3;
  --st-closed-fg:#475467;   --st-closed-bg:#F2F4F7;
  --st-urgent-fg:#D92D20;   --st-urgent-bg:#FEF3F2;
  --st-deleted-fg:#B42318;  --st-deleted-bg:#FEF3F2;

  /* Type */
  --font-ui: -apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Oxygen,sans-serif;
  --font-mono: ui-monospace,SFMono-Regular,'SF Mono',Menlo,Consolas,monospace;

  /* Spacing (4px scale) */
  --s-1:4px; --s-2:8px; --s-3:12px; --s-4:16px; --s-5:20px;
  --s-6:24px; --s-8:32px; --s-10:40px; --s-12:48px;

  --r-sm:6px; --r-md:8px; --r-lg:12px;
  --shadow-xs:0 1px 2px rgba(16,24,40,.06);
  --shadow-md:0 4px 20px rgba(16,24,40,.12);

  --control-h:36px;
  --page-max:1280px;

  --transition:120ms ease;
}

@media (prefers-reduced-motion: reduce){
  :root{ --transition:0ms; }
}

/* ---- Reset ---- */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{-webkit-text-size-adjust:100%}
body{
  font-family:var(--font-ui);
  background:var(--bg);
  color:var(--ink);
  line-height:1.5;
  font-size:14px;
  -webkit-font-smoothing:antialiased;
}
a{color:inherit}
button{font-family:inherit}

/* ---- Type scale ---- */
.t-display{font-size:24px;line-height:1.2;font-weight:700;letter-spacing:-.01em}
.t-h1{font-size:20px;line-height:1.3;font-weight:650}
.t-h2{font-size:17px;line-height:1.35;font-weight:600}
.t-strong{font-size:14px;line-height:1.5;font-weight:550}
.t-label{font-size:13px;line-height:1.4;font-weight:500}
.t-meta{font-size:12px;line-height:1.4;font-weight:450;color:var(--ink-3)}
.t-micro{font-size:11px;line-height:1.3;font-weight:600;letter-spacing:.05em;text-transform:uppercase;color:var(--ink-4)}
.mono{font-family:var(--font-mono)}
.tabular{font-variant-numeric:tabular-nums}

/* ---- Focus ---- */
a:focus-visible,button:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible,
[tabindex]:focus-visible{
  outline:none;
  border-color:var(--accent);
  box-shadow:0 0 0 3px rgba(79,70,229,.25);
}

/* ---- Layout ---- */
.container{max-width:var(--page-max);margin:0 auto;padding:var(--s-6)}
.container--narrow{max-width:640px}
@media(max-width:767px){ .container{padding:var(--s-4)} }

/* ---- Shell / header ---- */
.header{
  background:var(--shell);color:#fff;padding:0 var(--s-6);height:56px;
  display:flex;align-items:center;justify-content:space-between;
}
.header-left{display:flex;align-items:center;gap:var(--s-4);min-width:0}
.header .brand{color:#fff;font-size:15px;font-weight:650;text-decoration:none;white-space:nowrap;margin-right:var(--s-2)}
.header-nav{display:flex;align-items:center;gap:6px}
.header-nav a{display:inline-flex;align-items:center;gap:6px;color:#C7CDDA;text-decoration:none;font-size:13px;font-weight:600;padding:6px 14px;border-radius:999px;border:1px solid rgba(255,255,255,.14);background:rgba(255,255,255,.07);white-space:nowrap;transition:background var(--transition),border-color var(--transition),color var(--transition)}
.header-nav a:hover{color:#fff;background:rgba(255,255,255,.13);border-color:rgba(255,255,255,.22)}
.header-nav a.active{color:#fff;background:var(--accent);border-color:var(--accent)}
.admin-btn{gap:6px}
.dd-item-planned{display:flex;align-items:center;gap:10px;padding:10px 16px;color:var(--ink-4);font-size:13px;cursor:default}
.dd-tag{margin-left:auto;font-size:10px;font-weight:700;background:var(--surface-2);color:var(--ink-4);padding:2px 6px;border-radius:999px;text-transform:uppercase;letter-spacing:.04em}
.mobile-menu-planned{display:flex;align-items:center;gap:10px;padding:13px 16px;color:var(--ink-4);font-size:14px}
.header a.back{color:#8B93A7;text-decoration:none;font-size:13px;display:flex;align-items:center;gap:6px}
.header a.back:hover{color:#fff}
.header-right{display:flex;align-items:center;gap:var(--s-2)}

.icon{display:inline-flex;flex-shrink:0}
.icon svg{display:block}

/* Header buttons */
.btn-primary{
  display:inline-flex;align-items:center;gap:8px;
  background:var(--accent);color:#fff;padding:0 16px;height:var(--control-h);
  border-radius:var(--r-sm);font-size:13px;font-weight:600;text-decoration:none;border:none;cursor:pointer;
  transition:background var(--transition);
}
.btn-primary:hover{background:var(--accent-hover)}

.icon-btn{
  color:#8B93A7;text-decoration:none;font-size:13px;padding:6px 8px;border-radius:var(--r-sm);
  line-height:1;background:none;border:none;cursor:pointer;display:inline-flex;align-items:center;
  transition:background var(--transition),color var(--transition);
}
.icon-btn:hover{color:#fff;background:rgba(255,255,255,.1)}

.profile-btn{
  display:flex;align-items:center;gap:8px;background:rgba(255,255,255,.06);
  border:1px solid rgba(255,255,255,.12);color:#D0D5DD;padding:0 12px;height:var(--control-h);
  border-radius:var(--r-sm);font-size:13px;cursor:pointer;white-space:nowrap;
  transition:background var(--transition),color var(--transition);
}
.profile-btn:hover{background:rgba(255,255,255,.12);color:#fff}
.profile-avatar{
  width:26px;height:26px;border-radius:50%;background:var(--accent);color:#fff;
  display:flex;align-items:center;justify-content:center;font-size:12px;font-weight:700;flex-shrink:0;
}

/* ---- Dropdown ---- */
.dropdown{position:relative;display:inline-block}
.dropdown-menu{
  display:none;position:absolute;right:0;top:100%;margin-top:8px;background:var(--surface);
  border:1px solid var(--border);border-radius:var(--r-md);box-shadow:var(--shadow-md);
  min-width:210px;z-index:100;overflow:hidden;
}
.dropdown-menu.show{display:block}
.dropdown-menu .dd-header{padding:12px 16px;border-bottom:1px solid var(--border)}
.dropdown-menu .dd-header strong{color:var(--ink);display:block;font-size:13px;font-weight:600}
.dropdown-menu .dd-header span{color:var(--ink-3);font-size:12px}
.dropdown-menu a{
  display:flex;align-items:center;gap:10px;padding:10px 16px;color:var(--ink-2);
  text-decoration:none;font-size:13px;transition:background var(--transition);
}
.dropdown-menu a:hover{background:var(--surface-2);color:var(--ink)}
.dropdown-menu a.active{background:var(--accent-soft);color:var(--accent)}
.dropdown-menu .dd-divider{border-top:1px solid var(--border);margin:4px 0}

/* ---- Mobile menu ---- */
.mobile-menu-btn{
  display:none;align-items:center;justify-content:center;width:34px;height:34px;background:none;
  border:none;color:#8B93A7;font-size:0;cursor:pointer;padding:0;border-radius:var(--r-sm);flex-shrink:0;
}
.mobile-menu-btn:hover{color:#fff;background:rgba(255,255,255,.1)}
.mobile-menu-overlay{display:none;position:fixed;top:0;left:0;width:100%;height:100%;background:rgba(16,24,40,.4);z-index:150}
.mobile-menu-overlay.open{display:block}
.mobile-menu{
  display:none;position:fixed;top:48px;left:0;right:0;background:var(--surface);z-index:151;
  box-shadow:var(--shadow-md);flex-direction:column;max-height:calc(100vh - 48px);overflow-y:auto;
}
.mobile-menu.open{display:flex}
.mobile-menu-header{padding:14px 16px;border-bottom:1px solid var(--border)}
.mobile-menu-header strong{color:var(--ink);display:block;font-size:13px;font-weight:600}
.mobile-menu-header span{color:var(--ink-3);font-size:12px}
.mobile-menu a{
  display:flex;align-items:center;gap:10px;padding:13px 16px;color:var(--ink-2);
  text-decoration:none;font-size:14px;border-bottom:1px solid var(--surface-2);
}
.mobile-menu a:hover{background:var(--surface-2)}
.mobile-menu a.active{background:var(--surface-2);color:var(--accent)}
.mobile-menu-divider{border-top:1px solid var(--border);margin:4px 0}

/* ---- Cards ---- */
.card{background:var(--surface);border:1px solid var(--border);border-radius:var(--r-lg);box-shadow:var(--shadow-xs)}
.card-pad{padding:var(--s-6)}

/* ---- Buttons (generic) ---- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;height:var(--control-h);
  padding:0 16px;border-radius:var(--r-sm);font-size:13px;font-weight:600;cursor:pointer;
  border:1px solid transparent;text-decoration:none;transition:background var(--transition),border-color var(--transition),color var(--transition);
}
.btn-solid{background:var(--accent);color:#fff}
.btn-solid:hover{background:var(--accent-hover)}
.btn-outline{background:var(--surface);color:var(--ink-2);border-color:var(--border-strong)}
.btn-outline:hover{background:var(--surface-2);color:var(--ink)}
.btn-danger{background:var(--surface);color:var(--st-urgent-fg);border-color:#FDA29B}
.btn-danger:hover{background:var(--st-urgent-bg)}
.btn-ai{background:var(--ai);color:#fff}
.btn-ai:hover{background:var(--ai-hover)}
.btn-ai.outline{background:var(--surface);color:var(--ai);border-color:#DDD6FE}
.btn-ai.outline:hover{background:var(--ai-soft)}
.btn:disabled{opacity:.5;cursor:default}
.btn-sm{height:30px;padding:0 12px;font-size:12.5px}
.btn-link{background:none;border:none;color:var(--ink-3);font-size:13px;text-decoration:none;cursor:pointer;padding:0 8px}
.btn-link:hover{color:var(--ink)}

/* ---- Form controls ---- */
.field{display:flex;flex-direction:column;gap:6px}
.field label{font-size:13px;font-weight:500;color:var(--ink-2)}
.field .help{font-size:12px;color:var(--ink-3)}
input[type=text],input[type=email],input[type=password],input[type=date],input[type=number],
select,textarea{
  font-family:inherit;font-size:13.5px;color:var(--ink);background:var(--surface);
  border:1px solid var(--border-strong);border-radius:var(--r-sm);padding:0 12px;height:var(--control-h);
  transition:border-color var(--transition),box-shadow var(--transition);
}
textarea{height:auto;padding:10px 12px;resize:vertical;line-height:1.5}
select{
  appearance:none;-webkit-appearance:none;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath d='M1 1l4 4 4-4' stroke='%23667085' stroke-width='1.5' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 12px center;padding-right:32px;
}
input::placeholder,textarea::placeholder{color:var(--ink-4)}
input:hover,select:hover,textarea:hover{border-color:var(--ink-4)}

/* ---- Badges (status) ---- */
.badge{display:inline-flex;align-items:center;padding:3px 10px;border-radius:999px;font-size:12px;font-weight:600;white-space:nowrap}
.badge-new{background:var(--st-new-bg);color:var(--st-new-fg)}
.badge-assigned{background:var(--st-assigned-bg);color:var(--st-assigned-fg)}
.badge-progress{background:var(--st-progress-bg);color:var(--st-progress-fg)}
.badge-waiting{background:var(--st-waiting-bg);color:var(--st-waiting-fg)}
.badge-resolved{background:var(--st-resolved-bg);color:var(--st-resolved-fg)}
.badge-closed{background:var(--st-closed-bg);color:var(--st-closed-fg)}
.badge-deleted{background:var(--st-deleted-bg);color:var(--st-deleted-fg)}

.module-badge{
  display:inline-flex;align-items:center;padding:2px 8px;border-radius:var(--r-sm);font-size:11px;
  font-weight:600;background:var(--surface);border:1px solid var(--border-strong);color:var(--ink-2);white-space:nowrap;
}
.type-badge{
  display:inline-flex;align-items:center;padding:2px 8px;border-radius:var(--r-sm);font-size:11px;
  font-weight:500;background:var(--surface-2);color:var(--ink-3);white-space:nowrap;
}
.chip-muted{
  display:inline-flex;align-items:center;padding:2px 9px;border-radius:999px;font-size:11.5px;
  font-weight:500;background:var(--surface-2);color:var(--ink-4);white-space:nowrap;
}
.prio-dot{width:8px;height:8px;border-radius:50%;display:inline-block;flex-shrink:0}
.prio-normal{background:#22C55E}.prio-urgent{background:var(--st-urgent-fg)}

/* ---- Tables ---- */
.table-wrap{background:var(--surface);border:1px solid var(--border);border-radius:var(--r-lg);overflow:hidden}
.table-wrap table{width:100%;border-collapse:collapse}
.table-wrap th{
  text-align:left;padding:12px var(--s-4);background:var(--surface-2);border-bottom:1px solid var(--border);
  font-size:11px;font-weight:600;letter-spacing:.05em;text-transform:uppercase;color:var(--ink-4);white-space:nowrap;
}
.table-wrap td{padding:12px var(--s-4);border-bottom:1px solid var(--surface-2);font-size:13.5px;vertical-align:middle}
.table-wrap tr:last-child td{border-bottom:none}
.table-wrap tbody tr{transition:background var(--transition)}
.table-wrap tbody tr:hover{background:var(--accent-soft)}
.table-wrap tbody tr.urgent{border-left:3px solid var(--st-urgent-fg)}
.table-wrap tbody tr.deleted-row{opacity:.55;background:var(--st-deleted-bg)}
.row-link{color:var(--ink);text-decoration:none;font-weight:550}
.row-link:hover{color:var(--accent)}
.id-mono{font-family:var(--font-mono);font-size:12px;color:var(--ink-3)}
.empty{text-align:center;padding:var(--s-10);color:var(--ink-3);font-size:13.5px}

/* ---- Filters ---- */
.filters{background:var(--surface);border:1px solid var(--border);border-radius:var(--r-lg);padding:var(--s-5) var(--s-6);margin-bottom:var(--s-5)}
.filters h2{display:flex;align-items:center;gap:8px;margin-bottom:var(--s-3)}
.filter-row{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.filter-row input[type=date]{width:150px}
.filter-count{font-size:12px;color:var(--ink-3);margin-left:auto}

/* ---- Quick filter chips ---- */
.quick-chips{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin-bottom:var(--s-4)}
.chip{display:inline-flex;align-items:center;gap:7px;padding:7px 14px;border-radius:999px;font-size:12.5px;font-weight:600;text-decoration:none;background:var(--surface);border:1px solid var(--border-strong);color:var(--ink-2);transition:background var(--transition),border-color var(--transition),color var(--transition)}
.chip:hover{background:var(--surface-2);color:var(--ink)}
.chip.active{background:var(--accent);border-color:var(--accent);color:#fff}

/* ---- Bulk bar ---- */
.bulk-bar{
  background:var(--accent-soft);border-bottom:1px solid #C7D2FE;padding:12px var(--s-4);
  display:none;align-items:center;gap:10px;font-size:13px;color:var(--accent-hover);
}
.bulk-bar.show{display:flex}
.bulk-count{font-weight:600;background:#fff;color:var(--accent-hover);padding:3px 10px;border-radius:999px;font-size:12px}
.bulk-divider{width:1px;height:20px;background:#C7D2FE;margin:0 2px}
.bulk-bar select{height:32px}

.btn-row{display:flex;align-items:center;gap:10px;flex-wrap:wrap}

/* ---- Modal ---- */
.modal-overlay{display:none;position:fixed;top:0;left:0;width:100%;height:100%;background:rgba(16,24,40,.45);z-index:200;align-items:center;justify-content:center}
.modal-overlay.show{display:flex}
.modal{background:var(--surface);border-radius:var(--r-lg);padding:var(--s-8);max-width:420px;width:90%;box-shadow:var(--shadow-md)}
.modal h3{margin-bottom:var(--s-5)}
.modal .btn-row{display:flex;gap:10px;margin-top:var(--s-5)}

/* ---- Alerts ---- */
.alert{padding:10px 14px;border-radius:var(--r-sm);font-size:13px;margin-bottom:var(--s-4);border:1px solid transparent}
.alert-error{background:var(--st-urgent-bg);border-color:#FECACA;color:var(--st-urgent-fg)}
.alert-ok{background:var(--st-resolved-bg);border-color:#A7F3D0;color:var(--st-resolved-fg)}
.alert-info{background:var(--accent-soft);border-color:#C7D2FE;color:var(--accent-hover)}
.alert-warn{background:var(--st-progress-bg);border-color:#FDE68A;color:var(--st-progress-fg)}

/* ---- Utilities ---- */
.prewrap{white-space:pre-wrap;word-break:break-word}
.stale-badge{display:inline-flex;align-items:center;padding:2px 9px;border-radius:999px;font-size:11px;font-weight:600;white-space:nowrap}
.stale-warn{background:var(--st-progress-bg);color:var(--st-progress-fg)}
.stale-alert{background:var(--st-urgent-bg);color:var(--st-urgent-fg)}

/* Spam review flag (webform intake) */
.spam-badge{display:inline-flex;align-items:center;gap:4px;padding:2px 9px;border-radius:999px;font-size:11px;font-weight:600;white-space:nowrap;background:#FEF3C7;color:#92400E;border:1px solid #FDE68A;cursor:default;margin-left:4px}
.spam-banner{background:#FEF3C7;border:1px solid #FCD34D;color:#92400E;padding:12px 16px;border-radius:var(--r-md);margin-bottom:var(--s-5);font-size:13.5px;display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.spam-banner .icon{color:#B45309}
.spam-clear-btn{padding:1px 8px !important;font-size:11px !important;height:22px !important}
.url-inert{color:var(--ink-2);background:var(--surface-2);border:1px solid var(--border);border-radius:3px;padding:0 3px;word-break:break-all;cursor:not-allowed}
.hide-mobile{}
@media(max-width:767px){
  .mobile-menu-btn{display:inline-flex}
  .header-nav{display:none}
  .hide-mobile{display:none!important}
}