/* ============================================================
   Ease of Business — Owner App Design System
   ------------------------------------------------------------
   Audience: small service-business owners (AC repair, plumbing,
   sales & service shops) on mid-range Android phones, often
   outdoors in bright light, often not tech-confident.

   Consequences that drove these choices:
   - Type family must carry Devanagari (app supports हिंदी/मराठी).
     Hind is drawn for Latin + Devanagari together, so a Hindi
     auto-reply template and an English label sit on one baseline.
   - Contrast is pushed high; low-contrast greys disappear in sun.
   - Touch targets never below 48px.
   - Borders carry separation, not shadows. Shadows are reserved
     for things that genuinely float (tab bar, sticky bars).
   - The enquiry status pipeline is the product's spine, so it
     gets the loudest, most consistent treatment in the system.
   ============================================================ */

:root {
    /* Surfaces */
    --bg:            #F1F4F2;
    --surface:       #FFFFFF;
    --surface-sunk:  #E8EDEA;

    /* Ink */
    --ink:           #16241F;
    --ink-2:         #55665F;
    --ink-3:         #7C8B85;

    /* Structure */
    --line:          #D6DFDA;
    --line-strong:   #B9C6C0;

    /* Brand: growth green — reads as "go", ties to money/OK */
    --accent:        #0F7B5A;
    --accent-press:  #0A5C43;
    --accent-wash:   #E1F2EB;

    /* Status pipeline — the product's spine */
    --st-new:        #1D4ED8;
    --st-new-bg:     #E5EBFB;
    --st-proc:       #A65A08;
    --st-proc-bg:    #FBEEDA;
    --st-done:       #0F7B5A;
    --st-done-bg:    #E1F2EB;
    --st-cancel:     #B42318;
    --st-cancel-bg:  #FBE9E7;

    /* Feedback */
    --danger:        #B42318;
    --danger-bg:     #FBE9E7;
    --danger-line:   #F1C9C4;
    --ok:            #0F7B5A;
    --ok-bg:         #E1F2EB;
    --ok-line:       #BEE0D3;
    --star:          #B7791F;

    /* Shape */
    --r-sm: 10px;
    --r:    14px;
    --r-lg: 18px;
    --r-pill: 999px;

    /* Elevation — only for floating chrome */
    --lift: 0 -1px 0 var(--line), 0 -8px 24px rgba(22,36,31,.06);
    --lift-up: 0 8px 24px rgba(22,36,31,.14);

    --font: 'Hind', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;

    --tap: 48px;
}

* { box-sizing: border-box; }

html, body {
    margin: 0;
    padding: 0;
    background: var(--bg);
    color: var(--ink);
    font-family: var(--font);
    font-size: 16px;
    line-height: 1.5;
    -webkit-text-size-adjust: 100%;
    -webkit-font-smoothing: antialiased;
}

/* Hind runs small and low; nudge it up for legibility */
body { font-size: 16.5px; }

h1, h2, h3 {
    font-weight: 700;
    letter-spacing: -0.015em;
    line-height: 1.22;
    margin: 0 0 .35em;
    color: var(--ink);
}
h1 { font-size: 1.6rem; }
h2 { font-size: 1.25rem; }
h3 { font-size: 1.05rem; }

p { margin: 0 0 1em; }
a { color: var(--accent-press); text-underline-offset: 2px; }

.eob-muted   { color: var(--ink-2); }
.eob-small   { font-size: .875rem; }
.eob-xsmall  { font-size: .8rem; }
.eob-strong  { font-weight: 600; }
.eob-num     { font-variant-numeric: tabular-nums; }

/* ============================================================
   1. Shells
   ============================================================ */

.eob-screen {
    min-height: 100vh;
    min-height: 100dvh;
    display: flex;
    flex-direction: column;
}

.eob-auth-shell {
    min-height: 100vh;
    min-height: 100dvh;
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 40px 20px 56px;
    max-width: 440px;
    margin: 0 auto;
    width: 100%;
}

.eob-container {
    max-width: 560px;
    margin: 0 auto;
    width: 100%;
    padding: 0 18px;
}

.eob-main {
    flex: 1;
    padding: 18px 18px 108px;
    max-width: 620px;
    width: 100%;
    margin: 0 auto;
}

/* Page-level intro block */
.eob-page-head { margin-bottom: 18px; }
.eob-page-head h1 { margin-bottom: 2px; }
.eob-page-head p  { margin: 0; color: var(--ink-2); }

/* ============================================================
   2. Brand mark
   ============================================================ */

.eob-brand {
    display: flex;
    align-items: center;
    gap: 11px;
    margin-bottom: 30px;
}

.eob-brand-mark {
    width: 42px;
    height: 42px;
    border-radius: 12px;
    background: var(--accent);
    display: grid;
    place-items: center;
    color: #fff;
    font-weight: 700;
    font-size: 1.15rem;
    flex-shrink: 0;
}

.eob-brand-name {
    font-weight: 700;
    font-size: 1.08rem;
    letter-spacing: -0.01em;
}

/* ============================================================
   3. Top bar & bottom tabs
   ============================================================ */

.eob-topbar {
    position: sticky;
    top: 0;
    z-index: 30;
    background: var(--surface);
    border-bottom: 1px solid var(--line);
    padding: 0 8px 0 18px;
    min-height: 56px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
}

.eob-topbar-title {
    font-size: 1.08rem;
    font-weight: 700;
    letter-spacing: -0.01em;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.eob-icon-btn {
    background: none;
    border: none;
    width: var(--tap);
    height: var(--tap);
    display: grid;
    place-items: center;
    cursor: pointer;
    color: var(--ink);
    border-radius: var(--r-sm);
    flex-shrink: 0;
    text-decoration: none;
}
.eob-icon-btn:active { background: var(--surface-sunk); }
.eob-icon-btn svg { width: 22px; height: 22px; }
.eob-icon-btn.is-danger { color: var(--danger); }

.eob-tabbar {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 30;
    background: var(--surface);
    box-shadow: var(--lift);
    display: flex;
    padding: 6px 6px calc(6px + env(safe-area-inset-bottom));
    max-width: 620px;
    margin: 0 auto;
}

.eob-tab {
    flex: 1;
    min-height: var(--tap);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 3px;
    padding: 6px 2px;
    color: var(--ink-2);
    text-decoration: none;
    font-size: .69rem;
    font-weight: 600;
    border-radius: 12px;
    letter-spacing: .005em;
}
.eob-tab svg { width: 23px; height: 23px; stroke-width: 1.7; }
.eob-tab.active { color: var(--accent-press); background: var(--accent-wash); }

/* Back link above page content */
.eob-back {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    min-height: 40px;
    color: var(--ink-2);
    font-size: .9rem;
    font-weight: 600;
    text-decoration: none;
    margin-bottom: 12px;
}
.eob-back:active { color: var(--ink); }

/* ============================================================
   4. Cards & lists
   ============================================================ */

.eob-card {
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--r);
    padding: 20px 18px;
}
.eob-card + .eob-card { margin-top: 14px; }

/* Card that holds only a list — rows manage their own padding */
.eob-card-flush { padding: 0; overflow: hidden; }

.eob-list-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    padding: 15px 18px;
    min-height: var(--tap);
    border-bottom: 1px solid var(--line);
    text-decoration: none;
    color: inherit;
    background: var(--surface);
}
.eob-list-item:last-child { border-bottom: none; }
.eob-list-item:active { background: var(--surface-sunk); }

/* Inside a PADDED card, rows shouldn't double-pad horizontally.
   Flush cards are the opposite case: they have no padding of their own,
   so their rows must keep theirs — that is what makes a list card read
   as a list instead of text jammed against the border. */
.eob-card:not(.eob-card-flush) > .eob-list-item {
    padding-left: 0;
    padding-right: 0;
}

.eob-list-body { min-width: 0; flex: 1; }
.eob-list-title {
    font-weight: 600;
    line-height: 1.35;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.eob-list-meta {
    color: var(--ink-2);
    font-size: .84rem;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.eob-list-sub {
    color: var(--ink-2);
    font-size: .88rem;
    line-height: 1.4;
}

.eob-chev { color: var(--ink-3); flex-shrink: 0; width: 18px; height: 18px; }

/* Section label above a group */
.eob-section-title {
    font-size: .82rem;
    font-weight: 700;
    color: var(--ink-2);
    margin: 26px 0 10px;
    letter-spacing: .005em;
}
.eob-section-title:first-child,
.eob-card > .eob-section-title:first-child { margin-top: 0; }

.eob-section-head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 12px;
    margin: 26px 0 10px;
}
.eob-section-head .eob-section-title { margin: 0; }
.eob-section-head a {
    font-size: .88rem;
    font-weight: 600;
    text-decoration: none;
    color: var(--accent-press);
}

/* ============================================================
   5. Status pipeline — the signature system
   New → In Process → Work Done / Cancelled
   ============================================================ */

.eob-badge {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 4px 11px;
    border-radius: var(--r-pill);
    font-size: .76rem;
    font-weight: 700;
    letter-spacing: .005em;
    white-space: nowrap;
    flex-shrink: 0;
}
.eob-badge::before {
    content: "";
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: currentColor;
    flex-shrink: 0;
}

.eob-badge-new       { background: var(--st-new-bg);    color: var(--st-new); }
.eob-badge-process   { background: var(--st-proc-bg);   color: var(--st-proc); }
.eob-badge-done      { background: var(--st-done-bg);   color: var(--st-done); }
.eob-badge-cancelled { background: var(--st-cancel-bg); color: var(--st-cancel); }

/* Status also tints the left edge of a row, so a long list is
   scannable by colour alone without reading any labels. */
.eob-row-status { border-left: 3px solid transparent; padding-left: 15px; }
.eob-card:not(.eob-card-flush) > .eob-row-status {
    padding-left: 12px;
    margin-left: -18px;
    padding-right: 0;
}
.eob-row-new       { border-left-color: var(--st-new); }
.eob-row-process   { border-left-color: var(--st-proc); }
.eob-row-done      { border-left-color: var(--st-done); }
.eob-row-cancelled { border-left-color: var(--st-cancel); }

/* ============================================================
   6. Stats
   ============================================================ */

.eob-stats {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 10px;
    margin-bottom: 22px;
}

.eob-stat {
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--r);
    padding: 14px 10px;
    text-align: center;
    text-decoration: none;
    color: inherit;
    display: block;
}
.eob-stat-value {
    font-size: 1.55rem;
    font-weight: 700;
    line-height: 1.1;
    font-variant-numeric: tabular-nums;
    letter-spacing: -0.02em;
}
.eob-stat-label {
    font-size: .76rem;
    color: var(--ink-2);
    font-weight: 600;
    margin-top: 2px;
}
.eob-stat-new  .eob-stat-value { color: var(--st-new); }
.eob-stat-proc .eob-stat-value { color: var(--st-proc); }
.eob-stat-done .eob-stat-value { color: var(--st-done); }

/* ============================================================
   7. Forms
   ============================================================ */

.eob-field { margin-bottom: 18px; }
.eob-field:last-child { margin-bottom: 0; }

.eob-field label,
.eob-label {
    display: block;
    font-size: .88rem;
    font-weight: 600;
    color: var(--ink);
    margin-bottom: 6px;
}

.eob-input,
.eob-select,
.eob-textarea {
    width: 100%;
    min-height: var(--tap);
    padding: 12px 14px;
    font-size: 1rem;
    font-family: inherit;
    color: var(--ink);
    background: var(--surface);
    border: 1.5px solid var(--line-strong);
    border-radius: var(--r-sm);
    transition: border-color .12s ease, box-shadow .12s ease;
}
.eob-input::placeholder,
.eob-textarea::placeholder { color: var(--ink-3); }

.eob-input:focus,
.eob-select:focus,
.eob-textarea:focus {
    outline: none;
    border-color: var(--accent);
    box-shadow: 0 0 0 3px var(--accent-wash);
}

.eob-textarea { resize: vertical; min-height: 96px; line-height: 1.5; }

.eob-select {
    appearance: none;
    background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2355665F' stroke-width='2'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 13px center;
    background-size: 18px;
    padding-right: 42px;
}

.eob-input[type="file"] {
    padding: 10px 12px;
    background: var(--surface-sunk);
    border-style: dashed;
    font-size: .9rem;
}

.eob-hint {
    font-size: .82rem;
    color: var(--ink-2);
    margin-top: 6px;
    line-height: 1.45;
}

.eob-field-row { display: flex; gap: 10px; }
.eob-field-row > * { flex: 1; }
.eob-field-row .eob-cc { flex: 0 0 96px; }

/* Radio / checkbox rows sized for thumbs */
.eob-choice {
    display: flex;
    align-items: center;
    gap: 12px;
    min-height: var(--tap);
    padding: 6px 0;
    cursor: pointer;
    font-weight: 500;
}
.eob-choice input { width: 20px; height: 20px; accent-color: var(--accent); flex-shrink: 0; }
.eob-choice + .eob-choice { border-top: 1px solid var(--line); }

/* ============================================================
   8. Buttons
   ============================================================ */

.eob-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    width: 100%;
    min-height: var(--tap);
    padding: 13px 20px;
    font-size: 1rem;
    font-weight: 700;
    font-family: inherit;
    line-height: 1.2;
    border-radius: var(--r-sm);
    border: 1.5px solid transparent;
    cursor: pointer;
    text-decoration: none;
    transition: background-color .12s ease, transform .04s ease;
}
.eob-btn:active { transform: translateY(1px); }
.eob-btn svg { width: 19px; height: 19px; flex-shrink: 0; }
.eob-btn + .eob-btn { margin-top: 10px; }

.eob-btn-primary { background: var(--accent); color: #fff; }
.eob-btn-primary:active { background: var(--accent-press); }

.eob-btn-secondary {
    background: var(--surface);
    color: var(--ink);
    border-color: var(--line-strong);
}
.eob-btn-secondary:active { background: var(--surface-sunk); }

.eob-btn-danger { background: var(--danger-bg); color: var(--danger); border-color: var(--danger-line); }

.eob-btn-sm {
    width: auto;
    min-height: 40px;
    padding: 8px 15px;
    font-size: .875rem;
    border-radius: 9px;
}

.eob-btn[disabled], .eob-btn:disabled { opacity: .5; cursor: not-allowed; }

/* Side-by-side actions (Call | WhatsApp) */
.eob-btn-row { display: flex; gap: 10px; }
.eob-btn-row .eob-btn { margin-top: 0; }

/* WhatsApp gets its own recognisable colour — users look for it */
.eob-btn-wa { background: #128C7E; color: #fff; }
.eob-btn-wa:active { background: #0C6B60; }

/* ============================================================
   9. Filter chips (horizontal scroll)
   ============================================================ */

.eob-chips {
    display: flex;
    gap: 8px;
    overflow-x: auto;
    padding: 2px 18px 8px;
    margin: 0 -18px 14px;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
}
.eob-chips::-webkit-scrollbar { display: none; }

.eob-chip {
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    min-height: 40px;
    padding: 8px 16px;
    border-radius: var(--r-pill);
    background: var(--surface);
    border: 1.5px solid var(--line-strong);
    color: var(--ink);
    font-size: .89rem;
    font-weight: 600;
    text-decoration: none;
    white-space: nowrap;
}
.eob-chip.active {
    background: var(--ink);
    border-color: var(--ink);
    color: #fff;
}

/* ============================================================
   10. Alerts
   ============================================================ */

.eob-alert {
    padding: 13px 16px;
    border-radius: var(--r-sm);
    font-size: .92rem;
    line-height: 1.45;
    margin-bottom: 18px;
    border: 1px solid transparent;
}
.eob-alert div + div { margin-top: 4px; }
.eob-alert-error   { background: var(--danger-bg); color: var(--danger); border-color: var(--danger-line); }
.eob-alert-success { background: var(--ok-bg);     color: var(--ok);     border-color: var(--ok-line); }
.eob-alert-info    { background: var(--st-new-bg); color: var(--st-new); border-color: #C9D6F6; }

/* ============================================================
   11. Empty states
   ============================================================ */

.eob-empty {
    background: var(--surface);
    border: 1px dashed var(--line-strong);
    border-radius: var(--r);
    text-align: center;
    padding: 44px 24px;
    color: var(--ink-2);
}
.eob-empty p { margin: 0 0 6px; }
.eob-empty p:last-child { margin-bottom: 0; }
.eob-empty-title { font-weight: 600; color: var(--ink); }

/* ============================================================
   12. Media & thumbnails
   ============================================================ */

.eob-thumb {
    width: 58px;
    height: 58px;
    border-radius: 11px;
    object-fit: cover;
    background: var(--surface-sunk);
    border: 1px solid var(--line);
    flex-shrink: 0;
}
.eob-thumb-lg { width: 76px; height: 76px; border-radius: 14px; }
.eob-banner-img {
    width: 100%;
    height: 148px;
    object-fit: cover;
    border-radius: var(--r);
    border: 1px solid var(--line);
    display: block;
}

.eob-media-row { display: flex; gap: 13px; align-items: flex-start; }
.eob-media-row > *:nth-child(2) { flex: 1; min-width: 0; }

/* ============================================================
   13. Stars
   ============================================================ */

.eob-stars {
    color: var(--star);
    letter-spacing: 1.5px;
    font-size: 1rem;
    white-space: nowrap;
}
.eob-stars-lg { font-size: 1.35rem; }

.eob-rating-summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
}
.eob-rating-score {
    font-size: 2rem;
    font-weight: 700;
    line-height: 1;
    font-variant-numeric: tabular-nums;
    letter-spacing: -0.02em;
}

/* Review block */
.eob-review-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 6px;
}
.eob-review-foot {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-top: 10px;
}
.eob-is-hidden { opacity: .55; }

/* ============================================================
   14. Theme picker (5 themes x 10 colours)
   ============================================================ */

.eob-swatches {
    display: flex;
    flex-wrap: wrap;
    gap: 11px;
}
.eob-swatch {
    width: 42px;
    height: 42px;
    border-radius: 50%;
    cursor: pointer;
    border: 3px solid transparent;
    box-shadow: inset 0 0 0 1px rgba(0,0,0,.12);
    position: relative;
}
.eob-swatch.picked { border-color: var(--ink); }
.eob-swatch.picked::after {
    content: "";
    position: absolute;
    inset: 0;
    display: grid;
    place-items: center;
    background: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3.5' stroke-linecap='round'%3E%3Cpath d='M20 6L9 17l-5-5'/%3E%3C/svg%3E") center / 20px no-repeat;
}

.eob-theme-name {
    display: flex;
    align-items: center;
    gap: 11px;
    min-height: var(--tap);
    margin-bottom: 10px;
    cursor: pointer;
    font-weight: 700;
}
.eob-theme-name input { width: 20px; height: 20px; accent-color: var(--accent); }

/* ============================================================
   15. Misc utilities (kept deliberately few)
   ============================================================ */

.eob-row-between { display: flex; align-items: center; justify-content: space-between; gap: 14px; }
.eob-stack > * + * { margin-top: 14px; }
.eob-mt-0 { margin-top: 0; }
.eob-mb-0 { margin-bottom: 0; }

.eob-form-footer {
    text-align: center;
    margin-top: 22px;
    font-size: .93rem;
    color: var(--ink-2);
}
.eob-form-footer a { font-weight: 700; text-decoration: none; }

/* Notice strip (e.g. "not live yet") */
.eob-notice {
    background: var(--st-proc-bg);
    color: var(--st-proc);
    text-align: center;
    padding: 9px 14px;
    font-size: .86rem;
    font-weight: 600;
}

@media (prefers-reduced-motion: reduce) {
    * { transition: none !important; animation: none !important; }
}

/* ============================================================
   16. Theme picker previews
   Each miniature mirrors the real structural difference of that
   theme (corner language, hero treatment, button shape), so the
   owner can tell the five apart before committing.
   ============================================================ */

.eob-theme-block { border-width: 1.5px; }
.eob-theme-block.is-selected { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-wash); }
.eob-theme-name span { font-weight: 700; }

.eob-theme-preview {
    --pv-brand: var(--line-strong);
    border: 1px solid var(--line);
    border-radius: 10px;
    overflow: hidden;
    margin-bottom: 16px;
    background: #fff;
    height: 132px;
}
.eob-theme-preview .tp-bar { height: 20px; background: var(--surface-sunk); border-bottom: 1px solid var(--line); }
.eob-theme-preview .tp-body { padding: 10px 12px; }
.eob-theme-preview .tp-tag   { width: 54px; height: 8px; border-radius: 4px; background: var(--pv-brand); opacity: .35; margin-bottom: 7px; }
.eob-theme-preview .tp-title { width: 78%; height: 12px; border-radius: 3px; background: var(--ink); opacity: .78; margin-bottom: 9px; }
.eob-theme-preview .tp-img   { height: 40px; border-radius: 6px; background: var(--surface-sunk); margin-bottom: 9px; }
.eob-theme-preview .tp-btns  { display: flex; gap: 6px; }
.eob-theme-preview .tp-btn-a { flex: 1; height: 13px; border-radius: 4px; background: var(--pv-brand); }
.eob-theme-preview .tp-btn-b { flex: 1; height: 13px; border-radius: 4px; border: 1.5px solid var(--line-strong); }

/* 1 — Modern Minimal: square, hairline, no tag pill */
.eob-preview-1 .tp-tag   { width: 3px; height: 14px; border-radius: 0; opacity: 1; }
.eob-preview-1 .tp-title { width: 86%; }
.eob-preview-1 .tp-img,
.eob-preview-1 .tp-btn-a,
.eob-preview-1 .tp-btn-b { border-radius: 2px; }

/* 2 — Bold & Vibrant: brand fills the hero, pill buttons */
.eob-preview-2 .tp-bar   { background: var(--pv-brand); border-bottom: none; }
.eob-preview-2 .tp-body  { background: var(--pv-brand); margin: 0 0 8px; padding: 10px 12px 14px; border-radius: 0 0 14px 14px; }
.eob-preview-2 .tp-tag   { background: #fff; opacity: .45; }
.eob-preview-2 .tp-title { background: #fff; opacity: .95; height: 15px; }
.eob-preview-2 .tp-img   { background: rgba(255,255,255,.28); border-radius: 12px; }
.eob-preview-2 .tp-btn-a { background: #fff; border-radius: 999px; }
.eob-preview-2 .tp-btn-b { border-color: rgba(255,255,255,.6); border-radius: 999px; }

/* 3 — Classic Professional: ruled, square, serif-weight title */
.eob-preview-3 .tp-bar   { background: #fff; border-bottom: 2px solid var(--ink); }
.eob-preview-3 .tp-tag   { border-radius: 0; border: 1px solid var(--line-strong); background: none; height: 10px; width: 62px; opacity: 1; }
.eob-preview-3 .tp-title { height: 13px; opacity: .85; }
.eob-preview-3 .tp-img,
.eob-preview-3 .tp-btn-a,
.eob-preview-3 .tp-btn-b { border-radius: 1px; }

/* 4 — Elegant Dark */
.eob-preview-4 { background: #14171A; }
.eob-preview-4 .tp-bar   { background: #1D2126; border-bottom-color: #2A2F35; }
.eob-preview-4 .tp-title { background: #F2F5F4; opacity: .9; }
.eob-preview-4 .tp-img   { background: #1D2126; }
.eob-preview-4 .tp-btn-b { border-color: #2A2F35; }

/* 5 — Warm & Friendly */
.eob-preview-5 { background: #FFFDF8; }
.eob-preview-5 .tp-bar   { background: #F6F0E4; border-bottom-color: #E8DFCC; }
.eob-preview-5 .tp-tag   { border-radius: 999px; }
.eob-preview-5 .tp-img   { background: #F6F0E4; border-radius: 14px; }
.eob-preview-5 .tp-btn-a,
.eob-preview-5 .tp-btn-b { border-radius: 8px; }

/* ============================================================
   17. Dashboard identity
   The owner app was reading as a plain settings list. These give
   it a face: a branded greeting block, avatar initials so people
   are recognisable at a glance, and stat tiles with real weight.
   ============================================================ */

.eob-hero-block {
    background: linear-gradient(155deg, var(--accent) 0%, var(--accent-press) 100%);
    color: #fff;
    border-radius: var(--r-lg);
    padding: 20px 20px 18px;
    margin-bottom: 16px;
}
.eob-hero-greet { font-size: .88rem; opacity: .82; font-weight: 500; }
.eob-hero-name  { font-size: 1.45rem; font-weight: 700; letter-spacing: -0.025em; line-height: 1.2; margin-top: 1px; }
.eob-hero-biz   { font-size: .92rem; opacity: .85; margin-top: 3px; }

.eob-hero-status {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-top: 16px;
    padding-top: 14px;
    border-top: 1px solid rgba(255,255,255,.22);
    color: #fff;
    text-decoration: none;
}
.eob-hero-status-label { font-size: .88rem; font-weight: 600; }
.eob-hero-status-sub   { font-size: .8rem; opacity: .8; }
.eob-hero-pill {
    display: inline-flex; align-items: center; gap: 6px;
    background: rgba(255,255,255,.2);
    padding: 5px 12px;
    border-radius: var(--r-pill);
    font-size: .78rem;
    font-weight: 700;
    white-space: nowrap;
}
.eob-hero-pill::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; }

/* Avatar initials — people become scannable without reading */
.eob-avatar {
    width: 42px; height: 42px;
    border-radius: 50%;
    display: grid; place-items: center;
    font-weight: 700; font-size: .95rem;
    background: var(--accent-wash);
    color: var(--accent-press);
    flex-shrink: 0;
    letter-spacing: -0.01em;
}
.eob-avatar-1 { background: #E5EBFB; color: #1D4ED8; }
.eob-avatar-2 { background: #FBEEDA; color: #A65A08; }
.eob-avatar-3 { background: #E1F2EB; color: #0F7B5A; }
.eob-avatar-4 { background: #F3E7FB; color: #7A2E9D; }
.eob-avatar-5 { background: #FBE9E7; color: #B42318; }

.eob-list-item .eob-avatar { margin-right: 2px; }

/* Stat tiles with more presence */
.eob-stat {
    padding: 16px 10px;
    border-width: 1.5px;
    position: relative;
    overflow: hidden;
}
.eob-stat::after {
    content: "";
    position: absolute;
    left: 0; right: 0; top: 0;
    height: 3px;
    background: var(--line);
}
.eob-stat-new::after  { background: var(--st-new); }
.eob-stat-proc::after { background: var(--st-proc); }
.eob-stat-done::after { background: var(--st-done); }

/* Grouped nav card gets a leading icon slot */
.eob-nav-icon {
    width: 38px; height: 38px;
    border-radius: 10px;
    display: grid; place-items: center;
    background: var(--surface-sunk);
    color: var(--ink-2);
    flex-shrink: 0;
}
.eob-nav-icon svg { width: 19px; height: 19px; }

/* Product rows expand in place to edit, so the list stays the list */
.eob-product-row summary {
    list-style: none;
    cursor: pointer;
    align-items: center;
}
.eob-product-row summary::-webkit-details-marker { display: none; }
.eob-product-row summary > div { flex: 1; min-width: 0; }
.eob-edit-hint { flex-shrink: 0; font-weight: 600; color: var(--accent-press); }
.eob-product-row[open] summary { margin-bottom: 16px; padding-bottom: 14px; border-bottom: 1px solid var(--line); }
.eob-product-editor { margin-bottom: 12px; }

/* ============================================================
   18. Page header with a primary action  (Shopify pattern)
   Title, one line of context, and the single most useful action
   for that screen — so the main thing is never buried in a list.
   ============================================================ */

.eob-ph {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 14px;
    margin-bottom: 18px;
}
.eob-ph-text { min-width: 0; }
.eob-ph h1 { margin: 0 0 2px; font-size: 1.5rem; }
.eob-ph p  { margin: 0; color: var(--ink-2); font-size: .92rem; }
.eob-ph .eob-btn { width: auto; flex-shrink: 0; }

/* ============================================================
   19. Filter tabs carrying counts  (WooCommerce pattern)
   A count next to each label turns the filter row into a status
   summary — you can see there are 3 new jobs without tapping.
   ============================================================ */

.eob-chip-count {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 20px;
    height: 20px;
    padding: 0 6px;
    margin-left: 7px;
    border-radius: var(--r-pill);
    background: var(--surface-sunk);
    color: var(--ink-2);
    font-size: .74rem;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
}
.eob-chip.active .eob-chip-count { background: rgba(255,255,255,.22); color: #fff; }

/* ============================================================
   20. Usage meter  (Pabbly / Wati pattern)
   Plan limits are invisible until you hit them, which is a bad
   surprise. This shows the ceiling before it is reached.
   ============================================================ */

.eob-meter { margin-top: 12px; }
.eob-meter-head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 7px;
    font-size: .88rem;
}
.eob-meter-label { font-weight: 600; }
.eob-meter-value { color: var(--ink-2); font-variant-numeric: tabular-nums; }
.eob-meter-track {
    height: 8px;
    border-radius: var(--r-pill);
    background: var(--surface-sunk);
    overflow: hidden;
}
.eob-meter-fill {
    height: 100%;
    border-radius: var(--r-pill);
    background: var(--accent);
    transition: width .3s ease;
}
.eob-meter-warn .eob-meter-fill { background: var(--st-proc); }
.eob-meter-full .eob-meter-fill { background: var(--danger); }
.eob-meter-note { font-size: .82rem; color: var(--ink-2); margin-top: 7px; }

/* ============================================================
   21. Empty states that offer the next step  (Shopify pattern)
   An empty screen should propose an action, not just report that
   there is nothing here.
   ============================================================ */

.eob-empty .eob-btn { width: auto; margin-top: 16px; }
.eob-empty-icon {
    width: 52px; height: 52px;
    border-radius: 14px;
    background: var(--surface-sunk);
    color: var(--ink-3);
    display: grid; place-items: center;
    margin: 0 auto 14px;
}
.eob-empty-icon svg { width: 24px; height: 24px; }

/* ============================================================
   22. Pagination  (WooCommerce pattern)
   ============================================================ */

.eob-pager {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-top: 16px;
}
.eob-pager-info { font-size: .86rem; color: var(--ink-2); font-variant-numeric: tabular-nums; }
.eob-pager-links { display: flex; gap: 8px; }
.eob-pager-links a,
.eob-pager-links span {
    min-width: 40px;
    min-height: 40px;
    padding: 8px 14px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--r-sm);
    border: 1.5px solid var(--line-strong);
    background: var(--surface);
    color: var(--ink);
    font-size: .88rem;
    font-weight: 600;
    text-decoration: none;
}
.eob-pager-links span { opacity: .4; }

/* ============================================================
   23. Reference number
   Gives every enquiry something the owner and the customer can
   both quote on the phone.
   ============================================================ */

.eob-ref {
    display: inline-flex;
    align-items: center;
    padding: 3px 10px;
    border-radius: 7px;
    background: var(--surface-sunk);
    color: var(--ink-2);
    font-size: .78rem;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    letter-spacing: .01em;
}

/* ============================================================
   24. Status history timeline
   Completed work is a fact that stays on the record. Later label
   changes are events that stack underneath it, so nothing that
   was already entered can be hidden by a later edit.
   ============================================================ */

.eob-timeline { position: relative; padding-left: 22px; }
.eob-timeline::before {
    content: "";
    position: absolute;
    left: 5px; top: 6px; bottom: 6px;
    width: 2px;
    background: var(--line);
    border-radius: 2px;
}
.eob-tl-item { position: relative; padding: 0 0 16px; }
.eob-tl-item:last-child { padding-bottom: 0; }
.eob-tl-item::before {
    content: "";
    position: absolute;
    left: -21px; top: 6px;
    width: 12px; height: 12px;
    border-radius: 50%;
    background: var(--surface);
    border: 2.5px solid var(--line-strong);
}
.eob-tl-new::before       { border-color: var(--st-new); }
.eob-tl-in_process::before{ border-color: var(--st-proc); }
.eob-tl-work_done::before { border-color: var(--st-done); background: var(--st-done); }
.eob-tl-cancelled::before { border-color: var(--st-cancel); }

.eob-tl-title { font-weight: 600; font-size: .93rem; }
.eob-tl-time  { font-size: .8rem; color: var(--ink-2); font-variant-numeric: tabular-nums; }
.eob-tl-note  { font-size: .89rem; color: var(--ink-2); margin-top: 4px; }

/* A record that must not be hidden by later edits */
.eob-card-locked { border-color: var(--st-done); border-width: 1.5px; }

/* ============================================================
   25. Expandable job rows on the customer screen
   An owner taking a repeat order by phone works from the customer,
   not the enquiry list, so each past job opens in place with the
   same controls the enquiry screen has.
   ============================================================ */

.eob-job-row { padding: 0; overflow: hidden; }
.eob-job-row summary { list-style: none; cursor: pointer; }
.eob-job-row summary::-webkit-details-marker { display: none; }
.eob-job-summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 15px 18px;
    min-height: var(--tap);
}
.eob-job-row[open] .eob-job-summary { border-bottom: 1px solid var(--line); }
.eob-job-body { padding: 16px 18px 18px; }
.eob-job-body .eob-section-title { margin-top: 18px; }

/* ============================================================
   26. City typeahead + search-result preview
   The owner is choosing a value that search engines will read, so
   the screen shows the resulting title and keywords as they type.
   ============================================================ */

.eob-city-field { position: relative; }

.eob-suggest {
    display: none;
    position: absolute;
    left: 0; right: 0;
    top: calc(100% - 22px);
    z-index: 20;
    background: var(--surface);
    border: 1.5px solid var(--line-strong);
    border-radius: var(--r-sm);
    box-shadow: var(--lift-up);
    overflow: hidden;
    max-height: 288px;
    overflow-y: auto;
}
.eob-suggest.open { display: block; }

.eob-suggest-item {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 12px;
    width: 100%;
    min-height: var(--tap);
    padding: 11px 14px;
    background: none;
    border: none;
    border-bottom: 1px solid var(--line);
    text-align: left;
    font-family: inherit;
    font-size: .95rem;
    color: var(--ink);
    cursor: pointer;
}
.eob-suggest-item:last-child { border-bottom: none; }
.eob-suggest-item:hover,
.eob-suggest-item:focus { background: var(--accent-wash); }
.eob-suggest-item span { font-size: .8rem; color: var(--ink-2); flex-shrink: 0; }

/* Mock search result, so the SEO effect is visible before saving */
.eob-seo-preview {
    background: var(--surface-sunk);
    border-radius: var(--r-sm);
    padding: 14px 16px;
    margin-bottom: 12px;
}
.eob-seo-title { color: #1A0DAB; font-size: 1.02rem; font-weight: 600; line-height: 1.35; }
.eob-seo-url   { color: #006621; font-size: .8rem; margin: 3px 0 5px; }
.eob-seo-desc  { color: var(--ink-2); font-size: .86rem; line-height: 1.45; }

/* ============================================================
   27. Logo shape
   A wide logo forced into a square box gets cropped or squashed, so
   the owner declares the shape and both the preview and the live
   header respect it.
   ============================================================ */

.eob-logo-preview {
    display: block;
    border: 1px solid var(--line);
    border-radius: 12px;
    background: var(--surface-sunk);
}
.eob-logo-square    { width: 76px; height: 76px; object-fit: cover; }
.eob-logo-rectangle { width: 100%; max-width: 240px; height: 68px; object-fit: contain; padding: 6px 10px; }

.eob-shape-picker { display: flex; gap: 12px; }
.eob-shape-option {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 9px;
    padding: 16px 12px;
    border: 1.5px solid var(--line-strong);
    border-radius: var(--r);
    cursor: pointer;
    background: var(--surface);
}
.eob-shape-option.picked { border-color: var(--accent); background: var(--accent-wash); }
.eob-shape-option input { position: absolute; opacity: 0; pointer-events: none; }
.eob-shape-demo { background: var(--ink-3); border-radius: 4px; display: block; }
.eob-shape-demo-square { width: 40px; height: 40px; }
.eob-shape-demo-rect   { width: 68px; height: 26px; margin: 7px 0; }
.eob-shape-label { font-size: .88rem; font-weight: 600; }

/* Bill rows carry two actions, so they are a block rather than a link */
.eob-bill-row { padding: 14px 0; border-bottom: 1px solid var(--line); }
.eob-bill-row:last-child { border-bottom: none; padding-bottom: 0; }
.eob-bill-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; margin-bottom: 11px; }
.eob-bill-row .eob-btn-row .eob-btn { flex: 1; }

/* Fixed +91 affix on owner-side phone fields */
.eob-phone-input { display: flex; align-items: stretch; }
.eob-phone-cc {
    display: flex; align-items: center;
    padding: 0 13px;
    background: var(--surface-sunk);
    border: 1.5px solid var(--line-strong);
    border-right: none;
    border-radius: var(--r-sm) 0 0 var(--r-sm);
    color: var(--ink-2);
    font-weight: 600;
}
.eob-phone-input .eob-input { border-radius: 0 var(--r-sm) var(--r-sm) 0; }

/* ============================================================
   28. Status stepper
   A dropdown labelled "change label" made the pipeline invisible:
   you could not see where a job stood without opening a select.
   The stepper shows the whole path and where this job is on it,
   and moving it is one tap.
   ============================================================ */

.eob-stepper { display: flex; gap: 6px; margin-bottom: 4px; }
.eob-step {
    flex: 1;
    border: none;
    background: var(--surface-sunk);
    color: var(--ink-2);
    font-family: inherit;
    font-size: .78rem;
    font-weight: 700;
    padding: 9px 4px;
    cursor: pointer;
    border-radius: 8px;
    line-height: 1.25;
}
.eob-step:first-child { border-radius: var(--r-sm) 8px 8px var(--r-sm); }
.eob-step:last-child  { border-radius: 8px var(--r-sm) var(--r-sm) 8px; }
.eob-step-current { color: #fff; }
.eob-step-new.eob-step-current       { background: var(--st-new); }
.eob-step-process.eob-step-current   { background: var(--st-proc); }
.eob-step-done.eob-step-current      { background: var(--st-done); }
.eob-step-cancelled.eob-step-current { background: var(--st-cancel); }
.eob-step-done-past { background: var(--st-done-bg); color: var(--st-done); }

.eob-step-hint { font-size: .8rem; color: var(--ink-2); margin-top: 10px; }


/* Money summary line */
.eob-money-row {
    display: flex; align-items: baseline; justify-content: space-between;
    gap: 12px; padding: 9px 0; border-bottom: 1px solid var(--line);
}
.eob-money-row:last-of-type { border-bottom: none; }
.eob-money-total {
    display: flex; align-items: baseline; justify-content: space-between;
    gap: 12px; padding-top: 12px; margin-top: 4px; border-top: 2px solid var(--line-strong);
    font-weight: 700;
}

/* ============================================================
   29. Toast
   A save confirmation should not push the page down and then sit
   there. It appears, says what happened, and leaves.
   ============================================================ */

.eob-toast {
    position: fixed;
    left: 50%;
    bottom: calc(84px + env(safe-area-inset-bottom));
    transform: translate(-50%, 20px);
    z-index: 60;
    display: flex;
    align-items: center;
    gap: 10px;
    max-width: min(92vw, 420px);
    padding: 13px 18px;
    border-radius: var(--r);
    background: var(--ink);
    color: #fff;
    font-size: .92rem;
    font-weight: 600;
    line-height: 1.4;
    box-shadow: var(--lift-up);
    opacity: 0;
    transition: opacity .22s ease, transform .22s ease;
    pointer-events: none;
}
.eob-toast.show { opacity: 1; transform: translate(-50%, 0); }
.eob-toast svg { width: 19px; height: 19px; flex-shrink: 0; color: #7BD6B0; }

/* ============================================================
   30. Status chips
   Four states shown side by side. Picking one reveals a note box
   and an explicit Update, so a mis-tap never changes the job.
   ============================================================ */

.eob-status-chips { display: flex; gap: 7px; flex-wrap: wrap; }
.eob-status-chip {
    flex: 1 1 calc(50% - 4px);
    min-height: 46px;
    border: 1.5px solid var(--line-strong);
    background: var(--surface);
    color: var(--ink-2);
    font-family: inherit;
    font-size: .87rem;
    font-weight: 700;
    border-radius: var(--r-sm);
    cursor: pointer;
    padding: 10px 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
}
.eob-status-chip::before {
    content: "";
    width: 8px; height: 8px;
    border-radius: 50%;
    background: currentColor;
    opacity: .45;
    flex-shrink: 0;
}
.eob-status-chip[data-status="new"]        { color: var(--st-new); }
.eob-status-chip[data-status="in_process"] { color: var(--st-proc); }
.eob-status-chip[data-status="work_done"]  { color: var(--st-done); }
.eob-status-chip[data-status="cancelled"]  { color: var(--st-cancel); }

.eob-status-chip.is-current {
    border-color: currentColor;
    background: var(--surface-sunk);
}
.eob-status-chip.is-picked {
    color: #fff;
    border-color: transparent;
}
.eob-status-chip.is-picked::before { opacity: 1; background: #fff; }
.eob-status-chip[data-status="new"].is-picked        { background: var(--st-new); }
.eob-status-chip[data-status="in_process"].is-picked { background: var(--st-proc); }
.eob-status-chip[data-status="work_done"].is-picked  { background: var(--st-done); }
.eob-status-chip[data-status="cancelled"].is-picked  { background: var(--st-cancel); }

.eob-status-current-note {
    font-size: .84rem;
    color: var(--ink-2);
    margin-top: 12px;
}

/* DNS values the owner has to copy into their registrar — spaced out and
   in tabular figures so they are easy to read off a phone. */
.eob-dns-row {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 14px;
    padding: 9px 0;
    border-bottom: 1px solid var(--line);
    font-size: .92rem;
}
.eob-dns-row:last-of-type { border-bottom: none; }
.eob-dns-row span:first-child { color: var(--ink-2); }
.eob-dns-row span:last-child { font-weight: 700; font-variant-numeric: tabular-nums; }

/* ============================================================
   31. "Update status here" header
   The section used to be a quiet grey label the same size as every
   other one, so the main action on the screen did not read as the
   main action.
   ============================================================ */

.eob-update-head {
    display: flex;
    align-items: center;
    gap: 11px;
    margin-bottom: 16px;
}
.eob-update-icon {
    width: 38px; height: 38px;
    border-radius: 11px;
    background: var(--accent-wash);
    color: var(--accent-press);
    display: grid; place-items: center;
    flex-shrink: 0;
}
.eob-update-icon svg { width: 20px; height: 20px; }
.eob-update-title {
    margin: 0;
    font-size: 1.18rem;
    font-weight: 700;
    letter-spacing: -0.02em;
}

/* Only the panel belonging to the chosen chip is shown, so there is never
   more than one form or one primary button on screen at a time. */
.eob-status-panel { display: none; margin-top: 18px; }
.eob-status-panel.open { display: block; }

/* A settled order gets the same header treatment, in the done colour */
.eob-update-icon-done { background: var(--st-done-bg); color: var(--st-done); }

/* ============================================================
   32. Connection check result
   The owner needs to know which of three different problems they
   have, in their own words, without phoning anyone.
   ============================================================ */

.eob-check {
    border-radius: var(--r-sm);
    padding: 14px 16px;
    font-size: .93rem;
    line-height: 1.55;
    border: 1.5px solid;
}
.eob-check strong { display: block; margin-bottom: 3px; }
.eob-check-ok   { background: var(--st-done-bg);   border-color: #BEE0D3; color: #14543E; }
.eob-check-warn { background: var(--st-proc-bg);   border-color: #F0D9B0; color: #7A4708; }
.eob-check-bad  { background: var(--danger-bg);    border-color: #F1C9C4; color: #8C1D18; }
.eob-check .eob-num { font-weight: 700; }