/* gia.css – GIA Shared Styles v1.0
   Colors overridden by theme-*.css per portal */
:root{
  --bg:#f5f7fb;--panel:#fff;--text:#18202f;--muted:#667085;--line:#d8deea;
  --accent:#6d28d9;--accent-dark:#4c1d95;--accent-light:#f5f3ff;--accent-line:#ddd6fe;
  --danger:#b42318;--ok:#067647;--header-bg:#101828
}
*{box-sizing:border-box}
body{margin:0;background:var(--bg);color:var(--text);font-family:system-ui,-apple-system,Segoe UI,sans-serif;font-size:15px;line-height:1.5}

/* ── Header ─────────────────────────────────────────────── */
header{background:var(--header-bg);color:#fff;padding:.55rem 1.2rem;display:flex;align-items:center;gap:1rem;position:sticky;top:0;z-index:20}
.site-wrap{display:flex;align-items:baseline;gap:.4rem;flex-shrink:0}
.site-title{font-size:1rem;font-weight:700;color:#fff;white-space:nowrap;text-decoration:none;margin:0}
.header-user{color:#d0d5dd;font-size:.87rem}

/* ── Nav / Hamburger ─────────────────────────────────────── */
.menu{display:flex;align-items:center;margin-left:auto;position:relative}
.menu>input[type=checkbox]{display:none}
.menu>label{display:none;cursor:pointer;color:#fff;border:1px solid rgba(255,255,255,.35);border-radius:6px;padding:5px 10px;font-size:1.3rem;line-height:1}
nav{display:flex;gap:6px;align-items:center;flex-wrap:wrap}
nav button[data-view]{color:rgba(255,255,255,.72);background:transparent;border:0;font:inherit;cursor:pointer;padding:6px 5px}
nav button[data-view]:hover,nav button[data-view].active{color:#fff;font-weight:600}
#logoutBtn{color:rgba(255,255,255,.55);background:transparent;border:0;font:inherit;cursor:pointer;padding:6px 5px}

/* ── Layout ─────────────────────────────────────────────── */
main{max-width:1120px;margin:0 auto;padding:28px 20px}
h2{font-size:1.25rem;margin:0 0 1rem}
h3{font-size:1rem;margin:0 0 .75rem}
.hidden{display:none!important}
.muted{color:var(--muted)}
.nowrap{white-space:nowrap}
.token{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:12px;word-break:break-all}
.hint{font-size:.78rem;color:var(--muted);margin-top:.2rem}

/* ── Panel / Card ────────────────────────────────────────── */
.panel,.card{background:var(--panel);border:1px solid var(--accent-line);border-radius:10px;padding:1.2rem;margin-bottom:1rem}
.login-panel{max-width:480px;margin:40px auto}
.login-state .menu{display:none!important}
.app-overlay{position:fixed;inset:0;z-index:200;background:var(--bg);overflow-y:auto}
.split{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:1rem}
.topbar{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:1rem}
.row-actions{display:flex;gap:8px;flex-wrap:wrap;align-items:center}

/* ── Stats ───────────────────────────────────────────────── */
.stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(120px,1fr));gap:.8rem;margin-bottom:1.1rem}
.stat-full{grid-column:1/-1}
.metric{display:block;background:#fff;border:1px solid var(--accent-line);border-radius:10px;padding:1rem;color:var(--text);text-decoration:none;transition:box-shadow .15s;text-align:center}
.metric:hover{box-shadow:0 4px 12px rgba(0,0,0,.08)}
.metric span{display:block;color:var(--muted);font-size:.8rem}
.metric strong{display:block;font-size:2rem;font-weight:700;margin-top:.3rem;color:var(--accent-dark)}
.metric.m-yellow{background:#fef3c7}.metric.m-yellow strong{color:#92400e}
.metric.m-blue{background:#dbeafe}.metric.m-blue strong{color:#1e40af}
.metric.m-green{background:#d1fae5}.metric.m-green strong{color:#065f46}
.metric.m-red{background:#fee2e2}.metric.m-red strong{color:#991b1b}
.metric.m-gray{background:#f3f4f6}.metric.m-gray strong{color:#4b5563}
.metric.m-neutral{background:#f9fafb}.metric.m-neutral strong{color:#374151}

/* ── Table ───────────────────────────────────────────────── */
table{width:100%;border-collapse:collapse;background:#fff;border:1px solid var(--line);border-radius:8px;overflow:hidden}
th,td{text-align:left;border-bottom:1px solid var(--line);padding:10px 12px;vertical-align:top}
th{font-size:13px;color:var(--muted);font-weight:650;background:#f8fafc}
tr:last-child td{border-bottom:0}
.row-link{color:var(--text);font-weight:600;text-decoration:none}
.row-link:hover{color:var(--accent);text-decoration:underline}

/* ── Forms ───────────────────────────────────────────────── */
.stack{display:grid;gap:14px}
.form-row{margin-bottom:.75rem}
label{display:grid;gap:5px;font-weight:600;font-size:.88rem;color:var(--accent-dark)}
input,select,textarea{width:100%;padding:.42rem .6rem;border:1px solid var(--accent-line);border-radius:6px;font:inherit;background:#fff}
input:focus,select:focus,textarea:focus{outline:2px solid var(--accent);outline-offset:-1px;border-color:transparent}

/* ── Buttons ─────────────────────────────────────────────── */
button,.btn{background:var(--accent);border:1px solid var(--accent);color:#fff;border-radius:6px;padding:.42rem .9rem;font:inherit;font-size:.87rem;cursor:pointer;text-decoration:none;display:inline-flex;align-items:center;gap:6px}
button.secondary,.btn.sec{background:#fff;color:var(--accent);border-color:var(--accent-line)}
button.warning{background:#fdb022;border-color:#fdb022;color:#18202f}
button.danger,.btn.dan{background:var(--danger);border-color:var(--danger);color:#fff}
button:disabled{opacity:.45;cursor:not-allowed}

/* ── Badges ──────────────────────────────────────────────── */
.badge{display:inline-block;border-radius:999px;padding:3px 8px;font-size:12px;font-weight:650}
.badge.green{background:#ecfdf3;color:#067647}
.badge.yellow{background:#fffaeb;color:#93370d}
.badge.red{background:#fef3f2;color:#b42318}
.badge.blue{background:#dbeafe;color:#1e40af}
.badge.gray{background:#f2f4f7;color:#667085}
.badge.orange{background:#ffedd5;color:#9a3412}

/* ── Alerts ──────────────────────────────────────────────── */
.alert{border:1px solid #fedf89;background:#fffaeb;color:#93370d;padding:10px 12px;border-radius:6px;margin-bottom:14px}
.alert.ok{border-color:#abefc6;background:#ecfdf3;color:var(--ok)}
.alert.err{border-color:#fecdca;background:#fffbfa;color:var(--danger)}

/* ── Pager ───────────────────────────────────────────────── */
.pager{margin-top:1rem}

/* ── Filters ─────────────────────────────────────────────── */
.filters{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:12px;align-items:end;margin-bottom:1rem}
.filter-2col{display:grid;grid-template-columns:1fr auto;gap:.8rem;margin-bottom:.85rem;align-items:end}
.filter-2col .role-sw{align-self:flex-end}
.filters > *{min-width:0}
.filters-334{grid-template-columns:30% 25% 1fr}

/* ── Search ──────────────────────────────────────────────── */
.srch-wrap{display:flex;height:2.1rem}
.srch-wrap input{border:1px solid var(--accent-line);border-right:none;border-radius:6px 0 0 6px;padding:0 .6rem;font:inherit;flex:1;min-width:0;background:#fff;height:100%}
.srch-wrap button{background:var(--accent);border:1px solid var(--accent);color:#fff;border-radius:0 6px 6px 0;padding:0 .7rem;font:inherit;cursor:pointer;height:100%;flex-shrink:0}

/* ── Role switch ─────────────────────────────────────────── */
.role-sw{display:inline-flex;border:1px solid var(--accent-line);border-radius:6px;overflow:hidden;height:2.1rem}
.role-sw label{display:flex;align-items:center;cursor:pointer;user-select:none;height:100%}
.role-sw label span{padding:0 .68rem;font-size:.8rem;font-weight:500;color:var(--accent);background:var(--accent-light);height:100%;display:flex;align-items:center;white-space:nowrap}
.role-sw label:has(input:checked) span{background:var(--accent);color:#fff}
.role-sw input[type=radio]{display:none}
.filters .role-sw{display:flex;width:100%}
.filters .role-sw label{flex:1}
.filters .role-sw label span{justify-content:center;padding:0 .25rem;width:100%}

/* ── Info grid ───────────────────────────────────────────── */
.info-grid{display:grid;grid-template-columns:1fr 1fr;gap:.5rem .9rem}
.info-lbl{font-size:.75rem;color:var(--muted);font-weight:600;text-transform:uppercase;letter-spacing:.04em}
.info-val{font-size:.93rem;color:var(--text);margin-top:.1rem}

/* ── Modal ───────────────────────────────────────────────── */
.modal-backdrop{position:fixed;inset:0;background:rgba(16,24,40,.42);z-index:30;display:grid;place-items:center;padding:20px}
.modal{width:min(480px,100%);background:#fff;border:1px solid var(--line);border-radius:10px;padding:1.4rem;box-shadow:0 18px 50px rgba(16,24,40,.28)}

/* ── Mobile ──────────────────────────────────────────────── */
@media(max-width:720px){
  header{align-items:center}
  .site-wrap{flex-direction:column;align-items:flex-start;gap:0}
  .header-user{display:block;font-size:.78rem;line-height:1.3;margin-top:2px}
  .header-user:empty{display:none}
  .menu>label{display:block}
  .menu nav{display:none;position:absolute;right:0;top:46px;z-index:10;min-width:220px;background:var(--header-bg);border:1px solid rgba(255,255,255,.15);border-radius:8px;padding:8px;box-shadow:0 12px 30px rgba(16,24,40,.25)}
  .menu>input:checked+label+nav{display:flex;flex-direction:column;gap:2px}
  .menu nav button[data-view],.menu nav #logoutBtn{width:100%;text-align:left;padding:10px 8px}
  main{padding:20px 12px}
  .panel,.card{padding:1rem}
  .topbar{flex-direction:column;align-items:flex-start}
  .row-actions{width:100%}
  .row-actions button{flex:1 1 auto}
  .filters,.filters-334{grid-template-columns:1fr}
  .filter-2col{grid-template-columns:1fr}
  .filter-2col .role-sw{display:flex;width:100%;height:2.1rem}
  .filter-2col .role-sw label{flex:1;height:100%}
  .filter-2col .role-sw label span{justify-content:center;padding:0;width:100%}
  .stats{grid-template-columns:1fr 1fr}
  .stats .metric:nth-child(3){grid-column:1/-1}
  .info-grid{grid-template-columns:1fr}
  table{display:block;border:0;background:transparent}
  thead{display:none}
  tbody,tr,td{display:block}
  tr{background:#fff;border:1px solid var(--line);border-radius:8px;margin-bottom:10px;overflow:hidden}
  td{border:0;padding:8px 12px}
  td::before{content:attr(data-label);display:block;color:var(--muted);font-size:12px;font-weight:650;margin-bottom:3px}
  .pager button{width:100%}
  .pager span{text-align:center}
}