/* da-panel.css — DigitalAgency.Tools' own layer over panel.css.

   Loaded after panel.css and before the vendor theme sheets. Holds ONLY what
   the kit lacks for this product: the few extra utilities the Bootstrap port
   needs, the shell's extras, the auth-page extras, and page-scoped blocks
   (.pg-<module>) that a converted view moved out of its <style>. Every value
   is a tokens.css name; a raw hex here is a bug. Nothing here restyles a kit
   class — if a kit sample looks wrong, fix panel.css, not this file. */

/* ------------------------------------------------------------------ shell */
/* The business's own logo above its name in the sidebar account block. */
.sidebar-logo { display: block; max-height: 40px; max-width: 160px; width: auto; height: auto; margin: 0 0 8px; }
/* A gated row: the page exists on a higher plan. Same row, a quiet chip. */
.nav-list a .nav-upgrade {
  margin-left: auto; font-size: 10px; font-weight: 700; line-height: 1; letter-spacing: .04em; text-transform: uppercase;
  padding: 4px 6px; border-radius: var(--radius); background: rgba(var(--warn-rgb), .14); color: var(--warn-ink);
}
.nav-list a.nav-gated { color: var(--muted); }
.nav-list a.nav-gated .material-icons { color: var(--muted-soft); }
/* On a desktop the sidebar is part of the page: it starts under the topbar,
   runs the full height of the layout and scrolls with everything else. (It
   used to be sticky at top: --topbar-h, which left a topbar-sized gap above
   it once the non-sticky topbar had scrolled away.) Phones keep the kit's
   fixed slide-out drawer (panel.css, max-width: 900px). */
/* The DA lockup is wider than the kit's (747×132): set by height only. */
.topbar .brand-logo { height: 36px; width: auto; }
@media (max-width: 900px) { .topbar .brand-logo { height: 28px; } }

/* ---------------------------------------------------------- feedback */
/* panel.css ships .toast and .toast-error; the bridge's toastr shim maps
   warning/info onto these two extra kinds. */
.toast-warn { background: var(--warn-ink); }
.toast-info { background: var(--dark); }

/* ------------------------------------------------------------- modals */
/* Form modals are authored in the view as .modal-back[hidden] > .modal and
   opened by Panel.modalOpen(); the backdrop/escape wiring is in app-panel.js. */
.modal-back[hidden] { display: none; }
body.modal-open { overflow: hidden; }
.modal .modal-title { margin: 0 0 12px; font-size: var(--text-h2); font-weight: 600; }
.modal-wide { max-width: 640px; }
.modal-xl { max-width: 900px; }
.modal-scroll { max-height: calc(100vh - 80px); overflow-y: auto; }

/* --------------------------------------------------------------- auth */
.auth-card.auth-wide { max-width: 480px; }
.auth-or { display: flex; align-items: center; gap: 12px; margin: 18px 0; color: var(--muted); font-size: var(--text-sm); text-transform: uppercase; letter-spacing: .05em; }
.auth-or::before, .auth-or::after { content: ""; flex: 1; height: 1px; background: var(--line-strong); }
/* Google sign-in: a white, outlined control at the kit's height — the one
   button that is deliberately not navy, because the mark must sit on white. */
.btn-google, .btn-google:hover { background: var(--surface); color: var(--ink); border-color: var(--control-edge); display: inline-flex; align-items: center; justify-content: center; gap: 10px; }
.btn-google:hover { border-color: var(--dark); background: var(--bg); }
.btn-google svg { width: 18px; height: 18px; flex: none; }
.auth-steps { display: flex; gap: 8px; margin: 0 0 18px; padding: 0; list-style: none; counter-reset: step; }
.auth-steps li { flex: 1; display: flex; align-items: center; gap: 8px; font-size: var(--text-sm); color: var(--muted); padding-bottom: 8px; border-bottom: 2px solid var(--line-strong); }
.auth-steps li::before { counter-increment: step; content: counter(step); width: 22px; height: 22px; border-radius: 50%; background: var(--track); color: var(--muted); font-weight: 600; font-size: 12px; display: inline-flex; align-items: center; justify-content: center; }
.auth-steps li.active { color: var(--ink); font-weight: 600; border-color: var(--primary); }
.auth-steps li.active::before { background: var(--primary); color: #fff; }
.auth-steps li.done::before { background: var(--ok); color: #fff; content: "✓"; }
.auth-actions { display: flex; gap: 8px; justify-content: space-between; margin-top: 18px; }
.auth-card .form-error { margin: 4px 0 0; }
/* A checkbox or radio with its words: <label class="check"><input type="checkbox"> Remember me</label> */
.check { display: flex; align-items: flex-start; gap: 8px; margin: 8px 0; font-size: var(--text-ui); font-weight: 400; cursor: pointer; }
.check input { width: auto; min-height: 0; margin: 3px 0 0; flex: none; }
.check .form-help { display: block; margin: 2px 0 0; }   /* its own line under the label, even as a <span> */
.check-list { display: flex; flex-direction: column; gap: 2px; }
.auth-foot { text-align: center; font-size: var(--text-ui); margin: 16px 0 0; color: var(--muted); }

/* ---------------------------------------------------- layout helpers */
/* The Bootstrap col-lg-8 / col-lg-4 page: main column and an aside. */
.layout-main-aside { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); gap: 18px; align-items: start; }
.layout-aside-main { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 2fr); gap: 18px; align-items: start; }
.field-grid-3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0 14px; }
.field-grid-4 { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0 14px; }
.row-flex { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.row-between { display: flex; align-items: center; justify-content: space-between; gap: 8px; flex-wrap: wrap; }
.stack { display: flex; flex-direction: column; gap: 8px; }
/* An input with a fixed affix ("€", "%", "https://") — one control height. */
.affix { display: flex; align-items: stretch; }
.affix > span { display: inline-flex; align-items: center; padding: 0 11px; min-height: var(--control-h); border: 1px solid var(--control-edge); border-right: 0; border-radius: var(--radius) 0 0 var(--radius); background: var(--surface-alt); color: var(--muted); font-size: var(--text-ui); white-space: nowrap; }
.affix > input, .affix > select { border-radius: 0 var(--radius) var(--radius) 0; min-width: 0; }
.affix > span + input { border-left: 1px solid var(--control-edge); }
.affix.affix-end > span { border-right: 1px solid var(--control-edge); border-left: 0; border-radius: 0 var(--radius) var(--radius) 0; }
.affix.affix-end > input { border-radius: var(--radius) 0 0 var(--radius); }
.avatar { width: 36px; height: 36px; border-radius: 50%; object-fit: cover; flex: none; background: var(--track); }
.avatar-sm { width: 28px; height: 28px; }
.avatar-lg { width: 56px; height: 56px; }
.text-center { text-align: center; }
.truncate { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }
.mb-16 { margin-bottom: 16px; } .mb-18 { margin-bottom: 18px; } .mt-24 { margin-top: 24px; } .p-0 { padding: 0; }
.w-100 { width: 100%; }
/* DB-driven status colours (task/deal statuses carry a hex): the ONE
   sanctioned inline hook — <span class="dot" style="--dot:#abc"></span>. */
.dot[style*="--dot"] { background: var(--dot); }
.swatch { display: inline-block; width: 14px; height: 14px; border-radius: 3px; border: 1px solid rgba(0,0,0,.12); vertical-align: -2px; background: var(--dot, var(--track)); }
.copyright { margin: 28px 0 0; }
.copyright img { width: 150px; height: auto; display: block; margin: 0 auto 6px; opacity: .8; }

@media (max-width: 900px) {
  .layout-main-aside, .layout-aside-main { grid-template-columns: minmax(0, 1fr); }   /* minmax: a wide table scrolls, never widens the page */
  .field-grid-3, .field-grid-4 { grid-template-columns: 1fr; }
}
@media (min-width: 901px) and (max-width: 1200px) {
  .field-grid-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* ------------------------------------------------- page-scoped blocks
   Added as modules convert. Each block is scoped to body.pg-<module>, set by
   the controller ($body_class), so a page's rules never leak. */

/* ------------------------------------------------- card header actions
   The kit lays out .pane > h2 as a flex row (title · .spacer · .btn-sm);
   .card is the same box under its index-page name, so give its h2 the same
   row — the dashboard and every list card put "View all" there. */
.card > h2 { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.card > h2 .muted { font-weight: 400; font-size: 13px; }
.card > h2 .material-icons.mi-sm { color: var(--muted-soft); }

/* ------------------------------------------------- small generic helpers */
.mono { font-family: var(--font-mono); font-size: var(--text-sm); }
.scroll-cap { max-height: 320px; overflow-y: auto; }
.scroll-cap-lg { max-height: 60vh; overflow-y: auto; }
/* A vertical list of links where one is selected (conversations, threads). */
.link-list { list-style: none; margin: 0; padding: 0; }
.link-list > li > a { display: block; padding: 8px 10px; border-radius: var(--radius); color: var(--ink); text-decoration: none; }
.link-list > li > a:hover { background: var(--bg); }
.link-list > li > a.active { background: rgba(var(--primary-rgb), .08); color: var(--primary); font-weight: 600; }
.link-list .muted { display: block; font-size: var(--text-xs); }

/* ------------------------------------------------- hidden always wins
   Several kit rules set display (flex rows, .affix spans, .kv cells); the
   `hidden` attribute is the one idiom views use to toggle, so it must win. */
[hidden] { display: none !important; }

/* An icon button that is a LINK gets the same box as the <button> one
   without needing class="btn" too (the gate rejects "btn btn-" strings). */
a.btn-icon { background: var(--dark); color: #fff; border: 1px solid transparent; border-radius: var(--radius); text-decoration: none; font-weight: 600; transition: background .12s, color .12s; }
a.btn-icon:hover, a.btn-icon:focus-visible { background: var(--primary); color: #fff; }
a.btn-icon.btn-icon-quiet { background: var(--dark); }
a.btn-icon.btn-icon-danger:hover { background: var(--crit); }

/* Filter strips wrap on narrow screens and their text inputs size to content. */
.card-filter { flex-wrap: wrap; }
.card-filter input[type=text], .card-filter input[type=search], .card-filter input[type=date], .card-filter input[type=number] { width: auto; flex: 1 1 160px; min-width: 120px; }
.card-filter form { display: contents; }
a.btn-quiet { display: inline-flex; align-items: center; gap: 6px; background: var(--dark); color: #fff; border: 1px solid transparent; border-radius: var(--radius); padding: var(--btn-pad); font-size: var(--text-ui); font-weight: 600; line-height: 1.4; min-height: var(--control-h); text-decoration: none; }
a.btn-quiet:hover, a.btn-quiet:focus-visible { background: var(--primary); color: #fff; }

/* Pills that are LINKS (filter rows: All · Today · This week) — the kit
   styles .pills button; give anchors the same look. */
.pills a { display: inline-block; padding: 5px 10px; border-radius: var(--radius-pill); color: var(--muted); font-size: var(--text-sm); font-weight: 600; text-decoration: none; }
.pills a:hover { background: var(--track); color: var(--ink); }
.pills a.active { background: var(--primary); color: #fff; }
/* Filter strips with several selects: the kit's 260px minimum wraps early. */
.card-filter select, .card-filter .select2-container { min-width: 150px; }