:root{--bg:#0a0a0a;--bg1:#0e0e0e;--bg2:#111;--bg3:#1a1a1a;--border:#1a1a1a;--border2:#222;--border3:#333;--text:#eee;--text2:#ccc;--text3:#aaa;--text4:#888;--text5:#555;--accent:#4af;--accent2:#6cf;--red:#ff4444;--orange:#ff8800;--yellow:#ffcc00;--green:#44bb44;--darkred:#5a1a1a;--darkgreen:#0a1a0a;--font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;--font-size-base:14px;--page-bg:var(--bg)}
html[data-theme="light"]{--bg:#f6f6f7;--bg1:#fff;--bg2:#f0f0f1;--bg3:#e7e7e9;--border:#dcdcdf;--border2:#c8c8cc;--border3:#b4b4b9;--text:#111;--text2:#222;--text3:#444;--text4:#666;--text5:#888;--darkred:#fde8e8;--darkgreen:#e8f7e8}
html[data-theme="light"] ::-webkit-scrollbar-track{background:var(--bg)}
html[data-theme="light"] ::-webkit-scrollbar-thumb{background:#bbb}
html[data-theme="light"] tr:hover td{background:#eaeaec}

/* C64 theme - mirrors kapley.com (deep blue background, light blue fg, monospace, uppercase). */
html[data-theme="c64"]{--bg:#3d3aaf;--bg1:#3a37a8;--bg2:#4a47bf;--bg3:#5a57c8;--border:#6a67d8;--border2:#7a77e0;--border3:#8a87e8;--text:#a1a0ff;--text2:#b0afff;--text3:#c0bfff;--text4:#9090df;--text5:#7878c8;--accent:#ffcc00;--accent2:#ffdd33;--red:#ff5577;--orange:#ff9933;--yellow:#ffcc00;--green:#66ff77;--darkred:#5a1a1a;--darkgreen:#1a4a1a;--font-family:'IBM Plex Mono','JetBrains Mono','Courier New',monospace}
html[data-theme="c64"] body{text-transform:uppercase;letter-spacing:.04em;text-shadow:0 0 1px rgba(161,160,255,.35)}
html[data-theme="c64"] input,html[data-theme="c64"] textarea,html[data-theme="c64"] select,html[data-theme="c64"] code,html[data-theme="c64"] pre{text-transform:none}
html[data-theme="c64"] ::-webkit-scrollbar-track{background:var(--bg2)}
html[data-theme="c64"] ::-webkit-scrollbar-thumb{background:var(--border3)}

/* Matrix theme - black bg, phosphor-green fg, monospace. */
html[data-theme="matrix"]{--bg:#000000;--bg1:#050a05;--bg2:#0a1a0a;--bg3:#0f2a0f;--border:#1a3a1a;--border2:#2a4a2a;--border3:#3a5a3a;--text:#00ff41;--text2:#00dd33;--text3:#00bb22;--text4:#009911;--text5:#006608;--accent:#00ff41;--accent2:#00ffaa;--red:#ff4444;--orange:#ffaa00;--yellow:#ffff44;--green:#00ff41;--darkred:#2a0a0a;--darkgreen:#0a2a0a;--font-family:'Courier New','Consolas','JetBrains Mono',monospace}
html[data-theme="matrix"] body{text-shadow:0 0 4px rgba(0,255,65,.45)}
html[data-theme="matrix"] ::-webkit-scrollbar-track{background:#000}
html[data-theme="matrix"] ::-webkit-scrollbar-thumb{background:#003311}
html[data-theme="matrix"] a,html[data-theme="matrix"] .nav-item.active{color:var(--accent)}
html[data-theme="light"] th{background:var(--bg2);color:var(--text4)}

/* Ocean theme - deep navy with seafoam accents. */
html[data-theme="ocean"]{--bg:#03101e;--bg1:#06182a;--bg2:#0a2238;--bg3:#0e2c44;--border:#143a55;--border2:#1d4a68;--border3:#2a5a7a;--text:#e6f1fb;--text2:#cfe1f0;--text3:#9fbfd8;--text4:#6f97b3;--text5:#4a6f88;--accent:#3ec8ff;--accent2:#7adcff;--red:#ff6b6b;--orange:#ffaa66;--yellow:#ffe066;--green:#5fe8b0;--darkred:#3a1a1a;--darkgreen:#0a2a22}

/* Amber terminal theme - warm orange-on-black, vintage CRT vibe. */
html[data-theme="amber"]{--bg:#0a0500;--bg1:#100a02;--bg2:#1a1004;--bg3:#241808;--border:#3a280c;--border2:#4a3214;--border3:#5a3e1c;--text:#ffb000;--text2:#e69a00;--text3:#bf8000;--text4:#996600;--text5:#664400;--accent:#ffcc44;--accent2:#ffd966;--red:#ff5555;--orange:#ff8800;--yellow:#ffd700;--green:#ccff00;--darkred:#2a0a00;--darkgreen:#1a2a00;--font-family:'Courier New','Consolas','JetBrains Mono',monospace}
html[data-theme="amber"] body{text-shadow:0 0 4px rgba(255,176,0,.35)}

/* Solarized Dark - the classic Ethan Schoonover palette. */
html[data-theme="solarized-dark"]{--bg:#002b36;--bg1:#073642;--bg2:#0a3d4a;--bg3:#0e4654;--border:#1a4a58;--border2:#22566a;--border3:#2a647c;--text:#fdf6e3;--text2:#eee8d5;--text3:#93a1a1;--text4:#839496;--text5:#586e75;--accent:#268bd2;--accent2:#2aa198;--red:#dc322f;--orange:#cb4b16;--yellow:#b58900;--green:#859900;--darkred:#3a1010;--darkgreen:#0a2a10}

/* Solarized Light - same palette inverted. */
html[data-theme="solarized-light"]{--bg:#fdf6e3;--bg1:#eee8d5;--bg2:#e3dcc4;--bg3:#d5cdb6;--border:#c8c0a8;--border2:#b8b098;--border3:#a8a088;--text:#073642;--text2:#586e75;--text3:#657b83;--text4:#839496;--text5:#93a1a1;--accent:#268bd2;--accent2:#2aa198;--red:#dc322f;--orange:#cb4b16;--yellow:#b58900;--green:#859900;--darkred:#fde8e8;--darkgreen:#e8f7e8}
html[data-theme="solarized-light"] th{background:var(--bg2);color:var(--text4)}
html[data-theme="solarized-light"] tr:hover td{background:#dcd5b9}

/* Rose Pine - soft mauve / dusty pink on muted dark base. */
html[data-theme="rose-pine"]{--bg:#191724;--bg1:#1f1d2e;--bg2:#26233a;--bg3:#2a2740;--border:#322f4a;--border2:#3e3a5c;--border3:#4a4570;--text:#e0def4;--text2:#cdc9e0;--text3:#a39db8;--text4:#7e7796;--text5:#5d5874;--accent:#eb6f92;--accent2:#f6c177;--red:#eb6f92;--orange:#f6c177;--yellow:#f6c177;--green:#9ccfd8;--darkred:#3a1224;--darkgreen:#143030}

/* Dracula - the popular purple/pink/cyan dark theme. */
html[data-theme="dracula"]{--bg:#282a36;--bg1:#2e3142;--bg2:#363a4a;--bg3:#3f4356;--border:#44475a;--border2:#525569;--border3:#666980;--text:#f8f8f2;--text2:#dfdfd5;--text3:#bdbdb1;--text4:#8a8a82;--text5:#6272a4;--accent:#bd93f9;--accent2:#ff79c6;--red:#ff5555;--orange:#ffb86c;--yellow:#f1fa8c;--green:#50fa7b;--darkred:#3a1818;--darkgreen:#143a18}

/* Nord - cool steel-blue arctic palette. */
html[data-theme="nord"]{--bg:#2e3440;--bg1:#353c4a;--bg2:#3b4252;--bg3:#434c5e;--border:#4c566a;--border2:#5b6478;--border3:#6c7587;--text:#eceff4;--text2:#e5e9f0;--text3:#d8dee9;--text4:#a6acb8;--text5:#7e8694;--accent:#88c0d0;--accent2:#81a1c1;--red:#bf616a;--orange:#d08770;--yellow:#ebcb8b;--green:#a3be8c;--darkred:#3a2424;--darkgreen:#243a24}

/* High contrast - WCAG AAA accessible: pure black + pure white + saturated yellow accent. */
html[data-theme="high-contrast"]{--bg:#000000;--bg1:#0a0a0a;--bg2:#1a1a1a;--bg3:#2a2a2a;--border:#ffffff;--border2:#dddddd;--border3:#bbbbbb;--text:#ffffff;--text2:#ffffff;--text3:#eeeeee;--text4:#cccccc;--text5:#aaaaaa;--accent:#ffff00;--accent2:#ffeb3b;--red:#ff5252;--orange:#ff9800;--yellow:#ffff00;--green:#00ff00;--darkred:#3a0000;--darkgreen:#003300}
html[data-theme="high-contrast"] .btn{outline:1px solid var(--border)}
html[data-theme="high-contrast"] a{text-decoration:underline}

/* Beige theme - light cream / parchment background with dark sepia letters. */
html[data-theme="beige"]{--bg:#f5ecd6;--bg1:#efe5cb;--bg2:#e8dcb8;--bg3:#ddd0a5;--border:#c8b88a;--border2:#b8a878;--border3:#a89866;--text:#2a1f10;--text2:#3a2a18;--text3:#5a4528;--text4:#7a6038;--text5:#9a8048;--accent:#a64a1a;--accent2:#c45a28;--red:#b8334a;--orange:#cc6622;--yellow:#b8941f;--green:#4d6b2a;--darkred:#fde8e8;--darkgreen:#e8f0d8}
html[data-theme="beige"] th{background:var(--bg2);color:var(--text4)}
html[data-theme="beige"] tr:hover td{background:#e8dcb8}
html[data-theme="beige"] ::-webkit-scrollbar-track{background:var(--bg)}
html[data-theme="beige"] ::-webkit-scrollbar-thumb{background:var(--border2)}
.no-anim *,.no-anim *::before,.no-anim *::after{transition:none!important;animation:none!important}
*{box-sizing:border-box;margin:0;padding:0}
body{font-family:var(--font-family);font-size:var(--font-size-base);background:var(--page-bg);color:var(--text);height:100vh;height:100dvh;overflow:hidden;-webkit-text-size-adjust:100%}
::-webkit-scrollbar{width:5px}::-webkit-scrollbar-track{background:var(--bg)}::-webkit-scrollbar-thumb{background:#333;border-radius:3px}
.btn{border:none;padding:5px 12px;border-radius:6px;font-size:.78em;cursor:pointer;font-weight:600;transition:all .15s;white-space:nowrap}
.btn-primary{background:var(--accent);color:#000}.btn-primary:hover{background:var(--accent2)}
.btn-secondary{background:var(--bg3);color:var(--text3);border:1px solid var(--border3)}.btn-secondary:hover{color:var(--text)}
.btn-danger{background:var(--darkred);color:#faa}
.btn-success{background:#1a3a1a;color:#afa}
.btn-sm{padding:3px 8px;font-size:.72em}
select,.sel{background:var(--bg3);color:var(--text3);border:1px solid var(--border3);padding:3px 8px;border-radius:6px;font-size:.78em}
input[type=text],input[type=search],input[type=number],input[type=date]{background:var(--bg3);color:var(--text);border:1px solid var(--border3);padding:4px 8px;border-radius:6px;font-size:.8em;outline:none}
input:focus{border-color:var(--accent)}
textarea{background:var(--bg1);color:var(--text);border:1px solid var(--border2);border-radius:6px;padding:6px;font-size:.8em;font-family:inherit;resize:vertical;min-height:40px;width:100%}
table{width:100%;border-collapse:collapse;font-size:.78em;table-layout:fixed}
th{background:var(--bg1);padding:6px 8px;text-align:left;color:var(--text5);border-bottom:1px solid var(--border);font-weight:500;position:relative;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;user-select:none}
td{padding:6px 8px;border-bottom:1px solid #111;color:var(--text2);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
tr:hover td{background:var(--bg2)}
/* Resizable column handle */
th{cursor:pointer}
th .col-grip{position:absolute;right:0;top:0;bottom:0;width:5px;cursor:col-resize;z-index:2}
th .col-grip:hover,th .col-grip.active{background:var(--accent)}
th .sort-arrow{font-size:.7em;margin-left:3px;color:var(--accent);opacity:0}
th.sorted .sort-arrow{opacity:1}
th:hover .sort-arrow{opacity:.5}
.URGENT{color:var(--red);font-weight:700}.HIGH{color:var(--orange);font-weight:700}
.MEDIUM{color:var(--yellow)}.LOW{color:var(--green)}
.status-ok{color:var(--green)}.status-err{color:var(--red)}
.badge{display:inline-block;padding:1px 6px;border-radius:8px;font-size:.7em;font-weight:600}
.badge-ok{background:#0a2a0a;color:var(--green)}.badge-err{background:var(--darkred);color:var(--red)}
.badge-warn{background:#2a2a0a;color:var(--yellow)}
.card{background:var(--bg2);border:1px solid var(--border2);border-radius:8px;padding:12px;margin-bottom:10px}
.card h4{font-size:.82em;color:var(--accent);margin-bottom:6px}
.empty{text-align:center;padding:20px;color:var(--border3);font-size:.82em}
.spinner{width:16px;height:16px;border:2px solid var(--border2);border-top-color:var(--accent);border-radius:50%;animation:spin .7s linear infinite;display:inline-block}
@keyframes spin{to{transform:rotate(360deg)}}
.toast{position:fixed;bottom:16px;right:16px;background:var(--bg2);border:1px solid var(--accent);color:var(--text);padding:8px 14px;border-radius:8px;font-size:.8em;z-index:200;animation:slideIn .3s}
@keyframes slideIn{from{transform:translateY(20px);opacity:0}to{transform:translateY(0);opacity:1}}
.modal-overlay{display:none;position:fixed;inset:0;background:rgba(0,0,0,.7);z-index:100;align-items:center;justify-content:center;padding:10px}
.modal-overlay.show{display:flex}
.modal{background:var(--bg2);border:1px solid var(--border2);border-radius:12px;padding:18px;width:100%;max-width:500px;max-height:85vh;overflow-y:auto}
.modal h3{color:var(--accent);margin-bottom:12px;font-size:.92em}
.field{margin-bottom:10px}
.field label{display:block;font-size:.78em;color:var(--text4);margin-bottom:3px}
.field input,.field textarea,.field select{width:100%;background:var(--bg3);color:var(--text);border:1px solid var(--border3);border-radius:6px;padding:7px;font-size:.82em}
.toolbar{padding:5px 12px;background:var(--bg1);border-bottom:1px solid var(--border);display:flex;gap:6px;align-items:center;flex-wrap:wrap}

/* Global help floating action button - sits to the RIGHT (edge of screen).
   Bell sits to its left at right:58. */
.help-fab{
  position:fixed;
  top:10px;
  right:14px;
  width:32px;
  height:32px;
  border-radius:50%;
  border:1.5px solid var(--accent);
  background:rgba(248,120,32,0.12);
  color:var(--accent);
  font-size:18px;
  font-weight:700;
  cursor:pointer;
  z-index:90;
  display:flex;
  align-items:center;
  justify-content:center;
  transition:all .15s ease;
  box-shadow:0 2px 12px rgba(248,120,32,0.18);
}
.help-fab:hover{
  background:var(--accent);
  color:#000;
  transform:scale(1.08);
}
@media(max-width:768px){
  .help-fab{top:8px;right:12px;width:30px;height:30px;font-size:15px}
}

/* ============================================================
   PWA / Mobile responsive shell
   ============================================================ */

/* iOS safe-area on the body / fixed elements */
body{padding-top:env(safe-area-inset-top);padding-bottom:env(safe-area-inset-bottom)}

/* Active module title shown in the mobile top bar */
.mobile-topbar{display:none;position:fixed;top:0;left:0;right:0;height:44px;z-index:48;background:var(--bg2);border-bottom:1px solid var(--border2);align-items:center;padding:0 12px 0 52px;font-size:.9em;color:var(--text);font-weight:600}
.mobile-topbar .mt-title{flex:1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

/* Add-to-home-screen install banner */
.pwa-install-banner{position:fixed;left:12px;right:12px;bottom:12px;z-index:90;display:none;background:var(--bg2);border:1px solid var(--accent);border-radius:10px;padding:10px 12px;box-shadow:0 8px 32px rgba(0,0,0,.5);align-items:center;gap:10px;font-size:.82em;color:var(--text2)}
.pwa-install-banner.show{display:flex}
.pwa-install-banner .pwa-msg{flex:1;line-height:1.35}
.pwa-install-banner .pwa-msg b{color:var(--accent)}
.pwa-install-banner button{min-height:36px;padding:6px 12px;border-radius:6px;border:none;font-weight:600;cursor:pointer;font-size:.85em}
.pwa-install-banner .pwa-yes{background:var(--accent);color:#000}
.pwa-install-banner .pwa-no{background:transparent;color:var(--text4);padding:6px 8px}
@media(min-width:769px){.pwa-install-banner{left:auto;right:14px;bottom:14px;max-width:380px}}

/* Mobile (< 768px) sidebar drawer + bigger tap targets */
@media(max-width:768px){
  /* iOS auto-zoom suppression: inputs >= 16px */
  input[type=text],input[type=search],input[type=number],input[type=date],
  input[type=email],input[type=password],input[type=tel],input[type=url],
  textarea,select,.field input,.field textarea,.field select{font-size:16px}
  .search-input{font-size:16px}

  /* All primary buttons get a 44px touch target on mobile */
  .btn,.btn-primary,.btn-secondary,.btn-danger,.btn-success{min-height:44px;padding:10px 14px}
  .btn-sm{min-height:36px}

  /* Hamburger sits at top-left; mobile-topbar shows current module */
  .hamburger{display:flex;align-items:center;justify-content:center;width:40px;height:40px;padding:0;font-size:1.4em}
  .mobile-topbar{display:flex}
  .content{padding-top:44px}
  .notif-bell{top:6px;right:8px}

  /* Sidebar already has off-canvas rules above; reinforce + shadow */
  .sidebar{box-shadow:4px 0 24px rgba(0,0,0,.4);width:260px;max-width:80vw}
  .sidebar.open{transform:translateX(0)}

  /* Bigger sidebar nav items for finger taps */
  .nav-item{padding:10px 14px;font-size:.95em;line-height:1.2}
  .nav-item .icon{font-size:1.1em;width:22px}

  /* Search bar full-width minus hamburger; hide shortcut hint */
  .search-bar-wrap{padding:6px 8px}
  .search-bar-inner{max-width:none}
}

/* On larger viewports, hide the mobile topbar */
@media(min-width:769px){
  .mobile-topbar{display:none !important}
}