/*
  TalentScopeX "Mint Glass" theme layer (2026-10-14).
  Loaded last on every page (linked from _sidebar.html and the candidate/exam pages).
  Light white-and-mint glass background, frosted panels, teal-to-blue buttons.
  Selectors start with "html:root body" so they win over older page CSS.
*/
:root{
  --tsx-primary:#0f766e; --tsx-primary-dark:#115e59; --tsx-primary-light:#0d9488;
  --tsx-primary-soft:rgba(13,148,136,.10); --tsx-primary-border:rgba(13,148,136,.22); --tsx-primary-shadow:rgba(13,148,136,.18);
  --tsx-gradient:linear-gradient(135deg,#0d9488 0%,#0284c7 100%);
  --tsx-info:#0284c7;
  --g-btn:linear-gradient(135deg,#0d9488,#0284c7);
  --g-panel:rgba(255,255,255,.62); --g-panel-strong:rgba(255,255,255,.8); --g-border:rgba(255,255,255,.85);
  --g-shadow:0 10px 30px rgba(15,118,110,.08),0 2px 6px rgba(15,23,42,.04);
  --g-ink:#0f172a; --g-ink2:#475569; --g-ink3:#94a3b8; --g-track:rgba(15,23,42,.07);
  --g-bg:
    radial-gradient(760px circle at 18% -6%, rgba(153,246,228,.65), transparent 60%),
    radial-gradient(720px circle at 100% 30%, rgba(191,219,254,.70), transparent 60%),
    radial-gradient(640px circle at -4% 100%, rgba(187,247,208,.55), transparent 60%),
    linear-gradient(125deg,#dff7f1 0%,#f4fbf9 45%,#e2efff 100%);
}

/* ---------- page background ---------- */
html:root body{ background:var(--g-bg) !important; background-attachment:fixed !important; color:var(--g-ink); }
html:root body::after{ content:none !important; animation:none !important; }

/* ---------- sidebar: floating glass ---------- */
@media (min-width:901px){
  /* The floating look comes from a transparent border, so the sidebar keeps its normal width
     and never overlaps the page content next to it. */
  html:root body #sidebar.sidebar{
    background:var(--g-panel) !important; background-clip:padding-box !important;
    backdrop-filter:blur(18px) saturate(140%); -webkit-backdrop-filter:blur(18px) saturate(140%);
    border:12px solid transparent !important; border-right-width:0 !important; border-radius:34px !important;
    box-shadow:inset 0 0 0 1px rgba(255,255,255,.9) !important; margin:0 !important; box-sizing:border-box !important;
  }
  html:root body #sidebar.sidebar > .sb-top{ border-bottom-color:rgba(15,23,42,.06) !important; }
  /* top bar floats as a glass bar with a gap from the sidebar */
  html:root body .topbar, html:root body header.topbar{ margin:12px 14px 0 14px !important; }
}
@media (max-width:900px){
  html:root body #sidebar.sidebar{ background:rgba(255,255,255,.94) !important; backdrop-filter:blur(18px); }
}
html:root body #sidebar .sb-logo{ background:var(--g-btn) !important; color:#fff !important; border-radius:12px !important; box-shadow:0 6px 14px rgba(13,148,136,.3) !important; }
html:root body #sidebar .sb-title{ color:var(--g-ink) !important; font-weight:800 !important; }
html:root body #sidebar .sb-item{ color:var(--g-ink2) !important; border-radius:14px !important; border:1px solid transparent !important; }
html:root body #sidebar .sb-item i{ color:var(--g-ink3) !important; }
html:root body #sidebar .sb-item:hover{ background:rgba(255,255,255,.7) !important; color:var(--g-ink) !important; }
html:root body #sidebar .sb-item.active{ background:#fff !important; color:var(--g-ink) !important; font-weight:700 !important; border-color:rgba(255,255,255,.9) !important; box-shadow:0 4px 14px rgba(15,118,110,.10) !important; }
html:root body #sidebar .sb-item.active i{ color:#0d9488 !important; }
/* Credits now live on the dashboard wallet card, so the sidebar box is hidden. */
html:root body #sidebar .sb-foot, html:root body #sidebar .sb-credits-box{ display:none !important; }

/* ---------- top bar ---------- */
html:root body .topbar, html:root body header.topbar{
  background:var(--g-panel) !important; backdrop-filter:blur(18px) saturate(140%); -webkit-backdrop-filter:blur(18px) saturate(140%);
  border:1px solid var(--g-border) !important; border-radius:22px !important; box-shadow:var(--g-shadow) !important;
}
html:root body .page-title{ color:var(--g-ink) !important; letter-spacing:-.4px; }

/* ---------- glass panels / cards ---------- */
html:root body .dash-card, html:root body .card, html:root body .panel-card, html:root body .content-card,
html:root body .member-soft-panel, html:root body .sa-soft-panel, html:root body .table-card, html:root body .list-card,
html:root body .settings-card, html:root body .modal-content{
  background:var(--g-panel) !important; backdrop-filter:blur(18px) saturate(140%); -webkit-backdrop-filter:blur(18px) saturate(140%);
  border:1px solid var(--g-border) !important; border-radius:22px !important; box-shadow:var(--g-shadow) !important;
}
html:root body .modal-content{ background:var(--g-panel-strong) !important; }

/* ---------- buttons ---------- */
html:root body .btn.primary, html:root body button.btn.primary, html:root body .btn-primary,
html:root body .sb-buy-credits, html:root body .tsx-btn-primary, html:root body .btn-tsx{
  background:var(--g-btn) !important; border-color:transparent !important; color:#fff !important;
  box-shadow:0 8px 18px rgba(13,148,136,.28) !important; border-radius:12px !important;
}
html:root body .btn.primary:hover:not(:disabled), html:root body .btn-primary:hover:not(:disabled){ filter:brightness(1.06); background:var(--g-btn) !important; }
html:root body .btn.primary i, html:root body .btn-primary i{ color:#fff !important; }
html:root body .btn-outline-primary{ color:#0f766e !important; border-color:rgba(13,148,136,.45) !important; border-radius:12px !important; }
html:root body .btn-outline-primary:hover{ background:var(--g-btn) !important; color:#fff !important; border-color:transparent !important; }
html:root body a.link, html:root body .text-primary{ color:#0f766e !important; }

/* ---------- form fields ---------- */
html:root body input.form-control:focus, html:root body select.form-control:focus, html:root body textarea.form-control:focus,
html:root body .search-input:focus{ border-color:#0d9488 !important; box-shadow:0 0 0 3px rgba(13,148,136,.15) !important; }

/* ---------- tables ---------- */
html:root body table thead th{ color:var(--g-ink3); text-transform:uppercase; font-size:11.5px; letter-spacing:.7px; }
html:root body .table td, html:root body .table th{ border-color:var(--g-track) !important; }

/* ---------- pills ---------- */
html:root body .badge-primary{ background:var(--g-btn) !important; }

/* ---------- candidate exam pages (test, survey, coding, typing) ---------- */
html:root body .start-btn, html:root body .btn-submit, html:root body .modal-btn.primary, html:root body #dialogOk{
  background:var(--g-btn) !important; border:0 !important; color:#fff !important; box-shadow:0 8px 18px rgba(13,148,136,.28) !important;
}
html:root body .start-btn:hover:not(:disabled), html:root body .btn-submit:hover:not(:disabled){ filter:brightness(1.07); }
html:root body .exam-topbar{
  background:var(--g-panel) !important; backdrop-filter:blur(18px) saturate(140%); -webkit-backdrop-filter:blur(18px) saturate(140%);
  border:1px solid var(--g-border) !important; border-radius:20px !important; margin:12px 14px 0 !important; box-shadow:var(--g-shadow) !important;
}
html:root body .exam-brand-logo-sm{ background:var(--g-btn) !important; color:#fff !important; border-radius:10px !important; }
html:root body .q-dot{ border-radius:9px !important; }
html:root body .q-dot.active{ background:var(--g-btn) !important; color:#fff !important; border-color:transparent !important; }
html:root body .exam-body .question, html:root body #questions .question{
  background:var(--g-panel) !important; backdrop-filter:blur(18px) saturate(140%); -webkit-backdrop-filter:blur(18px) saturate(140%);
  border:1px solid var(--g-border) !important; border-radius:22px !important; box-shadow:var(--g-shadow) !important; padding:22px 24px !important;
}
html:root body #questions .question label{
  background:rgba(255,255,255,.75); border:1px solid rgba(15,23,42,.06); border-radius:14px; padding:12px 14px; cursor:pointer; transition:border-color .15s, background .15s;
}
html:root body #questions .question label:hover{ border-color:rgba(13,148,136,.35); background:#fff; }
html:root body #questions .question label:has(input:checked){ border-color:#0d9488; background:rgba(204,251,241,.6); box-shadow:0 0 0 3px rgba(13,148,136,.12); }
html:root body #questions input[type=radio], html:root body #questions input[type=checkbox]{ accent-color:#0d9488; }
html:root body .exam-splash .card, html:root body .exam-splash > div > .splash-card{ border-radius:26px !important; }
html:root body #questions .question label input{margin-right:8px}

/* ---------- table column menu (Sort / Filter / Group) on list pages ---------- */
html:root body .th-accordion, html:root body .th-subcard{
  background:rgba(255,255,255,.92) !important; backdrop-filter:blur(18px) saturate(140%); -webkit-backdrop-filter:blur(18px) saturate(140%);
  border:1px solid rgba(15,23,42,.06) !important; border-radius:16px !important; padding:6px !important;
  box-shadow:0 18px 40px rgba(15,23,42,.14), 0 2px 6px rgba(15,23,42,.05) !important;
}
html:root body .th-accordion{ min-width:200px !important; width:auto !important; }
html:root body .th-subcard{ width:240px !important; }
html:root body .th-acc-item, html:root body .th-subitem, html:root body .th-acc-sub button{
  background:transparent !important; border:0 !important; box-shadow:none !important; border-radius:10px !important;
  padding:9px 10px !important; margin:0 !important; min-height:0 !important; color:#0f172a !important; font-weight:550 !important; font-size:13.5px !important;
  display:flex !important; align-items:center !important; justify-content:space-between !important; width:100% !important;
}
html:root body .th-acc-item + .th-acc-item, html:root body .th-subitem + .th-subitem{ margin-top:2px !important; }
html:root body .th-acc-item:hover, html:root body .th-subitem:hover, html:root body .th-acc-sub button:hover,
html:root body .th-acc-item.active, html:root body .th-acc-item.open{ background:rgba(13,148,136,.10) !important; color:#0b7d70 !important; }
html:root body .th-acc-item i, html:root body .th-subitem i{ color:#64748b !important; font-size:14px !important; }
html:root body .th-acc-item:hover i, html:root body .th-subitem:hover i{ color:#0d9488 !important; }
html:root body .th-acc-item > i.bi-chevron-right{ font-size:11px !important; opacity:.6; }
/* sort options are final actions, so they don't need an arrow */
html:root body .th-subitem > i.bi-chevron-right{ display:none !important; }
html:root body .th-acc-left, html:root body .th-sub-left{ display:flex !important; align-items:center !important; gap:10px !important; }
html:root body .th-subhead{ font-size:11px !important; letter-spacing:.8px !important; text-transform:uppercase !important; color:#94a3b8 !important; font-weight:700 !important; padding:6px 10px 6px !important; margin:0 !important; background:transparent !important; border:0 !important; }
html:root body .th-check{ border-radius:10px !important; padding:7px 10px !important; }
html:root body .th-check:hover{ background:rgba(13,148,136,.08) !important; }
html:root body .th-check input{ accent-color:#0d9488; }
html:root body .th-subcard input[type=text], html:root body .th-subcard input[type=search]{ border-radius:10px !important; border:1px solid rgba(15,23,42,.1) !important; }

/* ---------- list tables fit smaller screens (laptops / 19") ---------- */
@media (max-width:1600px){
  html:root body .tbl thead th{ padding:10px 6px !important; font-size:11px !important; letter-spacing:.4px !important; }
  html:root body .tbl tbody td{ padding:5px 6px !important; font-size:13px !important; }
  html:root body .tbl .ticon{ width:28px !important; height:28px !important; }
}
@media (max-width:1366px){
  html:root body .tbl thead th{ padding:9px 5px !important; font-size:10.5px !important; }
  html:root body .tbl tbody td{ font-size:12.5px !important; }
  html:root body .tbl .ticon{ width:26px !important; height:26px !important; font-size:12px !important; }
}
html:root body .table-wrap::-webkit-scrollbar{ height:8px; width:8px; }
html:root body .table-wrap::-webkit-scrollbar-thumb{ background:rgba(13,148,136,.35); border-radius:8px; }
html:root body .table-wrap::-webkit-scrollbar-track{ background:transparent; }

/* ---------- small screens: card headers and toolbars wrap instead of overflowing ---------- */
@media (max-width:700px){
  html:root body .card-hd, html:root body .card-actions, html:root body .panel-head, html:root body .toolbar,
  html:root body .sa-panel-head, html:root body .sa-panel-actions{ flex-wrap:wrap !important; gap:10px !important; }
  html:root body .card-actions .search-wrap, html:root body .sa-panel-actions .search-wrap{ flex:1 1 180px !important; min-width:0 !important; }
  html:root body .card-actions .search-input{ width:100% !important; }
  html:root body .dash-card, html:root body .member-soft-panel, html:root body .sa-soft-panel{ border-radius:18px !important; }
}
@media (max-width:1440px){
  html:root body .tbl .th-wrap{ gap:2px !important; }
  html:root body .tbl .th-btn{ padding:0 2px !important; min-width:0 !important; width:auto !important; font-size:10px !important; }
  html:root body .tbl td.col-category, html:root body .tbl td.col-createdBy{ max-width:120px !important; } html:root body .tbl td.col-testName{ max-width:180px !important; }
  html:root body .tbl th.col-act, html:root body .tbl td.col-act, html:root body .tbl th.col-editRow, html:root body .tbl td.col-editRow{ padding-left:2px !important; padding-right:2px !important; text-align:center !important; }
  html:root body .tbl .col-__drag{ width:20px !important; padding:0 !important; }
}