/* =========================================================
   Outlet Admin — extras on top of admin.css for Blade impl
   - turn .sb-item into <a> nav links
   - reveal-on-scroll style baked into route-in entrance
   - tooltips, dropdowns, light JS-driven helpers
   ========================================================= */

/* Make sidebar nav-items work as anchor tags */
a.sb-item { text-decoration: none; }
a.sb-item:hover { text-decoration: none; }

/* Smooth hover lift for KPI cards */
.kpi { transition: border-color var(--dur-fast) var(--ease-standard), transform var(--dur-base) var(--ease-standard), box-shadow var(--dur-base) var(--ease-standard); }
.kpi:hover { transform: translateY(-2px); box-shadow: 0 8px 28px rgba(13,13,13,.06); border-color: var(--border-strong); }

/* Cards: subtle hover */
.card { transition: border-color var(--dur-fast) var(--ease-standard), box-shadow var(--dur-base) var(--ease-standard); }
.card.hoverable:hover { border-color: var(--border-strong); box-shadow: 0 4px 16px rgba(13,13,13,.04); }

/* Animated entrance for grids */
@keyframes fadeUp { from { opacity:0; transform: translateY(8px); } to { opacity:1; transform: translateY(0); } }
.kpi-grid > * { animation: fadeUp .45s var(--ease-emphasis) both; }
.kpi-grid > *:nth-child(1) { animation-delay: .03s; }
.kpi-grid > *:nth-child(2) { animation-delay: .07s; }
.kpi-grid > *:nth-child(3) { animation-delay: .11s; }
.kpi-grid > *:nth-child(4) { animation-delay: .15s; }
.kpi-grid > *:nth-child(5) { animation-delay: .19s; }
.kpi-grid > *:nth-child(6) { animation-delay: .23s; }

/* Stagger card grids */
.stagger > * { animation: fadeUp .45s var(--ease-emphasis) both; }
.stagger > *:nth-child(1) { animation-delay: .05s; }
.stagger > *:nth-child(2) { animation-delay: .12s; }
.stagger > *:nth-child(3) { animation-delay: .19s; }
.stagger > *:nth-child(4) { animation-delay: .26s; }

/* Table rows stagger entrance */
.tbl tbody tr { animation: fadeUp .35s var(--ease-emphasis) both; }
.tbl tbody tr:nth-child(1) { animation-delay: .02s; }
.tbl tbody tr:nth-child(2) { animation-delay: .04s; }
.tbl tbody tr:nth-child(3) { animation-delay: .06s; }
.tbl tbody tr:nth-child(4) { animation-delay: .08s; }
.tbl tbody tr:nth-child(5) { animation-delay: .10s; }
.tbl tbody tr:nth-child(6) { animation-delay: .12s; }
.tbl tbody tr:nth-child(7) { animation-delay: .14s; }
.tbl tbody tr:nth-child(8) { animation-delay: .16s; }
.tbl tbody tr:nth-child(9) { animation-delay: .18s; }
.tbl tbody tr:nth-child(10) { animation-delay: .20s; }
.tbl tbody tr:nth-child(11) { animation-delay: .22s; }
.tbl tbody tr:nth-child(12) { animation-delay: .24s; }

/* Avatar deterministic color shorthand */
.avatar { display: grid; place-items: center; font-weight: 600; }

/* Status status-pill animation: pulse dot */
@keyframes pulse-dot {
  0% { box-shadow: 0 0 0 0 currentColor; }
  70% { box-shadow: 0 0 0 6px transparent; }
  100% { box-shadow: 0 0 0 0 transparent; }
}
.status-pill .dot { animation: pulse-dot 2s var(--ease-standard) infinite; }
.status-pill .dot { color: var(--success); }
.status-pill.warn .dot { color: var(--warning); }
.status-pill.err  .dot { color: var(--danger); }

/* Dropdown wrap */
.dropdown { position: relative; }
.dropdown-menu {
  position: absolute; top: calc(100% + 6px); right: 0; z-index: 100;
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-md);
  box-shadow: var(--shadow-md); padding: 4px; min-width: 200px;
  opacity: 0; transform: translateY(-4px); pointer-events: none;
  transition: opacity var(--dur-fast) var(--ease-standard), transform var(--dur-fast) var(--ease-standard);
}
.dropdown.open .dropdown-menu { opacity: 1; transform: translateY(0); pointer-events: auto; }

/* Tabs link wrappers */
a.tab { text-decoration: none; }

/* Glow accent for primary KPI card */
.kpi.accent::after {
  content: ''; position: absolute; inset: -1px; border-radius: var(--radius-lg);
  background: radial-gradient(ellipse at top right, rgba(47,107,255,.10), transparent 60%);
  pointer-events: none; z-index: 0;
}
.kpi.accent > * { position: relative; z-index: 1; }

/* Subtle gradient line for sectioning */
.section-divider {
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--border), transparent);
  margin: 24px 0;
}

/* Sortable header arrow */
.sort-ico { opacity: .5; transition: opacity var(--dur-fast) var(--ease-standard); }
.tbl thead th.sortable:hover .sort-ico { opacity: 1; }

/* Field grid */
.field-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }

/* Label uppercase */
.lbl-uppercase {
  font-size: 11px; color: var(--fg-subtle);
  text-transform: uppercase; letter-spacing: 0.04em;
  margin-bottom: 4px;
}

/* Big number */
.big-num {
  font-size: 42px; font-weight: 600; letter-spacing: -0.02em; line-height: 1;
  font-variant-numeric: tabular-nums;
}

/* Soft alert (success/warn/danger banners) */
.alert {
  display: flex; gap: 12px; align-items: flex-start;
  padding: 14px 16px;
  border-radius: var(--radius-lg); border: 1px solid var(--border);
  background: var(--surface);
}
.alert .alert-ico {
  width: 36px; height: 36px; border-radius: var(--radius-md);
  display: grid; place-items: center; flex-shrink: 0;
}
.alert.success { background: rgba(22,163,74,.05); border-color: rgba(22,163,74,.20); }
.alert.success .alert-ico { background: rgba(22,163,74,.10); color: var(--success); }
.alert.warn    { background: rgba(245,158,11,.05); border-color: rgba(245,158,11,.20); }
.alert.warn    .alert-ico { background: rgba(245,158,11,.12); color: var(--warning); }
.alert.danger  { background: rgba(239,68,68,.05);  border-color: rgba(239,68,68,.20); }
.alert.danger  .alert-ico { background: rgba(239,68,68,.10);  color: var(--danger); }
.alert.info    { background: rgba(47,107,255,.04); border-color: rgba(47,107,255,.20); }
.alert.info    .alert-ico { background: rgba(47,107,255,.10); color: var(--accent); }

/* Choice card (used in wizard) */
.choice {
  cursor: pointer; text-align: left;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 12px; padding: 14px;
  display: flex; flex-direction: column; gap: 8px;
  transition: all var(--dur-fast) var(--ease-standard);
}
.choice:hover { border-color: var(--border-strong); }
.choice.selected { background: var(--accent-subtle); border-color: var(--accent); }
.choice .choice-ico {
  width: 32px; height: 32px; border-radius: 8px;
  background: var(--bg-muted); color: var(--fg);
  display: grid; place-items: center;
}
.choice.selected .choice-ico { background: var(--accent); color: #fff; }
.choice .choice-title { font-weight: 600; font-size: 13px; }
.choice .choice-desc { font-size: 11px; color: var(--fg-muted); }

/* Progress bar */
.progress { height: 6px; background: var(--bg-muted); border-radius: 3px; overflow: hidden; }
.progress > span {
  display: block; height: 100%; background: var(--fg);
  border-radius: 3px;
  transition: width 0.6s var(--ease-emphasis);
  position: relative; overflow: hidden;
}
.progress > span.accent { background: var(--accent); }
.progress > span::after {
  content: ''; position: absolute; inset: 0;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.3), transparent);
  animation: shimmer 1.8s linear infinite;
}
@keyframes shimmer { from { transform: translateX(-100%); } to { transform: translateX(100%); } }

/* Field label small */
.fld-label { font-size: 12px; font-weight: 500; color: var(--fg-muted); margin-bottom: 6px; display: block; }

/* Header pill group */
.pill-group {
  display: flex; gap: 4px; padding: 4px;
  background: var(--bg-muted); border-radius: 10px;
}
.pill-group .chip { height: 26px; background: transparent; }
.pill-group .chip.active { background: var(--fg); color: var(--bg); }

/* Float card animation delay variant */
.float-card.delay-2 { animation-delay: 2s; }
.float-card.delay-4 { animation-delay: 4s; }

/* JSON inline editor */
.kbd-key {
  display: inline-flex; align-items: center; justify-content: center;
  height: 18px; min-width: 18px; padding: 0 4px;
  font-family: var(--font-mono); font-size: 11px;
  background: var(--bg-muted); color: var(--fg-subtle);
  border-radius: 4px; border: 1px solid var(--border);
}

/* Field static value display */
.fld-value { font-size: 13px; color: var(--fg); display: flex; align-items: center; gap: 8px; }
.fld-value.mono { font-family: var(--font-mono); font-size: 12px; }
.fld-value.break { word-break: break-all; }

/* Page entry */
@keyframes pageIn {
  from { opacity: 0; transform: translateY(6px); }
  to   { opacity: 1; transform: translateY(0); }
}
.route { animation: pageIn .32s var(--ease-emphasis); }

/* Hairline divider between sections */
hr.hairline { border: 0; border-top: 1px solid var(--border); margin: 16px 0; }

/* Subtle bg pattern in login art */
.grid-bg::after {
  content: ''; position: absolute; inset: 0;
  background:
    radial-gradient(800px 400px at 80% 20%, rgba(47,107,255,.18), transparent 50%),
    radial-gradient(600px 300px at 20% 80%, rgba(236,72,153,.10), transparent 50%);
}

/* Floating cards stagger */
.float-card { animation-iteration-count: infinite; }

/* Pretty link */
.link { color: var(--accent); cursor: pointer; }
.link:hover { text-decoration: underline; }

/* User cell padding fix */
.user-cell .meta { font-size: 11px; color: var(--fg-subtle); }

/* Vertical divider helper */
.v-div { width: 1px; height: 24px; background: var(--border); }