:root{
  --bg:#0b0f14;
  --panel:#101823;
  --panel2:#0f1722;
  --text:#e8eef7;
  --muted:#aab6c5;
  --amber:#ffb020;
  --amber2:#ffcc66;
  --danger:#ff4d4d;
  --border:#233043;
  --page-bg: radial-gradient(1200px 800px at 20% 0%, #152236 0%, var(--bg) 45%, #070a0f 100%);
}

/* Recommendation status colors */
/*
  Official ranking colors (do NOT affect overall UI theme):
  - Green strong: #00FF00
  - Green light : #66FF66
  - Red strong  : #FF0000
  - Red light   : #FF6666
  - Blue strong : #005BFF
  - Yellow      : #FFD400
  - Gray        : #9E9E9E
  - Black       : #111111
*/
/* Apply colors to BOTH table rows and mobile cards/divs */
.st_gray, tr.st_gray { background: rgba(158, 158, 158, 0.14); color: #c7d0d9; }
.st_blue, tr.st_blue { background: rgba(0, 91, 255, 0.14); }
.st_yellow, tr.st_yellow { background: rgba(255, 212, 0, 0.14); }
.st_black, tr.st_black { background: rgba(17, 17, 17, 0.28); }

.st_red, tr.st_red { background: rgba(255, 0, 0, 0.18); }
.st_light_red, tr.st_light_red, .st_red_light, tr.st_red_light { background: rgba(255, 102, 102, 0.14); }

.st_green, tr.st_green { background: rgba(0, 255, 0, 0.18); }
.st_light_green, tr.st_light_green, .st_green_light, tr.st_green_light { background: rgba(102, 255, 102, 0.14); }

.st_pending, tr.st_pending { }

.st_success, tr.st_success { background: rgba(0, 255, 0, 0.18); }
.st_success_old, tr.st_success_old { background: rgba(102, 255, 102, 0.14); }
.st_fail, tr.st_fail { background: rgba(255, 0, 0, 0.18); }
.st_fail_old, tr.st_fail_old { background: rgba(255, 102, 102, 0.14); }

/* Superuser permissions */
.permsGrid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 6px 10px;
}

*{box-sizing:border-box}
html, body{
  /* Keep Safari font sizing stable; DO NOT restrict gestures like back-swipe. */
  -webkit-text-size-adjust: 100%;
  /* Let the browser handle horizontal gestures. We'll fix overflow by sizing, not by clipping. */
  max-width: 100%;
  overflow-x: visible;
}
body{
  margin:0;
  font-family: system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  background: var(--page-bg, radial-gradient(1200px 800px at 20% 0%, #152236 0%, var(--bg) 45%, #070a0f 100%));
  color:var(--text);
}

/* Allow horizontal scroll where intended (tables), even on iOS */
.tableWrap{
  /* Keep table horizontal drag but don't block vertical scrolling on iOS */
  touch-action: auto;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
}

/* Make sure the root app shell never overflows the viewport (mobile Safari quirks) */
#viewportShell{
  width: 100%;
  max-width: 100vw;
  min-width: 0;
  margin: 0 auto;
}

/* --- Mobile-friendly BSC / side tables --- */
.bscCard{max-width:100%; overflow:hidden}

table.miniTbl{
  width:100%;
  border-collapse:collapse;
  font-size:14px;
}
table.miniTbl th,
table.miniTbl td{
  padding:10px 10px;
  border-top:1px solid var(--border);
  text-align:left;
  white-space:nowrap;
}
table.miniTbl th{font-weight:800}
table.miniTbl thead th{border-top:none; border-bottom:1px solid var(--border)}

/* Ensure the mini table never breaks layout on small screens */
.miniTblWrap{overflow:auto; -webkit-overflow-scrolling:touch}

a{color:inherit; text-decoration:none}
.topbar{
  display:flex; align-items:center; justify-content:space-between;
  padding:14px 18px;
  border-bottom:1px solid var(--border);
  background:rgba(10,14,20,0.7);
  backdrop-filter: blur(8px);
  position:sticky; top:0; z-index:10;
}
.brand{font-weight:800; letter-spacing:.3px}
.nav{display:flex; gap:10px; align-items:center}

.btn{
  background:linear-gradient(180deg, var(--amber2), var(--amber));
  border:none;
  color:#201400;
  padding:9px 12px;
  border-radius:10px;
  font-weight:700;
  cursor:pointer;
}
.btn:hover{filter:brightness(1.03)}
.btn-ghost{
  background:transparent;
  border:1px solid var(--border);
  color:var(--text);
}

/* When logged in, we turn the login link into a non-clickable username chip */
.user-chip{
  border-color:#3a2f16;
  color:var(--amber);
  cursor:default;
}
.btn-warn{
  background:transparent;
  border:1px solid #3a2f16;
  color:var(--amber);
}
.iconBtn{
  background:transparent;border:none;color:var(--text);
  font-size:18px; cursor:pointer;
}

.layout{
  display:grid;
  grid-template-columns: 1fr 320px;
  gap:14px;
  padding:16px;
}
@media (max-width: 980px){
  .layout{grid-template-columns:1fr}
}

/* Force mobile single-column even if iOS reports desktop-width (e.g., "Request Desktop Site") */
@media (hover: none) and (pointer: coarse){
  .layout{ grid-template-columns: 1fr !important; }

  /* iOS Safari can show a weird vertical banding with large radial backgrounds.
     Keep mobile background simple + uniform to avoid the “center stripe” effect. */
  body{ background: var(--bg) !important; }
}


/* Mobile header: avoid any "overlay bar" feel by stacking items naturally */
@media (max-width: 600px){
  .topbar{flex-direction:column; align-items:stretch; gap:10px;}
  .nav{flex-wrap:wrap; justify-content:center;}
  #adminLink{margin-inline-start:0 !important; align-self:center;}
}

.card{
  background: var(--panel);
border:1px solid var(--border);
  border-radius:14px;
  padding:14px;
  box-shadow: 0 10px 30px rgba(0,0,0,.25);
}
.card-title{font-weight:800; margin-bottom:10px}
.muted{color:var(--muted); font-size:13px}

.tinyRow{display:flex;align-items:center;gap:8px;font-size:12px;color:var(--muted)}
.row{display:flex; gap:12px; align-items:end; flex-wrap:wrap}
.row.between{justify-content:space-between; align-items:center}

/* Quick role filter chips (Admin) */
.chips{display:flex;flex-wrap:wrap;gap:8px;align-items:center}
.chipBtn{
  background:transparent;
  border:1px solid var(--border);
  color:var(--text);
  padding:6px 10px;
  border-radius:999px;
  font-size:12px;
  cursor:pointer;
}
.chipBtn:hover{filter:brightness(1.05)}
.chipBtn.active{
  border-color:#3a2f16;
  color:var(--amber);
}

.field{flex:1; min-width:220px}
label{display:block; font-size:12px; color:var(--muted); margin-bottom:6px}
input, select, textarea{
  width:100%;
  padding:10px 11px;
  border-radius:12px;
  border:1px solid var(--border);
  background:rgba(7,10,15,.55);
  color:var(--text);
  -webkit-text-fill-color: var(--text);
  outline:none;
}

/* Fix iOS/Chrome autofill + select/option colors (prevents dark blue/white-on-white) */
input::placeholder, textarea::placeholder{ color: rgba(232,238,247,.55); }
select, option{
  color: var(--text);
  -webkit-text-fill-color: var(--text);
  background: rgba(7,10,15,.85);
}
input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus,
textarea:-webkit-autofill,
textarea:-webkit-autofill:hover,
textarea:-webkit-autofill:focus,
select:-webkit-autofill,
select:-webkit-autofill:hover,
select:-webkit-autofill:focus{
  -webkit-text-fill-color: var(--text) !important;
  transition: background-color 9999s ease-in-out 0s;
  box-shadow: 0 0 0px 1000px rgba(7,10,15,.85) inset !important;
  caret-color: var(--text);
}
textarea{resize:vertical}

.disclaimer{
  border:1px solid rgba(255,77,77,.35);
  background:linear-gradient(180deg, rgba(60,16,16,.45), rgba(20,10,12,.65));
}
.disclaimer-title{color:#ff7b7b; font-weight:900; margin-bottom:6px}
.disclaimer-text{color:#ffd1d1; font-size:13px; line-height:1.6}

.chartWrap{margin-top:12px; border-radius:14px; overflow:hidden; border:1px solid var(--border)}
#tv_chart{height:420px; width:100%; background:#0b0f14}

.tableWrap{overflow:auto; margin-top:10px}
.table{width:100%; border-collapse:collapse; min-width:720px}
.table th, .table td{
  border-bottom:1px solid var(--border);
  padding:10px;
  text-align:right;
  font-size:13px;
  white-space:nowrap;
}
.table th{color:var(--amber); font-weight:800}

/* Keep ticker text readable regardless of row status color */
.table td.ticker{
  color: var(--text);
  -webkit-text-fill-color: var(--text);
  font-weight: 700;
}

.side .award-title{font-weight:900; color:var(--amber)}
.award-text{color:var(--muted); font-size:13px; line-height:1.6}
.contact-text{font-size:18px; font-weight:900; color:var(--amber)}

.authWrap{display:flex; justify-content:center; padding:30px 16px}
.authCard{width:min(520px, 100%)}
.authForm{margin-top:10px; display:flex; flex-direction:column; gap:10px}

.modal{
  position:fixed; inset:0;
  background:rgba(0,0,0,.55);
  display:none;
  align-items:center; justify-content:center;
  padding:16px;
  z-index:50;
  overflow:hidden;
}
.modal[aria-hidden="false"]{display:flex}
.modal-card{
  width:min(720px, 100%);
  background:linear-gradient(180deg, rgba(16,24,35,.96), rgba(10,14,20,.96));
  border:1px solid var(--border);
  border-radius:16px;
  overflow:hidden;
  display:flex; flex-direction:column; min-height:0;
  max-height: calc(var(--vh, 1vh) * 92);
}
.modal-head{display:flex; justify-content:space-between; align-items:center; padding:12px 14px; border-bottom:1px solid var(--border)}
.modal-title{font-weight:900}
.modal-body{padding:14px; height: calc((var(--vh, 1vh) * 92) - 64px); overflow-y: scroll; -webkit-overflow-scrolling: touch; touch-action: pan-y; min-height:0; overscroll-behavior: contain; }


/* Prevent the page behind the modal from scrolling (fixes iOS "black screen" when scrolling inside modals) */
body.modal-open{overflow:hidden;}

/* Mobile-friendly modal sizing */
@media (max-width: 480px){
  .modal{align-items:flex-start; padding-top:24px;}

  .modal-card{width:min(96vw, 520px); max-height: calc(var(--vh, 1vh) * 92); margin-top: env(safe-area-inset-top, 0px);}
  .modal-body{max-height: calc((var(--vh, 1vh) * 92) - 64px);}
}

.sep{border:0;border-top:1px solid var(--border);margin:12px 0}
.subTitle{font-weight:900;margin-bottom:8px}
.adminBlock .muted{margin-bottom:8px}
.miniForm .field{margin-bottom:10px}
.miniForm input{width:100%}
.table tr.isHidden{opacity:.45}
.table tr.isBasicHidden{opacity:.75; filter: grayscale(20%)}

.miniSel{
  padding:6px 8px;
  border:1px solid rgba(255,255,255,0.18);
  border-radius:10px;
  background: rgba(0,0,0,0.12);
  color: inherit;
}
.btn-sm{padding:6px 10px;font-size:12px;border-radius:10px}

.adminBtns{display:flex;gap:6px;flex-wrap:wrap;justify-content:center}



/* Light theme override + theme toggle */
body[data-theme="light"]{
  --bg:#f4f7fb;
  --panel:#ffffff;
  --panel2:#ffffff;
  --text:#0b1220;
  --muted:#4b5563;
  --amber:#ff8f00;
  --amber2:#ffb74d;
  --danger:#d32f2f;
  --border:#d7dee8;
  --page-bg: linear-gradient(180deg, #ffffff 0%, #f4f7fb 100%);
  background: linear-gradient(180deg, #ffffff 0%, #f4f7fb 100%);
  color:var(--text);
}
body[data-theme="light"] .themeSwitch{
  background:rgba(0,0,0,0.03);
}
body[data-theme="light"] .btn.btn-ghost{
  background:transparent;
}
body[data-theme="light"] .table th{
  background:#f2f5fa;
}
.themeSwitch{
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding:8px 10px;
  border:1px solid var(--border);
  border-radius:12px;
  cursor:pointer;
  user-select:none;
  background:rgba(255,255,255,0.03);
}
.themeSwitch input{ display:none; }
.themeSwitch span{ font-size:14px; color:var(--muted); }



.checkRow{display:flex;align-items:center;gap:10px;margin:10px 0;color:var(--muted);font-size:14px}
.checkRow input{transform:scale(1.1)}

/* =========================
   Mobile / Small screens
   ========================= */
@media (max-width: 768px){

  /* 1) Topbar تتلم بدل ما تكسر */
  .topbar{
    padding: calc(10px + env(safe-area-inset-top)) 12px 10px;
    flex-wrap:wrap;
    gap:10px;
  }
  .nav{
    width:100%;
    justify-content:space-between;
    gap:8px;
    flex-wrap:wrap;
  }
  .brand{font-size:14px}

  /* 2) Layout يبقى أريح */
  .layout{
    padding:10px;
    gap:10px;
  }

  /* 3) الكروت أخف */
  .card{
    padding:12px;
    border-radius:12px;
  }

  /* 4) الفورم عناصرها تاخد عرض كامل */
  .row{gap:10px}
  .field{
    min-width:100%;
    flex:1 0 100%;
  }
  input, select, textarea{
    padding:11px 12px;
    border-radius:12px;
    font-size:16px; /* يمنع iOS Safari من عمل Zoom تلقائي */
    line-height:1.25;
  }
  label{font-size:11px}

  /* 5) Disclaimer أصغر شوية */
  .disclaimer-text{font-size:12px; line-height:1.55}
  .disclaimer-title{font-size:14px}

  /* 6) الشارت: أهم تعديل */
  #tv_chart{height:260px;}       /* كان 420 */
  .chartWrap{border-radius:12px}

  /* 7) الجدول: خليه يتعرض صح على الموبايل */
  .tableWrap{
    -webkit-overflow-scrolling: touch;
    overflow-x:auto;
  }
  .table{
    min-width:560px;             /* كان 720 */
  }
  .table th, .table td{
    padding:8px 8px;
    font-size:12px;
  }

  /* 8) أزرار أصغر */
  .btn{
    padding:8px 10px;
    border-radius:10px;
    font-size:13px;
  }
  .btn-sm{padding:6px 9px;font-size:12px}

  /* 9) لو عندك سايدبار (يمين) خليها تحت تلقائيًا */
  /* أنت بالفعل بتعملها 1fr تحت 980px، هنا بس بنزبط شكلها */
  .side .contact-text{font-size:16px}
}

/* موبايلات صغيرة جدًا */
/* =========================
   Mobile portrait fixes
   (do NOT affect desktop)
   ========================= */

@media (max-width: 720px){
  /* Header becomes a neat stacked block instead of covering content */
  .topbar{
    flex-direction:column;
    align-items:stretch;
    gap:10px;
    padding: calc(10px + env(safe-area-inset-top)) 12px 10px;
    /* IMPORTANT: on iOS Safari some "sticky" headers behave like floating overlays
       and can cover the disclaimer / chart / login area. We want the header to be
       a normal part of the page flow on mobile. */
    position: static;
    top: auto;
  }

  .brand{
    font-size:14px;
    text-align:center;
    line-height:1.35;
  }

  .nav{
    flex-wrap:wrap;
    justify-content:center;
    gap:8px;
  }

  /* Make actions visible + tappable */
  .nav a.btn,
  .nav button.btn,
  .nav .themeSwitch{
    flex: 1 1 calc(50% - 8px);
    min-width: 140px;
    text-align:center;
  }

  /* Ensure order: Signup first */
  #signupLink{ order: 1; }
  #loginLink{ order: 2; }
  #changePassBtn{ order: 3; }
  #logoutBtn{ order: 4; }
  .themeSwitch{ order: 5; }

  /* Layout */
  .layout{
    grid-template-columns:1fr;
    padding:10px;
    gap:10px;
  }

  .card{ padding:12px; }

  .row{ gap:10px; }
  .field{ min-width: 160px; }

  /* Chart */
  #tv_chart{ height:320px; }
  .chartWrap{ border-radius:12px; }

  /* Tables: allow horizontal scroll without breaking the page */
  .tableWrap{ overflow-x:auto; -webkit-overflow-scrolling:touch; }
  .table{ min-width: 680px; }

  /* Modal usability on phones */
  .modal-card{
    width: min(720px, 96vw);
    max-height: 90vh;
    overflow:auto;
  }
}

/* Extra-tight phones */
@media (max-width: 420px){
  .nav a.btn,
  .nav button.btn,
  .nav .themeSwitch{
    flex: 1 1 100%;
    min-width: 0;
  }

  input, select, textarea{
    padding:11px 11px;
    border-radius:14px;
  }

  #tv_chart{ height:300px; }
  .table{ min-width: 640px; }
}

/* Landscape phones: keep header compact */
@media (max-width: 900px) and (orientation: landscape){
  .topbar{ padding:8px 10px; }
  #tv_chart{ height:260px; }
}


/* ===== Mobile table: keep columns aligned + allow horizontal scroll ===== */
@media (max-width: 768px){
  .tableWrap{ overflow-x:auto; -webkit-overflow-scrolling:touch; }
  table.recsTable, table.usersTable{ min-width: 980px; }
  table.recsTable th, table.recsTable td, table.usersTable th, table.usersTable td{ white-space: nowrap; }
}


.legend{display:flex; flex-direction:column; gap:6px; margin-top:10px}
.legendRow{display:flex; gap:8px; align-items:center; font-size:13px; color:var(--muted)}
.dot{width:14px;height:14px;border-radius:4px;display:inline-block;border:1px solid var(--border)}
.dot.st_success{background: rgba(0, 255, 0, 0.55)}
.dot.st_fail{background: rgba(255, 0, 0, 0.55)}
.dot.st_gray{background: rgba(158, 158, 158, 0.38)}
.dot.st_blue{background: rgba(0, 91, 255, 0.40)}
.dot.st_yellow{background: rgba(255, 212, 0, 0.40)}
.dot.st_black{background: rgba(17,17,17,0.55)}
.dot.st_red{background: rgba(255, 0, 0, 0.55)}
.dot.st_green{background: rgba(0, 255, 0, 0.55)}
.dot.st_light_green,.dot.st_green_light{background: rgba(102, 255, 102, 0.40)}
.dot.st_light_red,.dot.st_red_light{background: rgba(255, 102, 102, 0.40)}
.dot.st_success_old{background: rgba(102, 255, 102, 0.40)}
.dot.st_fail_old{background: rgba(255, 102, 102, 0.40)}


/* Viewport Shell (View Cycle) */
.viewportShell{ width:100%; max-width:100%; margin:0 auto; }
.viewportShell.is-framed{ border:1px solid rgba(255,255,255,0.12); border-radius:14px; overflow:visible; box-shadow:0 10px 30px rgba(0,0,0,0.25); }
.viewportShell.is-framed .topbar{ border-top-left-radius:14px; border-top-right-radius:14px; }

/* Build number (bottom-right) */
.build-number{
  position: fixed;
  right: 10px;
  bottom: 8px;
  z-index: 9999;
  font-size: 12px;
  opacity: 0.65;
  padding: 2px 6px;
  border-radius: 8px;
  background: rgba(0,0,0,0.25);
  backdrop-filter: blur(3px);
  -webkit-backdrop-filter: blur(3px);
  pointer-events: none;
}

/* Build footer (bottom-right) */
.build-footer{position:fixed;right:10px;bottom:8px;z-index:9999;display:flex;gap:10px;align-items:center;font-size:12px;opacity:.78;user-select:none;pointer-events:none}
.build-version{padding:4px 8px;border-radius:999px;background:rgba(0,0,0,.35);border:1px solid rgba(255,255,255,.14)}
.build-name{padding:4px 8px;border-radius:999px;background:rgba(0,0,0,.25);border:1px solid rgba(255,255,255,.10)}

/* BSC preview image */
.bscPreview{width:100%;max-width:100%;height:auto;display:block;margin-top:10px;border-radius:14px;
  border:1px solid rgba(255,255,255,.14);background:rgba(255,255,255,.04)}

/* BSC dynamic factors line under the preview */
.bsc-factors{font-size:12px;opacity:.75;letter-spacing:.2px}

/* On phones, cap the preview height so the SVG doesn't feel oversized */
@media (max-width: 600px){
  .bscPreview{max-height:320px;object-fit:contain}
}

/* --------- Critical readability fixes (mobile + modal forms) --------- */
/* The Add Recommendation modal uses plain <input>/<select>.
   On some mobile browsers, select/option text falls back to a dark default and becomes unreadable.
*/
/* NOTE: current builds use #addModal (older builds used #addRecModal) */
#addModal input,
#addModal select,
#addModal textarea,
#addRecModal input,
#addRecModal select,
#addRecModal textarea {
  color: #f4f6fb !important;
  caret-color: #f4f6fb;
  -webkit-text-fill-color: #f4f6fb;
  background: rgba(8,14,24,.55) !important;
  border-color: rgba(244,246,251,.35) !important;
}

#addModal input::placeholder,
#addModal textarea::placeholder,
#addRecModal input::placeholder,
#addRecModal textarea::placeholder {
  color: rgba(244,246,251,.55) !important;
  -webkit-text-fill-color: rgba(244,246,251,.55) !important;
}

#addModal label,
#addRecModal label{color: rgba(244,246,251,.85) !important}

#addModal select option,
#addRecModal select option {
  color: #111 !important;            /* dropdown list text */
  background: #fff !important;       /* dropdown list bg */
}

/* Mini cards/tables text on light backgrounds (BSC preview + tips cards) */
.card.light,
.card.light * {
  color: #111;
}



/* --- Mobile: make embedded chart not trap scrolling --- */
.chartWrap{position:relative;}
.chartToggle{
  position:absolute;
  top:10px;
  inset-inline-start:10px;
  z-index:5;
  font-size:12px;
  padding:6px 10px;
  opacity:.92;
}
body.chart-scroll-mode #tv_chart{pointer-events:none;}
body.chart-scroll-mode #tv_chart iframe{pointer-events:none;}
@media (max-width: 480px){
  #tv_chart{height:320px;}
}


/* iOS fix: scrolling container should be a div, not the form */
.modal-body form#addRecForm{display:block;}


/* Responsive helpers driven by JS (data-vp on <html>) */
html[data-vp="mobile"]{font-size: 15px;}
html[data-vp="tablet"]{font-size: 16px;}
html[data-vp="desktop"]{font-size: 16px;}