/* ============================================================
   admin_modern.css
   Shared Material 3 design system for all admin/manage pages.
   Loaded via includes/admin_header.php. Pages can layer their
   own <style> blocks on top for one-off tweaks.
   ============================================================ */

/* ─── Design tokens (light) ─── */
:root{
  --md-primary:#1D2C78; --md-on-primary:#fff;
  --md-primary-container:#d9e2ff; --md-on-primary-container:#00006c;
  --md-secondary:#585e71; --md-on-secondary:#fff;
  --md-secondary-container:#dbe2f9; --md-on-secondary-container:#151b2c;
  --md-surface:#fcfcff; --md-on-surface:#1a1c22;
  --md-surface-container:#eff0f4; --md-surface-container-low:#f5f6fa;
  --md-surface-container-high:#e9eaee; --md-surface-container-highest:#e3e4e9;
  --md-outline:#757780; --md-outline-variant:#c3c6d0;
  --md-success:#0a8a00; --md-success-container:#eaffef; --md-on-success-container:#05620a;
  --md-danger:#b91c1c;  --md-danger-container:#ffeef0;  --md-on-danger-container:#a00;
  --md-warning:#92400e; --md-warning-container:#fef3c7; --md-on-warning-container:#5b3a00;
  --md-info:#1e40af;    --md-info-container:#dbeafe;    --md-on-info-container:#1e3a8a;

  --radius-sm:8px; --radius-md:12px; --radius-lg:16px; --radius-full:999px;
  --elevation-1:0 1px 2px rgba(0,0,0,.08),0 1px 3px rgba(0,0,0,.05);
  --elevation-2:0 3px 6px rgba(0,0,0,.10),0 1px 2px rgba(0,0,0,.06);
  --elevation-3:0 5px 10px rgba(0,0,0,.12),0 2px 4px rgba(0,0,0,.08);

  --transition-fast: 120ms cubic-bezier(.4,0,.2,1);
  --transition-base: 200ms cubic-bezier(.4,0,.2,1);
}

/* ─── Design tokens (dark) ─── */
html[data-theme="dark"]{
  --md-primary:#b1c6ff; --md-on-primary:#00277f;
  --md-primary-container:#003aae; --md-on-primary-container:#d9e2ff;
  --md-secondary:#bec6dc; --md-on-secondary:#2a3042;
  --md-secondary-container:#414659; --md-on-secondary-container:#dbe2f9;
  --md-surface:#1a1c22; --md-on-surface:#e3e2e9;
  --md-surface-container:#26282e; --md-surface-container-low:#15171c;
  --md-surface-container-high:#313339; --md-surface-container-highest:#3c3e44;
  --md-outline:#8e909a; --md-outline-variant:#45474e;
  --md-success-container:#0a3a12; --md-on-success-container:#9fe5a4;
  --md-danger-container:#3c0d0d;  --md-on-danger-container:#ffbab1;
  --md-warning-container:#3a2a0a; --md-on-warning-container:#fde68a;
  --md-info-container:#0a1d3a;    --md-on-info-container:#bfdbfe;
}

*,*:before,*:after{ box-sizing:border-box; }
html, body { margin:0; padding:0; }
body{
  background:var(--md-surface-container-low);
  color:var(--md-on-surface);
  font-family:"Inter",system-ui,-apple-system,sans-serif;
  font-size:14px;
  line-height:1.5;
  min-height:100vh;
}

/* ─── Material Symbols icon ─── */
.icon{
  font-family:'Material Symbols Rounded';
  font-weight:normal; font-style:normal;
  line-height:1; display:inline-block; vertical-align:middle;
  font-variation-settings:'opsz' 24, 'wght' 400, 'FILL' 0, 'GRAD' 0;
}
.icon.filled{ font-variation-settings:'FILL' 1; }

/* ─── Page layout shell ─── */
.main{
  flex:1; min-width:0;
  background:var(--md-surface-container-low);
  display:flex; flex-direction:column;
  min-height:100vh;
}
.page-header{
  position:sticky; top:0; z-index:5;
  background:var(--md-surface-container-low);
  border-bottom:1px solid var(--md-outline-variant);
  padding:20px 28px;
}
.page-header .crumbs{
  display:flex; gap:8px; align-items:center;
  font-size:.78rem; color:var(--md-outline); margin-bottom:6px;
}
.page-header .crumbs a{ color:var(--md-outline); text-decoration:none; transition:color var(--transition-fast); }
.page-header .crumbs a:hover{ color:var(--md-primary); }
.page-header .crumbs .icon{ font-size:1rem; }
.page-header h1{
  margin:0; font-size:1.6rem; font-weight:700;
  display:flex; align-items:center; gap:12px;
  color:var(--md-on-surface);
}
.page-header h1 .icon{ font-size:1.8rem; color:var(--md-primary); }
.page-header .sub{ margin-top:4px; font-size:.85rem; color:var(--md-outline); }

.content-wrap{
  flex:1; max-width:1400px; width:100%;
  margin:24px auto; padding:0 28px 48px;
}
.content-wrap.split{
  display:grid; grid-template-columns: minmax(0, 1fr) 360px; gap:24px;
}
@media (max-width:1100px){
  .content-wrap.split{ grid-template-columns:1fr; }
}
@media (max-width:800px){
  .content-wrap, .content-wrap.split{ padding:0 16px 32px; }
  .page-header{ padding:16px 20px; }
  .page-header h1{ font-size:1.3rem; }
}

/* ─── Toolbar ─── */
.toolbar{
  display:flex; gap:12px; align-items:center; flex-wrap:wrap;
  margin-bottom:16px;
}
.search-input{
  display:flex; gap:8px; align-items:center;
  background:var(--md-surface);
  border:1px solid var(--md-outline-variant);
  border-radius:var(--radius-full);
  padding:10px 16px;
  box-shadow:var(--elevation-1);
  min-width:240px; flex:1; max-width:420px;
  transition:border-color var(--transition-fast), box-shadow var(--transition-fast);
}
.search-input:focus-within{
  border-color:var(--md-primary);
  box-shadow:0 0 0 3px rgba(29,44,120,.12);
}
.search-input .icon{ color:var(--md-outline); }
.search-input input{
  flex:1; border:none; outline:none; background:transparent;
  font:500 .95rem "Inter"; color:var(--md-on-surface); min-width:0;
}
.search-input input::placeholder{ color:var(--md-outline); }

.seg-group{
  display:inline-flex; background:var(--md-surface-container);
  border:1px solid var(--md-outline-variant); border-radius:var(--radius-full);
  padding:3px; gap:2px;
}
.seg-btn{
  background:transparent; border:none; outline:none;
  font:500 .82rem "Inter"; color:var(--md-on-surface);
  padding:6px 14px; border-radius:var(--radius-full);
  cursor:pointer; transition:all var(--transition-fast);
  display:inline-flex; align-items:center; gap:5px; white-space:nowrap;
}
.seg-btn:hover{ background:var(--md-surface-container-high); }
.seg-btn.active{
  background:var(--md-primary); color:var(--md-on-primary);
  box-shadow:var(--elevation-1);
}
.seg-btn .icon{ font-size:1rem; }

.filter-select{
  border:1px solid var(--md-outline-variant);
  background:var(--md-surface);
  color:var(--md-on-surface);
  border-radius:var(--radius-full);
  padding:8px 14px;
  font:500 .85rem "Inter";
  cursor:pointer; outline:none;
  transition:border-color var(--transition-fast), box-shadow var(--transition-fast);
}
.filter-select:focus{
  border-color:var(--md-primary);
  box-shadow:0 0 0 3px rgba(29,44,120,.12);
}

.count-chip{
  display:inline-flex; align-items:center; gap:6px;
  background:var(--md-primary-container); color:var(--md-on-primary-container);
  font:600 .78rem "Inter";
  padding:6px 12px; border-radius:var(--radius-full);
  margin-left:auto;
}
.count-chip .icon{ font-size:1rem; }

/* ─── Surface card ─── */
.surface{
  background:var(--md-surface);
  border:1px solid var(--md-outline-variant);
  border-radius:var(--radius-lg);
  box-shadow:var(--elevation-1);
  overflow:hidden;
}
.surface + .surface{ margin-top:16px; }
.surface-header{
  padding:16px 20px;
  border-bottom:1px solid var(--md-outline-variant);
  display:flex; align-items:center; gap:10px;
  background:var(--md-surface-container-low);
}
.surface-header h2{ margin:0; font-size:1rem; font-weight:600; flex:1; display:flex; align-items:center; gap:8px; }
.surface-header h2 .icon{ color:var(--md-primary); }
.surface-body{ padding:20px; }

/* ─── Data table ─── */
.data-table-wrap{ overflow-x:auto; }
.data-table{
  width:100%; border-collapse:separate; border-spacing:0;
  font-size:.88rem;
}
.data-table thead th{
  position:sticky; top:0;
  background:var(--md-surface-container);
  color:var(--md-outline); font-weight:600;
  text-align:left; padding:14px 16px;
  font-size:.72rem; letter-spacing:.04em; text-transform:uppercase;
  border-bottom:1px solid var(--md-outline-variant);
  white-space:nowrap;
}
.data-table tbody td{
  padding:14px 16px;
  border-bottom:1px solid var(--md-outline-variant);
  vertical-align:top; color:var(--md-on-surface);
}
.data-table tbody tr{
  transition:background-color var(--transition-fast);
}
.data-table tbody tr:hover{ background:var(--md-surface-container-low); }
.data-table tbody tr.is-editing{ background:var(--md-primary-container); }
.data-table tbody tr.is-editing td{ color:var(--md-on-primary-container); }
.data-table tbody tr:last-child td{ border-bottom:none; }

.data-table .row-title{ font-weight:600; font-size:.95rem; margin-bottom:2px; }
.data-table .row-sub{ font-size:.82rem; color:var(--md-outline); line-height:1.4; }
.data-table .row-meta{
  font-size:.72rem; color:var(--md-outline);
  font-family:ui-monospace, Menlo, Consolas, monospace;
  margin-top:4px;
}
.data-table .cell-mono{ font-family:ui-monospace, Menlo, Consolas, monospace; font-size:.82rem; }
.data-table .cell-id{ color:var(--md-outline); font-weight:500; white-space:nowrap; }
.data-table .cell-nowrap{ white-space:nowrap; }

/* ─── Pills / badges ─── */
.pill{
  display:inline-flex; align-items:center; gap:4px;
  padding:3px 10px; border-radius:var(--radius-full);
  font:600 .72rem "Inter"; letter-spacing:.02em;
}
.pill.success{ background:var(--md-success-container); color:var(--md-on-success-container); }
.pill.danger { background:var(--md-danger-container);  color:var(--md-on-danger-container); }
.pill.warning{ background:var(--md-warning-container); color:var(--md-on-warning-container); }
.pill.info   { background:var(--md-info-container);    color:var(--md-on-info-container); }
.pill.neutral{ background:var(--md-surface-container-high); color:var(--md-outline); }
.pill .dot{ width:6px; height:6px; border-radius:50%; background:currentColor; }

/* ─── Buttons ─── */
.btn{
  display:inline-flex; align-items:center; gap:6px;
  font:600 .88rem "Inter";
  padding:10px 18px; border-radius:var(--radius-full);
  border:1px solid var(--md-outline-variant); background:transparent;
  color:var(--md-primary); cursor:pointer;
  text-decoration:none; white-space:nowrap;
  transition:all var(--transition-fast);
}
.btn:hover{ background:var(--md-primary-container); border-color:transparent; }
.btn.primary{
  background:var(--md-primary); color:var(--md-on-primary);
  border-color:transparent; box-shadow:var(--elevation-1);
}
.btn.primary:hover{ background:#16236a; box-shadow:var(--elevation-2); }
html[data-theme="dark"] .btn.primary:hover{ background:#c0d4ff; }
.btn.danger{
  background:var(--md-danger); color:#fff; border-color:transparent;
  box-shadow:var(--elevation-1);
}
.btn.danger:hover{ background:#8e1414; box-shadow:var(--elevation-2); }
.btn.sm{ padding:6px 12px; font-size:.8rem; }
.btn .icon{ font-size:1.05rem; }
.btn[disabled]{ opacity:.5; cursor:not-allowed; }

.icon-btn{
  width:34px; height:34px; border-radius:50%;
  border:none; background:transparent;
  color:var(--md-outline); cursor:pointer;
  display:inline-grid; place-items:center;
  transition:all var(--transition-fast);
  text-decoration:none;
}
.icon-btn:hover{ background:var(--md-surface-container-high); color:var(--md-primary); }
.icon-btn.danger:hover{ background:var(--md-danger-container); color:var(--md-danger); }
.icon-btn .icon{ font-size:1.15rem; }

/* ─── Form fields ─── */
.field{ display:flex; flex-direction:column; gap:6px; margin-bottom:16px; }
.field-row{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:12px; }
@media(max-width:600px){ .field-row{ grid-template-columns:1fr; } }
.field label{
  font:600 .78rem "Inter"; color:var(--md-on-surface);
  display:flex; align-items:center; gap:6px;
}
.field label .req{ color:var(--md-danger); }
.field label .hint{ font-weight:400; color:var(--md-outline); font-size:.75rem; }
.field input, .field select, .field textarea{
  width:100%;
  border:1px solid var(--md-outline-variant);
  background:var(--md-surface);
  color:var(--md-on-surface);
  border-radius:var(--radius-md);
  padding:10px 12px;
  font:500 .9rem "Inter";
  outline:none;
  transition:border-color var(--transition-fast), box-shadow var(--transition-fast);
}
.field input:focus, .field select:focus, .field textarea:focus{
  border-color:var(--md-primary);
  box-shadow:0 0 0 3px rgba(29,44,120,.12);
}
.field input[readonly], .field input[disabled], .field select[disabled], .field textarea[readonly]{
  background:var(--md-surface-container);
  color:var(--md-outline); cursor:not-allowed;
}
.field textarea{ resize:vertical; min-height:80px; font-family:inherit; }
.field .char-count{ align-self:flex-end; font-size:.72rem; color:var(--md-outline); }
.field .help{ font-size:.75rem; color:var(--md-outline); margin-top:-2px; }

/* ─── Edit / detail side panel ─── */
.edit-panel{
  position:sticky; top:24px;
  align-self:start;
  background:var(--md-surface);
  border:1px solid var(--md-outline-variant);
  border-radius:var(--radius-lg);
  box-shadow:var(--elevation-2);
  overflow:hidden;
  max-height:calc(100vh - 48px);
  display:flex; flex-direction:column;
}
.edit-panel .panel-head{
  padding:18px 20px;
  border-bottom:1px solid var(--md-outline-variant);
  display:flex; align-items:center; gap:10px;
  background:var(--md-surface-container-low);
}
.edit-panel .panel-head h2{
  margin:0; font-size:1rem; font-weight:600;
  display:flex; align-items:center; gap:8px; flex:1;
}
.edit-panel .panel-head .icon{ color:var(--md-primary); }
.edit-panel .panel-body{
  padding:20px;
  overflow-y:auto;
  flex:1;
}
.edit-panel .panel-footer{
  padding:14px 20px;
  border-top:1px solid var(--md-outline-variant);
  display:flex; gap:8px; justify-content:flex-end;
  background:var(--md-surface);
}

/* ─── Empty / fallback states ─── */
.empty-state{
  padding:40px 20px;
  text-align:center;
  color:var(--md-outline);
}
.empty-state .icon{
  font-size:3rem; color:var(--md-outline-variant);
  display:block; margin:0 auto 12px;
}
.empty-state h3{ margin:0 0 6px; font-size:1rem; color:var(--md-on-surface); font-weight:600; }
.empty-state p{ margin:0; font-size:.85rem; line-height:1.5; }

.list-empty{
  padding:60px 20px;
  text-align:center; color:var(--md-outline);
}
.list-empty .icon{ font-size:3.5rem; color:var(--md-outline-variant); display:block; margin-bottom:12px; }
.list-empty h3{ margin:0 0 6px; font-size:1.1rem; font-weight:600; color:var(--md-on-surface); }
.list-empty p { margin:0; font-size:.9rem; line-height:1.5; }
.list-empty .btn{ margin-top:16px; }

/* API/error banner — for showing when an API call failed but the page still renders */
.api-error-banner{
  display:flex; align-items:flex-start; gap:12px;
  padding:14px 18px;
  background:var(--md-danger-container); color:var(--md-on-danger-container);
  border:1px solid color-mix(in srgb, var(--md-danger) 25%, transparent);
  border-radius:var(--radius-md);
  margin-bottom:16px;
  font-size:.88rem;
}
.api-error-banner .icon{ color:var(--md-danger); font-size:1.3rem; flex-shrink:0; }
.api-error-banner .msg{ flex:1; }
.api-error-banner .msg strong{ display:block; margin-bottom:2px; }

/* ─── Toast (slides in from top right) ─── */
.toast{
  position:fixed; top:24px; right:24px; z-index:9999;
  background:var(--md-surface);
  border:1px solid var(--md-outline-variant);
  border-radius:var(--radius-md);
  box-shadow:var(--elevation-3);
  padding:14px 18px;
  display:flex; align-items:center; gap:10px;
  min-width:280px; max-width:380px;
  animation: slideIn .25s cubic-bezier(.4,0,.2,1);
  border-left:4px solid var(--md-primary);
}
.toast.success{ border-left-color:var(--md-success); }
.toast.error  { border-left-color:var(--md-danger);  }
.toast.warning{ border-left-color:var(--md-warning); }
.toast .icon{ font-size:1.3rem; }
.toast.success .icon{ color:var(--md-success); }
.toast.error   .icon{ color:var(--md-danger);  }
.toast.warning .icon{ color:var(--md-warning); }
.toast .msg{ font-size:.88rem; font-weight:500; flex:1; color:var(--md-on-surface); }
.toast .close{
  background:transparent; border:none; cursor:pointer;
  color:var(--md-outline); padding:4px;
  display:grid; place-items:center; border-radius:50%;
}
.toast .close:hover{ background:var(--md-surface-container-high); color:var(--md-on-surface); }
.toast .close .icon{ font-size:1rem; color:inherit; }
@keyframes slideIn{
  from{ transform:translateX(20px); opacity:0; }
  to  { transform:translateX(0); opacity:1; }
}
@keyframes fadeOut{
  to{ opacity:0; transform:translateX(20px); }
}
.toast.hiding{ animation: fadeOut .2s ease forwards; }

/* ─── Misc helpers ─── */
.flex-row{ display:flex; gap:8px; align-items:center; flex-wrap:wrap; }
.spacer{ flex:1; }
.text-muted{ color:var(--md-outline); }
.text-success{ color:var(--md-success); }
.text-danger{ color:var(--md-danger); }
.text-small{ font-size:.78rem; }
.mt-8{ margin-top:8px; } .mt-16{ margin-top:16px; } .mt-24{ margin-top:24px; }
.mb-8{ margin-bottom:8px; } .mb-16{ margin-bottom:16px; } .mb-24{ margin-bottom:24px; }
.hidden{ display:none !important; }