:root{
  --app-blue:#1769f5;
  --app-blue2:#2563eb;
  --app-navy:#0c2f57;
  --app-navy2:#0a2848;
  --app-bg:#f5f7fb;
  --app-card:#ffffff;
  --app-border:#e6ebf2;
  --app-text:#172033;
  --app-muted:#7b8799;
  --app-shadow:0 5px 18px rgba(31,55,90,.07);
}
html,body{min-height:100%;height:100%}
body{
  margin:0;
  font-family:system-ui,-apple-system,"Segoe UI",Roboto,"Noto Sans Thai",Tahoma,sans-serif;
  -webkit-font-smoothing:antialiased;
  background:var(--app-bg);
  color:var(--app-text);
  font-size:14px;
}
body.app-shell{
  min-height:100vh;
  overflow-x:hidden;
}

/* ===== Unified Sidebar ===== */
.app-sidebar{
  position:fixed;
  inset:0 auto 0 0;
  width:230px;
  flex-direction:column;
  color:#fff;
  background:linear-gradient(180deg,var(--app-navy),var(--app-navy2));
  z-index:1035;
  box-shadow:5px 0 18px rgba(12,47,87,.08);
}
.app-sidebar-brand{
  min-height:64px;
  padding:1rem 1.1rem;
  border-bottom:1px solid rgba(255,255,255,.08);
}
.app-sidebar-brand .small{color:rgba(255,255,255,.55)}
.app-nav{
  flex:1 1 auto;
  overflow-y:auto;
  overscroll-behavior:contain;
  padding:.55rem;
}
.app-nav-section{
  color:rgba(255,255,255,.38);
  font-size:.66rem;
  font-weight:700;
  text-transform:uppercase;
  letter-spacing:.08em;
  padding:.75rem .78rem .28rem;
}
.app-nav-link{
  display:flex;
  align-items:center;
  gap:.72rem;
  margin:.08rem 0;
  padding:.69rem .78rem;
  border-radius:.55rem;
  color:rgba(255,255,255,.76);
  text-decoration:none;
  font-size:.82rem;
  line-height:1.15;
  transition:.15s ease;
}
.app-nav-link i{
  width:18px;
  flex:0 0 18px;
  text-align:center;
  font-size:.96rem;
}
.app-nav-link:hover,.app-nav-link.active{
  color:#fff;
  background:rgba(255,255,255,.12);
}
.app-nav-link.active{font-weight:700}
.app-sidebar-user{
  display:flex;
  align-items:center;
  gap:.62rem;
  padding:.82rem .9rem;
  border-top:1px solid rgba(255,255,255,.08);
}
.app-user-avatar{
  width:32px;height:32px;
  border-radius:50%;
  flex:0 0 32px;
  display:grid;place-items:center;
  background:rgba(255,255,255,.13);
}
.app-online-dot{
  width:8px;height:8px;
  border-radius:50%;
  margin-left:auto;
  background:#22c55e;
  box-shadow:0 0 0 3px rgba(34,197,94,.12);
}
.min-w-0{min-width:0}

/* ===== Main shell ===== */
.app-main{
  margin-left:230px;
  min-height:100vh;
  display:flex;
  flex-direction:column;
}
.app-desktop-topbar{
  height:64px;
  flex:0 0 64px;
  align-items:center;
  padding:0 1.35rem;
  position:sticky;
  top:0;
  z-index:1020;
  background:#fff;
  border-bottom:1px solid var(--app-border);
}
.app-content{
  flex:1 1 auto;
  width:100%;
  padding:1.2rem 1.35rem 1.6rem;
}
.app-footer{
  flex-shrink:0;
  display:flex;
  justify-content:space-between;
  gap:1rem;
  padding:.78rem 1.35rem;
  background:#0c315d;
  color:rgba(255,255,255,.82);
  font-size:.72rem;
}
.app-top-icon{
  width:34px;height:34px;
  display:grid;place-items:center;
  border-radius:.55rem;
  color:#5a6a81;
  background:transparent;
  text-decoration:none;
}
.app-top-icon:hover{background:#eef4ff;color:var(--app-blue)}
.app-user-btn{
  border:0;
  border-radius:.6rem;
  background:#f5f7fb;
  color:#344257;
  font-size:.82rem;
}
.app-user-btn:hover{background:#eaf1ff;color:#174dc7}

/* ===== Mobile / iPad top bar & offcanvas ===== */
.app-mobile-topbar{
  height:56px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:.75rem;
  padding:0 .75rem;
  position:sticky;
  top:0;
  z-index:1025;
  background:linear-gradient(100deg,var(--app-blue),var(--app-blue2));
  color:#fff;
  box-shadow:0 2px 8px rgba(27,71,164,.18);
}
.app-menu-btn,.app-icon-btn{
  width:38px;height:38px;
  flex:0 0 38px;
  display:grid;place-items:center;
  border:0;
  border-radius:.55rem;
  color:#fff;
  background:rgba(255,255,255,.08);
  font-size:1.15rem;
}
.app-offcanvas{
  width:min(285px,88vw)!important;
  color:#fff;
  background:linear-gradient(180deg,var(--app-navy),var(--app-navy2));
  border:0!important;
}
.app-offcanvas .offcanvas-header{border-bottom:1px solid rgba(255,255,255,.08)}
.app-offcanvas .offcanvas-body{
  display:flex;
  flex-direction:column;
  min-height:0;
}
.app-offcanvas .app-nav{flex:1 1 auto}
.app-offcanvas .app-sidebar-user{flex-shrink:0}

/* ===== Global content style ===== */
.page-title{
  margin:0;
  color:#101827;
  font-size:1.65rem;
  font-weight:800;
  letter-spacing:-.3px;
}
.section-subtitle,.text-secondary{color:var(--app-muted)!important}
.card{
  border:1px solid var(--app-border);
  border-radius:.78rem;
  background:var(--app-card);
}
.shadow-sm{box-shadow:var(--app-shadow)!important}
.card-header{
  background:#fff;
  border-bottom:1px solid var(--app-border);
}
.card-footer{
  background:#fff;
  border-top:1px solid var(--app-border);
}
.stat-card{position:relative;overflow:hidden}
.stat-card::before{
  content:"";
  position:absolute;
  inset:0 auto 0 0;
  width:3px;
  background:var(--app-blue);
}
.dashboard-click-card{
  transition:transform .15s ease,box-shadow .15s ease,border-color .15s ease;
}
.dashboard-click-card:hover{
  transform:translateY(-2px);
  border-color:#c8d7f4;
  box-shadow:0 9px 24px rgba(37,99,235,.11)!important;
}

/* ===== Table ===== */
.table{
  --bs-table-bg:transparent;
  font-size:.85rem;
  margin-bottom:0;
}
.table-responsive{border-radius:.7rem}
.table thead th{
  padding:.76rem .82rem;
  background:#f7f9fc;
  color:#637087;
  border-bottom:1px solid var(--app-border);
  font-size:.75rem;
  font-weight:750;
  white-space:nowrap;
}
.table tbody td{
  padding:.7rem .82rem;
  vertical-align:middle;
  border-color:#eef2f7;
}
.table-hover>tbody>tr:hover>*{--bs-table-bg-state:#f8fbff}

/* ===== Forms ===== */
.form-label{
  margin-bottom:.36rem;
  color:#334155;
  font-size:.79rem;
  font-weight:650;
}
.form-control,.form-select{
  min-height:40px;
  border-radius:.56rem;
  border-color:#d6deea;
  background:#fff;
  font-size:.85rem;
}
textarea.form-control{min-height:86px}
.form-control:focus,.form-select:focus{
  border-color:#70a0ff;
  box-shadow:0 0 0 .18rem rgba(37,99,235,.11);
}
.input-group-text{border-color:#d6deea;background:#f7f9fc}
.form-check-input:checked{background-color:var(--app-blue);border-color:var(--app-blue)}

/* ===== Buttons / badges / modal ===== */
.btn{
  border-radius:.55rem;
  font-size:.83rem;
  font-weight:650;
}
.btn-primary{background:#1769f5;border-color:#1769f5}
.btn-primary:hover{background:#0d5de2;border-color:#0d5de2}
.badge{border-radius:.42rem;font-weight:650}
.modal-content{
  border:0;
  border-radius:.9rem;
  box-shadow:0 18px 48px rgba(15,23,42,.20);
}
.modal-header,.modal-footer{border-color:#edf1f6}
.progress{border-radius:99px;background:#e9edf3}
.progress-bar{border-radius:99px;background:#276cf0}

/* ===== Utility classes used by existing pages ===== */
.responsive-actions{
  display:flex;
  justify-content:flex-end;
  flex-wrap:wrap;
  gap:.45rem;
}
.mobile-card-list{display:none}
.mobile-item{
  background:var(--app-card);
  border:1px solid var(--app-border);
  border-radius:.8rem;
  padding:1rem;
  margin-bottom:.75rem;
}
.mobile-item .rowline{
  display:flex;
  justify-content:space-between;
  gap:1rem;
  padding:.25rem 0;
}
.file-drop-hint{
  border:1px dashed var(--app-border);
  border-radius:.75rem;
  padding:1rem;
}
pre.audit-json{
  max-height:420px;
  overflow:auto;
  white-space:pre-wrap;
  word-break:break-word;
}

/* ===== Dark Mode ===== */
[data-bs-theme="dark"]{
  --app-bg:#101827;
  --app-card:#182234;
  --app-border:#2a374c;
  --app-text:#e7edf7;
  --app-muted:#9aa8bb;
}
[data-bs-theme="dark"] body{background:var(--app-bg);color:var(--app-text)}
[data-bs-theme="dark"] .app-desktop-topbar{background:#182234;border-color:#2a374c}
[data-bs-theme="dark"] .page-title{color:#f5f8fc}
[data-bs-theme="dark"] .card,[data-bs-theme="dark"] .modal-content{background:var(--app-card)}
[data-bs-theme="dark"] .card-header,[data-bs-theme="dark"] .card-footer{background:var(--app-card)}
[data-bs-theme="dark"] .table{--bs-table-bg:transparent;--bs-table-color:#e8edf5}
[data-bs-theme="dark"] .table thead th{background:#202c3f;color:#cbd5e1;border-color:#2c3a50}
[data-bs-theme="dark"] .table tbody td{border-color:#28354a}
[data-bs-theme="dark"] .table-hover>tbody>tr:hover>*{--bs-table-bg-state:#202c3f}
[data-bs-theme="dark"] .form-control,[data-bs-theme="dark"] .form-select{background:#111a29;color:#e5e7eb;border-color:#37465c}
[data-bs-theme="dark"] .form-label{color:#d6deea}
[data-bs-theme="dark"] .bg-white{background:var(--app-card)!important}
[data-bs-theme="dark"] .bg-light{background:#1d293b!important}
[data-bs-theme="dark"] .app-user-btn{background:#202c3f;color:#e5e7eb}

/* ===== Responsive all device ===== */
@media (min-width:1200px){
  .app-mobile-topbar{display:none!important}
}
@media (max-width:1199.98px){
  .app-main{margin-left:0}
  .app-content{padding:1rem}
  .app-mobile-topbar{display:flex!important}
}
@media (max-width:991.98px){
  .page-title{font-size:1.5rem}
  .card-body{padding:1rem}
  .table-responsive{
    overflow-x:auto;
    -webkit-overflow-scrolling:touch;
  }
}
@media (max-width:767.98px){
  body{font-size:13px}
  .app-content{padding:.85rem}
  .page-title{font-size:1.38rem}
  .desktop-table{display:none!important}
  .mobile-card-list{display:block}
  .responsive-actions{justify-content:flex-start}
  .filter-stack>.col,.filter-stack>[class*="col-"]{width:100%}
  .table thead th,.table tbody td{padding:.65rem .68rem}
}
@media (max-width:575.98px){
  .page-toolbar{
    flex-direction:column;
    align-items:stretch!important;
  }
  .page-toolbar .btn,.page-toolbar .form-select{width:100%}
  .app-footer{flex-direction:column;padding:.75rem .85rem}
}

/* Landscape iPad safety */
@media (min-width:768px) and (max-width:1199.98px){
  .app-offcanvas{width:300px!important}
  .app-content{padding:1.1rem 1.2rem}
}

/* Print */
@media print{
  .app-sidebar,.app-mobile-topbar,.app-desktop-topbar,.app-footer,.offcanvas,.btn,.no-print{display:none!important}
  .app-main{margin-left:0!important}
  .app-content{padding:0!important}
  body{background:#fff!important}
  .card{box-shadow:none!important;border-color:#ddd!important}
  .table-responsive{overflow:visible!important}
}