/*
 * SMK PATRIOT NUSANTARA — UNIFIED LIQUID GLASS UI SYSTEM
 * BUILD: unified-rebuild-v1
 * Rebuild layer. Loaded after page-level styles so every menu shares
 * the same material, typography, controls, spacing and responsive shell.
 * Backend/PHP logic is intentionally untouched by this stylesheet.
 */
:root{
  --ui-primary:var(--palette-primary,var(--primary-blue,var(--lg-blue,#0a84ff)));
  --ui-dark:var(--palette-dark,var(--dark-blue,var(--lg-blue-2,#007aff)));
  --ui-soft:var(--palette-soft,rgba(10,132,255,.085));
  --ui-border:var(--palette-border,rgba(10,132,255,.18));
  --ui-rgb:var(--palette-rgb,10,132,255);
  --ui-text:var(--text-dark,var(--lg-text,#172033));
  --ui-muted:var(--text-muted,var(--lg-muted,#687386));
  --ui-bg:#eef3f9;
  --ui-surface:rgba(255,255,255,.62);
  --ui-surface-strong:rgba(255,255,255,.76);
  --ui-surface-soft:rgba(255,255,255,.46);
  --ui-stroke:rgba(255,255,255,.76);
  --ui-shadow:0 22px 60px rgba(36,55,84,.11),0 4px 18px rgba(36,55,84,.06),inset 0 1px 0 rgba(255,255,255,.84);
  --ui-shadow-soft:0 10px 32px rgba(36,55,84,.075),inset 0 1px 0 rgba(255,255,255,.82);
  --ui-radius-xl:28px;
  --ui-radius-lg:22px;
  --ui-radius-md:18px;
  --ui-radius-sm:14px;
}

/* ------------------------------
   Base / typography
   ------------------------------ */
html{min-height:100%;scroll-behavior:smooth;}
html body{
  min-height:100vh!important;
  margin:0!important;
  color:var(--ui-text)!important;
  font-family:-apple-system,BlinkMacSystemFont,"SF Pro Display","SF Pro Text","Helvetica Neue",Inter,system-ui,sans-serif!important;
  background:
    radial-gradient(900px 520px at -8% -8%,rgba(var(--ui-rgb),.10),transparent 62%),
    radial-gradient(800px 500px at 108% 8%,rgba(52,199,89,.08),transparent 60%),
    radial-gradient(900px 580px at 55% 110%,rgba(120,90,255,.06),transparent 62%),
    linear-gradient(180deg,#f7faff 0%,#edf2f8 100%)!important;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}
html body::before,html body::after{pointer-events:none!important;}
html body p,
html body .main p,
html body .main .lead,
html body .main .small,
html body .main small,
html body .main .form-text,
html body .main .description,
html body .main .helper-text,
html body .main .small-note{
  color:var(--ui-muted)!important;
}
html body .main h1,
html body .main h2,
html body .main h3,
html body .main h4,
html body .main h5,
html body .main h6,
html body .main .page-title,
html body .main .panel-title,
html body .main .section-title,
html body .main .card-title,
html body .main .fw-bold{
  color:var(--ui-text)!important;
}
html body .main a:not(.btn):not(.menu-item):not(.dropdown-item){color:var(--ui-primary);}
html body .main .text-body,
html body .main .text-dark{color:var(--ui-text)!important;}
html body .main .text-muted{color:var(--ui-muted)!important;}

/* Do not let legacy utility white/black text disappear on light glass.
   Colored semantic surfaces remain white by explicit rules below. */
html body .main .text-white:not(.btn):not(.badge):not(.alert):not(.bg-primary):not(.bg-success):not(.bg-danger):not(.bg-warning):not(.bg-info):not(.bg-dark),
html body .main .text-light:not(.btn):not(.badge):not(.alert):not(.bg-primary):not(.bg-success):not(.bg-danger):not(.bg-warning):not(.bg-info):not(.bg-dark){
  color:var(--ui-text)!important;
}
html body .main .bg-primary,
html body .main .bg-success,
html body .main .bg-danger,
html body .main .bg-warning,
html body .main .bg-info,
html body .main .bg-dark{
  color:#fff!important;
}
html body .main .bg-primary *,
html body .main .bg-success *,
html body .main .bg-danger *,
html body .main .bg-warning *,
html body .main .bg-info *,
html body .main .bg-dark *{color:inherit;}

/* ------------------------------
   Global Liquid Glass shell
   ------------------------------ */
html body .top-header,
html body .sidebar{
  background:rgba(255,255,255,.58)!important;
  border:1px solid var(--ui-stroke)!important;
  box-shadow:var(--ui-shadow-soft)!important;
  -webkit-backdrop-filter:blur(28px) saturate(175%)!important;
  backdrop-filter:blur(28px) saturate(175%)!important;
}
html body .top-header{
  top:10px!important;
  left:292px!important;
  right:12px!important;
  width:auto!important;
  height:68px!important;
  min-height:68px!important;
  padding:0 18px!important;
  border-radius:24px!important;
  border-bottom:1px solid var(--ui-stroke)!important;
  z-index:2000!important;
  box-sizing:border-box!important;
}
html body .sidebar{
  top:10px!important;
  left:10px!important;
  bottom:10px!important;
  width:264px!important;
  height:auto!important;
  padding:14px 12px!important;
  border-radius:28px!important;
  box-sizing:border-box!important;
  overflow:hidden!important;
  z-index:2200!important;
}
html body .main{
  margin-left:280px!important;
  padding:98px 30px 34px!important;
  min-height:100vh!important;
  max-width:100%!important;
  box-sizing:border-box!important;
  color:var(--ui-text)!important;
}
html body .sidebar-content-scroll{padding-right:4px!important;}
html body .sidebar-content-scroll::-webkit-scrollbar{width:5px!important;}
html body .sidebar-content-scroll::-webkit-scrollbar-thumb{background:rgba(118,137,163,.24)!important;border-radius:999px!important;}
html body .sidebar-edge-toggle{
  left:266px!important;
  width:28px!important;
  height:56px!important;
  border-radius:0 16px 16px 0!important;
  background:rgba(255,255,255,.58)!important;
  border:1px solid var(--ui-stroke)!important;
  box-shadow:var(--ui-shadow-soft)!important;
  color:var(--ui-muted)!important;
}
html body.sidebar-collapsed .sidebar{transform:translateX(-112%)!important;}
html body.sidebar-collapsed .top-header{left:12px!important;}
html body.sidebar-collapsed .main{margin-left:0!important;}
html body.sidebar-collapsed .sidebar-edge-toggle{left:0!important;}

html body .brand .logo,
html body .academic-year-sidebar,
html body .sidebar-footer-account,
html body .theme-palette-bubble,
html body .header-search,
html body .header-search input,
html body .icon-btn{
  background:rgba(255,255,255,.46)!important;
  border:1px solid rgba(255,255,255,.72)!important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.84),0 8px 24px rgba(36,55,84,.05)!important;
  -webkit-backdrop-filter:blur(18px) saturate(150%)!important;
  backdrop-filter:blur(18px) saturate(150%)!important;
}
html body .brand{padding:3px 2px 6px!important;}
html body .brand .logo{width:42px!important;height:42px!important;border-radius:15px!important;}
html body .brand img{width:27px!important;height:27px!important;}
html body .brand strong{color:var(--ui-text)!important;font-size:12px!important;letter-spacing:-.25px!important;}
html body .academic-year-sidebar{border-radius:18px!important;color:var(--ui-text)!important;}
html body .header-title{color:var(--ui-dark)!important;}
html body .icon-btn{color:var(--ui-text)!important;}
html body .icon-btn:hover{background:var(--ui-primary)!important;border-color:transparent!important;color:#fff!important;}
html body .icon-btn:hover svg{stroke:#fff!important;}

html body .menu-item{
  margin:3px 0!important;
  padding:11px 12px!important;
  min-height:42px!important;
  border-radius:15px!important;
  border:1px solid transparent!important;
  color:#566174!important;
  font-weight:650!important;
  transition:background .18s ease,transform .18s ease,box-shadow .18s ease,color .18s ease!important;
}
html body .menu-item i{color:inherit!important;}
html body .menu-item:hover{
  background:rgba(255,255,255,.66)!important;
  color:var(--ui-primary)!important;
  transform:translateX(2px)!important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.86),0 7px 20px rgba(36,55,84,.05)!important;
}
html body .menu-item.active{
  background:linear-gradient(135deg,var(--ui-primary),var(--ui-dark))!important;
  border-color:rgba(255,255,255,.34)!important;
  color:#fff!important;
  box-shadow:0 12px 26px rgba(var(--ui-rgb),.22),inset 0 1px 0 rgba(255,255,255,.30)!important;
  transform:none!important;
}
html body .menu-item.active i{color:#fff!important;}
html body .sidebar-submenu{padding-left:7px!important;}
html body .sidebar-submenu .menu-item{font-size:12px!important;padding:9px 11px!important;}

/* ------------------------------
   Surfaces / cards / panels
   ------------------------------ */
html body .main .page-card,
html body .main .panel,
html body .main .card,
html body .main .glass-card,
html body .main .glass-panel,
html body .main .surface,
html body .main .content-card,
html body .main .dashboard-card,
html body .main .profile-card,
html body .main .info-card,
html body .main .widget,
html body .main .list-card,
html body .main .stat-card,
html body .main .option,
html body .main .hero,
html body .main .filter,
html body .main .table-card,
html body .main .table-wrapper,
html body .main .input-card,
html body .main .section-card,
html body .main .export-card,
html body .main .export-hero,
html body .main .export-security{
  background:var(--ui-surface)!important;
  border:1px solid var(--ui-border)!important;
  border-radius:var(--ui-radius-lg)!important;
  box-shadow:var(--ui-shadow)!important;
  color:var(--ui-text)!important;
  -webkit-backdrop-filter:blur(24px) saturate(170%)!important;
  backdrop-filter:blur(24px) saturate(170%)!important;
}
html body .main .page-card,
html body .main .hero,
html body .main .export-hero{border-radius:var(--ui-radius-xl)!important;}
html body .main .panel::before,
html body .main .card::before,
html body .main .glass-card::before{background:linear-gradient(90deg,transparent,rgba(255,255,255,.88),transparent)!important;}
html body .main .card-header,
html body .main .card-footer,
html body .main .panel-header{
  background:rgba(255,255,255,.22)!important;
  border-color:var(--ui-border)!important;
  color:var(--ui-text)!important;
}
html body .main .page-card .text-muted,
html body .main .panel .text-muted,
html body .main .card .text-muted{color:var(--ui-muted)!important;}

/* Bootstrap / legacy surfaces */
html body .main .bg-white,
html body .main .bg-light,
html body .main .bg-body,
html body .main .dropdown-menu,
html body .main .list-group,
html body .main .list-group-item,
html body .main .accordion-item,
html body .main .popover,
html body .main .offcanvas,
html body .main .toast,
html body .main .toast-header,
html body .main .input-group-text,
html body .main .nav-tabs,
html body .main .table-responsive,
html body .main .alert,
html body .main .pagination{
  background:var(--ui-surface-soft)!important;
  border-color:var(--ui-border)!important;
  color:var(--ui-text)!important;
  -webkit-backdrop-filter:blur(20px) saturate(155%)!important;
  backdrop-filter:blur(20px) saturate(155%)!important;
}
html body .main .dropdown-menu{padding:8px!important;border-radius:18px!important;box-shadow:var(--ui-shadow)!important;}
html body .main .dropdown-item{color:var(--ui-text)!important;border-radius:12px!important;padding:9px 12px!important;}
html body .main .dropdown-item:hover,
html body .main .dropdown-item:focus{background:var(--ui-soft)!important;color:var(--ui-primary)!important;}
html body .main .list-group{overflow:hidden!important;border-radius:18px!important;}
html body .main .table-responsive{border-radius:20px!important;box-shadow:var(--ui-shadow-soft)!important;overflow:auto!important;}

/* Rebuild aliases: legacy page-specific cards/panels now use the same material.
   Icon-only subcomponents are excluded so their compact treatments survive. */
html body .main [class*="card"]:not([class*="icon"]):not(.card-header):not(.card-footer),
html body .main [class*="panel"]:not([class*="heading"]):not([class*="icon"]),
html body .main [class*="surface"]{
  background:var(--ui-surface)!important;
  border-color:var(--ui-border)!important;
  color:var(--ui-text)!important;
  box-shadow:var(--ui-shadow-soft)!important;
  -webkit-backdrop-filter:blur(22px) saturate(165%)!important;
  backdrop-filter:blur(22px) saturate(165%)!important;
}
html body .main [class*="card"]:not([class*="icon"]) h1,
html body .main [class*="card"]:not([class*="icon"]) h2,
html body .main [class*="card"]:not([class*="icon"]) h3,
html body .main [class*="card"]:not([class*="icon"]) h4,
html body .main [class*="card"]:not([class*="icon"]) h5,
html body .main [class*="card"]:not([class*="icon"]) h6,
html body .main [class*="panel"]:not([class*="heading"]):not([class*="icon"]) h1,
html body .main [class*="panel"]:not([class*="heading"]):not([class*="icon"]) h2,
html body .main [class*="panel"]:not([class*="heading"]):not([class*="icon"]) h3,
html body .main [class*="panel"]:not([class*="heading"]):not([class*="icon"]) h4,
html body .main [class*="panel"]:not([class*="heading"]):not([class*="icon"]) h5,
html body .main [class*="panel"]:not([class*="heading"]):not([class*="icon"]) h6{
  color:var(--ui-text)!important;
}
html body .main [class*="card"]:not([class*="icon"]) .text-muted,
html body .main [class*="panel"]:not([class*="heading"]):not([class*="icon"]) .text-muted{color:var(--ui-muted)!important;}

/* ------------------------------
   Forms / tables / actions
   ------------------------------ */
html body .main label,
html body .main .form-label,
html body .main .form-check-label{color:var(--ui-text)!important;font-weight:650;}
html body .main .form-control,
html body .main .form-select,
html body .main select,
html body .main textarea,
html body .main input[type="text"],
html body .main input[type="search"],
html body .main input[type="email"],
html body .main input[type="password"],
html body .main input[type="number"],
html body .main input[type="date"],
html body .main input[type="time"],
html body .main input[type="datetime-local"],
html body .main input[type="file"]{
  min-height:44px!important;
  border:1px solid rgba(118,137,163,.18)!important;
  border-radius:14px!important;
  background:rgba(255,255,255,.56)!important;
  color:var(--ui-text)!important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.80),0 4px 14px rgba(36,55,84,.03)!important;
  outline:none!important;
}
html body .main .form-control:focus,
html body .main .form-select:focus,
html body .main select:focus,
html body .main textarea:focus,
html body .main input:not([type="checkbox"]):not([type="radio"]):focus{
  border-color:rgba(var(--ui-rgb),.48)!important;
  background:rgba(255,255,255,.72)!important;
  box-shadow:0 0 0 4px rgba(var(--ui-rgb),.10),inset 0 1px 0 rgba(255,255,255,.90)!important;
}
html body .main .form-control::placeholder,
html body .main ::placeholder{color:#97a3b3!important;opacity:1!important;}
html body .main .input-group-text{border-color:var(--ui-border)!important;color:var(--ui-muted)!important;}
html body .main .form-check-input{border-color:rgba(118,137,163,.28)!important;background-color:rgba(255,255,255,.72)!important;}
html body .main .form-check-input:checked{background-color:var(--ui-primary)!important;border-color:var(--ui-primary)!important;}

html body .main .table,
html body .main .table td,
html body .main .table th{color:var(--ui-text)!important;border-color:var(--ui-border)!important;}
html body .main .table thead th,
html body .main .table thead.bg-primary th{
  background:var(--ui-soft)!important;
  color:var(--ui-primary)!important;
  font-weight:800!important;
}
html body .main .table tbody tr:hover{background:rgba(var(--ui-rgb),.035)!important;}
html body .main .table-striped>tbody>tr:nth-of-type(odd)>*{--bs-table-accent-bg:rgba(var(--ui-rgb),.022)!important;background-color:rgba(var(--ui-rgb),.022)!important;}

html body .main .btn{
  min-height:42px!important;
  padding:.62rem 1rem!important;
  border-radius:13px!important;
  border:1px solid rgba(255,255,255,.50)!important;
  font-weight:750!important;
  letter-spacing:-.01em!important;
  box-shadow:0 8px 20px rgba(36,55,84,.07),inset 0 1px 0 rgba(255,255,255,.36)!important;
  transition:transform .15s ease,filter .15s ease,box-shadow .15s ease!important;
}
html body .main .btn:hover{transform:translateY(-1px)!important;filter:saturate(1.03)!important;}
html body .main .btn:active{transform:translateY(0) scale(.985)!important;}
html body .main .btn-primary,
html body .main .btn-success,
html body .main .btn-info,
html body .main .btn-dark,
html body .main .btn-blue-custom,
html body .main .btn-primary-custom,
html body .main .btn-glass-primary,
html body .main .btn-premium,
html body .main .btn-custom.btn-blue,
html body .main .btn-action-primary{
  background:linear-gradient(135deg,var(--ui-primary),var(--ui-dark))!important;
  border-color:transparent!important;
  color:#fff!important;
  box-shadow:0 12px 24px rgba(var(--ui-rgb),.19),inset 0 1px 0 rgba(255,255,255,.30)!important;
}
html body .main .btn-success{--bs-btn-bg:var(--ui-primary)!important;}
html body .main .btn-danger{background:linear-gradient(135deg,#ef4444,#dc2626)!important;border-color:transparent!important;color:#fff!important;}
html body .main .btn-warning{background:linear-gradient(135deg,#f59e0b,#d97706)!important;border-color:transparent!important;color:#fff!important;}
html body .main .btn-outline-primary,
html body .main .btn-outline-success,
html body .main .btn-outline-info,
html body .main .btn-outline-dark,
html body .main .btn-outline-blue{
  color:var(--ui-primary)!important;
  border-color:var(--ui-border)!important;
  background:rgba(255,255,255,.28)!important;
}
html body .main .btn-outline-primary:hover,
html body .main .btn-outline-success:hover,
html body .main .btn-outline-info:hover,
html body .main .btn-outline-dark:hover,
html body .main .btn-outline-blue:hover{background:var(--ui-primary)!important;color:#fff!important;}

html body .main .btn-action-edit,
html body .main .btn-edit-mapel,
html body .main .action-edit,
html body .main .btn-action-icon.edit,
html body .main .btn-edit-dana,
html body .main .btn-edit{
  color:var(--ui-primary)!important;
  background:var(--ui-soft)!important;
  border:1px solid var(--ui-border)!important;
}
html body .main .btn-action-edit:hover,
html body .main .btn-edit-mapel:hover,
html body .main .action-edit:hover,
html body .main .btn-action-icon.edit:hover,
html body .main .btn-edit-dana:hover,
html body .main .btn-edit:hover{color:#fff!important;background:linear-gradient(135deg,var(--ui-primary),var(--ui-dark))!important;border-color:transparent!important;}
html body .main .btn-action-icon,
html body .main .icon-btn-action,
html body .main .action-btn,
html body .main .btn-hapus,
html body .main .btn-danger-icon{
  min-width:36px!important;
  min-height:36px!important;
  padding:.45rem .62rem!important;
  border-radius:12px!important;
  display:inline-flex!important;
  align-items:center!important;
  justify-content:center!important;
}
html body .main .btn-hapus,
html body .main .btn-danger-icon,
html body .main .icon-btn-action.text-danger{
  color:#dc2626!important;
  background:rgba(220,38,38,.07)!important;
  border:1px solid rgba(220,38,38,.16)!important;
}
html body .main .btn-hapus:hover,
html body .main .btn-danger-icon:hover,
html body .main .icon-btn-action.text-danger:hover{background:#dc2626!important;color:#fff!important;border-color:transparent!important;}

html body .main .pagination .page-link{
  border-color:var(--ui-border)!important;
  color:var(--ui-primary)!important;
  background:rgba(255,255,255,.44)!important;
  border-radius:10px!important;
  margin:0 2px!important;
}
html body .main .pagination .page-item.active .page-link{
  background:linear-gradient(135deg,var(--ui-primary),var(--ui-dark))!important;
  color:#fff!important;
  border-color:transparent!important;
}

/* ------------------------------
   Modals / overlays / SweetAlert
   ------------------------------ */
html body .modal-content,
html body .offcanvas,
html body .toast,
html body .toast-header,
html body .popover,
html body .alert{
  color:var(--ui-text)!important;
  background:var(--ui-surface-strong)!important;
  border:1px solid var(--ui-border)!important;
  border-radius:22px!important;
  box-shadow:var(--ui-shadow)!important;
  -webkit-backdrop-filter:blur(28px) saturate(175%)!important;
  backdrop-filter:blur(28px) saturate(175%)!important;
}
html body .modal-header,
html body .modal-footer{border-color:var(--ui-border)!important;}
html body .modal-title{color:var(--ui-text)!important;}
html body .modal-body,
html body .modal-content .text-muted{color:var(--ui-text)!important;}
html body .modal-backdrop.show{opacity:.30!important;backdrop-filter:blur(4px);}

/* SweetAlert inherits the active palette. */
html body .swal2-popup{font-family:inherit!important;}
html body .swal2-popup .swal2-title{color:var(--ui-text)!important;}
html body .swal2-popup .swal2-html-container,
html body .swal2-popup .swal2-content{color:var(--ui-muted)!important;}
html body .swal2-popup .swal2-confirm{background:linear-gradient(135deg,var(--ui-primary),var(--ui-dark))!important;}

/* ------------------------------
   Utility components commonly used by legacy pages
   ------------------------------ */
html body .main .badge-primary,
html body .main .badge.bg-primary{background:linear-gradient(135deg,var(--ui-primary),var(--ui-dark))!important;color:#fff!important;}
html body .main .text-primary{color:var(--ui-primary)!important;}
html body .main .border,
html body .main .border-top,
html body .main .border-bottom,
html body .main .border-start,
html body .main .border-end{border-color:var(--ui-border)!important;}
html body .main .shadow,
html body .main .shadow-sm,
html body .main .shadow-lg{box-shadow:var(--ui-shadow-soft)!important;}
html body .main .hr,
html body .main hr{border-color:var(--ui-border)!important;opacity:1!important;}
html body .main img{max-width:100%;}
html body .main .overflow-auto,
html body .main .table-responsive{scrollbar-width:thin;}

/* Legacy inline color rescue on normal text only. */
html body .main :not(.btn):not(.badge):not(.alert):not(.bg-primary):not(.bg-success):not(.bg-danger):not(.bg-warning):not(.bg-info):not(.bg-dark)[style*="color:#fff"],
html body .main :not(.btn):not(.badge):not(.alert):not(.bg-primary):not(.bg-success):not(.bg-danger):not(.bg-warning):not(.bg-info):not(.bg-dark)[style*="color: #fff"],
html body .main :not(.btn):not(.badge):not(.alert):not(.bg-primary):not(.bg-success):not(.bg-danger):not(.bg-warning):not(.bg-info):not(.bg-dark)[style*="color:#ffffff"],
html body .main :not(.btn):not(.badge):not(.alert):not(.bg-primary):not(.bg-success):not(.bg-danger):not(.bg-warning):not(.bg-info):not(.bg-dark)[style*="color: #ffffff"],
html body .main :not(.btn):not(.badge):not(.alert):not(.bg-primary):not(.bg-success):not(.bg-danger):not(.bg-warning):not(.bg-info):not(.bg-dark)[style*="color:white"],
html body .main :not(.btn):not(.badge):not(.alert):not(.bg-primary):not(.bg-success):not(.bg-danger):not(.bg-warning):not(.bg-info):not(.bg-dark)[style*="color: white"]{
  color:var(--ui-text)!important;
}

/* ------------------------------
   Mobile rebuild — one rhythm for every menu
   ------------------------------ */
@media(max-width:992px){
  html,body{overflow-x:hidden!important;}
  html body .top-header{
    position:fixed!important;
    top:0!important;
    left:0!important;
    right:0!important;
    width:100%!important;
    height:64px!important;
    min-height:64px!important;
    padding:0 12px!important;
    border-radius:0 0 20px 20px!important;
    gap:8px!important;
    box-sizing:border-box!important;
  }
  html body .top-header .header-left{min-width:0!important;flex:1 1 auto!important;gap:8px!important;overflow:hidden!important;}
  html body .top-header .header-title{flex:1 1 auto!important;min-width:0!important;max-width:none!important;width:auto!important;font-size:12px!important;line-height:1.15!important;white-space:nowrap!important;overflow:hidden!important;text-overflow:ellipsis!important;}
  html body .top-header .header-right{display:flex!important;align-items:center!important;justify-content:flex-end!important;gap:6px!important;flex:0 0 auto!important;min-width:0!important;}
  html body .top-header .icon-btn{width:38px!important;height:38px!important;min-width:38px!important;min-height:38px!important;padding:0!important;border-radius:12px!important;}
  html body .top-header .icon-btn .icon{width:17px!important;height:17px!important;}

  html body .main{
    margin-left:0!important;
    margin-top:64px!important;
    padding:14px 14px 28px!important;
    padding-top:14px!important;
    width:100%!important;
  }
  html body .main>.container-fluid,
  html body .main>.container,
  html body .main>.container-sm,
  html body .main>.container-md,
  html body .main>.container-lg,
  html body .main>.container-xl,
  html body .main>.container-xxl{padding-left:0!important;padding-right:0!important;}

  html body .sidebar{
    top:0!important;
    bottom:0!important;
    left:0!important;
    width:min(280px,88vw)!important;
    height:100dvh!important;
    max-height:100dvh!important;
    padding:16px 12px!important;
    border-radius:0 24px 24px 0!important;
  }
  html body .sidebar-overlay.show{background:rgba(15,23,42,.28)!important;backdrop-filter:blur(5px) saturate(120%)!important;-webkit-backdrop-filter:blur(5px) saturate(120%)!important;}

  html body .main .page-card,
  html body .main .hero,
  html body .main .export-hero{border-radius:22px!important;}
  html body .main .panel,
  html body .main .card,
  html body .main .glass-card,
  html body .main .filter,
  html body .main .option,
  html body .main .export-card{border-radius:18px!important;}
  html body .main .row{--bs-gutter-x:1rem;--bs-gutter-y:1rem;}
  html body .main .btn{min-height:42px!important;}
}

@media(max-width:576px){
  html body .top-header{padding:0 10px!important;}
  html body .top-header .header-left{gap:7px!important;}
  html body .top-header .header-right{gap:5px!important;}
  html body .top-header .icon-btn{width:36px!important;height:36px!important;min-width:36px!important;min-height:36px!important;border-radius:11px!important;}
  html body .main{margin-top:64px!important;padding:14px 12px 24px!important;padding-top:14px!important;}
  html body .main .page-card,
  html body .main .panel,
  html body .main .card,
  html body .main .glass-card,
  html body .main .filter,
  html body .main .option,
  html body .main .export-card{box-shadow:0 15px 36px rgba(36,55,84,.08),inset 0 1px 0 rgba(255,255,255,.82)!important;}
}
@media(max-width:360px){
  html body .top-header .icon-btn{width:34px!important;height:34px!important;min-width:34px!important;min-height:34px!important;}
  html body .top-header .header-title{font-size:11.5px!important;}
  html body .main{padding-left:10px!important;padding-right:10px!important;}
}

/* Dark mode */
html body.dark,
html body[data-theme="dark"]{
  color-scheme:dark;
  color:var(--ui-text,#f8fafc)!important;
  background:
    radial-gradient(900px 520px at -8% -8%,rgba(var(--ui-rgb),.13),transparent 62%),
    radial-gradient(800px 500px at 108% 8%,rgba(52,199,89,.05),transparent 60%),
    linear-gradient(180deg,#08111f 0%,#020617 100%)!important;
}
html body.dark .top-header,
html body.dark .sidebar,
html body[data-theme="dark"] .top-header,
html body[data-theme="dark"] .sidebar{
  background:rgba(15,23,42,.72)!important;
  border-color:rgba(255,255,255,.10)!important;
}
html body.dark .main .page-card,
html body.dark .main .panel,
html body.dark .main .card,
html body.dark .main .glass-card,
html body.dark .main .surface,
html body.dark .main .content-card,
html body.dark .main .dashboard-card,
html body.dark .main .profile-card,
html body.dark .main .info-card,
html body.dark .main .widget,
html body.dark .main .list-card,
html body.dark .main .stat-card,
html body.dark .main .option,
html body.dark .main .hero,
html body.dark .main .filter,
html body.dark .main .table-card,
html body.dark .main .table-wrapper,
html body.dark .main .input-card,
html body.dark .main .section-card,
html body.dark .main .export-card,
html body.dark .main .export-hero,
html body.dark .main .export-security,
html body[data-theme="dark"] .main .page-card,
html body[data-theme="dark"] .main .panel,
html body[data-theme="dark"] .main .card,
html body[data-theme="dark"] .main .glass-card,
html body[data-theme="dark"] .main .surface,
html body[data-theme="dark"] .main .content-card,
html body[data-theme="dark"] .main .dashboard-card,
html body[data-theme="dark"] .main .profile-card,
html body[data-theme="dark"] .main .info-card,
html body[data-theme="dark"] .main .widget,
html body[data-theme="dark"] .main .list-card,
html body[data-theme="dark"] .main .stat-card,
html body[data-theme="dark"] .main .option,
html body[data-theme="dark"] .main .hero,
html body[data-theme="dark"] .main .filter,
html body[data-theme="dark"] .main .table-card,
html body[data-theme="dark"] .main .table-wrapper,
html body[data-theme="dark"] .main .input-card,
html body[data-theme="dark"] .main .section-card,
html body[data-theme="dark"] .main .export-card,
html body[data-theme="dark"] .main .export-hero,
html body[data-theme="dark"] .main .export-security{
  background:rgba(15,23,42,.72)!important;
  border-color:rgba(255,255,255,.10)!important;
  color:#f8fafc!important;
}
html body.dark .main h1,
html body.dark .main h2,
html body.dark .main h3,
html body.dark .main h4,
html body.dark .main h5,
html body.dark .main h6,
html body.dark .main label,
html body.dark .main .form-label,
html body.dark .main .fw-bold,
html body[data-theme="dark"] .main h1,
html body[data-theme="dark"] .main h2,
html body[data-theme="dark"] .main h3,
html body[data-theme="dark"] .main h4,
html body[data-theme="dark"] .main h5,
html body[data-theme="dark"] .main h6,
html body[data-theme="dark"] .main label,
html body[data-theme="dark"] .main .form-label,
html body[data-theme="dark"] .main .fw-bold{color:#f8fafc!important;}
html body.dark .main p,
html body.dark .main .text-muted,
html body.dark .main .small-note,
html body[data-theme="dark"] .main p,
html body[data-theme="dark"] .main .text-muted,
html body[data-theme="dark"] .main .small-note{color:#a8b3c3!important;}
html body.dark .main .form-control,
html body.dark .main .form-select,
html body.dark .main select,
html body.dark .main textarea,
html body[data-theme="dark"] .main .form-control,
html body[data-theme="dark"] .main .form-select,
html body[data-theme="dark"] .main select,
html body[data-theme="dark"] .main textarea{
  background:rgba(15,23,42,.78)!important;
  border-color:rgba(255,255,255,.10)!important;
  color:#f8fafc!important;
}
html body.dark .main .dropdown-menu,
html body.dark .main .list-group,
html body.dark .main .list-group-item,
html body.dark .main .table-responsive,
html body.dark .main .bg-white,
html body.dark .main .bg-light,
html body.dark .main .bg-body,
html body[data-theme="dark"] .main .dropdown-menu,
html body[data-theme="dark"] .main .list-group,
html body[data-theme="dark"] .main .list-group-item,
html body[data-theme="dark"] .main .table-responsive,
html body[data-theme="dark"] .main .bg-white,
html body[data-theme="dark"] .main .bg-light,
html body[data-theme="dark"] .main .bg-body{background:rgba(15,23,42,.62)!important;border-color:rgba(255,255,255,.10)!important;color:#f8fafc!important;}
html body.dark .main .table,
html body.dark .main .table td,
html body.dark .main .table th,
html body[data-theme="dark"] .main .table,
html body[data-theme="dark"] .main .table td,
html body[data-theme="dark"] .main .table th{color:#f8fafc!important;border-color:rgba(255,255,255,.10)!important;}
html body.dark .menu-item,
html body[data-theme="dark"] .menu-item{color:#dce3ed!important;}
html body.dark .menu-item:hover,
html body.dark .menu-item.active,
html body[data-theme="dark"] .menu-item:hover,
html body[data-theme="dark"] .menu-item.active{background:rgba(255,255,255,.07)!important;border-color:rgba(255,255,255,.10)!important;color:#fff!important;}

/* Print rebuild — remove glass effects but preserve readable document output. */
@media print{
  html body{background:#fff!important;color:#111!important;}
  html body .top-header,html body .sidebar,html body .sidebar-overlay,html body .sidebar-edge-toggle,.no-print{display:none!important;}
  html body .main{margin:0!important;padding:0!important;}
  html body .main .page-card,
  html body .main .panel,
  html body .main .card,
  html body .main .glass-card,
  html body .main .surface,
  html body .main .content-card,
  html body .main .table-wrapper,
  html body .main .table-responsive{background:#fff!important;box-shadow:none!important;border:1px solid #d7dde6!important;backdrop-filter:none!important;-webkit-backdrop-filter:none!important;color:#111!important;}
  html body .main .table,html body .main .table td,html body .main .table th{color:#111!important;}
}