/* ============================================================================
   Business tab — shared building blocks (Properties, Assets, Recurring Jobs,
   Preferred Tradies, Reports). Loaded globally so every Business page has its
   base styling on first visit. Page-specific styling stays in each .razor.
   All colour/spacing via design-tokens.css.
   ============================================================================ */

/* Antialiasing + tabular figures: every number/price/stat aligns like a ledger — a core
   "this is real software" cue. Scoped to the Business tab so the rest of the app is untouched. */
.biz-page { background: var(--neutral-50, #f8f8f7); min-height: 100vh; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; font-variant-numeric: tabular-nums; font-feature-settings: "tnum", "cv01", "cv03"; }
/* One comfortable, centred content column so nothing sprawls edge-to-edge on wide monitors. */
.biz-body { max-width: 1240px; margin-left: auto; margin-right: auto; padding-top: 1.75rem; padding-bottom: 4rem; }

/* Tighter optical tracking on headings (Inter/Archivo both read better slightly condensed). */
.biz-page h1 { letter-spacing: -0.025em; }
.biz-page h2, .biz-page h3, .biz-section-head h2 { letter-spacing: -0.02em; }

.biz-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(340px, 100%), 1fr)); gap: 1.1rem; }

.biz-card {
    background: var(--color-surface, #fff);
    border: 1px solid var(--neutral-200, #e9e9e6);
    border-radius: var(--radius-lg, 16px);
    padding: 1.35rem;
    box-shadow: var(--shadow-sm, 0 1px 3px rgba(16,24,40,.08), 0 1px 2px rgba(16,24,40,.04));
}

/* Clickable cards get a pointer + a resting elevation cue; the unified card-hover
   (card-hover.js) supplies the lift + glow on the pages that opt in with data-uhover-scope. */
.biz-card[role="button"], .biz-card.is-clickable { cursor: pointer; }

/* ---- Toolbar (filters / search) ---- */
/* Every control shares one height + radius so the toolbar reads as a single aligned row. */
.biz-toolbar { display: flex; flex-wrap: wrap; gap: 0.5rem; align-items: center; margin-bottom: 1.5rem; }
.biz-search { position: relative; flex: 1; min-width: 240px; }
.biz-search i { position: absolute; left: 0.95rem; top: 50%; transform: translateY(-50%); color: var(--neutral-400, #b6bdc6); font-size: 0.9rem; pointer-events: none; }
.biz-search input { width: 100%; height: 40px; padding: 0 0.95rem 0 2.4rem; border: 1px solid var(--color-border, #e2e4e9); border-radius: var(--radius-md, 10px); font-size: 0.875rem; background: var(--color-surface, #fff); color: var(--neutral-900, #1f2933); transition: border-color var(--dur-base, .2s) var(--ease-out, ease), box-shadow var(--dur-base, .2s) var(--ease-out, ease); }
.biz-search input::placeholder { color: var(--neutral-400, #b6bdc6); }
.biz-search input:focus { outline: none; border-color: var(--brand-500, #3b82f6); box-shadow: 0 0 0 3px var(--color-primary-glow-soft, rgba(37,99,235,.12)); }

.biz-chip { height: 40px; display: inline-flex; align-items: center; padding: 0 1rem; border-radius: var(--radius-md, 10px); border: 1px solid var(--color-border, #e2e4e9); background: var(--color-surface, #fff); color: var(--neutral-600, #6b7280); font-size: 0.82rem; font-weight: 600; cursor: pointer; transition: all var(--dur-base, .2s) var(--ease-out, ease); white-space: nowrap; }
.biz-chip:hover { border-color: var(--neutral-300, #cbd0d6); background: var(--neutral-50, #f9fafb); color: var(--neutral-900, #1f2933); }
.biz-chip:active { transform: scale(0.98); }
.biz-chip.on { background: var(--brand-600, #2563eb); border-color: var(--brand-600, #2563eb); color: #fff; }
.biz-chip.on:hover { color: #fff; background: var(--brand-700, #1d4ed8); border-color: var(--brand-700, #1d4ed8); }

/* Native selects in a toolbar → app-styled control with a custom chevron, same 40px height. */
.biz-toolbar select.biz-input, select.biz-input.tb-mini, .biz-input.tb-mini { height: 40px; min-width: 158px; padding: 0 2rem 0 0.85rem; border-radius: var(--radius-md, 10px); font-size: 0.85rem; font-weight: 500; color: var(--neutral-700, #4b5563); cursor: pointer;
    appearance: none; -webkit-appearance: none; -moz-appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 16 16' fill='none' stroke='%239aa3ad' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 6l4 4 4-4'/%3E%3C/svg%3E");
    background-repeat: no-repeat; background-position: right 0.7rem center; }

/* Accessible focus rings across interactive controls */
.biz-btn:focus-visible, .biz-chip:focus-visible, .biz-input:focus-visible, .biz-search input:focus-visible, .tb-view-btn:focus-visible { outline: 2px solid var(--brand-500, #3b82f6); outline-offset: 2px; }

/* ---- Buttons ---- */
.biz-btn { display: inline-flex; align-items: center; justify-content: center; gap: 0.35rem; padding: 0.58rem 1rem; border-radius: var(--radius-md, 10px); font-size: 0.83rem; font-weight: 600; letter-spacing: -0.005em; text-decoration: none; cursor: pointer; border: 1px solid transparent; transition: all var(--dur-base, 0.18s) var(--ease-out, ease); }
.biz-btn-primary { background: var(--brand-600, #2563eb); color: #fff; box-shadow: 0 1px 2px rgba(16,24,40,.12); }
.biz-btn-primary:hover { background: var(--brand-700, #1d4ed8); color: #fff; transform: translateY(-1px); box-shadow: 0 4px 12px -4px var(--color-primary-glow, rgba(37,99,235,.45)); }
.biz-btn-primary:active { transform: translateY(0) scale(.985); }
.biz-btn-ghost { background: var(--color-surface, #fff); color: var(--neutral-700, #4b5563); border-color: var(--neutral-200, #e9e9e6); box-shadow: 0 1px 2px rgba(16,24,40,.04); }
.biz-btn-ghost:hover { background: var(--neutral-50, #f9fafb); border-color: var(--neutral-300, #cbd0d6); color: var(--neutral-900, #1f2933); }
.biz-btn-danger { background: var(--color-surface, #fff); color: var(--danger-600, #dc2626); border-color: var(--danger-50, #fef2f2); }
.biz-btn-danger:hover { background: var(--danger-50, #fef2f2); }

/* ---- Status pills ---- */
.biz-pill { display: inline-flex; align-items: center; gap: 0.3rem; font-size: 0.68rem; font-weight: 700; padding: 0.2rem 0.6rem; border-radius: var(--radius-pill, 999px); text-transform: uppercase; letter-spacing: 0.03em; }
.pill-green { background: var(--success-50, #f0fdf4); color: var(--success-600, #16a34a); }
.pill-amber { background: var(--warning-50, #fffbeb); color: var(--warning-600, #d97706); }
.pill-red { background: var(--danger-50, #fef2f2); color: var(--danger-600, #dc2626); }
.pill-blue { background: var(--brand-50, #eff6ff); color: var(--brand-700, #1d4ed8); }
.pill-slate { background: var(--neutral-100, #f4f4f2); color: var(--neutral-600, #6b7280); }

/* ---- Section heading ---- */
/* Icon muted (decorative, not an alert); the title carries the meaning. Reserving the brand
   accent for interactive elements reads as more restrained/premium. */
.biz-section-head { display: flex; align-items: center; gap: 0.5rem; margin: 2.25rem 0 1rem; }
.biz-section-head i { color: var(--neutral-400, #b6bdc6); font-size: 1rem; }
.biz-section-head h2 { font-size: 1.02rem; font-weight: 700; letter-spacing: -0.02em; color: var(--neutral-900, #1f2933); margin: 0; }
.biz-section-head:first-child { margin-top: 0.5rem; }

/* ---- Modal ---- */
.biz-modal-backdrop { position: fixed; inset: 0; background: rgba(15,23,42,0.5); z-index: 1200; backdrop-filter: blur(2px); }
.biz-modal { position: fixed; z-index: 1201; top: 50%; left: 50%; transform: translate(-50%, -50%); width: min(560px, calc(100vw - 2rem)); max-height: 90vh; overflow: auto; background: var(--color-surface, #fff); border-radius: var(--radius-xl, 20px); box-shadow: var(--shadow-2xl); }
.biz-modal-head { display: flex; align-items: center; justify-content: space-between; padding: 1.1rem 1.35rem; border-bottom: 1px solid var(--color-border, #e5e7eb); }
.biz-modal-head h3 { font-size: 1.05rem; font-weight: 700; margin: 0; color: var(--neutral-900, #1f2933); }
.biz-modal-x { background: none; border: none; color: var(--neutral-500, #9aa3ad); font-size: 1.1rem; cursor: pointer; border-radius: var(--radius-sm, 8px); width: 32px; height: 32px; transition: all var(--dur-fast, .12s) var(--ease-out, ease); }
.biz-modal-x:hover { background: var(--neutral-100, #f4f4f2); color: var(--neutral-900, #1f2933); }
.biz-modal-body { padding: 1.35rem; }
.biz-modal-foot { display: flex; justify-content: flex-end; gap: 0.6rem; padding: 1.1rem 1.35rem; border-top: 1px solid var(--color-border, #e5e7eb); }
.biz-modal-foot .biz-btn { padding: 0.6rem 1.4rem; }

/* ---- Form fields ---- */
.biz-field { margin-bottom: 0.9rem; display: flex; flex-direction: column; }
.biz-field label { font-size: 0.78rem; font-weight: 600; color: var(--neutral-700, #4b5563); margin-bottom: 0.3rem; }
.biz-input { padding: 0.6rem 0.8rem; border: 1px solid var(--color-border, #e5e7eb); border-radius: var(--radius-sm, 8px); font-size: 0.9rem; color: var(--neutral-900, #1f2933); background: var(--color-surface, #fff); transition: border-color var(--dur-base, .2s) var(--ease-out, ease); }
.biz-input:focus { outline: none; border-color: var(--brand-500, #3b82f6); box-shadow: 0 0 0 3px var(--color-primary-glow-soft, rgba(37,99,235,.12)); }
.biz-row { display: grid; grid-template-columns: 1fr 1fr; gap: 0.8rem; }

/* ---- Empty ---- */
.biz-empty { display: flex; flex-direction: column; align-items: center; text-align: center; padding: 3.25rem 1rem; color: var(--neutral-600, #6b7280); font-size: 0.9rem; }
.biz-empty i { display: flex; align-items: center; justify-content: center; width: 56px; height: 56px; border-radius: 50%; background: var(--brand-50, #eff6ff); color: var(--brand-500, #3b82f6); font-size: 1.5rem; margin-bottom: 0.85rem; }
.biz-empty a { color: var(--brand-600, #2563eb); font-weight: 600; text-decoration: none; } .biz-empty a:hover { text-decoration: underline; }

/* Cards inside a data-uhover-scope but flagged static never take the lift. */
.biz-card[data-uhover-skip] { cursor: default; }

@media (max-width: 640px) { .biz-row { grid-template-columns: 1fr; } }

/* ---- Phone fit -------------------------------------------------------------
   Action rows and stat rows are flex with no wrap, which is right on a laptop
   and runs off the edge of a phone. Everything here is a shrink/wrap allowance,
   not a redesign: the same controls, allowed to take a second line. */
@media (max-width: 767.98px) {
    /* Any row of buttons wraps rather than pushing the last one off screen. */
    [class*="-actions"],
    .biz-modal-foot,
    .biz-card-head,
    .biz-toolbar {
        flex-wrap: wrap;
    }

    .biz-btn {
        max-width: 100%;
    }

    /* A label + progress track + figures row: the track is the elastic part, so
       it gets min-width:0 and the figures are allowed to wrap under. */
    .budget-row {
        flex-wrap: wrap;
    }

    .budget-track {
        min-width: 0;
        flex: 1 1 100%;
        order: 3;
    }

    .budget-nums {
        white-space: nowrap;
    }
}