/* Portal theme (redesigned 2026-11-02 at Lacy's request to match the look of the CRM, ~/code/aspendora-crm).
   Tabler underneath; values are the ones the CRM's default theme actually renders: Inter 14/22, #f1f3f5 ground
   and sidebar, white panels with a thin border, full-width nav rows, muted blue actions.
   Loaded after app.css and tokens.css, so it also restyles the older pages. Crimson stays logo-only. */

@font-face { font-family: "Inter"; font-style: normal; font-weight: 400; font-display: swap; src: url("fonts/inter/Inter-Regular.woff2") format("woff2"); }
@font-face { font-family: "Inter"; font-style: italic; font-weight: 400; font-display: swap; src: url("fonts/inter/Inter-Italic.woff2") format("woff2"); }
@font-face { font-family: "Inter"; font-style: normal; font-weight: 500; font-display: swap; src: url("fonts/inter/Inter-Medium.woff2") format("woff2"); }
@font-face { font-family: "Inter"; font-style: normal; font-weight: 600; font-display: swap; src: url("fonts/inter/Inter-SemiBold.woff2") format("woff2"); }
@font-face { font-family: "Inter"; font-style: normal; font-weight: 700; font-display: swap; src: url("fonts/inter/Inter-Bold.woff2") format("woff2"); }

:root {
  --asp-sidebar-w: 232px;
  --asp-ground: #f1f3f5;
  --asp-ink: #262626;
  --asp-ink-soft: #535353;
  --asp-ink-muted: #6a6a6a;
  --asp-rule: #e7eaed;
  --asp-rule-strong: #e0e2e3;
  --asp-nav-hover: #ececed;
  --asp-nav-active: #dee1e7;
  --asp-action-blue: #5589ca;
  --asp-action-blue-hover: #4a7ab6;
  --asp-link: #245b8c;

  /* Brand tokens the older stylesheets are built on */
  --asp-font: "Inter", -apple-system, "Segoe UI", Roboto, sans-serif;
  --asp-action: var(--asp-action-blue);
  --asp-action-hover: var(--asp-action-blue-hover);
  --asp-bg-alt: var(--asp-ground);
  --asp-text: var(--asp-ink);
  --asp-text-muted: var(--asp-ink-muted);
  --asp-border: var(--asp-rule);

  /* Tabler */
  --tblr-font-sans-serif: var(--asp-font);
  --tblr-body-font-family: var(--asp-font);
  --tblr-body-font-size: 14px;
  --tblr-body-line-height: 1.571429;
  --tblr-body-color: var(--asp-ink);
  --tblr-body-color-rgb: 38, 38, 38;
  --tblr-body-bg: var(--asp-ground);
  --tblr-primary: var(--asp-action-blue);
  --tblr-primary-rgb: 85, 137, 202;
  --tblr-border-color: var(--asp-rule);
  --tblr-border-radius: 6px;
  --tblr-link-color: var(--asp-link);
  --tblr-link-color-rgb: 36, 91, 140;
  --tblr-secondary-color: var(--asp-ink-muted);
}

html, body { background: var(--asp-ground); color: var(--asp-ink); font-family: var(--asp-font); font-size: 14px; line-height: 1.571429; }
a { color: var(--asp-link); }
.text-secondary, .text-muted, .form-hint { color: var(--asp-ink-muted) !important; }

/* ---------- shell ---------- */
.asp-shell { display: flex; min-height: 100vh; }

.asp-sidebar {
  position: fixed; inset: 0 auto 0 0; width: var(--asp-sidebar-w);
  background: var(--asp-ground); color: var(--asp-ink); border-right: 1px solid var(--asp-rule-strong);
  display: flex; flex-direction: column; overflow-y: auto; z-index: 20;
}
.asp-logo { display: flex; justify-content: center; align-items: center; height: 65px; flex: none; }
.asp-logo img { height: 40px; width: auto; display: block; }

.asp-org { padding: 4px 16px 12px; }
.asp-org-caption { font-size: 12px; color: var(--asp-ink-muted); }
.asp-org-name { font-size: 14px; font-weight: 500; color: var(--asp-ink); line-height: 1.35; }
.asp-org .orgswitch { margin-top: 6px; }
.asp-org .orgswitch select {
  width: 100%; font: inherit; font-size: 13px; padding: 4px 6px; border-radius: 6px;
  background: #fff; color: var(--asp-ink); border: 1px solid var(--asp-rule-strong);
}

.asp-nav { display: flex; flex-direction: column; }
.asp-nav-group { font-size: 14px; font-weight: 400; color: var(--asp-ink-muted); padding: 14px 16px 5px; }
.asp-nav-link {
  display: flex; align-items: center; gap: 10px; height: 40px; padding: 0 20px 0 16px;
  color: var(--asp-ink); text-decoration: none; font-size: 14px; font-weight: 500;
}
.asp-nav-link .ti { font-size: 17px; width: 18px; text-align: center; color: var(--asp-ink-soft); }
.asp-nav-link:hover { color: var(--asp-ink); background: var(--asp-nav-hover); text-decoration: none; }
.asp-nav-link.active { color: var(--asp-ink); background: var(--asp-nav-active); }
.asp-nav-link:focus-visible { outline: 2px solid var(--asp-action-blue); outline-offset: -2px; }
/* Like the CRM, the main records carry a colour; everything else stays quiet. */
.asp-nav-link[href="/tickets"] .ti { color: #e4a133; }
.asp-nav-link[href="/projects"] .ti { color: #5589ca; }
.asp-nav-link[href="/computers"] .ti, .asp-nav-link[href="/assets"] .ti { color: #9b86c9; }
.asp-nav-link[href="/quotes"] .ti { color: #58c97a; }
.asp-nav-link[href="/invoices"] .ti { color: #d7657d; }

.asp-sidebar-foot { margin-top: auto; padding: 14px 16px; font-size: 12px; }
.asp-sidebar-foot a { color: var(--asp-ink-muted); text-decoration: none; display: inline-flex; gap: 6px; align-items: center; }
.asp-sidebar-foot a:hover { color: var(--asp-ink); }

.asp-main-col { flex: 1; margin-left: var(--asp-sidebar-w); min-width: 0; display: flex; flex-direction: column; }
.asp-topbar {
  height: 44px; background: var(--asp-ground); display: flex; align-items: center; justify-content: flex-end;
  gap: 10px; padding: 0 20px; position: sticky; top: 0; z-index: 10;
}
.asp-user { display: flex; align-items: center; gap: 8px; font-size: 13px; color: var(--asp-ink-soft); }
.asp-avatar { background: var(--asp-nav-active); color: var(--asp-ink); font-weight: 500; font-size: 11px; }
.asp-content { width: 100%; max-width: 1440px; padding: 6px 20px 40px; margin: 0; flex: 0 0 auto; }

/* ---------- page typography (new and old pages) ---------- */
.asp-content h1, .asp-content .page-title { font-size: 18px; font-weight: 500; letter-spacing: 0; color: var(--asp-ink); margin: 0 0 2px; line-height: 1.33; }
.asp-content h2 { font-size: 16px; font-weight: 500; color: var(--asp-ink); }
.asp-content h3 { font-size: 14px; font-weight: 500; color: var(--asp-ink); }
.asp-content .page-head, .asp-content .page-header { display: flex; align-items: flex-end; justify-content: space-between; gap: 1rem; margin: 0 0 14px; padding: 0; }
.asp-content .page-pretitle { font-size: 12px; font-weight: 400; color: var(--asp-ink-muted); text-transform: none; letter-spacing: 0; }
.asp-content .muted, .asp-content .lede { color: var(--asp-ink-muted); }
.asp-content .subheader { text-transform: none; letter-spacing: 0; font-size: 12px; font-weight: 400; color: var(--asp-ink-muted); }

.asp-content .page-header.d-flex > * { width: auto; max-width: 100%; }
.asp-content .page-header.d-flex { flex-direction: row; flex-wrap: nowrap; }
@media (max-width: 640px) { .asp-content .page-header.d-flex { flex-wrap: wrap; } }

/* ---------- panels ---------- */
.card { background: #fff; border: 1px solid var(--asp-rule); border-radius: 8px; box-shadow: none; --tblr-card-spacer-x: 14px; --tblr-card-spacer-y: 14px; }
.asp-content > .card, .asp-content .cards > .card { margin-bottom: 14px; }
.card-header { background: transparent; border-bottom: 1px solid var(--asp-rule); padding: 8px 14px; min-height: 40px; }
.card-title { font-size: 14px; font-weight: 500; color: var(--asp-ink); margin: 0; }
.card-footer { background: transparent; border-top: 1px solid var(--asp-rule); padding: 8px 14px; }
.list-group-item { border-color: var(--asp-rule); padding: 8px 14px; }
.list-group-item-action:hover { background: #f9f9f9; }

/* app.css pads its plain .card; Tabler cards do their own spacing, so don't pad those twice. */
.asp-content .card:has(> .card-header, > .card-body, > .card-footer, > .table-responsive, > .list-group, > .table) { padding: 0; }
.asp-content .card:not(:has(> .card-header, > .card-body, > .card-footer, > .table-responsive, > .list-group, > .table)) { padding: 14px; }
.card-header-tabs { background: transparent; margin-bottom: -9px; }
.card-header:has(> .card-header-tabs), .card-header:has(> .nav-tabs) { padding-bottom: 8px; }
.card-header-tabs .nav-link { padding: 6px 12px 7px; }

/* ---------- buttons ---------- */
.btn {
  --tblr-btn-font-size: 14px; --tblr-btn-font-weight: 500; --tblr-btn-border-radius: 6px; --tblr-btn-box-shadow: none;
  --tblr-btn-padding-y: 4px; --tblr-btn-padding-x: 12px; min-height: 32px; box-shadow: none !important; background-image: none !important;
}
.btn:not([class*="btn-"]), .btn-default { --tblr-btn-bg: #fff; --tblr-btn-color: var(--asp-ink); --tblr-btn-border-color: var(--asp-rule-strong); --tblr-btn-hover-bg: var(--asp-ground); --tblr-btn-hover-color: var(--asp-ink); --tblr-btn-hover-border-color: var(--asp-rule-strong); }
.btn-primary { --tblr-btn-bg: var(--asp-action-blue); --tblr-btn-border-color: var(--asp-action-blue); --tblr-btn-color: #fff; --tblr-btn-hover-bg: var(--asp-action-blue-hover); --tblr-btn-hover-border-color: var(--asp-action-blue-hover); --tblr-btn-hover-color: #fff; --tblr-btn-active-bg: var(--asp-action-blue-hover); --tblr-btn-active-border-color: var(--asp-action-blue-hover); }
.btn-sm { --tblr-btn-font-size: 12px; --tblr-btn-padding-y: 2px; --tblr-btn-padding-x: 8px; min-height: 26px; }
.asp-content .button {
  display: inline-flex; align-items: center; gap: 6px; min-height: 32px; background: var(--asp-action-blue); color: #fff; border: 0;
  border-radius: 6px; padding: 4px 12px; font-weight: 500; font-size: 14px; text-decoration: none;
}
.asp-content .button:hover { background: var(--asp-action-blue-hover); color: #fff; }
.asp-content .button-quiet { background: #fff; color: var(--asp-ink); border: 1px solid var(--asp-rule-strong); }
.asp-content .button-quiet:hover { background: var(--asp-ground); color: var(--asp-ink); }

/* ---------- forms ---------- */
.form-control, .form-select { font-size: 14px; min-height: 32px; padding-top: 4px; padding-bottom: 4px; border-radius: 6px; border-color: var(--asp-rule-strong); box-shadow: none; }
.form-control:focus, .form-select:focus { border-color: var(--asp-action-blue); box-shadow: 0 0 0 2px rgba(85,137,202,.18); }
.form-label { font-size: 13px; font-weight: 500; color: var(--asp-ink-soft); margin-bottom: 3px; }
.form-hint { font-size: 12px; }

/* ---------- tables, tabs, labels ---------- */
.table, .asp-content .grid { font-size: 13px; }
.table { --tblr-table-border-color: var(--asp-rule-strong); }
.table > :not(caption) > * > * { padding: 8px 10px; border-color: var(--asp-rule-strong); }
.table thead th, .asp-content .grid th, .asp-content table.table th {
  background: transparent; font-size: 13px; font-weight: 400; color: #757575; text-transform: none; letter-spacing: 0;
}
.nav-tabs { border-bottom-color: var(--asp-rule); }
.nav-tabs .nav-link { font-size: 14px; color: var(--asp-ink-soft); border: 0; border-bottom: 2px solid transparent; background: transparent; }
.nav-tabs .nav-link:hover { color: var(--asp-ink); border-bottom-color: var(--asp-rule-strong); }
.nav-tabs .nav-link.active { color: var(--asp-ink); font-weight: 500; background: transparent; border-bottom-color: var(--asp-action-blue); }
.badge { border-radius: 4px; font-size: 12px; font-weight: 400; text-transform: none; letter-spacing: 0; }
.alert { border-radius: 6px; box-shadow: none; font-size: 14px; }

/* ---------- home ---------- */
.asp-home-head { margin-bottom: 14px; }
.asp-home-head p { color: var(--asp-ink-muted); margin: 0; max-width: 60ch; }
.asp-tiles { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 12px; }
.asp-tile {
  display: grid; grid-template-columns: 20px 1fr; column-gap: 10px; row-gap: 2px; align-items: center; align-content: start; padding: 12px 14px;
  background: #fff; border: 1px solid var(--asp-rule); border-radius: 8px; color: inherit; text-decoration: none;
}
.asp-tile:hover { background: #f9f9f9; border-color: var(--asp-rule-strong); text-decoration: none; color: inherit; }
.asp-tile:focus-visible { outline: 2px solid var(--asp-action-blue); outline-offset: 2px; }
.asp-tile-icon { font-size: 18px; color: var(--asp-ink-soft); line-height: 1; }
.asp-tile[href="/tickets"] .asp-tile-icon { color: #e4a133; }
.asp-tile[href="/projects"] .asp-tile-icon { color: #5589ca; }
.asp-tile[href="/computers"] .asp-tile-icon, .asp-tile[href="/assets"] .asp-tile-icon { color: #9b86c9; }
.asp-tile[href="/invoices"] .asp-tile-icon { color: #d7657d; }
.asp-tile-title { font-weight: 500; font-size: 14px; color: var(--asp-ink); }
.asp-tile-text { grid-column: 2; color: var(--asp-ink-muted); font-size: 13px; line-height: 1.45; margin: 0; }
.asp-home-section { font-size: 14px; font-weight: 500; color: var(--asp-ink-soft); margin: 18px 0 8px; }

/* ---------- small screens: sidebar on top ---------- */
@media (max-width: 991px) {
  .asp-shell { display: block; }
  .asp-sidebar { position: static; width: auto; overflow: visible; border-right: 0; border-bottom: 1px solid var(--asp-rule-strong); }
  .asp-logo { height: 56px; }
  .asp-logo img { height: 32px; }
  .asp-org { padding: 0 14px 8px; }
  .asp-nav { flex-direction: row; flex-wrap: nowrap; overflow-x: auto; }
  .asp-nav-group { display: none; }
  .asp-nav-link { white-space: nowrap; padding: 0 12px; }
  .asp-sidebar-foot { display: none; }
  .asp-main-col { margin-left: 0; }
  .asp-topbar { position: static; padding: 0 14px; }
  .asp-content { padding: 6px 14px 32px; }
}

@media (prefers-reduced-motion: reduce) { * { transition: none !important; } }

/* ---------- legacy pages: request catalog, grids, labels ---------- */
.asp-content .cards { grid-template-columns: repeat(auto-fill, minmax(16rem, 1fr)); gap: 12px; }
.asp-content .card-link { padding: 12px 14px; border-radius: 8px; }
.asp-content .card-link:hover { background: #f9f9f9; border-color: var(--asp-rule-strong); }
.asp-content h3.muted { text-transform: none; letter-spacing: 0; font-size: 14px; font-weight: 400; color: var(--asp-ink-muted); margin: 18px 0 8px; }
/* Keep app.css's status cards (warning / error / ok) after the generic card rule above. */
.asp-content .card.notice { border-left: 3px solid var(--attention); background: var(--attention-bg); }
.asp-content .card.is-error { border-left: 3px solid var(--danger); }
.asp-content .card.is-ok { border-left: 3px solid var(--accent); }

/* ---- Client pages (tickets, projects, quotes): ticket discussion ---- */
.asp-note { white-space: pre-wrap; overflow-wrap: anywhere; }
.asp-note-client { background: #f6f9fc; }

/* ---- Sign-in pages ---- */
.asp-signin { max-width: 28rem; margin: 3rem auto; }

/* ---- Help articles (sanitised Hudu HTML) ---- */
.asp-article { line-height: 1.6; }
.asp-article img { max-width: 100%; height: auto; }
.asp-article h1, .asp-article h2, .asp-article h3 { margin-top: 1.25rem; }

/* Blazor moves focus to the page heading after navigation (for screen readers); don't draw a box around it. */
h1:focus, h2:focus, h1:focus-visible { outline: none; }

/* A page header that is just "pretitle + title" stacks on the left (Tabler's flex header pushed it to the right). */
.page-header:not(.d-flex) { display: block; }

/* ---- User guide (help center) ---- */
.asp-guide { font-size: 14px; line-height: 1.65; max-width: 62rem; }
.asp-guide h2 { font-size: 16px; font-weight: 500; margin-top: 1.75rem; }
.asp-guide h3 { font-size: 14px; font-weight: 500; margin-top: 1.25rem; }
.asp-guide img.asp-shot { display: block; max-width: 100%; height: auto; margin: .75rem 0 1.25rem; border: 1px solid var(--asp-rule); border-radius: 8px; box-shadow: 0 1px 2px rgba(15,23,42,.06); }
.asp-guide table { width: 100%; margin: .5rem 0 1rem; border-collapse: collapse; }
.asp-guide th, .asp-guide td { border-bottom: 1px solid var(--asp-rule); padding: .4rem .6rem; text-align: left; vertical-align: top; }
.asp-guide th { background: #f9f9f9; font-weight: 600; }
.asp-guide blockquote { margin: 1rem 0; padding: .75rem 1rem; border-left: 4px solid #b5bcc4; background: #f9f9f9; border-radius: 0 6px 6px 0; }
.asp-guide blockquote p:last-child { margin-bottom: 0; }
.asp-callout-important { border-left-color: #e4a133 !important; background: #fdf8ee !important; }
.asp-callout-admin { border-left-color: #9b86c9 !important; background: #f7f5fb !important; }
.asp-callout-tip { border-left-color: #5589ca !important; background: #f0f5fb !important; }
.asp-guide-toc { position: sticky; top: 1rem; }