/* Minimal app design system */

:root {
  --brand: #2563eb;
  --brand-600: #1d4ed8;
  --brand-50: #eff6ff;
  --surface: #ffffff;
  --surface-muted: #f8fafc;
  --text: #111827;
  --muted: #6b7280;
  --border: #e2e8f0;
  --border-strong: #cbd5e1;
  --success: #16a34a;
  --warning: #f59e0b;
  --danger: #ef4444;
}

body {
  background: var(--surface-muted);
  color: var(--text);
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  line-height: 1.6;
}

a { color: var(--brand); }
a:hover { color: var(--brand-600); }

/* Layout shell */
.app-shell { min-height: 100vh; background: var(--surface-muted); }
.app-navbar { position: sticky; top: 0; z-index: 40; background: rgba(255,255,255,.9); border-bottom: 1px solid rgba(148,163,184,.12); box-shadow: 0 6px 18px rgba(15,23,42,.05); backdrop-filter: blur(12px); }
.app-navbar::after { display:none; }
.app-navbar-inner { position:relative; z-index:1; max-width: 98rem; margin: 0 auto; padding: .6rem 1.5rem; display:flex; align-items:center; justify-content:space-between; gap:1rem; }
.app-navbar-left { display:flex; align-items:center; gap:.85rem; flex:1 1 auto; min-width:0; }
.app-navbar-right { display:flex; align-items:center; gap:.75rem; flex-shrink:0; }
.app-navbar-toggle { display:none !important; align-items:center; justify-content:center; margin-right:.6rem; }
.app-navbar-overflow { display:none; align-items:center; justify-content:center; margin-left:.15rem; transition:opacity .2s ease, transform .2s ease; }
.app-navbar-overflow.is-visible { display:flex; opacity:1; }
.app-navbar-overflow:not(.is-visible) { opacity:0; pointer-events:none; transform:translateX(.4rem); }
.app-navbar-menu { position:relative; display:flex; align-items:center; gap:.1rem; flex-wrap:nowrap; overflow:visible; scrollbar-width:none; padding-right:.2rem; min-width:0; }
.app-navbar-menu::-webkit-scrollbar { display:none; }
.app-navbar-menu::before,
.app-navbar-menu::after { content:''; position:absolute; top:0; width:0; height:100%; pointer-events:none; opacity:0; transition:opacity .2s ease, width .2s ease; }
.app-navbar-menu::before { inset-inline-start:-1px; background:linear-gradient(to right, rgba(255,255,255,.95), rgba(255,255,255,0)); }
.app-navbar-menu::after { inset-inline-end:-1px; background:linear-gradient(to left, rgba(255,255,255,.95), rgba(255,255,255,0)); }
.app-navbar-menu.can-scroll-left::before { width:32px; opacity:1; }
.app-navbar-menu.can-scroll-right::after { width:32px; opacity:1; }
/* Show the mobile navbar toggle only for viewports smaller than 992px
   (matches the JS desktop breakpoint: min-width: 992px) */
@media (max-width: 991px) {
  .app-navbar-toggle { display:flex !important; }
}
.app-navbar .brand { display:flex; align-items:center; gap:.6rem; font-weight:700; font-size:1rem; color: var(--text); letter-spacing:.01em; text-decoration:none; white-space:nowrap; flex-shrink:0; padding:.15rem .5rem; border-radius:.6rem; }
.app-navbar .brand::before { content:''; width:.5rem; height:.5rem; border-radius:9999px; background: var(--brand); box-shadow:0 0 0 6px rgba(37,99,235,.06); }
.app-navbar .nav-link {
  color: var(--muted);
  padding:.5rem .9rem;
  border-radius:.8rem;
  border:1px solid transparent;
  background:transparent;
  font-weight:600;
  transition: all .18s cubic-bezier(.2,.9,.2,1);
  position:relative;
  display:inline-flex;
  align-items:center;
  gap:.35rem;
  text-decoration:none;
  white-space:nowrap;
  line-height:1;
  cursor:pointer;
}
.app-navbar .nav-link:hover,
.app-navbar .nav-link:focus {
  color: var(--brand-600);
  background: rgba(59,130,246,.08);
  border-color: rgba(59,130,246,.12);
  text-decoration:none;
  transform: translateY(-2px);
  box-shadow: 0 6px 14px rgba(15,23,42,.04);
}
.app-navbar .nav-link.active {
  color: var(--brand-600);
  background: rgba(59,130,246,.12);
  border-color: rgba(59,130,246,.18);
  box-shadow: 0 6px 20px rgba(37,99,235,.08);
}
.app-navbar .dropdown { position: relative; z-index:50; }
.app-navbar .dropdown-menu { display:none; position:absolute; top:calc(100% + .45rem); left:0; min-width: 13rem; background: var(--surface); border:1px solid rgba(148,163,184,.12); border-radius:.7rem; padding:.35rem; box-shadow:0 24px 48px rgba(15,23,42,.12); z-index:60; }
.app-navbar .dropdown.open .dropdown-menu { display:block; }
.app-navbar .dropdown.show .dropdown-menu { display:block; }
.app-navbar .dropdown > button.nav-link { display:inline-flex; align-items:center; gap:.45rem; }
.app-navbar .dropdown > button.nav-link .fa-chevron-down { font-size:10px; opacity:.7; }
/* Support both 'open' and 'show' class semantics (some scripts toggle 'show') */
.app-navbar .dropdown.show .dropdown-menu { display:block; }
.app-navbar .dropdown-menu a { color: var(--text); padding:.6rem .85rem; border-radius:.6rem; display:block; font-size:.92rem; font-weight:500; transition:background .15s ease; }
.app-navbar .dropdown-menu a:hover { background: rgba(37,99,235,.1); text-decoration:none; color:var(--brand-600); }
.app-navbar .dropdown-menu a.active { background: rgba(37,99,235,.16); color: var(--brand-600); font-weight:600; }
.app-navbar .mobile-nav-panel { background:var(--surface); border:1px solid var(--border); border-radius:.85rem; padding:1rem; margin-top:.75rem; box-shadow:0 18px 36px rgba(15,23,42,.08); }
.app-navbar .mobile-nav-link { border:1px solid transparent; display:flex; align-items:center; justify-content:space-between; padding:.75rem 1rem; border-radius:.65rem; color:var(--text); font-weight:500; transition:all .15s ease; }
.app-navbar .mobile-nav-link:hover { background:rgba(37,99,235,.08); text-decoration:none; }
.app-navbar .mobile-nav-link.active { background:rgba(37,99,235,.12); color:var(--brand-600); border-color:rgba(37,99,235,.18); }
.app-navbar .mobile-dropdown { border:1px solid var(--border); border-radius:.85rem; background:var(--surface); transition:border-color .2s ease, box-shadow .2s ease; }
.app-navbar .mobile-dropdown + .mobile-dropdown { margin-top:.5rem; }
.app-navbar .mobile-dropdown.open { border-color:rgba(37,99,235,.35); box-shadow:0 16px 32px rgba(37,99,235,.12); }
.app-navbar .mobile-dropdown-toggle { width:100%; display:flex; align-items:center; justify-content:space-between; gap:.75rem; padding:.75rem 1rem; background:none; border:none; color:var(--text); font-weight:600; cursor:pointer; }
.app-navbar .mobile-dropdown-toggle .fa { font-size:12px; transition:transform .2s ease; }
.app-navbar .mobile-dropdown.open .mobile-dropdown-toggle .fa { transform:rotate(180deg); }
.app-navbar .mobile-dropdown-menu { border-top:1px solid var(--border); padding:.45rem 0; }
.app-navbar .mobile-dropdown-link { display:block; padding:.55rem 1rem; color:var(--muted); font-weight:500; }
.app-navbar .mobile-dropdown-link:hover { color:var(--brand-600); background:rgba(37,99,235,.08); text-decoration:none; }
.app-navbar .mobile-dropdown-link.active { color:var(--brand-600); background:rgba(37,99,235,.12); }
.notif-panel { position:absolute; right:0; margin-top:.6rem; width:320px; background:var(--surface); border:1px solid var(--border); border-radius:.75rem; box-shadow:0 20px 40px rgba(15,23,42,.18); overflow:hidden; }
.notif-header { padding:.85rem 1rem; border-bottom:1px solid var(--border); display:flex; align-items:center; justify-content:space-between; font-weight:600; color:var(--text); }
.notif-list { max-height:320px; overflow:auto; }
.notif-empty { padding:1rem; font-size:.88rem; color:var(--muted); }
.notif-footer { padding:.7rem 1rem; border-top:1px solid var(--border); text-align:center; font-size:.78rem; }

/* Calendar */
.calendar-chip,
.calendar-legend__swatch {
  --calendar-chip-bg: rgba(148,163,184,.14);
  --calendar-chip-border: rgba(148,163,184,.28);
  --calendar-chip-color: var(--text);
}

.calendar-chip {
  display:flex;
  align-items:flex-start;
  gap:.55rem;
  padding:.5rem .75rem;
  border-radius:.85rem;
  background:var(--calendar-chip-bg);
  border:1px solid var(--calendar-chip-border);
  color:var(--calendar-chip-color);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.35);
  transition:background .2s ease, border-color .2s ease;
  min-height:2.25rem;
}

.calendar-chip__dot {
  width:.6rem;
  height:.6rem;
  border-radius:9999px;
  background:var(--calendar-chip-color);
  flex-shrink:0;
  margin-top:.2rem;
}

.calendar-chip__text { display:flex; flex-direction:column; gap:.2rem; line-height:1.25; }
.calendar-chip__title { font-size:.78rem; font-weight:600; color:var(--calendar-chip-color); }
.calendar-chip__meta { font-size:.7rem; color:var(--calendar-chip-color); opacity:.75; letter-spacing:.01em; }

.calendar-legend__section { display:flex; flex-direction:column; }
.calendar-legend__heading { font-weight:600; font-size:.9rem; color:var(--text); margin-bottom:.45rem; }
.calendar-legend__list { display:flex; flex-direction:column; gap:.5rem; }
.calendar-legend__item { display:flex; align-items:center; gap:.6rem; font-size:.82rem; color:var(--muted); }
.calendar-legend__label { font-weight:600; color:var(--text); font-size:.82rem; }
.calendar-legend__swatch {
  width:.8rem;
  height:.8rem;
  border-radius:9999px;
  border:1px solid var(--calendar-chip-border);
  background:var(--calendar-chip-color);
  box-shadow:0 0 0 4px var(--calendar-chip-bg);
  flex-shrink:0;
}

.calendar-tone--holiday-public {
  --calendar-chip-bg: rgba(14,165,233,.16);
  --calendar-chip-border: rgba(14,165,233,.28);
  --calendar-chip-color: #0e7490;
}

.calendar-tone--holiday-company {
  --calendar-chip-bg: rgba(251,191,36,.18);
  --calendar-chip-border: rgba(217,119,6,.3);
  --calendar-chip-color: #92400e;
}

.calendar-tone--holiday-generic {
  --calendar-chip-bg: rgba(96,165,250,.18);
  --calendar-chip-border: rgba(59,130,246,.3);
  --calendar-chip-color: #1d4ed8;
}

.calendar-tone--leave-pending {
  --calendar-chip-bg: rgba(253,186,116,.2);
  --calendar-chip-border: rgba(249,115,22,.32);
  --calendar-chip-color: #c2410c;
}

.calendar-tone--leave-approved-partial {
  --calendar-chip-bg: rgba(167,139,250,.2);
  --calendar-chip-border: rgba(124,58,237,.32);
  --calendar-chip-color: #5b21b6;
}

.calendar-tone--leave-approved {
  --calendar-chip-bg: rgba(74,222,128,.18);
  --calendar-chip-border: rgba(34,197,94,.3);
  --calendar-chip-color: #166534;
}

.calendar-tone--leave-rejected {
  --calendar-chip-bg: rgba(248,113,113,.18);
  --calendar-chip-border: rgba(239,68,68,.32);
  --calendar-chip-color: #b91c1c;
}

.calendar-tone--wfh-pending {
  --calendar-chip-bg: rgba(196,181,253,.22);
  --calendar-chip-border: rgba(167,139,250,.32);
  --calendar-chip-color: #5b21b6;
}

.calendar-tone--wfh-approved {
  --calendar-chip-bg: rgba(125,211,252,.18);
  --calendar-chip-border: rgba(45,212,191,.3);
  --calendar-chip-color: #0f766e;
}

.calendar-tone--wfh-rejected {
  --calendar-chip-bg: rgba(244,114,182,.2);
  --calendar-chip-border: rgba(236,72,153,.32);
  --calendar-chip-color: #be185d;
}

.calendar-tone--generic {
  --calendar-chip-bg: rgba(148,163,184,.18);
  --calendar-chip-border: rgba(148,163,184,.3);
  --calendar-chip-color: #475569;
}
.notif-badge { position:absolute; top:-4px; right:-6px; background:var(--danger); color:#fff; border-radius:9999px; padding:1px 6px; font-size:.7rem; font-weight:600; }
.app-navbar .actions { display:flex; align-items:center; gap:.75rem; }

.app-main { max-width: 90rem; margin: 0 auto; padding: 1.5rem 1.25rem 3rem; }
.app-page-header { display:flex; align-items:flex-start; justify-content:space-between; gap:1rem; margin-bottom:1.5rem; }
.app-page-title { font-size:1.5rem; font-weight:600; color: var(--text); }
.app-meta { color: var(--muted); font-size:.9rem; }

/* Cards */
.card { background: var(--surface); border:1px solid var(--border); border-radius:.9rem; box-shadow:0 12px 20px rgba(15,23,42,.04); }
.card-header { padding:1rem 1.25rem; border-bottom:1px solid var(--border); font-weight:600; display:flex; align-items:center; justify-content:space-between; }
.card-body { padding:1.25rem; }
.card subtle { box-shadow:none; }

/* Buttons */
.btn { display:inline-flex; align-items:center; gap:.4rem; padding:.55rem .95rem; border-radius:.6rem; border:1px solid transparent; font-weight:600; font-size:.95rem; cursor:pointer; transition: all .15s ease; }
.btn:hover { text-decoration:none; transform:translateY(-1px); box-shadow:0 6px 16px rgba(37,99,235,.1); }
.btn-primary { background:var(--brand); border-color:var(--brand); color:#fff; }
.btn-primary:hover { background:var(--brand-600); border-color:var(--brand-600); }
.btn-secondary { background:var(--surface); border-color:var(--border-strong); color:var(--text); }
.btn-secondary:hover { border-color:var(--brand-600); color:var(--brand-600); box-shadow:none; transform:none; }
.btn-danger { background:var(--danger); border-color:var(--danger); color:#fff; }
.btn-sm { padding:.4rem .7rem; font-size:.82rem; border-radius:.5rem; }
.btn-link { background:transparent; border-color:transparent; color:var(--brand); padding:0; }
.btn-link:hover { color:var(--brand-600); box-shadow:none; transform:none; }

/* Form elements */
input[type="text"], input[type="email"], input[type="password"], input[type="date"], input[type="number"], select, textarea {
  width:100%; border:1px solid var(--border); border-radius:.6rem; padding:.55rem .75rem; font-size:.95rem; background:var(--surface); transition:border-color .15s ease, box-shadow .2s ease;
}
input:focus, select:focus, textarea:focus {
  border-color: var(--brand);
  box-shadow: 0 0 0 3px rgba(37,99,235,.15);
  outline:none;
}
label { font-weight:500; color: var(--muted); margin-bottom:.35rem; display:inline-block; }

/* Tables */
.table { width:100%; border-collapse:separate; border-spacing:0; }
.table thead th { background: var(--surface-muted); color: var(--muted); font-size:.75rem; letter-spacing:.08em; text-transform:uppercase; border-bottom:1px solid var(--border); padding:.75rem; }
.table tbody td { border-bottom:1px solid var(--border); padding:.75rem; font-size:.92rem; color:var(--text); }
.table tbody tr:last-child td { border-bottom:none; }
.table-striped tbody tr:nth-child(even) { background:rgba(148,163,184,.08); }
.table-compact thead th { font-size:.72rem; padding:.55rem .6rem !important; }
.table-compact th, .table-compact td { padding:.5rem .6rem !important; line-height:1.35; }
.table-compact tbody td { font-size:.85rem; }
.table-compact tfoot td { background: var(--surface-muted); font-weight:600; }

.dataTables_wrapper {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 1rem;
  padding: 1.2rem 1.4rem;
  box-shadow: 0 16px 32px rgba(15, 23, 42, .08);
  margin-bottom: 1.75rem;
}

.dataTables_wrapper .dataTables_length,
.dataTables_wrapper .dataTables_filter {
  display:flex;
  align-items:center;
  gap:.65rem;
  margin-bottom:1rem;
  color:var(--muted);
  font-weight:600;
  flex-wrap:wrap;
}

.dataTables_wrapper .dataTables_length select {
  border:1px solid var(--border);
  border-radius:.65rem;
  padding:.45rem .6rem;
  font-size:.92rem;
  background:var(--surface-muted);
  transition:border-color .15s ease, box-shadow .2s ease;
  min-width:90px;
}

.dataTables_wrapper .dataTables_filter input {
  border:1px solid var(--border);
  border-radius:.65rem;
  padding:.45rem .75rem;
  font-size:.92rem;
  background:var(--surface-muted);
  transition:border-color .15s ease, box-shadow .2s ease;
  min-width:220px;
}

.dataTables_wrapper .dataTables_filter input:focus,
.dataTables_wrapper .dataTables_length select:focus {
  border-color:var(--brand);
  box-shadow:0 0 0 3px rgba(37,99,235,.18);
  outline:none;
}

.dataTables_wrapper table.dataTable {
  border-radius:.85rem;
  border:1px solid rgba(148,163,184,.35);
  overflow:hidden;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.65);
}

.dataTables_wrapper table.dataTable thead th {
  background: rgba(37,99,235,.06);
  color:var(--muted);
  border-bottom:1px solid rgba(148,163,184,.35);
  font-weight:600;
  letter-spacing:.02em;
}

.dataTables_wrapper table.dataTable tbody td {
  border-bottom:1px solid rgba(148,163,184,.2);
  font-size:.92rem;
  color:var(--text);
}
.dataTables_wrapper table.dataTable tbody td.dataTables_empty {
  padding:2rem 1rem;
  color:var(--muted);
  background:rgba(148,163,184,.08);
}

.dataTables_wrapper table.dataTable tbody tr:last-child td { border-bottom:none; }
.dataTables_wrapper table.dataTable tbody tr:hover { background:rgba(37,99,235,.08); }

.dataTables_wrapper .dataTables_info {
  margin-top:.75rem;
  color:var(--muted);
  font-size:.85rem;
}

.dataTables_wrapper .dataTables_paginate {
  margin-top:.75rem;
  display:flex;
  gap:.35rem;
  justify-content:flex-end;
  align-items:center;
  flex-wrap:wrap;
}

.dataTables_wrapper .dataTables_paginate .paginate_button {
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:34px;
  height:34px;
  border-radius:.65rem;
  border:1px solid var(--border);
  color:var(--muted) !important;
  font-weight:600;
  background:var(--surface-muted);
  transition:all .15s ease;
  cursor:pointer;
}

.dataTables_wrapper .dataTables_paginate .paginate_button:hover {
  border-color:var(--brand);
  color:var(--brand-600) !important;
  background:rgba(37,99,235,.12);
}

.dataTables_wrapper .dataTables_paginate .paginate_button.current {
  border-color:var(--brand);
  background:var(--brand);
  color:#fff !important;
  box-shadow:0 8px 18px rgba(37,99,235,.18);
}

.dataTables_wrapper .dataTables_paginate .paginate_button.disabled {
  opacity:.45;
  cursor:not-allowed;
}

.dataTables_wrapper .table-empty {
  padding:2rem 1rem;
  text-align:center;
  color:var(--muted);
  font-size:.95rem;
}

/* Chips / badges */
.badge { display:inline-flex; align-items:center; padding:.2rem .55rem; font-size:.72rem; font-weight:600; border-radius:9999px; letter-spacing:.02em; }
.badge-success { background:rgba(22,163,74,.14); color:#166534; }
.badge-warning { background:rgba(245,158,11,.14); color:#92400e; }
.badge-danger { background:rgba(239,68,68,.14); color:#991b1b; }
.badge-info { background:rgba(37,99,235,.14); color:#1d4ed8; }

/* Alerts */
.alert { border-radius:.75rem; border:1px solid var(--border); padding:1rem 1.1rem; background:var(--surface); }
.alert-success { border-color:rgba(22,163,74,.25); background:rgba(22,163,74,.08); color:#166534; }
.alert-danger { border-color:rgba(239,68,68,.25); background:rgba(239,68,68,.08); color:#991b1b; }
.alert-warning { border-color:rgba(245,158,11,.25); background:rgba(245,158,11,.1); color:#b45309; }

/* Cards grid helpers */
.stats-grid { display:grid; gap:1rem; grid-template-columns:repeat(auto-fit,minmax(220px,1fr)); }
.stacked-table { border-radius:.9rem; overflow:hidden; border:1px solid var(--border); }

/* Utility classes */
.muted { color:var(--muted); }
.shadow-hover:hover { box-shadow:0 16px 30px rgba(15,23,42,.12); }
.surface-muted { background: var(--surface-muted); }
.text-brand { color: var(--brand); }

@media (max-width: 991px) {
  .app-navbar-inner { padding:0 1rem; }
  .app-navbar-toggle { display:flex; }
  .app-navbar-menu { display:none; }
  .mobile-nav-panel { display:block; width:100%; }
  .mobile-nav-panel.hidden { display:none; }
  .app-navbar-right { gap:.6rem; }
  .nav-user-chip { display:none; }
}

/* Brand overrides for Tailwind CDN utility collisions */
.bg-blue-600, .bg-blue-700, .btn-primary { background-color: var(--brand) !important; border-color: var(--brand) !important; }
.bg-blue-700:hover { background-color: var(--brand-600) !important; }

/* Dark appearance (optional toggle) */
.dark {
  --surface: #111827;
  --surface-muted: #0f172a;
  --text: #e2e8f0;
  --muted: #94a3b8;
  --border: #1f2937;
  --border-strong: #334155;
}
.dark body { background: var(--surface-muted); color: var(--text); }
.dark .card { background: var(--surface); border-color: var(--border); box-shadow:none; }
.dark .table thead th { background:#1f2937; color:#cbd5f5; }
.dark .table tbody td { border-color:#1f2937; }
.dark .app-navbar { background: var(--surface); border-color: var(--border); box-shadow:none; }
.mobile-nav-panel { display:none; }
.mobile-nav-panel.hidden { display:none; }
.mobile-nav-panel:not(.hidden) { display:block; }
.icon-btn { width:40px; height:40px; border-radius:9999px; border:1px solid rgba(148,163,184,.22); background: var(--surface); color: var(--muted); display:flex; align-items:center; justify-content:center; transition:all .18s cubic-bezier(.2,.9,.2,1); box-shadow:0 6px 14px rgba(15,23,42,.06); flex-shrink:0; }
.icon-btn:hover { color: var(--brand-600); border-color: rgba(37,99,235,.32); box-shadow:0 10px 22px rgba(37,99,235,.10); transform: translateY(-2px); }
.icon-btn .fa { font-size:16px; }
.nav-user-chip { display:flex; align-items:center; gap:.55rem; padding:.3rem .8rem; border-radius:9999px; background: rgba(148,163,184,.08); border:1px solid rgba(148,163,184,.18); box-shadow: inset 0 1px 0 rgba(255,255,255,.45); max-width:14rem; min-width:0; }
.nav-user-meta { display:flex; flex-direction:column; gap:.1rem; }
.nav-user-meta .nav-user-label { font-size:.68rem; text-transform:uppercase; letter-spacing:.08em; color:var(--muted); }
.nav-user-meta .nav-user-email { font-size:.72rem; font-weight:600; color:var(--text); }

.card table { border: none; }
.card .table-responsive { border-radius: 1rem; overflow: hidden; border:1px solid rgba(148,163,184,.28); box-shadow: inset 0 1px 0 rgba(255,255,255,.6); }
.card .table-responsive table { background: var(--surface); }
.card .table-responsive table thead tr { background: rgba(37,99,235,.06); }
.card .table-responsive table thead th { border-bottom: 1px solid rgba(148,163,184,.35); font-weight:600; color:var(--muted); letter-spacing:.02em; }
.card .table-responsive table tbody td { border-bottom:1px solid rgba(148,163,184,.18); }
.card .table-responsive table tbody tr:hover { background: rgba(37,99,235,.08); }

.app-datatable { background: var(--surface); border:1px solid var(--border); border-radius:1rem; padding:1.2rem 1.4rem; box-shadow:0 16px 32px rgba(15,23,42,.08); margin-bottom:1.75rem; }
.app-datatable .dataTables_length, .app-datatable .dataTables_filter { display:flex; align-items:center; gap:.65rem; flex-wrap:wrap; margin-bottom:1rem; color:var(--muted); font-weight:600; }
.app-datatable .dataTables_length select { min-width:95px; max-width:140px; border:1px solid var(--border); border-radius:.65rem; padding:.45rem .6rem; background:var(--surface-muted); }
.app-datatable .dataTables_filter input { min-width:220px; max-width:320px; border:1px solid var(--border); border-radius:.65rem; padding:.45rem .75rem; background:var(--surface-muted); transition:border-color .15s ease, box-shadow .2s ease; }
.app-datatable .dataTables_filter input:focus, .app-datatable .dataTables_length select:focus { border-color: var(--brand); box-shadow:0 0 0 3px rgba(37,99,235,.18); outline:none; }
.app-datatable table.dataTable { border-radius:.85rem; border:1px solid rgba(148,163,184,.35); overflow:hidden; box-shadow: inset 0 1px 0 rgba(255,255,255,.65); background: var(--surface); }
.app-datatable table.dataTable thead th { background: rgba(37,99,235,.06); color:var(--muted); border-bottom:1px solid rgba(148,163,184,.35); font-weight:600; letter-spacing:.02em; }
.app-datatable table.dataTable tbody td { border-bottom:1px solid rgba(148,163,184,.2); font-size:.92rem; color:var(--text); }
.app-datatable table.dataTable tbody tr:hover { background:rgba(37,99,235,.08); }
.app-datatable table.dataTable tbody td.dataTables_empty { padding:2rem 1rem; color:var(--muted); background:rgba(148,163,184,.08); }
.app-datatable .dataTables_info { margin-top:.75rem; color:var(--muted); font-size:.85rem; }
.app-datatable .dataTables_paginate { margin-top:.75rem; display:flex; gap:.35rem; justify-content:flex-end; align-items:center; flex-wrap:wrap; }
.app-datatable .dataTables_paginate .paginate_button { display:inline-flex; align-items:center; justify-content:center; width:34px; height:34px; border-radius:.65rem; border:1px solid var(--border); color:var(--muted) !important; font-weight:600; background:var(--surface-muted); transition:all .15s ease; cursor:pointer; }
.app-datatable .dataTables_paginate .paginate_button:hover { border-color:var(--brand); color:var(--brand-600) !important; background:rgba(37,99,235,.12); }
.app-datatable .dataTables_paginate .paginate_button.current { border-color:var(--brand); background:var(--brand); color:#fff !important; box-shadow:0 8px 18px rgba(37,99,235,.18); }
.app-datatable .dataTables_paginate .paginate_button.disabled { opacity:.45; cursor:not-allowed; }

@media (max-width: 640px) { .app-navbar-menu { display:none; } #navOverflowToggle { display:none; } }

@media (min-width: 992px) {
  .mobile-nav-panel { display:none !important; }
}