:root{
  --canvas:#D5D5D5;
  --surface:#FFFFFF;
  --surface-muted:#F3F4F6;
  --border:#D1D5DB;
  --text:#111827;
  --text-muted:#6B7280;
  --text-faint:#9CA3AF;

  --primary:#0D6EFD;
  --primary-hover:#0B5ED7;
  --primary-soft:#E7F1FF;

  --sidebar-top:#52607E;
  --sidebar-mid:#474E5F;
  --sidebar-bottom:#3B3E41;
  --sidebar-text:#E5E7EB;
  --sidebar-icon:#C7CEDB;
  --sidebar-active-bg:rgba(255,255,255,0.10);
  --sidebar-active-icon:var(--primary);

  --danger-bg:#F8D7DA;
  --danger-border:#F1AEB5;
  --warning-bg:#FFF3CD;
  --warning-border:#FFECB5;
  --success-bg:#D1F2E0;
  --success-border:#A7E3C6;
  --info-bg:#E7F1FF;
  --info-border:#B6D4FE;

  --radius-card:14px;
  --radius-input:8px;
  --radius-pill:999px;
  --radius-modal:24px;

  --shadow-card:0 2px 10px rgba(0,0,0,0.10);
  --shadow-float:0 10px 25px rgba(0,0,0,0.18);
  --shadow-button:0 6px 16px rgba(13,110,253,0.25);

  --space-xs:4px;
  --space-sm:8px;
  --space-md:12px;
  --space-lg:16px;
  --space-xl:24px;
  --space-2xl:32px;

  --focus-ring:0 0 0 3px rgba(13,110,253,0.20);
  --font:ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, "Apple Color Emoji", "Segoe UI Emoji";
}

*{box-sizing:border-box;}
html,body{height:100%;}
body{
  margin:0;
  font-family:var(--font);
  color:var(--text);
  background:var(--canvas);
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
}
img{max-width:100%;height:auto;}
a{color:var(--primary);text-decoration:none;}
a:hover{text-decoration:underline;}

/* App layout */
.layout{
  display:grid;
  grid-template-columns:300px 1fr;
  min-height:100vh;
}
body[data-sidebar-collapsed="true"] .layout{grid-template-columns:80px 1fr;}
.sidebar{
  background:linear-gradient(180deg,var(--sidebar-top),var(--sidebar-mid),var(--sidebar-bottom));
  color:var(--sidebar-text);
  padding:var(--space-xl) var(--space-lg);
  position:sticky;
  top:0;
  height:100vh;
  overflow:auto;
}
body[data-sidebar-collapsed="true"] .sidebar{padding:var(--space-xl) var(--space-sm);}
.sidebar-brand{
  display:flex;
  align-items:center;
  gap:var(--space-sm);
  font-weight:800;
  letter-spacing:0.2px;
  margin-bottom:var(--space-xl);
  white-space:nowrap;
}
.sidebar-brand .brand-mark{
  width:36px;
  height:36px;
  border-radius:12px;
  background:rgba(255,255,255,0.18);
  display:grid;
  place-items:center;
  box-shadow:0 2px 10px rgba(0,0,0,0.12);
}
.sidebar-brand .brand-mark img{width:22px;height:22px;object-fit:contain;display:block;filter:drop-shadow(0 1px 0 rgba(0,0,0,0.08));}
body[data-sidebar-collapsed="true"] .sidebar-brand .brand-text{display:none;}

.nav{
  display:flex;
  flex-direction:column;
  gap:6px;
}
.nav-section{
  opacity:0.85;
  font-size:12px;
  font-weight:700;
  margin:var(--space-lg) 0 var(--space-sm);
  letter-spacing:0.3px;
  white-space:nowrap;
}
body[data-sidebar-collapsed="true"] .nav-section{display:none;}
.nav-link{
  display:flex;
  align-items:center;
  gap:10px;
  padding:10px 12px;
  border-radius:12px;
  color:var(--sidebar-text);
  text-decoration:none;
  transition:background 160ms ease, transform 160ms ease, opacity 160ms ease;
  opacity:0.92;
}
.nav-link:hover{background:rgba(255,255,255,0.08);opacity:1;}
.nav-link[aria-current="page"]{background:var(--sidebar-active-bg);opacity:1;}
.nav-link .icon{
  width:20px;
  height:20px;
  color:var(--sidebar-icon);
  flex:0 0 auto;
}
.nav-link[aria-current="page"] .icon{color:var(--sidebar-active-icon);}
body[data-sidebar-collapsed="true"] .nav-link{justify-content:center;padding:12px;border-radius:16px;}
body[data-sidebar-collapsed="true"] .nav-link .label{display:none;}
.nav-spacer{flex:1 1 auto;}

.main{
  padding:var(--space-xl);
  display:flex;
  flex-direction:column;
  gap:var(--space-xl);
}

/* Topbar */
.topbar{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:var(--space-lg);
}
.page-title{
  margin:0;
  font-size:44px;
  line-height:1.05;
  font-weight:800;
  letter-spacing:-0.02em;
}
.topbar-actions{
  display:flex;
  align-items:center;
  gap:var(--space-sm);
}
.user-pill{
  display:flex;
  align-items:center;
  gap:10px;
  padding:10px 12px;
  background:rgba(255,255,255,0.75);
  border:1px solid rgba(209,213,219,0.6);
  border-radius:var(--radius-pill);
  backdrop-filter:blur(6px);
}
.avatar{
  width:32px;
  height:32px;
  border-radius:50%;
  background:linear-gradient(180deg,#dbeafe,#bfdbfe);
  border:1px solid rgba(13,110,253,0.25);
}
.user-meta{display:flex;flex-direction:column;line-height:1.1;}
.user-name{font-weight:700;font-size:13px;}
.user-role{font-size:12px;color:var(--text-muted);}

/* Cards */
.card{
  background:var(--surface);
  border-radius:var(--radius-card);
  box-shadow:var(--shadow-card);
  padding:var(--space-xl);
}
.card-header{display:flex;align-items:center;justify-content:space-between;gap:var(--space-lg);margin-bottom:var(--space-lg);}
.card-title{margin:0;font-size:18px;font-weight:800;}
.card-subtitle{margin:0;color:var(--text-muted);font-size:13px;}

/* Grid */
.grid{display:grid;gap:var(--space-lg);}
.grid.cols-2{grid-template-columns:repeat(2,minmax(0,1fr));}
.grid.cols-3{grid-template-columns:repeat(3,minmax(0,1fr));}
.grid.cols-4{grid-template-columns:repeat(4,minmax(0,1fr));}
@media (max-width: 1000px){
  .layout{grid-template-columns:80px 1fr;}
  .grid.cols-4,.grid.cols-3{grid-template-columns:repeat(2,minmax(0,1fr));}
}
@media (max-width: 720px){
  .main{padding:var(--space-lg);}
  .page-title{font-size:34px;}
  .grid.cols-4,.grid.cols-3,.grid.cols-2{grid-template-columns:1fr;}
}

/* Buttons */
.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:10px;
  border-radius:var(--radius-pill);
  padding:10px 16px;
  min-height:40px;
  border:1px solid transparent;
  font-weight:700;
  font-size:14px;
  cursor:pointer;
  user-select:none;
  transition:transform 120ms ease, box-shadow 160ms ease, background 160ms ease, border-color 160ms ease, color 160ms ease, opacity 160ms ease;
}
.btn:active{transform:translateY(1px);}
.btn:disabled{opacity:0.55;cursor:not-allowed;transform:none;}
.btn[aria-busy="true"]{opacity:0.85;cursor:progress;}
.btn .spinner{
  width:16px;height:16px;border-radius:999px;
  border:2px solid rgba(255,255,255,0.45);
  border-top-color:#fff;
  animation:spin 0.9s linear infinite;
}
.btn-secondary .spinner{
  border-color:rgba(17,24,39,0.25);
  border-top-color:rgba(17,24,39,0.75);
}

.btn-primary{background:var(--primary);color:#fff;box-shadow:var(--shadow-button);}
.btn-primary:hover{background:var(--primary-hover);}
.btn-primary:disabled{box-shadow:none;}

.btn-secondary{background:#fff;color:var(--text);border-color:var(--border);box-shadow:none;}
.btn-secondary:hover{border-color:#b9c0cb;background:#fbfbfc;}

.btn-ghost{background:transparent;color:var(--text);border-color:transparent;}
.btn-ghost:hover{background:rgba(0,0,0,0.04);}

.btn-icon{
  width:40px;
  height:40px;
  padding:0;
  border-radius:999px;
  background:#fff;
  border:1px solid rgba(209,213,219,0.9);
}
.btn-icon:hover{border-color:#b9c0cb;}

/* Forms */
.form{display:flex;flex-direction:column;gap:var(--space-lg);}
.field{display:flex;flex-direction:column;gap:6px;}
.label{font-size:12px;font-weight:800;color:var(--text);letter-spacing:0.2px;}
.input,.select,.textarea{
  width:100%;
  background:var(--surface-muted);
  border:1px solid var(--border);
  border-radius:var(--radius-input);
  padding:0 12px;
  min-height:44px;
  font-size:14px;
  outline:none;
  transition:border-color 140ms ease, box-shadow 140ms ease, background 140ms ease;
}
.textarea{padding:10px 12px;min-height:110px;resize:vertical;}
.select{appearance:none;background-image:linear-gradient(45deg,transparent 50%,#6b7280 50%),linear-gradient(135deg,#6b7280 50%,transparent 50%);background-position:calc(100% - 18px) 50%, calc(100% - 12px) 50%;background-size:6px 6px, 6px 6px;background-repeat:no-repeat;padding-right:34px;}
.input:focus,.select:focus,.textarea:focus{border-color:var(--primary);box-shadow:var(--focus-ring);background:#fff;}
.help{font-size:12px;color:var(--text-muted);}
.error-text{font-size:12px;color:#b42318;}
.field[data-invalid="true"] .input,
.field[data-invalid="true"] .select,
.field[data-invalid="true"] .textarea{border-color:var(--danger-border);box-shadow:0 0 0 3px rgba(176,0,32,0.14);}

.row{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:var(--space-lg);
}
@media (max-width: 720px){.row{grid-template-columns:1fr;}}

/* Responsive form grid: 1 col small, up to 3 cols large */
.form-grid{
  display:grid;
  grid-template-columns:1fr;
  gap:var(--space-lg);
}
.form-grid.compact-5{
  grid-template-columns:repeat(5, minmax(0, 1fr));
  gap:var(--space-sm);
}
@media (min-width: 900px){
  .form-grid.max-3{grid-template-columns:repeat(2, minmax(0,1fr));}
}
@media (min-width: 1200px){
  .form-grid.max-3{grid-template-columns:repeat(3, minmax(0,1fr));}
}
@media (max-width: 900px){
  .form-grid.compact-5{grid-template-columns:repeat(2, minmax(0, 1fr));}
}
@media (max-width: 720px){
  .form-grid.compact-5{grid-template-columns:1fr;}
}
.span-all{grid-column:1 / -1;}

.check{
  display:flex;
  align-items:center;
  gap:10px;
  font-size:13px;
  color:var(--text);
}
.check input{width:18px;height:18px;}

/* Tabs */
.tabs{
  display:flex;
  align-items:center;
  gap:6px;
  padding:6px;
  background:rgba(0,0,0,0.06);
  border-radius:999px;
}
.tab{
  border:1px solid transparent;
  background:transparent;
  padding:8px 12px;
  border-radius:999px;
  font-weight:800;
  font-size:13px;
  cursor:pointer;
  color:var(--text-muted);
}
.tab[aria-selected="true"]{
  background:#fff;
  color:var(--text);
  border-color:rgba(209,213,219,0.9);
  box-shadow:0 2px 10px rgba(0,0,0,0.08);
}

/* Table */
.table{
  width:100%;
  border-collapse:separate;
  border-spacing:0;
  overflow:hidden;
  border-radius:12px;
  border:1px solid var(--border);
}
.table thead th{
  background:#D1D5DB;
  text-align:left;
  padding:12px;
  font-size:12px;
  font-weight:900;
  letter-spacing:0.25px;
}
.table tbody td{
  background:#fff;
  padding:12px;
  border-top:1px solid rgba(209,213,219,0.65);
  font-size:13px;
}
.table tbody tr:nth-child(even) td{background:#F3F4F6;}

/* Badges */
.badge{
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding:6px 10px;
  border-radius:999px;
  font-size:12px;
  font-weight:800;
  border:1px solid var(--border);
  background:#f7f7f8;
  color:var(--text);
}
.badge.info{background:var(--info-bg);border-color:var(--info-border);}
.badge.success{background:var(--success-bg);border-color:var(--success-border);}
.badge.warning{background:var(--warning-bg);border-color:var(--warning-border);}
.badge.danger{background:var(--danger-bg);border-color:var(--danger-border);}

/* Alerts */
.alert{
  padding:12px 14px;
  border-radius:12px;
  border:1px solid var(--border);
  background:#fff;
  display:flex;
  align-items:flex-start;
  gap:10px;
}
.alert .dot{
  width:10px;
  height:10px;
  border-radius:999px;
  margin-top:4px;
  border:2px solid currentColor;
  opacity:0.9;
}
.alert .title{font-weight:900;font-size:13px;margin:0;}
.alert .desc{margin:2px 0 0;color:var(--text-muted);font-size:12px;}
.alert.danger{background:var(--danger-bg);border-color:var(--danger-border);color:#7a0c16;}
.alert.warning{background:var(--warning-bg);border-color:var(--warning-border);color:#6b4e00;}
.alert.success{background:var(--success-bg);border-color:var(--success-border);color:#14532d;}
.alert.info{background:var(--info-bg);border-color:var(--info-border);color:#0b4db7;}
.alert[hidden]{display:none !important;}
.alert.enter{animation:fadeUp 180ms ease-out both;}

.shake{animation:shake 420ms cubic-bezier(.36,.07,.19,.97) both;}
.pulse{animation:pulse 320ms ease-out both;}

/* Progress */
.progress{
  height:8px;
  background:#E5E7EB;
  border-radius:999px;
  overflow:hidden;
}
.progress > .bar{
  height:100%;
  background:var(--primary);
  width:0%;
  transition:width 240ms ease;
}

/* Modal */
.modal-backdrop{
  position:fixed;
  inset:0;
  background:rgba(17,24,39,0.55);
  display:none;
  align-items:center;
  justify-content:center;
  padding:24px;
  z-index:50;
}
.modal-backdrop[data-open="true"]{display:flex;}
.modal{
  width:min(920px,100%);
  background:var(--surface);
  border-radius:var(--radius-modal);
  box-shadow:var(--shadow-float);
  overflow:hidden;
  max-height:calc(100vh - 48px);
  display:flex;
  flex-direction:column;
}
.modal.modal-small{width:min(420px,100%);}
.modal-header,.modal-footer{padding:16px 18px;display:flex;align-items:center;justify-content:space-between;gap:12px;}
.modal-header{border-bottom:1px solid rgba(209,213,219,0.7);}
.modal-title{margin:0;font-size:16px;font-weight:900;}
.modal-body{padding:18px;overflow:auto;}
.modal-footer{border-top:1px solid rgba(209,213,219,0.7);justify-content:flex-end;}
body.modal-open{overflow:hidden;}

/* Modal panels / tab content */
.tabset{display:flex;flex-direction:column;gap:12px;}
.tab-panels{min-height:120px;}
.panel-card{
  background:rgba(255,255,255,0.85);
  border:1px solid rgba(209,213,219,0.75);
  border-radius:14px;
  padding:14px;
  box-shadow:0 8px 18px rgba(0,0,0,0.08);
  overflow:auto;
}
.panel-title{
  font-weight:900;
  font-size:13px;
  letter-spacing:0.2px;
  margin:0 0 10px 0;
}
.modal .tabs{flex-wrap:wrap;justify-content:flex-start;}
.modal .tab{white-space:nowrap;}

/* Toasts */
.toast-container{
  position:fixed;
  bottom:20px;
  right:20px;
  display:flex;
  flex-direction:column;
  gap:10px;
  z-index:60;
}
.toast{
  width:min(380px, calc(100vw - 40px));
  background:rgba(255,255,255,0.92);
  border:1px solid rgba(209,213,219,0.8);
  border-left:6px solid var(--info-border);
  border-radius:14px;
  box-shadow:var(--shadow-float);
  padding:12px 12px 12px 14px;
  backdrop-filter:blur(10px);
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:12px;
}
.toast .msg{font-size:13px;color:var(--text);margin:0;}
.toast.info{border-left-color:var(--info-border);}
.toast.success{border-left-color:var(--success-border);}
.toast.warning{border-left-color:var(--warning-border);}
.toast.danger{border-left-color:var(--danger-border);}

/* Auth pages */
.auth-shell{
  min-height:100vh;
  display:grid;
  place-items:center;
  padding:var(--space-2xl) var(--space-lg);
  position:relative;
  overflow:hidden;
  background: url(/assets/img/background_login_page.png);
  background-repeat: no-repeat;
  background-size: cover;
  background-position:center;
}
.auth-shell::before{
  content:"";
  position:absolute;
  inset:0;
  background:
    radial-gradient(closest-side, rgba(13,110,253,0.18), transparent 62%) 18% 20%/55% 55% no-repeat,
    radial-gradient(closest-side, rgba(82,96,126,0.22), transparent 66%) 80% 30%/60% 60% no-repeat,
    radial-gradient(closest-side, rgba(59,62,65,0.14), transparent 70%) 60% 85%/65% 65% no-repeat,
    linear-gradient(180deg, rgba(213,213,213,0.55), rgba(213,213,213,0.55));
  opacity:0.9;
  pointer-events:none;
  transform:translateZ(0);
}
.auth-card{
  width:min(520px, 100%);
  position:relative;
}
.auth-header{
  display:flex;
  align-items:center;
  justify-content:center;
  flex-direction:column;
  gap:8px;
  margin-bottom:var(--space-lg);
}
.auth-header .auth-logo{
  display:block;
  width:min(240px, 70vw);
  height:auto;
  filter:drop-shadow(0 10px 26px rgba(0,0,0,0.10));
}
.auth-header .auth-tagline{
  font-size:10px;
  letter-spacing:0.26em;
  text-transform:uppercase;
  color:rgba(17,24,39,0.75);
  margin-top:-2px;
}
.auth-subtitle{margin:0;color:var(--text-muted);text-align:center;font-size:13px;}
.auth-footer{
  margin-top:var(--space-lg);
  text-align:center;
  font-size:13px;
  color:var(--text-muted);
}

.auth-card .card{
  background:rgba(255,255,255,0.92);
  border:1px solid rgba(209,213,219,0.65);
  box-shadow:0 18px 50px rgba(17,24,39,0.22);
  backdrop-filter:blur(10px);
}

/* Utilities */
.muted{color:var(--text-muted);}
.faint{color:var(--text-faint);}
.right{margin-left:auto;}
.center{text-align:center;}
.stack-sm{display:flex;flex-direction:column;gap:var(--space-sm);}
.stack-md{display:flex;flex-direction:column;gap:var(--space-md);}
.stack-lg{display:flex;flex-direction:column;gap:var(--space-lg);}
.spacer{height:var(--space-lg);}
.sr-only{
  position:absolute;
  width:1px;height:1px;
  padding:0;margin:-1px;
  overflow:hidden;clip:rect(0,0,0,0);
  white-space:nowrap;border:0;
}

@media (prefers-reduced-motion: reduce){
  *{transition:none !important;scroll-behavior:auto !important;}
}

@keyframes spin{to{transform:rotate(360deg);}}
@keyframes fadeUp{
  from{opacity:0;transform:translateY(6px);}
  to{opacity:1;transform:translateY(0);}
}
@keyframes shake{
  10%, 90%{transform:translateX(-1px);}
  20%, 80%{transform:translateX(2px);}
  30%, 50%, 70%{transform:translateX(-4px);}
  40%, 60%{transform:translateX(4px);}
}
@keyframes pulse{
  from{transform:scale(0.985);}
  to{transform:scale(1);}
}

/* ---------------- App shell (dashboard layout) ---------------- */
.app-shell{
  --bg:#f3f4f6;
  --card:#ffffff;
  --muted:#8b8f97;
  --text:#111827;
  --nav-w:290px;
  --nav-w-collapsed:88px;
  --nav-1:#233f78;
  --nav-2:#0b1424;
  --radius:14px;
  --shadow:0 10px 24px rgba(0,0,0,.18);
  --shadow-soft:0 8px 18px rgba(0,0,0,.10);
  --blue:#2563eb;
  background:#fff;
}

.app-shell .app{
  min-height:100vh;
  display:grid;
  grid-template-columns:var(--nav-w) 1fr;
  grid-template-rows:64px 1fr;
  background:#fff;
}

body.is-collapsed.app-shell .app{
  grid-template-columns:var(--nav-w-collapsed) 1fr;
}

.app-shell .topbar{
  grid-column:1 / -1;
  grid-row:1;
  height:64px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:0 18px;
  border-bottom:1px solid #e5e7eb;
  background:#fff;
}

.app-shell .topbar-left{
  display:flex;
  align-items:center;
  gap:14px;
}

.app-shell .brand{
  display:flex;
  align-items:flex-end;
  gap:12px;
  padding-left:0;
}

.app-shell .brand .title{
  font-weight:900;
  letter-spacing:.5px;
  font-size:40px;
  line-height:1;
  margin:0;
}

.app-shell .brand .version{
  font-size:13px;
  color:var(--muted);
  margin-bottom:6px;
}

.app-shell .breadcrumbs{
  display:flex;
  align-items:center;
  gap:8px;
  font-size:13px;
  color:var(--muted);
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
  max-width:min(58vw, 560px);
}

.app-shell .breadcrumbs a{
  color:inherit;
  text-decoration:none;
}

.app-shell .breadcrumbs a:hover{
  color:#111827;
  text-decoration:underline;
}

.app-shell .breadcrumbs .sep{
  opacity:.6;
}

.app-shell .breadcrumbs .current{
  color:#111827;
  font-weight:700;
}

.app-shell .topbar-right{
  display:flex;
  align-items:center;
  gap:18px;
}

.app-shell .icon-btn{
  width:36px;
  height:36px;
  border:none;
  border-radius:10px;
  background:#f3f4f6;
  display:grid;
  place-items:center;
  cursor:pointer;
  transition:background 160ms ease;
}

.app-shell .icon-btn:hover{background:#e9eef7;}

@media (min-width: 901px){
  body[data-sidebar-behavior="expanded"] [data-sidebar-toggle]{
    opacity:.45;
    pointer-events:none;
  }
}

.app-shell .user{
  display:flex;
  align-items:center;
  gap:10px;
  padding:8px 10px;
  border-radius:12px;
  cursor:pointer;
  border:none;
  background:transparent;
  color:inherit;
}

.app-shell .user:focus{outline:none;box-shadow:var(--focus-ring);background:rgba(37,99,235,0.06);}

.app-shell .avatar{
  width:34px;height:34px;border-radius:999px;
  background:radial-gradient(circle at 30% 30%, #ffd1b3, #f59e0b);
  display:inline-block;
}

.app-shell .user .meta{
  display:flex;
  flex-direction:column;
  line-height:1.1;
}
.app-shell .user .name{font-weight:700;font-size:14px;}
.app-shell .user .sub{font-size:11px;color:var(--muted);margin-top:2px;}
.app-shell .user-menu-card{
  display:flex;
  align-items:center;
  gap:12px;
  padding:12px;
  border-radius:14px;
  border:1px solid #e5e7eb;
  background:#f9fafb;
}
.app-shell .user-menu-name{font-weight:800;font-size:14px;}
.app-shell .user-menu-sub{font-size:12px;color:var(--muted);margin-top:2px;}
.app-shell .user-menu-role{
  margin-left:auto;
  font-size:11px;
  font-weight:700;
  color:var(--muted);
  padding:4px 8px;
  border-radius:999px;
  border:1px solid #e5e7eb;
  background:#fff;
}
.app-shell .user-menu-actions{
  margin-top:14px;
  display:grid;
  gap:8px;
}
.app-shell .user-menu-actions form{margin:0;}
.app-shell .user-menu-link{
  width:100%;
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:10px 12px;
  border-radius:12px;
  border:1px solid #e5e7eb;
  background:#fff;
  color:var(--text);
  font-weight:700;
  text-decoration:none;
  cursor:pointer;
}
.app-shell .user-menu-link:hover{background:#f3f4f6;}
.app-shell .user-menu-link.danger{
  color:#b91c1c;
  border-color:#fecaca;
  background:#fff5f5;
}

/* Sidebar */
.app-shell .sidebar{
  grid-column:1;
  grid-row:2;
  padding:14px 0 14px 14px;
  background:#fff;
  position:static;
  height:auto;
  overflow:visible;
}

.app-shell .nav-shell{
  height:calc(100vh - 64px - 28px);
  background:linear-gradient(180deg, var(--nav-1), var(--nav-2));
  border-radius:var(--radius);
  box-shadow:var(--shadow);
  position:relative;
  overflow:hidden;
}
.app-shell .nav-inner{
  height:100%;
  display:flex;
  flex-direction:column;
}
.app-shell .nav-header{
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:16px 14px 10px 14px;
}
.app-shell .nav-toggle{
  width:40px;height:38px;
  border:none;
  border-radius:12px;
  background:rgba(255,255,255,.10);
  color:#fff;
  cursor:pointer;
  display:grid;
  place-items:center;
  transition:background 160ms ease;
}
.app-shell .nav-toggle:hover{background:rgba(255,255,255,.16);}

.app-shell .nav-scroll{
  padding:6px 10px;
  overflow:auto;
  scrollbar-width:thin;
  scrollbar-color:rgba(255,255,255,.25) transparent;
}
.app-shell .nav-scroll::-webkit-scrollbar{width:10px;}
.app-shell .nav-scroll::-webkit-scrollbar-thumb{
  background:rgba(255,255,255,.18);
  border-radius:999px;
  border:3px solid transparent;
  background-clip:content-box;
}
.app-shell .nav-group{margin-top:6px;}

.app-shell .nav-item{
  width:100%;
  display:flex;
  align-items:center;
  gap:10px;
  padding:10px 12px;
  color:rgba(255,255,255,.92);
  text-decoration:none;
  border-radius:12px;
  font-size:13px;
  font-weight:650;
  cursor:pointer;
  user-select:none;
  background:transparent;
  border:none;
  text-align:left;
  transition:background 160ms ease;
}
.app-shell .nav-item-link{
  display:flex;
  align-items:center;
  gap:10px;
  flex:1;
  min-width:0;
  color:inherit;
  text-decoration:none;
}
.app-shell .nav-item-link:hover{text-decoration:none;}
.app-shell .nav-item:hover{background:rgba(255,255,255,.08);}
.app-shell .nav-item.active{
  background:rgba(255,255,255,.12);
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.10);
}
.app-shell .nav-icon{
  width:18px;height:18px;
  display:grid;
  place-items:center;
  opacity:.95;
  flex:0 0 18px;
}
.app-shell .nav-label{
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
  flex:1;
  transition:opacity .15s ease, width .2s ease;
}
.app-shell .chev{
  width:14px;height:14px;
  opacity:.75;
  transform:rotate(0deg);
  transition:transform .18s ease, opacity .15s ease, width .2s ease;
  flex:0 0 14px;
}
.app-shell details.nav-details[open] > summary .chev{transform:rotate(90deg);}
.app-shell details.nav-details{margin:2px 0;}
.app-shell details.nav-details summary{list-style:none;}
.app-shell details.nav-details summary::-webkit-details-marker{display:none;}
.app-shell .sub{
  margin:2px 0 8px 28px;
  display:flex;
  flex-direction:column;
  gap:2px;
}
.app-shell .sub a{
  display:flex;
  align-items:center;
  gap:10px;
  padding:8px 12px;
  border-radius:10px;
  color:rgba(255,255,255,.82);
  font-size:12.5px;
  font-weight:600;
  text-decoration:none;
  opacity:.95;
  transition:background 160ms ease;
}
.app-shell .sub a:hover{background:rgba(255,255,255,.08);}
.app-shell .sub a.active{
  background:rgba(255,255,255,.12);
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.10);
}
.app-shell .sub .sub{margin-left:18px;}
.app-shell .sub summary.nav-item.sub-item{
  padding:8px 12px;
  font-size:12.5px;
  font-weight:650;
  color:rgba(255,255,255,.86);
}
.app-shell .sub summary.nav-item.sub-item .nav-icon{opacity:.92;}
.app-shell .sub summary.nav-item.sub-item .chev{opacity:.7;}
.app-shell .nav-divider{
  height:1px;
  background:rgba(255,255,255,.10);
  margin:10px 12px;
}
.app-shell .nav-footer{margin-top:auto;padding:10px;}
.app-shell .settings{
  display:flex;
  align-items:center;
  gap:10px;
  padding:12px 12px;
  border-radius:12px;
  color:rgba(255,255,255,.88);
  text-decoration:none;
  font-weight:700;
  font-size:13px;
  transition:background 160ms ease;
}
.app-shell .settings:hover{background:rgba(255,255,255,.08);}

/* Collapsed behavior */
body.is-collapsed.app-shell .sidebar{padding-left:10px;}
body.is-collapsed.app-shell .nav-label,
body.is-collapsed.app-shell .chev{
  opacity:0;
  width:0;
  pointer-events:none;
}
body.is-collapsed.app-shell .sub{display:none;}
body.is-collapsed.app-shell .nav-item{justify-content:center;gap:0;}
body.is-collapsed.app-shell .nav-item .nav-icon{margin-left:2px;}

/* Main */
.app-shell .main{
  grid-column:2;
  grid-row:2;
  background:#fff;
  padding:16px 18px 24px 18px;
  display:block;
}
.app-shell .surface{
  background:#efefef;
  border-radius:18px;
  padding:18px;
  box-shadow:var(--shadow-soft);
  min-height:calc(100vh - 64px - 32px);
  overflow:hidden;
}
.app-shell .grid{
  display:grid;
  grid-template-columns:repeat(4, minmax(180px, 1fr));
  gap:14px;
}
.app-shell .card{
  background:var(--card);
  border-radius:12px;
  box-shadow:0 6px 16px rgba(0,0,0,.10);
  padding:14px 14px;
  border:1px solid #f0f0f0;
  min-height:96px;
}
.app-shell .kicker{font-size:14px;font-weight:800;}
.app-shell .metric{font-size:36px;font-weight:900;margin-top:8px;}
.app-shell .hint{font-size:12px;color:var(--muted);margin-top:6px;}
.app-shell .row2{
  margin-top:14px;
  display:grid;
  grid-template-columns:1.3fr 1fr 1fr;
  gap:14px;
}
.app-shell .headerline{
  display:flex;
  align-items:center;
  justify-content:space-between;
  margin-bottom:10px;
}
.app-shell .headerline .h{font-weight:900;font-size:16px;}
.app-shell .headerline a{
  color:var(--blue);
  font-weight:800;
  font-size:12px;
  text-decoration:none;
}
.app-shell .pill{
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding:10px 12px;
  border-radius:12px;
  border:1px solid #e5e7eb;
  background:#fff;
  margin-top:8px;
  font-size:12px;
  justify-content:space-between;
}
.app-shell .counter-panel{
  display:flex;
  flex-direction:column;
  gap:14px;
}
.app-shell .counter-toolbar{
  display:flex;
  align-items:flex-end;
  justify-content:space-between;
  gap:12px;
  flex-wrap:wrap;
}
.app-shell .counter-section{
  display:flex;
  flex-direction:column;
  gap:8px;
}
.app-shell .counter-actions{
  display:flex;
  gap:10px;
  flex-wrap:wrap;
  justify-content:flex-end;
}
.app-shell .counter-actions-bottom{margin-top:4px;}
@media (max-width: 1100px){
  .app-shell .grid{grid-template-columns:repeat(2, minmax(180px, 1fr));}
  .app-shell .row2{grid-template-columns:1fr;}
}
@media (max-width: 900px){
  .app-shell .app{grid-template-columns:1fr;}
  body.is-collapsed.app-shell .app{grid-template-columns:1fr;}
  .app-shell .topbar{padding:0 12px;}
  .app-shell .brand .title{font-size:28px;}
  .app-shell .brand .version{display:none;}
  .app-shell .topbar-right{gap:10px;}
  .app-shell .sidebar{
    grid-column:1;
    grid-row:2;
    position:fixed;
    top:64px;
    left:0;
    height:calc(100vh - 64px);
    width:min(88vw, var(--nav-w));
    padding:12px 0 12px 12px;
    z-index:40;
    transform:translateX(0);
    transition:transform 200ms ease;
  }
  .app-shell .nav-shell{height:100%;}
  body.is-collapsed.app-shell .sidebar{transform:translateX(-110%);}
  .app-shell .main{
    grid-column:1;
    padding:12px;
  }
  .app-shell .surface{
    padding:14px;
    min-height:calc(100vh - 64px - 24px);
  }
}
@media (max-width: 720px){
  .app-shell .grid{grid-template-columns:1fr;}
  .app-shell .user .meta{display:none;}
  .app-shell .user{padding:6px 8px;}
}

/* Maintenance Program page */
.mp-header{
  display:flex;
  align-items:flex-end;
  justify-content:space-between;
  gap:14px;
  margin-bottom:12px;
}
.mp-title{
  margin:0;
  font-size:28px;
  font-weight:900;
  letter-spacing:-0.01em;
}
.mp-filters{
  display:grid;
  grid-template-columns: 1fr 160px auto;
  gap:12px;
  align-items:center;
  margin: 10px 0 12px;
}
.mp-filters .input, .mp-filters .select{min-height:38px;}
.mp-actions{display:flex;gap:10px;justify-content:flex-end;}
.mp-card{
  overflow:hidden;
}
.mp-meta{
  padding:12px 14px;
  font-size:12px;
  color:var(--text-muted);
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
}
.mp-empty{
  padding:28px 18px;
  text-align:center;
  color:var(--text-muted);
}
.mp-empty .strong{color:var(--text);font-weight:900;}
@media (max-width: 900px){
  .mp-filters{grid-template-columns:1fr;}
  .mp-actions{justify-content:stretch;}
  .mp-actions .btn{width:100%;}
}