/* ============================================================================
   OBSIDIAN — The Cofrady internal design system
   Brutalist: pure black, one blood red, heavy rules, big tabular numerals.
   Single source of truth. Works as raw CSS (any HTML) and inside the Blazor RCL
   (served at _content/Cofrady.Obsidian/css/obsidian.css).
   ============================================================================ */

/* ---- Tokens ---- */
:root{
  color-scheme: dark;
  --ob-bg:#0A0A0A;         --ob-surface:#121212;    --ob-elevated:#1A1A1A;
  --ob-border:#2E2E2E;     --ob-border-strong:#3A3A3A;
  --ob-text:#FAFAFA;       --ob-muted:#9A9A9A;      --ob-faint:#6A6A6A;
  --ob-primary:#D7263D;    --ob-primary-hover:#F03E55; --ob-primary-deep:#8E1526;
  --ob-on-primary:#FFFFFF; --ob-accent:#EDEDED;
  --ob-success:#36A85B;    --ob-warning:#E8B13A;    --ob-alert:#FF2A2A;

  --ob-radius:4px;         --ob-radius-sm:2px;
  --ob-font-display:'Space Grotesk','Segoe UI',system-ui,sans-serif;
  --ob-font-body:'Inter','Segoe UI',system-ui,sans-serif;
  --ob-font-mono:'JetBrains Mono','SFMono-Regular',ui-monospace,monospace;

  --ob-s1:4px; --ob-s2:8px; --ob-s3:12px; --ob-s4:16px; --ob-s5:24px; --ob-s6:32px; --ob-s7:48px;
  --ob-sidebar-w:240px;
}

/* ---- Reset / base ---- */
*,*::before,*::after{box-sizing:border-box}
.ob-root,body.ob{margin:0;background:var(--ob-bg);color:var(--ob-text);
  font-family:var(--ob-font-body);font-size:14px;line-height:1.55;-webkit-font-smoothing:antialiased}
.ob-root img{max-width:100%}
.ob-root h1,.ob-root h2,.ob-root h3,.ob-root h4{font-family:var(--ob-font-display);font-weight:700;
  letter-spacing:-.01em;line-height:1.08;margin:0;text-wrap:balance;color:var(--ob-text)}
.ob-root h1{font-size:30px}.ob-root h2{font-size:22px}.ob-root h3{font-size:17px}
.ob-root a{color:var(--ob-primary);text-decoration:none}
.ob-root a:hover{color:var(--ob-primary-hover)}
.ob-root hr,.ob-rule{border:0;border-top:1px solid var(--ob-border);margin:var(--ob-s5) 0}
.ob-root code,.ob-mono{font-family:var(--ob-font-mono)}
.ob-num{font-variant-numeric:tabular-nums}
.ob-muted{color:var(--ob-muted)}
.ob-eyebrow{font-size:11px;letter-spacing:.22em;text-transform:uppercase;color:var(--ob-muted);font-weight:600}
:where(.ob-root) :focus-visible{outline:2px solid var(--ob-primary);outline-offset:2px}

/* ---- Layout: app shell ---- */
.ob-app{display:grid;grid-template-columns:var(--ob-sidebar-w) 1fr;min-height:100vh;min-height:100dvh;background:var(--ob-bg)}
.ob-sidebar{background:#060606;border-right:1px solid var(--ob-border);display:flex;flex-direction:column;
  gap:var(--ob-s1);padding:var(--ob-s4) var(--ob-s3);position:sticky;top:0;height:100vh;height:100dvh;overflow-y:auto}
.ob-sidebar__brand{display:flex;align-items:center;gap:10px;padding:var(--ob-s2) var(--ob-s2) var(--ob-s4)}
.ob-sidebar__section{font-size:10px;letter-spacing:.2em;text-transform:uppercase;color:var(--ob-faint);
  font-weight:700;padding:var(--ob-s4) var(--ob-s2) var(--ob-s1)}
.ob-nav{display:flex;flex-direction:column;gap:2px}
.ob-nav-item{display:flex;align-items:center;gap:10px;padding:9px 10px;border-radius:var(--ob-radius-sm);
  color:var(--ob-muted);font-size:13px;font-weight:500;text-decoration:none;border-left:2px solid transparent;cursor:pointer}
.ob-nav-item:hover{color:var(--ob-text);background:var(--ob-surface)}
.ob-nav-item.active,.ob-nav-item[aria-current="page"]{color:var(--ob-text);background:var(--ob-surface);
  border-left-color:var(--ob-primary)}
.ob-nav-item svg{width:17px;height:17px;flex:0 0 auto;stroke-width:1.9}
.ob-main{display:flex;flex-direction:column;min-width:0}
.ob-topbar{display:flex;align-items:center;gap:var(--ob-s4);min-height:56px;padding:0 var(--ob-s5);
  border-bottom:1px solid var(--ob-border);background:var(--ob-bg);position:sticky;top:0;z-index:20}
.ob-topbar__spacer{margin-left:auto}
.ob-content{padding:var(--ob-s5);display:flex;flex-direction:column;gap:var(--ob-s5);min-width:0}
.ob-page-header{display:flex;flex-wrap:wrap;align-items:flex-end;gap:var(--ob-s2) var(--ob-s4)}
.ob-page-header__title{display:flex;flex-direction:column;gap:2px}
.ob-page-header__actions{margin-left:auto;display:flex;gap:var(--ob-s2);flex-wrap:wrap}

/* ---- Grid / helpers ---- */
.ob-grid{display:grid;gap:var(--ob-s4)}
.ob-grid--stats{grid-template-columns:repeat(auto-fit,minmax(170px,1fr))}
.ob-grid--2{grid-template-columns:repeat(auto-fit,minmax(280px,1fr))}
.ob-row{display:flex;gap:var(--ob-s3);flex-wrap:wrap}
.ob-stack{display:flex;flex-direction:column;gap:var(--ob-s4)}
.ob-spread{display:flex;align-items:center;gap:var(--ob-s3);justify-content:space-between;flex-wrap:wrap}

/* ---- Card ---- */
.ob-card{background:var(--ob-surface);border:1px solid var(--ob-border);border-radius:var(--ob-radius);
  padding:var(--ob-s4)}
.ob-card--marked{border-left:3px solid var(--ob-primary)}
.ob-card__head{display:flex;align-items:center;gap:var(--ob-s3);margin-bottom:var(--ob-s3)}
.ob-card__title{font-family:var(--ob-font-display);font-weight:700;font-size:15px}

/* ---- Stat tile ---- */
.ob-stat{background:var(--ob-surface);border:1px solid var(--ob-border);border-radius:var(--ob-radius);padding:var(--ob-s4)}
.ob-stat__label{font-size:10.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--ob-muted);font-weight:600}
.ob-stat__value{font-family:var(--ob-font-display);font-weight:700;font-size:30px;margin-top:6px;
  font-variant-numeric:tabular-nums;line-height:1}
.ob-stat__delta{font-size:12px;font-weight:600;margin-left:8px}
.ob-stat__delta--up{color:var(--ob-success)} .ob-stat__delta--down{color:var(--ob-alert)}

/* ---- Buttons ---- */
.ob-btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;cursor:pointer;
  font-family:var(--ob-font-body);font-size:13px;font-weight:600;letter-spacing:.01em;
  padding:9px 16px;border-radius:var(--ob-radius);border:1px solid var(--ob-border-strong);
  background:var(--ob-elevated);color:var(--ob-text);transition:background .12s,border-color .12s,transform .04s}
.ob-btn:hover{border-color:var(--ob-faint)}
.ob-btn:active{transform:translateY(1px)}
.ob-btn:disabled{opacity:.5;cursor:not-allowed}
.ob-btn--primary{background:var(--ob-primary);border-color:var(--ob-primary);color:var(--ob-on-primary)}
.ob-btn--primary:hover{background:var(--ob-primary-hover);border-color:var(--ob-primary-hover)}
.ob-btn--ghost{background:transparent;border-color:var(--ob-border)}
.ob-btn--ghost:hover{border-color:var(--ob-primary);color:var(--ob-text)}
.ob-btn--danger{background:transparent;color:var(--ob-alert);border-color:color-mix(in srgb,var(--ob-alert) 50%,transparent)}
.ob-btn--danger:hover{background:color-mix(in srgb,var(--ob-alert) 14%,transparent)}
.ob-btn--block{width:100%}
.ob-btn--lg{padding:12px 20px;font-size:14px}
.ob-btn--sm{padding:6px 11px;font-size:12px}

/* ---- Badge / status chip ---- */
.ob-badge{display:inline-flex;align-items:center;gap:6px;font-size:10.5px;font-weight:700;letter-spacing:.04em;
  text-transform:uppercase;padding:3px 9px;border-radius:var(--ob-radius-sm);
  background:var(--ob-elevated);color:var(--ob-muted);border:1px solid var(--ob-border)}
.ob-badge::before{content:"";width:6px;height:6px;border-radius:1px;background:currentColor}
.ob-badge--success{color:var(--ob-success);background:color-mix(in srgb,var(--ob-success) 15%,transparent);border-color:transparent}
.ob-badge--warning{color:var(--ob-warning);background:color-mix(in srgb,var(--ob-warning) 15%,transparent);border-color:transparent}
.ob-badge--danger{color:var(--ob-alert);background:color-mix(in srgb,var(--ob-alert) 15%,transparent);border-color:transparent}
.ob-badge--primary{color:var(--ob-primary);background:color-mix(in srgb,var(--ob-primary) 15%,transparent);border-color:transparent}
.ob-badge--neutral{} .ob-badge--plain::before{display:none}

/* ---- Alert ---- */
.ob-alert{display:flex;align-items:flex-start;gap:10px;padding:11px 14px;border-radius:var(--ob-radius);
  border:1px solid var(--ob-border);border-left-width:3px;background:var(--ob-surface);font-size:13px}
.ob-alert__icon{flex:0 0 auto;margin-top:1px}
.ob-alert--danger{border-left-color:var(--ob-alert);background:color-mix(in srgb,var(--ob-alert) 10%,var(--ob-surface));color:var(--ob-text)}
.ob-alert--danger .ob-alert__icon{color:var(--ob-alert)}
.ob-alert--warning{border-left-color:var(--ob-warning);background:color-mix(in srgb,var(--ob-warning) 10%,var(--ob-surface))}
.ob-alert--warning .ob-alert__icon{color:var(--ob-warning)}
.ob-alert--success{border-left-color:var(--ob-success);background:color-mix(in srgb,var(--ob-success) 10%,var(--ob-surface))}
.ob-alert--success .ob-alert__icon{color:var(--ob-success)}
.ob-alert--info{border-left-color:var(--ob-accent)}
.ob-alert--info .ob-alert__icon{color:var(--ob-accent)}

/* ---- Forms ---- */
.ob-field{display:flex;flex-direction:column;gap:6px;margin-bottom:var(--ob-s4)}
.ob-label{font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--ob-muted);font-weight:600}
.ob-input,.ob-select,.ob-textarea{width:100%;background:var(--ob-bg);color:var(--ob-text);
  border:1px solid var(--ob-border-strong);border-radius:var(--ob-radius);padding:10px 12px;
  font-family:var(--ob-font-body);font-size:14px}
.ob-input::placeholder,.ob-textarea::placeholder{color:var(--ob-faint)}
.ob-input:focus,.ob-select:focus,.ob-textarea:focus{outline:none;border-color:var(--ob-primary);
  box-shadow:0 0 0 2px color-mix(in srgb,var(--ob-primary) 35%,transparent)}
.ob-input:disabled,.ob-select:disabled{opacity:.6;cursor:not-allowed}
.ob-select{appearance:none;background-image:linear-gradient(45deg,transparent 50%,var(--ob-muted) 50%),linear-gradient(135deg,var(--ob-muted) 50%,transparent 50%);
  background-position:calc(100% - 18px) 55%,calc(100% - 13px) 55%;background-size:5px 5px,5px 5px;background-repeat:no-repeat;padding-right:34px}
.ob-help{font-size:12px;color:var(--ob-muted)}
.ob-check{display:inline-flex;align-items:center;gap:8px;font-size:13px;cursor:pointer}
.ob-check input{width:16px;height:16px;accent-color:var(--ob-primary)}
/* Blazor validation */
.ob-input.invalid,.ob-select.invalid,.invalid > .ob-input{border-color:var(--ob-alert)}
.validation-message,.ob-field__error{color:var(--ob-alert);font-size:12px}

/* ---- Table ---- */
.ob-table-wrap{overflow-x:auto;border:1px solid var(--ob-border);border-radius:var(--ob-radius)}
.ob-table{width:100%;border-collapse:collapse;font-size:13px;min-width:480px}
.ob-table thead th{text-align:left;font-size:10.5px;letter-spacing:.12em;text-transform:uppercase;
  color:var(--ob-muted);font-weight:700;padding:11px 14px;border-bottom:1px solid var(--ob-border);background:var(--ob-surface)}
.ob-table tbody td{padding:11px 14px;border-bottom:1px solid var(--ob-border);color:var(--ob-text)}
.ob-table tbody tr:last-child td{border-bottom:0}
.ob-table tbody tr:hover td{background:var(--ob-surface)}
.ob-table .ob-mono{font-size:12.5px;color:var(--ob-text)}

/* ---- Modal ---- */
.ob-modal__backdrop{position:fixed;inset:0;background:rgba(0,0,0,.7);display:flex;align-items:center;
  justify-content:center;padding:var(--ob-s4);z-index:100}
.ob-modal{background:var(--ob-surface);border:1px solid var(--ob-border-strong);border-top:3px solid var(--ob-primary);
  border-radius:var(--ob-radius);max-width:460px;width:100%;padding:var(--ob-s5);display:flex;flex-direction:column;gap:var(--ob-s4)}
.ob-modal__title{font-family:var(--ob-font-display);font-weight:700;font-size:18px}
.ob-modal__actions{display:flex;gap:var(--ob-s2);justify-content:flex-end;flex-wrap:wrap}

/* ---- Toasts ---- */
.ob-toasts{position:fixed;right:var(--ob-s4);bottom:var(--ob-s4);display:flex;flex-direction:column;gap:var(--ob-s2);z-index:120}
.ob-toast{background:var(--ob-elevated);border:1px solid var(--ob-border-strong);border-left:3px solid var(--ob-primary);
  border-radius:var(--ob-radius);padding:11px 14px;font-size:13px;min-width:220px;max-width:360px;
  box-shadow:0 8px 24px rgba(0,0,0,.5);animation:ob-toast-in .18s ease}
.ob-toast--success{border-left-color:var(--ob-success)} .ob-toast--danger{border-left-color:var(--ob-alert)}
.ob-toast--warning{border-left-color:var(--ob-warning)}
@keyframes ob-toast-in{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}

/* ---- Logo ---- */
.ob-logo{display:inline-flex;align-items:center;gap:10px}
.ob-logo__wm{display:flex;flex-direction:column;gap:2px;line-height:1}
.ob-logo__name{font-family:var(--ob-font-display);font-weight:700;font-size:16px;letter-spacing:-.01em;color:var(--ob-text)}
.ob-logo__name em{font-style:normal;color:var(--ob-primary)}
.ob-logo__tag{font-size:9.5px;letter-spacing:.18em;text-transform:uppercase;color:var(--ob-muted)}

/* ---- Responsive ---- */
@media (max-width:860px){
  .ob-app{grid-template-columns:1fr}
  .ob-sidebar{position:static;height:auto;flex-direction:row;flex-wrap:wrap;align-items:center;
    border-right:0;border-bottom:1px solid var(--ob-border)}
  .ob-sidebar__brand{padding:var(--ob-s2)}
  .ob-sidebar__section{display:none}
  .ob-nav{flex-direction:row;flex-wrap:wrap}
  .ob-nav-item{border-left:0;border-bottom:2px solid transparent}
  .ob-nav-item.active{border-left:0;border-bottom-color:var(--ob-primary)}
  .ob-content{padding:var(--ob-s4)}
}
@media (prefers-reduced-motion:reduce){*{animation-duration:.001ms!important;transition-duration:.001ms!important}}