/* ============================================================
   SimpliTrain Super Admin – Extracted CSS
   Source: SuperAdmin_Mockup.html
   ============================================================ */

/* Inter font stack */
@font-face{font-family:'Inter';font-style:normal;font-weight:300 700;src:local('Inter'),local('Inter-Regular');}

:root{
  --primary:#009ef7;--primary-dark:#0095e8;--primary-light:#e8f4fd;
  --body-bg:#f5f8fa;--white:#fff;--page-bg:#dbe2e9;
  --card-border:#eff2f5;--border:#eff2f5;
  --text-dark:#181c32;--text-secondary:#3f4254;--text-muted:#6b7280;--text-gray:#6b7280;
  --success:#50cd89;--success-light:#e8fff3;
  --warning:#ffc700;--warning-light:#fff8dd;
  --danger:#f1416c;--danger-light:#fff5f8;
  --info:#7239ea;--info-light:#f3e8ff;
  --shadow:0 0 20px rgba(76,87,125,.02),0 1px 4px rgba(76,87,125,.08);
  --shadow-md:0 4px 24px rgba(0,0,0,.08);--shadow-lg:0 8px 40px rgba(0,0,0,.14);
  --radius:10px;--nav-h:200px;
}
*{box-sizing:border-box;margin:0;padding:0;}
body{font-family:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Oxygen,Ubuntu,sans-serif;background:var(--page-bg);color:var(--text-dark);font-size:15px;min-height:100vh;}

/* ── TOPNAV ── */
.topnav{height:var(--nav-h);background:#fff;border-bottom:1px solid var(--card-border);position:sticky;top:0;left:0;right:0;z-index:300;display:flex;align-items:center;padding:0;padding-inline:var(--layout-content-inline,max(var(--content-pad,32px),calc((100vw - var(--content-max-w,1200px))/2 + var(--content-pad,32px))));gap:0;box-shadow:0 1px 3px rgba(0,0,0,.06);}
.topnav-logo{display:flex;align-items:center;gap:10px;text-decoration:none;flex-shrink:0;margin-inline-end:20px;}
.topnav-logo-text{font-weight:700;font-size:17px;color:var(--text-dark);}
.topnav-links{display:flex;align-items:center;flex:1;gap:2px;}
.topnav-link{padding:6px 12px;display:flex;align-items:center;font-size:13px;font-weight:500;color:var(--text-gray);cursor:pointer;border-radius:7px;white-space:nowrap;transition:background .15s,color .15s;text-decoration:none;}
.topnav-link:hover{background:var(--body-bg);color:var(--text-dark);}
.topnav-link.active{background:var(--primary-light);color:var(--primary);font-weight:600;}
.topnav-right{display:flex;align-items:center;gap:6px;margin-inline-start:auto;flex-shrink:0;}
.topnav-icon{width:34px;height:34px;border-radius:8px;display:flex;align-items:center;justify-content:center;cursor:pointer;color:var(--text-gray);border:1px solid transparent;position:relative;transition:all .15s;}
.topnav-icon:hover{background:var(--body-bg);border-color:var(--card-border);color:var(--text-dark);}
.topnav-cart{position:relative;}
.topnav-cart-badge{position:absolute;top:-3px;inset-inline-end:-3px;background:var(--primary);color:#fff;border-radius:50%;width:16px;height:16px;font-size:11px;font-weight:700;display:flex;align-items:center;justify-content:center;border:2px solid #fff;}
.topnav-user{display:flex;align-items:center;gap:8px;padding:5px 10px;border-radius:8px;cursor:pointer;border:1px solid var(--card-border);transition:border-color .15s;}
.topnav-user:hover{border-color:var(--primary);}
.topnav-avatar{width:30px;height:30px;border-radius:50%;background:linear-gradient(135deg,#009ef7,#7239ea);color:#fff;display:flex;align-items:center;justify-content:center;font-size:13px;font-weight:700;flex-shrink:0;}
.topnav-uname{font-size:14px;font-weight:600;color:var(--text-dark);}
.topnav-notif-dot{position:absolute;top:5px;inset-inline-end:5px;width:7px;height:7px;background:var(--danger);border-radius:50%;border:2px solid #fff;}

/* App header brand logo (_TopNavigation) — fits 64px bar; works with or without components.css */
.app-header__brand-logo{display:block;width:auto;height:auto;max-height:min(40px,calc(var(--nav-height,var(--nav-h,64px)) - 20px));max-width:min(220px,38vw);object-fit:contain;object-position:center;}
#top-bar .app-header{box-sizing:border-box;padding-inline:var(--layout-content-inline,max(var(--content-pad,32px),calc((100vw - var(--content-max-w,1200px))/2 + var(--content-pad,32px))));}

/* ── MAIN ── */
.main{max-width:var(--content-max-w,1200px);margin-inline:auto;padding:24px var(--content-pad,32px);min-height:calc(100vh - var(--nav-h));}
@media(max-width:991px){.main{padding:16px var(--content-pad-sm,16px);}}

.page{display:block;animation:fadeIn .2s ease;}
@keyframes fadeIn{from{opacity:0;transform:translateY(4px);}to{opacity:1;transform:translateY(0);}}
.page-header{display:none;align-items:center;justify-content:flex-end;}
.page-title{font-size:20px;font-weight:700;}
.page-subtitle{font-size:15px;color:var(--text-muted);margin-top:2px;}

/* ── CARDS ── */
.card{background:var(--white);border:1px solid var(--card-border);border-radius:var(--radius);box-shadow:var(--shadow);}
.card-header{padding:16px 22px;border-bottom:1px solid var(--card-border);display:flex;align-items:center;gap:10px;}
.card-title{font-size:16px;font-weight:700;}
.card-body{padding:20px;}

/* ── KPI CARDS ── */
.kpi-grid{display:grid;grid-template-columns:repeat(5,1fr);gap:16px;margin-bottom:24px;}
.kpi-card{background:var(--white);border:1px solid var(--card-border);border-radius:var(--radius);padding:20px;box-shadow:var(--shadow);cursor:pointer;transition:box-shadow .2s,transform .2s;position:relative;overflow:hidden;}
.kpi-card:hover{box-shadow:var(--shadow-md);transform:translateY(-2px);}
.kpi-card::before{content:'';position:absolute;top:0;left:0;right:0;height:3px;border-radius:var(--radius) var(--radius) 0 0;}
.kpi-card.blue::before{background:var(--primary);}
.kpi-card.green::before{background:var(--success);}
.kpi-card.yellow::before,.kpi-card.orange::before{background:var(--warning);}
.kpi-card.red::before{background:var(--danger);}
.kpi-card.purple::before{background:var(--info);}
.kpi-card.warning::before{background:var(--warning);}
.kpi-icon{width:44px;height:44px;border-radius:10px;display:flex;align-items:center;justify-content:center;margin-bottom:12px;}
.kpi-icon.blue{background:var(--primary-light);}
.kpi-icon.green{background:var(--success-light);}
.kpi-icon.yellow{background:var(--warning-light);}
.kpi-icon.red{background:var(--danger-light);}
.kpi-icon.purple{background:var(--info-light);}
.kpi-val,.kpi-value{font-size:26px;font-weight:700;color:var(--text-dark);line-height:1;}
.kpi-label{font-size:13px;color:var(--text-muted);margin-top:4px;font-weight:600;text-transform:uppercase;letter-spacing:.5px;}
.kpi-trend{font-size:13px;margin-top:6px;}
.kpi-trend.up{color:#127a3a;}
.kpi-trend.down{color:#c01250;}

/* ── BADGES ── */
.badge{display:inline-flex;align-items:center;gap:4px;padding:3px 9px;border-radius:6px;font-size:13px;font-weight:600;}
.badge-primary{background:var(--primary-light);color:#0061a4;}
.badge-success{background:var(--success-light);color:#166b2e;}
.badge-warning{background:var(--warning-light);color:#7a5c00;}
.badge-danger{background:var(--danger-light);color:#a4173f;}
.badge-info{background:var(--info-light);color:var(--info);}
.badge-gray{background:var(--body-bg);color:var(--text-gray);}
.badge-light{background:var(--body-bg);color:var(--text-gray);}
.badge-dark{background:#1e1e2d;color:#fff;}
.badge-secondary{background:var(--body-bg);color:var(--text-gray);}

/* ── BUTTONS ── */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:6px;padding:9px 18px;border-radius:7px;font-size:15px;font-weight:600;cursor:pointer;border:none;transition:all .15s;font-family:'Inter',sans-serif;}
.btn-primary{background:var(--primary);color:#fff;}.btn-primary:hover{background:var(--primary-dark);}
.btn-light{background:var(--body-bg);color:var(--text-dark);border:1px solid var(--card-border);}.btn-light:hover{border-color:var(--primary);color:var(--primary);}
.btn-success{background:var(--success);color:#fff;}
.btn-danger{background:var(--danger);color:#fff;}.btn-danger:hover{background:#d63a62;}
.btn-warning{background:var(--warning);color:#fff;}
.btn-outline{background:var(--white);border:1px solid var(--card-border);color:var(--text-dark);}
.btn-sm{padding:6px 12px;font-size:14px;}
.btn-xs{padding:4px 9px;font-size:13px;border-radius:5px;}
.btn-secondary{background:var(--body-bg);color:var(--text-gray);border:1px solid var(--card-border);}

/* ── FORMS ── */
.form-group{margin-bottom:16px;}
.form-label{display:block;font-size:14px;font-weight:600;margin-bottom:6px;color:var(--text-dark);}
.form-control{width:100%;padding:9px 12px;border:1px solid #c9ced6;border-radius:7px;font-size:15px;font-family:'Inter',sans-serif;outline:none;color:var(--text-dark);background:#fff;transition:border-color .15s;}
.form-control:focus{border-color:var(--primary);box-shadow:0 0 0 3px rgba(0,158,247,.08);}
select.form-control{cursor:pointer;}
.form-row{display:grid;grid-template-columns:1fr 1fr;gap:14px;}
.form-row-3{display:grid;grid-template-columns:1fr 1fr 1fr;gap:14px;}
.form-hint{font-size:13px;color:var(--text-muted);margin-top:4px;}

/* ── TABS ── */
.tab-bar{display:flex;border-bottom:2px solid var(--card-border);margin-bottom:20px;flex-wrap:wrap;background:var(--white);}
.tab-item,.tab{padding:10px 18px;font-size:15px;font-weight:500;color:var(--text-gray);cursor:pointer;border-bottom:2px solid transparent;margin-bottom:-2px;transition:color .15s;white-space:nowrap;}
.tab-item:hover,.tab:hover{color:var(--primary);}
.tab-item.active,.tab.active{color:var(--primary);border-bottom-color:var(--primary);font-weight:600;}
.tab-pane{display:none;}.tab-pane.active{display:block;}
.tab-content{background:var(--white);border-radius:0 0 var(--radius) var(--radius);overflow:hidden;}

/* ── TABLES ── */
table.dt{width:100%;border-collapse:collapse;}
table.dt th{padding:10px 12px;font-size:13px;font-weight:700;text-transform:uppercase;background:var(--body-bg);border-bottom:2px solid var(--card-border);color:var(--text-muted);letter-spacing:.5px;white-space:nowrap;}
table.dt td{padding:11px 12px;font-size:15px;border-bottom:1px solid var(--card-border);vertical-align:middle;}
.dt tbody tr{background:var(--white);}
.dt tbody td{background:var(--white);}
table.dt tr:last-child td{border-bottom:none;}
table.dt tr:hover td{background:#fafbfc;}
.tbl-toolbar{display:flex;align-items:center;gap:10px;margin-bottom:14px;flex-wrap:wrap;}
.tbl-search{padding:7px 12px;border:1px solid #c9ced6;border-radius:7px;font-size:14px;outline:none;font-family:'Inter',sans-serif;width:220px;}
.tbl-search:focus{border-color:var(--primary);}

/* ── ADMIN TABLE (adt) ── */
.adt{width:100%;border-collapse:collapse;}
.adt th{padding:8px 10px;font-size:13px;font-weight:700;text-transform:uppercase;background:var(--body-bg);border-bottom:2px solid var(--card-border);color:var(--text-muted);letter-spacing:.4px;}
.adt td{padding:10px 10px;font-size:12.5px;border-bottom:1px solid var(--card-border);vertical-align:middle;}
.adt tr:last-child td{border-bottom:none;}
.adt tr:hover td{background:#fafbfc;}
.adt-toolbar{display:flex;align-items:center;gap:10px;margin-bottom:12px;flex-wrap:wrap;}
.adt-search{padding:6px 12px;border:1px solid #c9ced6;border-radius:6px;font-size:14px;outline:none;font-family:'Inter',sans-serif;width:200px;}
.adt-search:focus{border-color:var(--primary);}

/* ── MODALS ── */
.modal-overlay{position:fixed;inset:0;background:rgba(0,0,0,.55);z-index:1000;display:none;align-items:center;justify-content:center;padding:20px;}
.modal-overlay.open{display:flex;}
.modal{background:#fff;border-radius:12px;box-shadow:0 20px 60px rgba(0,0,0,.25);width:100%;max-width:580px;max-height:90vh;overflow-y:auto;animation:modalIn .2s ease;}
.modal.modal-lg{max-width:720px;}
.modal.modal-xl{max-width:900px;}
@keyframes modalIn{from{opacity:0;transform:translateY(-16px);}to{opacity:1;transform:translateY(0);}}
.modal-header{padding:20px 24px;border-bottom:1px solid var(--card-border);display:flex;align-items:center;gap:12px;background:#fff;}
.modal-title{font-size:17px;font-weight:700;color:var(--text-dark);}
.modal-close{margin-inline-start:auto;background:none;border:none;cursor:pointer;color:var(--text-muted);font-size:20px;line-height:1;padding:2px 6px;border-radius:5px;transition:background .15s;}
.modal-close:hover{background:var(--body-bg);}
.modal-body{padding:24px;background:#fff;}
.modal-footer{padding:16px 24px;border-top:1px solid var(--card-border);display:flex;justify-content:flex-end;gap:10px;background:#fff;}

/* ── SEARCH OVERLAY ── */
.search-overlay{position:fixed;inset:0;background:rgba(0,0,0,.6);z-index:1500;display:none;align-items:flex-start;justify-content:center;padding-top:80px;}
.search-overlay.open{display:flex;}
.search-box{background:#fff;border-radius:12px;width:640px;max-width:95vw;box-shadow:0 20px 60px rgba(0,0,0,.25);}
.search-input-row{display:flex;align-items:center;gap:10px;padding:16px 20px;border-bottom:1px solid var(--card-border);}
.search-input-row input{flex:1;border:none;outline:none;font-size:17px;font-family:'Inter',sans-serif;color:var(--text-dark);}
.search-results{padding:8px 0;max-height:380px;overflow-y:auto;}
.search-group-lbl{padding:6px 20px 4px;font-size:12px;font-weight:700;text-transform:uppercase;color:var(--text-muted);letter-spacing:.8px;}
.search-result-item{display:flex;align-items:center;gap:12px;padding:10px 20px;cursor:pointer;transition:background .1s;}
.search-result-item:hover{background:var(--body-bg);}
.search-footer{padding:10px 20px;border-top:1px solid var(--card-border);display:flex;gap:14px;}
.search-hint{font-size:13px;color:var(--text-muted);display:flex;align-items:center;gap:4px;}
.search-hint kbd{background:var(--body-bg);border:1px solid var(--card-border);border-radius:4px;padding:1px 5px;font-size:12px;}

/* ── ADMIN CONSOLE ── */
.admin-workspace{display:block;background:var(--white);border-radius:var(--radius);border:1px solid var(--card-border);box-shadow:var(--shadow);overflow:hidden;min-height:640px;}

/* ── Top horizontal category tab bar ── */
.admin-htab-bar{display:flex;flex-wrap:wrap;gap:4px;padding:10px 14px;background:#f0f2f5;border-bottom:1px solid var(--card-border);}
.admin-htab{padding:7px 14px;font-size:14px;font-weight:500;color:var(--text-gray);cursor:pointer;border-radius:6px;white-space:nowrap;display:inline-flex;align-items:center;gap:6px;transition:all .15s;border:1px solid transparent;}
.admin-htab:hover{background:#e2e5eb;color:var(--text-dark);}
.admin-htab.active{background:#1e1e2d;color:#fff;font-weight:700;box-shadow:0 2px 6px rgba(0,0,0,.18);}
.admin-htab.active svg{stroke:#fff;}

/* ── Category panels ── */
.admin-hcontent{position:relative;}
.admin-section-panel{display:none;}
.admin-section-panel.active{display:block;}
.admin-inner{display:flex;width:100%;min-height:580px;}

/* ── Left vertical sub-nav ── */
.admin-vnav{width:200px;flex-shrink:0;border-inline-end:1px solid var(--card-border);background:#f8f9fb;padding:8px 0;overflow-y:auto;}
.admin-vnav-hdr{padding:8px 14px 4px;font-size:12px;font-weight:700;text-transform:uppercase;letter-spacing:.7px;color:var(--text-muted);}
.admin-vnav-item{display:flex;align-items:center;gap:9px;padding:9px 14px;cursor:pointer;font-size:12.5px;color:var(--text-gray);font-weight:500;border-inline-start:3px solid transparent;transition:all .15s;}
.admin-vnav-item:hover{background:rgba(0,158,247,.05);color:var(--text-dark);}
.admin-vnav-item.active{font-weight:700;border-inline-start-color:var(--cat-color,var(--primary));background:var(--cat-light,var(--primary-light));color:var(--cat-color,var(--primary));}
.admin-vnav-dot{width:26px;height:26px;border-radius:7px;display:flex;align-items:center;justify-content:center;font-size:12px;font-weight:700;flex-shrink:0;background:var(--cat-light,var(--primary-light));color:var(--cat-color,var(--primary));transition:all .15s;}
.admin-vnav-item.active .admin-vnav-dot{background:var(--cat-color,var(--primary));color:#fff;}

/* ── Right action content ── */
.admin-vright{flex:1;padding:20px 24px;overflow-y:auto;}
.admin-vcontent{display:none;}
.admin-vcontent.active{display:block;}
.admin-vc-title{font-size:16px;font-weight:700;color:var(--text-dark);margin-bottom:4px;}
.admin-vc-desc{font-size:14px;color:var(--text-muted);margin-bottom:18px;padding:10px 14px;background:var(--body-bg);border-radius:8px;border-inline-start:3px solid var(--cat-color,var(--primary));}
.action-links-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:8px;}
.action-link-btn{display:flex;align-items:center;gap:10px;padding:10px 14px;background:var(--white);border:1px solid var(--card-border);border-radius:8px;cursor:pointer;font-size:12.5px;font-weight:500;color:var(--text-dark);transition:all .15s;text-align:start;}
.action-link-btn:hover{border-color:var(--cat-color,var(--primary));color:var(--cat-color,var(--primary));background:var(--cat-light,var(--primary-light));transform:translateY(-1px);box-shadow:0 2px 8px rgba(0,0,0,.06);}
.action-link-btn svg{flex-shrink:0;opacity:.4;}
.action-link-btn:hover svg{opacity:1;}

/* Category colour tokens */
.cat-blue  {--cat-color:#009ef7;--cat-light:#e8f4fd;}
.cat-purple{--cat-color:#7239ea;--cat-light:#f3e8ff;}
.cat-green {--cat-color:#1a9c3e;--cat-light:#e8fff3;}
.cat-teal  {--cat-color:#009da5;--cat-light:#e0f7f8;}
.cat-orange{--cat-color:#e07b00;--cat-light:#fff8dd;}
.cat-red   {--cat-color:#f1416c;--cat-light:#fff5f8;}
.cat-indigo{--cat-color:#3f4fa6;--cat-light:#eceffe;}
.cat-gold  {--cat-color:#b07800;--cat-light:#fef9e7;}
.cat-pink  {--cat-color:#c0185e;--cat-light:#fde8f2;}
.cat-dark  {--cat-color:#3d3d5c;--cat-light:#eeeef5;}

/* ── CONSOLE TILES ── */
.console-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(185px,1fr));gap:12px;}
.console-tile{background:#fff;border:1px solid var(--card-border);border-radius:10px;padding:14px 16px;transition:box-shadow .15s,border-color .15s;}
.console-tile:hover{box-shadow:var(--shadow-md);border-color:var(--primary);}
.console-tile-hdr{display:flex;align-items:center;gap:10px;margin-bottom:10px;}
.console-tile-icon{width:38px;height:38px;border-radius:50%;display:flex;align-items:center;justify-content:center;flex-shrink:0;font-size:16px;font-weight:700;}
.console-tile-title{font-weight:700;font-size:15px;color:var(--text-dark);}
.console-tile-links{list-style:none;padding:0;margin:0;display:flex;flex-direction:column;gap:3px;}
.console-tile-links li a{font-size:14px;color:var(--primary);cursor:pointer;text-decoration:none;display:block;padding:2px 0;transition:color .1s;}
.console-tile-links li a:hover{color:var(--primary-dark);text-decoration:underline;}

/* tile icon colours */
.ti-blue  {background:#e8f4fd;color:#009ef7;}
.ti-green {background:#e8fff3;color:#1a9c3e;}
.ti-purple{background:#f3e8ff;color:#7239ea;}
.ti-orange{background:#fff8dd;color:#e07b00;}
.ti-teal  {background:#e0f7f8;color:#009da5;}
.ti-red   {background:#fff5f8;color:#f1416c;}
.ti-yellow{background:#fef9e7;color:#b07800;}
.ti-indigo{background:#eceffe;color:#3f4fa6;}
.ti-pink  {background:#fde8f2;color:#c0185e;}
.ti-brown {background:#f5ede8;color:#8c4a2f;}

/* ── DARK MODE TOGGLE ── */
.dark-toggle{background:var(--body-bg);border:1px solid var(--card-border);border-radius:8px;cursor:pointer;font-size:16px;padding:5px 9px;line-height:1;transition:border-color .15s;}
.dark-toggle:hover{border-color:var(--primary);}

/* ── ACTIVITY ITEM ── */
.activity-item{display:flex;gap:12px;padding:10px 0;border-bottom:1px solid var(--card-border);}
.activity-item:last-child{border-bottom:none;}
.activity-dot{width:8px;height:8px;border-radius:50%;margin-top:5px;flex-shrink:0;}
.activity-dot.blue{background:var(--primary);}
.activity-dot.green{background:var(--success);}
.activity-dot.yellow{background:var(--warning);}
.activity-dot.red{background:var(--danger);}
.activity-dot.purple{background:var(--info);}

/* ── EMPTY STATE ── */
.empty-state{text-align:center;padding:48px 20px;}
.empty-icon{font-size:40px;margin-bottom:10px;}
.empty-title{font-size:16px;font-weight:700;margin-bottom:6px;}
.empty-desc{font-size:14px;color:var(--text-muted);margin-bottom:16px;}

/* ── MISC UTILITIES ── */
/* .row:not(.auth-login-grid):not(.auth-login-grid *){display:flex;gap:20px;} */
.row:not(.auth-login-grid):not(.auth-login-grid *){display:flex;}
.col{flex:1;min-width:0;}
.fw-700{font-weight:700;}.fw-600{font-weight:600;}
.text-muted{color:var(--text-muted);}.text-success{color:#127a3a;}.text-danger{color:#c01250;}
.mb-3{margin-bottom:12px;}.mb-4{margin-bottom:20px;}.mt-3{margin-top:12px;}
.section-desc{font-size:14px;color:var(--text-muted);margin-bottom:16px;}

/* ── TOGGLE SWITCH ── */
.toggle-switch{position:relative;display:inline-block;width:38px;height:20px;}
.toggle-switch input{opacity:0;width:0;height:0;}
.toggle-slider{position:absolute;cursor:pointer;inset:0;background:var(--card-border);border-radius:20px;transition:.2s;}
.toggle-slider:before{content:'';position:absolute;height:14px;width:14px;inset-inline-start:3px;bottom:3px;background:#fff;border-radius:50%;transition:.2s;}
.toggle-switch input:checked + .toggle-slider{background:var(--primary);}
.toggle-switch input:checked + .toggle-slider:before{transform:translateX(18px);}

/* ── TOAST ── */
#toast{position:fixed;bottom:28px;left:50%;transform:translateX(-50%) translateY(10px);background:#181c32;color:#fff;padding:10px 22px;border-radius:8px;font-size:15px;font-weight:500;z-index:9999;opacity:0;pointer-events:none;transition:opacity .25s,transform .25s;white-space:nowrap;box-shadow:0 4px 20px rgba(0,0,0,.25);}
#toast.show{opacity:1;transform:translateX(-50%) translateY(0);}

/* ── DARK MODE ── */
body.dark-mode{
  --body-bg:#151521;--page-bg:#0f0f1a;--white:#1e1e2d;--card-border:#2b2b40;--border:#2b2b40;
  --text-dark:#cdcdde;--text-secondary:#9ea3b6;--text-muted:#565674;--text-gray:#7e8299;
  --shadow:0 0 20px rgba(0,0,0,.2),0 1px 4px rgba(0,0,0,.15);
  --shadow-md:0 4px 24px rgba(0,0,0,.3);--shadow-lg:0 8px 40px rgba(0,0,0,.35);
  --success-light:rgba(80,205,137,.12);--warning-light:rgba(255,199,0,.12);
  --danger-light:rgba(241,65,108,.12);--info-light:rgba(114,57,234,.12);
}
body.dark-mode .topnav{background:#1e1e2d;border-bottom-color:#2b2b40;}
body.dark-mode .topnav-logo-text{color:#cdcdde;}
body.dark-mode .topnav-link:hover{background:#2b2b40;}
body.dark-mode .topnav-link.active{background:rgba(0,158,247,.15);}
body.dark-mode .card,body.dark-mode .modal{background:#1e1e2d;border-color:#2b2b40;}
body.dark-mode .page-header,body.dark-mode .section-header{border-color:#2b2b40;}
body.dark-mode .form-control,body.dark-mode .tbl-search,body.dark-mode .adt-search{background:#151521;color:var(--text-dark);border-color:#2b2b40;}
body.dark-mode .btn-light{background:#2b2b40;color:var(--text-dark);border-color:#2b2b40;}
body.dark-mode .dt th{background:#13131f;color:var(--text-muted);border-color:#2b2b40;}
body.dark-mode .dt td{border-color:#2b2b40;}
.dt tbody tr{background:var(--white);}
.dt tbody td{background:var(--white);}
body.dark-mode .dt tbody tr:hover{background:rgba(255,255,255,.03);}
body.dark-mode select option{background:#1e1e2d;}
body.dark-mode .tab-bar,.dark-mode .saHTab-bar{border-color:#2b2b40;}
body.dark-mode .tab-item,.dark-mode .saHTab-item{color:var(--text-gray);}
body.dark-mode .admin-vnav{background:#13131f;border-color:#2b2b40;}
body.dark-mode .admin-vcontent{background:#1e1e2d;border-color:#2b2b40;}
body.dark-mode .topnav-logo-text{color:#cdcdde;}
body.dark-mode .topnav-user{border-color:#2b2b40;}
body.dark-mode .topnav-cart-badge,body.dark-mode .topnav-notif-dot{border-color:#1e1e2d;}
body.dark-mode .modal-overlay .modal-header,body.dark-mode .modal-overlay .modal-footer{border-color:#2b2b40;}
body.dark-mode .action-links-grid .action-link{background:#13131f;border-color:#2b2b40;color:var(--text-dark);}
body.dark-mode .action-links-grid .action-link:hover{border-color:var(--primary);color:var(--primary);}


/* -- BREADCRUMB -- */
.breadcrumb{display:flex;align-items:center;flex-wrap:wrap;gap:4px;font-size:16px;color:var(--text-dark);margin-bottom:20px;}
.breadcrumb a{color:var(--text-dark);text-decoration:none;font-weight:500;}.breadcrumb a:hover{text-decoration:underline;}
.breadcrumb .bc-sep,.breadcrumb .bc-sep{color:var(--text-dark);}
.breadcrumb [aria-current]{color:var(--text-dark);font-weight:600;}

/* -- APP FOOTER -- */
.app-footer{background:var(--white);border-top:1px solid var(--card-border);padding:16px 32px;margin-top:auto;}
.footer-inner{max-width:1200px;margin-inline:auto;font-size:14px;color:var(--text-muted);}
.footer-inner a{color:var(--text-muted);text-decoration:none;}.footer-inner a:hover{color:var(--primary);}

/* ══════════════════════════════════════════════════════════════
   MOBILE RESPONSIVE
   ══════════════════════════════════════════════════════════════ */

/* ── Table scroll wrapper ── */
.table-responsive{overflow-x:auto;-webkit-overflow-scrolling:touch;background:var(--white);}
.card-body > table.dt,.card-body > table.adt{min-width:600px;}

/* ── Tablet: 992px ─────────────────────────────────────────── */
@media(max-width:991px){
  /* Nav links scroll horizontally — no hamburger needed in static mockup */
  .topnav-links{overflow-x:auto;-webkit-overflow-scrolling:touch;flex-wrap:nowrap;scrollbar-width:none;}
  .topnav-links::-webkit-scrollbar{display:none;}
  .kpi-grid{grid-template-columns:repeat(3,1fr);}
}

/* ── Tablet/small: 768px ────────────────────────────────────── */
@media(max-width:767px){
  .main{padding:16px 12px;}
  .topnav{padding-inline:12px;}
  #top-bar .app-header{padding-inline:12px;}
  .page-header{flex-direction:column;align-items:flex-end;gap:10px;}
  .kpi-grid{grid-template-columns:repeat(2,1fr);gap:12px;}
  .form-row{grid-template-columns:1fr;}
  .form-row-3{grid-template-columns:1fr;}
  .admin-inner{flex-direction:column;}
  .admin-vnav{width:100%;border-inline-end:none;border-bottom:1px solid var(--card-border);display:flex;flex-wrap:wrap;padding:6px;}
  .admin-vnav-item{border-inline-start:none;border-bottom:2px solid transparent;border-radius:7px;font-size:14px;padding:7px 10px;}
  .admin-vnav-item.active{border-bottom-color:var(--cat-color,var(--primary));border-inline-start:none;}
  .admin-vright{padding:14px 16px;}
  .tbl-toolbar,.adt-toolbar{flex-direction:column;align-items:stretch;}
  .tbl-search,.adt-search{width:100%;}
  .card-body{overflow-x:auto;}
  /* Touch targets */
  .btn{min-height:44px;}
  .btn-sm{min-height:36px;}
  .topnav-icon{width:44px;height:44px;}
  .topnav-user{min-height:44px;padding:6px 12px;}
  .topnav-avatar{width:36px;height:36px;}
  .tab-item,.tab{min-height:44px;display:flex;align-items:center;}
}

/* ── Mobile: 575px ──────────────────────────────────────────── */
@media(max-width:575px){
  body{font-size:16px;}
  .main{padding:10px;}
  .topnav{padding-inline:10px;}
  #top-bar .app-header{padding-inline:10px;}
  .kpi-grid{grid-template-columns:1fr 1fr;gap:8px;}
  .kpi-card{padding:14px;}
  .kpi-val,.kpi-value{font-size:22px;}
  .modal{max-width:calc(100vw - 16px);}
  .page-title{font-size:17px;}
  .console-grid{grid-template-columns:1fr 1fr;}
  .action-links-grid{grid-template-columns:1fr;}
}

/* ══════════════════════════════════════════════════════════════
   RTL SUPPORT
   ══════════════════════════════════════════════════════════════ */

/* Toggle switch knob flips direction in RTL */
[dir="rtl"] .toggle-switch input:checked + .toggle-slider:before{
  transform:translateX(-18px);
}

/* KPI card accent bar — full width, no directional fix needed (left:0;right:0 = inset equivalent) */

/* Toast stays centered — translateX(-50%) works in both LTR/RTL */

/* Admin workspace description border flips (already uses border-inline-start) */

/* Dropdown menu: anchor to inline-start in both directions */
[dir="rtl"] .tdd-menu,[dir="rtl"] .topnav-dropdown-menu{
  left:auto;right:0;
}

/* Nav scrolls from correct edge in RTL */
[dir="rtl"] .topnav-links{direction:rtl;}

/* ══════════════════════════════════════════════════════════════
   LARGE-SCREEN BREAKPOINTS (iMac / high-DPI monitors)
   ══════════════════════════════════════════════════════════════ */

/* ── 1400px — large desktop ─────────────────────────────────── */
@media(min-width:1400px){
  .main{max-width:1360px;padding:14px 20px;}
  .topnav{padding-inline:max(40px,calc((100vw - 1360px) / 2 + 40px));}
  #top-bar .app-header{padding-inline:max(40px,calc((100vw - 1360px) / 2 + 40px));}
  .footer-inner{max-width:1360px;}
  .kpi-grid{grid-template-columns:repeat(5,1fr);}
}

/* ── 1920px — Full-HD monitors ──────────────────────────────── */
@media(min-width:1920px){
  .main{max-width:1600px;padding:0px 0px;}
  .topnav{padding-inline:max(48px,calc((100vw - 1600px) / 2 + 48px));}
  #top-bar .app-header{padding-inline:max(48px,calc((100vw - 1600px) / 2 + 48px));}
  .footer-inner{max-width:1600px;}
  .kpi-grid{grid-template-columns:repeat(6,1fr);}
  body{font-size:16px;}
  .topnav-link{font-size:14px;}
  .topnav-logo-text{font-size:18px;}
  .card-title{font-size:17px;}
  .page-title{font-size:22px;}
}

/* ── 2560px — iMac 27" / 5K ─────────────────────────────────── */
@media(min-width:2560px){
  .main{max-width:1920px;padding:36px 60px;}
  .topnav{padding-inline:max(60px,calc((100vw - 1920px) / 2 + 60px));}
  #top-bar .app-header{padding-inline:max(60px,calc((100vw - 1920px) / 2 + 60px));}
  .footer-inner{max-width:1920px;}
  .kpi-grid{grid-template-columns:repeat(6,1fr);gap:24px;}
  body{font-size:17px;}
  .topnav-link{font-size:15px;}
  .topnav-logo-text{font-size:19px;}
  .topnav-avatar{width:36px;height:36px;font-size:15px;}
  .card-title{font-size:18px;}
  .page-title{font-size:24px;}
  .btn{font-size:16px;}
  .badge{font-size:14px;}
}

/* ══════════════════════════════════════════════════════════════
   MOBILE COLLAPSIBLE TABS
   ══════════════════════════════════════════════════════════════ */

.tab-collapse-btn{display:none;}

@media(max-width:767px){
  /* Toggle button shown only on mobile */
  .tab-collapse-btn{
    display:flex;align-items:center;justify-content:space-between;width:100%;
    padding:10px 14px;background:var(--white);border:1px solid var(--card-border);
    border-radius:var(--radius);font-size:14px;font-weight:600;color:var(--text-dark);
    cursor:pointer;margin-bottom:8px;font-family:inherit;
  }
  .tab-collapse-btn .tcb-arrow{transition:transform .22s;flex-shrink:0;}
  .tab-collapse-btn.open .tcb-arrow{transform:rotate(180deg);}

  /* Collapsible wrappers */
  .tab-bar-wrap{margin-bottom:4px;}
  .tab-bar-wrap .tab-bar{
    max-height:0;overflow:hidden;transition:max-height .28s ease;
    border-bottom:none;margin-bottom:0;
  }
  .tab-bar-wrap.open .tab-bar{max-height:500px;}

  .vnav-wrap .admin-vnav,
  .vnav-wrap .sp-nav,
  .vnav-wrap .cu-nav{
    max-height:0;overflow:hidden;transition:max-height .28s ease;
    border-bottom:none;
  }
  .vnav-wrap.open .admin-vnav,
  .vnav-wrap.open .sp-nav,
  .vnav-wrap.open .cu-nav{max-height:600px;}

  /* Content peek — small label under collapsed nav indicating content exists */
  .tab-content-peek{
    display:block;font-size:12px;color:var(--text-muted);
    padding:4px 0 8px;
  }
  .tab-bar-wrap.open .tab-content-peek,
  .vnav-wrap.open .tab-content-peek{display:none;}
}

/* Find Users */
.find-ph {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 20px;
    flex-wrap: wrap;
    gap: 10px;
}

.find-back {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 13px;
    color: var(--text-secondary);
    text-decoration: none;
    padding: 5px 12px;
    border: 1px solid var(--card-border);
    border-radius: 6px;
    background: var(--white);
    cursor: pointer;
}

    .find-back:hover {
        background: var(--body-bg);
    }

.find-bc {
    font-size: 13px;
    color: var(--text-secondary);
    display: flex;
    align-items: center;
    gap: 4px;
}

    .find-bc svg {
        color: var(--text-muted);
    }

.find-bc-sep {
    color: var(--text-muted);
}

.find-bc-cur {
    color: var(--text-dark);
    font-weight: 500;
}

.find-header-right {
    display: flex;
    align-items: center;
    gap: 10px;
}

/* ── Top navigation (catalog.html reference) — shared tokens ── */
#top-bar {
  --tn-brand: #4f46e5;
  --tn-brand-dark: #3730a3;
  --tn-text: #0f172a;
  --tn-text-secondary: #374151;
  --tn-text-muted: #6b7280;
  --tn-border: #c8d0df;
  --tn-bg: #ffffff;
  --tn-hover-bg: #f0f2f8;
  --tn-height: 64px;
  --tn-inner-max: 1560px;
  --tn-inner-pad: 24px;
  --tn-danger: #ef4444;
}

/* Student-only top header */
.student-topnav {
  --student-nav-bg: var(--tn-bg);
  --student-nav-border: var(--tn-border);
  --student-nav-text: var(--tn-text);
  --student-nav-text-muted: var(--tn-text-muted);
  --student-nav-hover-bg: var(--tn-hover-bg);
  --student-nav-active-text: var(--tn-brand);
  background: var(--student-nav-bg);
  color: var(--student-nav-text);
  border-bottom: 1px solid var(--student-nav-border);
  min-height: var(--tn-height);
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.08);
  position: sticky;
  top: 0;
  z-index: 90;
}
.student-topnav__inner,
#top-bar .app-header .app-header__inner {
  box-sizing: border-box;
  display: flex;
  align-items: center;
  gap: 0;
  min-height: var(--tn-height);
  height: 100%;
  width: 100%;
  max-width: var(--tn-inner-max);
  margin-inline: auto;
  padding-inline: var(--tn-inner-pad);
  overflow: visible;
}
.student-topnav__inner {
  align-items: center;
  gap: 0;
}
.student-topnav__nav {
  align-self: stretch;
}
#top-bar .app-header .app-header__nav {
  align-self: stretch;
}
.student-topnav__brand,
#top-bar .app-header .app-header__brand {
  display: flex;
  align-items: center;
  text-decoration: none;
  margin-inline-end: 12px;
  flex-shrink: 0;
}
.student-topnav__brand-logo,
#top-bar .app-header .app-header__brand-logo {
  max-height: 34px;
  width: auto;
  max-width: 180px;
  object-fit: contain;
}
.student-topnav__flex-spacer {
  flex: 0 0 0;
  width: 0;
  min-width: 0;
  overflow: hidden;
}
.student-topnav__nav,
#top-bar .app-header .app-header__nav {
  display: flex;
  align-items: stretch;
  gap: 0;
  flex: 1 1 auto;
  min-width: 0;
  max-width: 100%;
  overflow-x: auto;
  overflow-y: visible;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
}
.student-topnav__nav::-webkit-scrollbar,
#top-bar .app-header .app-header__nav::-webkit-scrollbar {
  display: none;
}
.student-topnav__link,
#top-bar .app-header .app-header__nav-link {
  color: var(--tn-text-secondary);
  text-decoration: none;
  font-size: 13px;
  font-weight: 500;
  padding: 0 13px;
  min-height: var(--tn-height);
  border-bottom: 3px solid transparent;
  border-radius: 0;
  white-space: nowrap;
  flex-shrink: 0;
  overflow: visible;
  transition: color 0.15s ease, border-color 0.15s ease, background 0.15s ease;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.student-topnav__link i,
#top-bar .app-header .app-header__nav-link i {
  font-size: 15px;
  line-height: 1;
  color: inherit;
  opacity: 0.7;
}
.student-topnav__link:hover,
#top-bar .app-header .app-header__nav-link:hover {
  color: var(--tn-brand);
  text-decoration: none;
  background: var(--tn-hover-bg);
  border-bottom-color: var(--tn-brand);
}
.student-topnav__link:hover i,
#top-bar .app-header .app-header__nav-link:hover i {
  opacity: 1;
}
.student-topnav__link.is-active,
#top-bar .app-header .app-header__nav-link--active {
  color: var(--tn-brand);
  border-bottom-color: var(--tn-brand);
  background: transparent;
  font-weight: 600;
}
.student-topnav__link.is-active i,
#top-bar .app-header .app-header__nav-link--active i {
  opacity: 1;
}
.student-topnav__actions,
#top-bar .app-header .app-header__actions {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-shrink: 0;
  margin-inline-start: auto;
}
.student-topnav__language,
#top-bar .app-header .student-topnav__language {
  position: relative;
  display: flex;
  align-items: center;
  flex-shrink: 0;
  padding: 0;
  border: none;
  background: transparent;
}

.sl-lang-switcher__btn {
  display: flex;
  align-items: center;
  gap: 5px;
  padding: 12px 10px;
  background: transparent;
  border: 1.5px solid var(--tn-border);
  border-radius: 8px;
  color: var(--tn-text-secondary);
  font-size: 12px;
  font-weight: 700;
  line-height: 1;
  cursor: pointer;
  transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease;
  letter-spacing: 0.03em;
  font-family: inherit;
}

.sl-lang-switcher__btn:hover {
  background: var(--tn-hover-bg);
  border-color: var(--brand, #4f46e5);
  color: var(--tn-text);
}

.sl-lang-switcher__btn:disabled {
  opacity: 0.6;
  cursor: wait;
}

.sl-lang-switcher__btn svg {
  flex-shrink: 0;
}

.sl-lang-switcher__code {
  min-width: 22px;
  text-align: center;
}

.sl-lang-switcher__chevron {
  font-size: 16px;
  color: var(--tn-text-secondary, #565b72);
  line-height: 1;
  flex-shrink: 0;
}

.sl-lang-switcher__menu {
  position: absolute;
  top: calc(100% + 6px);
  inset-inline-end: 0;
  background: #fff;
  border: 1px solid var(--tn-border, #e2e8f0);
  border-radius: 10px;
  box-shadow: 0 4px 14px rgba(15, 23, 42, 0.08);
  min-width: 170px;
  overflow: hidden;
  z-index: 500;
}

.sl-lang-switcher__menu[hidden] {
  display: none;
}

.sl-lang-switcher__option {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  padding: 10px 14px;
  background: transparent;
  border: none;
  font-size: 13px;
  color: var(--tn-text-secondary, #565b72);
  cursor: pointer;
  text-align: start;
  transition: background 0.15s ease;
  font-family: inherit;
}

.sl-lang-switcher__option:hover {
  background: var(--tn-hover-bg, #f0f2f8);
}

.sl-lang-switcher__option--active {
  color: var(--brand, #4f46e5);
  font-weight: 600;
}

.sl-lang-switcher__option--active::after {
  content: '\2713';
  margin-inline-start: auto;
  color: var(--brand, #4f46e5);
}

[dir="rtl"] .sl-lang-switcher__menu {
  inset-inline-end: 0;
  inset-inline-start: auto;
}
.student-topnav__icon,
.student-topnav__icon-btn {
  width: 38px;
  height: 38px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 8px;
  color: var(--tn-text-secondary);
  border: none;
  background: none;
  position: relative;
  text-decoration: none;
  transition: background 0.15s ease, color 0.15s ease;
  cursor: pointer;
}
.student-topnav__icon i,
.student-topnav__icon-btn i {
  font-size: 20px;
  color: inherit;
  line-height: 1;
}
.student-topnav__icon:hover,
.student-topnav__icon-btn:hover {
  color: var(--tn-text);
  background: var(--tn-hover-bg);
  text-decoration: none;
}
.student-topnav__icon--notif:not(:has(.student-topnav__badge:not([style*="display: none"])))::after {
  content: "";
  position: absolute;
  top: 4px;
  right: 4px;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #ff4d6d;
  border: 1px solid var(--student-nav-bg);
}

.student-topnav__icon--cart:not(.has-cart-items)::after {
  display: none;
}

.student-topnav__badge {
  position: absolute;
  top: 4px;
  right: 4px;
  min-width: 16px;
  height: 16px;
  border-radius: 999px;
  padding: 0 4px;
  font-size: 9px;
  font-weight: 700;
  line-height: 16px;
  text-align: center;
  background: var(--tn-danger);
  color: #fff;
  border: 2px solid var(--tn-bg);
  z-index: 2;
}

.student-topnav__cart-badge {
  display: none;
  min-width: 16px;
  height: 16px;
  line-height: 16px;
  top: 4px;
  right: 4px;
  background: var(--tn-danger);
  border: 2px solid var(--tn-bg);
}

.student-topnav__icon--cart.has-cart-items .student-topnav__cart-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

/* App header (anonymous + admin) — same visual system as student-topnav */
#top-bar .app-header {
  --header-bg: var(--tn-bg);
  --header-border: var(--tn-border);
  --header-text: var(--tn-text);
  --header-text-muted: var(--tn-text-muted);
  --header-hover-bg: var(--tn-hover-bg);
  --header-active-text: var(--tn-brand);
  min-height: var(--tn-height);
  padding: 0;
  padding-inline: 0;
  background: var(--tn-bg);
  border-bottom: 1px solid var(--tn-border);
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.08);
  overflow: visible;
}

.app-header__actions .student-topnav__btn {
  border-radius: 8px;
}

.app-header__cart-btn {
  position: relative;
}

/* V2 header announcement control uses bx-bell; suppress legacy envelope glyph */
.app-header__actions #AnnouncementBadge::before {
  content: none;
  display: none;
}

.app-header__actions #AnnouncementBadge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  border: none;
  float: none;
  margin: 0;
  color: inherit;
  transform: none;
}

.app-header__actions #AnnouncementBadge:hover {
  transform: none;
}

.app-header__cart-badge {
  display: none;
  position: absolute;
  top: 4px;
  right: 4px;
  min-width: 16px;
  height: 16px;
  padding: 0 4px;
  border-radius: 999px;
  font-size: 9px;
  font-weight: 700;
  line-height: 16px;
  text-align: center;
  background: var(--tn-danger);
  color: #fff;
  border: 2px solid var(--tn-bg);
}

.app-header__cart-btn.has-cart-items .app-header__cart-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.student-topnav__btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  font-weight: 600;
  line-height: 1.2;
  border-radius: 18px;
  padding: 6px 14px;
  text-decoration: none;
  white-space: nowrap;
  border: 1px solid transparent;
  cursor: pointer;
  transition: background .2s ease, border-color .2s ease, color .2s ease, box-shadow .2s ease;
  box-shadow: none;
}
.student-topnav__btn--register {
  background: var(--tn-brand);
  color: #fff;
  border-color: var(--tn-brand);
}
.student-topnav__btn--register:hover,
.student-topnav__btn--register:focus {
  background: var(--tn-brand-dark);
  border-color: var(--tn-brand-dark);
  color: #fff;
  text-decoration: none;
  box-shadow: none;
}
.student-topnav__btn--login {
  background: var(--tn-bg);
  color: var(--tn-text);
  border-color: var(--tn-border);
}
.student-topnav__btn--login:hover,
.student-topnav__btn--login:focus {
  background: var(--tn-hover-bg);
  border-color: var(--tn-brand);
  color: var(--tn-text);
  text-decoration: none;
  box-shadow: none;
}
.student-topnav__user-wrap {
  position: relative;
  display: inline-flex;
  align-items: center;
  border-radius: 8px;
  transition: background 0.15s ease;
}
.student-topnav__user-wrap:hover,
.student-topnav__user-wrap:focus-within,
.student-topnav__user-wrap:has(.student-topnav__user.show),
.student-topnav__user-wrap:has(.app-header__user-btn[aria-expanded="true"]) {
  background: var(--tn-hover-bg);
}
.student-topnav__user,
#top-bar .app-header .app-header__user-btn {
  border: none;
  background: transparent;
  color: var(--tn-text);
  border-radius: 8px;
  padding: 4px 8px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  cursor: pointer;
  transition: color 0.15s ease;
}
.student-topnav__user-wrap:hover .student-topnav__user,
.student-topnav__user-wrap:focus-within .student-topnav__user,
.student-topnav__user-wrap:has(.student-topnav__user.show) .student-topnav__user,
#top-bar .app-header .student-topnav__user-wrap:hover .app-header__user-btn,
#top-bar .app-header .student-topnav__user-wrap:focus-within .app-header__user-btn {
  background: transparent;
  border-color: transparent;
  color: var(--tn-text);
}
.student-topnav__user:focus,
.student-topnav__user.show,
#top-bar .app-header .app-header__user-btn:focus,
#top-bar .app-header .app-header__user-btn[aria-expanded="true"] {
  background: transparent;
  border-color: transparent;
  color: var(--tn-text);
  box-shadow: none;
  outline: none;
}
.student-topnav__avatar,
#top-bar .app-header .app-header__user-btn .avatar,
#top-bar .app-header .app-header__user-btn .student-topnav__avatar {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  font-weight: 700;
  background: var(--tn-brand);
  color: #fff;
  flex-shrink: 0;
}
.student-topnav__name {
  font-size: 12px;
  font-weight: 600;
  color: var(--student-nav-text);
  max-width: 120px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.student-topnav__user-chevron { font-size: 16px; color: var(--student-nav-text-muted); line-height: 1; }
.student-topnav__user.dropdown-toggle::after { display: none; }
.student-topnav__menu.dropdown-menu {
  min-width: 240px;
  padding: 0;
  margin-top: 8px;
  border: 1px solid #e5e7eb;
  border-radius: 12px;
  box-shadow: 0 10px 28px rgba(15, 23, 42, 0.14), 0 2px 8px rgba(15, 23, 42, 0.08);
  overflow: hidden;
}
.student-topnav__menu-header {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 14px 16px;
  background: #f8f9ff;
}
.student-topnav__menu-avatar {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 13px;
  font-weight: 700;
  background: var(--tn-brand);
  color: #fff;
  flex-shrink: 0;
}
.student-topnav__menu-name {
  font-size: 13px;
  font-weight: 600;
  color: #111827;
  line-height: 1.3;
}
.student-topnav__menu-email {
  font-size: 11px;
  color: #6b7280;
  margin-top: 1px;
  line-height: 1.3;
  word-break: break-word;
}
.student-topnav__menu-divider {
  height: 1px;
  background: #f0f0f0;
  margin: 2px 0;
}
.student-topnav__menu-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 16px;
  font-size: 14px;
  font-weight: 500;
  color: #374151;
  text-decoration: none;
  transition: background .12s ease, color .12s ease;
}
.student-topnav__menu-item i {
  font-size: 17px;
  color: #9ca3af;
  flex-shrink: 0;
}
.student-topnav__menu-item:hover,
.student-topnav__menu-item:focus {
  background: #f3f4f6;
  color: #111827;
  text-decoration: none;
}
.student-topnav__menu-item:hover i,
.student-topnav__menu-item:focus i {
  color: #6b7280;
}
.student-topnav__menu-item--danger {
  color: #ef4444;
}
.student-topnav__menu-item--danger i {
  color: #ef4444;
}
.student-topnav__menu-item--danger:hover,
.student-topnav__menu-item--danger:focus {
  background: #fef2f2;
  color: #dc2626;
}
.student-topnav__menu-item--danger:hover i,
.student-topnav__menu-item--danger:focus i {
  color: #dc2626;
}

/* App-header user dropdown — match student menu card */
#top-bar .app-header #user-dropdown.student-topnav__menu {
  position: absolute;
  top: calc(100% + 8px);
  inset-inline-end: 0;
  min-width: 240px;
  padding: 0;
  margin: 0;
  border: 1px solid #e5e7eb;
  border-radius: 10px;
  box-shadow: 0 4px 24px rgba(0, 0, 0, 0.14), 0 1px 4px rgba(0, 0, 0, 0.08);
  background: #fff;
  z-index: 9999;
  overflow: hidden;
}
#top-bar .app-header #user-dropdown.student-topnav__menu[hidden] {
  display: none;
}
#top-bar .app-header #user-dropdown .student-topnav__menu-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 16px;
  font-size: 13px;
  color: #374151;
  text-decoration: none;
}
#top-bar .app-header #user-dropdown .student-topnav__menu-item:hover {
  background: #f5f5ff;
  color: var(--tn-brand);
}
#top-bar .app-header #user-dropdown .student-topnav__menu-item--danger {
  color: #dc2626;
}
#top-bar .app-header #user-dropdown .student-topnav__menu-item--danger:hover {
  background: #fff5f5;
  color: #dc2626;
}

html[dir="rtl"] .student-topnav__actions { margin-left: 0; margin-right: auto; }

@media (max-width: 991px) {
  .student-topnav__inner { padding-inline: 12px; }
  .student-topnav__name { display: none; }
  .student-topnav__user-chevron { display: none; }
}

.btn-find-create {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 13px;
    color: var(--primary);
    text-decoration: none;
    padding: 5px 14px;
    border: 1.5px solid var(--primary);
    border-radius: 6px;
    background: var(--white);
    font-weight: 500;
    cursor: pointer;
}

    .btn-find-create:hover {
        background: var(--primary-light);
    }

.btn-find-manage {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 13px;
    color: var(--text-secondary);
    text-decoration: none;
    padding: 5px 14px;
    border: 1px solid var(--card-border);
    border-radius: 6px;
    background: var(--white);
    cursor: pointer;
}

    .btn-find-manage:hover {
        background: var(--body-bg);
    }

.fc {
    background: var(--white);
    border: 1px solid var(--card-border);
    border-radius: var(--radius);
    padding: 18px 20px 12px;
    margin-bottom: 0;
    box-shadow: 0 1px 3px rgba(0,0,0,.04);
}

.fc-tb {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 10px;
    flex-wrap: wrap;
}

.fc-add {
    font-size: 13px;
    padding: 4px 10px;
    border: 1px solid var(--card-border);
    border-radius: 6px;
    background: var(--white);
    color: var(--text-secondary);
    min-width: 150px;
    height: 30px;
}

.fc-btn {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-size: 12px;
    padding: 3px 10px;
    border-radius: 5px;
    border: 1px solid var(--card-border);
    background: var(--white);
    color: var(--text-secondary);
    cursor: pointer;
    height: 26px;
}

    .fc-btn:hover {
        background: var(--body-bg);
    }

    .fc-btn.sv {
        color: #1a7a35;
        border-color: #b6dfbf;
    }

    .fc-btn.rm {
        color: #c0392b;
        border-color: #f5c6c3;
    }

.fr-row {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 7px 0;
    border-top: 1px solid var(--card-border);
}

.fr-lbl {
    font-size: 13px;
    color: var(--text-dark);
    min-width: 140px;
    font-weight: 500;
}

.fr-sel {
    font-size: 13px;
    padding: 3px 8px;
    border: 1px solid var(--card-border);
    border-radius: 5px;
    background: var(--white);
    height: 28px;
}

.fr-inp {
    flex: 1;
    font-size: 13px;
    padding: 3px 10px;
    border: 2px solid var(--primary);
    border-radius: 5px;
    height: 28px;
    outline: none;
    min-width: 0;
}

    .fr-inp.uf {
        border-color: var(--card-border);
    }

.fr-state {
    font-size: 13px;
    color: var(--text-secondary);
}

.fr-rmb {
    width: 18px;
    height: 18px;
    border-radius: 50%;
    border: 1.5px solid #e74c3c;
    background: none;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #e74c3c;
    font-size: 14px;
    padding: 0;
    flex-shrink: 0;
    line-height: 1;
}

.fc-acts {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 14px 0 2px;
}

.btn-srch {
    background: var(--primary);
    color: var(--white);
    border: none;
    border-radius: 6px;
    padding: 7px 24px;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
}

    .btn-srch:hover {
        opacity: .88;
    }

.btn-oopt {
    font-size: 13px;
    padding: 5px 12px;
    border: 1px solid var(--card-border);
    border-radius: 6px;
    background: var(--white);
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.res-section {
    margin-top: 16px;
}

.res-count {
    font-size: 12px;
    color: var(--text-secondary);
    margin-bottom: 10px;
    padding: 0 2px;
}
/* Find Users End*/