/* ============================================================
   DREAM OS V23.2 CLEAN — HYBRID MONOCHROME ENTERPRISE
   ============================================================ */

/* ---------- 1. DESIGN TOKENS ---------- */
:root {
  --space-1: 0.25rem; --space-2: 0.5rem; --space-3: 0.75rem;
  --space-4: 1rem;    --space-5: 1.5rem; --space-6: 2rem;
  --font-family: 'Inter', system-ui, -apple-system, sans-serif;
  --font-mono: 'JetBrains Mono', 'Orbitron', monospace;
  --font-size-xs: 0.6875rem; --font-size-sm: 0.75rem;
  --font-size-base: 0.875rem; --font-size-md: 1rem;
  --font-size-lg: 1.125rem; --font-size-xl: 1.25rem;
  --font-weight-regular: 400; --font-weight-medium: 500;
  --font-weight-semibold: 600; --font-weight-bold: 700;
  --font-weight-extrabold: 800;
  --line-height-tight: 1.25; --line-height-normal: 1.5;
  --line-height-relaxed: 1.75;
  --radius-sm: 4px; --radius-md: 6px; --radius-lg: 8px;
  --radius-xl: 12px; --radius-full: 9999px;
  --shadow-sm: 0 1px 2px rgba(0,0,0,.08);
  --shadow-md: 0 2px 8px rgba(0,0,0,.12);
  --shadow-lg: 0 4px 16px rgba(0,0,0,.18);
  --shadow-xl: 0 8px 32px rgba(0,0,0,.25);
  --transition-fast: 120ms cubic-bezier(.4,0,.2,1);
  --transition-base: 200ms cubic-bezier(.4,0,.2,1);
  --transition-slow: 350ms cubic-bezier(.4,0,.2,1);
  --z-base: 0; --z-dropdown: 100; --z-sticky: 200;
  --z-fixed: 300; --z-modal-backdrop: 900; --z-modal: 1000;
  --z-toast: 9999;
}

/* Accent tokens (module borders) */
:root, [data-theme="dark"] {
  --mod-a1:#38bdf8; --mod-a2:#a78bfa; --mod-a3:#fbbf24;
  --mod-a4:#34d399; --mod-a5:#60a5fa; --mod-a6:#f472b6;
  --mod-a7:#2dd4bf; --mod-a8:#fb923c; --mod-a9:#a3e053;
  --mod-border-1: color-mix(in srgb, var(--mod-a1) 55%, transparent);
  --mod-border-2: color-mix(in srgb, var(--mod-a2) 55%, transparent);
  --mod-border-3: color-mix(in srgb, var(--mod-a3) 55%, transparent);
  --mod-border-4: color-mix(in srgb, var(--mod-a4) 55%, transparent);
  --mod-border-5: color-mix(in srgb, var(--mod-a5) 55%, transparent);
  --mod-border-6: color-mix(in srgb, var(--mod-a6) 55%, transparent);
  --mod-border-7: color-mix(in srgb, var(--mod-a7) 55%, transparent);
  --mod-border-8: color-mix(in srgb, var(--mod-a8) 55%, transparent);
  --mod-border-9: color-mix(in srgb, var(--mod-a9) 55%, transparent);
  --touch-transition: border-color .12s ease, background-color .12s ease, opacity .12s ease;
  --touch-feedback-bg: var(--nav-item-active-bg);
}
[data-theme="light"] {
  --mod-border-1: color-mix(in srgb, #0284c7 60%, transparent);
  --mod-border-2: color-mix(in srgb, #7c3aed 60%, transparent);
  --mod-border-3: color-mix(in srgb, #d97706 60%, transparent);
  --mod-border-4: color-mix(in srgb, #059669 60%, transparent);
  --mod-border-5: color-mix(in srgb, #2563eb 60%, transparent);
  --mod-border-6: color-mix(in srgb, #db2777 60%, transparent);
  --mod-border-7: color-mix(in srgb, #0d9488 60%, transparent);
  --mod-border-8: color-mix(in srgb, #ea580c 60%, transparent);
  --mod-border-9: color-mix(in srgb, #65a30d 60%, transparent);
}

/* ---------- 2. DARK THEME ---------- */
:root, [data-theme="dark"] {
  --color-bg-primary:#000; --color-bg-secondary:#121212;
  --color-bg-tertiary:#1f1f1f;
  --color-text-primary:#fff; --color-text-secondary:#a0a0a0;
  --color-text-tertiary:#6e6e6e; --color-text-disabled:#4a4a4a;
  --color-accent-primary:#fff; --color-accent-secondary:#a0a0a0;
  --color-accent-tertiary:#888888;
  --color-success:#4ade80; --color-warning:#fbbf24;
  --color-error:#f87171; --color-info:#60a5fa;
  --card-bg:#121212; --card-border:#2a2a2a; --card-shadow:var(--shadow-md);
  --input-bg:#0a0a0a; --input-border:#2a2a2a;
  --input-text:var(--color-text-primary); --input-placeholder:var(--color-text-tertiary);
  --btn-primary-bg:#fff; --btn-primary-text:#000;
  --btn-success-bg:var(--color-success); --btn-success-text:#000;
  --btn-danger-bg:var(--color-error); --btn-danger-text:#000;
  --nav-bg:rgba(0,0,0,.95); --nav-border:#2a2a2a;
  --nav-item-active-bg:rgba(255,255,255,.08);
  --glow-primary:none; --glow-secondary:none; --text-glow:none;
}

/* ---------- 3. LIGHT THEME ---------- */
[data-theme="light"], body.light-theme {
  --color-bg-primary:#fff; --color-bg-secondary:#f4f4f4;
  --color-bg-tertiary:#e8e8e8;
  --color-text-primary:#000; --color-text-secondary:#525252;
  --color-text-tertiary:#888; --color-text-disabled:#b0b0b0;
  --color-accent-primary:#000; --color-accent-secondary:#525252;
  --color-accent-tertiary:#888;
  --color-success:#16a34a; --color-warning:#ca8a04;
  --color-error:#dc2626; --color-info:#2563eb;
  --card-bg:#fff; --card-border:#d4d4d4; --card-shadow:var(--shadow-sm);
  --input-bg:#fff; --input-border:#d4d4d4;
  --input-text:var(--color-text-primary); --input-placeholder:var(--color-text-tertiary);
  --btn-primary-bg:#000; --btn-primary-text:#fff;
  --btn-success-bg:var(--color-success); --btn-success-text:#fff;
  --btn-danger-bg:var(--color-error); --btn-danger-text:#fff;
  --nav-bg:#fff; --nav-border:#d4d4d4;
  --nav-item-active-bg:rgba(0,0,0,.05);
  --glow-primary:none; --glow-secondary:none; --text-glow:none;
}

/* ---------- 4. HIGH CONTRAST ---------- */
[data-high-contrast="true"] {
  --color-bg-primary:#000; --color-bg-secondary:#1a1a1a;
  --color-text-primary:#fff; --color-text-secondary:#e5e5e5;
  --color-accent-primary:#fff; --card-border:#fff; --input-border:#fff;
}
[data-theme="light"][data-high-contrast="true"] {
  --color-bg-primary:#fff; --color-bg-secondary:#f5f5f5;
  --color-text-primary:#000; --color-text-secondary:#1a1a1a;
  --color-accent-primary:#000; --card-border:#000; --input-border:#000;
}

/* ---------- 5. RESET & BASE ---------- */
* { box-sizing:border-box; margin:0; padding:0; -webkit-tap-highlight-color:transparent; }
html { scroll-behavior:auto; -webkit-text-size-adjust:100%; text-size-adjust:100%; }
body {
  font-family:var(--font-family); font-size:var(--font-size-base);
  font-weight:var(--font-weight-regular); line-height:var(--line-height-normal);
  background:var(--color-bg-primary) !important; color:var(--color-text-primary) !important;
  min-height:100vh; padding-bottom:90px; -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale; text-rendering:optimizeLegibility;
  overscroll-behavior:none; -webkit-overflow-scrolling:touch;
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration:.01ms !important; transition-duration:.01ms !important; }
}
[data-reduce-motion="true"] * { animation-duration:.01ms !important; transition-duration:.01ms !important; }

/* ---------- 6. TYPOGRAPHY ---------- */
h1,h2,h3,h4,h5,h6 { font-weight:var(--font-weight-bold); line-height:var(--line-height-tight); color:var(--color-text-primary); letter-spacing:-.02em; }
h1{font-size:2rem} h2{font-size:1.5rem} h3{font-size:1.25rem} h4{font-size:1.125rem}
p { margin-bottom:var(--space-3); }
a { color:var(--color-accent-secondary); text-decoration:none; border-bottom:1px solid transparent; transition:color var(--transition-fast); }
a:hover { color:var(--color-accent-primary); border-bottom-color:var(--color-accent-primary); }
code,pre { font-family:var(--font-mono); font-size:var(--font-size-sm); background:var(--color-bg-tertiary); border-radius:var(--radius-sm); padding:.15rem .4rem; }
pre { padding:var(--space-3); overflow-x:auto; }

/* ---------- 7. CARDS & GRIDS ---------- */
.glass, .mini-stat, .mod-card {
  background:var(--card-bg) !important; border:1px solid var(--card-border) !important;
  box-shadow:var(--card-shadow) !important; color:var(--color-text-primary) !important;
  border-radius:var(--radius-xl); transition:var(--touch-transition);
}
.glass:hover { border-color:var(--color-accent-primary); }
#smart-summary-grid { display:grid !important; grid-template-columns:repeat(4,1fr) !important; gap:var(--space-3); padding:var(--space-4); }
.mini-stat { border-radius:var(--radius-lg) !important; padding:var(--space-4) var(--space-2) !important; text-align:center; min-height:95px !important; display:flex !important; flex-direction:column !important; justify-content:center !important; align-items:center !important; cursor:pointer; }
.mini-stat-val { font-size:var(--font-size-xl) !important; font-weight:var(--font-weight-extrabold) !important; font-family:var(--font-mono); }
.mini-stat-label { font-size:var(--font-size-xs) !important; font-weight:var(--font-weight-bold) !important; color:var(--color-text-secondary) !important; text-transform:uppercase !important; letter-spacing:.5px; }
.module-grid { display:grid !important; grid-template-columns:repeat(3,1fr) !important; gap:var(--space-4); padding:0 var(--space-4); margin-bottom:var(--space-5); }
.mod-card {
  aspect-ratio:1/1 !important; display:flex !important; flex-direction:column !important;
  justify-content:center !important; align-items:center !important;
  padding:var(--space-4) var(--space-2) !important; border-radius:var(--radius-xl) !important;
  min-height:112px !important; position:relative !important; cursor:pointer;
  transition:var(--touch-transition);
}
.mod-card:active { transform:none; opacity:.92; }
.mod-icon { font-size:2rem; margin-bottom:var(--space-2); }
.mod-title { font-size:var(--font-size-sm) !important; font-weight:var(--font-weight-bold) !important; text-transform:uppercase !important; text-align:center !important; letter-spacing:.5px; }
.mod-status { position:absolute; top:8px; right:8px; width:8px; height:8px; border-radius:50%; background:var(--color-success); }

/* ---------- 8. BOTTOM NAV ---------- */
#bottom-nav {
  position:fixed !important; bottom:0 !important; left:0 !important; right:0 !important;
  z-index:999 !important; padding:10px 10px calc(10px + env(safe-area-inset-bottom)) !important;
  background:var(--nav-bg) !important; border-top:1px solid var(--nav-border) !important;
  opacity:.98; transform:none !important;
}
#bottom-nav .nav-container { display:flex !important; gap:6px !important; max-width:640px !important; margin:0 auto !important; width:100% !important; }
#bottom-nav .nav-item {
  flex:1 1 0 !important; min-width:0 !important; display:flex !important;
  flex-direction:column !important; align-items:center !important; justify-content:center !important;
  gap:5px !important; padding:10px 4px 9px !important; min-height:68px !important;
  background:transparent !important; border:1px solid transparent !important; border-radius:14px !important;
  transition:var(--touch-transition);
}
#bottom-nav .nav-item:active { transform:none !important; }
#bottom-nav .nav-icon-wrapper { width:42px !important; height:34px !important; display:flex !important; align-items:center !important; justify-content:center !important; border-radius:10px !important; transform:none !important; }
#bottom-nav .nav-icon { font-size:1.55rem !important; line-height:1 !important; filter:none !important; }
#bottom-nav .nav-label { font-size:.68rem !important; font-weight:700 !important; letter-spacing:.3px !important; text-transform:uppercase !important; color:var(--color-text-tertiary) !important; max-width:100% !important; overflow:hidden !important; text-overflow:ellipsis !important; white-space:nowrap !important; }
#bottom-nav .nav-item.active { background:var(--nav-item-active-bg) !important; border:1px solid var(--card-border) !important; }
#bottom-nav .nav-item.active .nav-label { color:var(--color-text-primary) !important; }

/* ---------- 9. FORMS & BUTTONS ---------- */
input[type="text"], input[type="password"], input[type="number"],
input[type="date"], input[type="time"], input[type="email"], select, textarea {
  background:var(--input-bg) !important; color:var(--input-text) !important;
  border:1px solid var(--input-border) !important; border-radius:var(--radius-md) !important;
  padding:var(--space-3) !important; font-family:var(--font-family);
  font-size:var(--font-size-base) !important; width:100%;
  transition:var(--touch-transition);
}
input:focus, select:focus, textarea:focus { outline:none; border-color:var(--color-accent-primary) !important; box-shadow:0 0 0 2px rgba(128,128,128,.15); }
input::placeholder, textarea::placeholder { color:var(--input-placeholder) !important; opacity:.7 !important; }
input[type="checkbox"], input[type="radio"] { width:1.1rem; height:1.1rem; accent-color:var(--color-accent-primary); cursor:pointer; }
select { appearance:none; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%23888' d='M6 9L1 4h10z'/%3E%3C/svg%3E"); background-repeat:no-repeat; background-position:right .75rem center; padding-right:2.5rem !important; cursor:pointer; }

.btn {
  display:inline-flex; align-items:center; justify-content:center; gap:var(--space-2);
  padding:var(--space-3) var(--space-4); border:none; border-radius:var(--radius-sm);
  font-family:var(--font-family); font-size:var(--font-size-sm); font-weight:var(--font-weight-bold);
  text-transform:uppercase; letter-spacing:.5px; cursor:pointer;
  transition:var(--touch-transition); text-decoration:none; white-space:nowrap; min-height:44px;
}
.btn:active { transform:none; } .btn:disabled { opacity:.4; cursor:not-allowed; }
.btn-primary { background:var(--btn-primary-bg); color:var(--btn-primary-text) !important; }
.btn-success { background:var(--btn-success-bg); color:var(--btn-success-text) !important; }
.btn-danger { background:var(--btn-danger-bg); color:var(--btn-danger-text) !important; }
.btn-outline { background:transparent; border:1px solid var(--card-border); color:var(--color-text-primary); }
.btn-sm { padding:var(--space-2) var(--space-3); font-size:var(--font-size-xs); min-height:40px; }

/* ---------- 10. TABLES & BADGES ---------- */
table { width:100% !important; border-collapse:collapse !important; background:transparent !important; font-size:var(--font-size-sm); }
th { background:var(--color-bg-tertiary) !important; color:var(--color-text-primary) !important; font-weight:var(--font-weight-extrabold) !important; padding:var(--space-3) !important; text-transform:uppercase; font-size:var(--font-size-xs); letter-spacing:.5px; text-align:left; border-bottom:1px solid var(--card-border) !important; }
td { background:var(--card-bg) !important; color:var(--color-text-primary) !important; border-bottom:1px solid var(--card-border) !important; padding:var(--space-3) !important; }
tr:hover td { background:var(--nav-item-active-bg) !important; }
.badge { display:inline-flex; align-items:center; gap:var(--space-1); padding:.2rem .5rem; border-radius:var(--radius-sm); font-size:var(--font-size-xs); font-weight:var(--font-weight-bold); text-transform:uppercase; letter-spacing:.3px; white-space:nowrap; }
.badge-success, .badge-approved { background:rgba(74,222,128,.15); color:var(--color-success); border:1px solid rgba(74,222,128,.3); }
.badge-warning, .badge-pending { background:rgba(251,191,36,.15); color:var(--color-warning); border:1px solid rgba(251,191,36,.3); }
.badge-error, .badge-rejected { background:rgba(248,113,113,.15); color:var(--color-error); border:1px solid rgba(248,113,113,.3); }
.badge-info { background:rgba(96,165,250,.15); color:var(--color-info); border:1px solid rgba(96,165,250,.3); }

/* ---------- 11. UTILITIES & FOCUS ---------- */
.alert, .info-box { background:var(--color-bg-tertiary) !important; border:1px solid var(--card-border) !important; border-radius:var(--radius-md); padding:var(--space-4); color:var(--color-text-primary) !important; margin-bottom:var(--space-4); }
.info-box { border-left:3px solid var(--color-info); }
.alert-success { border-left:3px solid var(--color-success); }
.alert-warning { border-left:3px solid var(--color-warning); }
.alert-error { border-left:3px solid var(--color-error); }
.text-center{text-align:center} .text-right{text-align:right} .text-left{text-align:left}
.font-mono{font-family:var(--font-mono)} .font-bold{font-weight:var(--font-weight-bold)} .font-extrabold{font-weight:var(--font-weight-extrabold)}
.text-success{color:var(--color-success)!important} .text-warning{color:var(--color-warning)!important} .text-error{color:var(--color-error)!important} .text-info{color:var(--color-info)!important} .text-muted{color:var(--color-text-tertiary)!important}
.bg-gray-100, .bg-gray-200, .bg-gray-800, .bg-slate-100, .bg-slate-800, .bg-white { background:var(--card-bg) !important; }
:focus-visible { outline:2px solid var(--color-accent-primary); outline-offset:2px; }
button:focus-visible, .btn:focus-visible { box-shadow:0 0 0 2px var(--color-accent-primary); }

/* ---------- 12. PAGE SPECIFIC (index) ---------- */
canvas#star-field { position:fixed; inset:0; width:100vw; height:100vh; z-index:0; pointer-events:none; }
#login-screen { position:fixed; inset:0; display:flex; flex-direction:column; align-items:center; justify-content:center; background:var(--color-bg-primary); z-index:10000; transition:opacity .5s; overflow-y:auto; min-height:100vh; min-height:100dvh; }
.login-container { text-align:center; max-width:400px; width:100%; padding:2rem; }
.login-logo { width:90px; height:90px; border-radius:24px; margin-bottom:1.5rem; }
.arabic { font-family:'Scheherazade New', serif; font-size:2rem; color:var(--neon); margin-bottom:.4rem; }
.shalawat { font-family:'Scheherazade New', serif; font-size:.95rem; color:var(--accent); margin-bottom:1.5rem; }
.input-wrapper { position:relative; margin-bottom:1.2rem; }
.pin-input { width:100%; padding:1.1rem 4rem 1.1rem 1.2rem; background:var(--input-bg); border:1.5px solid var(--border); border-radius:14px; color:var(--neon); font-family:'Orbitron', monospace; font-size:1.1rem; text-align:center; outline:none; }
.toggle-pin { position:absolute; right:1rem; top:0; bottom:0; display:flex; align-items:center; cursor:pointer; font-size:1.4rem; color:var(--neon); user-select:none; }
.access-btn { width:100%; padding:1.1rem; background:var(--btn-primary-bg); color:var(--btn-primary-text); border:none; border-radius:14px; font-size:1.05rem; font-weight:700; cursor:pointer; transition:var(--touch-transition); }
.error-msg { color:var(--warning); font-size:.85rem; margin-top:.8rem; display:none; }
#main-app { display:none; position:relative; z-index:10; padding-bottom:6rem; min-height:100vh; }
.header-main { padding:1.5rem; text-align:center; margin:1rem 1rem .5rem; }
.system-info-box { text-align:center; font-size:.72rem; line-height:1.5; color:var(--text); margin:1rem; padding:1.2rem; }
.pwa-install-banner { display:none; position:fixed; bottom:75px; left:10px; right:10px; background:var(--nav-item-active-bg); border:1px solid var(--neon); border-radius:12px; padding:10px; z-index:9999; text-align:center; }
.cast-btn { position:fixed; bottom:85px; right:15px; z-index:9998; background:var(--nav-item-active-bg); border:1px solid var(--neon); border-radius:50%; width:42px; height:42px; display:flex; align-items:center; justify-content:center; cursor:pointer; }
.cast-modal, #security-overlay { display:none; position:fixed; inset:0; z-index:99999; align-items:center; justify-content:center; }
.cast-modal.show, #security-overlay.show { display:flex; }
.notif-panel { position:fixed; top:55px; right:10px; width:300px; max-height:380px; overflow-y:auto; background:var(--panel); border:1px solid var(--neon); border-radius:14px; z-index:10001; display:none; padding:.5rem; }
#dash-slider { touch-action:pan-y; position:relative; overflow:hidden; margin:0 1rem .8rem; min-height:85px; border-radius:16px; }
.slide-track { display:flex; transition:transform .6s cubic-bezier(.25,1,.5,1); will-change:auto; }
.slide-item { min-width:100%; padding:.9rem 1rem; text-align:center; font-size:.8rem; line-height:1.4; color:var(--text); }
.slide-indicators { display:flex; justify-content:center; gap:5px; margin-top:.3rem; }
.slide-dot { width:6px; height:6px; border-radius:50%; background:rgba(128,128,128,.4); transition:.3s; cursor:pointer; }
.slide-dot.active { background:var(--neon); }
#analytics-section { margin:.6rem 1rem .9rem; display:flex; flex-direction:column; gap:.8rem; }
.ana-header { background:var(--panel); border:1px solid var(--card-border); border-radius:20px; padding:1.1rem 1rem; display:flex; justify-content:space-between; align-items:center; }
.ana-icon-btn { width:44px; height:44px; border-radius:14px; border:none; background:var(--nav-item-active-bg); color:var(--text); font-size:1.2rem; cursor:pointer; }
.ana-tab { padding:.5rem 1rem; border-radius:999px; border:none; background:transparent; color:var(--muted); font-weight:700; font-size:.8rem; cursor:pointer; }
.ana-tab.active { background:var(--card-bg); color:var(--text); box-shadow:var(--shadow-sm); }
.toast-container { position:fixed; bottom:4.5rem; left:0; right:0; z-index:99999; display:flex; flex-direction:column; align-items:center; gap:.4rem; pointer-events:none; }
.toast { background:var(--panel); border:1px solid var(--card-border); color:var(--text); padding:.7rem 1rem; border-radius:10px; font-size:.8rem; box-shadow:0 10px 30px rgba(0,0,0,.5); pointer-events:auto; animation:slideUp .3s ease; }
.toast.error { border-left:4px solid var(--danger); } .toast.success { border-left:4px solid var(--success); } .toast.warning { border-left:4px solid var(--warning); }
@keyframes slideUp { from {opacity:0} to {opacity:1} }
#cmd-palette { position:fixed; inset:0; background:rgba(0,0,0,.7); z-index:99998; display:none; align-items:flex-start; justify-content:center; padding-top:15vh; }
#cmd-palette.show { display:flex; }
.cmd-box { width:90%; max-width:520px; background:var(--panel); border:1px solid var(--glass-border); border-radius:16px; padding:1rem; }
.cmd-input { width:100%; padding:.8rem; background:var(--input-bg); border:1px solid var(--input-border); border-radius:10px; color:var(--text); font-size:1rem; outline:none; }
.cmd-item { padding:.7rem .8rem; border-radius:8px; cursor:pointer; display:flex; justify-content:space-between; align-items:center; color:var(--text); font-size:.85rem; }
.cmd-item:hover, .cmd-item.active { background:var(--nav-item-active-bg); }

/* ---------- 13. MODULE SHELL & FIXED ELEMENTS ---------- */
.back-btn {
  position:fixed !important; bottom:calc(1.5rem + env(safe-area-inset-bottom)) !important;
  left:1rem !important; z-index:9000 !important; transform:none !important;
  scale:none !important; translate:none !important; pointer-events:auto !important;
  contain:layout !important; isolation:isolate !important;
}
#bottom-nav, .bottom-nav, [class*="bottom-nav"] { position:fixed !important; bottom:0 !important; left:0 !important; right:0 !important; top:auto !important; z-index:999 !important; transform:none !important; }
.toast-container { position:fixed !important; bottom:4.5rem !important; left:0 !important; right:0 !important; display:flex !important; flex-direction:column !important; align-items:center !important; z-index:99999 !important; transform:none !important; pointer-events:none !important; }
.qr-modal.show, .photo-preview.show, .brq-ov, .history-modal.show, [id*="modal"].show, [class*="modal"].show { position:fixed !important; inset:0 !important; display:flex !important; align-items:center !important; justify-content:center !important; z-index:99998 !important; transform:none !important; }

/* Modul full-screen */
body.mod-open { overflow:hidden !important; overscroll-behavior:none !important; }
body.mod-open #bottom-nav { display:none !important; }
body.mod-open #mod-container {
  position:fixed !important; inset:0 !important; width:100% !important;
  height:100% !important; height:100dvh !important; max-height:100dvh !important;
  overflow-x:hidden !important; overflow-y:auto !important;
  -webkit-overflow-scrolling:touch !important; overscroll-behavior:contain !important;
  z-index:9000 !important; transform:none !important; scale:none !important; translate:none !important;
  contain:none !important; background:var(--color-bg-primary,#0a0e27) !important;
  padding-bottom:calc(5rem + env(safe-area-inset-bottom)) !important;
}
body.mod-open .back-btn, #mod-container .back-btn {
  position:fixed !important; bottom:calc(1.5rem + env(safe-area-inset-bottom)) !important;
  left:1rem !important; z-index:9100 !important; transform:none !important;
  touch-action:manipulation !important; pointer-events:auto !important;
}
#mod-container { position:relative; overflow-y:auto; -webkit-overflow-scrolling:touch; overscroll-behavior:contain; z-index:1; }
#mod-container * { -webkit-tap-highlight-color:transparent; }
#mod-container button, #mod-container a, #mod-container .btn, #mod-container input, #mod-container select, #mod-container textarea {
  pointer-events:auto !important; touch-action:manipulation !important;
}
#mod-container .btn:active, #mod-container button:active, #mod-container a:active,
#mod-container .mod-card:active, #mod-container .glass:active {
  transform:none !important; scale:none !important; translate:none !important;
  box-shadow:none !important; transition:none !important; opacity:.92;
}

/* ---------- 14. TOUCH STABILITY (Global) ---------- */
html, body { overscroll-behavior:none !important; -webkit-overflow-scrolling:touch; }
body { -webkit-user-select:none; -moz-user-select:none; -ms-user-select:none; user-select:none; }
input, textarea, [contenteditable] { -webkit-user-select:text; -moz-user-select:text; -ms-user-select:text; user-select:text; }
button, a, [role="button"], .btn, .mod-card, .nav-item, .tab, .tab-btn,
.check-label, label, .mini-stat, [data-mod] {
  -webkit-tap-highlight-color:transparent !important;
  touch-action:manipulation !important;
}
input, textarea, select, .pin-input, .cmd-input, .input-field {
  font-size:16px !important;
  touch-action:manipulation !important;
}
button:active, a:active, .btn:active, .mod-card:active,
.nav-item:active, .check-label:active, label:active, [role="button"]:active,
input:focus, textarea:focus, select:focus {
  transform:none !important; scale:none !important; translate:none !important;
  box-shadow:none !important; outline:none !important;
}
@media (hover:none), (pointer:coarse) {
  .module-grid .mod-card:hover, .module-grid .mod-card:active,
  .btn:hover, .btn:active, .nav-item:hover, .nav-item:active,
  .check-label:hover, .check-label:active, .glass:hover, .mini-stat:hover {
    transform:none !important; box-shadow:none !important;
    transition:var(--touch-transition) !important;
  }
  .module-grid .mod-card:active { opacity:.9 !important; }
}
@media (hover:hover) and (pointer:fine) {
  .module-grid .mod-card:hover { border-color:var(--color-accent-primary) !important; box-shadow:var(--shadow-md) !important; transform:none !important; }
  .btn:hover { opacity:.92; transform:none !important; }
}
.mod-card, [data-mod], .metric { -webkit-tap-highlight-color:transparent; touch-action:manipulation; }

/* ---------- 15. LIGHT THEME CONTRAST ---------- */
[data-theme="light"] .slide-item, body.light-theme .slide-item { color:#0f172a !important; background:#f8fafc !important; border:1px solid #e2e8f0 !important; }
[data-theme="light"] .slide-item strong, body.light-theme .slide-item strong { color:#0369a1 !important; }
[data-theme="light"] #dash-slider, body.light-theme #dash-slider { background:#eef2f7 !important; border:1px solid #d4d4d4 !important; }

/* ---------- 16. COLOR REVIVAL (module borders) ---------- */
.module-grid .mod-card:nth-child(9n+1) { border-color:var(--mod-border-1); }
.module-grid .mod-card:nth-child(9n+2) { border-color:var(--mod-border-2); }
.module-grid .mod-card:nth-child(9n+3) { border-color:var(--mod-border-3); }
.module-grid .mod-card:nth-child(9n+4) { border-color:var(--mod-border-4); }
.module-grid .mod-card:nth-child(9n+5) { border-color:var(--mod-border-5); }
.module-grid .mod-card:nth-child(9n+6) { border-color:var(--mod-border-6); }
.module-grid .mod-card:nth-child(9n+7) { border-color:var(--mod-border-7); }
.module-grid .mod-card:nth-child(9n+8) { border-color:var(--mod-border-8); }
.module-grid .mod-card:nth-child(9n+9) { border-color:var(--mod-border-9); }

/* ---------- 17. RESPONSIVE / RTL / PRINT ---------- */
@media (max-width:640px) {
  #smart-summary-grid { grid-template-columns:repeat(2,1fr) !important; }
  .module-grid { grid-template-columns:repeat(3,1fr) !important; }
}
[dir="rtl"] { text-align:right; }
[dir="rtl"] .nav-container { flex-direction:row-reverse; }
[dir="rtl"] table th, [dir="rtl"] table td { text-align:right; }
@media print {
  body { background:#fff !important; color:#000 !important; }
  .glass, .mod-card, .mini-stat { background:#fff !important; border:1px solid #000 !important; box-shadow:none !important; color:#000 !important; }
  #bottom-nav, .back-btn, .btn { display:none !important; }
  th { background:#e5e5e5 !important; color:#000 !important; }
}
/* Hide skip link di perangkat sentuh */
@media (hover: none), (pointer: coarse) {
  
}

/* Skip link: tidak terlihat di layar normal, muncul saat fokus keyboard */
.skip-link { position: absolute; left: -9999px; top: -9999px; width: 1px; height: 1px; overflow: hidden; }
.skip-link:focus { position: fixed; left: 0; top: 0; width: auto; height: auto; z-index: 100000; background: var(--neon); color: #000; padding: 8px 16px; font-weight: 700; }