/* ── Reset ── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

/* ── Design tokens ──
   TPE brand palette (see erp_assets_and_style_templates/.../RGMv2/reconciled/
   for provenance). Canonical --tk-* tokens are the source of truth; the old
   token names below are kept as aliases so the 22 pages that already
   reference var(--green) etc. keep working unchanged. This is a deliberate
   "foundation first" step — new code should use the --tk-* names directly;
   the old aliases go away once every page is swept individually. */
:root {
    --tk-blue:          #2a4f82;
    --tk-blue-dark:     #1d3a61;
    --tk-sidebar-dark:  #142944;  /* left nav (sidebar) + Client Detail's .profile-top header — darker than --tk-blue-dark, which the top nav still uses */
    --tk-blue-light:    #EEF1F5;
    --tk-yellow:        #ffc20e;
    --tk-yellow-light:  #fff3cc;
    --tk-yellow-dark:   #c49500;
    --tk-teal:          #0d9488;
    --tk-red:           #a5413c;
    --tk-red-light:     #F6ECEC;
    --tk-orange:        #d97706;
    --tk-orange-light:  #FBF1E6;
    --tk-green:         #2a8265;
    --tk-green-light:   #EAF2F0;
    --tk-emerald:       #49B275;  /* distinct from --tk-green (success) — for CTA/action buttons like "New Contact" so success and action-green don't share one meaning */
    --tk-emerald-light: #EDF7F1;
    --tk-emerald-dark:  #398B5B;
    --tk-info:          #185FA5;  /* distinct from --tk-blue (primary) — kept as its own semantic so "info" stays a real category, not a duplicate of primary */
    --tk-info-light:    #E6F1FB;
    --tk-bg:            #f5f4f0;
    --tk-card:          #ffffff;
    --tk-t1:            #1c1c1a;
    --tk-t2:            #5a5a54;
    --tk-t3:            #8a8a82;
    --tk-brd:           #EDEDED;

    /* PLACEHOLDER tokens — not supplied by the client, see reconciled/
       README.md. Flag for confirmation before ship. */
    --tk-purple:          #6b4c8f;
    --tk-purple-light:    #F1ECF5;
    --tk-burgundy:        #7a3b4a;
    --tk-burgundy-light:  #F3EAEC;

    /* ── legacy aliases (remove once the 22 pages are swept) ── */
    --green:        var(--tk-blue);
    --green-light:  var(--tk-green-light);
    --green-mid:    var(--tk-blue-dark);
    --green-accent: var(--tk-yellow);
    --slate:        var(--tk-blue-dark);
    --slate-light:  var(--tk-bg);
    --white:        var(--tk-card);
    --border:       var(--tk-brd);
    --text:         var(--tk-t1);
    --muted:        var(--tk-t2);
    --amber:        var(--tk-orange);
    --amber-light:  var(--tk-orange-light);
    --teal:         var(--tk-teal);
    --red:          var(--tk-red);
    --red-light:    var(--tk-red-light);

    font-family: 'Outfit', sans-serif;
}

body {
    background: #E8ECF0;
    color: var(--text);
    font-family: 'Outfit', sans-serif;
    font-size: 14px;
    line-height: 1.5;
    /* See "The shell's height" note above .crm-shell. */
    height: 100vh;
    height: 100dvh;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

/* ── Typography ── */
.brand {
    font-family: 'Playfair Display', serif;
    color: #fff;
    font-size: 18px;
    letter-spacing: .02em;
    text-decoration: none;
}
.brand span { color: var(--green-accent); }

/* ── CRM App Shell ── */
/* ── The shell's height: 100dvh, with a 100vh fallback ───────────────────────────────────────
   ⚠ 100vh is the LARGE viewport on a mobile browser — the height with the address bar retracted —
   so on a real phone the shell ran 60-100px taller than the visible area, its bottom sitting under
   the browser chrome. With `overflow: hidden` here there is no outer scroll to recover that strip,
   and the inner scroller's `padding-bottom: calc(72px + safe-area)` (which exists to clear the
   fixed 56px .bottom-tabs) was being measured inside a box that overshot the screen — so the
   padding was eaten and the last slice of content ended up under the tab bar, unreachable however
   far you scrolled.
   dvh tracks the visible viewport as the bar collapses, which is what that padding already assumes.
   Pages/Sign/Index.cshtml hit this first and fixed it locally ("100vh overshoots and pushes the
   footer below the fold"); this is the same fix applied to the shell under every other page.
   ⚠ Emulation CANNOT show this bug: a desktop browser pane has no address bar, so 100vh,
   innerHeight and visualViewport.height are all equal there. Verify on hardware.
   The duplicate declaration is a deliberate fallback for anything older than Safari 15.4 /
   Chrome 108 - such a browser ignores the dvh line and keeps today's behaviour. */
.crm-shell {
    display: flex;
    flex-direction: column;
    height: 100vh;
    height: 100dvh;
    overflow: hidden;
}

/* ── Top nav ── */
.top-nav {
    height: 52px;
    background: var(--slate);
    display: flex;
    align-items: center;
    padding: 0 24px;
    gap: 16px;
    flex-shrink: 0;
    z-index: 10;
}
.nav-search-wrap { position: relative; }
.nav-search {
    width: 300px;
    background: rgba(255,255,255,.1);
    border: 1px solid rgba(255,255,255,.15);
    border-radius: 7px;
    height: 32px;
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 0 12px;
    color: rgba(255,255,255,.4);
    font-size: 12px;
    cursor: text;
}
.nav-search i { font-size: 14px; }
.nav-search input {
    background: none; border: none; outline: none; flex: 1;
    color: #fff; font-size: 12px; font-family: 'Outfit', sans-serif;
}
.nav-search input::placeholder { color: rgba(255,255,255,.4); }
.search-menu {
    position: absolute; top: calc(100% + 8px); left: 0;
    width: 380px; max-width: calc(100vw - 32px);
    background: var(--white); border: 1px solid var(--border);
    border-radius: 10px; box-shadow: 0 4px 20px rgba(0,0,0,.12);
    z-index: 300; overflow: hidden; display: none;
}
.search-menu.open { display: block; }
.search-menu-list { max-height: 420px; overflow-y: auto; }
.search-group-title {
    font-size: 10px; font-weight: 600; color: var(--muted); text-transform: uppercase;
    letter-spacing: .05em; padding: 10px 16px 4px;
}
.search-item {
    display: flex; gap: 10px; padding: 10px 16px; cursor: pointer; transition: background .1s;
    text-decoration: none; color: inherit;
}
.search-item:hover, .search-item.active { background: var(--slate-light); }
.search-item-icon {
    width: 30px; height: 30px; border-radius: 8px; flex-shrink: 0;
    background: var(--tk-blue-light); color: var(--green);
    display: flex; align-items: center; justify-content: center; font-size: 14px;
}
.search-item-body { flex: 1; min-width: 0; }
.search-item-title { font-size: 12px; font-weight: 600; color: var(--text); }
.search-item-subtitle { font-size: 11px; color: var(--muted); margin-top: 1px; }
.search-menu-empty, .search-menu-hint, .search-menu-loading {
    display: none; flex-direction: column; align-items: center; gap: 8px;
    padding: 32px 20px; color: var(--muted); text-align: center;
}
.search-menu-empty.show, .search-menu-hint.show, .search-menu-loading.show { display: flex; }
.search-menu-empty i, .search-menu-hint i, .search-menu-loading i { font-size: 24px; opacity: .35; }
.search-menu-loading i { opacity: .6; }
.search-menu-empty span, .search-menu-hint span, .search-menu-loading span { font-size: 12px; font-weight: 500; }
.search-viewall {
    display: none; align-items: center; justify-content: center; gap: 6px;
    padding: 11px; font-size: 12px; font-weight: 600; color: var(--green);
    text-decoration: none; border-top: 1px solid var(--border);
}
.search-viewall.show { display: flex; }
.search-viewall:hover { background: var(--slate-light); }
.nav-avatar {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: var(--green);
    border: 2px solid #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 11px;
    font-weight: 600;
    color: #fff;
    cursor: pointer;
    flex-shrink: 0;
}
.nav-icon-btn {
    color: rgba(255,255,255,.55);
    font-size: 18px;
    cursor: pointer;
    padding: 4px;
    border-radius: 6px;
    transition: .15s;
    display: flex;
    align-items: center;
}
.nav-icon-btn:hover { color: #fff; background: rgba(255,255,255,.08); }
.nav-search-phone { display: none; }   /* shown only at phone width — see the 768 block */

/* ── Body row (sidebar + content) ── */
.app-body {
    display: flex;
    flex: 1;
    min-height: 0;
}

/* ── Sidebar ── */
.sidebar {
    width: 200px;
    flex-shrink: 0;
    background: var(--tk-sidebar-dark);
    padding: 16px 0;
    display: flex;
    flex-direction: column;
    gap: 2px;
    overflow-y: auto;
}
.sidebar-item {
    display: flex;
    align-items: center;
    gap: 11px;
    padding: 10px 18px;
    cursor: pointer;
    transition: .15s;
    text-decoration: none;
    border-right: 3px solid transparent;
}
.sidebar-item:hover { background: rgba(255,255,255,.05); }
.sidebar-item.active {
    background: rgba(29,58,97,.2);
    border-right-color: var(--green-mid);
}
.sidebar-item i { font-size: 17px; color: rgba(255,255,255,.38); }
.sidebar-item.active i { color: var(--green-accent); }
.sidebar-item span { font-size: 12px; color: rgba(255,255,255,.38); font-weight: 500; }
.sidebar-item.active span { color: #fff; }
.sidebar-spacer { flex: 1; }
.sidebar-section-label {
    padding: 16px 18px 6px;
    font-size: 10px; font-weight: 600; color: rgba(255,255,255,.28);
    text-transform: uppercase; letter-spacing: .07em;
}

/* ── Main content area ── */
.main-content {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}
.page-body {
    flex: 1;
    overflow-y: auto;
    background: var(--slate-light);
    padding: 28px 32px;
}

/* ── Breadcrumb ── */
.breadcrumb {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 12px;
    color: rgba(255,255,255,.45);
    margin-left: 8px;
}
.breadcrumb a { color: rgba(255,255,255,.45); text-decoration: none; }
.breadcrumb a:hover { color: rgba(255,255,255,.75); }
.breadcrumb .current { color: #fff; }
.breadcrumb i { font-size: 11px; }

/* ── Common components ── */
.badge {
    font-size: 10px;
    padding: 3px 8px;
    border-radius: 4px;
    font-weight: 500;
    display: inline-flex;
    align-items: center;
}
.badge-active  { background: #D7EEE4; color: #1F6F4F; }
.badge-pending { background: var(--amber-light);  color: #854F0B; }
.badge-new     { background: var(--tk-info-light); color: var(--tk-info); }

.btn {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 9px 16px;
    border-radius: 7px;
    font-size: 13px;
    font-weight: 500;
    font-family: 'Outfit', sans-serif;
    cursor: pointer;
    border: none;
    transition: .15s;
    text-decoration: none;
}
.btn i { font-size: 15px; }
.btn-primary  { background: var(--green); color: #fff; }
.btn-primary:hover { background: var(--green-mid); }
/* "New Contact" CTA buttons — deliberately a different green from --tk-green (success), see --tk-emerald above. */
.btn-primary.btn-success-preview { background: var(--tk-emerald); }
.btn-primary.btn-success-preview:hover { background: var(--tk-emerald-dark); }
.btn-secondary { background: var(--white); color: var(--text); border: 1px solid var(--border); }
.btn-secondary:hover { border-color: var(--muted); background: var(--slate-light); }
.btn-danger   { background: var(--red); color: #fff; }
.btn-danger:hover { background: #c73736; }
.btn-ghost    { background: rgba(255,255,255,.1); color: #fff; border: 1px solid rgba(255,255,255,.25); }
.btn-ghost:hover { background: rgba(255,255,255,.18); }
.btn-sm { padding: 6px 11px; font-size: 12px; }

/* ── Soft (tinted) buttons — generalized from .activity-add-btn's treatment:
   light tinted background, colored text, subtle colored border. Used for
   secondary "add/log" actions (Client Detail's Log Activity / New Document),
   available in every semantic color so it's not just a one-off blue. ── */
.btn-soft {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px 14px;
    border-radius: 6px;
    font-size: 13px;
    font-weight: 500;
    font-family: 'Outfit', sans-serif;
    cursor: pointer;
    transition: .15s;
    text-decoration: none;
    border: 1px solid transparent;
}
.btn-soft:hover { filter: brightness(.96); }
.btn-soft i { font-size: 14px; }
.btn-soft-primary { background: var(--tk-blue-light);   color: var(--tk-blue);   border-color: rgba(42,79,130,.18); }
.btn-soft-success { background: var(--tk-green-light);  color: var(--tk-green);  border-color: rgba(42,130,101,.18); }
.btn-soft-danger  { background: var(--tk-red-light);    color: var(--tk-red);    border-color: rgba(165,65,60,.18); }
.btn-soft-warning { background: var(--tk-orange-light); color: var(--tk-orange); border-color: rgba(217,119,6,.18); }
.btn-soft-info    { background: var(--tk-info-light);   color: var(--tk-info);   border-color: rgba(24,95,165,.18); }
.btn-soft-emerald { background: var(--tk-emerald-light); color: var(--tk-emerald-dark); border-color: rgba(73,178,117,.18); }

/* ── Card ── */
.card {
    background: var(--white);
    border: 1px solid var(--border);
    border-radius: 10px;
}
.card-head {
    padding: 14px 18px;
    border-bottom: 1px solid var(--border);
    display: flex;
    align-items: center;
    gap: 10px;
}
.card-title { font-size: 13px; font-weight: 600; color: var(--text); flex: 1; }
.card-body  { padding: 16px 18px; }

/* ── Form fields ── */
.form-group  { margin-bottom: 16px; }
.form-label  {
    display: block;
    font-size: 11px;
    font-weight: 600;
    color: var(--muted);
    text-transform: uppercase;
    letter-spacing: .05em;
    margin-bottom: 5px;
}
.form-control {
    width: 100%;
    padding: 10px 12px;
    border: 1px solid var(--border);
    border-radius: 7px;
    font-size: 13px;
    font-family: 'Outfit', sans-serif;
    color: var(--text);
    background: var(--white);
    outline: none;
    transition: .15s;
}
.form-control:focus {
    border-color: var(--green-mid);
    box-shadow: 0 0 0 3px rgba(29,58,97,.12);
}
.form-control::placeholder { color: var(--muted); opacity: .7; }
.form-control.is-invalid { border-color: var(--red); }
.form-error { font-size: 11px; color: var(--red); margin-top: 4px; }

/* ── Login page ── */
.login-page {
    min-height: 100vh;
    background: var(--slate);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 24px;
}
.login-card {
    background: var(--white);
    border-radius: 14px;
    padding: 40px;
    width: 100%;
    max-width: 380px;
    box-shadow: 0 24px 80px rgba(0,0,0,.35);
}
.login-logo {
    font-family: 'Playfair Display', serif;
    font-size: 26px;
    color: var(--text);
    margin-bottom: 6px;
}
.login-logo span { color: var(--green); }
.login-tagline { font-size: 12px; color: var(--muted); margin-bottom: 28px; }
.login-heading { font-size: 18px; font-weight: 600; color: var(--text); margin-bottom: 20px; }
.login-divider { height: 1px; background: var(--border); margin: 20px 0; }
.login-footer  { font-size: 11px; color: var(--muted); text-align: center; margin-top: 20px; }

/* Remember me / checkbox row */
.check-row {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 13px;
    color: var(--muted);
    cursor: pointer;
    user-select: none;
}
.check-row input[type=checkbox] { accent-color: var(--green); width: 15px; height: 15px; cursor: pointer; }

/* Inline styles on Login's password label row, lifted to classes so the touch rules below
   can reach them. Same declarations, so desktop is unchanged. */
.login-label-row   { display: flex; align-items: baseline; justify-content: space-between; }
.login-inline-link { font-size: 11px; color: var(--muted); text-decoration: none; }

/* ── Login shell: touch targets (mobile pass, 2026-09-22) ────────────────────────
   Seven Account pages share .login-card, and this is the one screen every user meets on
   every device — a staff member signing in on site, or a new user accepting an invite from
   an email, which on a phone means a phone.
   Item 1.7 missed all of this: it targeted .btn-icon / .icon-btn, and a bare checkbox or a
   text link matches neither.
   `(hover: none)` as well as the width, per 1.7: a touch laptop at desktop width has the
   same problem. */
@media (hover: none), (max-width: 768px) {
    /* 15x15 measured. Used in 10 places across 4 pages (Login, Clients/Detail, /Index,
       /New), so this is not a login-only improvement. */
    .check-row input[type=checkbox] { width: 20px; height: 20px; }
    /* The row is a <label> wrapping the box, so its whole height is tappable. Scoped to
       the login card deliberately — .check-row also sits inside the Clients filter sheet,
       where a forced 44px row would change a layout this commit has not measured. */
    .login-card .check-row { min-height: 44px; }

    /* Both link styles in this shell were bare text: "Forgot password?" measured 88x17.
       Padding gives a real hit area and the matching negative margin keeps the link
       exactly where it was drawn, so neither the baseline row nor the centred footer
       shifts. */
    .login-inline-link { display: inline-block; padding: 13px 6px; margin: -13px -6px; }
    .login-footer a    { display: inline-block; padding: 12px 10px; margin: -4px 0; }
}

/* ── Additional badge variants ─────────────────────────────────────────── */
.badge-green  { background: #D7EEE4; color: #1F6F4F; }
.badge-muted  { background: var(--slate-light); color: var(--muted); }
.badge-red    { background: var(--red-light);   color: var(--red); }
.badge-amber  { background: var(--amber-light); color: #854F0B; }
.badge-blue   { background: var(--tk-info-light); color: var(--tk-info); }

/* ── Tab nav ────────────────────────────────────────────────────────────── */
.tab-nav {
    display: flex;
    border-bottom: 1px solid var(--border);
    margin-bottom: 20px;
    gap: 0;
}
.tab-btn {
    padding: 10px 18px;
    font-size: 13px;
    font-weight: 500;
    color: var(--muted);
    border: none;
    border-bottom: 2px solid transparent;
    background: none;
    cursor: pointer;
    transition: color .15s, border-color .15s;
    margin-bottom: -1px;
    font-family: 'Outfit', sans-serif;
    display: flex;
    align-items: center;
    gap: 6px;
}
.tab-btn:hover { color: var(--text); }
.tab-btn.active { color: var(--green); border-bottom-color: var(--green); font-weight: 600; }
.tab-count {
    font-size: 10px;
    background: var(--slate-light);
    color: var(--muted);
    border-radius: 10px;
    padding: 1px 6px;
    font-weight: 600;
}
.tab-btn.active .tab-count { background: var(--tk-blue-light); color: var(--green); }

/* ── Tag / scope chips ──────────────────────────────────────────────────── */
.tag-chip {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 4px 10px;
    background: var(--tk-blue-light);
    color: var(--green);
    border-radius: 5px;
    font-size: 12px;
    font-weight: 500;
}
.tag-chip .remove {
    cursor: pointer;
    opacity: .6;
    font-size: 13px;
    line-height: 1;
    padding: 0 1px;
}
.tag-chip .remove:hover { opacity: 1; }
.tags-wrap { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }

/* ── Pet chip ───────────────────────────────────────────────────────────── */
.pet-chip {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 7px 12px;
    background: var(--slate-light);
    border: 1px solid var(--border);
    border-radius: 8px;
    font-size: 12px;
    color: var(--text);
}
.pet-chip .pet-icon { font-size: 16px; color: var(--muted); }
.pet-chip .pet-name { font-weight: 600; }
.pet-chip .pet-type { color: var(--muted); }
.pet-chip .remove {
    margin-left: 4px;
    cursor: pointer;
    color: var(--muted);
    font-size: 14px;
    line-height: 1;
    opacity: .7;
}
.pet-chip .remove:hover { opacity: 1; color: var(--red); }
.pets-wrap { display: flex; flex-wrap: wrap; gap: 8px; }

/* ── Avatars (sized) ────────────────────────────────────────────────────── */
.avatar {
    border-radius: 50%;
    background: var(--green);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    flex-shrink: 0;
}
.avatar-sm { width: 32px; height: 32px; font-size: 11px; }
.avatar-md { width: 40px; height: 40px; font-size: 14px; }
.avatar-lg { width: 56px; height: 56px; font-size: 18px; }
.avatar-xl { width: 72px; height: 72px; font-size: 24px; }

/* ── Profile page header ────────────────────────────────────────────────── */
.profile-header {
    background: var(--white);
    border: 1px solid var(--border);
    border-radius: 10px;
    padding: 22px 24px;
    display: flex;
    align-items: center;
    gap: 18px;
    margin-bottom: 20px;
}
.profile-name {
    font-size: 20px;
    font-weight: 700;
    color: var(--text);
    line-height: 1.2;
}
.profile-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    margin-top: 5px;
}
.profile-meta-item {
    display: flex;
    align-items: center;
    gap: 5px;
    font-size: 12px;
    color: var(--muted);
}
.profile-meta-item i { font-size: 13px; }
.profile-actions { margin-left: auto; display: flex; gap: 8px; }

/* ── Alert / toast banner ───────────────────────────────────────────────── */
.alert {
    padding: 12px 16px;
    border-radius: 8px;
    font-size: 13px;
    margin-bottom: 16px;
    display: flex;
    align-items: center;
    gap: 10px;
}
.alert-success { background: #D7EEE4; color: #1F6F4F; border: 1px solid #A9D4C9; }
.alert-danger  { background: var(--red-light);   color: var(--red);   border: 1px solid #FBCFCF; }
.alert-info    { background: var(--tk-info-light); color: var(--tk-info); border: 1px solid #AEC7E0; }
.alert-warning { background: var(--tk-orange-light); color: var(--tk-orange); border: 1px solid #EFCDA0; }
.alert i { font-size: 16px; flex-shrink: 0; }

/* ── Section divider ────────────────────────────────────────────────────── */
.section-label {
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .08em;
    color: var(--muted);
    margin-bottom: 10px;
}

/* ── Activity feed (timeline with circle icons) ─────────────────────────── */
.activity-list { display: flex; flex-direction: column; }
.activity-item {
    display: flex;
    gap: 10px;
    align-items: flex-start;
    padding: 12px 0;
    position: relative;
}
.activity-item:not(:last-child)::before {
    content: '';
    position: absolute;
    left: 11px;
    top: 36px;
    bottom: -12px;
    width: 1.5px;
    background: var(--border);
    z-index: 0;
}
.activity-body { flex: 1; min-width: 0; }
.activity-text { font-size: 12px; color: var(--text); line-height: 1.45; }
.activity-meta { font-size: 10px; color: var(--muted); margin-top: 2px; }
.activity-extra { display: none; }
.activity-icon {
    width: 24px;
    height: 24px;
    border-radius: 50%;
    background: var(--white);
    border: 1.5px solid var(--border);
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    z-index: 1;
}
.activity-icon i { font-size: 12px; color: var(--muted); }
.activity-icon.green { border-color: var(--tk-green); background: var(--tk-green-light); }
.activity-icon.green i { color: var(--tk-green); }
.activity-icon.teal  { border-color: var(--teal); background: rgba(13,148,136,.1); }
.activity-icon.teal i  { color: var(--teal); }
.activity-icon.amber { border-color: var(--amber); background: var(--amber-light); }
.activity-icon.amber i { color: #854F0B; }
.activity-icon.blue  { border-color: var(--tk-info); background: var(--tk-info-light); }
.activity-icon.blue i  { color: var(--tk-info); }

/* ── New-Contact page components ────────────────────────────────────────── */
.nc-form-wrap { max-width: 760px; margin: 0 auto; }
.nc-header {
    display: flex;
    align-items: center;
    gap: 18px;
    margin-bottom: 22px;
}
.nc-av {
    width: 68px;
    height: 68px;
    border-radius: 50%;
    background: var(--border);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 22px;
    font-weight: 600;
    color: var(--muted);
    flex-shrink: 0;
    border: 2px solid var(--white);
    box-shadow: 0 2px 10px rgba(28,28,26,.12);
    transition: background .2s, color .2s;
}
.nc-av.has-name { background: var(--green-mid); color: #fff; }
.nc-cols {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
    align-items: start;
}
/* Form cards (used on New Contact and similar forms) */
.form-card {
    background: var(--white);
    border: 1px solid var(--border);
    border-radius: 10px;
    margin-bottom: 14px;
}
.form-card:last-child { margin-bottom: 0; }
.form-card-head {
    padding: 14px 16px 0;
    display: flex;
    align-items: center;
    gap: 8px;
}
.form-card-head-icon {
    width: 26px;
    height: 26px;
    border-radius: 6px;
    background: var(--slate-light);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    transition: background-color .2s, width .2s, height .2s;
}
.form-card-head-icon i { font-size: 13px; color: var(--muted); }
.form-card-title { font-size: 12px; font-weight: 600; color: var(--text); }
.form-card-body { padding: 14px 16px 16px; }

/* ── Section-complete checkmark (New Client page) — swaps the section's own
   header icon for a bold, solid-green check with a small pop animation ──── */
.form-card-head-icon .head-icon-complete { display: none; }
.form-card-head-icon.is-complete {
    width: 30px;
    height: 30px;
    border-radius: 50%;
    background: var(--tk-green);
}
.form-card-head-icon.is-complete .head-icon-default { display: none; }
.form-card-head-icon.is-complete .head-icon-complete {
    display: block;
    color: #fff;
    font-size: 17px;
    font-weight: 700;
}
.form-card-head-icon.is-complete .head-icon-complete.pop {
    animation: sectionCheckPop .4s cubic-bezier(.34, 1.56, .64, 1);
}
@keyframes sectionCheckPop {
    0%   { transform: scale(0); opacity: 0; }
    55%  { transform: scale(1.3); opacity: 1; }
    100% { transform: scale(1); }
}
.form-row { margin-bottom: 14px; }
.form-row:last-child { margin-bottom: 0; }
.name-row { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
/* City / State / ZIP. The State track was 56px, which after 12px of padding each side left 30px
   for the value -- less than a two-letter code (~18px) plus the browser's native caret (~16-20px),
   so the selected state was clipped behind the arrow. That was true at EVERY width, not just on a
   phone, because the track is a fixed pixel size. 80px clears it with room for a wider caret
   (Safari draws a bigger one than Chrome). Phone stacks this row -- see Clients/New. */
.addr-row { display: grid; grid-template-columns: 1fr 80px 90px; gap: 8px; }

/* ── Client Type segmented toggle (New Client page) ─────────────────────── */
.type-toggle {
    display: inline-flex;
    border: 1px solid var(--border);
    border-radius: 8px;
    padding: 3px;
    background: var(--slate-light);
    gap: 3px;
}
.type-toggle-option {
    display: flex;
    align-items: center;
    gap: 7px;
    padding: 8px 18px;
    border-radius: 6px;
    font-size: 13px;
    font-weight: 500;
    color: var(--muted);
    cursor: pointer;
    transition: background .15s, color .15s;
}
.type-toggle-option i { font-size: 15px; }
.type-toggle-option input { position: absolute; opacity: 0; pointer-events: none; }
.type-toggle-option.is-active { background: var(--white); color: var(--text); box-shadow: 0 1px 3px rgba(28,28,26,.12); }
.type-toggle-option:not(.is-active):hover { color: var(--text); }

/* ── Contacts repeater (New Client page) ─────────────────────────────────── */
.contact-card {
    border: 1px solid var(--border);
    border-radius: 8px;
    padding: 12px 14px 14px;
    margin-bottom: 12px;
    background: var(--slate-light);
}
.contact-card-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 10px;
}
.contact-card-title { font-size: 11px; font-weight: 600; color: var(--muted); text-transform: uppercase; letter-spacing: .03em; }
.contact-remove {
    width: 22px;
    height: 22px;
    border-radius: 6px;
    border: 1px solid var(--border);
    background: var(--white);
    color: var(--muted);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: background .15s, color .15s, border-color .15s;
}
.contact-remove:hover { background: var(--red-light); color: var(--red); border-color: var(--red); }
.contact-remove i { font-size: 12px; }
.contact-flags { display: flex; gap: 20px; margin-top: 2px; }
.contact-flags .check-row { font-size: 12px; }

/* ── Address autocomplete + map preview (New Client page — visual only) ──── */
.addr-autocomplete { position: relative; }
.addr-input-icon {
    position: absolute;
    left: 12px;
    top: 50%;
    transform: translateY(-50%);
    font-size: 14px;
    color: var(--muted);
    pointer-events: none;
}
.addr-input { padding-left: 34px; }
.addr-suggestions {
    display: none;
    position: absolute;
    top: calc(100% + 4px);
    left: 0;
    right: 0;
    background: var(--white);
    border: 1px solid var(--border);
    border-radius: 8px;
    box-shadow: 0 6px 20px rgba(28,28,26,.14);
    z-index: 20;
    overflow: hidden;
}
.addr-suggestions.is-open { display: block; }
.addr-suggestion {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 9px 12px;
    font-size: 12px;
    color: var(--text);
    cursor: pointer;
}
.addr-suggestion:hover { background: var(--slate-light); }
.addr-suggestion i { font-size: 13px; color: var(--muted); }

.map-preview {
    position: relative;
    border: 1px solid var(--border);
    border-radius: 10px;
    background: var(--slate-light);
    min-height: 160px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 20px;
    overflow: hidden;
    text-align: center;
}
.map-preview-grid {
    position: absolute;
    inset: 0;
    background-image:
        linear-gradient(rgba(28,28,26,.05) 1px, transparent 1px),
        linear-gradient(90deg, rgba(28,28,26,.05) 1px, transparent 1px);
    background-size: 28px 28px;
}
.map-pin {
    position: relative;
    color: var(--tk-red);
    font-size: 26px;
    filter: drop-shadow(0 2px 3px rgba(28,28,26,.2));
    transition: transform .15s;
}
.map-preview.has-address .map-pin { transform: translateY(-3px); }
.map-preview-label { position: relative; font-size: 12px; color: var(--muted); max-width: 320px; }
.map-preview.has-address .map-preview-label { color: var(--text); font-weight: 500; }
.map-preview-actions { position: relative; display: flex; gap: 8px; margin-top: 4px; }

/* ── Client Profile dark header ─────────────────────────────────────────── */
.profile-top {
    background: var(--tk-sidebar-dark);
    padding: 20px 28px;
    display: flex;
    align-items: center;
    gap: 16px;
    flex-shrink: 0;
}
.profile-top-av {
    width: 56px;
    height: 56px;
    border-radius: 50%;
    background: var(--green);
    border: 2px solid #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 20px;
    font-weight: 600;
    color: #fff;
    flex-shrink: 0;
}
.profile-top-name { font-size: 17px; font-weight: 600; color: #fff; }
.profile-top-sub  { font-size: 11px; color: rgba(255,255,255,.5); margin-top: 3px; }

/* ── Profile tabs (text-only, 12px) ─────────────────────────────────────── */
.profile-tabs {
    display: flex;
    border-bottom: 1px solid var(--border);
    margin-bottom: 20px;
}
.p-tab {
    font-size: 12px;
    font-weight: 500;
    padding: 9px 16px;
    color: var(--muted);
    cursor: pointer;
    border-bottom: 2px solid transparent;
    margin-bottom: -1px;
    transition: color .15s;
    user-select: none;
    display: flex;
    align-items: center;
    gap: 5px;
}
.p-tab:hover { color: var(--text); }
.p-tab.act { color: var(--green); border-bottom-color: var(--green); font-weight: 600; }
.p-tab-count {
    font-size: 10px;
    background: var(--slate-light);
    color: var(--muted);
    border-radius: 10px;
    padding: 1px 6px;
    font-weight: 600;
}
.p-tab.act .p-tab-count { background: var(--tk-blue-light); color: var(--green); }

/* ── Overview info grid (compact read tiles) ────────────────────────────── */
.info-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 10px;
    margin-bottom: 16px;
}
.info-field {
    background: var(--white);
    border-radius: 8px;
    padding: 12px 14px;
    border: 1px solid var(--border);
}
.info-field .lbl {
    font-size: 10px;
    color: var(--muted);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .05em;
    margin-bottom: 4px;
}
.info-field .val {
    font-size: 13px;
    font-weight: 500;
    color: var(--text);
}
.info-field .val-empty { color: var(--muted); font-style: italic; font-weight: 400; }

/* ── Scope card (inline add/remove) ─────────────────────────────────────── */
.scope-card {
    background: var(--white);
    border: 1px solid var(--border);
    border-radius: 8px;
    padding: 12px 14px;
    margin-bottom: 16px;
}
.scope-tags { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; margin-top: 8px; }
.scope-tag {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    background: var(--tk-blue-light);
    color: var(--green);
    border: 1px solid rgba(42,79,130,.18);
    border-radius: 14px;
    padding: 4px 8px 4px 12px;
    font-size: 12px;
    font-weight: 500;
}
.scope-tag-remove {
    background: none;
    border: none;
    cursor: pointer;
    color: var(--green);
    font-size: 12px;
    line-height: 1;
    padding: 0;
    opacity: .55;
    transition: opacity .12s;
    display: flex;
    align-items: center;
}
.scope-tag-remove:hover { opacity: 1; }

/* ── Activity tab: header, log panel, show more ─────────────────────────── */
.activity-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 14px;
}
.activity-add-btn {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 5px 12px;
    font-size: 12px;
    font-weight: 500;
    font-family: 'Outfit', sans-serif;
    color: var(--green);
    background: var(--tk-blue-light);
    border: 1px solid rgba(42,79,130,.18);
    border-radius: 6px;
    cursor: pointer;
    transition: background .15s;
}
.activity-add-btn:hover { background: #DCE6F0; }
.activity-add-btn i { font-size: 13px; }

/* ── Contacts section (Client Detail → Overview) ─────────────────────────── */
.contacts-list { display: flex; flex-direction: column; gap: 8px; }
.contact-row {
    display: flex;
    align-items: center;
    gap: 12px;
    background: var(--white);
    border: 1px solid var(--border);
    border-radius: 8px;
    padding: 10px 12px;
}
.contact-row-avatar {
    width: 34px;
    height: 34px;
    border-radius: 50%;
    background: var(--slate-light);
    border: 1px solid var(--border);
    color: var(--muted);
    font-size: 12px;
    font-weight: 600;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}
.contact-row-info { flex: 1; min-width: 0; }
.contact-row-name-line { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.contact-row-name { font-size: 13px; font-weight: 600; color: var(--text); }
.contact-row-sub {
    font-size: 11px;
    color: var(--muted);
    margin-top: 2px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.contact-row-actions { display: flex; gap: 6px; flex-shrink: 0; }
.contact-icon-btn {
    width: 26px;
    height: 26px;
    border-radius: 6px;
    border: 1px solid var(--border);
    background: var(--white);
    color: var(--muted);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: background .15s, color .15s, border-color .15s;
}
.contact-icon-btn:hover { background: var(--slate-light); color: var(--text); }
.contact-icon-btn.danger:hover { background: var(--red-light); color: var(--red); border-color: var(--red); }
.contact-icon-btn i { font-size: 12px; }

/* ── Primary-contact → client info sync confirm (Contact Person drawer) ─── */
.sync-confirm {
    margin-top: 16px;
    background: var(--tk-info-light);
    border: 1px solid rgba(24,95,165,.18);
    border-radius: 8px;
    padding: 12px 14px;
}
.sync-confirm-head {
    display: flex;
    align-items: center;
    gap: 7px;
    font-size: 12px;
    font-weight: 500;
    color: var(--text);
    margin-bottom: 10px;
}
.sync-confirm-head i { color: var(--tk-info); font-size: 14px; }
.sync-confirm-row { margin-bottom: 10px; }
.sync-confirm-row:last-of-type { margin-bottom: 0; }
.sync-confirm-label {
    color: var(--muted);
    font-weight: 600;
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: .04em;
    margin-bottom: 3px;
}
.sync-confirm-values {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-wrap: wrap;
    font-size: 12px;
}
.sync-confirm-old { color: var(--muted); text-decoration: line-through; overflow-wrap: anywhere; }
.sync-confirm-new { color: var(--text); font-weight: 500; overflow-wrap: anywhere; }
.sync-confirm-values i { font-size: 11px; color: var(--muted); flex-shrink: 0; }
.sync-confirm-actions { display: flex; justify-content: flex-end; gap: 8px; flex-wrap: wrap; margin-top: 12px; }

.log-activity-panel {
    background: var(--white);
    border: 1px solid var(--border);
    border-radius: 8px;
    padding: 14px 16px;
    margin-bottom: 16px;
}
.log-type-row { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 10px; }
.log-type-btn {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 5px 10px;
    font-size: 12px;
    font-weight: 500;
    font-family: 'Outfit', sans-serif;
    color: var(--muted);
    background: var(--white);
    border: 1px solid var(--border);
    border-radius: 6px;
    cursor: pointer;
    transition: .15s;
}
.log-type-btn:hover { border-color: var(--green-mid); color: var(--green); }
.log-type-btn.active { border-color: var(--green-mid); color: var(--green); background: var(--tk-blue-light); font-weight: 600; }
.log-type-btn i { font-size: 13px; }

.log-activity-actions {
    display: flex;
    justify-content: flex-end;
    gap: 8px;
    margin-top: 10px;
}

.activity-show-more-wrap {
    padding: 10px 0 2px;
    text-align: center;
}
.activity-show-more-wrap button {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-size: 12px;
    font-weight: 500;
    color: var(--muted);
    background: none;
    border: none;
    cursor: pointer;
    font-family: 'Outfit', sans-serif;
    padding: 5px 12px;
    border-radius: 6px;
    transition: color .15s, background .15s;
}
.activity-show-more-wrap button:hover { color: var(--green); background: var(--tk-blue-light); }
.activity-show-more-wrap button i { font-size: 12px; }

/* ── Overview two-column layout (activity + photos) ─────────────────────── */
.overview-two-col {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
    margin-top: 20px;
}

/* ── Photo grid placeholders ─────────────────────────────────────────────── */
/* ── Activity item dots menu ─────────────────────────────────────────────── */
.activity-menu-wrap {
    position: relative;
    flex-shrink: 0;
    align-self: flex-start;
    padding-top: 2px;
    opacity: 0;
    transition: opacity .15s;
    margin-left: auto;
}
.activity-item:hover .activity-menu-wrap { opacity: 1; }
.activity-dots-btn {
    width: 24px; height: 24px;
    border-radius: 5px;
    background: none; border: none;
    cursor: pointer; color: var(--muted);
    display: flex; align-items: center; justify-content: center;
    font-size: 14px; line-height: 1;
    transition: background .12s, color .12s;
}
.activity-dots-btn:hover { background: var(--slate-light); color: var(--text); }
.activity-dropdown {
    position: absolute; top: calc(100% + 4px); right: 0;
    background: var(--white); border: 1px solid var(--border);
    border-radius: 8px; box-shadow: 0 4px 16px rgba(0,0,0,.1);
    min-width: 120px; z-index: 50; display: none; overflow: hidden;
}
.activity-dropdown.open { display: block; }
.activity-dropdown-item {
    display: flex; align-items: center; gap: 8px;
    padding: 9px 14px; font-size: 13px; font-weight: 500;
    font-family: 'Outfit', sans-serif; color: var(--text);
    background: none; border: none; cursor: pointer;
    width: 100%; text-align: left; transition: background .1s;
}
.activity-dropdown-item:hover { background: var(--slate-light); }
.activity-dropdown-item.danger { color: var(--red); }
.activity-dropdown-item.danger:hover { background: var(--red-light); }
.activity-dropdown-item i { font-size: 14px; }

/* Validation summary */
.validation-summary {
    background: var(--red-light);
    border: 1px solid #FBCFCF;
    border-radius: 7px;
    padding: 10px 14px;
    font-size: 12px;
    color: var(--red);
    margin-bottom: 16px;
}

/* ── Compact pet chips — info-grid tile (matches 02-client-profile.html exactly) ── */
.scope-tag-sm { display:inline-flex; align-items:center; gap:3px; background:var(--tk-blue-light); color:var(--green); border:1px solid rgba(42,79,130,.18); border-radius:10px; padding:2px 5px 2px 8px; font-size:10px; font-weight:500; }
.scope-tag-remove-sm { background:none; border:none; cursor:pointer; color:var(--green); font-size:10px; line-height:1; padding:0; opacity:.55; transition:.12s; display:flex; align-items:center; }
.scope-tag-remove-sm:hover { opacity:1; }
.scope-tag-add-sm { display:inline-flex; align-items:center; gap:3px; background:transparent; color:var(--muted); border:1.5px dashed var(--border); border-radius:10px; padding:2px 7px; font-size:10px; font-weight:500; cursor:pointer; transition:.15s; }
.scope-tag-add-sm:hover { border-color:var(--green-mid); color:var(--green); }
.pet-input-row { display:none; align-items:center; gap:4px; flex-wrap:wrap; width:100%; margin-top:2px; }
.scope-input-sm { background:var(--white); border:1.5px solid var(--green-mid); border-radius:10px; padding:2px 8px; font-size:10px; font-weight:500; color:var(--text); outline:none; width:72px; font-family:'Outfit',sans-serif; }
.pet-type-select-sm { background:var(--white); border:1.5px solid var(--green-mid); border-radius:6px; padding:2px 5px; font-size:10px; font-weight:500; color:var(--text); outline:none; font-family:'Outfit',sans-serif; cursor:pointer; }
.pet-confirm-btn-sm { width:20px; height:20px; border-radius:50%; background:var(--green); border:none; cursor:pointer; color:#fff; display:flex; align-items:center; justify-content:center; flex-shrink:0; transition:.15s; }
.pet-confirm-btn-sm:hover { background:var(--green-mid); }
.pet-cancel-btn-sm { width:20px; height:20px; border-radius:50%; background:transparent; border:1px solid var(--border); cursor:pointer; color:var(--muted); display:flex; align-items:center; justify-content:center; flex-shrink:0; transition:.15s; }
.pet-cancel-btn-sm:hover { border-color:var(--red); color:var(--red); }

/* ── AJAX chip animations ── */
@keyframes chipEnter {
    from { opacity: 0; transform: scale(.75); }
    to   { opacity: 1; transform: scale(1); }
}
@keyframes chipExit {
    from { opacity: 1; transform: scale(1); }
    to   { opacity: 0; transform: scale(.7); }
}
.chip-enter { animation: chipEnter .18s cubic-bezier(.34,1.56,.64,1) both; }
.chip-exit  { animation: chipExit  .15s ease both; pointer-events: none; }

/* ── Shared spin animation (loading spinners) ── */
@keyframes spin {
    from { transform: rotate(0deg); }
    to   { transform: rotate(360deg); }
}

/* Inline busy state for a button/control that triggers a slow, server-hitting action
   (2026-08-11). Applied/removed by the global withBusy() helper. Hides the label + icon
   (color:transparent keeps the button's width so there's no layout shift) and centers a
   spinner; pointer-events:none blocks re-clicks (double-submit guard) without the caveats of
   the disabled attribute. Spinner border defaults dark; light on filled (primary/danger). */
.is-busy {
    position: relative;
    pointer-events: none;
    cursor: default;
    color: transparent !important;
}
.is-busy::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 14px;
    height: 14px;
    margin: -7px 0 0 -7px;
    border: 2px solid rgba(0, 0, 0, .35);
    border-top-color: transparent;
    border-radius: 50%;
    animation: spin .6s linear infinite;
}
.btn-primary.is-busy::after,
.btn-danger.is-busy::after { border-color: rgba(255, 255, 255, .75); border-top-color: transparent; }
.validation-summary ul { margin: 0; padding-left: 16px; }

/* ── Edit Drawer ─────────────────────────────────────────────────────────── */
.drawer-backdrop {
    position: fixed; inset: 0; background: rgba(0,0,0,.28);
    z-index: 200; opacity: 0; pointer-events: none;
    transition: opacity .22s ease;
}
.drawer-backdrop.open { opacity: 1; pointer-events: all; }

.edit-drawer {
    position: fixed; top: 0; right: 0; bottom: 0;
    width: 420px; max-width: 94vw;
    background: var(--white); z-index: 201;
    box-shadow: -4px 0 32px rgba(0,0,0,.13);
    transform: translateX(110%);
    transition: transform .26s cubic-bezier(.4,0,.2,1);
    display: flex; flex-direction: column; overflow: hidden;
}
.edit-drawer.open { transform: translateX(0); }

.drawer-head {
    display: flex; align-items: center; gap: 10px;
    padding: 18px 20px 14px;
    border-bottom: 1px solid var(--border);
    flex-shrink: 0;
}
.drawer-title { font-size: 14px; font-weight: 600; color: var(--text); flex: 1; }
.drawer-close {
    width: 28px; height: 28px; border-radius: 6px;
    background: transparent; border: 1px solid var(--border);
    cursor: pointer; color: var(--muted);
    display: flex; align-items: center; justify-content: center;
    transition: .12s;
}
.drawer-close:hover { border-color: var(--red); color: var(--red); }
.drawer-body { flex: 1; overflow-y: auto; padding: 20px; }
.drawer-foot {
    padding: 14px 20px; border-top: 1px solid var(--border);
    display: flex; gap: 8px; justify-content: flex-end;
    flex-shrink: 0;
}

/* ── Inline field editing ────────────────────────────────────────────────── */
.ie-field { position: relative; }
.ie-val {
    cursor: pointer; border-radius: 4px;
    padding: 1px 20px 1px 4px; margin: -1px 0 -1px -4px;
    transition: background .12s; display: inline-block; max-width: 100%;
}
.ie-val:hover { background: var(--slate-light); }
.ie-pencil {
    position: absolute; right: 2px; top: 50%; transform: translateY(-50%);
    opacity: 0; transition: opacity .12s; pointer-events: none;
    color: var(--muted); font-size: 9px;
}
.ie-field:hover .ie-pencil { opacity: .6; }
.ie-edit-row { display: none; align-items: center; gap: 4px; margin-top: 2px; }
.ie-edit-row.active { display: flex; }
.ie-input {
    background: var(--white); border: 1.5px solid var(--green-mid);
    border-radius: 6px; padding: 4px 8px; font-size: 13px; font-weight: 500;
    color: var(--text); outline: none; font-family: 'Outfit', sans-serif;
    flex: 1; min-width: 0;
}
.ie-input:focus { border-color: var(--green); }
.ie-input.err   { border-color: var(--red); }
.ie-select {
    background: var(--white); border: 1.5px solid var(--green-mid);
    border-radius: 6px; padding: 4px 8px; font-size: 13px; font-weight: 500;
    color: var(--text); outline: none; font-family: 'Outfit', sans-serif;
    cursor: pointer; flex: 1;
}
.ie-ok {
    width: 26px; height: 26px; border-radius: 50%;
    background: var(--green); border: none; cursor: pointer; color: #fff;
    display: flex; align-items: center; justify-content: center; flex-shrink: 0;
    transition: .15s;
}
.ie-ok:hover { background: var(--green-mid); }
.ie-cancel {
    width: 26px; height: 26px; border-radius: 50%;
    background: transparent; border: 1px solid var(--border);
    cursor: pointer; color: var(--muted);
    display: flex; align-items: center; justify-content: center; flex-shrink: 0;
    transition: .15s;
}
.ie-cancel:hover { border-color: var(--red); color: var(--red); }
.ie-err { font-size: 11px; color: var(--red); margin-top: 3px; display: none; }
.ie-err.show { display: block; }

/* ── Notification Bell ───────────────────────────────────────────────────── */
.nav-notif-wrap { position: relative; }
.notif-badge {
    position: absolute; top: -2px; right: -4px;
    min-width: 15px; height: 15px; padding: 0 3px;
    background: var(--red, #E24B4A); color: #fff;
    border-radius: 8px; font-size: 9px; font-weight: 700;
    align-items: center; justify-content: center;
    line-height: 1; box-shadow: 0 0 0 2px var(--slate);
}
.notif-menu {
    position: absolute; top: calc(100% + 8px); right: 0;
    width: 340px; max-width: calc(100vw - 32px);
    background: var(--white); border: 1px solid var(--border);
    border-radius: 10px; box-shadow: 0 4px 20px rgba(0,0,0,.12);
    z-index: 300; overflow: hidden; display: none;
}
.notif-menu.open { display: block; }
.notif-menu-header {
    display: flex; align-items: center; justify-content: space-between;
    padding: 12px 16px; border-bottom: 1px solid var(--border);
    font-size: 12px; font-weight: 600; color: var(--text);
    text-transform: uppercase; letter-spacing: .04em;
}
.notif-mark-all {
    font-size: 11px; font-weight: 500; color: var(--green);
    background: none; border: none; cursor: pointer; padding: 0;
    text-transform: none; letter-spacing: normal; font-family: 'Outfit', sans-serif;
}
.notif-mark-all:hover { text-decoration: underline; }
.notif-menu-list { max-height: 360px; overflow-y: auto; }
.notif-item {
    display: flex; gap: 10px; padding: 12px 16px;
    border-bottom: 1px solid var(--border); cursor: pointer; transition: background .1s;
}
.notif-item:last-child { border-bottom: none; }
.notif-item:hover { background: var(--slate-light); }
.notif-item.unread { background: var(--tk-blue-light); }
.notif-item.unread:hover { background: #DCE6F0; }
.notif-item-icon {
    width: 30px; height: 30px; border-radius: 50%; flex-shrink: 0;
    background: var(--slate-light); color: var(--muted);
    display: flex; align-items: center; justify-content: center; font-size: 15px;
}
.notif-item.unread .notif-item-icon { background: var(--tk-blue-light); color: var(--green); }
.notif-item-body { flex: 1; min-width: 0; }
.notif-item-title { font-size: 12px; font-weight: 600; color: var(--text); }
.notif-item-msg { font-size: 12px; color: var(--muted); margin-top: 2px; line-height: 1.4; }
.notif-item-time { font-size: 10px; color: var(--muted); margin-top: 4px; }
.notif-menu-empty {
    display: none; flex-direction: column; align-items: center; gap: 8px;
    padding: 36px 20px; color: var(--muted); text-align: center;
}
.notif-menu-empty i { font-size: 26px; opacity: .35; }
.notif-menu-empty span { font-size: 12px; font-weight: 500; }

/* ── Nav Avatar Menu ─────────────────────────────────────────────────────── */
.nav-avatar-wrap { position: relative; }
.avatar-menu {
    position: absolute; top: calc(100% + 8px); right: 0;
    background: var(--white); border: 1px solid var(--border);
    border-radius: 10px; box-shadow: 0 4px 20px rgba(0,0,0,.12);
    min-width: 180px; z-index: 300; overflow: hidden; display: none;
}
.avatar-menu.open { display: block; }
.avatar-menu-name {
    padding: 12px 16px 10px; font-size: 12px; font-weight: 600;
    color: var(--muted); text-transform: uppercase; letter-spacing: .04em;
    border-bottom: 1px solid var(--border);
}
.avatar-menu-item {
    display: flex; align-items: center; gap: 10px;
    padding: 10px 16px; font-size: 14px; font-weight: 500;
    color: var(--text); text-decoration: none;
    background: none; border: none; cursor: pointer;
    width: 100%; text-align: left; font-family: 'Outfit', sans-serif;
    transition: background .1s;
}
.avatar-menu-item:hover { background: var(--slate-light); }
.avatar-menu-item i { font-size: 15px; color: var(--muted); }

/* ── Bottom Tab Bar ──────────────────────────────────────────────────────── */
.bottom-tabs {
    display: none; /* mobile only — enabled via media query */
    position: fixed; bottom: 0; left: 0; right: 0;
    height: 56px; background: var(--white);
    border-top: 1px solid var(--border); z-index: 100;
    padding-bottom: env(safe-area-inset-bottom, 0px);
}
.bottom-tab {
    flex: 1; display: flex; flex-direction: column;
    align-items: center; justify-content: center; gap: 2px;
    color: var(--muted); text-decoration: none;
    font-size: 10px; font-weight: 500; font-family: 'Outfit', sans-serif;
    transition: color .12s; background: none; border: none;
    cursor: pointer; padding: 6px 4px;
    -webkit-tap-highlight-color: transparent;
}
.bottom-tab i { font-size: 22px; line-height: 1; }
.bottom-tab.active { color: var(--green); }
.bottom-tab:active { opacity: .7; }

/* ── More Bottom Sheet ───────────────────────────────────────────────────── */
.more-sheet-backdrop {
    display: none; position: fixed; inset: 0;
    background: rgba(0,0,0,.3); z-index: 150;
}
.more-sheet-backdrop.open { display: block; }
.more-sheet {
    position: fixed; bottom: 0; left: 0; right: 0;
    background: var(--white); border-radius: 18px 18px 0 0;
    z-index: 151; padding-bottom: env(safe-area-inset-bottom, 0px);
    transform: translateY(100%);
    transition: transform .28s cubic-bezier(.4,0,.2,1);
}
.more-sheet.open { transform: translateY(0); }
.more-sheet-item {
    display: flex; align-items: center; gap: 14px;
    padding: 14px 24px; color: var(--text); text-decoration: none;
    font-size: 15px; font-weight: 500; font-family: 'Outfit', sans-serif;
    transition: background .1s; background: none; border: none;
    cursor: pointer; width: 100%; text-align: left;
    -webkit-tap-highlight-color: transparent;
}
.more-sheet-item:active { background: var(--slate-light); }
.more-sheet-item.active { color: var(--green); }
.more-sheet-item i { font-size: 20px; width: 24px; text-align: center; color: var(--muted); }
.more-sheet-item.active i { color: var(--green); }
.more-sheet-section-label {
    padding: 10px 24px 4px;
    font-size: 10px; font-weight: 600; color: var(--muted);
    text-transform: uppercase; letter-spacing: .06em;
    border-top: 1px solid var(--border); margin-top: 4px;
}

/* ── Client list ─────────────────────────────────────────────────────────── */
.client-row-sub {
    display: none; /* shown only on mobile */
    font-size: 11px;
    color: var(--muted);
    margin-top: 2px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 220px;
}

/* ── Shared rich-text editor component (.rte-toolbar/.rte-btn/.rte-editor) — driven by
   wwwroot/js/rich-text-editor.js. Originally built for the Quote Detail page's Scope of
   Work editor; moved here so Settings → Scope of Work Templates can reuse the exact same
   toolbar/editor instead of duplicating the CSS per page. ── */
.rte-toolbar { display: flex; align-items: center; gap: 3px; padding-bottom: 8px; margin-bottom: 10px; border-bottom: 1px solid var(--border); }
.rte-btn {
    width: 28px; height: 28px; border-radius: 6px; border: 1px solid transparent;
    background: none; color: var(--muted); cursor: pointer; display: flex; align-items: center;
    justify-content: center; font-size: 14px; transition: .12s;
}
.rte-btn:hover { background: var(--slate-light); color: var(--text); }
.rte-btn.active { background: var(--green-light); color: var(--green); border-color: rgba(59,109,17,.18); }
.rte-divider { width: 1px; align-self: stretch; background: var(--border); margin: 2px 5px; }
.rte-editor {
    min-height: 90px; max-height: 320px; overflow-y: auto; padding: 10px 12px;
    border: 1px solid var(--border); border-radius: 7px; font-size: 13px; color: var(--text);
    line-height: 1.55; outline: none; transition: border-color .15s, box-shadow .15s;
    background: var(--white);
}
.rte-editor:focus { border-color: var(--green-mid); box-shadow: 0 0 0 3px rgba(99,153,34,.12); }
.rte-editor:empty::before { content: attr(data-placeholder); color: var(--muted); opacity: .8; }
.rte-editor ul, .rte-editor ol { padding-left: 20px; margin: 4px 0; }
.rte-editor p { margin: 0 0 8px; }
.rte-editor p:last-child { margin-bottom: 0; }
.rte-editor h2 { font-size: 16px; font-weight: 700; color: var(--text); margin: 4px 0 8px; }
.rte-editor h3 { font-size: 14px; font-weight: 700; color: var(--text); margin: 4px 0 6px; }

/* ── Shared @mention autocomplete (.nm-*) — driven by wwwroot/js/note-mentions.js. Used by
   both Clients/Detail.cshtml and Quotes/Detail.cshtml's Notes drawers; identical behavior on
   both, so the CSS lives here rather than duplicated per page (same call as .rte-* above). ── */
.note-mention {
    color: var(--tk-blue); background: var(--tk-blue-light); border-radius: 4px;
    padding: 0 3px; font-weight: 600; cursor: default;
}
.nm-dropdown {
    position: absolute; z-index: 500; min-width: 180px; max-width: 260px; max-height: 220px;
    overflow-y: auto; background: var(--white); border: 1px solid var(--border);
    border-radius: 8px; box-shadow: 0 8px 24px rgba(0,0,0,.14); padding: 4px;
}
.nm-option {
    padding: 7px 10px; font-size: 12.5px; font-weight: 500; color: var(--text);
    border-radius: 6px; cursor: pointer;
}
.nm-option.hl, .nm-option:hover { background: var(--slate-light); }

/* ── Mobile (≤ 768px) ───────────────────────────────────────────────────── */
@media (max-width: 768px) {
    /* ── Shell ───────────────────────────────────────────────────────────── */
    .sidebar     { display: none !important; }
    .bottom-tabs { display: flex; }
    .breadcrumb  { display: none; }
    .nav-search-wrap { display: none; }
    /* 1.10 — the icon that replaces it. Desktop hides the icon and shows the box; a phone does
       the reverse, so there is always exactly one route to search. */
    .nav-search-phone { display: inline-flex; }

    /* ── 16px fields (mobile pass item 1.6) ──────────────────────────────────────
       Below 16px iOS zooms the page when a field takes focus, and does not zoom back — the page is
       left wider than the screen with every target shrunk with it.
       The bare element rule is the safety net for unclassed fields. It is specificity (0,0,1), so
       it loses to every class rule below and can never shrink a deliberately large field (the
       signing page's 44px typed signature, for one).
       ⚠ A page that sets its own font-size on its own field class still wins, because page style
       blocks load AFTER this file. Those pages carry their own copy of this rule. */
    input, select, textarea { font-size: 16px; }
    .form-control,
    .nav-search input,
    .ie-input, .ie-select,
    .scope-input-sm, .pet-type-select-sm { font-size: 16px; }

    /* ── Notifications menu: pinned to the viewport, 16px clear of each side ──────── */
    /* Desktop anchors it under the bell (`right: 0` inside .nav-notif-wrap). On a phone the avatar and
       the nav's own padding sit to the BELL's right, so a 340px menu hanging from the bell's right edge
       started 33px off the left of a 375px screen — measured, not estimated. The existing
       `max-width: calc(100vw - 32px)` never helped: it computes to 343px, so it never binds. The anchor
       is the problem, not the width. Fixed to the viewport instead, 8px below the 52px nav. */
    .notif-menu {
        position: fixed; top: 60px; left: 16px; right: 16px;
        width: auto; max-width: none;
    }
    /* Stop the list short of the bottom tabs on a short or landscape screen. */
    .notif-menu-list { max-height: min(360px, calc(100vh - 180px)); }
    /* An 11px link with no padding is a hard target for a thumb. The negative margin keeps the
       header's height unchanged while growing the tap area. */
    .notif-mark-all { font-size: 13px; padding: 8px 0 8px 12px; margin: -8px 0; }

    .page-body {
        padding: 16px;
        padding-bottom: calc(72px + env(safe-area-inset-bottom, 0px));
    }

    /* ── Client detail: profile top ──────────────────────────────────────── */
    .profile-top      { padding: 10px 16px; }
    .profile-top-name { font-size: 16px; }

    /* ── Client detail: tab bar — horizontal scroll ──────────────────────── */
    .profile-tabs {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
        flex-wrap: nowrap;
        margin-left: -16px;
        margin-right: -16px;
        padding-left: 16px;
        padding-right: 16px;
    }
    .profile-tabs::-webkit-scrollbar { display: none; }
    .p-tab { flex-shrink: 0; }

    /* ── Secondary tab rows — horizontal scroll ────────────────────────── */
    /* .tab-nav is a flex row with no wrap. The quote builder's six kind tabs measured
       706px on a 375px screen, so Trapezoids onward were not just cramped but
       unreachable — .main-content clips, it does not scroll. Same treatment as
       .profile-tabs above, minus the edge bleed: this class also appears inside cards
       (the cutlist) where negative margins would break out of the card. */
    .tab-nav {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
        flex-wrap: nowrap;
    }
    .tab-nav::-webkit-scrollbar { display: none; }
    .tab-btn { flex-shrink: 0; }

    /* ── Card heads that carry buttons ─────────────────────────────── */
    /* .card-head is a nowrap flex row and .card-title is flex:1, so a head carrying
       buttons pushes them straight off the screen — the quote cutlist's Measurements
       head has four, measured running to 573 on a 375px screen. Wrapping puts the title
       on its own line and lets the buttons share the next. A head with no buttons is
       unaffected: it fits, so it never wraps. */
    .card-head { flex-wrap: wrap; row-gap: 8px; }
    .card-head .btn,
    .card-head .btn-soft { min-height: 38px; }

    /* ── Client detail: info grid — 2 columns ────────────────────────────── */
    /* minmax(0, 1fr): a long unbroken value — an email, a URL — otherwise sets the column's
       minimum and pushes the grid past the screen. Measured at 320px, an email ran 8px over. */
    .info-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    /* Customer data, so it cannot be predicted: let it break. ⚠ overflow-wrap alone does NOTHING
       here — .val sets white-space:nowrap, which disables wrapping outright, and a max-width in
       px rather than % so the value overflowed its own parent. All three have to change. */
    .info-field .val,
    .ie-val { overflow-wrap: anywhere; white-space: normal; max-width: 100%; min-width: 0; }

    /* ── Client detail: overview two-col — stack with gap ───────────────── */
    /* minmax(0, 1fr), NOT a bare 1fr. `1fr` is minmax(auto, 1fr), and that auto minimum let the
       column grow to its content's min-content width: measured at 375px the activity panel was
       404px inside a 343px grid, 45px past the screen, because "Recent activity" and the
       "Log activity" button would not wrap. */
    .overview-two-col { grid-template-columns: minmax(0, 1fr); gap: 20px; }
    /* And let that header wrap rather than rely on the column being generous. */
    .activity-header  { flex-wrap: wrap; gap: 8px; }

    /* ── New Contact form — single column ────────────────────────────────── */
    .nc-cols  { grid-template-columns: 1fr; }
    .name-row { grid-template-columns: 1fr 1fr; } /* first/last still side-by-side */

    /* ── Client list — condense to avatar · name+sub · status ───────────── */
    .client-table th:nth-child(n+3):nth-child(-n+7),
    .client-table td:nth-child(n+3):nth-child(-n+7) { display: none; }
    .client-row-sub { display: block; }
    .client-table td:first-child { padding-left: 12px; }
    .client-table td:last-child  { padding-right: 12px; }
    .client-table tr { -webkit-tap-highlight-color: transparent; }
}

/* Google Places autocomplete dropdown (N2) — must float above every modal/drawer (app z-index
   ceiling is ~1200). Google appends .pac-container to <body>, so it isn't clipped by overflow. */
.pac-container {
    z-index: 10000 !important;
    border-radius: 8px;
    border: 1px solid var(--border, #E5E7EB);
    box-shadow: 0 8px 24px rgba(0,0,0,.12);
    font-family: inherit;
    margin-top: 2px;
}
.pac-item { padding: 5px 10px; font-size: 13px; cursor: pointer; }
.pac-item:hover, .pac-item-selected { background: var(--surface-2, #F3F4F6); }

/* ── Document rows + audit trail (N23) — shared by the Quote Overview "Documents" section
   (and the legacy client Documents tab until that's removed). Relocated from Clients/Detail. */
.doc-row       { background:var(--white); border:1px solid var(--border); border-radius:10px;
                 margin-bottom:8px; overflow:hidden; transition:border-color .15s, box-shadow .15s; }
.doc-row:hover { border-color:var(--green-mid); }
.doc-row.open  { border-color:var(--green-mid); box-shadow:0 2px 10px rgba(59,109,17,.08); }
.doc-row-main  { padding:13px 16px; display:flex; align-items:center; gap:12px; cursor:pointer; }
.doc-icon-wrap { width:34px; height:34px; border-radius:8px; background:var(--slate-light);
                 border:1px solid var(--border); display:flex; align-items:center;
                 justify-content:center; flex-shrink:0; }
.doc-type-badge              { display:inline-flex; padding:2px 8px; border-radius:4px;
                               font-size:10px; font-weight:600; text-transform:uppercase;
                               letter-spacing:.03em; white-space:nowrap; }
.doc-type-badge.contract     { background:var(--green-light); color:var(--green); }
.doc-type-badge.proposal     { background:#E6F1FB; color:#185FA5; }
.doc-type-badge.change-order { background:#FAEEDA; color:#854F0B; }
.doc-type-badge.signoff      { background:#F3EEF9; color:#6B35A8; }
.doc-type-badge.agreement    { background:#EAF9F5; color:#0E7A5A; }
.doc-status          { display:inline-flex; align-items:center; gap:5px; padding:4px 10px;
                       border-radius:20px; font-size:11px; font-weight:600; white-space:nowrap; }
.doc-status.awaiting { background:#FAEEDA; color:#854F0B; }
.doc-status.signed   { background:var(--green-light); color:var(--green); }
.doc-status.expired  { background:#FEF2F2; color:#E24B4A; }
.doc-status.draft    { background:var(--slate-light); color:var(--muted); border:1px solid var(--border); }
.doc-status.voided   { background:#FEF2F2; color:#E24B4A; }
.doc-status.rejected { background:#FEF2F2; color:#E24B4A; }
.doc-status-dot      { width:6px; height:6px; border-radius:50%; background:currentColor; flex-shrink:0; }
.doc-icon-btn       { width:28px; height:28px; border-radius:6px; border:1px solid var(--border);
                      background:var(--white); cursor:pointer; color:var(--muted);
                      display:inline-flex; align-items:center; justify-content:center;
                      transition:.12s; flex-shrink:0; font-size:13px; padding:0; text-decoration:none; }
.doc-icon-btn:hover { border-color:var(--green-mid); color:var(--green); background:var(--green-light); }
.doc-icon-btn.danger:hover { border-color:#E24B4A; color:#E24B4A; background:#FEF2F2; }
.doc-detail      { overflow:hidden; max-height:0; transition:max-height .3s cubic-bezier(.4,0,.2,1); }
.doc-detail.open { max-height:900px; }
.doc-detail-inner { padding:12px 16px 16px 62px; background:var(--slate-light); border-top:1px solid var(--border); }
.doc-audit-head   { font-size:11px; font-weight:600; color:var(--muted); text-transform:uppercase;
                    letter-spacing:.05em; margin-bottom:10px; }
.audit-trail  { display:flex; flex-direction:column; }
.audit-item   { display:flex; gap:10px; align-items:flex-start; padding:6px 0; position:relative; }
.audit-item:not(:last-child)::before { content:''; position:absolute; left:10px; top:24px;
                                        bottom:-6px; width:1.5px; background:var(--border); z-index:0; }
.audit-dot    { width:22px; height:22px; border-radius:50%; border:1.5px solid var(--border);
                background:var(--white); display:flex; align-items:center; justify-content:center;
                flex-shrink:0; z-index:1; position:relative; }
.audit-dot i  { font-size:10px; color:var(--muted); }
.audit-dot.green  { border-color:var(--green-mid); background:var(--green-light); }
.audit-dot.green i { color:var(--green); }
.audit-dot.blue   { border-color:#85B7EB; background:#E6F1FB; }
.audit-dot.blue i  { color:#185FA5; }
.audit-dot.amber  { border-color:#F0B97A; background:#FAEEDA; }
.audit-dot.amber i { color:#854F0B; }
.audit-dot.red    { border-color:#E24B4A; background:#FEF2F2; }
.audit-dot.red i   { color:#E24B4A; }
.audit-label  { font-size:12px; color:var(--text); padding-top:2px; }
.audit-time   { font-size:10px; color:var(--muted); margin-top:1px; }

/* ── tk-dialog: app-styled confirm()/alert() replacement (wwwroot/js/tk-dialog.js) ─────────── */
.tk-dialog-backdrop {
    /* 1300, above every drawer and sheet. At 1000 a confirm raised from the email-log or
       contact drawer (1201) rendered underneath it — invisibly so, once that drawer is a
       full-screen sheet on a phone. The toast host sits just below, at 1299. */
    position: fixed; inset: 0; z-index: 1300; display: none;
    align-items: center; justify-content: center; padding: 20px;
    background: rgba(26, 35, 50, .5);
}
.tk-dialog-backdrop.act { display: flex; }
.tk-dialog {
    background: var(--white); border-radius: 12px; width: 100%; max-width: 420px;
    box-shadow: 0 24px 80px rgba(0, 0, 0, .3); overflow: hidden;
    animation: tkDialogIn .12s ease-out;
}
@keyframes tkDialogIn { from { opacity: 0; transform: translateY(6px) scale(.98); } to { opacity: 1; transform: none; } }
.tk-dialog-head { display: flex; align-items: center; gap: 10px; padding: 16px 18px 0; }
.tk-dialog-icon {
    display: inline-flex; align-items: center; justify-content: center;
    width: 34px; height: 34px; border-radius: 9px; flex-shrink: 0;
    background: var(--green-light, #EAF3E0); color: var(--green, #3B6D11);
}
.tk-dialog-icon i { font-size: 19px; }
.tk-dialog.is-danger .tk-dialog-icon { background: var(--red-light, #FEF2F2); color: var(--red, #E24B4A); }
.tk-dialog-title { font-size: 15px; font-weight: 600; color: var(--text); }
.tk-dialog-body {
    padding: 10px 18px 4px; font-size: 13.5px; color: var(--text);
    line-height: 1.55; white-space: pre-line; word-break: break-word;
}
.tk-dialog-foot { display: flex; justify-content: flex-end; gap: 8px; padding: 16px 18px 18px; }

/* ── color-select: custom swatch dropdown (shared by Quote Builder + New Quote modal) ──────── */
.color-select { position: relative; }
.color-select-trigger {
    width: 100%; min-height: 40px; display: flex; align-items: center; gap: 8px;
    padding: 10px 12px; font-size: 13px; color: var(--text); box-sizing: border-box;
    background: var(--white); border: 1px solid var(--border); border-radius: 7px;
    cursor: pointer; font-family: 'Outfit', sans-serif; transition: .12s; text-align: left;
}
.color-select-trigger:hover { border-color: var(--muted); }
.color-select.open .color-select-trigger { background: var(--white); border-color: var(--green-mid); box-shadow: 0 0 0 3px rgba(99,153,34,.12); }
.color-select.color-select-invalid .color-select-trigger { border-color: var(--red); box-shadow: 0 0 0 3px rgba(226,75,74,.14); }
.color-select-label { flex: 1; }
.color-select-caret { font-size: 14px; color: var(--muted); transition: transform .15s; }
.color-select.open .color-select-caret { transform: rotate(180deg); }
.color-swatch {
    width: 16px; height: 16px; border-radius: 50%; flex-shrink: 0;
    border: 1px solid rgba(0,0,0,.14); box-shadow: inset 0 0 0 1px rgba(255,255,255,.4);
}
.swatch-checker {
    background-image:
        linear-gradient(45deg, #d8dbe0 25%, transparent 25%),
        linear-gradient(-45deg, #d8dbe0 25%, transparent 25%),
        linear-gradient(45deg, transparent 75%, #d8dbe0 75%),
        linear-gradient(-45deg, transparent 75%, #d8dbe0 75%);
    background-size: 6px 6px;
    background-position: 0 0, 0 3px, 3px -3px, -3px 0;
    background-color: #fff;
}
.color-select-menu {
    position: absolute; top: calc(100% + 4px); left: 0; right: 0;
    background: var(--white); border: 1px solid var(--border); border-radius: 8px;
    box-shadow: 0 8px 24px rgba(0,0,0,.14); z-index: 30; display: none; overflow: hidden; padding: 4px;
}
.color-select.open .color-select-menu { display: block; }
.color-select-option {
    display: flex; align-items: center; gap: 8px; padding: 7px 8px; border-radius: 6px;
    font-size: 13px; color: var(--text); cursor: pointer; transition: .1s;
}
.color-select-option:hover { background: var(--slate-light); }
.color-select-option.selected { background: var(--green-light); color: var(--green); font-weight: 600; }
.color-select-option .ti-check { margin-left: auto; font-size: 13px; color: var(--green); display: none; }
.color-select-option.selected .ti-check { display: inline; }
.color-select-compact { width: 130px; }
.color-select-compact .color-select-trigger { min-height: 32px; padding: 5px 8px; font-size: 12px; }

/* ── tk-sheet: drawers become full-screen, swipe-down sheets on phones (wwwroot/js/tk-sheet.js) ──
   A drawer opts in with data-sheet="<its own open class>"; the script mirrors that onto
   .tk-sheet-open so one set of rules serves every drawer, whatever its page calls the open state
   (everything here uses "open" except Settings' .ud-drawer pair, which uses "act").

   The !important declarations are deliberate: each drawer defines its own geometry in its page's
   own <style> block, which loads AFTER this file at equal or higher specificity. Below the
   breakpoint the sheet geometry has to beat all of them — and only there.

   ⚠ Confirmation dialogs stay centred on purpose (tk-dialog, and the page-scoped .modal-backdrop
   family): a stray swipe must never quietly cancel a delete. */
.tk-sheet-handle { display: none; }

@media (max-width: 768px) {
    [data-sheet] {
        position: fixed !important;
        top: env(safe-area-inset-top, 0px) !important;
        right: 0 !important;
        bottom: 0 !important;
        left: 0 !important;
        width: auto !important;
        max-width: none !important;
        height: auto !important;
        max-height: none !important;
        margin: 0 !important;
        border-left: 0 !important;
        border-radius: 16px 16px 0 0 !important;
        /* A surface, so a sheet can never render transparent over the page behind it. Every drawer
           that existed when this block was written sets its own background; a NEW one added later
           easily forgets, and the Clients filters sheet duly did (2026-09-21) — it showed as floating
           text over the list. Deliberately NOT !important, and page <style> blocks load after this
           file, so any drawer wanting a different surface still overrides it. */
        background: var(--white);
        display: flex !important;
        /* Every drawer here is a head/body/foot stack. Seven of the eight families declare this
           themselves; .more-sheet does not, and without it the shared display:flex above would
           lay its nav items out in a ROW. Declared once here so the rule stands on its own
           rather than depending on each page happening to have said it. */
        flex-direction: column !important;
        padding-bottom: env(safe-area-inset-bottom, 0px);
        overscroll-behavior: contain;
        /* Closed: parked below the screen and hidden from focus and screen readers. */
        transform: translate3d(0, 100%, 0) !important;
        visibility: hidden !important;
        transition: transform .28s cubic-bezier(.22, 1, .36, 1), visibility 0s linear .28s !important;
    }
    [data-sheet].tk-sheet-open {
        transform: translate3d(0, 0, 0) !important;
        visibility: visible !important;
        transition: transform .28s cubic-bezier(.22, 1, .36, 1), visibility 0s linear 0s !important;
        box-shadow: 0 -10px 40px rgba(0, 0, 0, .18);
    }
    /* Follow the finger exactly while dragging. */
    [data-sheet].tk-sheet-dragging { transition: none !important; }
    /* A short menu (the More sheet) sits at the bottom, sized to what it holds. */
    [data-sheet][data-sheet-fit="content"] {
        top: auto !important;
        max-height: 90vh !important;
    }
    .tk-sheet-handle {
        display: block;
        flex: 0 0 auto;
        align-self: center;
        width: 40px;
        height: 5px;
        margin: 8px auto 2px;
        border-radius: 3px;
        background: var(--border);
        touch-action: none;
    }
    html.tk-sheet-lock,
    html.tk-sheet-lock body { overflow: hidden; }
}
@media (max-width: 768px) and (prefers-reduced-motion: reduce) {
    [data-sheet], [data-sheet].tk-sheet-open { transition-duration: .01ms !important; }
}

/* ── tk-toast: transient save/status messages (wwwroot/js/tk-toast.js) ────────────────────── */
#tk-toast-host {
    position: fixed;
    bottom: 28px;
    right: 28px;
    /* 1299 — above every drawer and sheet (the highest here, .el-drawer, sits at 1201), just
       below tk-dialog's 1300. Lower than a sheet, and a toast raised from inside a full-screen
       sheet on a phone would be hidden by it. */
    z-index: 1299;
    display: flex;
    flex-direction: column-reverse;   /* newest nearest the corner */
    gap: 8px;
    /* The host spans nothing and catches nothing; only the toasts themselves are clickable, so
       an empty host can never sit invisibly over the page swallowing clicks. */
    pointer-events: none;
}
.tk-toast {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 18px;
    border-radius: 10px;
    font-size: 13px;
    font-weight: 500;
    box-shadow: 0 4px 20px rgba(28, 28, 26, .13);
    max-width: 320px;
    cursor: pointer;
    pointer-events: auto;
    animation: tk-toast-in .2s ease forwards;
}
/* TPE semantics: --tk-green is success only, --tk-info is deliberately not the primary blue. */
.tk-toast.success { background: var(--tk-green-light); border: 1px solid rgba(42, 130, 101, .28); color: var(--tk-green); }
.tk-toast.error   { background: var(--tk-red-light);   border: 1px solid rgba(165, 65, 60, .28);  color: var(--tk-red); }
.tk-toast.info    { background: var(--tk-info-light);  border: 1px solid rgba(24, 95, 165, .28);  color: var(--tk-info); }
.tk-toast.fading  { animation: tk-toast-out .25s ease forwards; }
.tk-toast i       { font-size: 16px; flex-shrink: 0; }

@keyframes tk-toast-in  { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: translateY(0); } }
@keyframes tk-toast-out { from { opacity: 1; transform: translateY(0); }   to { opacity: 0; transform: translateY(12px); } }

@media (max-width: 768px) {
    /* Clear the fixed bottom tabs (56px + safe area) and span the width, so a long message
       wraps instead of being pinned into a narrow column in the corner. */
    #tk-toast-host {
        left: 12px;
        right: 12px;
        bottom: calc(68px + env(safe-area-inset-bottom, 0px));
        align-items: stretch;
    }
    .tk-toast { max-width: none; }
}

/* Respect a reduced-motion preference: the toast still appears and still leaves, it just does
   not slide. */
@media (prefers-reduced-motion: reduce) {
    .tk-toast, .tk-toast.fading { animation-duration: .01ms; }
}

/* ── Touch (mobile pass item 1.7) ──────────────────────────────────────────────
   `(hover: none)` as well as the width, deliberately: a touch laptop at desktop width has no hover
   either, and the controls below are just as unreachable there.
   Page-scoped icon buttons are NOT reachable from this file — page styles load after it — so pages
   with their own carry their own copy. */
@media (hover: none), (max-width: 768px) {
    .drawer-close,
    .doc-icon-btn      { width: 36px; height: 36px; }
    .pet-confirm-btn-sm,
    .pet-cancel-btn-sm { width: 30px; height: 30px; }
    /* Bare icon buttons anywhere: give them a real hit area without changing how they look. */
    .btn-icon,
    .icon-btn          { min-width: 36px; min-height: 36px; }
    /* Every drawer footer, app-wide. .drawer-foot is global, and its buttons are .btn-sm at 29px —
       these are Cancel and Save on a full-screen sheet, so they are the last thing a thumb touches. */
    .drawer-foot .btn  { min-height: 44px; }
}

/* ── Tap-to-call / email / map buttons (J3, 2026-10-27; wwwroot/js/tk-contact-links.js) ──
   An icon BESIDE the value, never the value itself: on the client page tapping the value starts
   inline editing, and on the job page tapping the job site opens the address picker. 30px target,
   38px at phone width so a thumb can hit it. */
.tk-clink { display: inline-flex; align-items: center; justify-content: center; width: 30px; height: 30px;
            border-radius: 8px; color: var(--tk-blue); background: var(--tk-blue-light); text-decoration: none;
            flex-shrink: 0; vertical-align: middle; transition: background .12s; }
.tk-clink:hover { background: #dfe6ef; }
.tk-clink i { font-size: 16px; }
.tk-clinks { display: inline-flex; gap: 6px; vertical-align: middle; }
@media (max-width: 768px) { .tk-clink { width: 38px; height: 38px; } .tk-clink i { font-size: 18px; } }

/* ── File viewer: previous/next + counter (J5, 2026-10-28; wwwroot/js/tk-lightbox-nav.js) ──
   The viewer itself (.fv-lb) is page-scoped on Clients/Detail and Quotes/Detail; these few
   classes are shared so both pages step through files the same way. */
.fv-lb-count { font-size: 12px; color: rgba(255,255,255,.72); white-space: nowrap; margin-left: 4px; }
.fv-lb-nav { position: absolute; top: 50%; transform: translateY(-50%); z-index: 4; width: 46px; height: 46px;
             border-radius: 50%; border: none; background: rgba(255,255,255,.16); color: #fff; font-size: 24px;
             display: flex; align-items: center; justify-content: center; cursor: pointer; }
.fv-lb-nav:hover:not([disabled]) { background: rgba(255,255,255,.3); }
.fv-lb-nav[disabled] { opacity: .25; cursor: default; }
.fv-lb-nav.prev { left: 14px; }
.fv-lb-nav.next { right: 14px; }
@media (max-width: 768px) { .fv-lb-nav { width: 40px; height: 40px; } .fv-lb-nav.prev { left: 6px; } .fv-lb-nav.next { right: 6px; } }