/* shared.css — Single source of truth for module layout
 * Sprint: GAP-LAYOUT-CENTRAL-01
 * Used by: toolserver_app.html, admin.html, platform.html,
 *          projects.html, wsp.html, crm.html
 * Replaces: per-module <style> blocks (eliminated as duplicates)
 *
 * Change here = effective everywhere. Test: increment font-size below.
 */

/* ── Theme tokens (Light / Dark / Forest) ──────────────────────────────── */
:root, [data-theme="light"] {
  --blue:#2563eb; --bg:#f0f4f9; --bg1:#ffffff; --bg2:#f6f8fc;
  --border:#d1dcea; --border2:#b8cce0; --text:#1a2840; --text2:#4a6480;
  --text3:#7a9ab8; --emerald:#16a34a; --rose:#dc2626; --amber:#d97706;
  --mono:'IBM Plex Mono','Cascadia Code',monospace;
  --sans:'IBM Plex Sans',system-ui,sans-serif;
  --shadow:0 1px 4px rgba(0,0,0,.06); --r:6px; --r2:10px; --mod-label:#2d6bc4;
}
[data-theme="dark"] {
  --blue:#3b82f6; --bg:#0f1117; --bg1:#161b25; --bg2:#1e2535;
  --border:#2a3248; --border2:#3d4f70; --text:#e2e8f0; --text2:#8899bb;
  --text3:#4a5a7a; --emerald:#22c55e; --rose:#ef4444; --amber:#eab308;
  --mono:'IBM Plex Mono','Cascadia Code',monospace;
  --sans:'IBM Plex Sans',system-ui,sans-serif;
  --shadow:0 1px 4px rgba(0,0,0,.3); --r:6px; --r2:10px; --mod-label:#7aaaee;
}
[data-theme="forest"] {
  --blue:#166534; --bg:#f2f5f0; --bg1:#ffffff; --bg2:#e8ede4;
  --border:#c2d0b8; --border2:#8aab78; --text:#0f1f0a; --text2:#2d4a22;
  --text3:#5a7a4a; --emerald:#15803d; --rose:#b91c1c; --amber:#92400e;
  --mono:'IBM Plex Mono','Cascadia Code',monospace;
  --sans:'IBM Plex Sans',system-ui,sans-serif;
  --shadow:0 1px 4px rgba(0,0,0,.08); --r:6px; --r2:10px; --mod-label:#1a5c3a;
}

/* ── Aliases for legacy refs (projects.js etc.) ────────────────────────── */
:root,[data-theme="light"],[data-theme="dark"],[data-theme="forest"]{
  --text-dim:var(--text2);--text-faint:var(--text3);--font-mono:var(--mono);
}

/* ── Reset + base ──────────────────────────────────────────────────────── */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0;}
html,body{height:100%;background:var(--bg);color:var(--text);font-family:var(--sans);font-size:14px;}

/* ── Topbar ────────────────────────────────────────────────────────────── */
#topbar{position:fixed;top:0;left:0;right:0;height:48px;z-index:500;background:var(--bg1);border-bottom:1px solid var(--border);display:flex;align-items:center;gap:0;padding:0 16px;box-shadow:var(--shadow);}
.tb-btn{font-family:var(--mono);font-size:11px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:var(--text2);border:none;background:none;cursor:pointer;padding:0 14px;height:48px;border-bottom:3px solid transparent;transition:color .15s,border-color .15s,background .15s;}
.tb-btn:hover{color:var(--blue);background:rgba(37,99,235,.04);}
.tb-btn.active{color:var(--blue);border-bottom-color:var(--blue);background:rgba(37,99,235,.08);font-weight:700;}
.tb-btn-action{display:flex;align-items:center;justify-content:center;width:28px;height:28px;border-radius:var(--r,4px);border:none;background:none;cursor:pointer;font-size:14px;color:var(--text3);transition:color .15s;flex-shrink:0;}
.tb-btn-action:hover{color:var(--blue);}
.tb-lang-sel{font-family:var(--mono);font-size:10px;font-weight:600;padding:3px 6px;border:1px solid var(--border);border-radius:4px;background:var(--bg2);color:var(--mod-label);cursor:pointer;transition:border-color .15s;flex-shrink:0;}
.tb-lang-sel:hover{border-color:var(--blue);}

/* ── Layout wrap + statusbar ───────────────────────────────────────────── */
#layout-wrap{position:fixed;top:48px;left:0;right:0;bottom:26px;}
#statusbar{position:fixed;bottom:0;left:0;right:0;height:26px;z-index:400;background:var(--bg1);border-top:1px solid var(--border);font-family:var(--mono);font-size:10px;color:var(--text3);display:grid;grid-template-columns:1fr auto 1fr;align-items:center;padding:0 12px;column-gap:16px;}
#sb-left{justify-self:start;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:100%;}
#sb-center{justify-self:center;display:flex;align-items:center;gap:10px;}
#sb-right{justify-self:end;}
#status-msg{flex:1;}
#status-msg.ok{color:var(--emerald);}
#status-msg.err{color:var(--rose);}

/* ── Theme + nav buttons (shared with /admin etc.) ─────────────────────── */
.dav-browse-btn{font-size:12px;padding:3px 7px;border:1px solid var(--border);border-radius:4px;background:var(--bg2);cursor:pointer;color:var(--text2);line-height:1;vertical-align:middle;transition:border-color .15s;}
.dav-browse-btn:hover{border-color:var(--blue);}
.theme-btn{font-size:14px;background:none;border:1px solid var(--border);border-radius:3px;padding:3px 8px;cursor:pointer;color:var(--text2);line-height:1;transition:border-color .15s,color .15s;}
.theme-btn:hover{border-color:var(--blue);color:var(--blue);}
.theme-btn.active{border-color:var(--blue);color:var(--blue);background:rgba(37,99,235,.08);}

/* ── w2ui sidebar + grid ───────────────────────────────────────────────── */
.w2ui-sidebar{border-right:1px solid var(--border);background:var(--bg2);}
.w2ui-sidebar .w2ui-node{font-family:var(--mono);font-size:11px;}
.w2ui-sidebar .w2ui-node.w2ui-selected{background:rgba(37,99,235,.12);color:var(--blue);font-weight:600;border-left:3px solid var(--blue);}
.w2ui-grid td{font-family:var(--mono);font-size:12px;}
.w2ui-grid .w2ui-head{font-family:var(--mono);font-size:10px;text-transform:uppercase;letter-spacing:.08em;}

/* ── Panels + cards ────────────────────────────────────────────────────── */
.panel{background:var(--bg1);border:1px solid var(--border);border-radius:var(--r);}
.panel-head{padding:12px 16px;border-bottom:1px solid var(--border);display:flex;align-items:center;gap:10px;}
.panel-head h2{font-size:14px;font-weight:600;flex:1;}
.panel-body{padding:16px;}
.card-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:12px;margin-bottom:20px;}
.stat-card{background:var(--bg1);border:1px solid var(--border);border-radius:var(--r);padding:16px;}
.stat-label{font-size:11px;font-family:var(--mono);text-transform:uppercase;letter-spacing:.07em;color:var(--text3);margin-bottom:6px;}
.stat-value{font-size:28px;font-family:var(--mono);font-weight:700;color:var(--text);line-height:1;}
.stat-sub{font-size:11px;color:var(--text2);margin-top:4px;}

/* ── Table / tbl ───────────────────────────────────────────────────────── */
.tbl{width:100%;border-collapse:collapse;font-size:14px;}
.tbl th{text-align:left;padding:8px 12px;font-size:11px;font-family:var(--mono);text-transform:uppercase;letter-spacing:.07em;color:var(--text3);border-bottom:1px solid var(--border);font-weight:500;}
.tbl td{padding:9px 12px;border-bottom:1px solid var(--border);vertical-align:middle;}
.tbl tr:last-child td{border-bottom:none;}
.tbl tr:hover td{background:var(--bg2);cursor:pointer;}
.tbl .mono{font-family:var(--mono);font-size:12px;color:var(--text2);}

/* ── Badges ────────────────────────────────────────────────────────────── */
.badge{display:inline-block;padding:2px 8px;border-radius:3px;font-size:11px;font-family:var(--mono);font-weight:600;}
.badge-blue{background:var(--blue);color:#fff;}
.badge-green{background:var(--emerald);color:#fff;}
.badge-yellow{background:var(--amber);color:#1a1a1a;}
.badge-red{background:var(--rose);color:#fff;}
.badge-grey{background:var(--bg2);color:var(--text2);border:1px solid var(--border);}
.badge-orange{background:#ea580c;color:#fff;}

/* ── Buttons ───────────────────────────────────────────────────────────── */
.btn{display:inline-flex;align-items:center;gap:6px;padding:6px 14px;border-radius:var(--r);border:1px solid var(--border);background:var(--bg2);color:var(--text);font-size:13px;cursor:pointer;transition:all .12s;font-family:var(--sans);}
.btn:hover{border-color:var(--border2);background:var(--bg1);}
.btn-primary{background:var(--blue);border-color:var(--blue);color:#fff;}
.btn-primary:hover{opacity:.9;}
.btn-sm{padding:4px 10px;font-size:12px;}
.btn-danger{border-color:rgba(239,68,68,.4);color:var(--rose);}
.btn-danger:hover{background:rgba(239,68,68,.1);}

/* ── Forms ─────────────────────────────────────────────────────────────── */
.form-row{margin-bottom:14px;}
.form-label{display:block;font-size:11px;font-family:var(--mono);text-transform:uppercase;letter-spacing:.07em;color:var(--text2);margin-bottom:5px;}
.form-input{width:100%;background:var(--bg);border:1px solid var(--border);border-radius:var(--r);padding:7px 10px;color:var(--text);font-size:13px;font-family:var(--sans);outline:none;transition:border .12s;}
.form-input:focus{border-color:var(--blue);}
.form-select{width:100%;background:var(--bg);border:1px solid var(--border);border-radius:var(--r);padding:7px 10px;color:var(--text);font-size:13px;outline:none;cursor:pointer;}
.form-select option{background:var(--bg1);}
.form-textarea{resize:vertical;min-height:80px;}
.form-hint{font-size:11px;color:var(--text3);margin-top:3px;}
.form-row-2{display:grid;grid-template-columns:1fr 1fr;gap:12px;}

/* ── Empty state ───────────────────────────────────────────────────────── */
.empty{text-align:center;padding:48px 24px;color:var(--text3);}
.empty-icon{font-size:32px;margin-bottom:12px;opacity:.4;}
.empty-text{font-size:14px;}

/* ── Matrix grid (governance) ──────────────────────────────────────────── */
.matrix-grid{display:grid;grid-template-columns:80px repeat(3,1fr);gap:2px;margin-top:8px;}
.mx-header{padding:8px;text-align:center;font-family:var(--mono);font-size:11px;text-transform:uppercase;letter-spacing:.07em;color:var(--text3);}
.mx-tier{padding:8px;font-family:var(--mono);font-size:11px;color:var(--text3);display:flex;align-items:center;}
.mx-cell{background:var(--bg2);border:1px solid var(--border);border-radius:3px;padding:10px 12px;cursor:pointer;transition:all .12s;}
.mx-cell:hover{border-color:var(--blue);background:rgba(37,99,235,.06);}
.mx-cell.col-a{border-left:3px solid var(--text3);opacity:.7;cursor:default;}
.mx-cell.col-a:hover{border-color:var(--text3);background:var(--bg2);}
.mx-cell-code{font-family:var(--mono);font-size:13px;font-weight:700;color:var(--blue);margin-bottom:4px;}
.mx-cell-desc{font-size:11px;color:var(--text2);line-height:1.4;}

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

/* ── Modal overlay (used by projects.js, available globally) ───────────── */
#modal-overlay{display:none;position:fixed;inset:0;background:rgba(0,0,0,.4);z-index:9000;align-items:center;justify-content:center;}
#modal-overlay.open{display:flex;}
#modal-box{background:var(--bg1);border:1px solid var(--border2);border-radius:var(--r2);width:560px;max-width:95vw;max-height:88vh;display:flex;flex-direction:column;box-shadow:0 8px 32px rgba(0,0,0,.18);}
#modal-header{padding:16px 20px;border-bottom:1px solid var(--border);display:flex;align-items:center;}
#modal-title{flex:1;font-size:14px;font-weight:700;color:var(--text);}
#modal-body{padding:20px;overflow-y:auto;flex:1;font-size:13px;color:var(--text);}
#modal-foot{padding:12px 20px;border-top:1px solid var(--border);display:flex;justify-content:flex-end;gap:8px;}