/* ==========================================================================
   House theme — Modern SaaS
   Drop-in over Bootstrap 5.3. Load AFTER bootstrap.min.css.

   Built on two ideas:
   1. Override Bootstrap's own CSS variables rather than fighting its selectors.
      Stock scaffolded markup (.btn, .table, .form-control, .card) then inherits
      the house style with no markup changes at all.
   2. Structure comes from borders and spacing, not shadows and gradients.
      Shadow is reserved for things that genuinely float — dropdowns, modals.
   ========================================================================== */

:root {
  /* ---- Palette -------------------------------------------------------- */
  --app-canvas:        #F8FAFC;  /* page background behind the content well */
  --app-surface:       #FFFFFF;  /* cards, tables, the content well itself  */
  --app-surface-sunk:  #F1F5F9;  /* table headers, inset panels             */

  --app-text:          #0F172A;  /* headings and primary copy               */
  --app-text-soft:     #475569;  /* secondary copy, table cells             */
  --app-text-muted:    #94A3B8;  /* captions, placeholders, disabled        */

  --app-border:        #E2E8F0;
  --app-border-strong: #CBD5E1;

  --app-accent:        #4F46E5;
  --app-accent-hover:  #4338CA;
  --app-accent-soft:   #EEF2FF;  /* active nav, selected rows, subtle fills */

  --app-success:       #16A34A;
  --app-success-soft:  #DCFCE7;
  --app-warning:       #D97706;
  --app-warning-soft:  #FEF3C7;
  --app-danger:        #DC2626;
  --app-danger-soft:   #FEE2E2;
  --app-info:          #0EA5E9;
  --app-info-soft:     #E0F2FE;

  /* ---- Geometry ------------------------------------------------------- */
  --app-radius-sm:  6px;
  --app-radius:     8px;
  --app-radius-lg: 12px;

  --app-sidebar-width: 240px;
  --app-row-height:     44px;

  /* One elevation only. If something needs a second, it probably needs a
     border instead. */
  --app-shadow: 0 4px 12px rgb(15 23 42 / .08), 0 1px 3px rgb(15 23 42 / .06);

  /* ---- Bootstrap overrides -------------------------------------------- */
  --bs-primary:           #4F46E5;
  --bs-primary-rgb:       79, 70, 229;
  --bs-body-color:        var(--app-text-soft);
  --bs-body-bg:           var(--app-canvas);
  --bs-border-color:      var(--app-border);
  --bs-border-radius:     var(--app-radius);
  --bs-border-radius-sm:  var(--app-radius-sm);
  --bs-border-radius-lg:  var(--app-radius-lg);
  --bs-link-color:        var(--app-accent);
  --bs-link-hover-color:  var(--app-accent-hover);
  --bs-font-sans-serif:   ui-sans-serif, -apple-system, "Segoe UI", Roboto,
                          "Helvetica Neue", Arial, sans-serif;
}

/* ==========================================================================
   Base
   ========================================================================== */

html { font-size: 16px; }

body {
  background: var(--app-canvas);
  color: var(--app-text-soft);
  font-size: .875rem;          /* 14px — the density SaaS tools settle on */
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  margin-bottom: 0;            /* undo the template's footer offset */
}

h1, h2, h3, h4, h5, h6 {
  color: var(--app-text);
  font-weight: 600;
  letter-spacing: -.011em;
}

h1 { font-size: 1.5rem; }
h2 { font-size: 1.25rem; }
h3 { font-size: 1.0625rem; }
h4, h5, h6 { font-size: .9375rem; }

/* Bootstrap 5.1 hard-codes the link colour instead of reading --bs-link-color,
   so this needs to be a real declaration. See the compatibility note at the
   bottom of this file. */
a {
  color: var(--app-accent);
  text-decoration: none;
}

a:hover {
  color: var(--app-accent-hover);
  text-decoration: underline;
}

hr {
  border-color: var(--app-border);
  opacity: 1;
}

/* Money, counts and dates line up column-to-column only with tabular figures.
   Worth applying broadly — proportional digits in a table read as sloppy. */
.tabular,
.table td,
.table th,
.stat-value,
time {
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum" 1;
}

/* ==========================================================================
   App shell — fixed sidebar + content well
   ========================================================================== */

.app-shell {
  display: flex;
  min-height: 100vh;
}

.app-sidebar {
  width: var(--app-sidebar-width);
  flex: 0 0 var(--app-sidebar-width);
  background: var(--app-surface);
  border-right: 1px solid var(--app-border);
  display: flex;
  flex-direction: column;
  position: sticky;
  top: 0;
  height: 100vh;
}

.app-brand {
  display: flex;
  align-items: center;
  gap: .5rem;
  padding: 1.15rem 1.25rem;
  font-size: 1rem;
  font-weight: 650;
  color: var(--app-text);
  letter-spacing: -.02em;
  border-bottom: 1px solid var(--app-border);
}

.app-brand:hover { text-decoration: none; color: var(--app-text); }

.app-brand-mark {
  width: 26px;
  height: 26px;
  border-radius: var(--app-radius-sm);
  background: var(--app-accent);
  color: #fff;
  display: grid;
  place-items: center;
  font-size: .75rem;
  font-weight: 700;
  flex: 0 0 auto;
}

.app-nav {
  padding: .75rem .625rem;
  overflow-y: auto;
  flex: 1 1 auto;
}

.app-nav-label {
  padding: .75rem .625rem .3rem;
  font-size: .6875rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .06em;
  color: var(--app-text-muted);
}

.app-nav-link {
  display: flex;
  align-items: center;
  gap: .625rem;
  padding: .5rem .625rem;
  margin-bottom: 1px;
  border-radius: var(--app-radius-sm);
  color: var(--app-text-soft);
  font-weight: 500;
  transition: background-color .12s ease, color .12s ease;
}

.app-nav-link:hover {
  background: var(--app-surface-sunk);
  color: var(--app-text);
  text-decoration: none;
}

/* The active item is the one thing in the sidebar allowed to use the accent. */
.app-nav-link.active {
  background: var(--app-accent-soft);
  color: var(--app-accent);
  font-weight: 600;
}

.app-nav-link .icon {
  width: 16px;
  height: 16px;
  flex: 0 0 16px;
  opacity: .85;
}

.app-nav-count {
  margin-left: auto;
  font-size: .6875rem;
  font-weight: 600;
  color: var(--app-text-muted);
  font-variant-numeric: tabular-nums;
}

.app-sidebar-footer {
  border-top: 1px solid var(--app-border);
  padding: .75rem;
}

.app-main {
  flex: 1 1 auto;
  min-width: 0;               /* lets wide tables scroll instead of stretching */
  display: flex;
  flex-direction: column;
}

/* A slim strip for things that belong to the session rather than the page — the bell, for now.
   Deliberately shallow: every pixel here is taken from every screen in the application. */
.app-topbar {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  gap: .5rem;
  padding: .5rem 2rem;
  border-bottom: 1px solid var(--app-border);
  background: var(--app-surface);
}

/* The panel escapes the strip rather than stretching it. */
.app-bell > summary::-webkit-details-marker { display: none; }
.app-bell > summary::marker { content: ""; }

.app-content {
  padding: 1.5rem 2rem 3rem;
  flex: 1 1 auto;
}

/* Mobile: the sidebar becomes a horizontal strip rather than a drawer.
   A drawer needs JS state; a strip needs nothing and degrades honestly. */
@media (max-width: 991.98px) {
  .app-shell { flex-direction: column; }
  .app-sidebar {
    width: 100%;
    flex: none;
    height: auto;
    position: static;
    border-right: 0;
    border-bottom: 1px solid var(--app-border);
  }
  .app-nav {
    display: flex;
    gap: .25rem;
    overflow-x: auto;
    padding: .5rem .75rem;
  }
  .app-nav-label, .app-nav-count { display: none; }
  .app-nav-link { white-space: nowrap; }
  .app-content { padding: 1.25rem 1rem 2rem; }
  .app-topbar { padding: .5rem 1rem; }
}

/* ==========================================================================
   Page header
   ========================================================================== */

.page-header {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: 1.25rem;
}

.page-title {
  font-size: 1.375rem;
  font-weight: 650;
  color: var(--app-text);
  margin: 0;
  letter-spacing: -.02em;
}

.page-subtitle {
  font-size: .8125rem;
  color: var(--app-text-muted);
  margin: .2rem 0 0;
}

.page-actions {
  display: flex;
  align-items: center;
  gap: .5rem;
  flex-wrap: wrap;
}

/* ==========================================================================
   Surfaces
   ========================================================================== */

.card,
.surface {
  background: var(--app-surface);
  border: 1px solid var(--app-border);
  border-radius: var(--app-radius);
  box-shadow: none;
}

.card-header {
  background: transparent;
  border-bottom: 1px solid var(--app-border);
  padding: .875rem 1.15rem;
  font-weight: 600;
  color: var(--app-text);
}

.card-body { padding: 1.15rem; }

/* ==========================================================================
   Tables
   ========================================================================== */

.table-surface {
  background: var(--app-surface);
  border: 1px solid var(--app-border);
  border-radius: var(--app-radius);
  overflow: hidden;           /* clips the header's square corners */
}

.table-surface .table { margin-bottom: 0; }

.table {
  --bs-table-bg: transparent;
  --bs-table-color: var(--app-text-soft);
  --bs-table-border-color: var(--app-border);
  --bs-table-hover-bg: var(--app-surface-sunk);
  --bs-table-hover-color: var(--app-text);
  font-size: .8125rem;
}

.table > thead > tr > th {
  background: var(--app-surface-sunk);
  border-bottom: 1px solid var(--app-border);
  color: var(--app-text-muted);
  font-size: .6875rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .05em;
  padding: .625rem .875rem;
  white-space: nowrap;
}

.table > tbody > tr > td {
  padding: .625rem .875rem;
  height: var(--app-row-height);
  vertical-align: middle;
  border-bottom: 1px solid var(--app-border);
}

.table > tbody > tr:last-child > td { border-bottom: 0; }

/* Zebra striping fights the hover state and adds noise at this row height.
   A hover tint communicates "this row" far better. */
.table-striped > tbody > tr:nth-of-type(odd) > * {
  --bs-table-accent-bg: transparent;
  background-color: transparent;
  box-shadow: none;
  color: inherit;
}

/* Bootstrap paints row states with an inset box-shadow driven by
   --bs-table-accent-bg, so a plain background-color alone would be covered up. */
.table-hover > tbody > tr:hover > * {
  --bs-table-accent-bg: var(--app-surface-sunk);
  background-color: var(--app-surface-sunk);
  color: var(--app-text);
}

.table .cell-primary {
  color: var(--app-text);
  font-weight: 550;
}

.table .cell-num {
  text-align: right;
  font-variant-numeric: tabular-nums;
}

.table .cell-actions {
  text-align: right;
  white-space: nowrap;
}

.table .cell-actions a {
  color: var(--app-text-muted);
  font-weight: 500;
  padding: 0 .3rem;
}

.table .cell-actions a:hover { color: var(--app-accent); }

/* ==========================================================================
   Buttons
   ========================================================================== */

/* Buttons are declared with real properties rather than --bs-btn-* variables.
   Bootstrap only moved buttons onto CSS variables in 5.3, and the .NET project
   templates still ship 5.1 — variable-only overrides silently do nothing there.
   The variables are set alongside so an upgrade to 5.3 keeps working. */

.btn {
  --bs-btn-font-size: .8125rem;
  --bs-btn-font-weight: 550;
  --bs-btn-padding-y: .4rem;
  --bs-btn-padding-x: .8rem;
  --bs-btn-border-radius: var(--app-radius-sm);
  font-size: .8125rem;
  font-weight: 550;
  padding: .4rem .8rem;
  border-radius: var(--app-radius-sm);
  transition: background-color .12s ease, border-color .12s ease, color .12s ease;
}

.btn:focus, .btn:active:focus, .btn:focus-visible {
  box-shadow: 0 0 0 3px rgb(79 70 229 / .18);   /* replaces the template's white ring */
}

.btn-primary {
  --bs-btn-bg: var(--app-accent);
  --bs-btn-border-color: var(--app-accent);
  --bs-btn-hover-bg: var(--app-accent-hover);
  --bs-btn-hover-border-color: var(--app-accent-hover);
  color: #fff;
  background-color: var(--app-accent);
  border-color: var(--app-accent);
}

.btn-primary:hover,
.btn-primary:focus,
.btn-primary:active,
.btn-primary.active,
.btn-check:checked + .btn-primary {
  color: #fff;
  background-color: var(--app-accent-hover);
  border-color: var(--app-accent-hover);
}

/* The default secondary button in a SaaS app is a bordered neutral, not a
   filled gray. Restyle .btn-secondary and .btn-outline-secondary alike so
   scaffolded markup lands correctly without edits. */
.btn-secondary,
.btn-outline-secondary {
  --bs-btn-color: var(--app-text);
  --bs-btn-bg: var(--app-surface);
  --bs-btn-border-color: var(--app-border-strong);
  color: var(--app-text);
  background-color: var(--app-surface);
  border-color: var(--app-border-strong);
}

.btn-secondary:hover,
.btn-secondary:focus,
.btn-secondary:active,
.btn-outline-secondary:hover,
.btn-outline-secondary:focus,
.btn-outline-secondary:active {
  color: var(--app-text);
  background-color: var(--app-surface-sunk);
  border-color: var(--app-border-strong);
}

.btn-danger {
  --bs-btn-bg: var(--app-danger);
  --bs-btn-border-color: var(--app-danger);
  color: #fff;
  background-color: var(--app-danger);
  border-color: var(--app-danger);
}

.btn-danger:hover,
.btn-danger:focus,
.btn-danger:active {
  color: #fff;
  background-color: #B91C1C;
  border-color: #B91C1C;
}

.btn-link {
  --bs-btn-color: var(--app-accent);
  color: var(--app-accent);
  text-decoration: none;
}

.btn-link:hover { color: var(--app-accent-hover); }

.btn-sm {
  --bs-btn-font-size: .75rem;
  --bs-btn-padding-y: .3rem;
  --bs-btn-padding-x: .6rem;
  font-size: .75rem;
  padding: .3rem .6rem;
}

.btn-lg {
  font-size: .9375rem;
  padding: .55rem 1.1rem;
  border-radius: var(--app-radius);
}

/* ==========================================================================
   Forms
   ========================================================================== */

.form-label {
  font-size: .8125rem;
  font-weight: 550;
  color: var(--app-text);
  margin-bottom: .3rem;
}

.form-control,
.form-select {
  font-size: .8125rem;
  padding: .45rem .7rem;
  border-color: var(--app-border-strong);
  border-radius: var(--app-radius-sm);
  color: var(--app-text);
  background-color: var(--app-surface);
}

.form-control::placeholder { color: var(--app-text-muted); }

.form-control:focus,
.form-select:focus {
  border-color: var(--app-accent);
  box-shadow: 0 0 0 3px rgb(79 70 229 / .14);
}

.form-check-input:checked {
  background-color: var(--app-accent);
  border-color: var(--app-accent);
}

.form-check-input:focus {
  border-color: var(--app-accent);
  box-shadow: 0 0 0 3px rgb(79 70 229 / .14);
}

.form-text { font-size: .75rem; color: var(--app-text-muted); }

.text-danger,
.field-validation-error,
.validation-summary-errors {
  color: var(--app-danger) !important;
  font-size: .75rem;
}

.input-validation-error { border-color: var(--app-danger) !important; }

/* The validation-summary tag helper swaps these classes itself, so styling them
   here means the scaffolded `class="text-danger"` summary becomes a proper alert
   with no markup change — and stops rendering an empty red box when valid. */
.validation-summary-valid { display: none; }

.validation-summary-errors {
  background: var(--app-danger-soft);
  border: 1px solid #FECACA;
  border-radius: var(--app-radius);
  padding: .75rem 1rem;
  margin-bottom: 1.15rem;
}

.validation-summary-errors ul {
  margin: 0;
  padding-left: 1.1rem;
}

/* A form is easier to scan in a bounded well than floating on the canvas. */
.form-panel {
  background: var(--app-surface);
  border: 1px solid var(--app-border);
  border-radius: var(--app-radius);
  padding: 1.35rem 1.5rem;
  max-width: 720px;
}

.form-panel .row + .row { margin-top: .25rem; }

.form-section-title {
  font-size: .6875rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .05em;
  color: var(--app-text-muted);
  padding-bottom: .5rem;
  margin: 1.5rem 0 1rem;
  border-bottom: 1px solid var(--app-border);
}

.form-section-title:first-child { margin-top: 0; }

.form-footer {
  display: flex;
  gap: .5rem;
  align-items: center;
  margin-top: 1.5rem;
  padding-top: 1.15rem;
  border-top: 1px solid var(--app-border);
}

/* ==========================================================================
   Badges and pills
   ========================================================================== */

.badge {
  font-size: .6875rem;
  font-weight: 600;
  padding: .25em .55em;
  border-radius: var(--app-radius-sm);
  letter-spacing: .01em;
}

/* Soft badges read as data labels; solid ones read as alerts. Default to soft. */
.badge-soft          { background: var(--app-surface-sunk); color: var(--app-text-soft); }
.badge-soft-accent   { background: var(--app-accent-soft);  color: var(--app-accent); }
.badge-soft-success  { background: var(--app-success-soft); color: #15803D; }
.badge-soft-warning  { background: var(--app-warning-soft); color: #B45309; }
.badge-soft-danger   { background: var(--app-danger-soft);  color: #B91C1C; }
.badge-soft-info     { background: var(--app-info-soft);    color: #0369A1; }

/* ==========================================================================
   Stat tiles
   ========================================================================== */

.stat-card {
  background: var(--app-surface);
  border: 1px solid var(--app-border);
  border-radius: var(--app-radius);
  padding: 1rem 1.15rem;
  height: 100%;
}

.stat-label {
  font-size: .6875rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .05em;
  color: var(--app-text-muted);
}

.stat-value {
  font-size: 1.625rem;
  font-weight: 650;
  color: var(--app-text);
  line-height: 1.15;
  margin-top: .3rem;
  letter-spacing: -.02em;
}

.stat-meta {
  font-size: .75rem;
  color: var(--app-text-muted);
  margin-top: .15rem;
}

.stat-delta-up   { color: var(--app-success); font-weight: 600; }
.stat-delta-down { color: var(--app-danger);  font-weight: 600; }

/* ==========================================================================
   Empty states
   ========================================================================== */

.empty-state {
  text-align: center;
  padding: 3rem 1.5rem;
  border: 1px dashed var(--app-border-strong);
  border-radius: var(--app-radius);
  background: var(--app-surface);
}

.empty-state-title {
  font-size: .9375rem;
  font-weight: 600;
  color: var(--app-text);
  margin-bottom: .25rem;
}

.empty-state-body {
  font-size: .8125rem;
  color: var(--app-text-muted);
  margin-bottom: 1rem;
}

/* ==========================================================================
   Alerts
   ========================================================================== */

.alert {
  border-radius: var(--app-radius);
  border-width: 1px;
  font-size: .8125rem;
  padding: .75rem 1rem;
}

.alert-success { background: var(--app-success-soft); border-color: #BBF7D0; color: #15803D; }
.alert-warning { background: var(--app-warning-soft); border-color: #FDE68A; color: #B45309; }
.alert-danger  { background: var(--app-danger-soft);  border-color: #FECACA; color: #B91C1C; }
.alert-info    { background: var(--app-info-soft);    border-color: #BAE6FD; color: #0369A1; }

/* ==========================================================================
   Dropdowns and modals — the only floating surfaces
   ========================================================================== */

.dropdown-menu {
  border: 1px solid var(--app-border);
  border-radius: var(--app-radius);
  box-shadow: var(--app-shadow);
  padding: .3rem;
  font-size: .8125rem;
}

.dropdown-item {
  border-radius: var(--app-radius-sm);
  padding: .4rem .6rem;
  color: var(--app-text-soft);
}

.dropdown-item:hover { background: var(--app-surface-sunk); color: var(--app-text); }

.modal-content {
  border: 1px solid var(--app-border);
  border-radius: var(--app-radius-lg);
  box-shadow: var(--app-shadow);
}

/* ==========================================================================
   Pagination
   ========================================================================== */

.page-link {
  color: var(--app-text-soft);
  border-color: var(--app-border);
  font-size: .8125rem;
  padding: .35rem .65rem;
}

.page-link:hover { background: var(--app-surface-sunk); color: var(--app-text); }

.page-item.active .page-link {
  background: var(--app-accent);
  border-color: var(--app-accent);
}

/* ==========================================================================
   Definition lists — what the Razor Details scaffold generates
   ========================================================================== */

.detail-list { margin: 0; }

.detail-list dt {
  font-size: .75rem;
  font-weight: 600;
  color: var(--app-text-muted);
  text-transform: uppercase;
  letter-spacing: .04em;
  padding: .55rem 0;
}

.detail-list dd {
  color: var(--app-text);
  padding: .55rem 0;
  margin: 0;
  border-bottom: 1px solid var(--app-border);
}

.detail-list dt { border-bottom: 1px solid var(--app-border); }
.detail-list > :nth-last-child(-n+2) { border-bottom: 0; }

/* ==========================================================================
   Bootstrap version compatibility

   The .NET project templates ship Bootstrap 5.1, which predates most of
   Bootstrap's CSS-variable theming. Anything below only became overridable via
   variables in 5.3, so this file declares real properties for them:

     - buttons (--bs-btn-*)          → 5.3
     - border radius (--bs-border-radius) → 5.3
     - link colour (--bs-link-color)  → read by `a` only from 5.3

   Both forms are written where they differ, so the theme is correct on 5.1 and
   stays correct after an upgrade. If you bump Bootstrap and something looks
   doubled up, the variable form is the one to keep.

   Quick check after any Bootstrap change — a primary button should compute to
   rgb(79, 70, 229), not rgb(13, 110, 253):

     getComputedStyle(document.querySelector('.btn-primary')).backgroundColor
   ========================================================================== */