/* App Template — shared utility styles
 * A small set of component-y classes that are easier to read than long
 * Tailwind class strings. These use raw color values (matching the tokens
 * in tailwind-config.js) so they work without the Tailwind JIT @apply
 * machinery (the Play CDN doesn't process external stylesheets).
 */

/* ---- Body baseline ---- */
html, body { height: 100%; }
body {
  margin: 0;
  font-family: "Geist", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  color: #1A1816;
  background: #FFFFFF;
  -webkit-font-smoothing: antialiased;
}
*, *::before, *::after { box-sizing: border-box; }
input, button, select, textarea { font-family: inherit; }
input::placeholder, textarea::placeholder { color: #9A968F; }

/* ---- Page canvas + content card ----
   Soft paper canvas with a whisper of dot-grid texture; page content sits
   in a white card with a hairline border. Apply `page-canvas` on <body>,
   wrap the main content in `.page-card`, and lead the page header with a
   `.page-title-icon` chip. */
body.page-canvas {
  background-color: #F7F5F0;
  background-image: radial-gradient(rgba(122,118,111,0.13) 1px, transparent 1.2px);
  background-size: 22px 22px;
}
.page-card {
  background: #fff;
  border: 1px solid #E8E3D9;
  border-radius: 12px;
  box-shadow: 0 1px 2px rgba(28,24,18,0.04), 0 12px 32px -20px rgba(28,24,18,0.10);
  padding: 14px 16px 12px;
}
@media (max-width: 767px) { .page-card { padding: 10px 10px 12px; border-radius: 10px; } }
.page-title-icon {
  width: 34px; height: 34px; border-radius: 9px;
  background: #fff; border: 1px solid #E8E3D9;
  display: inline-flex; align-items: center; justify-content: center;
  color: #3A3833; flex-shrink: 0;
  box-shadow: 0 1px 2px rgba(28,24,18,0.05);
}

/* ---- Left nav items ---- */
.nav-link {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 7px 10px;
  border-radius: 7px;
  font-size: 13px;
  font-weight: 500;
  color: #3A3833;
  text-decoration: none;
  transition: background .12s, color .12s;
}
.nav-link:hover { background: #F4F1EA; }
.nav-link.is-active { background: #F4F1EA; color: #1A1816; font-weight: 600; }
/* Expandable parents are <button>s — must match the <a> nav-links exactly.
   Inherit only the font-FAMILY; a bare `font: inherit` shorthand would also
   reset font-size/weight to the inherited 16px/400, making the expandable
   items render larger than the plain links. */
button.nav-link {
  width: 100%;
  border: 0; background: transparent;
  font-family: inherit; text-align: left;
  cursor: pointer;
}
button.nav-link:hover { background: #F4F1EA; }
.nav-link .nav-icon { color: #6B6862; display: inline-flex; }
.nav-link:hover .nav-icon { color: #3A3833; }
.nav-link.is-active .nav-icon { color: #204098; }
/* Nav icons ~15% smaller than their intrinsic 18px (CSS overrides the svg
   width/height attributes). Chevrons (.nav-group-chevron) are unaffected. */
.nav-icon svg { width: 15px; height: 15px; }

/* Small-caps group labels between nav sections */
.nav-section-label {
  padding: 16px 12px 5px;
  font-size: 10.5px; font-weight: 600;
  color: #9A968F;
  letter-spacing: 0.08em; text-transform: uppercase;
  user-select: none;
}

/* ---- Nav sub-items (auto-expanded under the active parent) ----
   Indented past the parent icon with a hairline tree rail; the active
   sub-item gets an accent tick on the rail. */
.nav-group-chevron { margin-left: auto; color: #9A968F; transition: transform .15s; }
.nav-group-chevron.is-open { transform: rotate(180deg); }
.nav-subwrap { position: relative; margin: 1px 0 3px; }
.nav-subwrap::before {
  content: '';
  position: absolute; left: 19px; top: 3px; bottom: 3px;
  width: 1px; background: #E7E2D8;
}
.nav-sublink {
  display: flex; align-items: center;
  position: relative;
  padding: 6px 10px 6px 34px;       /* indent past the parent icon */
  border-radius: 7px;
  font-size: 12.5px; font-weight: 500;
  color: #6B6862; text-decoration: none;
  transition: background .12s, color .12s;
}
.nav-sublink:hover { background: #F4F1EA; color: #1A1816; }
.nav-sublink.is-active { background: #F4F1EA; color: #1A1816; font-weight: 600; }
.nav-sublink.is-active::before {
  content: '';
  position: absolute; left: 19px; top: 6px; bottom: 6px;
  width: 2px; border-radius: 1px;
  background: #F8C808;
}

/* ---- Sidebar quick search (Ctrl+K) ---- */
.qs { position: relative; padding: 0 12px 6px; }
.qs-box {
  display: flex; align-items: center; gap: 7px;
  height: 32px; padding: 0 7px 0 10px;
  border: 1px solid #E7E2D8; border-radius: 8px;
  background: #FBFAF7;
  cursor: text;
  transition: border-color .12s, box-shadow .12s, background .12s;
}
.qs-box:focus-within {
  background: #fff; border-color: #1A1816;
  box-shadow: 0 0 0 3px rgba(28,24,18,0.05);
}
.qs-box > svg { color: #ABA699; flex-shrink: 0; }
.qs-box input {
  flex: 1; min-width: 0;
  border: 0; outline: 0; background: transparent;
  font-size: 12.5px; color: #1A1816;
}
.qs-kbd {
  font-size: 10px; color: #9A968F;
  border: 1px solid #E7E2D8; border-radius: 4px;
  padding: 1px 5px; background: #fff;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  white-space: nowrap;
}
.qs-pop {
  position: absolute; left: 12px; right: 12px; top: calc(100% + 2px);
  z-index: 60;
  background: #fff;
  border: 1px solid #E7E2D8; border-radius: 10px;
  box-shadow: 0 16px 40px rgba(28,24,18,0.14), 0 2px 8px rgba(28,24,18,0.06);
  padding: 4px;
  max-height: 332px; overflow-y: auto;
}
.qs-item {
  display: flex; align-items: center; gap: 9px;
  padding: 6px 8px; border-radius: 7px;
  cursor: pointer;
}
.qs-item:hover, .qs-item.is-hot { background: #F4F1EA; }
.qs-av {
  width: 24px; height: 24px; border-radius: 50%;
  display: grid; place-items: center;
  font-size: 10px; font-weight: 600; color: #1A1816;
  flex-shrink: 0;
}
.qs-name { font-size: 12.5px; font-weight: 500; color: #1A1816; line-height: 1.2; }
.qs-sub { font-size: 11px; color: #9A968F; line-height: 1.2; margin-top: 1px; }
.qs-empty { padding: 10px 12px; font-size: 12px; color: #9A968F; }

/* ---- Buttons ---- */
.btn {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 7px 12px; border-radius: 6px;
  font-size: 12.5px; font-weight: 500;
  cursor: pointer; border: 1px solid transparent;
  transition: background .12s, border-color .12s, color .12s, box-shadow .12s;
  white-space: nowrap;
}
.btn-ghost   { background: #fff; border-color: #DDD8CE; color: #1A1816; }
.btn-ghost:hover { background: #FBFAF7; }
.btn-primary { background: #1A1816; border-color: #1A1816; color: #fff; }
.btn-primary:hover { background: #2E2A24; border-color: #2E2A24; }
.btn-accent  { background: #204098; border-color: #204098; color: #fff; }
.btn-accent:hover { background: #18306F; border-color: #18306F; }
.btn-link    { color: #204098; font-weight: 500; padding: 0; background: transparent; }

/* ---- Inputs ---- */
.input {
  width: 100%;
  height: 36px;
  padding: 0 12px;
  border: 1px solid #DDD8CE;
  border-radius: 6px;
  background: #fff;
  color: #1A1816;
  font-size: 13px;
  outline: none;
  transition: border-color .12s, box-shadow .12s;
}
.input:focus { border-color: #1A1816; box-shadow: 0 0 0 3px rgba(26,24,22,0.06); }
.input[disabled], .input:disabled { background: #FBFAF7; color: #7A766F; }

textarea.input { height: auto; padding: 10px 12px; resize: vertical; min-height: 80px; }

.label {
  display: block;
  font-size: 11.5px;
  font-weight: 600;
  color: #3A3833;
  margin-bottom: 6px;
  letter-spacing: 0.01em;
}
.help { font-size: 11.5px; color: #7A766F; margin-top: 4px; }

/* ---- Status pill ---- */
.pill {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 2px 8px;
  border-radius: 4px;
  font-size: 11.5px;
  font-weight: 500;
  line-height: 1.4;
  letter-spacing: 0.01em;
  white-space: nowrap;
}
.pill .dot { width: 6px; height: 6px; border-radius: 3px; }
.pill-active      { background: #E7F3EC; color: #0F7A3C; }
.pill-active .dot { background: #1F9D55; }
.pill-leave       { background: #FFF3DA; color: #8A5A00; }
.pill-leave .dot  { background: #D89B14; }
.pill-off         { background: #FBE1E1; color: #A02323; }
.pill-off .dot    { background: #D33A3A; }

/* ---- Tag chip ---- */
.chip {
  display: inline-block;
  padding: 2px 8px;
  border-radius: 4px;
  background: #F4F1EA;
  color: #3A3833;
  font-size: 12px;
  font-weight: 500;
}

/* ---- Filter pill button ---- */
.f-pill {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 5px 10px; border-radius: 6px;
  background: #fff; border: 1px solid #E4DFD4;
  font-size: 12.5px;
  cursor: pointer;
  transition: background .12s, border-color .12s;
}
.f-pill:hover { background: #FBFAF7; }
.f-pill.is-active { background: #F4F1EA; border-color: #DDD8CE; }
.f-pill .f-label { color: #7A766F; font-weight: 500; }
.f-pill .f-value { color: #3A3833; font-weight: 500; }
.f-pill.is-active .f-value { color: #1A1816; font-weight: 600; }

/* ---- Keyboard chip ---- */
.kbd {
  font-size: 10.5px; color: #7A766F;
  border: 1px solid #E4DFD4; border-radius: 4px;
  padding: 2px 6px; letter-spacing: 0.05em;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
}

/* ---- Popover menu ---- */
.menu {
  background: #fff;
  border-radius: 8px;
  border: 1px solid #EDEAE3;
  box-shadow: 0 8px 24px rgba(0,0,0,0.08), 0 0 0 1px rgba(0,0,0,0.04);
  padding: 4px;
  min-width: 180px;
}
.menu-item {
  display: flex; align-items: center; gap: 10px;
  padding: 7px 10px;
  border-radius: 5px;
  font-size: 12.5px;
  color: #1A1816;
  cursor: pointer;
  text-decoration: none;
}
.menu-item:hover { background: #F4F1EA; }
.menu-item.danger { color: #A02323; }
.menu-divider { height: 1px; background: #EDEAE3; margin: 4px 2px; }

/* ---- Group bar (list grouping) ---- */
.group-bar {
  display: flex; align-items: center; gap: 8px;
  padding: 10px 8px;
  font-size: 12px; color: #1A1816;
  background: #FBFAF7;
  border-bottom: 1px solid #EDEAE3;
  cursor: pointer;
  user-select: none;
}
.group-bar .chev {
  transition: transform .15s;
  color: #7A766F;
  display: inline-flex;
}
.group-bar.is-open .chev { transform: rotate(90deg); }
.group-name { font-weight: 600; }
.group-count { font-size: 11px; color: #7A766F; font-weight: 500; }

/* ---- Table-like flex rows ---- */
.row {
  display: flex; align-items: center;
  padding: 0 8px;
  height: 44px;
  border-bottom: 1px solid #F4F1EA;
  background: #fff;
  font-size: 13px;
  color: #3A3833;
  transition: background .08s;
}
.row:hover { background: #FCFBF7; }
.row .cell {
  display: flex; align-items: center;
  padding: 0 10px;
  min-width: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* ---- Toast ---- */
.toast-stack {
  position: fixed; right: 20px; bottom: 20px; z-index: 100;
  display: flex; flex-direction: column; gap: 8px;
  pointer-events: none;
}
.toast {
  min-width: 260px; max-width: 420px;
  background: #1A1816; color: #fff;
  border-radius: 6px; padding: 10px 14px;
  font-size: 13px; line-height: 1.4;
  box-shadow: 0 8px 24px rgba(0,0,0,0.18);
  display: flex; gap: 10px; align-items: flex-start;
  pointer-events: auto;
}
.toast.success { background: #0F7A3C; }
.toast.error { background: #A02323; }

/* ---- Cards ---- */
.card {
  background: #fff;
  border: 1px solid #EDEAE3;
  border-radius: 8px;
}
.card-head {
  padding: 14px 16px;
  border-bottom: 1px solid #EDEAE3;
  display: flex; align-items: center; justify-content: space-between;
}
.card-title { font-size: 13px; font-weight: 600; color: #1A1816; }
.card-body { padding: 16px; }

/* ---- Sidebar section header ---- */
.nav-section {
  font-size: 10.5px;
  font-weight: 600;
  color: #9A968F;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding: 10px 12px 4px;
}

/* ---- Indeterminate progress bar ----
   Thin accent bar that slides back and forth while data loads. */
.progress-bar {
  position: relative;
  width: 100%;
  height: 3px;
  border-radius: 999px;
  background: #EDEAE3;
  overflow: hidden;
}
.progress-bar::before {
  content: "";
  position: absolute;
  top: 0; left: 0; bottom: 0;
  width: 40%;
  border-radius: 999px;
  background: #204098;
  animation: progress-indeterminate 1.1s ease-in-out infinite;
}
@keyframes progress-indeterminate {
  0%   { left: -40%; }
  100% { left: 100%; }
}

/* ---- Mobile list cards (list page, below md:) ----
   List pages render as cards on small screens instead of a clipped desktop
   table. Title is the hero; secondary fields are full-width labelled lines
   (.p-card-field + .p-card-k). */
.p-card {
  display: block;
  background: #fff;
  border: 1px solid #EDEAE3;
  border-radius: 8px;
  padding: 12px 14px;
  text-decoration: none;
  color: #3A3833;
  transition: background .08s, border-color .08s;
}
.p-card:hover { background: #FCFBF7; border-color: #DDD8CE; }
.p-card-head { display: flex; align-items: center; gap: 10px; min-width: 0; }
.p-card-avatar {
  width: 36px; height: 36px; border-radius: 50%;
  display: grid; place-items: center;
  font-size: 12px; font-weight: 600; color: #1A1816;
  flex-shrink: 0;
}
.p-card-name { font-size: 15px; font-weight: 600; color: #1A1816; line-height: 1.2; }
.p-card-email { font-size: 12px; color: #7A766F; margin-top: 2px; word-break: break-all; }
.p-card-meta { display: flex; flex-direction: column; gap: 5px; margin-top: 9px; }
.p-card-field { font-size: 12.5px; color: #3A3833; line-height: 1.35; }
.p-card-k {
  color: #9A968F; font-size: 10px; text-transform: uppercase; letter-spacing: 0.05em;
  font-weight: 600; margin-right: 7px;
}

/* x-cloak: hide Alpine-bound elements until Alpine initializes. */
[x-cloak] { display: none !important; }