/* =====================================================================
   Botawk UI Design System
   Layer that refines + standardizes the Tailwind-based dashboard/admin UI.
   Loaded AFTER app.css. Classes here are ADDITIVE — apply them alongside
   existing Tailwind utilities.
   ===================================================================== */

:root {
  --p-50: #f4f8fd;
  --p-100: #e5eefb;
  --p-200: #c8dcf6;
  --p-300: #a7c7f0;
  --p-400: #80aeea;
  --p-500: #2473da;
  --p-600: #1f63bb;
  --p-700: #1a539d;
  --p-800: #15437e;
  --p-900: #103462;

  --s-50: #f6fcfc;
  --s-100: #eaf7f8;
  --s-200: #d4eff1;
  --s-300: #b9e5e9;
  --s-400: #9adadf;
  --s-500: #51bfc7;
  --s-600: #46a4ab;
  --s-700: #3a8a8f;
  --s-800: #2f6f73;
  --s-900: #24565a;

  --g-50: #faf9f5;
  --g-100: #f4f3ef;
  --g-200: #e8e6dc;
  --g-300: #d6d4cb;
  --g-400: #b0aea5;
  --g-500: #9c9a90;
  --g-600: #7a786f;
  --g-700: #59584f;
  --g-800: #3a3933;
  --g-900: #141413;

  --font-body: 'Poppins', Arial, sans-serif;
  --font-display: 'Poppins', Arial, sans-serif;

  --radius-sm: .5rem;
  --radius-md: .75rem;
  --radius-lg: 1rem;

  --shadow-card: 0 1px 2px rgba(16,24,40,.06), 0 1px 3px rgba(16,24,40,.04);
  --shadow-hover: 0 4px 12px rgba(16,24,40,.08), 0 10px 28px rgba(16,24,40,.06);
  --shadow-pop: 0 12px 32px rgba(16,24,40,.16), 0 24px 64px rgba(16,24,40,.12);

  --ease: cubic-bezier(.4,0,.2,1);
}

/* ---------- Base refinement ---------- */

body {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  font-feature-settings: 'cv11', 'ss01';
}

::selection {
  background: var(--p-200);
  color: var(--p-900);
}

:focus-visible {
  outline: 2px solid var(--p-500);
  outline-offset: 2px;
}

/* Thin refined scrollbars */
*::-webkit-scrollbar { width: 8px; height: 8px; }
*::-webkit-scrollbar-track { background: transparent; }
*::-webkit-scrollbar-thumb { background: rgba(17,24,39,.14); border-radius: 999px; border: 2px solid transparent; background-clip: padding-box; }
*::-webkit-scrollbar-thumb:hover { background: rgba(17,24,39,.28); background-clip: padding-box; border: 2px solid transparent; }
main::-webkit-scrollbar-thumb, .overflow-y-auto::-webkit-scrollbar-thumb, .overflow-x-auto::-webkit-scrollbar-thumb { background: rgba(17,24,39,.14); border-radius: 999px; border: 2px solid transparent; background-clip: padding-box; }
main::-webkit-scrollbar-thumb:hover, .overflow-y-auto::-webkit-scrollbar-thumb:hover, .overflow-x-auto::-webkit-scrollbar-thumb:hover { background: rgba(17,24,39,.28); background-clip: padding-box; border: 2px solid transparent; }

.font-display { font-family: var(--font-display); }

/* ---------- Page headers ---------- */

.page-head { display: flex; flex-direction: column; justify-content: space-between; gap: .5rem; margin-bottom: 1rem; }
@media (min-width: 640px) { .page-head { flex-direction: row; align-items: center; } }
.page-title { font-family: var(--font-display); font-weight: 700; letter-spacing: -.01em; color: var(--g-900); }
.page-sub { font-size: .75rem; color: var(--g-500); margin-top: .125rem; }

/* ---------- Cards ---------- */

.card {
  background: #fff;
  border: 1px solid var(--g-200);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-card);
}
.card-pad { padding: 1rem; }
.card-pad-lg { padding: 1.25rem; }
.card-hover { transition: box-shadow .2s var(--ease), transform .2s var(--ease), border-color .2s var(--ease); }
.card-hover:hover { box-shadow: var(--shadow-hover); border-color: var(--p-200); }

/* Section heading inside cards */
.section-head { display: flex; align-items: center; justify-content: space-between; gap: .5rem; margin-bottom: .75rem; }
.section-title { font-family: var(--font-display); font-size: .8125rem; font-weight: 600; color: var(--g-900); }
.section-sub { font-size: .6875rem; color: var(--g-400); margin-top: .125rem; }
.card-head { display: flex; align-items: flex-start; justify-content: space-between; gap: .75rem; margin-bottom: .75rem; }

/* ---------- Stat cards ---------- */

.stat-card { padding: 1rem; }
.stat-top { display: flex; align-items: center; justify-content: space-between; gap: .5rem; margin-bottom: .25rem; }
.stat-label { font-size: 10px; font-weight: 600; text-transform: uppercase; letter-spacing: .08em; color: var(--g-500); }
.stat-value { font-family: var(--font-display); font-size: 1.5rem; font-weight: 700; line-height: 1.2; color: var(--g-900); }
.stat-icon { width: 2.25rem; height: 2.25rem; border-radius: .75rem; display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; }
.stat-foot { font-size: .6875rem; color: var(--g-400); margin-top: .25rem; }

/* ---------- Buttons ---------- */

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .375rem;
  font-size: .75rem; font-weight: 500; line-height: 1.25;
  padding: .5rem .875rem; border-radius: .625rem; border: 1px solid transparent;
  cursor: pointer; white-space: nowrap; text-align: center;
  transition: all .15s var(--ease); text-decoration: none;
}
.btn i { font-size: .75rem; }
.btn-sm { padding: .3125rem .625rem; font-size: .6875rem; border-radius: .5rem; }
.btn-sm i { font-size: .6875rem; }
.btn-lg { padding: .625rem 1.125rem; font-size: .8125rem; border-radius: .75rem; }
.btn-block { width: 100%; }
.btn:disabled { opacity: .55; cursor: not-allowed; pointer-events: none; }

.btn-primary { background: var(--p-600); color: #fff; box-shadow: 0 1px 2px rgba(36,115,218,.35); }
.btn-primary:hover { background: var(--p-700); color: #fff; }

.btn-secondary { background: #fff; border-color: var(--g-200); color: var(--g-600); box-shadow: var(--shadow-card); }
.btn-secondary:hover { background: var(--g-50); border-color: var(--g-300); color: var(--g-900); }

.btn-ghost { background: transparent; color: var(--p-600); }
.btn-ghost:hover { background: var(--s-50); color: var(--p-700); }

.btn-danger { background: #fff; border-color: var(--g-200); color: #dc2626; box-shadow: var(--shadow-card); }
.btn-danger:hover { background: #fee2e2; border-color: #fecaca; color: #b91c1c; }
.btn-danger-solid { background: #dc2626; color: #fff; box-shadow: 0 1px 2px rgba(220,38,38,.35); }
.btn-danger-solid:hover { background: #b91c1c; color: #fff; }

.btn-success { background: var(--s-600); color: #fff; box-shadow: 0 1px 2px rgba(70,164,171,.35); }
.btn-success:hover { background: var(--s-700); color: #fff; }

/* Gradient preserve — reduces to refined gradient */
.btn-grad { background-image: linear-gradient(135deg, var(--p-600), var(--p-500)); color: #fff; box-shadow: 0 1px 2px rgba(36,115,218,.35); }
.btn-grad:hover { background-image: linear-gradient(135deg, var(--p-700), var(--p-600)); color: #fff; }

/* ---------- Badges ---------- */

.badge {
  display: inline-flex; align-items: center; gap: .375rem;
  padding: .1875rem .5625rem; border-radius: 9999px;
  font-size: .6875rem; font-weight: 500; line-height: 1.5; white-space: nowrap;
}
.badge i { font-size: .6875rem; }
.badge-gray { background: var(--g-100); color: var(--g-600); }
.badge-blue { background: #e5eefb; color: #1a539d; }
.badge-green { background: #eaf7f8; color: #3a8a8f; }
.badge-amber { background: #fef3c7; color: #b45309; }
.badge-red { background: #fee2e2; color: #b91c1c; }
.badge-teal { background: #eaf7f8; color: #24565a; }
.badge-indigo { background: #e5eefb; color: #1a539d; }
.badge-cyan { background: #eaf7f8; color: #2f6f73; }

/* ---------- Tables ---------- */

.tbl-wrap { background: #fff; border: 1px solid var(--g-200); border-radius: var(--radius-lg); overflow: hidden; box-shadow: var(--shadow-card); }
.tbl-scroll { overflow-x: auto; max-height: 70vh; overflow-y: auto; }
table.tbl { width: 100%; border-collapse: collapse; font-size: .8125rem; }
table.tbl thead th {
  background: var(--g-50); text-align: left; vertical-align: middle;
  font-size: .6875rem; font-weight: 600; text-transform: uppercase; letter-spacing: .06em;
  color: var(--g-500); padding: .75rem 1rem; border-bottom: 1px solid var(--g-200); white-space: nowrap;
}
table.tbl tbody td { padding: .75rem 1rem; border-bottom: 1px solid var(--g-100); color: var(--g-600); vertical-align: middle; }
table.tbl tbody tr:last-child td { border-bottom: 0; }
table.tbl tbody tr { transition: background .12s var(--ease); }
table.tbl tbody tr:hover { background: #f8fafc; }
.tbl-pager { display: flex; align-items: center; justify-content: space-between; gap: .5rem; flex-wrap: wrap; padding: .75rem 1rem; border-top: 1px solid var(--g-100); background: var(--g-50); }
.tbl-pager .pg { font-size: .6875rem; color: var(--g-500); }
.tbl-pager .pg-link { padding: .25rem .625rem; font-size: .6875rem; font-weight: 500; border: 1px solid var(--g-200); border-radius: .5rem; background: #fff; color: var(--g-600); box-shadow: var(--shadow-card); }
.tbl-pager .pg-link:hover { background: var(--g-50); color: var(--g-900); }
.tbl-pager .pg-link.disabled { opacity: .45; pointer-events: none; }

/* ---------- Forms ---------- */

.label { display: block; font-size: .6875rem; font-weight: 600; color: var(--g-600); margin-bottom: .3125rem; }
.input, textarea.input, .select {
  width: 100%; padding: .5rem .75rem; border: 1px solid var(--g-300); border-radius: .625rem;
  font-size: .8125rem; line-height: 1.4; color: var(--g-900); background: #fff;
  transition: border-color .15s var(--ease), box-shadow .15s var(--ease); outline: none;
}
.input:focus, textarea.input:focus, .select:focus { border-color: var(--p-500); box-shadow: 0 0 0 3px rgba(36,115,218,.12); }
.input::placeholder, textarea.input::placeholder { color: var(--g-400); }
.select { appearance: none; padding-right: 2rem;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%239ca3af' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right .65rem center; }
.field-wrap { position: relative; }
.field-icon { position: absolute; left: .75rem; top: 50%; transform: translateY(-50%); color: var(--g-400); font-size: .75rem; pointer-events: none; }
.input-icon { padding-left: 2.25rem; }
.help-text { font-size: .6875rem; color: var(--g-400); margin-top: .3125rem; }

/* ---------- Code ---------- */

code.inline { background: var(--g-100); border: 1px solid var(--g-200); border-radius: .375rem; padding: .125rem .375rem; font-size: .75em; font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; color: var(--g-800); }
.code-block { display: block; background: var(--g-900); color: #e5e7eb; border-radius: .75rem; padding: .875rem 1rem; font-size: .75rem; font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; overflow-x: auto; line-height: 1.6; }

/* ---------- Empty states ---------- */

.empty-state { display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; padding: 2.5rem 1rem; }
.empty-icon { width: 3.5rem; height: 3.5rem; border-radius: 1rem; background: var(--g-50); border: 1px solid var(--g-100); display: flex; align-items: center; justify-content: center; color: var(--g-300); font-size: 1.25rem; margin-bottom: .75rem; }
.empty-title { font-size: .8125rem; font-weight: 600; color: var(--g-500); }
.empty-sub { font-size: .6875rem; color: var(--g-400); margin-top: .25rem; max-width: 280px; line-height: 1.5; }

/* ---------- Tiles / quick links ---------- */

.tile { display: flex; flex-direction: column; align-items: center; gap: .5rem; padding: .75rem .5rem; border-radius: .75rem; text-align: center; transition: all .15s var(--ease); }
.tile:hover { transform: translateY(-2px); }
.tile-title { font-size: .6875rem; font-weight: 600; color: var(--g-700); }

/* ---------- Progress ---------- */

.progress { height: .375rem; background: var(--g-100); border-radius: 9999px; overflow: hidden; }
.progress > div { height: 100%; border-radius: 9999px; }

/* ---------- Helpers ---------- */

.stack { display: flex; flex-direction: column; gap: .75rem; }
.stack-sm { display: flex; flex-direction: column; gap: .5rem; }
.pull-right { display: flex; align-items: center; gap: .5rem; margin-left: auto; }
.pulse-ring { position: relative; }
.pulse-ring::after { content: ''; position: absolute; inset: 0; border-radius: 9999px; background: currentColor; opacity: .55; animation: pulseRing 1.8s var(--ease) infinite; }
@keyframes pulseRing { 0% { transform: scale(1); opacity: .55; } 80%, 100% { transform: scale(2.6); opacity: 0; } }
.divider { border-top: 1px solid var(--g-100); margin: .75rem 0; }

/* Muted uppercase micro-label */
.micro-label { font-size: 10px; font-weight: 600; text-transform: uppercase; letter-spacing: .08em; color: var(--g-400); }

/* ---------- Reduced motion ---------- */
@media (prefers-reduced-motion: reduce) {
  .pulse-ring::after { animation: none; }
}

/* ---------- Toast refinement ---------- */
#toast { border-radius: .75rem; box-shadow: var(--shadow-pop); }