/* ===================================================================
   Pepla Scanner — SHARED STYLES (used by every page)
   Extracted as-is from Scanner_System.html during the page-split.
   No visual changes here — this is a structural move only.
   =================================================================== */

:root {
  --bg:#0f0f0f; --surface:#1a1a1a; --surface2:#222222; --border:#2e2e2e;
  --accent:#c8f04a; --accent2:#f0c84a; --text:#f0f0f0; --muted:#888;
  --danger:#ff5a5a; --row-hover:#252525;
}

/* CUSTOM SCROLLBAR — site-wide, themed */
* { scrollbar-width: thin; scrollbar-color: var(--border) transparent; }
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--border); border-radius: 8px; border: 2px solid var(--surface); background-clip: padding-box; }
::-webkit-scrollbar-thumb:hover { background: var(--accent); border-color: var(--surface); background-clip: padding-box; }
::-webkit-scrollbar-corner { background: transparent; }
*{margin:0;padding:0;box-sizing:border-box;}
body{background:var(--bg);color:var(--text);font-family:'Inter',sans-serif;font-size:13px;min-height:100vh;}

/* APP SHELL (sidebar + page content) */
#app{display:flex;flex-direction:row;height:100vh;}

/* SIDE MENU */
.tabs-bar{display:flex;flex-direction:column;width:200px;flex-shrink:0;background:var(--surface);border-right:1px solid var(--border);padding:14px 12px;gap:4px;overflow:hidden;transition:width 0.22s ease;}
.tabs-bar.collapsed{width:64px;padding:14px 8px;}

.side-top{display:flex;align-items:center;gap:10px;height:40px;margin-bottom:16px;}
.brand-full{font-family:'Syne',sans-serif;font-size:22px;font-weight:800;letter-spacing:-1px;color:#D8C6C0;white-space:nowrap;overflow:hidden;}

.side-toggle{display:flex;align-items:center;justify-content:center;width:28px;height:28px;margin-left:auto;border:1px solid var(--border);border-radius:7px;background:var(--surface2);color:var(--muted);cursor:pointer;flex-shrink:0;transition:all 0.2s;}
.side-toggle:hover{color:var(--text);border-color:var(--accent);}
.side-toggle svg{width:15px;height:15px;transition:transform 0.22s ease;}

.tabs-bar.collapsed .side-top{flex-direction:column;height:auto;gap:10px;}
.tabs-bar.collapsed .brand-full{display:none;}

.tabs-bar.collapsed .side-toggle{margin-left:0;}
.tabs-bar.collapsed .side-toggle svg{transform:rotate(180deg);}

.tab-btn{display:flex;align-items:center;gap:12px;width:100%;font-family:'DM Mono',monospace;font-size:13px;padding:10px 12px;border:none;border-radius:9px;background:transparent;color:var(--muted);cursor:pointer;text-align:left;white-space:nowrap;transition:all 0.18s;text-decoration:none;}
.tab-btn svg{width:20px;height:20px;flex-shrink:0;}
.tab-btn:hover{color:var(--text);background:var(--surface2);}
.tab-btn.active{color:var(--accent);background:rgba(200,240,74,0.10);}
.tabs-bar.collapsed .tab-btn{justify-content:center;padding:10px 0;}
.tabs-bar.collapsed .tab-btn .label{display:none;}

/* PAGE CONTENT — replaces the old .tab-content / .tab-content.active pair.
   Each page now IS one "tab", so it's always the active/visible one —
   no show/hide toggling needed anymore (that was SPA-only logic). */
.page-content{flex:1;display:flex;flex-direction:column;overflow:hidden;}

/* Shown/hidden per role via JS (session.role), same as before */
.admin-only{display:none;}
.admin-hide{display:none;}

/* TABLE (generic — base look for any table: used by Scanner, History, Users) */
.table-wrap{overflow-x:auto;flex:1;overflow-y:auto;}
table{width:100%;border-collapse:collapse;table-layout:fixed;}
thead{position:sticky;top:0;z-index:10;}
thead th{background:var(--surface2);padding:10px 12px;text-align:center;font-family:'DM Mono',monospace;font-size:11px;text-transform:uppercase;letter-spacing:0.8px;color:var(--muted);border-bottom:1px solid var(--border);border-right:1px solid var(--border);white-space:nowrap;}
tbody tr{border-bottom:1px solid var(--border);transition:background 0.1s;}
tbody tr:hover{background:var(--row-hover);}
tbody tr.highlighted{background:rgba(200,240,74,0.06);}
tbody tr.dimmed{opacity:0.22;}
tbody td{padding:9px 12px;border-right:1px solid var(--border);font-size:13px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;text-align:center;vertical-align:middle;}

/* DELETE BTN in table (used by Scanner + Users) */
.del-row-btn{background:transparent;border:none;color:var(--muted);cursor:pointer;font-size:14px;padding:2px 6px;border-radius:4px;transition:all 0.15s;}
.del-row-btn:hover{color:var(--danger);background:rgba(255,90,90,0.1);}

/* TOASTS (used from every page) */
.toast-stack{position:fixed;bottom:24px;right:24px;z-index:201;display:flex;flex-direction:column;gap:8px;align-items:flex-end;pointer-events:none;}
.toast-item{display:flex;align-items:center;gap:12px;background:var(--surface2);border:1px solid var(--border);padding:11px 16px;border-radius:8px;font-family:'DM Mono',monospace;font-size:12px;color:var(--text);box-shadow:0 4px 16px rgba(0,0,0,0.4);opacity:0;transform:translateX(20px);transition:opacity 0.25s,transform 0.25s;pointer-events:auto;max-width:340px;}
.toast-item.show{opacity:1;transform:translateX(0);}
.toast-item.success{border-color:var(--accent);color:var(--accent);}
.toast-item.error{border-color:var(--danger);color:var(--danger);}
.toast-item.warn{border-color:var(--accent2);color:var(--accent2);}
.toast-item .toast-action{background:transparent;border:1px solid currentColor;color:inherit;padding:3px 10px;border-radius:5px;font-family:'DM Mono',monospace;font-size:11px;font-weight:600;cursor:pointer;transition:opacity 0.2s;flex-shrink:0;}
.toast-item .toast-action:hover{opacity:0.7;}