:root {
  --ink: #0f172a;
  --muted: #64748b;
  --line: #dbe4f0;
  --soft: #f8fafc;
  --brand: #0f766e;
  --brand-blue: #2563eb;
  --brand-violet: #7c3aed;
  --shadow: 0 18px 45px rgba(15, 23, 42, .09);
}

* { box-sizing: border-box; }

html { background: #eef4f8; }

body {
  color: var(--ink);
  background:
    radial-gradient(circle at top left, rgba(15, 118, 110, .16), transparent 34rem),
    radial-gradient(circle at top right, rgba(124, 58, 237, .12), transparent 32rem),
    linear-gradient(180deg, #f8fbfd 0%, #eef4f8 100%);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

.topbar {
  border-bottom: 1px solid rgba(219, 228, 240, .9);
  background: rgba(255, 255, 255, .84);
  backdrop-filter: blur(18px);
  box-shadow: 0 10px 35px rgba(15, 23, 42, .06);
}

.brand-link { min-width: max-content; }

.brand-mark,
.login-logo {
  width: 2.55rem;
  height: 2.55rem;
  display: grid;
  place-items: center;
  border-radius: 1rem;
  background: linear-gradient(135deg, #08111f, #17324a);
  box-shadow: 0 12px 26px rgba(37, 99, 235, .25);
}

.brand-mark svg,
.login-logo svg {
  width: 1.85rem;
  height: 1.85rem;
}

.brand-mark path:first-child,
.login-logo path:first-child {
  fill: #47d5c5;
}

.brand-mark path:last-child,
.login-logo path:last-child {
  fill: #ffffff;
}

.brand-name {
  color: #111827;
  font-size: 1.05rem;
  font-weight: 800;
  letter-spacing: 0;
}

.app-nav {
  scrollbar-width: none;
}

.app-nav::-webkit-scrollbar { display: none; }

.nav-pill {
  display: inline-flex;
  align-items: center;
  gap: .45rem;
  min-height: 2.25rem;
  padding: .48rem .72rem;
  border-radius: 999px;
  color: #475569;
  font-size: .875rem;
  font-weight: 650;
  white-space: nowrap;
  transition: background .18s ease, color .18s ease, transform .18s ease;
}

.nav-pill svg {
  width: 1rem;
  height: 1rem;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.nav-pill:hover {
  color: #0f172a;
  background: rgba(15, 118, 110, .08);
}

.nav-pill.is-active {
  color: #0f766e;
  background: linear-gradient(135deg, rgba(15, 118, 110, .14), rgba(37, 99, 235, .1));
  box-shadow: inset 0 0 0 1px rgba(15, 118, 110, .16);
}

.icon-btn,
.logout-btn {
  min-width: max-content;
  border-radius: 999px;
  color: #475569;
  background: rgba(241, 245, 249, .8);
  transition: background .18s ease, color .18s ease, transform .18s ease;
}

.icon-btn {
  width: 2.35rem;
  height: 2.35rem;
  display: grid;
  place-items: center;
}

.logout-btn {
  padding: .55rem .85rem;
  font-size: .84rem;
  font-weight: 650;
}

.icon-btn:hover,
.logout-btn:hover {
  color: #0f172a;
  background: #e2e8f0;
}

.user-chip {
  padding: .35rem .65rem;
  border: 1px solid rgba(219, 228, 240, .9);
  border-radius: 999px;
  background: rgba(255, 255, 255, .65);
}

.page-main { min-height: calc(100vh - 4.25rem); }

.bg-white.rounded-lg.border {
  border-color: rgba(219, 228, 240, .95) !important;
  border-radius: 1rem !important;
  background: rgba(255, 255, 255, .92) !important;
  box-shadow: var(--shadow);
}

h1, h2 { letter-spacing: 0; }

table {
  border-collapse: separate;
  border-spacing: 0;
}

thead {
  background: linear-gradient(180deg, #f8fafc, #eef6f8);
}

th {
  color: #475569;
  font-size: .72rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .04em;
}

td, th {
  border-bottom: 1px solid rgba(226, 232, 240, .85);
}

tbody tr {
  transition: background .15s ease;
}

tbody tr:hover {
  background: rgba(15, 118, 110, .045);
}

input, select, textarea, button {
  font: inherit;
}

input:not([type="checkbox"]):not([type="radio"]),
select,
textarea {
  border-color: #cbd5e1 !important;
  border-radius: .75rem !important;
  background: rgba(255, 255, 255, .95);
  transition: border-color .16s ease, box-shadow .16s ease, background .16s ease;
}

input:not([type="checkbox"]):not([type="radio"]):focus,
select:focus,
textarea:focus {
  border-color: var(--brand) !important;
  box-shadow: 0 0 0 4px rgba(15, 118, 110, .14) !important;
  outline: none !important;
}

button, a {
  -webkit-tap-highlight-color: transparent;
}

button[class*="bg-blue-600"],
button[class*="bg-indigo-600"] {
  background: linear-gradient(135deg, var(--brand), var(--brand-blue)) !important;
  box-shadow: 0 10px 22px rgba(37, 99, 235, .18);
}

.modal-backdrop {
  position: fixed;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 50;
  padding: 1rem;
  background: rgba(8, 17, 31, .56);
  backdrop-filter: blur(10px);
}

.modal-card {
  width: 100%;
  max-width: 42rem;
  max-height: 90vh;
  overflow-y: auto;
  border: 1px solid rgba(226, 232, 240, .9);
  border-radius: 1.25rem;
  background: rgba(255, 255, 255, .97);
  box-shadow: 0 30px 70px rgba(15, 23, 42, .28);
}

#notifPanel {
  border-color: rgba(219, 228, 240, .95);
  background: rgba(255, 255, 255, .97);
  backdrop-filter: blur(18px);
}

.login-body {
  background:
    radial-gradient(circle at 18% 12%, rgba(15, 118, 110, .24), transparent 20rem),
    radial-gradient(circle at 88% 8%, rgba(124, 58, 237, .18), transparent 24rem),
    linear-gradient(145deg, #08111f 0%, #123345 46%, #eef7f7 46.2%, #f8fafc 100%);
}

.login-card {
  border: 1px solid rgba(255, 255, 255, .65);
  border-radius: 1.5rem;
  background: rgba(255, 255, 255, .93);
  box-shadow: 0 30px 80px rgba(8, 17, 31, .28);
  backdrop-filter: blur(18px);
}

.login-logo {
  width: 4.25rem;
  height: 4.25rem;
  border-radius: 1.3rem;
}

.login-logo svg {
  width: 3rem;
  height: 3rem;
}

.login-input:focus {
  box-shadow: 0 0 0 4px rgba(15, 118, 110, .14) !important;
}

.login-button {
  background: linear-gradient(135deg, var(--brand), var(--brand-blue));
  box-shadow: 0 14px 28px rgba(37, 99, 235, .24);
  transition: transform .18s ease, box-shadow .18s ease;
}

.login-button:hover {
  transform: translateY(-1px);
  box-shadow: 0 18px 34px rgba(37, 99, 235, .28);
}

@media (max-width: 760px) {
  .topbar-inner {
    flex-wrap: wrap;
    row-gap: .75rem;
  }

  .brand-name { display: inline !important; }

  .app-nav {
    order: 5;
    width: 100%;
    margin: 0 -.25rem;
    padding: .1rem .25rem .25rem;
  }

  .nav-pill {
    min-height: 2.55rem;
    padding: .58rem .82rem;
  }

  .page-main {
    padding: 1rem !important;
  }

  .page-main > .flex:first-child {
    align-items: flex-start;
    flex-direction: column;
    gap: .85rem;
  }

  table {
    min-width: 760px;
  }

  .modal-backdrop {
    align-items: flex-end;
    padding: .75rem;
  }

  .modal-card {
    max-height: 92vh;
    border-radius: 1.1rem;
  }

  .login-body {
    background:
      radial-gradient(circle at 20% 8%, rgba(15, 118, 110, .25), transparent 18rem),
      linear-gradient(160deg, #08111f 0%, #123345 38%, #f8fafc 38.2%, #eef4f8 100%);
  }
}

@media print {
  header, nav, .no-print, button { display: none !important; }
  body { background: white !important; }
  main { padding: 0 !important; max-width: none !important; }
  .bg-white.rounded-lg.border { box-shadow: none !important; border: 0 !important; }
}