/* ============================================================================
   SEBAGO LAWN & LANDSCAPE — "Field & Foliage" identity.
   Loaded only for the lawncare pack. An organic, premium green-industry look:
   warm SAND field with a faint TOPOGRAPHIC contour motif, deep FOREST-GREEN
   surfaces & table headers (the brand anchor), fresh-grass accent, warm CLAY/
   SOIL secondary, Bricolage Grotesque display (chunky, characterful), generous
   12–14px organic radii, leaf-tab bullets. Deliberately unlike plumbing (cool
   teal SaaS), construction (industrial steel/orange) and everletric (graphite
   + electric yellow).
   ============================================================================ */
:root {
    --accent: #2f8f4e;            /* fresh grass green */
    --accent-bright: #46b06a;     /* lighter blade */
    --accent-deep: #1c5f37;       /* forest */
    --accent-soft: #e2f1e5;       /* pale mint */
    --clay: #c2703d;              /* soil / mulch (warm secondary) */
    --clay-soft: #f4e7da;
    --bg: #f5f3ea;                /* warm sand field */
    --panel: #ffffff;
    --ink: #20271d;               /* deep olive-charcoal */
    --ink-soft: #5e6a57;
    --line: #e5e6d8;
    --side: #15271a;              /* deep forest rail */
    --side-ink: #9fb3a1;
    --side-ink-bright: #ffffff;
    --display-font: "Bricolage Grotesque", "Inter", sans-serif;
    --radius: 12px;
    --shadow: 0 1px 2px rgba(28,55,30,.05), 0 14px 32px -22px rgba(28,55,30,.45);
}

body {
    font-family: "Inter", -apple-system, "Segoe UI", sans-serif;
    color: var(--ink);
    background-color: var(--bg);
    /* faint topographic contour lines — landscape survey feel, very subtle */
    background-image:
        repeating-radial-gradient(circle at 18% 12%, rgba(47,143,78,.045) 0, rgba(47,143,78,.045) 1px, transparent 1px, transparent 26px),
        repeating-radial-gradient(circle at 86% 88%, rgba(194,112,61,.04) 0, rgba(194,112,61,.04) 1px, transparent 1px, transparent 32px),
        radial-gradient(900px 520px at 100% -10%, rgba(70,176,106,.08), transparent 60%);
    background-attachment: fixed;
}

/* ---------------- Sidebar: deep forest rail ---------------- */
.side { background: linear-gradient(185deg, #1a3020, #102015 90%); border-right: 1px solid rgba(0,0,0,.28); }
.brand { border-bottom: 1px solid rgba(255,255,255,.08); margin: -2px -6px 14px; padding: 6px 14px 16px; }
.brand-mark {
    background: linear-gradient(160deg, var(--accent-bright), var(--accent-deep));
    border-radius: 11px; color: #fff; font-family: var(--display-font); font-weight: 800;
    box-shadow: 0 4px 12px -3px rgba(47,143,78,.6);
}
.brand-name { font-family: var(--display-font); font-weight: 700; letter-spacing: -.3px; font-size: 16px; }
.brand-pack { font-size: 10.5px; letter-spacing: .12em; text-transform: uppercase; color: var(--accent-bright); opacity: .95; }
.nav-link { border-radius: 10px; font-size: 13px; font-weight: 600; color: var(--side-ink); }
.nav-link:hover { background: rgba(255,255,255,.06); color: #fff; }
.nav-link.active { background: linear-gradient(90deg, var(--accent-deep), var(--accent)); color: #fff; box-shadow: 0 4px 14px -5px rgba(47,143,78,.7); }
.nav-link.active .nav-ico { opacity: 1; }
.side-foot { font-size: 10px; letter-spacing: .1em; text-transform: uppercase; opacity: .5; }

/* ---------------- Topbar ---------------- */
.topbar { background: var(--panel); border-bottom: 1px solid var(--line); box-shadow: 0 1px 0 rgba(28,55,30,.03); }
.client-id strong { font-family: var(--display-font); font-weight: 700; letter-spacing: -.3px; }
.client-id .dot { background: var(--accent-bright); box-shadow: 0 0 0 4px rgba(70,176,106,.18); }

/* ---------------- Page header ---------------- */
.page-head { margin-bottom: 22px; }
.page-head h1 { font-family: var(--display-font); font-weight: 800; letter-spacing: -.6px; font-size: 27px; color: var(--ink); }
.page-head .sub { color: var(--ink-soft); font-size: 13px; margin-top: 4px; }
.page-head .back { color: var(--accent-deep); font-weight: 600; }
.page-head.row .head-tools .btn { border-radius: 10px; }

/* ---------------- KPI cards ---------------- */
.kpis { gap: 14px; }
.kpi-card {
    position: relative; border: 1px solid var(--line); border-radius: 14px;
    background: var(--panel); box-shadow: var(--shadow); padding: 18px 20px; overflow: hidden;
}
.kpi-card::before {                              /* grass top-edge */
    content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 4px;
    background: linear-gradient(180deg, var(--accent-bright), var(--accent-deep));
}
.kpi-card::after {                               /* leafy corner glow */
    content: ""; position: absolute; right: -26px; top: -26px; width: 66px; height: 66px;
    background: radial-gradient(circle, rgba(70,176,106,.16), transparent 70%); border-radius: 50%;
}
.kpi-ic { color: var(--accent-deep); background: var(--accent-soft); border-radius: 10px; padding: 6px; top: 15px; right: 15px; opacity: 1; }
.kpi-ic svg { width: 18px; height: 18px; }
.kpi-lab { text-transform: uppercase; letter-spacing: .07em; font-size: 10.5px; font-weight: 700; color: var(--ink-soft); }
.kpi-num { font-family: var(--display-font); font-weight: 800; font-size: 31px; letter-spacing: -1px; color: var(--ink); margin-top: 4px; }
.kpi-delta { font-size: 11.5px; margin-top: 5px; font-weight: 600; color: var(--ink-soft); }
.kpi-delta.up { color: #2f8f4e; } .kpi-delta.down { color: #c0533a; }

/* ---------------- Panels ---------------- */
.rpanel { border-radius: 14px; border: 1px solid var(--line); box-shadow: var(--shadow); background: var(--panel); }
.panel-h { background: var(--panel); border-bottom: 1px solid var(--line); padding: 14px 18px; }
.panel-h h3 {
    font-family: var(--display-font); font-weight: 700; font-size: 14px; letter-spacing: -.2px; color: var(--ink);
    display: flex; align-items: center; gap: 9px;
}
.panel-h h3::before {                            /* leaf-blade bullet */
    content: ""; width: 11px; height: 11px; flex: none;
    background: linear-gradient(150deg, var(--accent-bright), var(--accent-deep));
    border-radius: 0 100% 0 100%;
}
.panel-sub { font-weight: 400; }
.panel-act a { color: var(--accent-deep); font-weight: 700; font-size: 12px; }

/* ---------------- Tables: FOREST-green header (brand anchor) ---------------- */
table.data.card, table.data { border-radius: 12px; }
table.data thead th {
    background: linear-gradient(180deg, var(--accent-deep), #143f24);
    color: #e7f4ea; border-bottom: none;
    text-transform: uppercase; letter-spacing: .06em; font-size: 10px; font-weight: 700; padding: 12px 14px;
}
table.data thead th:first-child { border-top-left-radius: 12px; }
table.data thead th:last-child  { border-top-right-radius: 12px; }
table.data td { border-bottom: 1px solid #eef2e6; font-size: 13px; }
table.data tbody tr:nth-child(even) td { background: #f8faf4; }
table.data tbody tr.clickable:hover td { background: var(--accent-soft); }

/* ---------------- Badges ---------------- */
.badge { border-radius: 7px; text-transform: uppercase; letter-spacing: .03em; font-size: 10px; font-weight: 700; padding: 3px 9px; }
/* success / green */
.badge-completed, .badge-paid, .badge-active, .badge-approved, .badge-won,
.badge-applied, .badge-repeat { background: #d8f0df; color: #1c6e3d; }
/* danger / red */
.badge-canceled, .badge-overdue, .badge-declined, .badge-lost, .badge-spam,
.badge-inactive, .badge-retired, .badge-expired, .badge-steep { background: #fbe2da; color: #be4727; }
/* info / mint */
.badge-scheduled, .badge-sent, .badge-new, .badge-draft, .badge-pending,
.badge-flat, .badge-weekly, .badge-prospect, .badge-seasonal,
.badge-mon, .badge-tue, .badge-wed, .badge-thu, .badge-fri, .badge-sat { background: var(--accent-soft); color: var(--accent-deep); }
/* warm / clay (in-motion) */
.badge-dispatched, .badge-in-progress, .badge-partial, .badge-contacted,
.badge-quoted, .badge-rush, .badge-callback, .badge-in-shop, .badge-rolling,
.badge-bi-weekly { background: var(--clay-soft); color: #99511f; }
/* neutral */
.badge-residential, .badge-commercial, .badge-hoa, .badge-municipal, .badge-skipped,
.badge-mixed, .badge-flat-rate, .badge-monthly, .badge-per-round, .badge-one-time,
.badge-normal { background: #ecefe3; color: #4d5746; }

/* category tints (price book / programs / materials) */
.badge-mowing { background: #d8f0df; color: #1c6e3d; }
.badge-lawn-treatment, .badge-fertilization, .badge-weed-control, .badge-fertilizer,
.badge-herbicide { background: var(--clay-soft); color: #99511f; }
.badge-landscaping, .badge-planting, .badge-plant, .badge-mulch, .badge-loam { background: #e7e8d3; color: #5d6326; }
.badge-cleanup, .badge-aeration, .badge-seed { background: #e3eddb; color: #4a6a39; }
.badge-pest, .badge-pesticide, .badge-irrigation, .badge-snow, .badge-salt,
.badge-stone, .badge-hardscape, .badge-labor, .badge-fuel { background: #e7eef0; color: #3d5a64; }

/* ---------------- Atoms / buttons ---------------- */
.pill { border-radius: 7px; background: var(--accent-soft); color: var(--accent-deep); border-color: transparent; font-weight: 600; font-size: 11px; }
.rprogress { height: 8px; background: #e2e8da; border-radius: 999px; }
.rprogress i { background: linear-gradient(90deg, var(--accent-deep), var(--accent-bright)); }
.datebox { background: linear-gradient(170deg, var(--accent), var(--accent-deep)); color: #fff; border-radius: 11px; }
.datebox b { font-family: var(--display-font); font-weight: 700; }
.datebox span { color: #c6e7cf; }
.avatar { border-radius: 11px; background: linear-gradient(160deg, var(--accent), var(--accent-deep)); font-family: var(--display-font); font-weight: 700; }
.feed-dot { background: var(--accent-bright); }
.btn { border-radius: 10px; font-weight: 700; }
.btn-primary { background: var(--accent-deep); border-color: var(--accent-deep); box-shadow: 0 6px 16px -7px rgba(28,95,55,.8); }
.btn-primary:hover { background: var(--accent); }
.detail.card { border-radius: 12px; }
.detail-key { background: #f4f7ef; font-weight: 600; }