/* Chullamanee Asset — Sneat Bootstrap 5 inspired UI */
:root{
  --bs-primary:#696cff;
  --bs-primary-rgb:105,108,255;
  --color-primary:#696cff;
  --color-primary-dark:#5f61e6;
  --color-primary-soft:#eef0ff;
  --color-secondary:#8592a3;
  --color-bg:#f5f5f9;
  --color-surface:#fff;
  --color-text:#566a7f;
  --color-heading:#384551;
  --color-muted:#a1acb8;
  --color-border:#d9dee3;
  --color-success:#71dd37;
  --color-danger:#ff3e1d;
  --color-warning:#ffab00;
  --color-info:#03c3ec;
  --sidebar-width:260px;
  --font-body:'Noto Sans Thai','Segoe UI',sans-serif;
  --radius:0.625rem;
  --shadow:0 2px 6px 0 rgba(67,89,113,.12);
}
*{box-sizing:border-box}
html,body{min-height:100%}
body{font-family:var(--font-body);background:var(--color-bg);color:var(--color-text);margin:0;font-size:14px;line-height:1.5}
a{text-decoration:none;color:var(--color-primary)}
.app-wrapper{display:flex;min-height:100vh}
.sidebar{width:var(--sidebar-width);background:#fff;color:var(--color-text);flex-shrink:0;position:sticky;top:0;height:100vh;overflow-y:auto;transition:margin-left .25s ease;box-shadow:0 0 18px rgba(67,89,113,.08);z-index:30}
.sidebar.collapsed{margin-left:calc(-1 * var(--sidebar-width))}
.sidebar-brand{display:flex;align-items:center;gap:.7rem;padding:1rem 1.15rem .9rem;min-height:72px;position:sticky;top:0;background:#fff;z-index:3}
.sidebar-logo{width:42px;height:42px;object-fit:contain;flex:0 0 42px;background:#fff;border-radius:50%;padding:1px;box-shadow:0 1px 5px rgba(67,89,113,.16)}
.sidebar-brand-text{min-width:0;line-height:1.2}.sidebar-brand-text strong{display:block;font-size:1.03rem;color:var(--color-heading);white-space:nowrap;font-weight:800;letter-spacing:-.01em}.sidebar-brand-text small{display:block;margin-top:.23rem;font-size:.63rem;font-weight:600;color:var(--color-secondary);white-space:nowrap}
.sidebar-menu{padding:.25rem .75rem 1.5rem}.nav-section{font-size:.67rem;text-transform:uppercase;letter-spacing:.07em;color:#b4bdc6;padding:1.05rem .85rem .35rem;font-weight:700}.nav-link{display:flex;align-items:center;gap:.72rem;padding:.62rem .85rem;border-radius:.42rem;color:#697a8d;font-size:.88rem;margin-bottom:.14rem;transition:all .18s ease}.nav-link i{width:20px;text-align:center;font-size:1.05rem}.nav-link:hover{background:#f5f5f9;color:var(--color-heading);transform:translateX(1px)}.nav-link.active{background:linear-gradient(270deg,#f3f3ff 0%,#ececff 100%);color:var(--color-primary);font-weight:700;box-shadow:0 2px 6px rgba(105,108,255,.12)}
.app-content{flex:1;display:flex;flex-direction:column;min-width:0}.topbar{min-height:64px;background:rgba(255,255,255,.95);border:0;display:flex;align-items:center;margin:1rem 1.5rem 0;padding:0 1.1rem;gap:1rem;position:sticky;top:1rem;z-index:20;border-radius:var(--radius);box-shadow:var(--shadow);backdrop-filter:blur(8px)}.btn-toggle-sidebar{background:none;border:0;font-size:1.25rem;color:#697a8d;cursor:pointer}.topbar-title{font-size:1rem;font-weight:700;color:var(--color-heading);margin:0;flex:1}.topbar-actions{display:flex;align-items:center;gap:.9rem}.topbar-icon{position:relative;font-size:1.18rem;color:#697a8d}.badge-dot{position:absolute;top:-7px;right:-8px;background:var(--color-danger);color:#fff;font-size:.6rem;padding:1px 5px;border-radius:20px;font-weight:700}.topbar-user{display:flex;align-items:center;gap:.5rem;background:none;border:0;font-size:.84rem;font-weight:600;color:#697a8d}.topbar-user i{font-size:1.5rem;color:var(--color-primary)}
.page-body{padding:1.5rem;flex:1}.page-footer{padding:.3rem 1.6rem 1.4rem;color:#a1acb8;font-size:.76rem;display:flex;justify-content:space-between}
.card{border:0;border-radius:var(--radius);background:#fff;box-shadow:var(--shadow);color:var(--color-text)}.card-header{background:transparent;border-bottom:1px solid #eceef1;font-weight:700;font-size:.95rem;color:var(--color-heading);padding:1rem 1.25rem}.card-body{padding:1.25rem}.dropdown-menu{border:0;border-radius:.5rem;box-shadow:0 4px 18px rgba(67,89,113,.16);font-size:.86rem}.dropdown-item{padding:.55rem .9rem;color:#697a8d}
.btn{border-radius:.42rem;font-size:.86rem;font-weight:600}.btn-primary{background:#696cff;border-color:#696cff;box-shadow:0 2px 4px rgba(105,108,255,.35)}.btn-primary:hover{background:#5f61e6;border-color:#5f61e6}.btn-outline-primary{color:#696cff;border-color:#696cff}.btn-outline-primary:hover{background:#696cff;border-color:#696cff}.btn-accent{background:#ffab00;border-color:#ffab00;color:#fff}
.table-wrap{background:#fff;border:0;border-radius:var(--radius);overflow:hidden;box-shadow:var(--shadow)}table.table{margin-bottom:0;color:#697a8d}table.table thead th{background:#f5f5f9;color:#566a7f;font-size:.75rem;text-transform:none;font-weight:700;border-bottom:1px solid #e7e7e9;white-space:nowrap;padding:.72rem .85rem}table.table td{padding:.7rem .85rem;vertical-align:middle;font-size:.85rem;border-color:#eceef1}table.table tbody tr:hover{background:#fafafa}
.badge-status{font-size:.72rem;font-weight:700;padding:.34rem .6rem;border-radius:.35rem}.badge-status.success{background:#e8fadf;color:#56ca00}.badge-status.danger{background:#ffe0db;color:#ff3e1d}.badge-status.warning{background:#fff2d6;color:#ffab00}.badge-status.info{background:#d7f5fc;color:#03c3ec}.badge-status.secondary{background:#ebeef0;color:#8592a3}.badge-status.primary{background:#e7e7ff;color:#696cff}
.form-label{font-size:.83rem;font-weight:600;color:#566a7f}.form-control,.form-select{border-color:#d9dee3;font-size:.86rem;border-radius:.42rem;color:#566a7f;padding:.5rem .75rem}.form-control:focus,.form-select:focus{border-color:#696cff;box-shadow:0 0 0 .15rem rgba(105,108,255,.16)}.required-mark{color:#ff3e1d}
/* Dashboard */
.welcome-card{overflow:hidden;background:linear-gradient(135deg,#fff 0%,#f7f7ff 100%);position:relative}.welcome-card:after{content:'';position:absolute;width:160px;height:160px;border-radius:50%;right:-52px;top:-70px;background:rgba(105,108,255,.08)}.welcome-title{font-size:1.25rem;color:#696cff;font-weight:800;margin-bottom:.3rem}.welcome-sub{color:#697a8d;font-size:.85rem;max-width:680px}.welcome-logo{width:84px;height:84px;object-fit:contain;filter:drop-shadow(0 5px 10px rgba(67,89,113,.15))}
.kpi-card{background:#fff;border:0;border-radius:var(--radius);padding:1rem 1.05rem;height:100%;box-shadow:var(--shadow);position:relative;overflow:hidden}.kpi-label{font-size:.77rem;color:#8592a3;margin-bottom:.35rem;font-weight:600}.kpi-value{font-size:1.45rem;font-weight:800;color:#384551;line-height:1.1}.kpi-sub{font-size:.72rem;color:#a1acb8;margin-top:.32rem;white-space:normal}.kpi-icon{width:42px;height:42px;display:grid;place-items:center;border-radius:.5rem;background:#e7e7ff;color:#696cff;font-size:1.12rem;margin-bottom:.65rem}.kpi-icon.success{background:#e8fadf;color:#56ca00}.kpi-icon.danger{background:#ffe0db;color:#ff3e1d}.kpi-icon.warning{background:#fff2d6;color:#ffab00}.kpi-icon.info{background:#d7f5fc;color:#03c3ec}
.quick-action{display:flex;align-items:center;gap:.7rem;padding:.8rem;border:1px solid #eceef1;border-radius:.55rem;background:#fff;color:#566a7f;transition:.18s ease;height:100%}.quick-action:hover{border-color:#d4d5ff;color:#696cff;box-shadow:0 3px 10px rgba(105,108,255,.12);transform:translateY(-1px)}.quick-action-icon{width:38px;height:38px;display:grid;place-items:center;border-radius:.5rem;background:#f3f3ff;color:#696cff;font-size:1rem;flex:0 0 38px}.quick-action strong{display:block;font-size:.8rem;color:inherit}.quick-action small{display:block;font-size:.68rem;color:#a1acb8;margin-top:.05rem}.section-title{font-size:1rem;font-weight:800;color:#384551;margin:0}.section-sub{font-size:.75rem;color:#a1acb8}.anomaly-row{display:flex;justify-content:space-between;align-items:center;padding:.72rem 0;border-bottom:1px solid #f0f1f3}.anomaly-row:last-child{border-bottom:0}.anomaly-label{display:flex;align-items:center;gap:.65rem;font-size:.82rem;color:#566a7f}.anomaly-icon{width:34px;height:34px;display:grid;place-items:center;border-radius:.42rem;background:#f5f5f9;color:#8592a3}
/* Auth */
.auth-wrapper{min-height:100vh;display:flex;align-items:center;justify-content:center;background:#f5f5f9;padding:1rem;position:relative;overflow:hidden}.auth-wrapper:before,.auth-wrapper:after{content:'';position:absolute;border-radius:50%;background:rgba(105,108,255,.08)}.auth-wrapper:before{width:420px;height:420px;left:-180px;bottom:-180px}.auth-wrapper:after{width:300px;height:300px;right:-120px;top:-120px}.auth-card{position:relative;z-index:1;background:#fff;border-radius:.75rem;width:100%;max-width:420px;padding:2.1rem 2rem;box-shadow:0 8px 28px rgba(67,89,113,.14)}.auth-brand{text-align:center;margin-bottom:1.5rem}.auth-logo{width:102px;height:102px;object-fit:contain;margin-bottom:.75rem}.auth-brand h1{margin:0 0 .15rem;font-size:1.45rem;font-weight:800;color:#384551}.auth-system-name{color:#696cff;font-weight:700;font-size:.86rem;margin-bottom:.35rem}.auth-school-name{color:#8592a3;font-size:.78rem;line-height:1.55;margin-bottom:.55rem}
@media(max-width:900px){.sidebar{position:fixed;z-index:40;margin-left:calc(-1 * var(--sidebar-width))}.sidebar.show{margin-left:0;box-shadow:4px 0 20px rgba(67,89,113,.2)}.topbar{margin:.75rem .8rem 0;top:.75rem}.page-body{padding:1rem .8rem}.topbar-user span{display:none}.page-footer{padding:.3rem .9rem 1rem;gap:.8rem;flex-wrap:wrap}}
@media print{.sidebar,.topbar,.page-footer,.no-print{display:none!important}.app-content{width:100%}.page-body{padding:0}.card,.table-wrap{box-shadow:none}}
a:focus-visible,button:focus-visible,input:focus-visible,select:focus-visible{outline:2px solid #696cff;outline-offset:2px}

/* Structure pages — stronger contrast for tabs and hierarchy icons */
.structure-tabs{gap:.35rem;align-items:center}
.structure-tabs .nav-link{color:#566a7f!important;background:transparent;border:1px solid transparent;font-weight:700;padding:.55rem .9rem;margin:0;opacity:1}
.structure-tabs .nav-link i{color:inherit}
.structure-tabs .nav-link:hover{color:#696cff!important;background:#f0f0ff;border-color:#dedfff;transform:none}
.structure-tabs .nav-link.active{color:#fff!important;background:#696cff!important;border-color:#696cff!important;box-shadow:0 3px 8px rgba(105,108,255,.28)}
.dept-tree-row{border-bottom:1px solid #f0f1f3;color:#384551;font-weight:600}
.dept-tree-row:last-child{border-bottom:0}
.dept-tree-icon{color:#696cff!important;font-size:1.08rem}
.dept-tree-row .btn-outline-secondary{color:#566a7f;border-color:#8592a3}
.dept-tree-row .btn-outline-secondary i{color:#566a7f}
.dept-tree-row .btn-outline-secondary:hover,.dept-tree-row .btn-outline-secondary:hover i{color:#fff}
.dept-tree-row .btn-outline-danger i{color:#ff3e1d}
.dept-tree-row .btn-outline-danger:hover i{color:#fff}
.js-dept-toggle{cursor:pointer;text-decoration:none!important}
.js-dept-toggle .dept-chevron{color:#8592a3;transition:transform .15s}


/* ===== Chullamanee Asset v2.2: readability & structure navigation ===== */
/* Main content tabs must remain readable on the pale Sneat background. */
.page-body .nav-pills .nav-link{
  color:#4f5d6b!important;
  background:#fff;
  border:1px solid #dfe3e8;
  font-weight:700;
  opacity:1!important;
  box-shadow:0 1px 2px rgba(67,89,113,.04);
}
.page-body .nav-pills .nav-link i{color:inherit!important;opacity:1!important}
.page-body .nav-pills .nav-link:hover{
  color:#5f61e6!important;
  background:#f0f0ff;
  border-color:#cfd0ff;
  transform:none;
}
.page-body .nav-pills .nav-link.active,
.page-body .nav-pills .show>.nav-link{
  color:#fff!important;
  background:#696cff!important;
  border-color:#696cff!important;
  box-shadow:0 3px 8px rgba(105,108,255,.28);
}
/* More readable system-wide icon and secondary text contrast. */
.sidebar .nav-link{color:#5f6f80}
.sidebar .nav-link i{color:#718397;opacity:1}
.sidebar .nav-link:hover i,.sidebar .nav-link.active i{color:inherit}
.page-body .text-muted{color:#6f7f8f!important}
.page-body .small.text-muted,.page-body small.text-muted{color:#748494!important}
.kpi-label{color:#6c7b8b}.kpi-sub,.section-sub{color:#7b8998}
.anomaly-icon{color:#696cff;background:#eeeeff}
.table .bi{opacity:1}
.btn-outline-secondary{color:#566a7f;border-color:#7f8c99}
.btn-outline-secondary i{color:inherit!important}

/* Dashboard charts */
.chart-card .card-header{padding-bottom:.8rem}
.chart-title{font-weight:800;color:#384551}.chart-subtitle{font-size:.74rem;color:#748494;font-weight:500;margin-top:.15rem}
.chart-box{position:relative;min-height:285px}.chart-box-sm{position:relative;min-height:260px}
.executive-mini{border:1px solid #eceef1;border-radius:.55rem;padding:.85rem 1rem;background:#fff;height:100%}
.executive-mini .label{font-size:.73rem;color:#6f7f8f;font-weight:600}.executive-mini .value{margin-top:.2rem;font-size:1.1rem;font-weight:800;color:#384551}
@media(max-width:767.98px){.page-body .nav-pills{gap:.4rem}.page-body .nav-pills .nav-link{padding:.5rem .7rem;font-size:.8rem}.chart-box,.chart-box-sm{min-height:235px}}

/* ======================================================================
   Chullamanee Asset v2.3 — UX/UI polish layer
   Visual-only refinements: readability, consistency, responsive behavior
   ====================================================================== */
:root{
  --color-text:#536475;
  --color-heading:#324454;
  --color-muted:#718294;
  --color-border:#e2e6ea;
  --shadow-soft:0 2px 8px rgba(67,89,113,.10);
  --shadow-hover:0 8px 24px rgba(67,89,113,.12);
}
body{letter-spacing:.002em;-webkit-font-smoothing:antialiased}
::selection{background:rgba(105,108,255,.18)}

/* Layout rhythm */
.page-body{max-width:1680px;width:100%;margin:0 auto;padding-top:1.35rem}
.topbar{max-width:calc(1680px - 3rem);width:calc(100% - 3rem);align-self:center}
.page-footer{max-width:1680px;width:100%;margin:0 auto}

/* Sidebar clarity */
.sidebar{scrollbar-width:thin;scrollbar-color:#cfd5dc transparent}
.sidebar::-webkit-scrollbar{width:5px}.sidebar::-webkit-scrollbar-thumb{background:#cfd5dc;border-radius:10px}
.sidebar-brand{border-bottom:1px solid #f3f4f6}
.sidebar-menu{padding-top:.45rem}
.nav-section{color:#8a98a7;font-size:.66rem;padding-top:1.1rem}
.nav-link{font-weight:550;min-height:40px;color:#586b7d}
.nav-link i{font-size:1.02rem;color:#697d91}
.nav-link:hover{background:#f7f7fb;color:#424f5c}
.nav-link.active{background:#eeeefe;color:#696cff;box-shadow:none}
.nav-link.active::before{content:'';width:3px;height:22px;background:#696cff;border-radius:0 4px 4px 0;position:absolute;left:0}
.nav-link{position:relative}

/* Topbar */
.topbar{box-shadow:0 2px 12px rgba(67,89,113,.10);border:1px solid rgba(226,230,234,.75)}
.btn-toggle-sidebar{width:38px;height:38px;border-radius:.45rem;display:grid;place-items:center;transition:.18s}
.btn-toggle-sidebar:hover{background:#f1f2f6;color:#696cff}
.topbar-icon{width:38px;height:38px;border-radius:50%;display:grid;place-items:center;transition:.18s}
.topbar-icon:hover{background:#f1f2ff;color:#696cff}
.topbar-user{padding:.32rem .48rem;border-radius:.5rem;transition:.18s}.topbar-user:hover{background:#f7f7fb}
.dropdown-menu{padding:.45rem}.dropdown-item{border-radius:.35rem}

/* Generic page headings / cards */
h1,h2,h3,h4,h5,h6{color:var(--color-heading)}
.page-body h2,.page-body h3{font-weight:750}
.card{box-shadow:var(--shadow-soft);transition:box-shadow .18s ease}
.card-header{min-height:52px;display:flex;align-items:center;justify-content:space-between;gap:.75rem}
.card-header h5,.card-header h6,.card-header .card-title{margin:0;font-weight:750;color:var(--color-heading)}
.card:hover{box-shadow:0 3px 12px rgba(67,89,113,.115)}

/* Filter/search bars: make list screens feel like one coherent product */
.page-body > form.row.g-2.mb-3.no-print,
.page-body > form.row.g-3.mb-3.no-print,
.page-body > form.row.g-2.mb-4.no-print{
  background:#fff;border:1px solid #eef0f2;border-radius:var(--radius);padding:.85rem;
  box-shadow:var(--shadow-soft);margin-left:0;margin-right:0;align-items:center
}
.page-body > form.row.g-2.mb-3.no-print > [class*="col-"],
.page-body > form.row.g-3.mb-3.no-print > [class*="col-"]{margin-top:.35rem}

/* Forms */
.form-label{color:#495b6c;font-weight:650;margin-bottom:.38rem}
.form-control,.form-select{min-height:40px;background-color:#fff;color:#405264;border-color:#d5dce2;transition:border-color .15s,box-shadow .15s,background .15s}
.form-control:hover,.form-select:hover{border-color:#aeb9c4}
.form-control::placeholder{color:#98a5b2;opacity:1}
.input-group-text{background:#f7f8fa;border-color:#d5dce2;color:#607386}
.form-check-input{border-color:#aeb9c4}.form-check-input:checked{background-color:#696cff;border-color:#696cff}
.form-text{color:#718294;font-size:.75rem}
textarea.form-control{min-height:96px}
fieldset{border-color:#e5e8eb!important}

/* Buttons */
.btn{min-height:38px;display:inline-flex;align-items:center;justify-content:center;gap:.35rem;padding:.43rem .78rem;transition:transform .12s,box-shadow .15s,background .15s,border-color .15s}
.btn:hover{transform:translateY(-1px)}
.btn:active{transform:none}
.btn-sm{min-height:31px;padding:.28rem .55rem}
.btn-primary{box-shadow:0 2px 7px rgba(105,108,255,.26)}
.btn-danger{box-shadow:0 2px 6px rgba(255,62,29,.18)}
.btn-light{border-color:#e0e4e8;color:#536475;background:#fff}.btn-light:hover{background:#f5f6f8;border-color:#cdd4db}
.btn-outline-danger{color:#e83d25;border-color:#f27765}.btn-outline-danger:hover{color:#fff;background:#ff3e1d;border-color:#ff3e1d}

/* Tables — stronger hierarchy + usable on smaller screens */
.table-wrap{overflow-x:auto;overflow-y:hidden;border:1px solid #eef0f2;box-shadow:var(--shadow-soft);scrollbar-width:thin}
.table-wrap::-webkit-scrollbar{height:7px}.table-wrap::-webkit-scrollbar-thumb{background:#cfd6dd;border-radius:10px}
table.table{min-width:760px}
table.table thead th{position:relative;background:#f6f7f9;color:#46596b;font-size:.76rem;font-weight:750;letter-spacing:.005em;padding:.78rem .85rem;border-color:#e5e8eb}
table.table td{color:#536475;padding:.78rem .85rem;border-color:#edf0f2}
table.table tbody tr{transition:background .12s}table.table tbody tr:hover{background:#f9f9fd}
table.table a.fw-semibold,table.table .fw-semibold{color:#3f5264;font-weight:700!important}table.table a.fw-semibold:hover{color:#696cff}
table.table .text-danger{font-weight:600}
.table > :not(caption) > * > *{box-shadow:none}
.table-responsive{border-radius:var(--radius)}

/* Pagination */
.pagination{gap:.25rem}.page-link{border:0;border-radius:.4rem!important;color:#607386;min-width:35px;min-height:35px;display:grid;place-items:center;background:#fff;box-shadow:0 1px 3px rgba(67,89,113,.08)}
.page-link:hover{background:#eeeeff;color:#696cff}.page-item.active .page-link{background:#696cff;color:#fff;box-shadow:0 2px 7px rgba(105,108,255,.25)}
.page-item.disabled .page-link{background:#f4f5f7;color:#a6b0ba}

/* Alerts / notifications */
.alert{border:0;border-radius:.55rem;padding:.78rem 1rem;box-shadow:0 1px 4px rgba(67,89,113,.06)}
.alert-light{background:#f7f8fb!important;color:#536475;border-left:3px solid #8f9eae!important}
.alert-success{background:#eaf9e4;color:#347d16}.alert-danger{background:#fff0ed;color:#bc321c}.alert-warning{background:#fff7e5;color:#9f6b00}.alert-info{background:#e9f9fd;color:#087f98}
.alert i{margin-right:.3rem}

/* Badges */
.badge,.badge-status{letter-spacing:.005em}.badge.bg-secondary{background:#e8ebee!important;color:#566a7f!important}.badge.bg-light{color:#566a7f!important}

/* Tabs / pills */
.nav-tabs{border-bottom-color:#e1e5e9}.nav-tabs .nav-link{color:#5e7082;border-radius:.45rem .45rem 0 0;font-weight:650}.nav-tabs .nav-link.active{color:#696cff;font-weight:750;border-color:#e1e5e9 #e1e5e9 #fff}.nav-tabs .nav-link:hover{color:#696cff}
.page-body .nav-pills{flex-wrap:wrap}

/* Modal / offcanvas / dropdown polish */
.modal-content{border:0;border-radius:.7rem;box-shadow:0 16px 48px rgba(67,89,113,.2)}.modal-header{border-bottom-color:#edf0f2}.modal-footer{border-top-color:#edf0f2}
.confirm-modal-icon{width:64px;height:64px;border-radius:50%;background:rgba(255,62,29,.12);color:#ff3e1d;display:flex;align-items:center;justify-content:center;font-size:1.9rem;margin-left:auto;margin-right:auto}
#confirmActionMessage{font-weight:500;color:#384551;font-size:.98rem;padding:0 .5rem}
.offcanvas{border:0}.dropdown-divider{border-color:#edf0f2}

/* Empty states (works with existing muted rows/messages) */
.table tbody td[colspan]{padding:2rem 1rem;color:#7a8998;text-align:center}
.table tbody td[colspan] .bi{font-size:1.25rem;color:#9aa6b2}

/* Images / thumbnails */
.table img{box-shadow:0 1px 4px rgba(67,89,113,.12);border:1px solid #edf0f2;background:#fff}
.img-thumbnail{border-color:#e1e5e9;border-radius:.55rem}

/* Dashboard: cleaner hierarchy */
.welcome-card{border:1px solid #eeeeff;box-shadow:0 3px 14px rgba(105,108,255,.08)}
.kpi-card{border:1px solid #f0f1f3;box-shadow:var(--shadow-soft);transition:transform .16s,box-shadow .16s}.kpi-card:hover{transform:translateY(-2px);box-shadow:var(--shadow-hover)}
.kpi-label{font-size:.78rem;color:#657789}.kpi-value{letter-spacing:-.02em}.kpi-sub{color:#778899}
.quick-action{border-color:#e5e8ef}.quick-action:hover{background:#fbfbff}.quick-action small{color:#748597}
.chart-card{height:100%}.chart-box canvas,.chart-box-sm canvas{max-height:310px}

/* Better mobile behavior */
.sidebar-backdrop{display:none;position:fixed;inset:0;background:rgba(37,49,61,.38);backdrop-filter:blur(1px);z-index:35}
.sidebar-backdrop.show{display:block}
@media(max-width:1199.98px){.page-body{padding-left:1rem;padding-right:1rem}.topbar{width:calc(100% - 2rem);margin-left:1rem;margin-right:1rem}}
@media(max-width:900px){
  .topbar{width:calc(100% - 1.6rem);margin-left:.8rem;margin-right:.8rem}
  .sidebar{box-shadow:8px 0 28px rgba(42,54,66,.22)}
  .page-body{padding-top:1rem}.page-footer{font-size:.72rem}
  .page-body > form.row.g-2.mb-3.no-print,.page-body > form.row.g-3.mb-3.no-print{padding:.7rem}
}
@media(max-width:575.98px){
  body{font-size:13.5px}.topbar{min-height:58px;padding:0 .75rem;gap:.5rem}.topbar-title{font-size:.92rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .topbar-actions{gap:.15rem}.topbar-icon,.btn-toggle-sidebar{width:36px;height:36px}
  .page-body{padding:.85rem .7rem}.page-footer{padding:.2rem .75rem 1rem;display:block;text-align:center}.page-footer span{display:block;margin:.18rem 0}
  .card-header,.card-body{padding:.9rem}.card-header{min-height:48px}
  .btn:not(.btn-sm){min-height:40px}.form-control,.form-select{font-size:16px} /* prevent iOS zoom */
  .auth-card{padding:1.6rem 1.15rem}.auth-logo{width:88px;height:88px}.auth-brand h1{font-size:1.28rem}
}

/* Accessibility: keyboard focus and motion preference */
:focus-visible{outline:2px solid #696cff!important;outline-offset:2px!important}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{scroll-behavior:auto!important;transition:none!important;animation:none!important}}