/* ============================================================================
   AlphaVet theme — brand palette pulled from the logo, applied over Bootstrap 5.
   Light is primary; dark follows the viewer's toggle (data-bs-theme) / OS.
   ========================================================================== */

:root, [data-bs-theme="light"] {
  --av-brand:#0B4FC4; --av-brand-deep:#08337E; --av-sky:#3B8FD4; --av-tint:#EAF1FD;
  --av-card:#FFFFFF; --av-panel:#FBFCFE; --av-bg:#F5F8FC;
  --av-ink:#0E1B2E; --av-body:#3B4759; --av-muted:#6B7891; --av-border:#E4E9F1;
  --av-shadow:0 1px 2px rgba(14,27,46,.05), 0 10px 30px rgba(11,79,196,.07);

  --bs-primary:#0B4FC4; --bs-primary-rgb:11,79,196;
  --bs-link-color:#0B4FC4; --bs-link-color-rgb:11,79,196;
  --bs-link-hover-color:#08337E; --bs-link-hover-color-rgb:8,51,126;
  --bs-body-color:#3B4759; --bs-body-color-rgb:59,71,89;
  --bs-body-bg:#F5F8FC; --bs-emphasis-color:#0E1B2E;
  --bs-border-color:#E4E9F1;
  --bs-border-radius:.6rem; --bs-border-radius-sm:.45rem; --bs-border-radius-lg:.9rem;
  --bs-secondary-color:#6B7891;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-bs-theme="light"]) {
    --av-brand:#3E7EE6; --av-brand-deep:#8FB6F2; --av-sky:#6FB2E6; --av-tint:#152541;
    --av-card:#111E36; --av-panel:#0E1930; --av-bg:#0A1120;
    --av-ink:#EAF1FB; --av-body:#C3CFE1; --av-muted:#8695B0; --av-border:#243350;
    --av-shadow:0 1px 2px rgba(0,0,0,.5), 0 14px 34px rgba(0,0,0,.4);
    --bs-primary:#3E7EE6; --bs-primary-rgb:62,126,230;
    --bs-link-color:#7FB0F0; --bs-link-hover-color:#A9C7F5;
    --bs-body-color:#C3CFE1; --bs-body-bg:#0A1120; --bs-emphasis-color:#EAF1FB;
    --bs-border-color:#243350; --bs-secondary-color:#8695B0;
  }
}
[data-bs-theme="dark"] {
  --av-brand:#3E7EE6; --av-brand-deep:#8FB6F2; --av-sky:#6FB2E6; --av-tint:#152541;
  --av-card:#111E36; --av-panel:#0E1930; --av-bg:#0A1120;
  --av-ink:#EAF1FB; --av-body:#C3CFE1; --av-muted:#8695B0; --av-border:#243350;
  --av-shadow:0 1px 2px rgba(0,0,0,.5), 0 14px 34px rgba(0,0,0,.4);
  --bs-primary:#3E7EE6; --bs-primary-rgb:62,126,230;
  --bs-link-color:#7FB0F0; --bs-link-hover-color:#A9C7F5;
  --bs-body-color:#C3CFE1; --bs-body-bg:#0A1120; --bs-emphasis-color:#EAF1FB;
  --bs-border-color:#243350; --bs-secondary-color:#8695B0;
}

/* ---- base ---- */
html, body {
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}
body {
  background:
    radial-gradient(1100px 420px at 90% -10%, color-mix(in srgb, var(--av-brand) 10%, transparent), transparent),
    var(--av-bg);
  color: var(--av-body);
  min-height: 100vh;
}
h1,h2,h3,h4,h5 { color: var(--av-ink); }
a { text-decoration: none; }
a:hover { text-decoration: underline; }

/* ---- buttons ---- */
.btn { border-radius: var(--bs-border-radius); font-weight: 600; }
.btn-primary { --bs-btn-bg:var(--av-brand); --bs-btn-border-color:var(--av-brand);
  --bs-btn-hover-bg:var(--av-brand-deep); --bs-btn-hover-border-color:var(--av-brand-deep);
  --bs-btn-active-bg:var(--av-brand-deep); --bs-btn-disabled-bg:var(--av-brand); --bs-btn-disabled-border-color:var(--av-brand);
  box-shadow: 0 6px 16px color-mix(in srgb, var(--av-brand) 26%, transparent); }
.btn-outline-primary { --bs-btn-color:var(--av-brand); --bs-btn-border-color:color-mix(in srgb,var(--av-brand) 45%,var(--av-border));
  --bs-btn-hover-bg:var(--av-brand); --bs-btn-hover-border-color:var(--av-brand); }
.btn-lg { border-radius: var(--bs-border-radius); }

/* ---- cards / surfaces ---- */
.card { background: var(--av-card); border:1px solid var(--av-border);
  border-radius: var(--bs-border-radius-lg); box-shadow: var(--av-shadow); }
.card-title { color: var(--av-ink); font-weight: 700; }

/* ---- forms ---- */
.form-control, .form-select {
  background: var(--av-card); border-color: var(--av-border); color: var(--av-ink); border-radius: var(--bs-border-radius-sm);
}
.form-control:focus, .form-select:focus {
  border-color: var(--av-brand); box-shadow: 0 0 0 3px color-mix(in srgb, var(--av-brand) 24%, transparent);
}
.form-check-input:checked { background-color: var(--av-brand); border-color: var(--av-brand); }
.form-check-input:focus { border-color: var(--av-brand); box-shadow: 0 0 0 3px color-mix(in srgb, var(--av-brand) 22%, transparent); }
.btn:focus, .btn:active:focus, .form-control:focus, .form-check-input:focus {
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--av-brand) 26%, transparent);
}

/* ---- tables ---- */
.table { --bs-table-color: var(--av-body); border-color: var(--av-border); }
.table > :not(caption) > * > * { border-color: var(--av-border); }
.table thead th { color: var(--av-muted); font-size:.8rem; text-transform:uppercase; letter-spacing:.04em; font-weight:700; }
/* Revoked/disabled/deactivated row — a subtle muted tint from theme tokens (dark in dark mode, not
   bright). Striped-bg is set to the same tint so it stays uniform on .table-striped tables too. */
.av-row-revoked {
  --bs-table-bg: color-mix(in srgb, var(--av-muted) 12%, var(--av-card));
  --bs-table-color: var(--av-muted);
  --bs-table-striped-bg: color-mix(in srgb, var(--av-muted) 12%, var(--av-card));
  --bs-table-striped-color: var(--av-muted);
}
.av-row-revoked code { color: var(--av-muted); }

/* ---- links / code ---- */
code { color: var(--av-brand-deep); }
.text-muted { color: var(--av-muted) !important; }

/* =====================  brand mark  ===================== */
.av-brand { display:inline-flex; align-items:center; gap:11px; text-decoration:none; }
.av-brand:hover { text-decoration:none; }
.av-badge { flex:none; position:relative; border-radius:12px;
  background:linear-gradient(160deg, var(--av-brand), var(--av-brand-deep));
  box-shadow:0 4px 12px color-mix(in srgb, var(--av-brand) 32%, transparent);
  display:flex; align-items:center; justify-content:center; }
.av-badge .av-a { color:#fff; font-family:Georgia,"Times New Roman",serif; font-style:italic; font-weight:700; line-height:1; margin-top:-2px; }
.av-badge .av-yr { position:absolute; bottom:3px; left:0; right:0; text-align:center; color:rgba(255,255,255,.9); letter-spacing:.1em; font-weight:700; }
.av-badge-md { width:42px; height:42px; } .av-badge-md .av-a { font-size:1.5rem; } .av-badge-md .av-yr { font-size:.44rem; }
.av-badge-sm { width:34px; height:34px; border-radius:10px; } .av-badge-sm .av-a { font-size:1.2rem; } .av-badge-sm .av-yr { font-size:.38rem; }
.av-badge-lg { width:48px; height:48px; border-radius:13px; } .av-badge-lg .av-a { font-size:1.7rem; } .av-badge-lg .av-yr { font-size:.46rem; }
.av-word { display:flex; flex-direction:column; line-height:1; }
.av-word b { color:var(--av-ink); font-weight:800; letter-spacing:.02em; font-size:1.02rem; }
.av-word b span { color:var(--av-brand); }
.av-word small { color:var(--av-muted); font-size:.64rem; margin-top:2px; }

/* =====================  top navigation  ===================== */
.av-topbar { position:sticky; top:0; z-index:1030; display:flex; align-items:center; gap:16px;
  padding:12px 22px; background:color-mix(in srgb, var(--av-card) 88%, transparent);
  backdrop-filter:saturate(140%) blur(8px); border-bottom:1px solid var(--av-border); }
.av-navlinks { display:flex; gap:4px; margin-left:8px; }
.av-navlinks a { padding:7px 12px; border-radius:8px; font-size:.88rem; color:var(--av-body); font-weight:600; }
.av-navlinks a:hover { background:var(--av-tint); text-decoration:none; }
.av-navlinks a.active { background:var(--av-tint); color:var(--av-brand); }
.av-spacer { flex:1; }
.av-userchip { display:inline-flex; align-items:center; gap:9px; padding:5px 6px 5px 13px;
  border:1px solid var(--av-border); border-radius:999px; font-size:.82rem; color:var(--av-body); background:var(--av-card); }
.av-avatar { width:28px; height:28px; border-radius:50%; background:linear-gradient(150deg,var(--av-sky),var(--av-brand));
  color:#fff; display:flex; align-items:center; justify-content:center; font-size:.72rem; font-weight:700; }
.av-iconbtn { border:1px solid var(--av-border); background:var(--av-card); color:var(--av-body); border-radius:999px;
  width:36px; height:36px; cursor:pointer; font-size:1rem; line-height:1; display:inline-flex; align-items:center; justify-content:center; }
.av-iconbtn:hover { border-color:var(--av-brand); color:var(--av-brand); }
.av-logout { background:none; border:0; color:var(--av-muted); font:inherit; font-size:.82rem; cursor:pointer; padding:6px 8px; border-radius:8px; }
.av-logout:hover { color:var(--av-brand); background:var(--av-tint); }

/* main content shell */
.av-main { max-width:1120px; margin:0 auto; padding:26px 20px 64px; }

/* =====================  small helpers used by pages  ===================== */
.av-eyebrow { font-size:.72rem; letter-spacing:.14em; text-transform:uppercase; color:var(--av-brand); font-weight:700; }
.av-hero { display:flex; gap:28px; align-items:center; flex-wrap:wrap; padding:8px 0 6px; }
.av-hero .lead-copy { flex:1 1 320px; }
.av-hero h1 { font-size:2rem; letter-spacing:-.01em; margin-bottom:.5rem; }
.av-dropzone { border:1.5px dashed color-mix(in srgb, var(--av-brand) 34%, var(--av-border));
  border-radius:var(--bs-border-radius-lg); background:var(--av-panel); padding:18px; }
.av-shot-frame { border:1px solid var(--av-border); border-radius:var(--bs-border-radius-lg); overflow:hidden; background:var(--av-panel); }

/* ---- simple modal (no Bootstrap JS dependency) ---- */
.av-modal-backdrop { position:fixed; inset:0; z-index:1055; background:rgba(3,10,24,.5);
  display:flex; align-items:flex-start; justify-content:center; padding:48px 16px; overflow:auto; }
.av-modal { background:var(--av-card); color:var(--av-body); border:1px solid var(--av-border);
  border-radius:var(--bs-border-radius-lg); box-shadow:var(--av-shadow); width:100%; max-width:540px; }
.av-modal-header, .av-modal-footer { padding:14px 18px; display:flex; align-items:center; }
.av-modal-header { border-bottom:1px solid var(--av-border); justify-content:space-between; }
.av-modal-header h5 { color:var(--av-ink); }
.av-modal-body { padding:16px 18px; }
.av-modal-footer { border-top:1px solid var(--av-border); justify-content:flex-end; gap:8px; }
.av-modal-wide { max-width:760px; }

/* ---- preset thumbnail / swatch picker grid ---- */
.av-thumb-grid { display:grid; grid-template-columns:repeat(auto-fill, minmax(120px, 1fr)); gap:10px; }
.av-thumb-card { border:2px solid var(--av-border); border-radius:10px; padding:6px; cursor:pointer;
  background:var(--av-card); color:var(--av-body); text-align:center; }
.av-thumb-card:hover { border-color:var(--bs-primary); }
.av-thumb-card.active { border-color:var(--bs-primary); box-shadow:0 0 0 2px var(--bs-primary); }
.av-thumb-card img, .av-thumb-swatch { width:100%; aspect-ratio:1/1; border-radius:6px; object-fit:cover; display:block; }
.av-thumb-swatch { border:1px solid var(--av-border); }
.av-thumb-card .cap { display:block; font-size:.76rem; margin-top:5px; line-height:1.15; }

/* ---- animated before/after showcase (landing) ---- */
.ba-grid { display:grid; grid-template-columns:repeat(auto-fit, minmax(190px, 1fr)); gap:16px; }
.ba { position:relative; aspect-ratio:1/1; border-radius:var(--bs-border-radius-lg); overflow:hidden;
  border:1px solid var(--av-border); box-shadow:var(--av-shadow); }
.ba-layer {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.ba-before { animation: baSweep 6s ease-in-out infinite; }
.ba-divider { position:absolute; top:0; bottom:0; width:2px; background:#fff;
  box-shadow:0 0 0 1px rgba(0,0,0,.18); animation: baDiv 6s ease-in-out infinite; }
.ba-label { position:absolute; bottom:8px; font-size:.66rem; font-weight:700; padding:2px 9px;
  border-radius:999px; color:#fff; }
.ba-label.before { left:8px; background:rgba(15,27,46,.6); }
.ba-label.after  { right:8px; background:var(--av-brand); }
@keyframes baSweep {
  0%   { clip-path: inset(0 0 0 0); }
  45%  { clip-path: inset(0 100% 0 0); }
  55%  { clip-path: inset(0 100% 0 0); }
  100% { clip-path: inset(0 0 0 0); }
}
@keyframes baDiv {
  0% { left:100%; } 45% { left:0; } 55% { left:0; } 100% { left:100%; }
}
@media (prefers-reduced-motion: reduce) {
  .ba-before { animation:none; clip-path: inset(0 50% 0 0); }
  .ba-divider { animation:none; left:50%; }
}

/* blazor error UI (from template) kept subtle */
#blazor-error-ui { background:#fff3cd; }