/* =====================================================================================================================
   IndianCivils theme (loaded after each layout's own styles: public base.html, student _student_app.html, admin _layout.html)
   - white backgrounds everywhere; cards separated by light borders
   - menu icons in light tinted chips coloured by section; the active item gets a solid chip with a white icon
   - every <select> is a searchable, keyboard-friendly dropdown (static/js/ui-select.js); opt out with data-native
   See DESIGN_GUIDE.md.
   ===================================================================================================================== */
:root {
  --tone-blue-bg: #DBEAFE;   --tone-blue: #1D4ED8;   --tone-blue-row: #EFF6FF;
  --tone-green-bg: #DCFCE7;  --tone-green: #15803D;  --tone-green-row: #F0FDF4;
  --tone-purple-bg: #EDE9FE; --tone-purple: #6D28D9; --tone-purple-row: #F5F3FF;
  --tone-amber-bg: #FEF3C7;  --tone-amber: #B45309;  --tone-amber-row: #FFFBEB;
  --tone-rose-bg: #FFE4E6;   --tone-rose: #BE123C;   --tone-rose-row: #FFF1F2;
  --tone-teal-bg: #CCFBF1;   --tone-teal: #0F766E;   --tone-teal-row: #F0FDFA;
  --tone-slate-bg: #F1F5F9;  --tone-slate: #475569;  --tone-slate-row: #F8FAFC;
  --app-bg: #FFFFFF;
}

/* ---------------------------------------------------------------- white backgrounds */
body { background: #FFFFFF; }
.page-head { background: #FFFFFF; border-bottom: 1px solid var(--line, #E2E8F0); }
.adm .main, .adm .body, .app .main { background: #FFFFFF; }

/* ---------------------------------------------------------------- admin sidebar: white, like the student one */
.adm .side { background: #FFFFFF; color: #334155; border-right: 1px solid var(--line, #E2E8F0); }
.adm .side__brand { border-bottom: 1px solid var(--line, #E2E8F0); }
.adm .side__brand img { background: transparent; padding: 0; }
.adm .side__brand span { color: #0F172A; }
.adm .side h6, .adm .adm-nav h6 { color: #94A3B8; font-weight: 700; letter-spacing: .08em; }
.adm .side a { color: #1E293B; font-weight: 500; }
.adm .side a:hover { background: #F1F5F9; color: #0F172A; }
.adm .side a[aria-current="page"] { background: var(--row, var(--tone-blue-row)); color: var(--fg, var(--tone-blue)); font-weight: 600; }
.adm .side__foot { border-top: 1px solid var(--line, #E2E8F0); }
.adm .side__foot strong { color: #0F172A; }
.adm .side .cnt { background: #F1F5F9; color: #334155; }
.adm .side .cnt.hot { background: #F59E0B; color: #1F1300; }
.adm .adm-collapse { border-color: var(--line, #E2E8F0); color: #64748B; }
.adm .adm-collapse:hover { background: #F1F5F9; color: var(--tone-blue); }

/* ---------------------------------------------------------------- icon chips (both sidebars) */
.adm .side a svg { box-sizing: content-box; width: 16px; height: 16px; padding: 6px; border-radius: 8px;
  background: var(--bg, var(--tone-blue-bg)); color: var(--fg, var(--tone-blue)); stroke-width: 2; transition: background .15s, color .15s; }
.adm .side a[aria-current="page"] svg { background: var(--fg, var(--tone-blue)); color: #FFFFFF; }
.app .side .ico { width: 28px; height: 28px; border-radius: 8px; background: var(--bg, var(--tone-blue-bg)); color: var(--fg, var(--tone-blue)); transition: background .15s, color .15s; }
.app .side .ico svg { width: 16px; height: 16px; stroke-width: 2; }
.app .side a.nav[aria-current="page"] { background: var(--row, var(--tone-blue-row)); color: var(--fg, var(--tone-blue)); }
.app .side a.nav[aria-current="page"]::before { background: var(--fg, var(--tone-blue)); }
.app .side a.nav[aria-current="page"] .ico { background: var(--fg, var(--tone-blue)); color: #FFFFFF; }

/* section colours: by destination, so every link to the same place looks the same */
.side a[href="/admin"], .side a[href="/student-dashboard"],
.side a[href^="/admin/evaluations"]                             { --bg: var(--tone-blue-bg);   --fg: var(--tone-blue);   --row: var(--tone-blue-row); }
.side a[href^="/admin/labels"]                                  { --bg: var(--tone-amber-bg);  --fg: var(--tone-amber);  --row: var(--tone-amber-row); }
.side a[href^="/admin/students"], .side a[href^="/admin/rankings"] { --bg: var(--tone-green-bg); --fg: var(--tone-green); --row: var(--tone-green-row); }
.side a[href^="/admin/payments"]                                { --bg: var(--tone-teal-bg);   --fg: var(--tone-teal);   --row: var(--tone-teal-row); }
.side a[href^="/admin/leads"]                                   { --bg: var(--tone-purple-bg); --fg: var(--tone-purple); --row: var(--tone-purple-row); }
.side a[href^="/my/videos"]                                     { --bg: var(--tone-green-bg);  --fg: var(--tone-green);  --row: var(--tone-green-row); }
.side a[href^="/admin/video-courses"], .side a[href^="/admin/videos"] { --bg: var(--tone-rose-bg); --fg: var(--tone-rose); --row: var(--tone-rose-row); }
.side a[href^="/my/standing"]                                   { --bg: var(--tone-amber-bg);  --fg: var(--tone-amber);  --row: var(--tone-amber-row); }
.side a[href^="/my/explore"]                                    { --bg: var(--tone-teal-bg);   --fg: var(--tone-teal);   --row: var(--tone-teal-row); }
.side a[href*="wa.me"]                                          { --bg: var(--tone-green-bg);  --fg: var(--tone-green);  --row: var(--tone-green-row); }
.side a[href="/set-password"], .side a[href="/"]                { --bg: var(--tone-slate-bg);  --fg: var(--tone-slate);  --row: var(--tone-slate-row); }
.side a[href$="/logout"]                                        { --bg: var(--tone-rose-bg);   --fg: var(--tone-rose);   --row: var(--tone-rose-row); }

/* ---------------------------------------------------------------- searchable dropdowns (ui-select.js), every page */
.uis { position: relative; display: inline-block; vertical-align: middle; min-width: 200px; max-width: 100%; }
.uis__native { position: absolute !important; opacity: 0 !important; pointer-events: none !important; width: 1px !important; height: 1px !important; padding: 0 !important; border: 0 !important; }
.uis__btn { width: 100%; min-height: 40px; display: flex; align-items: center; justify-content: space-between; gap: 10px; text-align: left;
  font: 500 .92rem "IBM Plex Sans", system-ui, sans-serif; color: #0F172A; background: linear-gradient(#FFFFFF, #FBFCFE);
  border: 1px solid #D5DCE6; border-radius: 10px; padding: 7px 8px 7px 12px; cursor: pointer;
  box-shadow: 0 1px 2px rgba(15,23,42,.06), inset 0 -1px 0 rgba(15,23,42,.02); transition: border-color .15s, box-shadow .15s, background .15s; }
.uis__btn:hover { border-color: #A8B4C7; background: #FFFFFF; }
.uis__btn:focus-visible, .uis.is-open .uis__btn { outline: none; border-color: var(--tone-blue); background: #FFFFFF; box-shadow: 0 0 0 4px rgba(29,78,216,.12), 0 1px 2px rgba(15,23,42,.06); }
.uis.is-empty .uis__text { color: #64748B; font-weight: 400; }
.uis__text { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
.uis__meta { font-style: normal; font-size: .78rem; font-weight: 600; color: #64748B; background: #F1F5F9; border-radius: 999px; padding: 1px 8px; margin-left: 6px; white-space: nowrap; }
.uis__chev { width: 26px; height: 26px; padding: 4px; box-sizing: border-box; border-radius: 7px; background: #F1F5F9; color: #475569; flex: none; transition: transform .18s, background .15s, color .15s; }
.uis.is-open .uis__chev { transform: rotate(180deg); background: var(--tone-blue-bg); color: var(--tone-blue); }
.uis__pop { display: block; visibility: hidden; opacity: 0; transform: translateY(-4px) scale(.985); transform-origin: top center; pointer-events: none;
  position: absolute; z-index: 80; left: 0; right: auto; top: calc(100% + 6px); width: max-content; min-width: max(100%, 240px); max-width: min(480px, 92vw);
  background: #FFFFFF; border: 1px solid #E2E8F0; border-radius: 14px; padding: 6px;
  box-shadow: 0 20px 40px -12px rgba(15,23,42,.22), 0 6px 14px -4px rgba(15,23,42,.08); transition: opacity .14s ease, transform .14s ease, visibility 0s linear .14s; }
.uis.is-open .uis__pop { visibility: visible; opacity: 1; transform: none; pointer-events: auto; transition: opacity .14s ease, transform .14s ease; }
.uis__search { position: sticky; top: 0; width: 100%; box-sizing: border-box; font: 400 .9rem "IBM Plex Sans", system-ui, sans-serif; border: 1px solid #E2E8F0; border-radius: 10px;
  padding: 9px 10px 9px 34px; margin-bottom: 6px; background: #F8FAFC url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2364748B' stroke-width='2' stroke-linecap='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='M21 21l-4.3-4.3'/%3E%3C/svg%3E") no-repeat 11px center / 15px; }
.uis__search:focus { outline: none; border-color: var(--tone-blue); background-color: #FFFFFF; box-shadow: 0 0 0 3px rgba(29,78,216,.1); }
.uis__list { list-style: none; margin: 0; padding: 0; max-height: 300px; overflow-y: auto; scrollbar-width: thin; scrollbar-color: #CBD5E1 transparent; }
.uis__opt { position: relative; display: flex; align-items: center; gap: 8px; padding: 9px 10px 9px 12px; border-radius: 9px; font-size: .92rem; color: #0F172A; cursor: pointer; }
.uis__opt > span { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.uis__opt .uis__meta { margin-left: auto; }
.uis__opt svg { width: 16px; height: 16px; color: var(--tone-blue); visibility: hidden; flex: none; }
.uis__opt.is-active, .uis__opt:hover { background: #F1F5F9; }
.uis__opt[aria-selected="true"] { font-weight: 600; color: var(--tone-blue); background: var(--tone-blue-row); }
.uis__opt[aria-selected="true"]::before { content: ""; position: absolute; left: 3px; top: 9px; bottom: 9px; width: 3px; border-radius: 3px; background: var(--tone-blue); }
.uis__opt[aria-selected="true"] svg { visibility: visible; }
.uis__opt[aria-selected="true"] .uis__meta { background: #DBEAFE; color: var(--tone-blue); }
.uis__opt--placeholder { color: #64748B; }
.uis__none { padding: 12px; font-size: .88rem; color: #64748B; text-align: center; }
.uis__count { padding: 6px 8px 2px; font-size: .74rem; font-weight: 600; color: #94A3B8; text-align: right; }
.uis__count:empty { display: none; }
.uis--compact { min-width: 150px; } .uis--compact .uis__btn { min-height: 34px; padding: 4px 6px 4px 10px; font-size: .86rem; }
/* a select that keeps the native control (data-native) still looks consistent */
select[data-native] { font: 500 .92rem "IBM Plex Sans", system-ui, sans-serif; border: 1px solid #D5DCE6; border-radius: 10px; padding: 9px 12px; background: #FFFFFF; color: #0F172A; }

/* ---------------------------------------------------------------- the USP badge: UPSC-style scaling across all optionals */
.scaling-badge { display: inline-flex; align-items: center; gap: 8px; margin: 10px 0 4px; padding: 7px 14px 7px 8px; border-radius: 999px;
  font-weight: 700; font-size: .9rem; letter-spacing: .01em; color: #fff; text-decoration: none;
  background: linear-gradient(90deg, #1D4ED8 0%, #6D28D9 60%, #BE185D 100%); box-shadow: 0 6px 18px rgba(109,40,217,.25); }
.scaling-badge svg { width: 22px; height: 22px; padding: 3px; border-radius: 999px; background: rgba(255,255,255,.2); fill: none; stroke: #FDE68A;
  stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; box-sizing: border-box; }
.scaling-badge--light { color: #4C1D95; background: linear-gradient(90deg, #DBEAFE, #EDE9FE, #FCE7F3); box-shadow: none; }
.scaling-badge--light svg { background: #fff; stroke: #6D28D9; }

/* ---------------------------------------------------------------- text inputs match the dropdowns */
.adm .input, .app .input, .adm input.input, .app input.input { min-height: 40px; border: 1px solid #D5DCE6; border-radius: 10px; padding: 8px 12px;
  font: 500 .92rem "IBM Plex Sans", system-ui, sans-serif; color: #0F172A; background: #FFFFFF; box-shadow: 0 1px 2px rgba(15,23,42,.06); box-sizing: border-box; }
.adm .input:focus, .app .input:focus { outline: none; border-color: var(--tone-blue); box-shadow: 0 0 0 4px rgba(29,78,216,.12); }
.adm .input::placeholder, .app .input::placeholder { color: #94A3B8; font-weight: 400; }