/* ───────────────────────────────────────────────────────────────
   App-wide CSS — written as plain CSS so we don't depend on
   Tailwind Play CDN successfully processing @apply at runtime.
   This guarantees component classes (.btn-*, .card, .input, .badge-*,
   .page-h1, .empty, .panel-brand, etc.) always render correctly.
   ─────────────────────────────────────────────────────────────── */

/* Alpine cloak */
[x-cloak] { display: none !important; }

/* Smoother focus rings */
*:focus-visible {
  outline: 2px solid rgb(99 102 241 / 0.6);
  outline-offset: 2px;
  border-radius: 4px;
}

/* Slim modern scrollbars */
* {
  scrollbar-width: thin;
  scrollbar-color: rgb(203 213 225) transparent;
}
*::-webkit-scrollbar { width: 8px; height: 8px; }
*::-webkit-scrollbar-track { background: transparent; }
*::-webkit-scrollbar-thumb {
  background-color: rgb(203 213 225);
  border-radius: 8px;
  border: 2px solid transparent;
  background-clip: content-box;
}
*::-webkit-scrollbar-thumb:hover { background-color: rgb(148 163 184); }

/* Tabular numerics */
.tabular-nums, table, .nums {
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum";
}

/* Heading tracking */
h1, h2, h3, h4 { letter-spacing: -0.02em; font-weight: 600; }
h1 { letter-spacing: -0.025em; }

/* Mono / kbd */
pre, code, kbd {
  font-family: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, monospace;
}
kbd {
  font-size: 0.7em;
  padding: 1px 5px;
  border: 1px solid rgb(226 232 240);
  border-bottom-width: 2px;
  border-radius: 4px;
  background: white;
  color: rgb(71 85 105);
}

::selection {
  background-color: rgb(199 210 254);
  color: rgb(49 46 129);
}

.bg-dotted {
  background-image: radial-gradient(rgb(203 213 225) 1px, transparent 1px);
  background-size: 16px 16px;
}

/* Compact charts — cap height so they never dominate the page */
canvas { max-height: 260px; }

/* ─── Buttons ─────────────────────────────────────────────── */
.btn, .btn-primary, .btn-brand, .btn-ghost, .btn-danger {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.375rem;
  padding: 0.5rem 0.875rem;
  font-size: 0.875rem;
  font-weight: 500;
  border-radius: 0.5rem;
  transition: all 0.15s ease;
  cursor: pointer;
  border: 1px solid transparent;
  text-decoration: none;
  line-height: 1.25rem;
}
.btn { color: rgb(51 65 85); background: white; border-color: rgb(226 232 240); }
.btn:hover { background: rgb(248 250 252); }
.btn-primary {
  color: white;
  background: linear-gradient(to bottom, rgb(30 41 59), rgb(15 23 42));
  box-shadow: 0 1px 2px 0 rgb(15 23 42 / 0.06);
}
.btn-primary:hover { background: linear-gradient(to bottom, rgb(51 65 85), rgb(30 41 59)); }
.btn-brand {
  color: white;
  background: linear-gradient(to bottom, rgb(99 102 241), rgb(79 70 229));
  box-shadow: 0 1px 2px 0 rgb(15 23 42 / 0.06);
}
.btn-brand:hover { background: linear-gradient(to bottom, rgb(129 140 248), rgb(99 102 241)); }
.btn-ghost {
  color: rgb(51 65 85);
  background: white;
  border-color: rgb(226 232 240);
}
.btn-ghost:hover { background: rgb(248 250 252); border-color: rgb(203 213 225); }
.btn-danger {
  color: rgb(220 38 38);
  background: white;
  border-color: rgb(254 202 202);
}
.btn-danger:hover { background: rgb(254 242 242); }
.btn:focus-visible, .btn-primary:focus-visible, .btn-brand:focus-visible,
.btn-ghost:focus-visible, .btn-danger:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px rgb(99 102 241 / 0.25);
}
.btn-sm  { padding: 0.375rem 0.625rem; font-size: 0.75rem; }
.btn-xs  { padding: 0.25rem 0.5rem; font-size: 0.6875rem; border-radius: 0.375rem; }
.btn:disabled { opacity: 0.5; cursor: not-allowed; }

/* ─── Cards ───────────────────────────────────────────────── */
.card {
  background: white;
  border: 1px solid rgb(226 232 240);
  border-radius: 0.75rem;
  padding: 1.25rem;
  box-shadow: 0 1px 2px 0 rgb(15 23 42 / 0.04), 0 1px 3px 0 rgb(15 23 42 / 0.06);
}
.card-hover {
  background: white;
  border: 1px solid rgb(226 232 240);
  border-radius: 0.75rem;
  padding: 1.25rem;
  box-shadow: 0 1px 2px 0 rgb(15 23 42 / 0.04), 0 1px 3px 0 rgb(15 23 42 / 0.06);
  transition: all 0.15s ease;
  display: block;
  text-decoration: none;
  color: inherit;
}
.card-hover:hover {
  border-color: rgb(203 213 225);
  box-shadow: 0 1px 3px 0 rgb(15 23 42 / 0.05), 0 4px 16px -4px rgb(15 23 42 / 0.06);
}
/* Tailwind p-* utilities should still win over the baseline padding,
   so the existing usages (p-0, p-3, etc.) keep working unchanged. */
.card-pad { padding: 1.25rem; }

/* Stat tile — large number with label + optional icon block */
.stat {
  background: white;
  border: 1px solid rgb(226 232 240);
  border-radius: 0.875rem;
  padding: 1.25rem 1.25rem 1.125rem;
  box-shadow: 0 1px 2px 0 rgb(15 23 42 / 0.04), 0 1px 3px 0 rgb(15 23 42 / 0.06);
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  position: relative;
  overflow: hidden;
}
.stat-label {
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: rgb(100 116 139);
}
.stat-value {
  font-size: 1.5rem;
  line-height: 1.1;
  font-weight: 700;
  color: rgb(15 23 42);
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.02em;
}
.stat-sub {
  font-size: 0.6875rem;
  color: rgb(100 116 139);
  margin-top: 0.125rem;
}
.stat-icon {
  position: absolute;
  top: 1rem; right: 1rem;
  width: 2.25rem; height: 2.25rem;
  border-radius: 0.5rem;
  display: flex;
  align-items: center;
  justify-content: center;
}
/* Accent variants */
.stat-indigo  { border-left: 3px solid rgb(99 102 241); }
.stat-indigo .stat-icon  { background: rgb(238 242 255); color: rgb(79 70 229); }
.stat-emerald { border-left: 3px solid rgb(16 185 129); }
.stat-emerald .stat-value { color: rgb(4 120 87); }
.stat-emerald .stat-icon { background: rgb(236 253 245); color: rgb(5 150 105); }
.stat-amber   { border-left: 3px solid rgb(245 158 11); }
.stat-amber .stat-value { color: rgb(180 83 9); }
.stat-amber .stat-icon { background: rgb(255 251 235); color: rgb(217 119 6); }
.stat-red     { border-left: 3px solid rgb(239 68 68); }
.stat-red .stat-value { color: rgb(185 28 28); }
.stat-red .stat-icon { background: rgb(254 242 242); color: rgb(220 38 38); }
.stat-purple  { border-left: 3px solid rgb(168 85 247); }
.stat-purple .stat-icon { background: rgb(250 245 255); color: rgb(147 51 234); }
.stat-slate   { border-left: 3px solid rgb(148 163 184); }
.stat-slate .stat-icon { background: rgb(248 250 252); color: rgb(71 85 105); }

/* ─── Input ───────────────────────────────────────────────── */
.input, input.input, select.input, textarea.input {
  width: 100%;
  font-size: 0.875rem;
  color: rgb(30 41 59);
  background-color: white;
  border: 1px solid rgb(226 232 240);
  border-radius: 0.5rem;
  padding: 0.5rem 0.75rem;
  line-height: 1.25rem;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.input::placeholder { color: rgb(148 163 184); }
.input:focus {
  outline: none;
  border-color: rgb(129 140 248);
  box-shadow: 0 0 0 3px rgb(99 102 241 / 0.18);
}
/* Stack the `.input` selector on the element selectors so the same
   specificity (0,1,1) beats Tailwind's plain .w-auto / .w-32 utilities.
   Lets inline filter bars actually use width utilities without !important. */
.input.w-auto, input.input.w-auto, select.input.w-auto, textarea.input.w-auto { width: auto; }
.input.w-32,  input.input.w-32,  select.input.w-32,  textarea.input.w-32  { width: 8rem; }
.input.w-40,  input.input.w-40,  select.input.w-40,  textarea.input.w-40  { width: 10rem; }
.input.w-48,  input.input.w-48,  select.input.w-48,  textarea.input.w-48  { width: 12rem; }
.input.w-60,  input.input.w-60,  select.input.w-60,  textarea.input.w-60  { width: 15rem; }

/* ─── Badges ──────────────────────────────────────────────── */
.badge, .badge-slate, .badge-brand, .badge-green, .badge-blue,
.badge-amber, .badge-red, .badge-purple {
  display: inline-flex;
  align-items: center;
  padding: 0.125rem 0.5rem;
  border-radius: 0.375rem;
  font-size: 0.625rem;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.025em;
  line-height: 1rem;
}
.badge,        .badge-slate  { background: rgb(241 245 249); color: rgb(51 65 85); }
.badge-brand   { background: rgb(238 242 255); color: rgb(67 56 202); }
.badge-green   { background: rgb(209 250 229); color: rgb(4 120 87); }
.badge-blue    { background: rgb(219 234 254); color: rgb(29 78 216); }
.badge-amber   { background: rgb(254 243 199); color: rgb(180 83 9); }
.badge-red     { background: rgb(254 226 226); color: rgb(185 28 28); }
.badge-purple  { background: rgb(243 232 255); color: rgb(126 34 206); }

/* ─── Section helpers ─────────────────────────────────────── */
.section-label {
  font-size: 0.6875rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: rgb(100 116 139);
}
.page-h1 {
  font-size: 1.5rem;
  font-weight: 600;
  letter-spacing: -0.025em;
  line-height: 2rem;
}
.page-sub {
  font-size: 0.875rem;
  color: rgb(100 116 139);
}

/* ─── Empty state ─────────────────────────────────────────── */
.empty {
  background: white;
  border: 1px solid rgb(226 232 240);
  border-radius: 0.75rem;
  padding: 3rem;
  text-align: center;
  color: rgb(100 116 139);
  font-size: 0.875rem;
  background-image: radial-gradient(rgb(203 213 225) 1px, transparent 1px);
  background-size: 16px 16px;
}

/* ─── DataTables theming ──────────────────────────────────── */
table.datatable { width: 100% !important; }
.dt-btn,
.dataTables_wrapper .dt-buttons button.dt-btn {
  background: white !important;
  border: 1px solid rgb(226 232 240) !important;
  color: rgb(71 85 105) !important;
  padding: 0.35rem 0.75rem !important;
  font-size: 0.75rem !important;
  font-weight: 500 !important;
  border-radius: 0.375rem !important;
  margin-right: 0.25rem !important;
  cursor: pointer;
  box-shadow: none !important;
}
.dt-btn:hover, .dataTables_wrapper .dt-buttons button.dt-btn:hover {
  background: rgb(248 250 252) !important;
  border-color: rgb(203 213 225) !important;
  color: rgb(15 23 42) !important;
}
.dataTables_wrapper .dataTables_filter input,
.dataTables_wrapper .dataTables_length select {
  border: 1px solid rgb(226 232 240);
  border-radius: 0.375rem;
  padding: 0.3rem 0.6rem;
  font-size: 0.8125rem;
  background: white;
}
.dataTables_wrapper .dataTables_filter input::placeholder {
  color: rgb(148 163 184);
}
.dataTables_wrapper .dataTables_paginate .paginate_button {
  padding: 0.25rem 0.6rem !important;
  font-size: 0.75rem !important;
  border-radius: 0.375rem !important;
  color: rgb(71 85 105) !important;
}
.dataTables_wrapper .dataTables_paginate .paginate_button.current {
  background: rgb(15 23 42) !important;
  color: white !important;
  border: none !important;
}
.dataTables_wrapper .dataTables_info {
  font-size: 0.75rem;
  color: rgb(100 116 139);
}
table.datatable tbody tr:hover { background: rgb(248 250 252); }

/* ─── Brand panel (hero gradient) ─────────────────────────── */
.panel-brand {
  border-radius: 0.75rem;
  background: linear-gradient(135deg, rgb(99 102 241) 0%, rgb(79 70 229) 50%, rgb(126 34 206) 100%);
  color: white;
  box-shadow: 0 8px 24px -8px rgb(15 23 42 / 0.15);
}