/* Tabler adoption bridge.
   Loaded AFTER tabler.min.css on app pages only. Two jobs:
   (1) re-base the design-system tokens every existing template (and its
       inline styles) consumes onto Tabler's theme variables, keyed by
       data-bs-theme — so unconverted page bodies render correctly inside
       the Tabler shell in both themes;
   (2) carry the component styles Bootstrap has no equivalent for (pills,
       gallery tiles, mask editor, funnel, timeline, helpers) until each
       page is converted natively, plus the shell extras Tabler lacks
       (grouped nav labels, the collapse-to-rail fold).
   Delete pieces of this file as pages go native. */

/* ---- brand palette on Tabler ---- */
:root {
  --tblr-primary: #1f7a58;
  --tblr-primary-rgb: 31, 122, 88;
  --tblr-primary-darken: #145038;
  --tblr-primary-lt: rgba(31, 122, 88, .12);
}
[data-bs-theme=dark] {
  --tblr-primary: #2f9d72;
  --tblr-primary-rgb: 47, 157, 114;
}

/* ---- legacy tokens re-based on Tabler's theme ---- */
:root, [data-bs-theme=light] {
  --pine: #1f7a58; --pine-deep: #145038;
  --amber: #e39a2d; --amber-soft: #f4c66a; --ink: #16130f;
  --bg: var(--tblr-bg-surface-secondary);
  --surface: var(--tblr-bg-surface);
  --surface-2: var(--tblr-bg-surface-tertiary);
  --border: var(--tblr-border-color);
  --text: var(--tblr-body-color);
  --muted: var(--tblr-secondary);
  --accent: var(--tblr-primary);
  --accent-ink: #ffffff;
  --good: #2f8f5b; --warn: #c9871f; --crit: #c0492f;
  --radius: 10px; --radius-sm: 7px;
  --shadow: 0 1px 2px rgba(20,16,10,.06), 0 6px 20px -8px rgba(20,16,10,.18);
  --mono: ui-monospace, "SF Mono", "Cascadia Code", Menlo, monospace;
  --maxw: 1160px;
  --m-s1: #145038; --m-s2: #1f7a58;
}
[data-bs-theme=dark] {
  --accent-ink: #06130d;
  --shadow: 0 1px 2px rgba(0,0,0,.3), 0 10px 30px -12px rgba(0,0,0,.6);
  --m-s1: #2f9d72; --m-s2: #23795a;
}

/* ---- shell extras ---- */
.page .navbar-brand .lbl { font-weight: 800; letter-spacing: -.02em; color: #4caf7d; font-size: 1.05rem; }
.navgroup {
  list-style: none; padding: .95rem .75rem .25rem; font-size: .66rem; font-weight: 700;
  letter-spacing: .08em; text-transform: uppercase; color: rgba(255,255,255,.4);
}
.userbox-t { font-size: .85rem; color: rgba(255,255,255,.65); }
.userbox-t .name { font-weight: 650; color: rgba(255,255,255,.9); }
/* The profile button at the bottom of the sidebar opens the Settings modal. */
.userbox-btn {
  display: flex; align-items: center; gap: .6rem; width: 100%; text-align: left;
  border: 0; background: transparent; color: inherit; cursor: pointer;
  padding: .7rem .75rem; border-top: 1px solid rgba(255,255,255,.08); border-radius: 0;
}
.userbox-btn:hover { background: rgba(255,255,255,.06); }
.userbox-btn .userbox-meta { min-width: 0; line-height: 1.25; }
.userbox-btn .userbox-meta .name,
.userbox-btn .userbox-meta > span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.userbox-btn .userbox-gear { margin-left: auto; color: rgba(255,255,255,.55); font-size: 1.05rem; display: inline-flex; }

/* Roomy settings modal on desktop (shows the vertical nav with Sign out at the
   bottom); full-screen sheet on phones (the fullscreen-sm-down class wins below sm). */
@media (min-width: 576px) { .settings-modal-dialog { max-width: 960px; } }
/* Settings modal iframe: fixed height on desktop, fills the sheet on phones. */
.settings-frame { width: 100%; height: 78vh; border: 0; display: block; background: var(--tblr-bg-surface); }
#settingsModal .modal-body { display: flex; }
@media (max-width: 575.98px) {
  #settingsModal .modal-content { height: 100%; }
  #settingsModal .modal-body { flex: 1 1 auto; padding: 0; }
  .settings-frame { height: 100%; }
}

/* --- Settings page on narrow surfaces (also the modal on phones) --- */
.settings-embed { background: var(--tblr-bg-surface); }
@media (max-width: 767.98px) {
  /* The section nav becomes a sticky, horizontally-scrolling pill strip. */
  .settings-card .setnav-col { position: sticky; top: 0; z-index: 3; background: var(--tblr-bg-surface); border-bottom: 1px solid var(--tblr-border-color); }
  .settings-card .setnav-col.border-end { border-inline-end: 0 !important; }
  .settings-card .setnav-col .card-body { padding: .6rem .75rem; }
  .settings-card #setnav { flex-direction: row; flex-wrap: nowrap; overflow-x: auto; gap: .4rem; -webkit-overflow-scrolling: touch; scrollbar-width: none; }
  .settings-card #setnav::-webkit-scrollbar { display: none; }
  .settings-card #setnav .list-group-item {
    white-space: nowrap; border: 1px solid var(--tblr-border-color); border-radius: 999px;
    padding: .3rem .8rem; font-size: .85rem;
  }
  .settings-card #setnav .list-group-item.active { background: var(--tblr-primary); border-color: var(--tblr-primary); color: #fff; }
  .settings-card .col-md-9 .card-body { padding: 1rem .9rem 1.5rem; }
}
.sidefold {
  width: 24px; height: 24px; border-radius: 50%; border: 1px solid var(--tblr-border-color);
  background: var(--tblr-bg-surface); color: var(--tblr-secondary); cursor: pointer;
  line-height: 1; font-size: .8rem; align-items: center; justify-content: center;
  position: absolute; top: 1rem; right: 8px; z-index: 5;
}
.sidefold:hover { color: var(--tblr-body-color); }
.sidefold .fold-out { display: none; }
html[data-side="collapsed"] .sidefold .fold-in { display: none; }
html[data-side="collapsed"] .sidefold .fold-out { display: block; }
@media (min-width: 992px) {
  html[data-side="collapsed"] .navbar-vertical.navbar-expand-lg { width: 4.5rem; min-width: 4.5rem; }
  html[data-side="collapsed"] .navbar-vertical .lbl,
  html[data-side="collapsed"] .navbar-vertical .navgroup { display: none; }
  html[data-side="collapsed"] .navbar-vertical .nav-link { justify-content: center; }
  /* Collapsed rail: the profile button shrinks to just its avatar (still opens Settings). */
  html[data-side="collapsed"] .userbox-btn { justify-content: center; padding-left: 0; padding-right: 0; }
  /* The page must follow the rail: Tabler's .page-wrapper margin assumes the
     full 15rem sidebar — without this the content keeps its old offset and a
     168px hole opens between the collapsed rail and the page. */
  html[data-side="collapsed"] .navbar-vertical.navbar-expand-lg ~ .page-wrapper,
  html[data-side="collapsed"] .page-wrapper { margin-left: 4.5rem; }
}
/* The vertically-scrolling sidebar must never grow a horizontal scrollbar (it
   was cutting off the menu). Hide horizontal overflow; the fold handle is
   tucked just inside the right edge (see .sidefold) so nothing needs to show
   past it. */
.navbar-vertical { overflow-x: hidden; }
/* Fluid-vertical layout (Tabler layout-fluid-vertical): content fills the
   viewport next to the vertical navbar; no page max-width. */
.content { padding: 1.5rem 1.4rem 4rem; width: 100%; }
@media (max-width: 860px) { .content { padding: 1rem .9rem 4rem; } }

/* ---- brand marks (dual-keyed during migration) ---- */
.mark { height: 1.5em; width: 1.5em; flex: none; }
.mark .s1 { fill: var(--m-s1); stroke: var(--m-s1); }
.mark .s2 { fill: var(--m-s2); }
.mark .sig { fill: var(--amber); }
.mark .gl { fill: var(--amber-soft); }
.mark .gnd { stroke: var(--m-s2); }

/* ---- base bits old bodies assume ---- */
small { color: var(--muted); }
.mono { font-family: var(--mono); font-size: .85em; }

/* ---- forms: templates use bare elements, Bootstrap only styles classes ---- */
label:not(.form-label):not(.form-check-label) { display: block; font-size: .82rem; font-weight: 600; color: var(--muted); margin-bottom: .3em; }
input:not(.btn-check):not(.form-check-input):not(.form-control), select:not(.form-select), textarea:not(.form-control) {
  width: 100%; font: inherit; padding: .6em .7em; border-radius: var(--radius-sm);
  border: 1px solid var(--border); background: var(--surface); color: var(--text);
}
/* :not(.form-check-input) — Tabler checkboxes are appearance:none and
   collapse to zero width if this legacy width:auto wins. */
input[type=checkbox]:not(.form-check-input), input[type=radio]:not(.form-check-input) { width: auto; flex: none; padding: 0; }
textarea { resize: vertical; min-height: 74px; }
.field { margin-bottom: .9em; }
/* Legacy form rows only — must NOT touch Bootstrap's grid .row, or every
   Tabler row/col layout inherits the extra gap and wraps early. */
.row:has(> .field) { display: flex; gap: .8em; flex-wrap: wrap; margin: 0; }
.row > .field { flex: 1 1 180px; }

/* ---- legacy button variants ---- */
.btn-ghost { background: transparent; border-color: var(--tblr-border-color); color: var(--text); }
.btn-amber { background: var(--amber); color: #241a06; border-color: transparent; }
.btn-amber:hover { background: var(--amber-soft); color: #241a06; }

/* ---- pills (status colors preserved) ---- */
.pill {
  display: inline-flex; align-items: center; gap: .35em; font-size: .72rem; font-weight: 650;
  padding: .2em .6em; border-radius: 999px; background: var(--surface-2); color: var(--muted);
  letter-spacing: .02em; text-transform: capitalize; white-space: nowrap;
}
.pill-lead     { background: color-mix(in srgb, var(--muted) 18%, transparent); color: var(--muted); }
.pill-photos   { background: color-mix(in srgb, #6a8fc4 25%, transparent); color: #6a8fc4; }
.pill-rendering{ background: color-mix(in srgb, var(--amber) 25%, transparent); color: var(--warn); }
.pill-shared   { background: color-mix(in srgb, #7b74d8 25%, transparent); color: #8a83e0; }
.pill-approved { background: color-mix(in srgb, var(--good) 22%, transparent); color: var(--good); }
.pill-estimate { background: color-mix(in srgb, var(--amber) 25%, transparent); color: var(--warn); }
.pill-won      { background: var(--accent); color: var(--accent-ink); }
.pill-lost     { background: color-mix(in srgb, var(--crit) 20%, transparent); color: var(--crit); }

/* ---- cards / stats (our semantics; visually close to Tabler's) ---- */
.card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); box-shadow: var(--shadow); }
.card-pad { padding: 1.1rem 1.2rem; }
.stat .k { font-size: .78rem; color: var(--muted); font-weight: 600; }
.stat .v { font-size: 1.55rem; font-weight: 750; letter-spacing: -.02em; }
.grid.stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: .9rem; }
/* Tabler ships its own .grid (display:grid; 12 equal columns). On marketing
   pages our .grid relies on a companion modifier for its columns, and Tabler's
   generic .grid loads after app.css — flattening these to 12 squished columns.
   Re-assert the column templates (higher specificity + loaded last). */
.grid.feature-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 1rem; }
.grid.price-grid   { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 1rem; }

/* ---- tables (ours are <table class="data">) ---- */
.table-wrap { overflow-x: auto; }
table.data { width: 100%; border-collapse: collapse; font-size: .92rem; }
table.data th { text-align: left; font-size: .74rem; text-transform: uppercase; letter-spacing: .05em; color: var(--muted); padding: .5rem .6rem; border-bottom: 1px solid var(--border); }
table.data td { padding: .6rem; border-bottom: 1px solid var(--border); vertical-align: middle; }
table.data tr:hover td { background: color-mix(in srgb, var(--surface-2) 55%, transparent); }

/* ---- kanban board ---- */
.board { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(210px, 1fr); gap: .7rem; overflow-x: auto; padding-bottom: .5rem; }
.board .col { background: var(--surface-2); border-radius: var(--radius); padding: .6rem; }
.board .col h4 { margin: .1rem .2rem .5rem; font-size: .8rem; text-transform: uppercase; letter-spacing: .04em; color: var(--muted); }
.board .item { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-sm); padding: .5rem .6rem; margin-bottom: .5rem; }

/* ---- rendering gallery ---- */
.gallery { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: .9rem; }
.gallery .tile { border: 1px solid var(--border); border-radius: var(--radius); overflow: hidden; background: var(--surface-2); }
.gallery .tile img { width: 100%; aspect-ratio: 16/11; object-fit: cover; display: block; }
.gallery .tile .meta { display: flex; justify-content: space-between; align-items: center; padding: .45rem .6rem; gap: .5rem; }
.gallery .tile.chosen { outline: 2px solid var(--accent); }

/* ---- placement-mask editor ---- */
.mask-items { display: flex; gap: .5rem; overflow-x: auto; padding-bottom: .3rem; -webkit-overflow-scrolling: touch; scrollbar-width: thin; }
.mask-item { flex: 0 0 auto; border: 1px solid var(--border); border-radius: var(--radius-sm); padding: .45rem .7rem; cursor: pointer; background: var(--surface); white-space: nowrap; }
.mask-item.active { outline: 2px solid var(--accent); }
.mask-item .dot { display: inline-block; width: 9px; height: 9px; border-radius: 50%; margin-right: .35em; background: var(--border); }
.mask-item.drawn .dot { background: var(--good); }
.mask-canvas-wrap { position: relative; border-radius: var(--radius); overflow: hidden; background: var(--surface-2); }
.mask-canvas-wrap img, .mask-canvas-wrap canvas { display: block; width: 100%; }
.mask-canvas-wrap canvas { position: absolute; inset: 0; touch-action: none; }

/* ---- ordered service picker (add-job) ---- */
.vertpick { display: flex; flex-wrap: wrap; gap: .5rem; }
.vertpick button { position: relative; display: inline-flex; align-items: center; gap: .45em; font: inherit; font-weight: 600; padding: .5em .9em; border-radius: 999px; border: 1px solid var(--border); background: var(--surface); color: var(--text); cursor: pointer; }
.vertpick button.on { border-color: var(--accent); background: color-mix(in srgb, var(--accent) 10%, transparent); }
.vertpick .ordbadge { position: absolute; top: -7px; right: -7px; width: 18px; height: 18px; border-radius: 50%; background: var(--accent); color: var(--accent-ink); font-size: .68rem; font-weight: 700; display: flex; align-items: center; justify-content: center; }
.vertpick .ordbadge.hidden { display: none; }

/* ---- dashboard funnel ---- */
.funnel { display: grid; grid-template-columns: repeat(auto-fit, minmax(110px, 1fr)); gap: .6rem; }
.funnel .stage { background: var(--surface-2); border-radius: var(--radius-sm); padding: .55rem .7rem; }

/* ---- timeline ---- */
.timeline { list-style: none; margin: 0; padding: 0; }
.timeline li { display: flex; gap: .8rem; padding: .45rem 0; border-bottom: 1px dashed var(--border); font-size: .9rem; }
.timeline .when { color: var(--muted); flex: 0 0 7.5rem; font-size: .8rem; }
.timeline .verb { font-weight: 650; }

/* ---- layout helpers ---- */
.flex { display: flex; gap: .6rem; align-items: center; }
.wrap { flex-wrap: wrap; }
.between { display: flex; justify-content: space-between; align-items: center; gap: 1rem; }
.two-col { display: grid; grid-template-columns: 1.1fr .9fr; gap: 1.1rem; align-items: start; }
@media (max-width: 1000px) { .two-col { grid-template-columns: 1fr; } }
.muted { color: var(--muted); }
.mt { margin-top: 1.1rem; } .mb { margin-bottom: 1.1rem; }
.hidden { display: none; }
.notice { border: 1px solid color-mix(in srgb, var(--good) 45%, var(--border)); background: color-mix(in srgb, var(--good) 12%, transparent); border-radius: var(--radius-sm); padding: .7rem .9rem; margin-bottom: 1rem; }
.error { border: 1px solid color-mix(in srgb, var(--crit) 45%, var(--border)); background: color-mix(in srgb, var(--crit) 12%, transparent); border-radius: var(--radius-sm); padding: .7rem .9rem; margin-bottom: 1rem; }
.page-head { display: flex; justify-content: space-between; align-items: end; gap: 1rem; margin-bottom: 1.1rem; }
.page-head p { margin: 0; color: var(--muted); }

/* ---- touch strips: themed thin scrollbars ---- */
.refstrip { max-width: 100%; }
.refstrip, .board, .table-wrap, .mask-items {
  -webkit-overflow-scrolling: touch; scrollbar-width: thin;
  scrollbar-color: var(--border) transparent; overscroll-behavior-x: contain;
}
.refstrip::-webkit-scrollbar, .board::-webkit-scrollbar, .table-wrap::-webkit-scrollbar, .mask-items::-webkit-scrollbar { height: 8px; }
.refstrip::-webkit-scrollbar-track, .board::-webkit-scrollbar-track, .table-wrap::-webkit-scrollbar-track, .mask-items::-webkit-scrollbar-track { background: transparent; }
.refstrip::-webkit-scrollbar-thumb, .board::-webkit-scrollbar-thumb, .table-wrap::-webkit-scrollbar-thumb, .mask-items::-webkit-scrollbar-thumb { background: var(--border); border-radius: 4px; }
.refthumb { touch-action: pan-x; }
@media (pointer: coarse) {
  .refitem input[type=checkbox] { width: 20px; height: 20px; }
}

/* The sidebar is pinned to data-bs-theme=dark, so the brand mark must always
   use its on-dark palette there — the page-theme colors (deep pine in light
   mode) vanish against the navy. Also render it larger; at 1.75em of the
   navbar font it reads muddy. */
.navbar-vertical .mark { --m-s1: #2f9d72; --m-s2: #23795a; height: 2em; width: 2em; }