/* style.css — all styling lives here, never inline. Colours and text sizes are
   defined once in :root, so restyling the whole panel is a one-place edit.

   Brand: WEBBOS — web design & development studio.
   Black + orange accent on warm white, restrained and precise. */

@import url('https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@500;700&family=Inter:wght@400;500;600&display=swap');
@import url('components.css?v=20260726actionalign');

:root {
    /* colors — WEBBOS brand */
    --color-bg:             #faf9f8; /* warm white page background — deliberately a shade off pure
                                         white (unlike the marketing site's flat #fff) so cards/panels
                                         still read as "lifted" against it; --color-surface below is
                                         the exact marketing-site white */
    --color-text:           #171512; /* near-black — exact match to the marketing site's --ink */
    --color-muted:          #6f6a63; /* warm slate — exact match to the marketing site's --muted */
    --color-faint:          #afa69d; /* lighter warm slate — placeholders, faint text */
    --color-accent:         #ff5a1f; /* orange — exact match to the marketing site's --orange */
    --color-accent-soft:    #e04510; /* deeper orange — exact match to the marketing site's --orange-dark */
    --color-border:         #e8e3db; /* exact match to the marketing site's --border */
    --color-line:           #f2f0ef; /* hairline dividers, lighter than border */
    --color-surface:        #ffffff; /* cards/panels — exact match to the marketing site's --white */
    --color-surface-border: #e8e3db;
    --color-success-bg:     #ecfdf5;
    --color-success-border: #10b981;
    --color-error-bg:       #fef2f2;
    --color-error-border:   #dc2626;
    --color-tag-bg:         #eae8e6;
    --color-badge-bg:       #fef4f0;
    --color-on-accent:      #ffffff;

    /* text */
    --font-base:    'Inter', system-ui, sans-serif;       /* body / UI */
    --font-display: 'Space Grotesk', var(--font-base);    /* headings, logo, big numbers */
    --font-mono:    ui-monospace, "Courier New", monospace;
    --text-h1:    1.4rem;
    --text-h2:    1.05rem;
    --text-sm:    0.9rem;
    --text-xs:    0.75rem;

    /* motion — same strong, intentional curves as the marketing site
       (see webbos-site/assets/css/style.css): ease-out for entries/UI
       feedback, ease-in-out for on-screen movement. CSS's built-in eases
       read as weak/sluggish by comparison. */
    --ease:         cubic-bezier(0.23, 1, 0.32, 1);
    --ease-in-out:  cubic-bezier(0.77, 0, 0.175, 1);
    --radius-pill:  999px;
}

html, body {
    min-height: 100%;
    margin: 0;
}

body {
    font-family: var(--font-base);
    color: var(--color-text);
    background: var(--color-bg);
    padding: 0;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
}

h1, h2 {
    font-family: var(--font-display);
    letter-spacing: -0.01em;
}

h1 { font-size: var(--text-h1); }
.edit-icon-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.9rem;
    height: 1.9rem;
    margin-top: 0;
    margin-left: .3rem;
    border: 0;
    background: none;
    color: var(--color-muted);
    font-size: 1rem;
    border-radius: 6px;
    cursor: pointer;
    vertical-align: middle;
}
.edit-icon-btn:hover { background: var(--color-line); color: var(--color-text); }

h2 {
    font-size: var(--text-h2);
    margin-top: 2rem;
    padding-top: 1rem;
    border-top: 1px solid var(--color-line);
}

.muted  { color: var(--color-muted); font-size: var(--text-sm); }
.empty  { color: var(--color-faint); }

.backlink { color: var(--color-accent); text-decoration: none; font-size: var(--text-sm); }
.backlink:hover { text-decoration: underline; }

/* messages */
.flash {
    background: var(--color-success-bg);
    border: 1px solid var(--color-success-border);
    padding: .6rem .8rem;
    border-radius: 6px;
}
.error {
    background: var(--color-error-bg);
    border: 1px solid var(--color-error-border);
    padding: .6rem .8rem;
    border-radius: 6px;
}

/* forms */
label {
    display: block;
    margin: .7rem 0 .2rem;
    font-size: var(--text-sm);
}
input, select, textarea {
    padding: .45rem;
    width: 100%;
    box-sizing: border-box;
    border: 1px solid var(--color-border);
    border-radius: 5px;
    font-family: inherit;
    font-size: 1rem;
}
textarea { resize: vertical; }
button, a.btn, label.btn {
    display: inline-block;
    margin-top: 1rem;
    padding: .5rem 1.1rem;
    background: var(--color-accent);
    color: var(--color-on-accent);
    border: 0;
    border-radius: var(--radius-pill);
    cursor: pointer;
    text-decoration: none;
    font: inherit;
    font-weight: 600;
    transition: transform 160ms var(--ease), background-color .2s var(--ease), color .2s var(--ease), box-shadow .2s var(--ease);
}
button:active, a.btn:active, label.btn:active { transform: scale(0.97); transition-duration: 100ms; }
@media (hover: hover) and (pointer: fine) {
    button:hover, a.btn:hover, label.btn:hover { background: var(--color-text); color: var(--color-surface); box-shadow: 0 10px 20px -10px rgba(255, 203, 31, .4); }
}

/* the {{token}} hint next to a field label */
.token {
    font-family: var(--font-mono);
    font-size: var(--text-xs);
    color: var(--color-muted);
}

/* top navigation (shown on every logged-in page via src/nav.php) */
.topnav {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: .6rem;
    padding-bottom: .8rem;
    margin-bottom: 1.4rem;
    border-bottom: 1px solid var(--color-line);
    font-size: var(--text-sm);
}
.topnav-left, .topnav-right {
    display: flex;
    align-items: center;
    gap: 1rem;
}
.topnav a { color: var(--color-accent); text-decoration: none; }
.topnav a:hover { text-decoration: underline; }
.topnav .brand { font-weight: 700; color: var(--color-text); }
.topnav .brand:hover { text-decoration: none; }

/* small grey hint text next to a label, e.g. "(9 digits)" */
.hint {
    font-weight: 400;
    font-size: var(--text-xs);
    color: var(--color-faint);
}

/* section heading inside a long form (Company / Contact person / Address) */
h2.form-section {
    font-size: var(--text-sm);
    text-transform: uppercase;
    letter-spacing: .04em;
    color: var(--color-muted);
    border-top: 1px solid var(--color-surface-border);
    margin-top: 1.2rem;
    padding-top: 1rem;
}
form h2.form-section:first-child { border-top: 0; margin-top: 0; padding-top: 0; }

.card-main { display: flex; flex-direction: column; gap: .1rem; }

.block-item-actions { display: flex; gap: .3rem; }
.block-item-actions form { margin: 0; background: none; border: 0; padding: 0; }

/* contact form field builder (submissions.php) — a real aligned grid,
   with each field's controls split across multiple <form>s (save vs.
   move vs. delete are separate POSTs) that still line up as one row via
   display:contents, so the form boundaries are invisible to the grid. */
.fields-table {
    border: 1px solid var(--color-surface-border);
    border-radius: 8px;
    overflow: hidden;
    margin-bottom: 1.5rem;
}
.fields-table-row {
    display: grid;
    grid-template-columns: 1.6fr 110px 1.4fr 80px 110px 60px 34px 34px 70px;
    align-items: center;
    gap: .6rem;
    padding: .6rem .8rem;
    border-bottom: 1px solid var(--color-line);
    background: var(--color-surface);
}
.fields-table-row:last-child { border-bottom: 0; }
.fields-table-header {
    background: var(--color-badge-bg);
    font-size: var(--text-xs);
    font-weight: 600;
    color: var(--color-muted);
    text-transform: uppercase;
    letter-spacing: .02em;
    padding: .5rem .8rem;
}
.fields-table-row .field-row-form { display: contents; }
.fields-table-row input[type="text"],
.fields-table-row select {
    margin: 0;
    width: 100%;
}
.fields-table-row input[disabled] {
    background: var(--color-line);
    cursor: not-allowed;
}
.fields-table-required {
    display: flex;
    justify-content: center;
    margin: 0;
}
.fields-table-required input { width: auto; margin: 0; }
.fields-table-row .token { justify-self: start; }
.fields-table-row button { margin: 0; white-space: nowrap; }
.fields-table-add .btn-icon { display: none; } /* no reorder/delete on the add-row */

@media (max-width: 960px) {
    .fields-table-row {
        grid-template-columns: 1fr;
        gap: .5rem;
    }
    .fields-table-header { display: none; }
    .fields-table-required { justify-content: flex-start; gap: .5rem; }
    .fields-table-required::after { content: "Required"; font-size: var(--text-sm); }
}

.btn-icon {
    margin: 0;
    padding: .2rem .55rem;
    background: var(--color-badge-bg);
    color: var(--color-text);
    border: 1px solid var(--color-surface-border);
    border-radius: 5px;
    cursor: pointer;
    font-size: var(--text-sm);
}
.btn-icon:hover { background: var(--color-line); }
.btn-icon:disabled { opacity: .35; cursor: default; }
.btn-icon.btn-danger { color: var(--color-error-border); }
.mono { font-family: var(--font-mono); font-size: .85rem; }

/* code editor (template-edit.php) */
.code-editor {
    font-family: var(--font-mono);
    font-size: .85rem;
    line-height: 1.5;
    resize: vertical;
    tab-size: 4;
}

/* apply-from-library / save-to-library row (template-edit.php) */
/* layouts.php: single "+" button below the file list, replacing the old
   two-big-cards setup. Click reveals a small menu with both actions —
   one-click "New layout", or type a name for "New file". */
.add-file-trigger {
    position: relative;
    margin-bottom: 1.5rem;
}
.btn-add-circle {
    width: 36px;
    height: 36px;
    margin: 0;
    padding: 0;
    border-radius: 999px;
    background: var(--color-accent);
    color: var(--color-on-accent);
    border: 0;
    font-size: 1.3rem;
    line-height: 1;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
}
.btn-add-circle:hover { background: var(--color-accent-soft); }
.add-file-menu {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    margin-top: .5rem;
    background: var(--color-surface);
    border: 1px solid var(--color-surface-border);
    border-radius: 10px;
    box-shadow: 0 12px 28px rgba(61, 51, 46, .18);
    padding: .5rem;
    min-width: 220px;
    z-index: 30;
}
.add-file-menu.open { display: block; }
.add-file-menu form { margin: 0; background: none; border: 0; padding: 0; }
.add-file-menu-item {
    display: block;
    width: 100%;
    text-align: left;
    background: none;
    border: 0;
    padding: .55rem .6rem;
    border-radius: 6px;
    font: inherit;
    color: var(--color-text);
    cursor: pointer;
}
.add-file-menu-item:hover { background: var(--color-line); }

/* layouts.php: Files list (left) + Publishing panel (right). Both columns
   share the same "plain heading/description, then a boxed area below" shape. */
.files-two-col {
    display: flex;
    align-items: flex-start;
    gap: 2rem;
}
.revision-preview {
    border: 1px solid var(--color-surface-border);
    border-radius: 8px;
    padding: 1rem 1.2rem;
    background: var(--color-surface);
    max-height: 60vh;
    overflow-y: auto;
}
.files-main-col {
    flex: 2;
    min-width: 0;
}
.files-side-col {
    flex: 1;
    min-width: 0;
}
.publish-box {
    background: var(--color-surface);
    border: 1px solid var(--color-surface-border);
    border-radius: 10px;
    padding: 1.3rem 1.5rem;
    margin-top: 1rem;
    position: sticky;
    top: 1.5rem;
}
.publish-box p:first-child { margin-top: 0; }
.publish-box form { margin-top: 0; }
@media (max-width: 1000px) {
    .files-two-col { flex-direction: column; }
    .publish-box { position: static; }
}

/* checkbox rows (layout "is default" etc.) */
.checkbox-label {
    display: flex;
    align-items: center;
    gap: .5rem;
    font-size: var(--text-sm);
    margin: .7rem 0;
}
.checkbox-label input { width: auto; }

/* inline layout picker on page-edit.php */
.layout-picker {
    display: flex;
    align-items: center;
    gap: .6rem;
    background: none;
    border: 0;
    padding: 0;
    margin: 0 0 1.2rem;
}

.live-preview-frame {
    width: 100%;
    height: 480px;
    border: 0;
    display: block;
    background: #fff;
}
.layout-picker label { margin: 0; }
.layout-picker select { width: auto; }
.layout-picker button { margin: 0; padding: .4rem .8rem; }

.CodeMirror {
    border: 1px solid var(--color-border);
    border-radius: 0 0 5px 5px;
    font-family: var(--font-mono);
    font-size: .9rem;
    min-height: 200px;
    height: auto;
}
#layout-tab-panels {
    border: 1px solid var(--color-surface-border);
    border-radius: 0 8px 8px 8px;
    padding: 1rem;
    margin-bottom: 1rem;
}
/* full-page single-file code editor (layout-edit.php, site-css-edit.php, etc.) */
html, body.editor-page {
    height: 100%;
    margin: 0;
}
body.editor-page {
    display: flex;
    flex-direction: column;
    max-width: none;
    padding: 0;
}
/* The form wraps the topbar/meta/editor so they all submit together, but it
   needs to be a REAL flex participant (not display:contents — that isn't
   reliably supported on <form> across browsers) so it can grow to fill
   the screen instead of shrinking to its content's height. */
.editor-page form.editor-form {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    min-height: 0;
}
.editor-topbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: .7rem 1.2rem;
    border-bottom: 1px solid var(--color-line);
    background: var(--color-surface);
    flex: 0 0 auto;
}
.editor-topbar-left {
    display: flex;
    align-items: center;
    gap: .9rem;
    min-width: 0;
}
.editor-topbar-right {
    display: flex;
    align-items: center;
    gap: .6rem;
    flex: 0 0 auto;
}
.editor-topbar .backlink { white-space: nowrap; }
.editor-filename {
    font-family: var(--font-mono);
    font-weight: 600;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.editor-topbar button { margin: 0; }
.editor-meta-fields {
    padding: .8rem 1.2rem;
    border-bottom: 1px solid var(--color-line);
    background: var(--color-surface);
    flex: 0 0 auto;
}
.editor-meta-fields label { margin-top: 0; }
.rename-row {
    display: flex;
    gap: .6rem;
    align-items: stretch;
}
.rename-row input { flex: 1 1 auto; }
.rename-row button { margin: 0; flex: 0 0 auto; }
.editor-body {
    flex: 1 1 auto;
    min-height: 0;
    display: flex;
    flex-direction: column;
}
.editor-flash, .editor-error {
    margin: 0;
    padding: .5rem 1.2rem;
    font-size: var(--text-sm);
    flex: 0 0 auto;
}
.editor-flash { background: var(--color-success-bg); color: var(--color-text); }
.editor-error { background: var(--color-error-bg); color: var(--color-text); }

/* CodeMirror (replaces .code-editor textareas — see admin.js). Fills the
   remaining vertical space via flex-grow rather than a height percentage,
   which is the reliable way to make it fill a flex column. */
.editor-body .CodeMirror {
    flex: 1 1 auto;
    min-height: 0;
    width: 100%;
    border: 0;
    border-radius: 0;
    font-family: var(--font-mono);
    font-size: .9rem;
}

/* file browser rows (layouts.php, template-library-edit.php) */
.file-list {
    list-style: none;
    margin: 0 0 1.5rem;
    padding: 0;
    border: 1px solid var(--color-surface-border);
    border-radius: 8px;
    overflow: hidden;
    min-height: 4.5rem;
}
.file-list li.empty {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 4.5rem;
    color: var(--color-muted);
    text-align: center;
    padding: 1rem;
}
.file-list li {
    display: flex;
    align-items: stretch;
    border-bottom: 1px solid var(--color-line);
}
.file-list li:last-child { border-bottom: 0; }
.file-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .6rem;
    padding: .7rem 1rem;
    text-decoration: none;
    color: var(--color-text);
    background: var(--color-surface);
    flex: 1 1 auto;
    min-width: 0;
}
.file-row:hover { background: var(--color-line); }
.file-row-name {
    display: flex;
    align-items: center;
    gap: .5rem;
    font-family: var(--font-mono);
    font-size: .92rem;
}
.file-row-icon { color: var(--color-muted); }
.file-row-actions {
    display: flex;
    align-items: center;
    gap: .3rem;
    padding: 0 .8rem;
    background: var(--color-surface);
    flex: 0 0 auto;
}
.file-row-actions form { margin: 0; background: none; border: 0; padding: 0; }

/* file-list selection (click a row, press Delete) + drag-and-drop upload */
.file-list[data-file-list] li[data-file-row] { cursor: default; outline: none; }
.file-list li[data-file-row].selected {
    background: rgba(247, 115, 58, 0.1);
    box-shadow: inset 3px 0 0 var(--color-accent);
}
.file-list li[data-file-row].selected .file-row { background: transparent; }
.file-list[data-dropzone] {
    transition: background 120ms ease, box-shadow 120ms ease;
}
.file-list[data-dropzone].drag-over {
    background: rgba(247, 115, 58, 0.1);
    box-shadow: inset 0 0 0 2px var(--color-accent);
}
.file-list li[data-folder-drop-target].drop-target-hover,
.breadcrumbs a[data-folder-drop-target].drop-target-hover {
    background: rgba(247, 115, 58, 0.16);
    box-shadow: inset 0 0 0 2px var(--color-accent);
}
.breadcrumbs {
    margin: 0 0 .8rem;
    font-size: .9rem;
    color: var(--color-muted);
}
.breadcrumbs a { color: var(--color-accent); text-decoration: none; }
.breadcrumbs a:hover { text-decoration: underline; }
.breadcrumbs a:last-child { color: var(--color-text); font-weight: 600; pointer-events: none; text-decoration: none; }
.add-file-menu-divider {
    height: 1px;
    background: var(--color-line);
    margin: .6rem 0;
}
.add-file-menu-upload-link {
    display: block;
    padding: .3rem .6rem;
    font-size: .85rem;
    color: var(--color-muted);
    text-decoration: underline;
    cursor: pointer;
}
.add-file-menu-upload-link:hover { color: var(--color-accent); }

.file-row-rename-input {
    font: inherit;
    font-family: var(--font-mono);
    font-size: .92rem;
    padding: .1rem .3rem;
    border: 1px solid var(--color-accent);
    border-radius: 4px;
    min-width: 12rem;
}

.file-list li[data-file-row].cut-pending {
    opacity: .45;
}

.file-context-menu {
    display: none;
    position: fixed;
    z-index: 200;
    min-width: 180px;
    background: var(--color-surface);
    border: 1px solid var(--color-surface-border);
    border-radius: 8px;
    box-shadow: 0 12px 28px rgba(61, 51, 46, .18);
    padding: .3rem;
}
.file-context-menu.open { display: block; }
.file-context-menu-item {
    display: block;
    width: 100%;
    text-align: left;
    background: none;
    border: 0;
    padding: .5rem .6rem;
    border-radius: 6px;
    font: inherit;
    font-size: .9rem;
    color: var(--color-text);
    cursor: pointer;
}
.file-context-menu-item:hover { background: var(--color-line); }
.file-context-menu-item.danger { color: #b91c1c; }
.file-context-menu-item.danger:hover { background: #fee2e2; }

/* login page — logo top-left, "Log in" form centered in the rest of the page */
body.login-page {
    display: flex;
    flex-direction: column;
    height: 100vh;
    margin: 0;
    max-width: none;
    padding: 0;
    background: var(--color-bg);
}
.login-header {
    padding: 1.6rem 2rem;
    flex: 0 0 auto;
}
.login-center {
    flex: 1 1 auto;
    display: flex;
    align-items: center;
    justify-content: center;
}
.login-box {
    width: 100%;
    max-width: 320px;
    padding: 0 1rem;
    text-align: center;
}
.login-box h1 {
    font-size: 1.5rem;
    margin-bottom: 1.5rem;
    color: var(--color-text);
}

/* show/hide password toggle (any page — admin.js data-password-toggle) */
.password-field {
    position: relative;
    display: flex;
    align-items: center;
}
.password-field input {
    flex: 1 1 auto;
    padding-right: 4.2rem;
}
.password-field .password-toggle {
    position: absolute;
    right: .4rem;
    top: 50%;
    transform: translateY(-50%);
    margin: 0;
    padding: .3rem .6rem;
    background: none;
    border: 0;
    color: var(--color-accent);
    font-size: var(--text-xs);
    font-weight: 600;
    cursor: pointer;
    width: auto;
}
.password-field .password-toggle:hover { text-decoration: underline; }

/* statistics dashboard (src/statistics-view.php) */

/* New SVG area chart (src/stats-chart.php) — replaces the plain CSS bars
   for the main trend line, used both site-wide and per-page. */
.stats-areachart {
    position: relative;
    margin-bottom: 2rem;
}
.stats-areachart-svg {
    display: block;
    width: 100%;
    height: 220px;
}
.stats-areachart-dot {
    opacity: 0;
    transition: opacity .15s ease;
}
.stats-areachart [data-chart-point]:hover + .stats-areachart-dot,
.stats-areachart [data-chart-point]:hover ~ .stats-areachart-dot {
    opacity: 1;
}
.stats-areachart-labels {
    display: flex;
    justify-content: space-between;
    color: var(--color-muted);
    font-size: .8rem;
    margin-top: .4rem;
}
.stats-tooltip {
    position: absolute;
    transform: translate(-50%, -130%);
    background: var(--color-text);
    color: #fff;
    padding: .35rem .6rem;
    border-radius: 6px;
    font-size: .82rem;
    font-weight: 600;
    white-space: nowrap;
    pointer-events: none;
    box-shadow: 0 4px 12px rgba(0,0,0,0.18);
}

/* Headline stat cards — the "X views, up/down Y%" row at the top,
   replacing a single plain paragraph with a small grid of cards. */
.stats-headline {
    display: flex;
    gap: 1rem;
    margin: .5rem 0 1.5rem;
    flex-wrap: wrap;
}
.stats-headline-card {
    background: var(--color-surface);
    border: 1px solid var(--color-surface-border);
    border-radius: 10px;
    padding: .9rem 1.2rem;
    min-width: 160px;
}
.stats-headline-card .stats-headline-value {
    font-family: var(--font-display);
    font-size: 1.6rem;
    display: block;
}
.stats-headline-card .stats-headline-label {
    color: var(--color-muted);
    font-size: .85rem;
}

.stats-callout {
    display: inline-block;
    background: var(--color-badge-bg);
    border-radius: 8px;
    padding: .5rem .9rem;
    font-size: .9rem;
    margin-bottom: 1.2rem;
}

.stats-chart {
    display: flex;
    align-items: flex-end;
    gap: .4rem;
    height: 160px;
    padding: 0 .5rem;
    margin-bottom: 2rem;
    border-bottom: 1px solid var(--color-line);
}
.stats-bar-col {
    flex: 1 1 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-end;
    height: 100%;
    gap: .4rem;
    min-width: 0;
}
.stats-bar {
    width: 100%;
    max-width: 22px;
    background: var(--color-accent);
    border-radius: 3px 3px 0 0;
}
.stats-bar-label {
    font-size: .65rem;
    color: var(--color-faint);
    white-space: nowrap;
    writing-mode: vertical-rl;
    transform: rotate(180deg);
}
.stats-cols {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 2rem;
}
.stats-list { list-style: none; margin: 0; padding: 0; }
.stats-list li {
    display: flex;
    justify-content: space-between;
    gap: 1rem;
    padding: .4rem 0;
    border-bottom: 1px solid var(--color-line);
    font-size: var(--text-sm);
}
.stats-device-row {
    display: flex;
    align-items: center;
    gap: .6rem;
    margin-bottom: .6rem;
    font-size: var(--text-sm);
}
.stats-device-row span:first-child { flex: 0 0 60px; }
.stats-device-bar {
    flex: 1 1 auto;
    height: 8px;
    background: var(--color-line);
    border-radius: 4px;
    overflow: hidden;
}
.stats-device-bar div {
    height: 100%;
    background: var(--color-accent);
}

.stats-headline-card--live {
    border-color: var(--color-success-border);
    background: var(--color-success-bg);
}
.stats-live-dot {
    display: inline-block;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--color-success-border);
    margin-right: .3rem;
    animation: stats-pulse 1.6s ease-in-out infinite;
}
@keyframes stats-pulse {
    0%, 100% { opacity: 1; }
    50% { opacity: .35; }
}

.stats-list--events li {
    display: flex;
    align-items: center;
    gap: .6rem;
}
.stats-list--events li span:first-child {
    flex: 0 0 auto;
    max-width: 45%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.stats-event-bar {
    flex: 1 1 auto;
    height: 8px;
    background: var(--color-line);
    border-radius: 4px;
    overflow: hidden;
    display: block;
}
.stats-event-bar div {
    height: 100%;
    background: var(--color-accent);
}

.stats-change {
    font-weight: 700;
    font-size: var(--text-sm);
    margin-left: .3rem;
}
.stats-change--up { color: var(--color-success-border); }
.stats-change--down { color: var(--color-error-border, #dc2626); }
.stats-change--flat { color: var(--color-muted); }

.stats-chart--small {
    height: 90px;
    gap: .15rem;
}
.stats-chart--small .stats-bar { max-width: 10px; }
.stats-chart--small .stats-bar-label {
    writing-mode: initial;
    transform: none;
    font-size: .6rem;
}

.stats-log-table {
    width: 100%;
    border-collapse: collapse;
    font-size: var(--text-sm);
    margin-top: 1rem;
}
.stats-log-table th, .stats-log-table td {
    text-align: left;
    padding: .5rem .7rem;
    border-bottom: 1px solid var(--color-line);
}
.stats-log-table th { color: var(--color-muted); font-weight: 600; }
.stats-log-pagination {
    display: flex;
    align-items: center;
    gap: 1rem;
    margin-top: 1rem;
}
.stats-log-pagination .btn { margin-top: 0; }

.login-box form {
    background: none;
    border: 0;
    padding: 0;
    margin: 0;
    text-align: left;
}
.login-box input {
    margin-bottom: .8rem;
}
.login-box button { width: 100%; }

/* ---------------------------------------------------------------------
   WEBBOS wordmark — the one signature element. Rendered as real type
   (Space Grotesk): "WEB" in ink, "BOS" always in the orange accent — same
   split used on the public marketing site. Used large on login, small in
   the dashboard header.
   --------------------------------------------------------------------- */
.brand-logo {
    display: inline-flex;
    align-items: baseline;
    font-family: var(--font-display);
    font-weight: 700;
    letter-spacing: -0.02em;
    text-decoration: none;
    line-height: 1;
}
.brand-logo--lg { font-size: 2.1rem; }
.brand-logo--sm { font-size: 1.15rem; }
.brand-logo-web { color: var(--color-text); }
.brand-logo-bos { color: var(--color-accent); }
.brand-logo-link { text-decoration: none; display: inline-flex; }
.brand-tagline {
    display: block;
    font-family: var(--font-base);
    font-weight: 400;
    font-size: var(--text-sm);
    color: var(--color-muted);
    letter-spacing: 0;
    margin-top: .35rem;
}

/* dashboard header (index.php) — hamburger + customer search, per wireframe */
.app-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1.4rem;
    padding: .9rem 1.5rem;
    border-bottom: 1px solid var(--color-line);
    background: var(--color-surface);
    position: relative;
}

.top-app-menu {
    background: var(--color-text);
    padding: .8rem 1.5rem;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 1.4rem;
    color: var(--color-bg);
    position: relative;
}

.top-app-menu a, .top-app-menu .muted {
    color: var(--color-bg);
}

.top-app-menu-right {
    display: flex;
    align-items: center;
    gap: 1rem;
    margin-left: auto;
    flex: 0 0 auto;
    white-space: nowrap;
}

.top-app-menu .brand-logo-web { color: var(--color-bg); }

.app-search { flex: 0 0 auto; margin: 0; }
.app-search input {
    width: 260px;
    border: 1px solid var(--color-border);
    background: var(--color-bg);
}
.app-search input:focus {
    outline: none;
    border-color: var(--color-accent);
    box-shadow: 0 0 0 3px rgba(247, 115, 58, .15);
}


.app-body {
    max-width: 1560px;
    width: 100%;
    margin: 0 auto;
    flex: 1;
}

/* topbar kept for any page not yet migrated to .topnav */
.topbar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: var(--text-sm);
    color: var(--color-muted);
    margin-bottom: 1rem;
}
.topbar a { color: var(--color-accent); }

/* customer cards (list) */
.cards {
    list-style: none;
    padding: 0;
    margin: 0;
    display: grid;
    gap: .6rem;
}
.card {
    border: 1px solid var(--color-surface-border);
    border-radius: 8px;
    background: var(--color-surface);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .5rem;
}
.card-link {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex: 1;
    padding: .8rem 1rem;
    text-decoration: none;
    color: var(--color-text);
}
.card-link:hover { background: var(--color-line); border-radius: 8px; }
.card-title { font-weight: 600; }
.badge {
    align-self: flex-start;
    margin-top: .3rem;
    font-size: var(--text-xs);
    padding: .1rem .5rem;
    border-radius: 999px;
    background: var(--color-badge-bg);
    color: var(--color-muted);
}

/* tables */
table { width: 100%; border-collapse: collapse; }
th, td {
    text-align: left;
    padding: .5rem;
    border-bottom: 1px solid var(--color-line);
    font-size: .92rem;
}
.tag {
    font-size: var(--text-xs);
    padding: .1rem .5rem;
    border-radius: 999px;
    background: var(--color-tag-bg);
}

.onboarding-pages-preview {
    display: flex;
    flex-wrap: wrap;
    gap: .5rem;
    padding: 1rem;
}
.onboarding-pages-preview .tag {
    font-size: var(--text-sm);
    padding: .3rem .8rem;
}

/* new-customer wizard stepper (customer-new.php / discovery / template) */
.wizard-steps {
    display: flex;
    align-items: center;
    gap: .5rem;
    margin: 0 0 2rem;
}
.wizard-step {
    display: flex;
    align-items: center;
    gap: .5rem;
    text-decoration: none;
    color: var(--color-faint);
    font-size: var(--text-sm);
}
.wizard-step-num {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 26px;
    height: 26px;
    border-radius: 999px;
    border: 1px solid var(--color-border);
    font-family: var(--font-display);
    font-weight: 700;
    font-size: .8rem;
    color: var(--color-faint);
    background: var(--color-surface);
    flex: 0 0 auto;
}
.wizard-step--active { color: var(--color-text); font-weight: 600; }
.wizard-step--active .wizard-step-num {
    border-color: var(--color-accent);
    color: var(--color-accent);
}
.wizard-step--done { color: var(--color-muted); }
.wizard-step--done .wizard-step-num {
    border-color: var(--color-success-border);
    background: var(--color-success-bg);
    color: var(--color-success-border);
}
a.wizard-step:hover { color: var(--color-accent); }
.wizard-step-sep {
    width: 28px;
    height: 1px;
    background: var(--color-border);
    flex: 0 0 auto;
}

/* selectable template cards (customer-template.php) */
.template-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, 220px);
    gap: 1.25rem;
    margin: 1rem 0 1.5rem;
}
.template-card {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: .3rem;
    padding: 0 0 1rem;
    border: 1px solid var(--color-surface-border);
    border-radius: 10px;
    background: var(--color-surface);
    cursor: pointer;
    overflow: hidden;
}
.template-card input {
    position: absolute;
    opacity: 0;
    width: 0;
    height: 0;
}
.template-card:has(input:checked) {
    border-color: var(--color-accent);
    background: var(--color-badge-bg);
}
.template-card-title { font-family: var(--font-display); font-weight: 700; padding: 0 1rem; }
.template-card .muted { padding: 0 1rem; }
.template-card-fullview {
    margin: .2rem 1rem 0;
    font-size: var(--text-xs);
    color: var(--color-accent);
    text-decoration: none;
}
.template-card-fullview:hover { text-decoration: underline; }

/* small thumbnail variant used inside the selectable template-card (wizard
   Step 3) — same live-iframe trick as the library grid, just smaller.
   Compound selectors (.template-thumb.template-thumb--small) so this wins
   regardless of where .template-thumb's own base rule sits in the file. */
.template-thumb.template-thumb--small {
    width: 220px;
    height: 140px;
    margin-bottom: .6rem;
}
.template-thumb.template-thumb--small iframe {
    width: 1100px;
    height: 700px;
    transform: scale(0.2);
}
.template-thumb {
    position: relative;
    display: block;
    width: 260px;
    height: 165px;
    overflow: hidden;
    background: var(--color-line);
    border-bottom: 1px solid var(--color-surface-border);
}
.template-thumb iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 1300px;
    height: 825px;
    border: 0;
    transform: scale(0.2);
    transform-origin: top left;
    pointer-events: none; /* it's a thumbnail — click the card, not the page inside it */
}
.footer {
    margin-top: auto;
    padding: 1rem;
    text-align: center;
    color: var(--color-muted);
    border-top: 1px solid var(--color-line);
}

/* customer overview — three columns side by side (company info / extra
   info / sites), instead of one long vertical scroll */
.customer-columns {
    display: grid;
    grid-template-columns: 3fr 1fr;
    gap: 2rem;
    align-items: start;
}
/* 2-column field layout for long forms (e.g. Company & contact) — each
   label+input pair goes in a .field wrapper, and pairs flow 2-per-row. */
.field-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0 1.2rem;
}
.field-grid .field label { margin-top: .7rem; }
.field-grid .field:first-child label,
.field-grid .field:nth-child(2) label {
    margin-top: 0;
}

/* generic modal (extra info, etc.) — see admin.js */
.modal-overlay {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(61, 51, 46, .45);
    align-items: center;
    justify-content: center;
    z-index: 50;
    padding: 1rem;
}
.modal-overlay.open { display: flex; }
.modal-box {
    background: var(--color-surface);
    border-radius: 10px;
    padding: 1.5rem;
    max-width: 460px;
    width: 100%;
    max-height: 85vh;
    overflow-y: auto;
    box-shadow: 0 20px 60px rgba(0,0,0,.25);
}
.modal-box--wide { max-width: 640px; }
.modal-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: .5rem;
}
.modal-header h2 { margin: 0; padding: 0; border: 0; font-size: var(--text-h2); }
.modal-close {
    background: none;
    border: 0;
    font-size: 1.4rem;
    line-height: 1;
    cursor: pointer;
    color: var(--color-muted);
    margin: 0;
    padding: 0;
}
.form-actions {
    display: flex;
    align-items: center;
    gap: .8rem;
}
.form-actions button { margin-top: 1rem; }
.btn-secondary {
    background: var(--color-surface);
    color: var(--color-text);
    border: 1px solid var(--color-border);
}

/* themed confirm dialog (replaces native confirm() — see admin.js) */
.confirm-box { max-width: 380px; text-align: center; }
.confirm-message {
    margin: .5rem 0 1.2rem;
    color: var(--color-text);
    font-size: 1rem;
    line-height: 1.5;
}
.confirm-actions { justify-content: center; }
.confirm-actions button { margin-top: 0; }
.confirm-ok {
    background: var(--color-error-border);
    color: #fff;
    border: 0;
    border-radius: 5px;
    padding: .5rem 1.2rem;
    cursor: pointer;
}
.confirm-ok:hover { opacity: .9; }

/* upload name-conflict prompt (replace / rename / skip — see admin.js) */
.upload-conflict-box { max-width: 420px; }
.upload-conflict-message {
    margin: 0 0 1rem;
    color: var(--color-text);
    font-size: .95rem;
    line-height: 1.5;
}
.upload-conflict-label {
    display: block;
    margin: 0 0 1rem;
    font-size: var(--text-sm);
    color: var(--color-muted);
}
.upload-conflict-input {
    display: block;
    width: 100%;
    margin-top: .35rem;
    box-sizing: border-box;
}
.upload-conflict-actions { flex-wrap: wrap; justify-content: flex-end; gap: .5rem; }
.upload-conflict-actions button { margin-top: 0; }
.upload-conflict-skip { background: transparent; color: var(--color-muted); border: 1px solid transparent; }
.upload-conflict-skip:hover { color: var(--color-text); }
.customer-col > h2:first-child {
    border-top: 0;
    margin-top: 0;
    padding-top: 0;
}

/* site backoffice — persistent sidebar (Pages / Statistics / Ads / Backoffice).
   Deliberately NOT inside .app-body — that's centered with a max-width, which
   is exactly why the sidebar used to float in the middle of the screen
   instead of sitting flush against the left edge. */
.site-shell {
    display: flex;
    align-items: stretch;
    width: 100%;
    min-height: calc(100vh - 4.5rem); /* accounts for the footer below it */
}
.site-sidebar {
    flex: 0 0 240px;
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
    padding: 1.5rem 1.3rem;
    border-right: 1px solid var(--color-surface-border);
    background: var(--color-surface);
}
.site-sidebar-client {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: .3rem;
}
.site-live-link {
    font-size: var(--text-xs);
    color: var(--color-accent);
    text-decoration: none;
    margin-top: .1rem;
}
.site-live-link:hover { text-decoration: underline; }
.site-avatar {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border-radius: 999px;
    background: var(--color-text);
    color: #fff;
    font-family: var(--font-display);
    font-weight: 700;
    font-size: 1.1rem;
}
.site-client-name {
    font-weight: 600;
    font-family: var(--font-display);
}
.site-nav {
    display: flex;
    flex-direction: column;
    gap: .3rem;
    border-top: 1px solid var(--color-line);
    padding-top: 1rem;
}
.site-nav a {
    display: flex;
    align-items: center;
    gap: .4rem;
    padding: .5rem .6rem;
    border-radius: 6px;
    font-size: var(--text-sm);
    text-decoration: none;
    color: var(--color-text);
}
.site-nav a:hover { background: var(--color-line); }
.site-nav a.active { background: var(--color-badge-bg); color: var(--color-accent-soft); font-weight: 600; }
.site-nav-sub {
    display: flex;
    flex-direction: column;
    gap: .1rem;
    margin: 0 0 .3rem .8rem;
    padding-left: .6rem;
    border-left: 2px solid var(--color-line);
}
.site-nav-sub a {
    padding: .35rem .5rem;
    font-size: .85rem;
    color: var(--color-muted);
}
.site-nav-sub a.active { color: var(--color-accent-soft); background: var(--color-badge-bg); font-weight: 600; }
.site-nav-label {
    margin-top: .6rem;
    padding: 0 .6rem;
    font-size: var(--text-xs);
    text-transform: uppercase;
    letter-spacing: .04em;
    color: var(--color-faint);
}
.site-main {
    flex: 1 1 auto;
    min-width: 0;
    padding: 2rem 2rem 2rem 2.5rem;
}
.site-main-inner {
    max-width: auto;
}

/* rich-text editor (Quill — see admin.js / richtext-scripts.php) */
.ql-toolbar.ql-snow {
    border-color: var(--color-border);
    border-radius: 5px 5px 0 0;
    font-family: var(--font-base);
}
.ql-container.ql-snow {
    border-color: var(--color-border);
    border-radius: 0 0 5px 5px;
    font-family: var(--font-base);
    font-size: 1rem;
    min-height: 200px;
}

/* ---------------------------------------------------------------------
   Responsive / mobile. Two breakpoints: 720px (tablet — things start
   wrapping instead of overflowing) and 480px (phone — tighter spacing,
   smaller numbers, single-column everywhere).
   --------------------------------------------------------------------- */
@media (max-width: 720px) {
    .live-preview-frame { height: 320px; }
    /* dark bar: hamburger + login info — let it wrap if the email is long */
    .top-app-menu { flex-wrap: wrap; gap: .6rem; padding: .7rem 1rem; }
    .top-app-menu-right { margin-left: 0; }

    /* light bar: logo + search — stack instead of squeezing side by side */
    .app-header { flex-wrap: wrap; gap: .7rem; padding: .8rem 1rem; }
    .app-search { width: 100%; }
    .app-search input { width: 100%; }

    .app-body { padding: 1.5rem 1rem; }

    .customer-columns { grid-template-columns: 1fr; gap: 0; }
    .field-grid { grid-template-columns: 1fr; }
    .field-grid .field label { margin-top: .7rem !important; }
    .customer-col:not(:first-child) > h2:first-child {
        border-top: 1px solid var(--color-line);
        margin-top: 2rem;
        padding-top: 1rem;
    }

    .site-shell { flex-direction: column; }
    .site-sidebar {
        flex: 1 1 auto;
        width: 100%;
        box-sizing: border-box;
        border-right: 0;
        border-bottom: 1px solid var(--color-surface-border);
    }
    .site-main { padding: 1.5rem 1rem; }

    /* full-page code editors: let the topbar wrap rather than clip the filename */
    .editor-topbar { flex-wrap: wrap; gap: .6rem; padding: .6rem .9rem; }
    .editor-topbar-left { flex-wrap: wrap; }
    .editor-meta-fields { padding: .7rem .9rem; }

    .layout-picker { flex-wrap: wrap; }
    .block-item-actions { flex-wrap: wrap; }

    /* tables (site lists, etc.) — scroll horizontally rather than squeeze */
    table { display: block; overflow-x: auto; white-space: nowrap; }
}

@media (max-width: 480px) {
    .login-header { padding: 1rem 1.2rem; }
    .brand-logo--lg { font-size: 1.6rem; }
    .login-box { max-width: 100%; }

    .card-link { flex-direction: column; align-items: flex-start; gap: .3rem; }
    .file-row { flex-direction: column; align-items: flex-start; gap: .3rem; }
}

/* Tickets */
.ticket-badge {
    display: inline-block;
    padding: .1rem .5rem;
    border-radius: 999px;
    font-size: .78rem;
    font-weight: 600;
    text-transform: capitalize;
}
.ticket-status-open { background: #fee2e2; color: #b91c1c; }
.ticket-status-in_progress { background: #fef1c7; color: #92730e; }
.ticket-status-resolved { background: #dcfce7; color: #15803d; }
.ticket-priority-high { background: #fee2e2; color: #b91c1c; }

.ticket-overdue-text { color: #b91c1c; font-weight: 600; }

.ticket-attachment {
    margin: .4rem 0 0;
    font-size: .9rem;
}
.ticket-attachment a { color: var(--color-accent); text-decoration: none; }
.ticket-attachment a:hover { text-decoration: underline; }

/* agenda.php week-grid calendar */
.agenda-scroll {
    overflow-x: auto;
    overflow-y: auto;
    max-height: 70vh;
    border-radius: 10px;
}
.agenda-grid {
    display: grid;
    grid-template-columns: 56px repeat(7, minmax(110px, 1fr));
    min-width: 820px;
    border: 1px solid var(--color-line);
    border-radius: 10px;
    overflow: hidden;
    background: var(--color-surface);
}
.agenda-grid-corner {
    border-bottom: 1px solid var(--color-line);
    border-right: 1px solid var(--color-line);
}
.agenda-day-header {
    text-align: center;
    padding: .6rem .3rem;
    border-bottom: 1px solid var(--color-line);
    border-right: 1px solid var(--color-line);
}
.agenda-day-header--today { background: rgba(247, 115, 58, .08); }
.agenda-day-name {
    display: block;
    font-size: .72rem;
    color: var(--color-muted);
    text-transform: uppercase;
    letter-spacing: .04em;
}
.agenda-day-num {
    display: block;
    font-family: var(--font-display);
    font-size: 1.15rem;
}
.agenda-hours {
    border-right: 1px solid var(--color-line);
}
.agenda-hour-label {
    font-size: .7rem;
    color: var(--color-muted);
    padding: 2px 8px 0 0;
    text-align: right;
    box-sizing: border-box;
}
.agenda-day-col {
    position: relative;
    border-right: 1px solid var(--color-line);
}
.agenda-day-col:last-child { border-right: none; }
.agenda-day-col--today { background: rgba(247, 115, 58, .04); }
.agenda-hour-line {
    position: absolute;
    left: 0;
    right: 0;
    border-top: 1px solid var(--color-line);
}
.agenda-block {
    position: absolute;
    left: 3px;
    right: 3px;
    background: var(--color-accent);
    color: #fff;
    border-radius: 6px;
    padding: .25rem .45rem;
    font-size: .74rem;
    line-height: 1.25;
    overflow: hidden;
    text-decoration: none;
    display: flex;
    flex-direction: column;
    box-shadow: 0 2px 6px rgba(61, 51, 46, .15);
    z-index: 1;
}
.agenda-block:hover { filter: brightness(1.08); }
.agenda-block--pending {
    background: var(--color-surface);
    border: 2px dashed var(--color-accent);
    color: var(--color-text);
}
.agenda-block-time { font-weight: 700; }
.agenda-block-title { font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.agenda-block-company { opacity: .85; font-size: .68rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* Customer portal ---------------------------------------------------------
   Fully scoped so the agency dashboard and back-office sidebar are unchanged. */
.portal-body {
    --portal-navy: #22201f;
    --portal-blue: #f66223;
    --portal-ink: #232120;
    --portal-muted: #928679;
    --portal-line: #f0e7e3;
    background: #fcf9f8;
    color: var(--portal-ink);
}
.portal-topbar {
    height: 74px;
    margin-left: 280px;
    padding: 0 48px;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    background: rgba(255,255,255,.9);
    border-bottom: 1px solid var(--portal-line);
    box-sizing: border-box;
}
.portal-menu-toggle {
    display: none;
    border: 0;
    background: transparent;
    color: var(--portal-ink);
    font-size: 1.2rem;
    cursor: pointer;
}
.portal-account {
    height: 100%;
    display: flex;
    align-items: center;
    gap: 14px;
}
.portal-notification-menu {
    position: relative;
    height: 48px;
    display: flex;
    align-items: center;
}
.portal-notification {
    position: relative;
    width: 44px;
    height: 48px;
    flex: 0 0 44px;
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 0;
    border-radius: 8px;
    background: transparent;
    color: var(--portal-ink);
    line-height: 1;
    margin: 0;
    box-sizing: border-box;
    cursor: pointer;
}
.portal-notification-icon {
    width: 20px;
    height: 20px;
    display: block;
    overflow: visible;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.8;
    stroke-linecap: round;
    stroke-linejoin: round;
}
.portal-notification:hover {
    background: #fbf6f4;
    color: var(--portal-blue);
}
.portal-notification[aria-expanded="true"] {
    background: #fef3ef;
    color: var(--portal-blue);
}
.portal-notification-badge {
    position: absolute;
    top: 4px;
    right: 2px;
    min-width: 17px;
    height: 17px;
    padding: 0 4px;
    display: grid;
    place-items: center;
    border: 2px solid #fff;
    border-radius: 999px;
    background: #ef4444;
    color: #fff;
    font-size: 9px;
    font-weight: 700;
    line-height: 1;
    box-sizing: border-box;
}
.portal-notification-badge[hidden] { display: none; }
.portal-notification-dropdown {
    position: absolute;
    top: calc(100% + 9px);
    right: -8px;
    z-index: 50;
    width: min(370px, calc(100vw - 32px));
    overflow: hidden;
    border: 1px solid var(--portal-line);
    border-radius: 12px;
    background: #fff;
    box-shadow: 0 18px 45px rgba(53, 45, 41, .18);
}
.portal-notification-dropdown[hidden] { display: none; }
.portal-notification-header {
    min-height: 54px;
    padding: 0 16px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    border-bottom: 1px solid var(--portal-line);
}
.portal-notification-header strong {
    color: var(--portal-ink);
    font-size: .88rem;
}
.portal-notification-header-actions {
    display: flex;
    align-items: center;
    gap: 11px;
}
.portal-notification-header button {
    padding: 5px 0;
    border: 0;
    background: transparent;
    color: var(--portal-blue);
    font: inherit;
    font-size: .68rem;
    font-weight: 600;
    cursor: pointer;
}
.portal-notification-header button:hover { text-decoration: underline; }
.portal-notification-header button[hidden] { display: none; }
.portal-notification-header .portal-notification-clear { color: #928679; }
.portal-notification-header .portal-notification-clear:hover { color: #c43f3f; }
.portal-notification-list {
    max-height: min(430px, calc(100vh - 100px));
    overflow-y: auto;
}
.portal-notification-list[hidden] { display: none; }
.portal-notification-entry {
    position: relative;
}
.portal-notification-item {
    min-height: 80px;
    padding: 13px 48px 13px 14px;
    display: grid;
    grid-template-columns: 38px minmax(0, 1fr) 8px;
    align-items: center;
    gap: 11px;
    border-bottom: 1px solid #f6f0ed;
    color: var(--portal-ink);
    text-decoration: none;
    box-sizing: border-box;
}
.portal-notification-entry:last-child .portal-notification-item { border-bottom: 0; }
.portal-notification-item:hover { background: #fffaf7; }
.portal-notification-item.is-unread { background: #fff7f4; }
.portal-notification-item.is-unread:hover { background: #fef3ee; }
.portal-notification-dismiss {
    position: absolute;
    top: 50%;
    right: 12px;
    z-index: 2;
    width: 28px;
    height: 28px;
    padding: 0;
    display: grid;
    place-items: center;
    border: 0;
    border-radius: 7px;
    background: transparent;
    color: #b2a9a0;
    font-size: .68rem;
    opacity: .55;
    cursor: pointer;
    transform: translateY(-50%);
    transition: background-color .15s ease, color .15s ease, opacity .15s ease;
}
.portal-notification-entry:hover .portal-notification-dismiss,
.portal-notification-dismiss:focus-visible { opacity: 1; }
.portal-notification-dismiss:hover {
    background: #fff0f0;
    color: #c63f3f;
}
.portal-notification-dismiss:focus-visible {
    outline: 2px solid rgba(246, 98, 35, .28);
    outline-offset: 1px;
}
.portal-notification-item-icon {
    width: 38px;
    height: 38px;
    display: grid;
    place-items: center;
    border-radius: 10px;
    font-size: .88rem;
}
.portal-notification-item-icon--blue { background: var(--color-line); color: var(--color-text); }
.portal-notification-item-icon--green { background: #e8f8ef; color: #18a65b; }
.portal-notification-item-icon--amber { background: #fff6d9; color: #b98f05; }
.portal-notification-item-icon--red { background: #ffeded; color: #dc3d3d; }
.portal-notification-item-copy {
    min-width: 0;
    display: block;
}
.portal-notification-item-copy strong,
.portal-notification-item-copy span,
.portal-notification-item-copy time {
    display: block;
}
.portal-notification-item-copy strong {
    overflow: hidden;
    color: var(--portal-ink);
    font-size: .76rem;
    line-height: 1.3;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.portal-notification-item-copy span {
    margin-top: 3px;
    overflow: hidden;
    color: #85796c;
    font-size: .68rem;
    line-height: 1.3;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.portal-notification-item-copy time {
    margin-top: 4px;
    color: #b0a79e;
    font-size: .62rem;
    line-height: 1.2;
}
.portal-notification-unread-dot {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: transparent;
}
.portal-notification-item.is-unread .portal-notification-unread-dot {
    background: var(--portal-blue);
}
.portal-notification-empty {
    min-height: 175px;
    padding: 28px 20px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    box-sizing: border-box;
}
.portal-notification-empty[hidden] { display: none; }
.portal-notification-empty > i {
    margin-bottom: 13px;
    color: #b9b1a9;
    font-size: 1.4rem;
}
.portal-notification-empty strong {
    color: var(--portal-ink);
    font-size: .8rem;
}
.portal-notification-empty span {
    margin-top: 5px;
    color: var(--portal-muted);
    font-size: .68rem;
}

/* Customer-managed modules. All structural layouts use flexbox. */
.credential-once {
    display: flex;
    flex-direction: column;
    gap: 7px;
    margin: 14px 0 20px;
    padding: 14px 16px;
    border: 1px solid #fccfbc;
    border-radius: 10px;
    background: #fef3ef;
}
.credential-once .mono {
    min-width: 0;
    flex: 1;
    padding: 10px 12px;
    border: 1px solid #f9d7c8;
    border-radius: 8px;
    background: #fff;
    color: #bb3e08;
    font-size: 18px;
    overflow-wrap: anywhere;
    user-select: all;
}
.credential-once small { color: #82776b; }
.portal-access-summary {
    display: flex;
    align-items: center;
    gap: 12px;
    margin: 16px 0;
    padding: 14px;
    border: 1px solid #eeded7;
    border-radius: 12px;
    background: #fcf8f7;
}
.portal-access-summary-icon {
    display: inline-flex;
    flex: 0 0 42px;
    align-items: center;
    justify-content: center;
    width: 42px;
    height: 42px;
    border-radius: 10px;
    background: #feefe9;
    color: #dd4f12;
}
.portal-access-summary > div {
    display: flex;
    min-width: 0;
    flex: 1;
    flex-direction: column;
    gap: 3px;
}
.portal-access-summary small,
.portal-access-details small {
    color: #8e8275;
}
.portal-access-summary.is-active {
    border-color: #bfe7d0;
    background: #f1fbf5;
}
.portal-access-summary.is-active .portal-access-summary-icon {
    background: #dcf6e7;
    color: #16824d;
}
.portal-access-summary.is-expired {
    border-color: #f0e1ae;
    background: #fffbef;
}
.portal-access-state {
    flex: 0 0 auto;
    padding: 5px 8px;
    border-radius: 999px;
    background: #fff;
    color: #70665c;
    font-size: 12px;
    font-weight: 700;
}
.portal-access-details {
    display: flex;
    gap: 10px;
}
.portal-access-details > span {
    display: flex;
    min-width: 0;
    flex: 1;
    flex-direction: column;
    gap: 4px;
    padding: 12px;
    border: 1px solid #efe4e0;
    border-radius: 10px;
}
.portal-access-details strong {
    overflow-wrap: anywhere;
}
.portal-access-note {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    margin: 15px 0;
}
.portal-access-actions,
.portal-access-disable {
    display: flex;
}
.portal-access-actions button {
    width: 100%;
}
.portal-access-disable {
    justify-content: center;
    margin-top: 10px;
}
.portal-access-disable button {
    border: 0;
    background: transparent;
    color: #a44242;
    font-size: 13px;
}
@media (max-width: 560px) {
    .portal-access-summary {
        align-items: flex-start;
        flex-wrap: wrap;
    }
    .portal-access-details {
        flex-direction: column;
    }
}
.portal-module-page { max-width: 1180px; }
.portal-module-layout {
    display: flex;
    align-items: flex-start;
    gap: 22px;
}
.portal-module-list,
.portal-module-editor,
.portal-media-upload,
.portal-media-list {
    border: 1px solid #eee1dc;
    border-radius: 14px;
    background: #fff;
}
.portal-module-list {
    display: flex;
    flex: 0 0 310px;
    flex-direction: column;
    overflow: hidden;
}
.portal-module-editor {
    flex: 1 1 620px;
    min-width: 0;
    padding: 24px;
}
.portal-inline-create {
    display: flex;
    gap: 8px;
    padding: 14px;
    border-bottom: 1px solid #f2e9e5;
}
.portal-inline-create input { min-width: 0; margin: 0; }
.portal-inline-create button { flex: 0 0 auto; margin: 0; }
.portal-module-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 14px 16px;
    border-bottom: 1px solid #f5efed;
    color: #302e2d;
    text-decoration: none;
}
.portal-module-row:last-child { border-bottom: 0; }
.portal-module-row:hover,
.portal-module-row.active { background: #fef3ef; color: #ff5a1f; }
.portal-module-row > span {
    display: flex;
    min-width: 0;
    flex-direction: column;
    gap: 3px;
}
.portal-module-row small { color: #968b7f; }
.portal-module-row form { margin: 0; }
.portal-module-empty {
    display: flex;
    min-height: 260px;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 8px;
    color: #968b7f;
    text-align: center;
}
.portal-module-empty > i { font-size: 34px; color: #e8b49d; }
.portal-form-pair,
.portal-module-actions,
.portal-schedule-form,
.portal-media-upload,
.portal-media-list,
.portal-media-card {
    display: flex;
}
.portal-form-pair { gap: 14px; }
.portal-form-pair > label { flex: 1 1 0; }
.portal-module-actions {
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    margin-top: 22px;
    padding-top: 18px;
    border-top: 1px solid #f2e9e5;
}
.portal-module-actions form,
.portal-module-actions button { margin: 0; }
.portal-schedule-form { align-items: center; gap: 6px; }
.portal-schedule-form input { width: auto; margin: 0; }
.portal-media-upload {
    align-items: flex-end;
    gap: 14px;
    margin-bottom: 20px;
    padding: 18px;
}
.portal-media-upload label { flex: 1 1 auto; margin: 0; }
.portal-media-upload input,
.portal-media-upload button { margin: 0; }
.portal-media-list {
    flex-wrap: wrap;
    gap: 16px;
    padding: 18px;
}
.portal-media-card {
    flex: 1 1 240px;
    max-width: 340px;
    flex-direction: column;
    overflow: hidden;
    border: 1px solid #f0e5e1;
    border-radius: 12px;
}
.portal-media-card img {
    width: 100%;
    height: 170px;
    object-fit: cover;
    background: #faf5f3;
}
.portal-media-card > div {
    display: flex;
    flex-direction: column;
    gap: 7px;
    padding: 13px;
}
@media (max-width: 900px) {
    .portal-module-layout { flex-direction: column; }
    .portal-module-list,
    .portal-module-editor { width: 100%; flex-basis: auto; }
}
@media (max-width: 620px) {
    .portal-form-pair,
    .portal-media-upload { flex-direction: column; }
    .portal-media-card { max-width: none; }
}

/* Website project dashboard — deliberately flexbox-only. */
.project-dashboard { max-width: 1240px; }
.project-breadcrumb {
    display: flex;
    align-items: center;
    gap: 9px;
    margin: 0 0 22px;
    color: #978b7f;
    font-size: .82rem;
}
.project-breadcrumb a { color: #a1512e; text-decoration: none; }
.project-breadcrumb i { font-size: .62rem; color: #c1bbb4; }
.project-dashboard-heading {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 28px;
    margin-bottom: 24px;
}
.project-dashboard-kicker {
    display: block;
    margin-bottom: 7px;
    color: #ff5a1f;
    font-size: .72rem;
    font-weight: 800;
    letter-spacing: .09em;
    text-transform: uppercase;
}
.project-dashboard-title-row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 13px;
}
.project-dashboard-title h1 { margin: 0; font-size: 2rem; letter-spacing: -.035em; }
.project-dashboard-title p { margin: 7px 0 0; color: #95897d; }
.project-status {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 5px 10px;
    border-radius: 999px;
    font-size: .72rem;
    font-weight: 800;
}
.project-status > span { width: 7px; height: 7px; border-radius: 50%; }
.project-status--live { background: #e9f8ef; color: #16884d; }
.project-status--live > span { background: #23b768; box-shadow: 0 0 0 3px rgba(35,183,104,.13); }
.project-status--draft { background: #f4f3f1; color: #82766a; }
.project-status--draft > span { background: #a49a90; }
.project-dashboard-actions {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: 9px;
}
.project-dashboard-actions form,
.project-dashboard-actions button,
.project-dashboard-actions .btn { margin: 0; }
.project-dashboard-actions .btn,
.project-dashboard-actions button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    min-height: 40px;
}
.project-summary {
    display: flex;
    align-items: stretch;
    margin-bottom: 22px;
    overflow: hidden;
    border: 1px solid #ede1dc;
    border-radius: 14px;
    background: #fff;
}
.project-summary article {
    display: flex;
    min-width: 0;
    flex: 1 1 0;
    flex-direction: column;
    gap: 5px;
    padding: 19px 21px;
    border-right: 1px solid #f1eae7;
}
.project-summary article:last-child { border-right: 0; }
.project-summary span { color: #93877b; font-size: .74rem; font-weight: 700; }
.project-summary strong { color: #2d2b2a; font-size: 1.45rem; line-height: 1.1; }
.project-summary small { overflow: hidden; color: #a2988e; text-overflow: ellipsis; white-space: nowrap; }
.project-summary .project-summary-date,
.project-summary .project-summary-domain { overflow: hidden; font-size: .98rem; text-overflow: ellipsis; white-space: nowrap; }
.project-dashboard-columns { display: flex; align-items: flex-start; gap: 22px; }
.project-dashboard-primary { display: flex; min-width: 0; flex: 1 1 62%; flex-direction: column; gap: 22px; }
.project-dashboard-secondary { display: flex; min-width: 300px; flex: 0 1 38%; flex-direction: column; gap: 22px; }
.project-panel {
    overflow: hidden;
    border: 1px solid #ede1dc;
    border-radius: 14px;
    background: #fff;
}
.project-panel-heading {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 19px 21px;
    border-bottom: 1px solid #f2e9e6;
}
.project-panel-heading h2 { margin: 0; color: #2d2b2a; font-size: .98rem; }
.project-panel-heading p { margin: 4px 0 0; color: #9e9388; font-size: .78rem; }
.project-manage-links,
.project-tool-links,
.project-publication-list { display: flex; flex-direction: column; }
.project-manage-links > a {
    display: flex;
    align-items: center;
    gap: 13px;
    padding: 14px 20px;
    border-bottom: 1px solid #f5efed;
    color: #302e2d;
    text-decoration: none;
}
.project-manage-links > a:last-child { border-bottom: 0; }
.project-manage-links > a:hover { background: #fffaf7; }
.project-manage-links > a > span:nth-child(2) { display: flex; min-width: 0; flex: 1; flex-direction: column; gap: 3px; }
.project-manage-links small,
.project-tool-links small { color: #998e82; }
.project-manage-links > a > i { color: #b3aba2; font-size: .72rem; }
.project-link-icon {
    display: inline-flex;
    width: 36px;
    height: 36px;
    flex: 0 0 36px;
    align-items: center;
    justify-content: center;
    border-radius: 9px;
}
.project-link-icon.is-blue { background: var(--color-line); color: var(--color-text); }
.project-link-icon.is-violet { background: #fef2ed; color: #db7c53; }
.project-link-icon.is-amber { background: #fff7db; color: #b99009; }
.project-link-icon.is-green { background: #e8f8ef; color: #189f59; }
.project-module-toggle {
    position: relative;
    width: 38px;
    height: 22px;
    margin: 0;
    padding: 0;
    border: 0;
    border-radius: 999px;
    background: #dad6d2;
    box-shadow: none;
}
.project-module-toggle:hover { background: #cfcac5; }
.project-module-toggle span {
    position: absolute;
    top: 3px;
    left: 3px;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    background: #fff;
    box-shadow: 0 1px 4px rgba(52, 44, 41, .2);
    transition: transform .16s ease;
}
.project-module-toggle.is-on { background: #f45f1f; }
.project-module-toggle.is-on span { transform: translateX(16px); }
.project-tool-links a {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 14px 19px;
    border-bottom: 1px solid #f5efed;
    color: #302e2d;
    text-decoration: none;
}
.project-tool-links a:last-child { border-bottom: 0; }
.project-tool-links a:hover { background: #fffaf7; }
.project-tool-links a > i { width: 24px; color: #e1632d; text-align: center; }
.project-tool-links a > span { display: flex; flex-direction: column; gap: 3px; }
.project-publication-list article {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 13px 20px;
    border-bottom: 1px solid #f5efed;
}
.project-publication-list article:last-child { border-bottom: 0; }
.project-publication-list article > span:last-child { display: flex; flex-direction: column; gap: 3px; }
.project-publication-list small { color: #9e9388; }
.project-publication-icon {
    display: inline-flex;
    width: 31px;
    height: 31px;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
}
.project-publication-icon.is-success { background: #e7f8ee; color: #169653; }
.project-publication-icon.is-failed { background: #ffeded; color: #d94444; }
.project-empty { display: flex; min-height: 130px; flex-direction: column; align-items: center; justify-content: center; gap: 7px; color: #a1968c; }
.project-empty i { font-size: 1.5rem; color: #d9b7a8; }

@media (max-width: 1040px) {
    .project-dashboard-columns { flex-direction: column; }
    .project-dashboard-primary,
    .project-dashboard-secondary { width: 100%; min-width: 0; flex-basis: auto; }
}
@media (max-width: 760px) {
    .project-dashboard-heading { flex-direction: column; }
    .project-dashboard-actions { justify-content: flex-start; }
    .project-summary { flex-wrap: wrap; }
    .project-summary article { min-width: 42%; border-bottom: 1px solid #f1eae7; }
}
@media (max-width: 520px) {
    .project-summary { flex-direction: column; }
    .project-summary article { min-width: 0; border-right: 0; }
    .project-dashboard-actions,
    .project-dashboard-actions .btn,
    .project-dashboard-actions form,
    .project-dashboard-actions button { width: 100%; }
}
.portal-account-menu {
    position: relative;
    display: flex;
    align-items: center;
}
.portal-account-trigger {
    min-height: 48px;
    display: flex;
    align-items: center;
    gap: .7rem;
    padding: 6px 8px;
    border: 0;
    border-radius: 8px;
    background: transparent;
    color: var(--portal-ink);
    line-height: 1;
    box-sizing: border-box;
    cursor: pointer;
}
.portal-account-trigger:hover { background: #fbf6f4; }
.portal-account-avatar {
    width: 36px;
    height: 36px;
    flex: 0 0 36px;
    display: grid;
    place-items: center;
    border-radius: 50%;
    background: #353231;
    color: #fff;
    font-weight: 700;
    line-height: 1;
}
.portal-account-copy {
    display: flex;
    flex-direction: column;
    justify-content: center;
    text-align: left;
    line-height: 1;
}
.portal-account-copy strong,
.portal-account-copy small { display: block; }
.portal-account-copy strong { font-size: .84rem; line-height: 1.15; }
.portal-account-copy small {
    margin-top: 3px;
    color: var(--portal-muted);
    font-size: .72rem;
    line-height: 1.1;
}
.portal-account-chevron {
    margin: 0 .2rem 0 .15rem;
    display: grid;
    place-items: center;
    color: var(--portal-muted);
    font-size: .65rem;
    line-height: 1;
    transition: transform .18s ease;
}
.portal-account-trigger[aria-expanded="true"] .portal-account-chevron { transform: rotate(180deg); }
.portal-account-dropdown {
    position: absolute;
    top: calc(100% + .55rem);
    right: 0;
    z-index: 40;
    min-width: 145px;
    padding: .4rem;
    border: 1px solid var(--portal-line);
    border-radius: 9px;
    background: #fff;
    box-shadow: 0 12px 28px rgba(53, 45, 41, .16);
}
.portal-account-dropdown[hidden] { display: none; }
.portal-account-dropdown a {
    display: flex;
    align-items: center;
    gap: .65rem;
    padding: .65rem .75rem;
    border-radius: 6px;
    color: var(--portal-ink);
    text-decoration: none;
    font-size: .78rem;
}
.portal-account-dropdown a:hover { background: #fdf6f3; color: var(--portal-blue); }

.portal-body .site-shell {
    display: block;
    min-height: calc(100vh - 120px);
}
.portal-body .portal-sidebar {
    position: fixed;
    inset: 0 auto 0 0;
    width: 280px;
    height: 100vh;
    margin: 0;
    padding: 25px 16px 0;
    gap: 0;
    border: 0;
    background: #0a0a0a;
    color: #fff;
    box-sizing: border-box;
    z-index: 20;
    overflow-y: auto;
    overscroll-behavior: contain;
}
.portal-brand {
    display: flex;
    align-items: center;
    gap: .85rem;
    padding: 2px 12px 17px;
}
.portal-brand-mark {
    flex: 0 0 42px;
    width: 42px;
    height: 42px;
    display: grid;
    place-items: center;
    border-radius: 50%;
    background: #fff;
    color: #312e2d;
    font-size: 1.05rem;
    font-weight: 700;
}
.portal-brand-copy strong,
.portal-brand-copy small { display: block; }
.portal-brand-copy strong { font-size: 1rem; }
.portal-brand-copy small { color: #ddc4b9; font-size: .78rem; margin-top: .2rem; }
.portal-site-link {
    margin: 0 -16px;
    padding: 7px 28px 24px;
    border-bottom: 1px solid rgba(255,255,255,.09);
}
.portal-site-link a { color: #f88554; text-decoration: none; font-size: .87rem; }
.portal-site-link i { margin-left: .3rem; font-size: .72rem; }
.portal-body .portal-sidebar .site-nav {
    gap: .25rem;
    padding: 16px 0 20px;
    border: 0;
}
.portal-body .portal-sidebar .site-nav > a {
    min-height: 44px;
    padding: 0 15px;
    gap: .85rem;
    border-radius: 8px;
    color: #fff;
    box-sizing: border-box;
}
.portal-body .portal-sidebar .site-nav > a,
.portal-quick-list a,
.portal-help-card a,
.portal-appointment > a,
.portal-talk-row > a {
    transition: background-color .16s ease, color .16s ease, border-color .16s ease, transform .16s ease;
}
.portal-body .portal-sidebar .site-nav > a > i:first-child {
    width: 18px;
    color: #fee6dc;
    text-align: center;
    font-size: 1rem;
}
.portal-body .portal-sidebar .site-nav > a:hover { background: rgba(255,255,255,.08); }
.portal-body .portal-sidebar .site-nav > a.active {
    color: #fff;
    background: var(--color-accent);
    box-shadow: 0 8px 20px rgba(190, 63, 8, .3);
}
.portal-nav-chevron { margin-left: auto; font-size: .65rem !important; }
.portal-body .portal-sidebar .site-nav-sub {
    margin: 0 0 .5rem 26px;
    padding: 0 0 0 14px;
    border-left: 1px solid rgba(255,255,255,.22);
}
.portal-body .portal-sidebar .site-nav-sub a {
    position: relative;
    min-height: 36px;
    padding: 0 12px;
    color: #f8ebe6;
    background: transparent;
    border-radius: 7px;
    box-sizing: border-box;
    transition: background-color .16s ease, color .16s ease, transform .16s ease, box-shadow .16s ease;
}
.portal-body .portal-sidebar .site-nav-sub a:hover {
    color: #fff;
    background: rgba(255,255,255,.075);
    transform: translateX(2px);
}
.portal-body .portal-sidebar .site-nav-sub a.active {
    color: #fff;
    background: rgba(247, 118, 62, .2);
    box-shadow: inset 0 0 0 1px rgba(250, 164, 127, .16);
    font-weight: 600;
}
.portal-body .portal-sidebar .site-nav-sub a.active::before {
    content: "";
    position: absolute;
    top: 50%;
    left: -18px;
    width: 7px;
    height: 7px;
    border: 2px solid #2b2928;
    border-radius: 50%;
    background: #f89063;
    box-sizing: border-box;
    transform: translateY(-50%);
}
.portal-body .portal-sidebar .badge {
    margin-left: auto;
    padding: .2rem .55rem;
    border: 0;
    background: #71675c;
    color: #fff;
    font-size: .58rem;
    text-transform: uppercase;
}
.portal-sidebar-logout {
    margin: auto -16px 0;
    min-height: 72px;
    padding: 0 30px;
    display: flex;
    align-items: center;
    gap: .9rem;
    border-top: 1px solid rgba(255,255,255,.09);
    color: #fff;
    text-decoration: none;
}
.portal-sidebar-logout:hover { background: rgba(255,255,255,.06); }

.portal-body .site-main {
    position: relative;
    min-height: calc(100vh - 120px);
    margin-left: 280px;
    padding: 0;
    background: #fcf9f8;
}
.portal-body .site-main > .site-main-inner {
    transition: opacity .16s ease, transform .16s ease;
}
.portal-body .site-main.is-loading {
    pointer-events: none;
}
.portal-body .site-main.is-loading > .site-main-inner {
    opacity: .52;
}
.portal-body .site-main.is-loading::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    z-index: 80;
    width: 32%;
    height: 3px;
    border-radius: 999px;
    background: var(--color-accent);
    animation: portal-main-loading .85s ease-in-out infinite;
}
.portal-body .site-main.is-entering > .site-main-inner {
    animation: portal-main-enter .18s ease-out both;
}
@keyframes portal-main-loading {
    from { transform: translateX(-100%); }
    to { transform: translateX(312%); }
}
@keyframes portal-main-enter {
    from { opacity: .35; transform: translateY(3px); }
    to { opacity: 1; transform: none; }
}
.portal-body .site-main-inner:not(.portal-dashboard) {
    max-width: 1100px;
    margin: 0 auto;
    padding: 34px 36px;
}
.portal-dashboard {
    width: min(1220px, calc(100% - 72px));
    margin: 0 auto;
    padding: 33px 0 36px;
}
.portal-welcome h1 { margin: 0 0 .45rem; font-size: 1.8rem; letter-spacing: -.035em; }
.portal-welcome p { margin: 0 0 1.65rem; color: var(--portal-muted); }
.portal-summary-grid {
    display: grid;
    grid-template-columns: 1.13fr 1.05fr 1fr;
    gap: 15px;
}
.portal-summary-card,
.portal-help-card,
.portal-panel {
    border: 1px solid var(--portal-line);
    border-radius: 13px;
    background: #fff;
    box-shadow: 0 5px 14px rgba(53, 45, 41, .045);
}
.portal-summary-card {
    min-height: 144px;
    padding: 24px;
    display: flex;
    align-items: center;
    gap: 20px;
    box-sizing: border-box;
}
.portal-summary-icon {
    flex: 0 0 70px;
    width: 70px;
    height: 70px;
    display: grid;
    place-items: center;
    border-radius: 13px;
    font-size: 1.6rem;
}
.portal-summary-icon--blue { background: var(--color-line); color: var(--color-text); }
.portal-summary-icon--green { background: #eaf9f1; color: #1bbb64; }
.portal-card-label,
.portal-card-note { display: block; color: var(--portal-muted); font-size: .78rem; }
.portal-metric { display: flex; align-items: center; gap: .7rem; margin: .3rem 0; font-size: 2.45rem; font-weight: 700; line-height: 1; }
.portal-metric .stats-change { padding: .35rem .55rem; border-radius: 1rem; background: #e5f8ed; font-size: .68rem; }
.portal-status { display: inline-block; margin: .4rem 0; padding: .25rem .6rem; border-radius: 1rem; font-size: .7rem; font-weight: 600; }
.portal-status.is-live { color: #0aab58; background: #e5f8ed; }
.portal-status.is-offline { color: #9a7600; background: #fff3cd; }
.portal-help-card {
    position: relative;
    overflow: hidden;
    padding: 23px;
    border: 0;
    color: #fff;
    background: var(--color-accent);
}
.portal-help-card strong,
.portal-help-card span { display: block; position: relative; z-index: 1; }
.portal-help-card strong { font-size: .9rem; }
.portal-help-card span { margin: .55rem 0 .9rem; font-size: .75rem; }
.portal-help-card a {
    position: relative;
    z-index: 1;
    display: inline-flex;
    align-items: center;
    gap: 1.2rem;
    padding: .65rem 1rem;
    border-radius: 6px;
    background: #fff;
    color: #3d3937;
    text-decoration: none;
    font-size: .75rem;
    font-weight: 600;
}
.portal-help-card a:hover { transform: translateY(-1px); box-shadow: 0 5px 12px rgba(36, 31, 29, .16); }
.portal-help-art { position: absolute; right: 8px; bottom: -16px; color: rgba(255,255,255,.16); font-size: 6.5rem; }
.portal-dashboard-grid { display: grid; grid-template-columns: 1.2fr 1fr; gap: 22px; margin-top: 24px; }
.portal-panel { overflow: hidden; }
.portal-panel > h2 { margin: 0; padding: 25px 24px 17px; font-size: .93rem; }
.portal-panel > h2 i { width: 20px; margin-right: .45rem; color: var(--portal-blue); text-align: center; }
.portal-appointment {
    margin: 0 23px;
    padding: 14px 16px;
    display: flex;
    align-items: center;
    gap: 16px;
    border: 1px solid #fde2d6;
    border-radius: 10px;
    background: #fef5f2;
}
.portal-appointment--empty {
    min-height: 70px;
    display: grid;
    grid-template-columns: 40px minmax(0, 1fr) auto;
    align-items: center;
    column-gap: 16px;
    box-sizing: border-box;
}
.portal-row-icon {
    flex: 0 0 40px;
    width: 40px;
    height: 40px;
    display: grid;
    place-items: center;
    border-radius: 8px;
    background: #feebe3;
    color: #f55c1b;
    line-height: 1;
}
.portal-row-icon i { display: block; line-height: 1; }
.portal-appointment > div { flex: 1; }
.portal-appointment--empty > div {
    min-width: 0;
    align-self: center;
}
.portal-appointment > div > strong,
.portal-appointment > div > span { display: block; }
.portal-appointment > div > strong { color: #b64717; font-size: .78rem; }
.portal-appointment > div > span { margin-top: .3rem; color: var(--portal-muted); font-size: .7rem; }
.portal-appointment > a,
.portal-talk-row > a {
    padding: .55rem .85rem;
    border: 1px solid #e5dad6;
    border-radius: 7px;
    background: #fff;
    color: var(--portal-ink);
    text-decoration: none;
    font-size: .7rem;
    font-weight: 600;
}
.portal-appointment > a:hover { border-color: var(--portal-blue); color: var(--portal-blue); }
.portal-appointment--empty > a {
    min-height: 34px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    align-self: center;
    justify-self: end;
    line-height: 1;
    box-sizing: border-box;
}
.portal-empty-message {
    min-height: 106px;
    margin: 0 23px 28px;
    padding: 22px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    border: 1px dashed #e7ddd9;
    border-radius: 9px;
    box-sizing: border-box;
}
.portal-empty-message strong,
.portal-empty-message span { display: block; }
.portal-empty-message strong { font-size: .84rem; }
.portal-empty-message span { margin-top: .35rem; color: var(--portal-muted); font-size: .72rem; line-height: 1.45; }
.portal-empty-message > i { color: #d5d1cc; font-size: 3.25rem; }
.portal-message-list { margin: 0 23px 25px; border: 1px solid var(--portal-line); border-radius: 9px; overflow: hidden; }
.portal-message-list a { padding: .7rem 1rem; display: grid; grid-template-columns: 40px 1fr auto; align-items: center; gap: .75rem; border-bottom: 1px solid var(--portal-line); color: var(--portal-ink); text-decoration: none; }
.portal-message-list a:last-child { border-bottom: 0; }
.portal-message-list strong,.portal-message-list small { display: block; }
.portal-message-list strong { font-size: .78rem; }.portal-message-list small { margin-top: .2rem; color: var(--portal-muted); }
.portal-talk-row { min-height: 105px; padding: 21px 25px; display: flex; align-items: center; gap: 14px; border-top: 1px solid var(--portal-line); box-sizing: border-box; }
.portal-talk-row > i { color: var(--portal-blue); font-size: 1.25rem; }
.portal-talk-row > div { flex: 1; }
.portal-talk-row strong,.portal-talk-row span { display: block; }
.portal-talk-row strong { font-size: .87rem; }.portal-talk-row span { margin-top: .3rem; color: var(--portal-muted); font-size: .7rem; }
.portal-talk-row > a { border-color: var(--portal-blue); color: var(--portal-blue); }
.portal-talk-row > a:hover { background: var(--portal-blue); color: #fff; }
.portal-quick-list { margin: 0 22px 23px; border: 1px solid var(--portal-line); border-radius: 9px; overflow: hidden; }
.portal-quick-list a { min-height: 66px; padding: 0 16px; display: grid; grid-template-columns: 29px 1fr 12px; align-items: center; border-bottom: 1px solid var(--portal-line); color: var(--portal-ink); text-decoration: none; box-sizing: border-box; }
.portal-quick-list a:last-child { border-bottom: 0; }
.portal-quick-list a:hover { background: #fffaf7; }
.portal-quick-list a > i:first-child { color: var(--portal-blue); }
.portal-quick-list a > i:last-child { color: var(--portal-muted); font-size: .7rem; }
.portal-quick-list strong,.portal-quick-list small { display: block; }
.portal-quick-list strong { font-size: .78rem; }.portal-quick-list small { margin-top: .25rem; color: var(--portal-muted); font-size: .67rem; }
.portal-blog-note { margin: -8px 24px 20px; color: var(--portal-muted); font-size: .7rem; }
.portal-footer { margin-left: 280px; padding: 17px; border-top: 1px solid var(--portal-line); background: #fff; text-align: center; color: #a2988d; font-size: .7rem; }

@media (max-width: 1120px) {
    .portal-summary-grid { grid-template-columns: 1fr 1fr; }
    .portal-help-card { grid-column: 1 / -1; min-height: 135px; }
    .portal-dashboard-grid { grid-template-columns: 1fr; }
}
@media (max-width: 760px) {
    .portal-topbar { height: 66px; margin-left: 0; padding: 0 20px; justify-content: space-between; }
    .portal-menu-toggle { display: block; }
    .portal-body .site-shell { flex-direction: row; }
    .portal-body .portal-sidebar {
        width: 280px;
        transform: translateX(-100%);
        transition: transform .25s ease;
        box-shadow: 14px 0 35px rgba(20, 17, 16, .24);
    }
    .portal-menu-open .portal-sidebar { transform: none; }
    .portal-menu-open::after { content: ""; position: fixed; inset: 0; z-index: 15; background: rgba(21, 18, 16, .42); }
    .portal-body .site-main { width: 100%; margin-left: 0; }
    .portal-dashboard { width: calc(100% - 32px); padding-top: 25px; }
    .portal-body .site-main-inner:not(.portal-dashboard) { padding: 25px 16px; }
    .portal-footer { margin-left: 0; }
}
@media (max-width: 540px) {
    .portal-account-copy { display: none; }
    .portal-notification { margin: 0; }
    .portal-notification-dropdown {
        position: fixed;
        top: 66px;
        right: 12px;
        width: calc(100vw - 24px);
    }
    .portal-welcome h1 { font-size: 1.5rem; }
    .portal-summary-grid { grid-template-columns: 1fr; }
    .portal-help-card { grid-column: auto; }
    .portal-summary-card { padding: 20px; }
    .portal-summary-icon { flex-basis: 58px; width: 58px; height: 58px; }
    .portal-appointment { align-items: flex-start; flex-wrap: wrap; }
    .portal-appointment > a { margin-left: 56px; }
    .portal-appointment--empty {
        grid-template-columns: 40px minmax(0, 1fr);
        align-items: center;
    }
    .portal-appointment--empty > a {
        grid-column: 2;
        margin-left: 0;
        justify-self: start;
    }
    .portal-empty-message > i { display: none; }
    .portal-talk-row { align-items: flex-start; flex-wrap: wrap; }
    .portal-talk-row > a { margin-left: 34px; }
}

/* Portal submissions --------------------------------------------------- */
.portal-submissions-page {
    max-width: 1120px !important;
    padding-top: 34px !important;
    padding-bottom: 52px !important;
}
.portal-section-heading {
    margin-bottom: 24px;
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 24px;
}
.portal-section-kicker {
    margin-bottom: 7px;
    display: block;
    color: var(--portal-blue);
    font-size: .68rem;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
}
.portal-section-heading h1 {
    margin: 0;
    color: var(--portal-ink);
    font-size: 1.75rem;
    letter-spacing: -.035em;
}
.portal-section-heading p {
    margin: 7px 0 0;
    color: var(--portal-muted);
    font-size: .83rem;
}
.portal-submission-summary {
    margin-bottom: 22px;
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 15px;
}
.portal-submission-stat {
    min-height: 126px;
    padding: 21px;
    display: flex;
    align-items: center;
    gap: 16px;
    border: 1px solid var(--portal-line);
    border-radius: 13px;
    background: #fff;
    box-shadow: 0 5px 14px rgba(53, 45, 41, .045);
    box-sizing: border-box;
}
.portal-submission-stat-icon {
    width: 52px;
    height: 52px;
    flex: 0 0 52px;
    display: grid;
    place-items: center;
    border-radius: 12px;
    font-size: 1.1rem;
}
.portal-submission-stat-icon--blue { background: var(--color-line); color: var(--color-text); }
.portal-submission-stat-icon--green { background: #e9f8f0; color: #18a65b; }
.portal-submission-stat-icon--violet { background: #fef3ee; color: #dc7c53; }
.portal-submission-stat > div > span,
.portal-submission-stat > div > strong,
.portal-submission-stat > div > small { display: block; }
.portal-submission-stat > div > span {
    color: var(--portal-muted);
    font-size: .7rem;
    font-weight: 600;
}
.portal-submission-stat > div > strong {
    margin-top: 4px;
    color: var(--portal-ink);
    font-size: 1.55rem;
    line-height: 1;
    letter-spacing: -.03em;
}
.portal-submission-stat > div > strong.portal-submission-stat-date {
    font-size: 1.25rem;
}
.portal-submission-stat > div > small {
    margin-top: 6px;
    color: #a59b90;
    font-size: .64rem;
}
.portal-submissions-panel {
    overflow: hidden;
    border: 1px solid var(--portal-line);
    border-radius: 13px;
    background: #fff;
    box-shadow: 0 5px 14px rgba(53, 45, 41, .045);
}
.portal-submissions-panel-heading {
    min-height: 78px;
    padding: 0 22px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    border-bottom: 1px solid var(--portal-line);
    box-sizing: border-box;
}
.portal-submissions-panel-heading h2 {
    margin: 0;
    color: var(--portal-ink);
    font-size: .95rem;
}
.portal-submissions-panel-heading p {
    margin: 5px 0 0;
    color: var(--portal-muted);
    font-size: .68rem;
}
.portal-submissions-count {
    padding: 6px 10px;
    border-radius: 999px;
    background: #fef3ef;
    color: #c14e1d;
    font-size: .65rem;
    font-weight: 700;
    white-space: nowrap;
}
.portal-submissions-empty {
    min-height: 310px;
    padding: 42px 24px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    box-sizing: border-box;
}
.portal-submissions-empty-icon {
    width: 72px;
    height: 72px;
    margin-bottom: 18px;
    display: grid;
    place-items: center;
    border-radius: 18px;
    background: #fef3ee;
    color: var(--portal-blue);
    font-size: 1.55rem;
}
.portal-submissions-empty h3 {
    margin: 0;
    color: var(--portal-ink);
    font-size: 1rem;
}
.portal-submissions-empty p {
    max-width: 420px;
    margin: 9px 0 0;
    color: var(--portal-muted);
    font-size: .75rem;
    line-height: 1.55;
}
.portal-submissions-list {
    background: #fff;
}
.portal-submission-item {
    border-bottom: 1px solid var(--portal-line);
}
.portal-submission-item:last-child { border-bottom: 0; }
.portal-submission-item > summary {
    min-height: 86px;
    padding: 14px 20px;
    display: grid;
    grid-template-columns: 44px minmax(0, 1fr) auto 12px;
    align-items: center;
    gap: 15px;
    list-style: none;
    cursor: pointer;
    box-sizing: border-box;
}
.portal-submission-item > summary::-webkit-details-marker { display: none; }
.portal-submission-item > summary:hover { background: #fffaf8; }
.portal-submission-item.is-unread > summary { background: #fff7f4; }
.portal-submission-item.is-unread > summary:hover { background: #fef3ef; }
.portal-submission-avatar {
    position: relative;
    width: 44px;
    height: 44px;
    display: grid;
    place-items: center;
    border-radius: 11px;
    background: #fef1eb;
    color: var(--portal-blue);
}
.portal-submission-unread-dot {
    position: absolute;
    top: -2px;
    right: -2px;
    width: 9px;
    height: 9px;
    display: none;
    border: 2px solid #fff;
    border-radius: 50%;
    background: var(--portal-blue);
}
.portal-submission-item.is-unread .portal-submission-unread-dot { display: block; }
.portal-submission-preview {
    min-width: 0;
}
.portal-submission-sender {
    display: flex;
    align-items: center;
    gap: 8px;
}
.portal-submission-sender strong {
    overflow: hidden;
    color: var(--portal-ink);
    font-size: .8rem;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.portal-submission-new {
    padding: 3px 6px;
    border-radius: 999px;
    background: #fee9e0;
    color: #cf4f19;
    font-size: .55rem;
    font-weight: 700;
    line-height: 1;
    text-transform: uppercase;
}
.portal-submission-new[hidden] { display: none; }
.portal-submission-preview > span:last-child {
    margin-top: 6px;
    display: block;
    overflow: hidden;
    color: var(--portal-muted);
    font-size: .69rem;
    line-height: 1.35;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.portal-submission-meta {
    min-width: 82px;
    text-align: right;
}
.portal-submission-meta time,
.portal-submission-meta small {
    display: block;
}
.portal-submission-meta time {
    color: #696662;
    font-size: .67rem;
    font-weight: 600;
}
.portal-submission-meta small {
    margin-top: 5px;
    color: #aea59b;
    font-size: .61rem;
}
.portal-submission-chevron {
    color: #a69c92;
    font-size: .62rem;
    transition: transform .18s ease;
}
.portal-submission-item[open] .portal-submission-chevron { transform: rotate(180deg); }
.portal-submission-detail {
    padding: 4px 20px 24px 79px;
    background: #fefcfb;
}
.portal-submission-detail-heading {
    padding: 17px 0;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    border-top: 1px solid var(--portal-line);
}
.portal-submission-detail-heading span,
.portal-submission-detail-heading strong { display: block; }
.portal-submission-detail-heading span {
    color: var(--portal-muted);
    font-size: .62rem;
}
.portal-submission-detail-heading strong {
    margin-top: 4px;
    color: var(--portal-ink);
    font-size: .7rem;
}
.portal-submission-detail-heading a {
    padding: 8px 11px;
    display: inline-flex;
    align-items: center;
    gap: 7px;
    border: 1px solid #f2d9ce;
    border-radius: 7px;
    background: #fff;
    color: var(--portal-blue);
    text-decoration: none;
    font-size: .66rem;
    font-weight: 600;
}
.portal-submission-detail-heading a:hover {
    border-color: var(--portal-blue);
    background: #fff7f3;
}
.portal-submission-fields {
    margin: 0;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
}
.portal-submission-fields > div {
    min-width: 0;
    padding: 13px 14px;
    border: 1px solid #f0e7e3;
    border-radius: 9px;
    background: #fff;
}
.portal-submission-fields dt {
    margin-bottom: 6px;
    color: #a49a8f;
    font-size: .59rem;
    font-weight: 700;
    letter-spacing: .04em;
    text-transform: uppercase;
}
.portal-submission-fields dd {
    margin: 0;
    overflow-wrap: anywhere;
    color: var(--portal-ink);
    font-size: .72rem;
    line-height: 1.55;
}
@media (max-width: 760px) {
    .portal-submissions-page { max-width: none !important; }
    .portal-submission-summary { grid-template-columns: 1fr; }
}
@media (max-width: 540px) {
    .portal-section-heading h1 { font-size: 1.5rem; }
    .portal-submission-stat { min-height: 108px; }
    .portal-submissions-panel-heading { min-height: 72px; padding: 0 16px; }
    .portal-submission-item > summary {
        grid-template-columns: 42px minmax(0, 1fr) 10px;
        gap: 12px;
        padding: 13px 15px;
    }
    .portal-submission-meta { display: none; }
    .portal-submission-detail { padding: 2px 15px 18px; }
    .portal-submission-detail-heading { align-items: flex-start; flex-direction: column; }
    .portal-submission-fields { grid-template-columns: 1fr; }
}

/* Portal booking ------------------------------------------------------- */
.portal-booking-page,
.portal-analytics-page {
    max-width: 1120px !important;
    padding-top: 34px !important;
    padding-bottom: 52px !important;
}
.portal-form-alert {
    margin-bottom: 14px;
    padding: 12px 15px;
    display: flex;
    align-items: center;
    gap: 10px;
    border: 1px solid;
    border-radius: 9px;
    font-size: .72rem;
    line-height: 1.4;
}
.portal-form-alert--success { border-color: #bde9cf; background: #ecfaf2; color: #147943; }
.portal-form-alert--error { border-color: #f2c2c2; background: #fff1f1; color: #b52d2d; }
.portal-booking-workspace {
    display: grid;
    grid-template-columns: minmax(0, 1.5fr) minmax(260px, .72fr);
    gap: 18px;
    align-items: stretch;
}
.portal-booking-form-card,
.portal-booking-guide,
.portal-calls-panel {
    border: 1px solid var(--portal-line);
    border-radius: 13px;
    background: #fff;
    box-shadow: 0 5px 14px rgba(53, 45, 41, .045);
}
.portal-booking-form-card { padding: 24px; }
.portal-card-heading {
    margin-bottom: 22px;
    padding-bottom: 18px;
    display: flex;
    align-items: center;
    gap: 13px;
    border-bottom: 1px solid var(--portal-line);
}
.portal-card-heading-icon {
    width: 42px;
    height: 42px;
    flex: 0 0 42px;
    display: grid;
    place-items: center;
    border-radius: 10px;
    background: #fef1eb;
    color: var(--portal-blue);
}
.portal-card-heading h2,
.portal-card-heading p { margin: 0; }
.portal-card-heading h2 { color: var(--portal-ink); font-size: .94rem; }
.portal-card-heading p { margin-top: 5px; color: var(--portal-muted); font-size: .67rem; }
.portal-booking-form label {
    margin: 0;
    display: block;
}
.portal-booking-form label > span:first-child {
    margin-bottom: 7px;
    display: block;
    color: #44403e;
    font-size: .68rem;
    font-weight: 700;
}
.portal-booking-form textarea,
.portal-booking-form input,
.portal-booking-form select,
.portal-reschedule input,
.portal-reschedule select {
    width: 100%;
    border: 1px solid #ece0db;
    border-radius: 8px;
    background: #fff;
    color: var(--portal-ink);
    font: inherit;
    font-size: .72rem;
    box-sizing: border-box;
}
.portal-booking-form textarea {
    min-height: 108px;
    padding: 12px 13px;
    resize: vertical;
    line-height: 1.5;
}
.portal-booking-form input,
.portal-booking-form select {
    height: 43px;
    padding: 0 11px;
}
.portal-booking-form textarea:focus,
.portal-booking-form input:focus,
.portal-booking-form select:focus,
.portal-reschedule input:focus,
.portal-reschedule select:focus {
    outline: 3px solid rgba(246, 98, 35, .12);
    border-color: var(--portal-blue);
}
.portal-booking-fields {
    margin-top: 17px;
    display: grid;
    grid-template-columns: 1fr .85fr .8fr;
    gap: 12px;
}
.portal-input-with-icon {
    position: relative;
    display: block;
}
.portal-input-with-icon > i {
    position: absolute;
    top: 50%;
    left: 12px;
    z-index: 1;
    color: #a59c92;
    font-size: .7rem;
    transform: translateY(-50%);
    pointer-events: none;
}
.portal-input-with-icon input { padding-left: 34px; }
.portal-booking-submit {
    margin-top: 20px;
    display: flex;
    align-items: center;
    gap: 14px;
}
.portal-booking-submit button,
.portal-call-action-buttons form button,
.portal-reschedule form > button {
    min-height: 40px;
    padding: 0 15px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    border: 1px solid var(--portal-blue);
    border-radius: 8px;
    background: var(--portal-blue);
    color: #fff;
    font: inherit;
    font-size: .7rem;
    font-weight: 700;
    cursor: pointer;
}
.portal-booking-submit button:hover,
.portal-call-action-buttons form button:hover,
.portal-reschedule form > button:hover { background: #e64f0f; }
.portal-booking-submit > span { color: #a59b90; font-size: .62rem; }
.portal-booking-guide {
    overflow: hidden;
    border-color: #eb5312;
    background: var(--color-accent);
    color: #fff;
}
.portal-booking-guide-intro { padding: 24px 23px 18px; }
.portal-booking-guide-icon {
    width: 43px;
    height: 43px;
    margin-bottom: 16px;
    display: grid;
    place-items: center;
    border-radius: 11px;
    background: rgba(255,255,255,.14);
    font-size: 1rem;
}
.portal-booking-guide h2 { margin: 0; font-size: .95rem; }
.portal-booking-guide p { margin: 7px 0 0; color: rgba(255,255,255,.75); font-size: .68rem; line-height: 1.5; }
.portal-booking-steps {
    margin: 0;
    padding: 2px 23px 23px;
    list-style: none;
}
.portal-booking-steps li {
    position: relative;
    padding: 10px 0;
    display: grid;
    grid-template-columns: 28px 1fr;
    gap: 10px;
}
.portal-booking-steps li > span {
    width: 26px;
    height: 26px;
    display: grid;
    place-items: center;
    border: 1px solid rgba(255,255,255,.25);
    border-radius: 50%;
    background: rgba(255,255,255,.1);
    font-size: .62rem;
    font-weight: 700;
}
.portal-booking-steps strong,
.portal-booking-steps small { display: block; }
.portal-booking-steps strong { font-size: .7rem; }
.portal-booking-steps small { margin-top: 4px; color: rgba(255,255,255,.7); font-size: .61rem; line-height: 1.45; }
.portal-next-call {
    margin: 0 16px 16px;
    padding: 13px 14px;
    border: 1px solid rgba(255,255,255,.2);
    border-radius: 9px;
    background: rgba(255,255,255,.1);
}
.portal-next-call span,
.portal-next-call strong,
.portal-next-call small { display: block; }
.portal-next-call span { color: rgba(255,255,255,.7); font-size: .57rem; font-weight: 700; text-transform: uppercase; }
.portal-next-call strong { margin-top: 5px; font-size: .72rem; }
.portal-next-call small { margin-top: 4px; color: rgba(255,255,255,.72); font-size: .61rem; }
.portal-calls-panel { margin-top: 22px; overflow: hidden; }
.portal-calls-heading {
    min-height: 78px;
    padding: 0 22px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
    border-bottom: 1px solid var(--portal-line);
    box-sizing: border-box;
}
.portal-calls-heading h2,
.portal-calls-heading p { margin: 0; }
.portal-calls-heading h2 { font-size: .94rem; }
.portal-calls-heading p { margin-top: 5px; color: var(--portal-muted); font-size: .67rem; }
.portal-calls-heading > span {
    padding: 6px 10px;
    border-radius: 999px;
    background: #fef3ef;
    color: #c14e1d;
    font-size: .63rem;
    font-weight: 700;
}
.portal-calls-empty {
    min-height: 235px;
    padding: 35px 20px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    box-sizing: border-box;
}
.portal-calls-empty > span {
    width: 58px;
    height: 58px;
    margin-bottom: 14px;
    display: grid;
    place-items: center;
    border-radius: 15px;
    background: #fef3ee;
    color: var(--portal-blue);
    font-size: 1.2rem;
}
.portal-calls-empty h3 { margin: 0; font-size: .85rem; }
.portal-calls-empty p { margin: 7px 0 0; color: var(--portal-muted); font-size: .67rem; }
.portal-call-card {
    padding: 18px 21px;
    display: grid;
    grid-template-columns: 54px minmax(0, 1fr);
    gap: 16px;
    border-bottom: 1px solid var(--portal-line);
}
.portal-call-card:last-child { border-bottom: 0; }
.portal-call-date {
    width: 54px;
    height: 58px;
    overflow: hidden;
    border: 1px solid #f3e2db;
    border-radius: 10px;
    background: #fff;
    text-align: center;
}
.portal-call-date span {
    height: 20px;
    display: grid;
    place-items: center;
    background: #fef1eb;
    color: #d35620;
    font-size: .53rem;
    font-weight: 800;
    letter-spacing: .06em;
}
.portal-call-date strong { display: block; padding-top: 5px; font-size: 1.1rem; }
.portal-call-copy { min-width: 0; }
.portal-call-title-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 15px;
}
.portal-call-title-row h3 { margin: 0; font-size: .8rem; }
.portal-call-status {
    padding: 5px 8px;
    border-radius: 999px;
    font-size: .56rem;
    font-weight: 700;
    white-space: nowrap;
}
.portal-call-status--confirmed { background: #e5f8ed; color: #118345; }
.portal-call-status--completed { background: #f5f0ee; color: #81766a; }
.portal-call-status--requested { background: #fff6d8; color: #9b7807; }
.portal-call-status--action { background: #fff7dd; color: #b48f16; }
.portal-call-status--declined { background: #ffeded; color: #bd3333; }
.portal-call-copy > p { margin: 7px 0 0; color: #85796c; font-size: .66rem; }
.portal-call-copy > p i { margin-right: 4px; color: var(--portal-blue); }
.portal-call-copy > small { margin-top: 7px; display: block; color: var(--portal-muted); font-size: .64rem; line-height: 1.45; }
.portal-call-note { margin-top: 10px; padding: 9px 11px; border-radius: 7px; background: #fff2f2; color: #9e3a3a; font-size: .64rem; }
.portal-call-action {
    margin-top: 14px;
    padding: 14px;
    border: 1px solid #fbe1d6;
    border-radius: 9px;
    background: #fff7f4;
}
.portal-call-action > div:first-child strong,
.portal-call-action > div:first-child span { display: block; }
.portal-call-action > div:first-child strong { font-size: .7rem; }
.portal-call-action > div:first-child span { margin-top: 4px; color: var(--portal-muted); font-size: .62rem; }
.portal-call-action-buttons { margin-top: 12px; display: flex; align-items: flex-start; gap: 9px; flex-wrap: wrap; }
.portal-call-action-buttons form { margin: 0; }
.portal-reschedule > summary {
    min-height: 40px;
    padding: 0 13px;
    display: inline-flex;
    align-items: center;
    border: 1px solid #ebd5cb;
    border-radius: 8px;
    background: #fff;
    color: #554f4d;
    font-size: .66rem;
    font-weight: 700;
    list-style: none;
    cursor: pointer;
}
.portal-reschedule > summary::-webkit-details-marker { display: none; }
.portal-reschedule[open] { width: 100%; }
.portal-reschedule[open] > summary { margin-bottom: 10px; }
.portal-reschedule form {
    padding: 13px;
    border: 1px solid #f3e2db;
    border-radius: 8px;
    background: #fff;
}
.portal-reschedule form > div { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.portal-reschedule label { color: #696662; font-size: .61rem; font-weight: 700; }
.portal-reschedule input,
.portal-reschedule select { height: 38px; margin-top: 6px; padding: 0 9px; }
.portal-reschedule form > button { margin-top: 11px; }

/* Portal analytics ----------------------------------------------------- */
.portal-analytics-page { position: relative; }
.portal-analytics-page > * { transition: opacity .16s ease; }
.portal-analytics-page.is-loading {
    min-height: 420px;
    pointer-events: none;
}
.portal-analytics-page.is-loading > * { opacity: .5; }
.portal-analytics-page.is-loading::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    z-index: 8;
    width: 34%;
    height: 3px;
    border-radius: 999px;
    background: var(--color-accent);
    animation: portal-analytics-loading .85s ease-in-out infinite;
}
@keyframes portal-analytics-loading {
    from { transform: translateX(-100%); }
    to { transform: translateX(294%); }
}
.portal-analytics-heading { align-items: flex-end; }
.portal-analytics-back {
    margin-bottom: 12px;
    display: inline-flex;
    align-items: center;
    gap: 7px;
    color: #7e7367;
    text-decoration: none;
    font-size: .66rem;
    font-weight: 600;
}
.portal-analytics-back:hover { color: var(--portal-blue); }
.portal-period-switch {
    padding: 4px;
    display: flex;
    gap: 3px;
    border: 1px solid var(--portal-line);
    border-radius: 9px;
    background: #fff;
}
.portal-period-switch a {
    padding: 7px 11px;
    border-radius: 6px;
    color: #877b6e;
    text-decoration: none;
    font-size: .64rem;
    font-weight: 700;
}
.portal-period-switch a:hover { color: var(--portal-blue); }
.portal-period-switch a.is-active { background: var(--portal-blue); color: #fff; }
.portal-analytics-summary {
    margin-bottom: 20px;
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 13px;
}
.portal-analytics-summary--detail { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.portal-analytics-metric {
    min-height: 128px;
    padding: 20px;
    display: flex;
    align-items: center;
    gap: 14px;
    border: 1px solid var(--portal-line);
    border-radius: 13px;
    background: #fff;
    box-shadow: 0 5px 14px rgba(53, 45, 41, .045);
    box-sizing: border-box;
}
.portal-analytics-metric-icon {
    width: 46px;
    height: 46px;
    flex: 0 0 46px;
    display: grid;
    place-items: center;
    border-radius: 11px;
    font-size: .95rem;
}
.portal-analytics-metric-icon--blue { background: var(--color-line); color: var(--color-text); }
.portal-analytics-metric-icon--violet { background: #fef3ee; color: #dc7c53; }
.portal-analytics-metric-icon--amber { background: #fff6d8; color: #ad8606; }
.portal-analytics-metric-icon--green { background: #e9f8f0; color: #18a65b; }
.portal-analytics-metric > div > span,
.portal-analytics-metric > div > strong,
.portal-analytics-metric > div > small { display: block; }
.portal-analytics-metric > div > span { color: var(--portal-muted); font-size: .66rem; font-weight: 600; }
.portal-analytics-metric > div > strong {
    margin-top: 5px;
    color: var(--portal-ink);
    font-size: 1.45rem;
    line-height: 1;
    letter-spacing: -.025em;
}
.portal-analytics-metric > div > strong.portal-analytics-date { font-size: 1.15rem; }
.portal-analytics-metric > div > small { margin-top: 7px; color: #a59b90; font-size: .58rem; line-height: 1.35; }
.portal-metric-change--up { color: #16844a !important; }
.portal-metric-change--down { color: #c84444 !important; }
.portal-metric-change--flat { color: #a59b90 !important; }
.portal-live-dot {
    width: 7px;
    height: 7px;
    margin-right: 7px;
    display: inline-block;
    border-radius: 50%;
    background: #1ab463;
    vertical-align: middle;
    animation: stats-pulse 1.6s ease-in-out infinite;
}
.portal-analytics-panel,
.portal-analytics-empty {
    border: 1px solid var(--portal-line);
    border-radius: 13px;
    background: #fff;
    box-shadow: 0 5px 14px rgba(53, 45, 41, .045);
}
.portal-analytics-panel { overflow: hidden; }
.portal-analytics-panel > header {
    min-height: 74px;
    padding: 0 20px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    border-bottom: 1px solid var(--portal-line);
    box-sizing: border-box;
}
.portal-analytics-panel > header h2,
.portal-analytics-panel > header p { margin: 0; }
.portal-analytics-panel > header h2 { font-size: .85rem; }
.portal-analytics-panel > header p { margin-top: 5px; color: var(--portal-muted); font-size: .62rem; }
.portal-analytics-panel > header > span {
    color: #8d8073;
    font-size: .62rem;
    font-weight: 700;
    white-space: nowrap;
}
.portal-analytics-chart-panel { margin-bottom: 18px; }
.portal-analytics-chart {
    --color-accent: var(--portal-blue);
    padding: 20px 20px 13px;
}
.portal-analytics-chart .stats-areachart { margin: 0; }
.portal-analytics-chart .stats-areachart-svg { height: 240px; }
.portal-analytics-chart .stats-areachart-labels { color: #a59c92; font-size: .6rem; }
.portal-analytics-chart .stats-tooltip { background: var(--portal-ink); font-size: .65rem; }
.portal-analytics-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 18px;
}
.portal-analytics-grid--detail { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.portal-ranking-list a,
.portal-source-list > div {
    min-height: 59px;
    padding: 0 17px;
    display: grid;
    grid-template-columns: 25px minmax(0, 1fr) auto;
    align-items: center;
    gap: 11px;
    border-bottom: 1px solid #f6f0ed;
    color: var(--portal-ink);
    text-decoration: none;
    box-sizing: border-box;
}
.portal-ranking-list a:last-child,
.portal-source-list > div:last-child { border-bottom: 0; }
.portal-ranking-list a:hover { background: #fffaf7; }
.portal-ranking-number {
    width: 23px;
    height: 23px;
    display: grid;
    place-items: center;
    border-radius: 7px;
    background: #fef3ef;
    color: #c05a2f;
    font-size: .59rem;
    font-weight: 800;
}
.portal-ranking-copy,
.portal-source-copy { min-width: 0; }
.portal-ranking-copy strong,
.portal-source-copy strong {
    display: block;
    overflow: hidden;
    font-size: .66rem;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.portal-ranking-copy > span,
.portal-source-copy > span {
    height: 4px;
    margin-top: 7px;
    display: block;
    overflow: hidden;
    border-radius: 999px;
    background: #f6f0ed;
}
.portal-ranking-copy > span i,
.portal-source-copy > span i {
    height: 100%;
    display: block;
    border-radius: inherit;
    background: var(--portal-blue);
}
.portal-ranking-list b,
.portal-source-list b {
    color: #696662;
    font-size: .64rem;
}
.portal-source-list > div { grid-template-columns: 30px minmax(0, 1fr) auto; }
.portal-source-icon {
    width: 29px;
    height: 29px;
    display: grid;
    place-items: center;
    border-radius: 8px;
    background: #fef3ef;
    color: var(--portal-blue);
    font-size: .65rem;
}
.portal-device-list > div {
    min-height: 65px;
    padding: 0 17px;
    display: grid;
    grid-template-columns: 34px minmax(0, 1fr) auto;
    align-items: center;
    gap: 11px;
    border-bottom: 1px solid #f6f0ed;
}
.portal-device-list > div:last-child { border-bottom: 0; }
.portal-device-list > div > span {
    width: 33px;
    height: 33px;
    display: grid;
    place-items: center;
    border-radius: 9px;
    background: #fef3ee;
    color: #dc7c53;
    font-size: .7rem;
}
.portal-device-list > div > div { position: relative; min-width: 0; }
.portal-device-list strong,
.portal-device-list small { display: inline-block; font-size: .65rem; }
.portal-device-list small { position: absolute; right: 0; color: #a2988e; }
.portal-device-list > div > div > i {
    height: 5px;
    margin-top: 7px;
    display: block;
    overflow: hidden;
    border-radius: 999px;
    background: #f6f0ed;
}
.portal-device-list > div > div > i b { height: 100%; display: block; border-radius: inherit; background: #dc7c53; }
.portal-device-list em { color: #696662; font-size: .63rem; font-style: normal; font-weight: 700; }
.portal-event-list > div {
    min-height: 55px;
    padding: 0 17px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 15px;
    border-bottom: 1px solid #f6f0ed;
}
.portal-event-list > div:last-child { border-bottom: 0; }
.portal-event-list span {
    min-width: 0;
    overflow: hidden;
    font-size: .65rem;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.portal-event-list span i { width: 23px; color: var(--portal-blue); }
.portal-event-list strong {
    padding: 4px 7px;
    border-radius: 999px;
    background: #fef3ef;
    color: #ac4b21;
    font-size: .59rem;
}
.portal-panel-empty {
    min-height: 190px;
    padding: 30px;
    display: grid;
    place-items: center;
    color: var(--portal-muted);
    text-align: center;
    font-size: .67rem;
    box-sizing: border-box;
}
.portal-analytics-empty {
    min-height: 330px;
    padding: 45px 24px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    box-sizing: border-box;
}
.portal-analytics-empty > span {
    width: 68px;
    height: 68px;
    margin-bottom: 16px;
    display: grid;
    place-items: center;
    border-radius: 17px;
    background: #fef3ee;
    color: var(--portal-blue);
    font-size: 1.4rem;
}
.portal-analytics-empty h2 { margin: 0; font-size: .95rem; }
.portal-analytics-empty p { max-width: 430px; margin: 8px 0 0; color: var(--portal-muted); font-size: .7rem; line-height: 1.5; }
@media (max-width: 1000px) {
    .portal-analytics-summary { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .portal-analytics-grid--detail { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 850px) {
    .portal-booking-workspace { grid-template-columns: 1fr; }
    .portal-booking-guide { display: grid; grid-template-columns: .8fr 1.2fr; }
    .portal-booking-steps { padding-top: 18px; }
    .portal-next-call { grid-column: 1 / -1; }
}
@media (max-width: 760px) {
    .portal-booking-page,
    .portal-analytics-page { max-width: none !important; }
    .portal-analytics-grid,
    .portal-analytics-grid--detail { grid-template-columns: 1fr; }
}
@media (max-width: 620px) {
    .portal-analytics-heading { align-items: flex-start; flex-direction: column; }
    .portal-booking-fields { grid-template-columns: 1fr; }
    .portal-booking-guide { display: block; }
    .portal-analytics-summary,
    .portal-analytics-summary--detail { grid-template-columns: 1fr; }
    .portal-call-title-row { align-items: flex-start; flex-direction: column; gap: 8px; }
    .portal-reschedule form > div { grid-template-columns: 1fr; }
}
@media (max-width: 480px) {
    .portal-booking-form-card { padding: 18px 16px; }
    .portal-booking-submit { align-items: flex-start; flex-direction: column; }
    .portal-call-card { padding: 16px; grid-template-columns: 48px minmax(0, 1fr); gap: 12px; }
    .portal-call-date { width: 48px; }
    .portal-calls-heading { padding: 0 16px; }
    .portal-period-switch { width: 100%; box-sizing: border-box; }
    .portal-period-switch a { flex: 1; text-align: center; }
}

/* Portal page detail ----------------------------------------------------- */
.portal-page-detail {
    max-width: 960px !important;
    padding-top: 28px !important;
    padding-bottom: 50px !important;
}
.portal-page-heading {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 2rem;
    margin-bottom: 1.3rem;
}
.portal-page-heading h1 {
    margin: 0;
    font-size: 1.65rem;
    letter-spacing: -.025em;
}
.portal-page-heading h1 span {
    margin-left: .25rem;
    color: #a49a90;
    font-weight: 500;
}
.portal-page-heading p {
    margin: .35rem 0 0;
    color: var(--portal-muted);
    font-size: .72rem;
}
.portal-page-heading > a {
    margin-top: .2rem;
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    color: #ba4513;
    text-decoration: none;
    font-size: .74rem;
    font-weight: 600;
}
.portal-page-stats {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 14px;
    margin-bottom: 2.1rem;
}
.portal-page-stats > div {
    min-height: 80px;
    padding: 17px 20px;
    border: 1px solid #f4efed;
    border-radius: 9px;
    background: #fff;
    box-shadow: 0 4px 12px rgba(53, 45, 41, .025);
    box-sizing: border-box;
}
.portal-page-stats span,
.portal-page-stats strong { display: block; }
.portal-page-stats span { color: #766c61; font-size: .7rem; }
.portal-page-stats strong { margin-top: .2rem; font-size: 1.45rem; line-height: 1; }
.portal-page-section { margin-top: 2rem; }
.portal-page-section h2 { margin: 0 0 .4rem; font-size: 1.02rem; }
.portal-page-section > p { margin: 0 0 .8rem; color: #655c53; font-size: .72rem; }
.portal-search-preview,
.portal-social-preview,
.portal-change-request {
    border: 1px solid #e2dfdc;
    border-radius: 10px;
    background: #fff;
}
.portal-search-preview { padding: 16px 20px 18px; }
.portal-search-preview small,
.portal-search-preview strong,
.portal-search-preview span,
.portal-social-preview small,
.portal-social-preview strong,
.portal-social-preview span { display: block; }
.portal-search-preview small { color: #4d463f; font-size: .68rem; }
.portal-search-preview strong { margin: .2rem 0; color: #b84210; font-size: .94rem; }
.portal-search-preview span,
.portal-social-preview span { color: #433d37; font-size: .68rem; line-height: 1.45; }
.portal-social-preview {
    margin-top: .8rem;
    padding: 14px 20px;
    display: flex;
    align-items: center;
    gap: 15px;
}
.portal-social-image {
    flex: 0 0 88px;
    width: 88px;
    height: 66px;
    display: grid;
    place-items: center;
    overflow: hidden;
    border-radius: 7px;
    background: #fee7dd;
    color: #b14111;
}
.portal-social-image img { width: 100%; height: 100%; object-fit: cover; }
.portal-social-preview small { color: var(--portal-muted); font-size: .66rem; }
.portal-social-preview strong { margin: .15rem 0; font-size: .75rem; }
.portal-change-request { padding: 15px 20px 13px; }
.portal-change-request p { margin: 0 0 .65rem; color: #655c53; font-size: .7rem; }
.portal-change-request textarea {
    width: 100%;
    min-height: 86px;
    padding: 12px 14px;
    resize: vertical;
    border: 1px solid #e2dfdc;
    border-radius: 5px;
    background: #fff;
    color: var(--portal-ink);
    font: inherit;
    font-size: .75rem;
    box-sizing: border-box;
}
.portal-change-request textarea:focus { outline: 2px solid rgba(246, 98, 35, .18); border-color: var(--portal-blue); }
.portal-request-actions {
    margin-top: .65rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
}
.portal-file-picker {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    color: #686561;
    font-size: .68rem;
    cursor: pointer;
}
.portal-file-picker:hover { color: var(--portal-blue); }
.portal-file-picker input { position: absolute; width: 1px; height: 1px; opacity: 0; overflow: hidden; }
.portal-request-actions button {
    margin: 0;
    padding: .6rem 1rem;
    border: 1px solid #cec9c3;
    border-radius: 7px;
    background: #fff;
    color: var(--portal-ink);
    font-size: .7rem;
    cursor: pointer;
}
.portal-request-actions button:hover { border-color: var(--portal-blue); color: var(--portal-blue); }
.portal-request-status {
    margin-top: .75rem;
    padding: .7rem 1rem;
    display: flex;
    align-items: center;
    gap: .65rem;
    border-radius: 7px;
    background: #fff;
    color: #544d45;
    font-size: .68rem;
}
.portal-request-badge { padding: .25rem .55rem; border-radius: 5px; font-weight: 600; }
.portal-request-badge--open { background: #fff0bd; color: #806200; }
.portal-request-badge--in_progress { background: #feede6; color: #a6471f; }
.portal-request-badge--resolved { background: #dcf7e7; color: #197344; }
.portal-traffic-section { position: relative; }
.portal-page-chart {
    height: 145px;
    padding: 17px 16px 0;
    display: flex;
    align-items: flex-end;
    gap: 6px;
    border-radius: 8px;
    background: #fff;
    box-sizing: border-box;
}
.portal-page-bar { height: 100%; flex: 1 1 0; display: flex; align-items: flex-end; }
.portal-page-bar span { width: 100%; min-height: 5px; border-radius: 2px 2px 0 0; background: #d8622f; }
.portal-page-chart--empty { align-items: center; justify-content: center; color: var(--portal-muted); font-size: .72rem; }
.portal-traffic-note { margin-top: .55rem !important; color: var(--portal-muted) !important; font-size: .64rem !important; }
.portal-statistics-link {
    position: absolute;
    right: 0;
    bottom: 0;
    color: var(--portal-blue);
    text-decoration: none;
    font-size: .68rem;
    font-weight: 600;
}
@media (max-width: 760px) {
    .portal-page-detail { max-width: none !important; }
}
@media (max-width: 540px) {
    .portal-page-heading { align-items: flex-start; gap: 1rem; }
    .portal-page-heading h1 { font-size: 1.35rem; }
    .portal-page-heading > a { white-space: nowrap; }
    .portal-page-stats { grid-template-columns: 1fr; gap: 8px; }
    .portal-page-stats > div { min-height: 68px; }
    .portal-social-preview { align-items: flex-start; padding: 12px; }
    .portal-social-image { flex-basis: 72px; width: 72px; height: 58px; }
    .portal-request-actions { align-items: flex-end; }
    .portal-request-status { align-items: flex-start; flex-direction: column; }
    .portal-statistics-link { position: static; display: inline-flex; gap: .4rem; margin-top: .25rem; }
}

/* Portal pages overview ------------------------------------------------ */
.portal-pages-page {
    max-width: 1120px !important;
    padding-top: 34px !important;
    padding-bottom: 52px !important;
}
.portal-pages-analytics-link {
    min-height: 38px;
    padding: 0 13px;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    border: 1px solid #f2d9ce;
    border-radius: 8px;
    background: #fff;
    color: #ac4b21;
    text-decoration: none;
    font-size: .66rem;
    font-weight: 700;
    box-shadow: 0 3px 10px rgba(53, 45, 41, .035);
    white-space: nowrap;
}
.portal-pages-analytics-link:hover {
    border-color: var(--portal-blue);
    background: #fff7f4;
    color: var(--portal-blue);
}
.portal-pages-summary {
    margin-bottom: 22px;
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 15px;
}
.portal-pages-stat {
    min-height: 126px;
    padding: 21px;
    display: flex;
    align-items: center;
    gap: 16px;
    overflow: hidden;
    border: 1px solid var(--portal-line);
    border-radius: 13px;
    background: #fff;
    box-shadow: 0 5px 14px rgba(53, 45, 41, .045);
    box-sizing: border-box;
}
.portal-pages-stat-icon {
    width: 52px;
    height: 52px;
    flex: 0 0 52px;
    display: grid;
    place-items: center;
    border-radius: 12px;
    font-size: 1.05rem;
}
.portal-pages-stat-icon--blue { background: var(--color-line); color: var(--color-text); }
.portal-pages-stat-icon--green { background: #e9f8f0; color: #18a65b; }
.portal-pages-stat-icon--violet { background: #fef3ee; color: #dc7c53; }
.portal-pages-stat > div { min-width: 0; }
.portal-pages-stat > div > span,
.portal-pages-stat > div > strong,
.portal-pages-stat > div > small { display: block; }
.portal-pages-stat > div > span {
    color: var(--portal-muted);
    font-size: .7rem;
    font-weight: 600;
}
.portal-pages-stat > div > strong {
    margin-top: 4px;
    overflow: hidden;
    color: var(--portal-ink);
    font-size: 1.55rem;
    line-height: 1;
    letter-spacing: -.03em;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.portal-pages-stat > div > strong.portal-pages-stat-title { font-size: 1.05rem; }
.portal-pages-stat > div > small {
    margin-top: 7px;
    overflow: hidden;
    color: #a59b90;
    font-size: .63rem;
    line-height: 1.35;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.portal-pages-panel {
    overflow: hidden;
    border: 1px solid var(--portal-line);
    border-radius: 13px;
    background: #fff;
    box-shadow: 0 5px 14px rgba(53, 45, 41, .045);
}
.portal-pages-panel-heading {
    min-height: 78px;
    padding: 0 22px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    border-bottom: 1px solid var(--portal-line);
    box-sizing: border-box;
}
.portal-pages-panel-heading h2,
.portal-pages-panel-heading p { margin: 0; }
.portal-pages-panel-heading h2 {
    color: var(--portal-ink);
    font-size: .95rem;
}
.portal-pages-panel-heading p {
    margin-top: 5px;
    color: var(--portal-muted);
    font-size: .68rem;
}
.portal-pages-count {
    padding: 6px 10px;
    border-radius: 999px;
    background: #fef3ef;
    color: #c14e1d;
    font-size: .65rem;
    font-weight: 700;
    white-space: nowrap;
}
.portal-pages-list { background: #fff; }
.portal-page-row {
    min-height: 92px;
    padding: 15px 19px;
    display: grid;
    grid-template-columns: 48px minmax(170px, 1fr) minmax(145px, .6fr) 108px 10px;
    align-items: center;
    gap: 16px;
    border-bottom: 1px solid var(--portal-line);
    color: var(--portal-ink);
    text-decoration: none;
    box-sizing: border-box;
    transition: background .15s ease;
}
.portal-page-row:last-child { border-bottom: 0; }
.portal-page-row:hover { background: #fffaf8; }
.portal-page-row-icon {
    width: 48px;
    height: 48px;
    display: grid;
    place-items: center;
    border-radius: 12px;
    background: #fef1eb;
    color: var(--portal-blue);
    font-size: .9rem;
}
.portal-page-row-icon--warning { background: #fff8df; color: #b38c0a; }
.portal-page-row-copy { min-width: 0; }
.portal-page-row-title {
    display: flex;
    align-items: center;
    gap: 8px;
}
.portal-page-row-title strong {
    overflow: hidden;
    font-size: .78rem;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.portal-page-type {
    padding: 4px 7px;
    flex: 0 0 auto;
    border-radius: 999px;
    background: #f6f2f0;
    color: #877b6f;
    font-size: .54rem;
    font-weight: 700;
}
.portal-page-type--homepage { background: #e7f7ee; color: #15804a; }
.portal-page-type--draft { background: #fdf1e0; color: #a15c07; }
.portal-page-path {
    margin-top: 6px;
    display: block;
    overflow: hidden;
    color: var(--portal-muted);
    font-size: .66rem;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.portal-page-traffic > span {
    display: block;
    color: #a3998f;
    font-size: .57rem;
    font-weight: 600;
}
.portal-page-traffic > i {
    height: 6px;
    margin-top: 8px;
    display: block;
    overflow: hidden;
    border-radius: 999px;
    background: #f6f0ed;
}
.portal-page-traffic > i > b {
    height: 100%;
    display: block;
    border-radius: inherit;
    background: var(--color-accent);
}
.portal-page-views { text-align: right; }
.portal-page-views strong,
.portal-page-views small { display: block; }
.portal-page-views strong {
    color: var(--portal-ink);
    font-size: .86rem;
}
.portal-page-views small {
    margin-top: 4px;
    color: var(--portal-muted);
    font-size: .57rem;
    white-space: nowrap;
}
.portal-page-row-chevron {
    color: #aca399;
    font-size: .58rem;
    transition: transform .15s ease, color .15s ease;
}
.portal-page-row:hover .portal-page-row-chevron {
    color: var(--portal-blue);
    transform: translateX(2px);
}
.portal-pages-empty {
    min-height: 310px;
    padding: 42px 24px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    box-sizing: border-box;
}
.portal-pages-empty > span {
    width: 72px;
    height: 72px;
    margin-bottom: 18px;
    display: grid;
    place-items: center;
    border-radius: 18px;
    background: #fef3ee;
    color: var(--portal-blue);
    font-size: 1.45rem;
}
.portal-pages-empty h3 {
    margin: 0;
    color: var(--portal-ink);
    font-size: 1rem;
}
.portal-pages-empty p {
    max-width: 430px;
    margin: 9px 0 0;
    color: var(--portal-muted);
    font-size: .74rem;
    line-height: 1.55;
}
@media (max-width: 920px) {
    .portal-pages-summary { grid-template-columns: 1fr 1fr; }
    .portal-pages-stat:last-child { grid-column: 1 / -1; }
    .portal-page-row { grid-template-columns: 48px minmax(0, 1fr) 100px 10px; }
    .portal-page-traffic { display: none; }
}
@media (max-width: 760px) {
    .portal-pages-page { max-width: none !important; }
}
@media (max-width: 620px) {
    .portal-pages-heading { align-items: flex-start; flex-direction: column; }
    .portal-pages-summary { grid-template-columns: 1fr; }
    .portal-pages-stat:last-child { grid-column: auto; }
}
@media (max-width: 520px) {
    .portal-pages-analytics-link { width: 100%; justify-content: center; box-sizing: border-box; }
    .portal-pages-panel-heading { min-height: 74px; padding: 0 16px; }
    .portal-pages-panel-heading p { display: none; }
    .portal-page-row {
        min-height: 82px;
        padding: 13px 14px;
        grid-template-columns: 42px minmax(0, 1fr) 10px;
        gap: 12px;
    }
    .portal-page-row-icon { width: 42px; height: 42px; border-radius: 10px; }
    .portal-page-type { display: none; }
    .portal-page-views { display: none; }
}

/* Save website as template -------------------------------------------- */
.site-template-export {
    max-width: 1040px !important;
    padding-bottom: 3rem;
}
.site-template-export-heading {
    margin: 1.7rem 0 1.5rem;
}
.site-template-export-kicker {
    display: block;
    margin-bottom: .4rem;
    color: var(--color-accent-soft);
    font-size: var(--text-xs);
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
}
.site-template-export-heading h1 { margin: 0; font-size: 1.65rem; }
.site-template-export-heading p {
    margin: .55rem 0 0;
    color: var(--color-muted);
    font-size: var(--text-sm);
}
.site-template-export-summary {
    margin-bottom: 1.25rem;
    display: grid;
    grid-template-columns: repeat(6, minmax(0, 1fr));
    gap: .7rem;
}
.site-template-export-summary article {
    min-height: 84px;
    padding: .9rem;
    display: flex;
    flex-direction: column;
    justify-content: center;
    border: 1px solid var(--color-surface-border);
    border-radius: 9px;
    background: var(--color-surface);
    box-sizing: border-box;
}
.site-template-export-summary strong {
    font-family: var(--font-display);
    font-size: 1.35rem;
    line-height: 1;
}
.site-template-export-summary span {
    margin-top: .35rem;
    color: var(--color-muted);
    font-size: var(--text-xs);
}
.site-template-export-grid {
    display: grid;
    grid-template-columns: minmax(0, 1.35fr) minmax(260px, .65fr);
    gap: 1rem;
    align-items: start;
}
.site-template-export-form,
.site-template-export-notes {
    border: 1px solid var(--color-surface-border);
    border-radius: 10px;
    background: var(--color-surface);
    box-shadow: 0 5px 16px rgba(61, 51, 46, .035);
}
.site-template-export-form { padding: 1.35rem; }
.site-template-export-card-heading {
    margin-bottom: 1.15rem;
    padding-bottom: 1rem;
    border-bottom: 1px solid var(--color-line);
}
.site-template-export-card-heading h2 {
    margin: 0;
    padding: 0;
    border: 0;
    font-size: 1rem;
}
.site-template-export-card-heading p {
    margin: .4rem 0 0;
    color: var(--color-muted);
    font-size: var(--text-xs);
    line-height: 1.5;
}
.site-template-export-form label {
    margin-top: 1rem;
    font-weight: 600;
}
.site-template-export-form .site-template-export-card-heading + label { margin-top: 0; }
.site-template-export-form textarea { line-height: 1.5; }
.site-template-export-actions {
    margin-top: 1.25rem;
    display: flex;
    align-items: center;
    gap: .7rem;
}
.site-template-export-actions button,
.site-template-export-actions a { margin-top: 0; }
.site-template-export-notes { overflow: hidden; }
.site-template-export-notes > div {
    padding: 1.05rem;
    display: grid;
    grid-template-columns: 28px minmax(0, 1fr);
    gap: .75rem;
    border-bottom: 1px solid var(--color-line);
}
.site-template-export-notes > div:last-child { border-bottom: 0; }
.site-template-export-note-icon {
    width: 27px;
    height: 27px;
    display: grid;
    place-items: center;
    border-radius: 7px;
    background: #e8f8ef;
    color: #16844a;
    font-weight: 700;
}
.site-template-export-note-icon--muted {
    background: #f4f3f1;
    color: #908477;
}
.site-template-export-notes strong {
    display: block;
    font-size: .82rem;
}
.site-template-export-notes p {
    margin: .35rem 0 0;
    color: var(--color-muted);
    font-size: var(--text-xs);
    line-height: 1.55;
}
.site-template-export-notes .site-template-export-warning {
    display: block;
    background: #fffae9;
}
.site-template-export-warning strong { color: #8b6d0a; }
@media (max-width: 960px) {
    .site-template-export-summary { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .site-template-export-grid { grid-template-columns: 1fr; }
}
@media (max-width: 620px) {
    .site-template-export-summary { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .site-template-export-actions { align-items: stretch; flex-direction: column; }
    .site-template-export-actions button,
    .site-template-export-actions a { width: 100%; text-align: center; box-sizing: border-box; }
}

/* Customer workspace — overview-first and flexbox-only. */
.customer-workspace {
    max-width: 1240px;
    padding-top: 30px;
}
.customer-workspace-heading {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 28px;
    margin-bottom: 22px;
}
.customer-workspace-identity {
    display: flex;
    min-width: 0;
    align-items: center;
    gap: 16px;
}
.customer-workspace-avatar {
    display: inline-flex;
    width: 54px;
    height: 54px;
    flex: 0 0 54px;
    align-items: center;
    justify-content: center;
    border-radius: 15px;
    background: #0a0a0a;
    color: #fff;
    font-size: 1rem;
    font-weight: 800;
    letter-spacing: .03em;
    box-shadow: 0 8px 20px rgba(67, 56, 51, .14);
}
.customer-workspace-kicker {
    display: block;
    margin-bottom: 5px;
    color: #ff5a1f;
    font-size: .7rem;
    font-weight: 800;
    letter-spacing: .09em;
    text-transform: uppercase;
}
.customer-workspace-title-row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 11px;
}
.customer-workspace-title-row h1 {
    margin: 0;
    color: #2a2827;
    font-size: 2rem;
    letter-spacing: -.035em;
}
.customer-workspace-identity p {
    margin: 6px 0 0;
    color: #968b7f;
}
.customer-account-status {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 5px 10px;
    border-radius: 999px;
    background: #e9f8ef;
    color: #16884d;
    font-size: .72rem;
    font-weight: 800;
}
.customer-account-status > span {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: #23b768;
    box-shadow: 0 0 0 3px rgba(35,183,104,.13);
}
.customer-workspace-actions {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: 9px;
}
.customer-workspace-actions .btn,
.customer-workspace-actions button {
    display: inline-flex;
    min-height: 40px;
    align-items: center;
    justify-content: center;
    gap: 8px;
    margin: 0;
}
.customer-workspace-nav {
    display: flex;
    align-items: center;
    gap: 5px;
    margin-bottom: 18px;
    padding: 5px;
    overflow-x: auto;
    border: 1px solid #eee3df;
    border-radius: 11px;
    background: #fff;
}
.customer-workspace-nav a,
.customer-workspace-nav button {
    display: inline-flex;
    min-height: 35px;
    flex: 0 0 auto;
    align-items: center;
    gap: 8px;
    margin: 0;
    padding: 0 13px;
    border: 0;
    border-radius: 8px;
    background: transparent;
    box-shadow: none;
    color: #7f7468;
    font-size: .78rem;
    font-weight: 700;
    text-decoration: none;
}
.customer-workspace-nav a:hover,
.customer-workspace-nav button:hover { background: #fdf6f3; color: #a23e14; }
.customer-workspace-nav .is-active { background: #fef1eb; color: #ff5a1f; }
.customer-summary {
    display: flex;
    align-items: stretch;
    margin-bottom: 22px;
    overflow: hidden;
    border: 1px solid #ede1dc;
    border-radius: 14px;
    background: #fff;
}
.customer-summary article {
    display: flex;
    min-width: 0;
    flex: 1 1 0;
    align-items: center;
    gap: 12px;
    padding: 18px 19px;
    border-right: 1px solid #f1eae7;
}
.customer-summary article:last-child { border-right: 0; }
.customer-summary article > span:last-child {
    display: flex;
    min-width: 0;
    flex-direction: column;
    gap: 3px;
}
.customer-summary-icon {
    display: inline-flex;
    width: 39px;
    height: 39px;
    flex: 0 0 39px;
    align-items: center;
    justify-content: center;
    border-radius: 10px;
}
.customer-summary-icon.is-blue { background: var(--color-line); color: var(--color-text); }
.customer-summary-icon.is-amber { background: #fff7db; color: #b99009; }
.customer-summary-icon.is-violet { background: #fef2ed; color: #db7c53; }
.customer-summary-icon.is-green { background: #e8f8ef; color: #189f59; }
.customer-summary small {
    color: #988c81;
    font-size: .7rem;
    font-style: normal;
    font-weight: 700;
}
.customer-summary strong {
    overflow: hidden;
    color: #2d2b2a;
    font-size: 1rem;
    line-height: 1.2;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.customer-summary em {
    overflow: hidden;
    color: #a89f95;
    font-size: .67rem;
    font-style: normal;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.customer-workspace-columns {
    display: flex;
    align-items: flex-start;
    gap: 22px;
}
.customer-workspace-primary {
    display: flex;
    min-width: 0;
    flex: 1 1 64%;
    flex-direction: column;
    gap: 22px;
}
.customer-workspace-secondary {
    display: flex;
    min-width: 315px;
    flex: 0 1 36%;
    flex-direction: column;
    gap: 22px;
}
.customer-panel-action {
    margin: 0;
    padding: 0;
    border: 0;
    background: transparent;
    box-shadow: none;
    color: #ff5a1f;
    font-size: .75rem;
    font-weight: 800;
    text-decoration: none;
}
.customer-panel-action:hover { background: transparent; color: #b23b08; }
.customer-website-overview {
    display: flex;
    flex-direction: column;
    gap: 19px;
    padding: 22px;
}
.customer-website-main {
    display: flex;
    align-items: center;
    gap: 14px;
}
.customer-website-icon {
    display: inline-flex;
    width: 48px;
    height: 48px;
    flex: 0 0 48px;
    align-items: center;
    justify-content: center;
    border-radius: 12px;
    background: #fef1eb;
    color: #ff5a1f;
    font-size: 1.05rem;
}
.customer-website-main > div {
    display: flex;
    min-width: 0;
    flex-direction: column;
    gap: 4px;
}
.customer-website-main strong { color: #2d2b2a; font-size: 1.08rem; }
.customer-website-main p {
    margin: 0;
    overflow: hidden;
    color: #9e9388;
    font-size: .76rem;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.customer-website-facts {
    display: flex;
    overflow: hidden;
    border: 1px solid #f0e7e4;
    border-radius: 11px;
    background: #fefaf9;
}
.customer-website-facts > span {
    display: flex;
    min-width: 0;
    flex: 1 1 0;
    flex-direction: column;
    gap: 5px;
    padding: 13px 16px;
    border-right: 1px solid #f0e7e4;
}
.customer-website-facts > span:last-child { border-right: 0; }
.customer-website-facts small { color: #988d82; font-size: .68rem; font-weight: 700; }
.customer-website-facts strong {
    overflow: hidden;
    color: #33302f;
    font-size: .86rem;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.customer-website-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 9px;
}
.customer-website-actions .btn {
    display: inline-flex;
    min-height: 39px;
    align-items: center;
    justify-content: center;
    gap: 8px;
    margin: 0;
}
.customer-create-site {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 13px;
    padding: 25px;
}
.customer-create-site-icon {
    display: inline-flex;
    width: 46px;
    height: 46px;
    align-items: center;
    justify-content: center;
    border-radius: 12px;
    background: #fef1eb;
    color: #ff5a1f;
    font-size: 1.05rem;
}
.customer-create-site h3 { margin: 0; color: #2d2b2a; font-size: 1rem; }
.customer-create-site p { margin: 5px 0 0; color: #9d9388; font-size: .78rem; }
.customer-create-site form { width: 100%; margin: 0; }
.customer-inline-fields {
    display: flex;
    align-items: flex-end;
    gap: 12px;
}
.customer-inline-fields label {
    display: flex;
    min-width: 0;
    flex: 1 1 0;
    flex-direction: column;
    gap: 6px;
    margin: 0;
}
.customer-inline-fields label span { color: #70665c; font-size: .74rem; font-weight: 700; }
.customer-inline-fields input,
.customer-inline-fields select { margin: 0; }
.customer-create-site form > button { margin-top: 12px; }
.customer-activity-list {
    display: flex;
    flex-direction: column;
}
.customer-activity-list > a {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 13px 20px;
    border-bottom: 1px solid #f5efed;
    color: #302e2d;
    text-decoration: none;
}
.customer-activity-list > a:last-child { border-bottom: 0; }
.customer-activity-list > a:hover { background: #fffaf8; }
.customer-activity-icon {
    display: inline-flex;
    width: 34px;
    height: 34px;
    flex: 0 0 34px;
    align-items: center;
    justify-content: center;
    border-radius: 9px;
}
.customer-activity-icon.is-blue { background: var(--color-line); color: var(--color-text); }
.customer-activity-icon.is-green { background: #e8f8ef; color: #189f59; }
.customer-activity-icon.is-amber { background: #fff7db; color: #b99009; }
.customer-activity-icon.is-violet { background: #fef2ed; color: #db7c53; }
.customer-activity-icon.is-red { background: #ffeded; color: #d94444; }
.customer-activity-copy {
    display: flex;
    min-width: 0;
    flex: 1;
    flex-direction: column;
    gap: 3px;
}
.customer-activity-copy strong {
    overflow: hidden;
    font-size: .78rem;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.customer-activity-copy small { color: #9e9388; font-size: .69rem; }
.customer-activity-list time { flex: 0 0 auto; color: #a3998f; font-size: .68rem; }
.customer-activity-list > a > i { color: #c3bcb5; font-size: .65rem; }
.customer-detail-list {
    display: flex;
    flex-direction: column;
}
.customer-detail-list > div {
    display: flex;
    align-items: center;
    gap: 11px;
    padding: 12px 18px;
    border-bottom: 1px solid #f5efed;
}
.customer-detail-icon {
    display: inline-flex;
    width: 31px;
    height: 31px;
    flex: 0 0 31px;
    align-items: center;
    justify-content: center;
    border-radius: 8px;
    background: #fcf3f0;
    color: #cc6235;
    font-size: .73rem;
}
.customer-detail-list > div > span:last-child {
    display: flex;
    min-width: 0;
    flex-direction: column;
    gap: 3px;
}
.customer-detail-list small { color: #a2988e; font-size: .66rem; }
.customer-detail-list strong {
    overflow: hidden;
    color: #151514;
    font-size: .76rem;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.customer-detail-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 7px;
    padding: 13px 17px;
}
.customer-detail-actions button,
.customer-detail-actions a.btn {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    min-height: 30px;
    margin: 0;
    padding: 0 10px;
    border: 1px solid #efe2dc;
    border-radius: 7px;
    background: #fff;
    box-shadow: none;
    color: var(--color-text);
    font-size: .68rem;
    font-weight: 600;
}
.customer-detail-actions button:hover,
.customer-detail-actions a.btn:hover { border-color: var(--color-accent); background: var(--color-line); color: var(--color-text); box-shadow: none; transform: none; }
.customer-side-empty {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 19px;
    color: #a3998f;
}
.customer-side-empty > i {
    display: inline-flex;
    width: 36px;
    height: 36px;
    align-items: center;
    justify-content: center;
    border-radius: 9px;
    background: #fcf3f0;
    color: #cb6f48;
}
.customer-side-empty > span,
.customer-side-list a > span:last-child,
.customer-request-list a > span {
    display: flex;
    min-width: 0;
    flex: 1;
    flex-direction: column;
    gap: 3px;
}
.customer-side-empty strong,
.customer-side-list strong,
.customer-request-list strong { color: #151514; font-size: .76rem; }
.customer-side-empty small,
.customer-side-list small,
.customer-request-list small { color: #a2988e; font-size: .67rem; }
.customer-side-list,
.customer-request-list { display: flex; flex-direction: column; }
.customer-side-list a,
.customer-request-list a {
    display: flex;
    align-items: center;
    gap: 11px;
    padding: 12px 17px;
    border-bottom: 1px solid #f5efed;
    color: #151514;
    text-decoration: none;
}
.customer-side-list a:last-child,
.customer-request-list a:last-child { border-bottom: 0; }
.customer-side-list a:hover,
.customer-request-list a:hover { background: #fffaf8; }
.customer-side-date {
    display: inline-flex;
    width: 39px;
    height: 39px;
    flex: 0 0 39px;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0;
    border-radius: 9px;
    background: #fef1eb;
    color: #ff5a1f;
}
.customer-side-date strong { color: inherit; font-size: .86rem; line-height: 1; }
.customer-side-date small { color: inherit; font-size: .57rem; font-weight: 800; text-transform: uppercase; }
.customer-request-list em {
    flex: 0 0 auto;
    padding: 4px 7px;
    border-radius: 999px;
    background: #f8f0ed;
    color: #807569;
    font-size: .59rem;
    font-style: normal;
    font-weight: 800;
    text-transform: capitalize;
}
.customer-request-list em.is-open { background: #fff7dc; color: #a78000; }
.customer-request-list em.is-in_progress { background: #fef1eb; color: #ff5a1f; }
.customer-request-list em.is-resolved { background: #e8f8ef; color: #16884d; }
.customer-panel-footer {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    padding: 12px;
    border-top: 1px solid #f5efed;
    color: #ff5a1f;
    font-size: .7rem;
    font-weight: 800;
    text-decoration: none;
}
.customer-form-fields {
    display: flex;
    flex-wrap: wrap;
    gap: 0 14px;
}
.customer-form-fields > label {
    display: flex;
    min-width: 220px;
    flex: 1 1 calc(50% - 7px);
    flex-direction: column;
    gap: 6px;
    margin: 10px 0 0;
}
.customer-form-fields > label.is-wide { flex-basis: 100%; }
.customer-form-fields label span { font-size: .76rem; font-weight: 700; }
.customer-form-fields input { margin: 0; }
.modal-header > div p {
    margin: 4px 0 0;
    color: #9e9388;
    font-size: .74rem;
}
.customer-modal-actions {
    display: flex;
    justify-content: flex-end;
    gap: 9px;
    margin-top: 18px;
}
.customer-modal-actions button {
    min-height: 39px;
    margin: 0;
}

@media (max-width: 1040px) {
    .customer-workspace-columns { flex-direction: column; }
    .customer-workspace-primary,
    .customer-workspace-secondary { width: 100%; min-width: 0; flex-basis: auto; }
    .customer-summary { flex-wrap: wrap; }
    .customer-summary article { min-width: 42%; border-bottom: 1px solid #f1eae7; }
}
@media (max-width: 780px) {
    .customer-workspace-heading { flex-direction: column; }
    .customer-workspace-actions { justify-content: flex-start; }
    .customer-inline-fields { flex-direction: column; align-items: stretch; }
    .customer-inline-fields label { width: 100%; }
}
@media (max-width: 560px) {
    .customer-workspace { padding-top: 22px; }
    .customer-workspace-identity { align-items: flex-start; }
    .customer-workspace-avatar { width: 44px; height: 44px; flex-basis: 44px; border-radius: 12px; }
    .customer-workspace-title-row h1 { font-size: 1.55rem; }
    .customer-workspace-actions,
    .customer-workspace-actions .btn,
    .customer-workspace-actions button { width: 100%; }
    .customer-summary { flex-direction: column; }
    .customer-summary article { min-width: 0; border-right: 0; }
    .customer-website-facts { flex-direction: column; }
    .customer-website-facts > span { border-right: 0; border-bottom: 1px solid #f0e7e4; }
    .customer-website-facts > span:last-child { border-bottom: 0; }
    .customer-website-actions,
    .customer-website-actions .btn { width: 100%; }
    .customer-activity-list time { display: none; }
    .customer-form-fields > label { min-width: 100%; flex-basis: 100%; }
    .customer-modal-actions { flex-direction: column-reverse; }
    .customer-modal-actions button { width: 100%; }
}

/* Agency operations workspace: agenda, tickets, team and appointments.
   Every new layout in this section uses flexbox. */
.operations-workspace {
    max-width: 1240px;
    padding-top: 30px;
}
.operations-heading {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 28px;
    margin-bottom: 22px;
}
.operations-title {
    display: flex;
    min-width: 0;
    align-items: center;
    gap: 15px;
}
.operations-title-icon {
    display: inline-flex;
    width: 50px;
    height: 50px;
    flex: 0 0 50px;
    align-items: center;
    justify-content: center;
    border-radius: 13px;
    font-size: 1.05rem;
}
.operations-title-icon.is-blue { background: var(--color-line); color: var(--color-text); }
.operations-title-icon.is-amber { background: #fff7db; color: #b99009; }
.operations-title-icon.is-violet { background: #fef2ed; color: #db7c53; }
.operations-kicker {
    display: block;
    margin-bottom: 4px;
    color: #ff5a1f;
    font-size: .69rem;
    font-weight: 800;
    letter-spacing: .09em;
    text-transform: uppercase;
}
.operations-title h1 {
    margin: 0;
    color: #2a2827;
    font-size: 2rem;
    letter-spacing: -.035em;
}
.operations-title p { margin: 5px 0 0; color: #978c80; font-size: .83rem; }
.operations-primary-action {
    display: inline-flex;
    min-height: 41px;
    align-items: center;
    justify-content: center;
    gap: 8px;
    margin: 2px 0 0;
}
.operations-tabs {
    display: flex;
    align-items: center;
    gap: 5px;
    margin-bottom: 18px;
    padding: 5px;
    overflow-x: auto;
    border: 1px solid #eee3df;
    border-radius: 11px;
    background: #fff;
}
.operations-tabs a {
    display: inline-flex;
    min-height: 35px;
    flex: 0 0 auto;
    align-items: center;
    gap: 8px;
    padding: 0 14px;
    border-radius: 8px;
    color: #7f7468;
    font-size: .78rem;
    font-weight: 700;
    text-decoration: none;
}
.operations-tabs a:hover { background: #fdf6f3; color: #a23e14; }
.operations-tabs a.is-active { background: #fef1eb; color: #ff5a1f; }
.operations-summary {
    display: flex;
    align-items: stretch;
    margin-bottom: 22px;
    overflow: hidden;
    border: 1px solid #ede1dc;
    border-radius: 14px;
    background: #fff;
}
.operations-summary article,
.operations-summary > a {
    display: flex;
    min-width: 0;
    flex: 1 1 0;
    align-items: center;
    gap: 12px;
    padding: 18px 19px;
    border-right: 1px solid #f1eae7;
    color: #302e2d;
    text-decoration: none;
}
.operations-summary article:last-child,
.operations-summary > a:last-child { border-right: 0; }
.operations-summary > a { position: relative; transition: background .15s ease; }
.operations-summary > a:hover { background: #fffaf8; }
.operations-summary > a.is-active { background: #fef6f3; }
.operations-summary > a.is-active::after {
    position: absolute;
    right: 14px;
    bottom: 0;
    left: 14px;
    height: 3px;
    border-radius: 3px 3px 0 0;
    background: #f26022;
    content: "";
}
.operations-summary article > span:last-child,
.operations-summary > a > span:last-child {
    display: flex;
    min-width: 0;
    flex-direction: column;
    gap: 3px;
}
.operations-summary-icon {
    display: inline-flex;
    width: 39px;
    height: 39px;
    flex: 0 0 39px;
    align-items: center;
    justify-content: center;
    border-radius: 10px;
}
.operations-summary-icon.is-blue { background: var(--color-line); color: var(--color-text); }
.operations-summary-icon.is-amber { background: #fff7db; color: #b99009; }
.operations-summary-icon.is-violet { background: #fef2ed; color: #db7c53; }
.operations-summary-icon.is-green { background: #e8f8ef; color: #189f59; }
.operations-summary-icon.is-red { background: #ffeded; color: #d94444; }
.operations-summary small { color: #988c81; font-size: .69rem; font-style: normal; font-weight: 700; }
.operations-summary strong {
    overflow: hidden;
    color: #2d2b2a;
    font-size: 1.18rem;
    line-height: 1.15;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.operations-summary em {
    overflow: hidden;
    color: #a89f95;
    font-size: .66rem;
    font-style: normal;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.operations-summary .operations-summary-date { font-size: .88rem; }
.operations-panel {
    overflow: visible;
    border: 1px solid #ede1dc;
    border-radius: 14px;
    background: #fff;
}
.operations-panel-heading {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 18px 20px;
    border-bottom: 1px solid #f2e9e6;
}
.operations-panel-heading h2 { margin: 0; color: #2d2b2a; font-size: .98rem; }
.operations-panel-heading p { margin: 4px 0 0; color: #9e9388; font-size: .75rem; }
.operations-count,
.operations-step {
    display: inline-flex;
    min-width: 28px;
    height: 26px;
    align-items: center;
    justify-content: center;
    padding: 0 8px;
    border-radius: 999px;
    background: #fbf1ed;
    color: #a1512e;
    font-size: .68rem;
    font-weight: 800;
}
.operations-columns {
    display: flex;
    align-items: flex-start;
    gap: 22px;
    margin-bottom: 22px;
}
.operations-column { min-width: 0; flex: 1 1 0; }
.agenda-request-list { display: flex; flex-direction: column; }
.agenda-request-list article {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 14px 18px;
    border-bottom: 1px solid #f5efed;
}
.agenda-request-list article:last-child { border-bottom: 0; }
.agenda-request-date {
    display: inline-flex;
    width: 40px;
    height: 42px;
    flex: 0 0 40px;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    border-radius: 9px;
    background: #fef1eb;
    color: #ff5a1f;
}
.agenda-request-date.is-violet { background: #fef2ed; color: #db7c53; }
.agenda-request-date strong { font-size: .88rem; line-height: 1; }
.agenda-request-date small { margin-top: 2px; color: inherit; font-size: .56rem; font-weight: 800; text-transform: uppercase; }
.agenda-request-copy {
    display: flex;
    min-width: 0;
    flex: 1;
    flex-direction: column;
    gap: 4px;
}
.agenda-request-copy strong { overflow: hidden; color: #151514; font-size: .78rem; text-overflow: ellipsis; white-space: nowrap; }
.agenda-request-copy small { overflow: hidden; color: #9e9388; font-size: .68rem; text-overflow: ellipsis; white-space: nowrap; }
.agenda-request-actions {
    display: flex;
    flex: 0 0 auto;
    align-items: center;
    gap: 6px;
}
.agenda-request-actions form { margin: 0; }
.agenda-request-actions button,
.agenda-request-actions .btn {
    display: inline-flex;
    min-height: 32px;
    align-items: center;
    justify-content: center;
    margin: 0;
    padding: 0 10px;
    font-size: .67rem;
}
.agenda-request-actions .operations-danger-action {
    border: 0;
    background: transparent;
    box-shadow: none;
    color: #c73b3b;
}
.agenda-calendar-panel { overflow: hidden; }
.agenda-calendar-heading { border-bottom: 0; }
.agenda-week-nav {
    display: flex;
    align-items: center;
    overflow: hidden;
    border: 1px solid #efe2dc;
    border-radius: 8px;
}
.agenda-week-nav a {
    display: inline-flex;
    min-width: 34px;
    height: 32px;
    align-items: center;
    justify-content: center;
    padding: 0 10px;
    border-right: 1px solid #efe2dc;
    color: #72685e;
    font-size: .69rem;
    font-weight: 700;
    text-decoration: none;
}
.agenda-week-nav a:last-child { border-right: 0; }
.agenda-week-nav a:hover,
.agenda-week-nav a.is-current { background: #fef3ee; color: #ff5a1f; }
.operations-agenda-scroll {
    max-height: 68vh;
    border: 0;
    border-top: 1px solid #f2e9e6;
    border-radius: 0;
}
.operations-agenda-scroll .agenda-grid {
    display: flex;
    min-width: 900px;
    flex-wrap: wrap;
    border: 0;
    border-radius: 0;
}
.operations-agenda-scroll .agenda-grid-corner,
.operations-agenda-scroll .agenda-hours {
    width: 60px;
    flex: 0 0 60px;
    box-sizing: border-box;
}
.operations-agenda-scroll .agenda-day-header,
.operations-agenda-scroll .agenda-day-col {
    width: calc((100% - 60px) / 7);
    flex: 0 0 calc((100% - 60px) / 7);
    box-sizing: border-box;
}
.operations-agenda-scroll .agenda-grid-corner,
.operations-agenda-scroll .agenda-day-header { min-height: 58px; }
.operations-empty {
    display: flex;
    min-height: 190px;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 24px;
    color: #a1968c;
    text-align: center;
}
.operations-empty > i {
    display: inline-flex;
    width: 44px;
    height: 44px;
    align-items: center;
    justify-content: center;
    border-radius: 12px;
    background: #fcf2ee;
    color: #cb8669;
    font-size: 1rem;
}
.operations-empty > span { display: flex; flex-direction: column; gap: 4px; }
.operations-empty strong { color: #151514; font-size: .82rem; }
.operations-empty small { color: #a3998f; font-size: .7rem; }
.operations-empty .btn { margin: 8px 0 0; }
.operations-empty--compact {
    min-height: auto;
    flex-direction: row;
    justify-content: flex-start;
    border-top: 1px solid #f5efed;
    text-align: left;
}
.operations-text-link {
    color: #ff5a1f;
    font-size: .72rem;
    font-weight: 800;
    text-decoration: none;
}
.operations-filter-bar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 9px;
    margin: 0;
    padding: 14px 18px;
    border-bottom: 1px solid #f2e9e6;
    background: #fefaf9;
}
.operations-filter-bar select {
    width: auto;
    min-width: 160px;
    flex: 0 1 auto;
    margin: 0;
    background-color: #fff;
}
.operations-search-field {
    display: flex;
    min-width: 220px;
    flex: 1 1 280px;
    align-items: center;
    gap: 8px;
    margin: 0;
    padding: 0 11px;
    border: 1px solid var(--color-surface-border);
    border-radius: 7px;
    background: #fff;
    color: #aba299;
}
.operations-search-field input {
    min-width: 0;
    flex: 1;
    margin: 0;
    padding-right: 0;
    padding-left: 0;
    border: 0;
    background: transparent;
    box-shadow: none;
}
.operations-filter-bar .btn {
    display: inline-flex;
    min-height: 38px;
    align-items: center;
    gap: 7px;
    margin: 0;
}
.operations-clear-filter { color: #8e8174; font-size: .7rem; font-weight: 700; }
.operations-ticket-list { display: flex; flex-direction: column; }
.operations-ticket-list > a {
    display: flex;
    align-items: center;
    gap: 13px;
    padding: 14px 19px;
    border-bottom: 1px solid #f5efed;
    color: #302e2d;
    text-decoration: none;
}
.operations-ticket-list > a:last-child { border-bottom: 0; }
.operations-ticket-list > a:hover { background: #fffaf8; }
.operations-ticket-priority {
    width: 4px;
    height: 34px;
    flex: 0 0 4px;
    border-radius: 99px;
    background: #dcccc5;
}
.operations-ticket-priority.is-high { background: #e55454; }
.operations-ticket-priority.is-normal { background: #e37647; }
.operations-ticket-priority.is-low { background: #ada49b; }
.operations-ticket-copy {
    display: flex;
    min-width: 0;
    flex: 1;
    flex-direction: column;
    gap: 4px;
}
.operations-ticket-copy > span { display: flex; align-items: center; gap: 7px; }
.operations-ticket-copy strong { overflow: hidden; font-size: .79rem; text-overflow: ellipsis; white-space: nowrap; }
.operations-ticket-copy small { overflow: hidden; color: #9d9388; font-size: .68rem; text-overflow: ellipsis; white-space: nowrap; }
.operations-new-badge {
    padding: 3px 6px;
    border-radius: 999px;
    background: #fef1eb;
    color: #ff5a1f;
    font-size: .56rem;
    font-style: normal;
    font-weight: 800;
    text-transform: uppercase;
}
.operations-ticket-meta {
    display: flex;
    flex: 0 0 125px;
    flex-direction: column;
    align-items: flex-end;
    gap: 5px;
}
.operations-status {
    padding: 4px 7px;
    border-radius: 999px;
    font-size: .58rem;
    font-style: normal;
    font-weight: 800;
    text-transform: capitalize;
}
.operations-status.is-open { background: #fff7dc; color: #a78000; }
.operations-status.is-in_progress { background: #fef1eb; color: #ff5a1f; }
.operations-status.is-resolved { background: #e8f8ef; color: #16884d; }
.operations-ticket-meta small { color: #a3998f; font-size: .64rem; }
.operations-ticket-meta small.is-overdue { color: #cf4141; font-weight: 800; }
.operations-ticket-list > a > i { color: #c3bcb5; font-size: .65rem; }
.operations-pagination {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 5px;
    padding: 15px;
    border-top: 1px solid #f2e9e6;
}
.operations-pagination a,
.operations-pagination strong {
    display: inline-flex;
    width: 31px;
    height: 31px;
    align-items: center;
    justify-content: center;
    border-radius: 7px;
    color: #7f7468;
    font-size: .7rem;
    text-decoration: none;
}
.operations-pagination a:hover { background: #fcf3f0; }
.operations-pagination strong { background: #ff5a1f; color: #fff; }
.team-summary article:nth-child(2) { flex-grow: 1.35; }
.team-summary-email { font-size: .82rem !important; }
.team-workspace-columns { margin-bottom: 0; }
.team-members-panel { flex: 1 1 68%; }
.team-guidance {
    display: flex;
    flex: 0 1 32%;
    flex-direction: column;
    gap: 16px;
}
.team-member-list { display: flex; flex-direction: column; }
.team-member-list > article {
    display: flex;
    align-items: center;
    gap: 13px;
    padding: 15px 19px;
    border-bottom: 1px solid #f5efed;
}
.team-member-list > article:last-child { border-bottom: 0; }
.team-member-avatar {
    display: inline-flex;
    width: 39px;
    height: 39px;
    flex: 0 0 39px;
    align-items: center;
    justify-content: center;
    border-radius: 11px;
    background: #fef1eb;
    color: #ff5a1f;
    font-size: .8rem;
    font-weight: 800;
}
.team-member-copy {
    display: flex;
    min-width: 0;
    flex: 1;
    flex-direction: column;
    gap: 4px;
}
.team-member-copy > span { display: flex; align-items: center; gap: 7px; }
.team-member-copy strong { overflow: hidden; color: #151514; font-size: .78rem; text-overflow: ellipsis; white-space: nowrap; }
.team-member-copy em {
    padding: 3px 6px;
    border-radius: 999px;
    background: #e8f8ef;
    color: #16884d;
    font-size: .55rem;
    font-style: normal;
    font-weight: 800;
    text-transform: uppercase;
}
.team-member-copy small { color: #a2988e; font-size: .67rem; }
.team-member-actions {
    display: flex;
    flex: 0 0 auto;
    align-items: center;
    gap: 6px;
}
.team-member-actions form,
.team-member-actions .add-file-trigger { margin: 0; }
.team-member-actions .btn {
    display: inline-flex;
    min-height: 32px;
    align-items: center;
    gap: 7px;
    margin: 0;
    padding: 0 10px;
    font-size: .66rem;
}
.team-remove-action {
    display: inline-flex;
    width: 32px;
    height: 32px;
    align-items: center;
    justify-content: center;
    margin: 0;
    padding: 0;
    border: 1px solid #f0d9d9;
    border-radius: 7px;
    background: #fff;
    box-shadow: none;
    color: #cb4848;
}
.team-remove-action:hover { background: #fff4f4; }
.team-remove-action:disabled { opacity: .35; cursor: not-allowed; }
.team-password-menu { width: 280px; padding: 14px; }
.team-password-menu form { display: flex; flex-direction: column; gap: 8px; }
.team-password-menu label { margin: 0; font-size: .71rem; }
.team-password-menu input,
.team-password-menu button { width: 100%; margin: 0; }
.team-guidance-list { display: flex; flex-direction: column; }
.team-guidance-list article {
    display: flex;
    align-items: flex-start;
    gap: 11px;
    padding: 14px 17px;
    border-bottom: 1px solid #f5efed;
}
.team-guidance-list article:last-child { border-bottom: 0; }
.team-guidance-list article > span {
    display: inline-flex;
    width: 33px;
    height: 33px;
    flex: 0 0 33px;
    align-items: center;
    justify-content: center;
    border-radius: 9px;
}
.team-guidance-list article > span.is-blue { background: var(--color-line); color: var(--color-text); }
.team-guidance-list article > span.is-green { background: #e8f8ef; color: #189f59; }
.team-guidance-list article > span.is-amber { background: #fff7db; color: #b99009; }
.team-guidance-list strong { color: #151514; font-size: .75rem; }
.team-guidance-list p { margin: 4px 0 0; color: #a1968c; font-size: .67rem; line-height: 1.45; }
.team-add-card {
    display: flex;
    width: 100%;
    align-items: center;
    gap: 11px;
    margin: 0;
    padding: 15px;
    border: 1px solid #fbdbce;
    border-radius: 12px;
    background: #fff8f5;
    box-shadow: none;
    color: #151514;
    text-align: left;
}
.team-add-card > span {
    display: inline-flex;
    width: 37px;
    height: 37px;
    flex: 0 0 37px;
    align-items: center;
    justify-content: center;
    border-radius: 9px;
    background: #feebe3;
    color: #ff5a1f;
}
.team-add-card > div { display: flex; min-width: 0; flex: 1; flex-direction: column; gap: 3px; }
.team-add-card strong { font-size: .75rem; }
.team-add-card p { margin: 0; color: #9a8f83; font-size: .65rem; }
.team-add-card > i { color: #bf8871; font-size: .7rem; }
.team-security-note {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    margin: 13px 0 0;
    padding: 10px;
    border-radius: 8px;
    background: #fef5f1;
    color: #936551;
    font-size: .68rem;
    line-height: 1.45;
}
.appointment-create-workspace { max-width: 1120px; }
.appointment-create-layout {
    display: flex;
    align-items: flex-start;
    gap: 22px;
}
.appointment-form-panel { min-width: 0; flex: 1 1 68%; }
.appointment-create-sidebar {
    display: flex;
    min-width: 290px;
    flex: 0 1 32%;
    flex-direction: column;
    gap: 16px;
}
.appointment-create-form { margin: 0; }
.appointment-form-section {
    display: flex;
    flex-direction: column;
    gap: 12px;
    padding: 20px;
    border-bottom: 1px solid #f2ebe8;
}
.appointment-form-section > label {
    display: flex;
    flex-direction: column;
    gap: 6px;
    margin: 0;
}
.appointment-form-section > label > span,
.appointment-form-row label > span { color: #70665c; font-size: .73rem; font-weight: 700; }
.appointment-form-section label span em { color: #aea59b; font-size: .62rem; font-style: normal; font-weight: 500; }
.appointment-form-section input,
.appointment-form-section textarea,
.appointment-form-section select { margin: 0; }
.appointment-section-label {
    display: flex;
    align-items: center;
    gap: 11px;
    margin-bottom: 1px;
}
.appointment-section-label > span {
    display: inline-flex;
    width: 34px;
    height: 34px;
    flex: 0 0 34px;
    align-items: center;
    justify-content: center;
    border-radius: 9px;
    background: #fef1eb;
    color: #ff5a1f;
}
.appointment-section-label > span.is-violet { background: #fef2ed; color: #db7c53; }
.appointment-section-label > span.is-green { background: #e8f8ef; color: #189f59; }
.appointment-section-label > div { display: flex; flex-direction: column; gap: 2px; }
.appointment-section-label strong { color: #151514; font-size: .78rem; }
.appointment-section-label small { color: #a2988e; font-size: .67rem; }
.appointment-form-row {
    display: flex;
    align-items: flex-end;
    gap: 11px;
}
.appointment-form-row > label {
    display: flex;
    min-width: 0;
    flex: 1 1 0;
    flex-direction: column;
    gap: 6px;
    margin: 0;
}
.appointment-form-row .appointment-date-field { flex-grow: 1.35; }
.appointment-invite-option {
    flex-direction: row !important;
    align-items: flex-start;
    gap: 10px !important;
    padding: 12px;
    border: 1px solid #efe4df;
    border-radius: 9px;
    background: #fefaf9;
    cursor: pointer;
}
.appointment-invite-option input { width: auto; flex: 0 0 auto; margin: 2px 0 0; }
.appointment-invite-option > span { display: flex; flex-direction: column; gap: 3px; }
.appointment-invite-option > span strong { color: #151514; font-size: .73rem; }
.appointment-invite-option > span small { color: #a1968c; font-size: .65rem; font-weight: 400; }
.appointment-form-actions {
    display: flex;
    justify-content: flex-end;
    gap: 9px;
    padding: 18px 20px;
}
.appointment-form-actions .btn,
.appointment-form-actions button {
    display: inline-flex;
    min-height: 39px;
    align-items: center;
    justify-content: center;
    gap: 8px;
    margin: 0;
}
.appointment-context-card > div {
    display: flex;
    align-items: center;
    gap: 11px;
    padding: 15px 17px;
}
.appointment-context-card > div > span {
    display: inline-flex;
    width: 35px;
    height: 35px;
    flex: 0 0 35px;
    align-items: center;
    justify-content: center;
    border-radius: 9px;
    background: #fff7db;
    color: #b99009;
}
.appointment-context-card > div > div { display: flex; min-width: 0; flex-direction: column; gap: 4px; }
.appointment-context-card strong { overflow: hidden; color: #151514; font-size: .75rem; text-overflow: ellipsis; white-space: nowrap; }
.appointment-context-card small { color: #a1968c; font-size: .65rem; }
.appointment-context-card > a {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 11px 17px;
    border-top: 1px solid #f5efed;
    color: #ff5a1f;
    font-size: .69rem;
    font-weight: 800;
    text-decoration: none;
}
.appointment-guidance-list { display: flex; flex-direction: column; }
.appointment-guidance-list article {
    display: flex;
    align-items: flex-start;
    gap: 11px;
    padding: 13px 17px;
    border-bottom: 1px solid #f5efed;
}
.appointment-guidance-list article:last-child { border-bottom: 0; }
.appointment-guidance-list article > span {
    display: inline-flex;
    width: 24px;
    height: 24px;
    flex: 0 0 24px;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: #fef1eb;
    color: #ff5a1f;
    font-size: .62rem;
    font-weight: 800;
}
.appointment-guidance-list article > div { display: flex; flex-direction: column; gap: 3px; }
.appointment-guidance-list strong { color: #151514; font-size: .72rem; }
.appointment-guidance-list p { margin: 0; color: #a1968c; font-size: .64rem; line-height: 1.4; }
.appointment-private-note {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 13px 15px;
    border: 1px solid #efe4df;
    border-radius: 11px;
    background: #fefaf9;
    color: #85796c;
}
.appointment-private-note > i { color: #af8270; }
.appointment-private-note > span { display: flex; flex-direction: column; gap: 3px; }
.appointment-private-note strong { color: #4a4543; font-size: .71rem; }
.appointment-private-note small { font-size: .63rem; }

@media (max-width: 1040px) {
    .operations-summary { flex-wrap: wrap; }
    .operations-summary article,
    .operations-summary > a { min-width: 42%; border-bottom: 1px solid #f1eae7; }
    .operations-columns,
    .appointment-create-layout { flex-direction: column; }
    .operations-column,
    .appointment-form-panel,
    .appointment-create-sidebar { width: 100%; min-width: 0; flex-basis: auto; }
}
@media (max-width: 760px) {
    .operations-heading { flex-direction: column; }
    .agenda-request-list article { align-items: flex-start; flex-wrap: wrap; }
    .agenda-request-actions { width: 100%; padding-left: 52px; }
    .operations-ticket-meta { flex-basis: auto; }
    .operations-filter-bar select { min-width: 0; flex: 1 1 180px; }
    .team-member-list > article { flex-wrap: wrap; }
    .team-member-actions { width: 100%; padding-left: 52px; }
    .appointment-form-row { flex-wrap: wrap; }
    .appointment-form-row > label { min-width: 145px; }
}
@media (max-width: 560px) {
    .operations-workspace { padding-top: 22px; }
    .operations-title { align-items: flex-start; }
    .operations-title-icon { width: 43px; height: 43px; flex-basis: 43px; }
    .operations-title h1 { font-size: 1.55rem; }
    .operations-primary-action { width: 100%; }
    .operations-summary { flex-direction: column; }
    .operations-summary article,
    .operations-summary > a { min-width: 0; border-right: 0; }
    .agenda-calendar-heading { align-items: flex-start; flex-direction: column; }
    .agenda-request-actions { padding-left: 0; }
    .agenda-request-actions form,
    .agenda-request-actions button,
    .agenda-request-actions .btn { flex: 1; }
    .operations-ticket-list > a { align-items: flex-start; }
    .operations-ticket-meta { display: none; }
    .operations-ticket-list > a > i { margin-top: 9px; }
    .team-member-actions { padding-left: 0; }
    .team-member-actions .add-file-trigger,
    .team-member-actions .btn { flex: 1; }
    .team-member-actions .btn { width: 100%; }
    .appointment-form-row { flex-direction: column; align-items: stretch; }
    .appointment-form-row > label { width: 100%; min-width: 0; }
    .appointment-form-actions { flex-direction: column-reverse; }
    .appointment-form-actions .btn,
    .appointment-form-actions button { width: 100%; }
}

/* Agency overview — a compact control centre, using flexbox only. */
.agency-overview {
    max-width: 1240px;
    padding-top: 30px;
}
.agency-overview-heading {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 28px;
    margin-bottom: 22px;
}
.agency-overview-kicker {
    display: block;
    margin-bottom: 5px;
    color: #ff5a1f;
    font-size: .69rem;
    font-weight: 800;
    letter-spacing: .09em;
    text-transform: uppercase;
}
.agency-overview-heading h1 {
    margin: 0;
    color: #2a2827;
    font-size: 2rem;
    letter-spacing: -.035em;
}
.agency-overview-heading p { margin: 6px 0 0; color: #968b7f; font-size: .83rem; }
.agency-overview-actions {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: 9px;
}
.agency-overview-actions .btn {
    display: inline-flex;
    min-height: 41px;
    align-items: center;
    justify-content: center;
    gap: 8px;
    margin: 0;
}
.agency-overview-tabs { margin-bottom: 18px; }
.agency-overview-summary > a.is-active::after { display: none; }
.agency-overview-columns {
    display: flex;
    align-items: flex-start;
    gap: 22px;
}
.agency-overview-primary { min-width: 0; flex: 1 1 66%; }
.agency-overview-secondary {
    display: flex;
    min-width: 315px;
    flex: 0 1 34%;
    flex-direction: column;
    gap: 22px;
}
.agency-customer-heading .operations-text-link {
    display: inline-flex;
    align-items: center;
    gap: 6px;
}
.agency-customer-search {
    margin: 0;
    padding: 13px 18px;
    border-bottom: 1px solid #f2e9e6;
    background: #fefaf9;
}
.agency-customer-search label {
    display: flex;
    align-items: center;
    gap: 9px;
    margin: 0;
    padding: 0 12px;
    border: 1px solid #efe2dc;
    border-radius: 8px;
    background: #fff;
    color: #ada49b;
}
.agency-customer-search input {
    min-width: 0;
    flex: 1;
    margin: 0;
    padding-right: 0;
    padding-left: 0;
    border: 0;
    background: transparent;
    box-shadow: none;
}
.agency-customer-list {
    display: flex;
    flex-direction: column;
}
.agency-customer-row {
    display: flex;
    align-items: center;
    border-bottom: 1px solid #f5efed;
}
.agency-customer-row:last-child { border-bottom: 0; }
.agency-customer-row:hover { background: #fffaf8; }
.agency-customer-row-link {
    display: flex;
    min-width: 0;
    flex: 1;
    align-items: center;
    gap: 13px;
    padding: 13px 18px;
    color: #302e2d;
    text-decoration: none;
}
.agency-customer-portal-btn { margin: 0; padding: 0 14px 0 0; }
.agency-customer-portal-btn button {
    display: inline-flex;
    width: 30px;
    height: 30px;
    margin: 0;
    align-items: center;
    justify-content: center;
    padding: 0;
    border: 1px solid var(--color-border);
    border-radius: 8px;
    background: #fff;
    color: var(--color-muted);
    font-size: .78rem;
}
@media (hover: hover) and (pointer: fine) {
    .agency-customer-portal-btn button:hover { border-color: var(--color-accent); color: var(--color-accent); background: var(--color-line); box-shadow: none; transform: none; }
}
.agency-customer-avatar {
    display: inline-flex;
    width: 38px;
    height: 38px;
    flex: 0 0 38px;
    align-items: center;
    justify-content: center;
    border-radius: 10px;
    background: #fef1eb;
    color: #ff5a1f;
    font-size: .7rem;
    font-weight: 800;
    letter-spacing: .02em;
}
.agency-customer-copy {
    display: flex;
    min-width: 0;
    flex: 1;
    flex-direction: column;
    gap: 4px;
}
.agency-customer-copy strong {
    overflow: hidden;
    color: #151514;
    font-size: .78rem;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.agency-customer-copy small {
    overflow: hidden;
    color: #a1968c;
    font-size: .67rem;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.agency-customer-project {
    display: inline-flex;
    flex: 0 0 auto;
    align-items: center;
    gap: 6px;
    padding: 5px 8px;
    border-radius: 999px;
    font-size: .6rem;
    font-weight: 800;
}
.agency-customer-project.is-ready { background: #e8f8ef; color: #16884d; }
.agency-customer-project.is-missing { background: #fff7db; color: #a78000; }
.agency-customer-number {
    width: 62px;
    flex: 0 0 62px;
    color: #a2988d;
    font-size: .67rem;
    text-align: right;
}
.agency-customer-row-link > .fa-chevron-right { color: #c4bdb6; font-size: .64rem; }
.agency-side-empty {
    display: flex;
    align-items: center;
    gap: 11px;
    padding: 18px;
}
.agency-side-empty > span {
    display: inline-flex;
    width: 37px;
    height: 37px;
    flex: 0 0 37px;
    align-items: center;
    justify-content: center;
    border-radius: 9px;
    background: #fef1eb;
    color: #ff5a1f;
}
.agency-side-empty > span.is-green { background: #e8f8ef; color: #16884d; }
.agency-side-empty > div { display: flex; flex-direction: column; gap: 3px; }
.agency-side-empty strong { color: #151514; font-size: .75rem; }
.agency-side-empty p { margin: 0; color: #a1968c; font-size: .66rem; }
.agency-today-list,
.agency-work-list { display: flex; flex-direction: column; }
.agency-today-list > a,
.agency-work-list > a {
    display: flex;
    align-items: center;
    gap: 11px;
    padding: 12px 17px;
    border-bottom: 1px solid #f5efed;
    color: #151514;
    text-decoration: none;
}
.agency-today-list > a:last-child,
.agency-work-list > a:last-child { border-bottom: 0; }
.agency-today-list > a:hover,
.agency-work-list > a:hover { background: #fffaf8; }
.agency-today-list time {
    display: inline-flex;
    width: 45px;
    height: 31px;
    flex: 0 0 45px;
    align-items: center;
    justify-content: center;
    border-radius: 8px;
    background: #fef1eb;
    color: #ff5a1f;
    font-size: .66rem;
    font-weight: 800;
}
.agency-today-list > a > span,
.agency-work-list > a > span:nth-child(2) {
    display: flex;
    min-width: 0;
    flex: 1;
    flex-direction: column;
    gap: 3px;
}
.agency-today-list strong,
.agency-work-list strong {
    overflow: hidden;
    font-size: .73rem;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.agency-today-list small,
.agency-work-list small {
    overflow: hidden;
    color: #a1968c;
    font-size: .64rem;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.agency-today-list > a > i,
.agency-work-list > a > i { color: #c3bcb5; font-size: .62rem; }
.agency-work-priority {
    width: 4px;
    height: 31px;
    flex: 0 0 4px;
    border-radius: 99px;
    background: #e37647;
}
.agency-work-priority.is-high { background: #e55454; }
.agency-work-priority.is-low { background: #b7afa7; }
.agency-work-list em { color: inherit; font-style: normal; }
.agency-work-list em.is-overdue { color: #cf4141; font-weight: 800; }
.agency-panel-footer {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    padding: 11px;
    border-top: 1px solid #f5efed;
    color: #ff5a1f;
    font-size: .68rem;
    font-weight: 800;
    text-decoration: none;
}
.agency-quick-actions {
    display: flex;
    flex-direction: column;
    overflow: hidden;
    border: 1px solid #ede1dc;
    border-radius: 14px;
    background: #fff;
}
.agency-quick-actions > a {
    display: flex;
    align-items: center;
    gap: 11px;
    padding: 13px 16px;
    border-bottom: 1px solid #f5efed;
    color: #151514;
    text-decoration: none;
}
.agency-quick-actions > a:last-child { border-bottom: 0; }
.agency-quick-actions > a:hover { background: #fffaf8; }
.agency-quick-actions > a > span {
    display: inline-flex;
    width: 34px;
    height: 34px;
    flex: 0 0 34px;
    align-items: center;
    justify-content: center;
    border-radius: 9px;
}
.agency-quick-actions > a > span.is-blue { background: var(--color-line); color: var(--color-text); }
.agency-quick-actions > a > span.is-violet { background: #fef2ed; color: #db7c53; }
.agency-quick-actions > a > div { display: flex; min-width: 0; flex: 1; flex-direction: column; gap: 3px; }
.agency-quick-actions strong { font-size: .72rem; }
.agency-quick-actions small { color: #a1968c; font-size: .63rem; }
.agency-quick-actions > a > i { color: #bcb4ad; font-size: .65rem; }
.agency-search-results { overflow: hidden; }

@media (max-width: 1040px) {
    .agency-overview-columns { flex-direction: column; }
    .agency-overview-primary,
    .agency-overview-secondary { width: 100%; min-width: 0; flex-basis: auto; }
}
@media (max-width: 700px) {
    .agency-overview-heading { flex-direction: column; }
    .agency-overview-actions { justify-content: flex-start; }
}
@media (max-width: 560px) {
    .agency-overview { padding-top: 22px; }
    .agency-overview-heading h1 { font-size: 1.55rem; }
    .agency-overview-actions,
    .agency-overview-actions .btn { width: 100%; }
    .agency-customer-project,
    .agency-customer-number { display: none; }
}

.agency-module-page { max-width: 1200px; }
.agency-module-heading {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 24px;
    margin-bottom: 22px;
}
.agency-module-title {
    display: flex;
    min-width: 0;
    align-items: center;
    gap: 14px;
}
.agency-module-title .project-link-icon {
    width: 48px;
    height: 48px;
    flex-basis: 48px;
    font-size: 1rem;
}
.agency-module-title h1 {
    margin: 0;
    color: #2a2827;
    font-size: 1.8rem;
    letter-spacing: -.03em;
}
.agency-module-title p { margin: 6px 0 0; color: #968b7f; font-size: .78rem; }
.agency-module-placement {
    display: flex;
    max-width: 310px;
    flex: 0 0 auto;
    align-items: center;
    gap: 10px;
    padding: 11px 13px;
    border: 1px solid;
    border-radius: 10px;
}
.agency-module-placement > i {
    display: inline-flex;
    width: 29px;
    height: 29px;
    flex: 0 0 29px;
    align-items: center;
    justify-content: center;
    border-radius: 8px;
}
.agency-module-placement > span { display: flex; min-width: 0; flex-direction: column; gap: 3px; }
.agency-module-placement strong { font-size: .7rem; }
.agency-module-placement small { font-size: .61rem; line-height: 1.4; }
.agency-module-placement.is-placed { border-color: #ccebd9; background: #f0faf4; color: #16884d; }
.agency-module-placement.is-placed > i { background: #dff5e8; }
.agency-module-placement.is-missing { border-color: #f0e3ba; background: #fffbee; color: #98770a; }
.agency-module-placement.is-missing > i { background: #fff5d2; }
.agency-module-layout { align-items: stretch; }
.agency-module-layout .portal-module-list { min-height: 560px; }
.agency-module-list-heading {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 15px 16px;
    border-bottom: 1px solid #f2e9e5;
}
.agency-module-list-heading > span { display: flex; flex-direction: column; gap: 3px; }
.agency-module-list-heading strong { color: #151514; font-size: .78rem; }
.agency-module-list-heading small { color: #a1968c; font-size: .65rem; }
.agency-module-list-empty {
    display: flex;
    min-height: 120px;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 7px;
    padding: 18px;
    color: #aba299;
    font-size: .7rem;
    text-align: center;
}
.agency-module-list-empty i { color: #dcb6a6; font-size: 1.25rem; }
.agency-module-editor { padding: 0; }
.agency-module-editor-heading {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    padding: 18px 21px;
    border-bottom: 1px solid #f2e9e6;
}
.agency-module-editor-heading > div { display: flex; min-width: 0; flex-direction: column; gap: 3px; }
.agency-module-editor-heading span { color: #a1968c; font-size: .63rem; font-weight: 700; text-transform: uppercase; }
.agency-module-editor-heading h2 { margin: 0; overflow: hidden; color: #151514; font-size: .95rem; text-overflow: ellipsis; white-space: nowrap; }
.agency-module-form {
    display: flex;
    flex-direction: column;
    gap: 13px;
    margin: 0;
    padding: 21px;
}
.agency-module-form > label,
.agency-module-form .portal-form-pair > label {
    display: flex;
    flex-direction: column;
    gap: 6px;
    margin: 0;
}
.agency-module-form label > span { color: #70665c; font-size: .71rem; font-weight: 700; }
.agency-module-form input,
.agency-module-form textarea { margin: 0; }
.agency-module-form > button {
    display: inline-flex;
    align-self: flex-start;
    align-items: center;
    gap: 8px;
    margin: 3px 0 0;
}
.agency-module-actions {
    margin: 0 21px;
    padding: 17px 0 21px;
}
.agency-module-actions > span {
    width: 100%;
    color: #8d8073;
    font-size: .66rem;
    font-weight: 800;
    text-transform: uppercase;
}
.agency-module-delete { margin-left: auto !important; }
.agency-module-delete button {
    display: inline-flex;
    align-items: center;
    gap: 6px;
}
.agency-booking-summary { margin-top: 0; }
.agency-booking-requests { margin-top: 22px; }
.agency-booking-service-form {
    display: flex;
    flex-direction: column;
    gap: 11px;
    margin: 0;
    padding: 17px;
    border-bottom: 1px solid #f2e9e6;
    background: #fefaf9;
}
.agency-booking-service-form label {
    display: flex;
    flex-direction: column;
    gap: 5px;
    margin: 0;
}
.agency-booking-service-form label span { color: #70665c; font-size: .68rem; font-weight: 700; }
.agency-booking-service-form input,
.agency-booking-service-form textarea,
.agency-booking-service-form select { margin: 0; background: #fff; }
.agency-booking-service-form button {
    display: inline-flex;
    align-self: flex-start;
    align-items: center;
    gap: 7px;
    margin: 0;
}
.agency-booking-service-list,
.agency-booking-request-list { display: flex; flex-direction: column; }
.agency-booking-service-list article {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 13px 16px;
    border-bottom: 1px solid #f5efed;
}
.agency-booking-service-list article:last-child { border-bottom: 0; }
.agency-booking-service-icon {
    display: inline-flex;
    width: 33px;
    height: 33px;
    flex: 0 0 33px;
    align-items: center;
    justify-content: center;
    border-radius: 8px;
    background: #fef1eb;
    color: #ff5a1f;
}
.agency-booking-service-list article > span:nth-child(2) {
    display: flex;
    min-width: 0;
    flex: 1;
    flex-direction: column;
    gap: 3px;
}
.agency-booking-service-list strong { color: #151514; font-size: .72rem; }
.agency-booking-service-list small { overflow: hidden; color: #a1968c; font-size: .62rem; text-overflow: ellipsis; white-space: nowrap; }
.agency-booking-service-list form { margin: 0; }
.agency-booking-delete {
    display: inline-flex;
    width: 29px;
    height: 29px;
    align-items: center;
    justify-content: center;
    margin: 0;
    padding: 0;
    border: 0;
    background: transparent;
    box-shadow: none;
    color: #c64a4a;
}
.agency-booking-request-list article {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 15px 18px;
    border-bottom: 1px solid #f5efed;
}
.agency-booking-request-list article:last-child { border-bottom: 0; }
.agency-booking-request-date {
    display: inline-flex;
    width: 41px;
    height: 43px;
    flex: 0 0 41px;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    border-radius: 9px;
    background: #fef1eb;
    color: #ff5a1f;
}
.agency-booking-request-date strong { font-size: .86rem; line-height: 1; }
.agency-booking-request-date small { margin-top: 2px; color: inherit; font-size: .55rem; font-weight: 800; text-transform: uppercase; }
.agency-booking-request-copy {
    display: flex;
    min-width: 0;
    flex: 1;
    flex-direction: column;
    gap: 4px;
}
.agency-booking-request-copy > span { display: flex; flex-wrap: wrap; align-items: center; gap: 7px; }
.agency-booking-request-copy strong { color: #151514; font-size: .76rem; }
.agency-booking-request-copy small { color: #a1968c; font-size: .65rem; }
.agency-booking-request-copy a { color: #b0562f; font-size: .65rem; text-decoration: none; }
.agency-booking-request-copy p { margin: 4px 0 0; color: #807468; font-size: .67rem; line-height: 1.45; }

/* ── Customer onboarding / website brief ───────────────────────────────
   This flow intentionally uses flexbox throughout. The same components
   render on the full onboarding page and inside the customer modal. */
.onboarding-page { scroll-behavior: smooth; }
.onboarding-app-body {
    max-width: 1420px;
    padding: 28px 34px 56px;
}
.onboarding-back { margin: 0 0 18px; }
.onboarding-app-body .wizard-steps {
    margin-bottom: 30px;
    padding: 14px 18px;
    border: 1px solid #f1e1da;
    border-radius: 14px;
    background: #fff;
}
.onboarding-heading {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 32px;
    margin-bottom: 26px;
}
.onboarding-heading > div:first-child { max-width: 790px; }
.onboarding-kicker {
    display: block;
    margin-bottom: 7px;
    color: #ff5a1f;
    font-size: .68rem;
    font-weight: 800;
    letter-spacing: .1em;
    text-transform: uppercase;
}
.onboarding-heading h1 {
    margin: 0;
    color: #2a2827;
    font-size: clamp(1.65rem, 2.5vw, 2.35rem);
    line-height: 1.12;
}
.onboarding-heading p {
    max-width: 730px;
    margin: 10px 0 0;
    color: #908477;
    font-size: .88rem;
    line-height: 1.65;
}
.onboarding-progress {
    flex: 0 0 245px;
    padding: 16px 18px;
    border: 1px solid #f1e1da;
    border-radius: 13px;
    background: #fff;
}
.onboarding-progress > span {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    color: #8a7e71;
    font-size: .68rem;
    font-weight: 700;
}
.onboarding-progress > span strong {
    color: #ff5a1f;
    font-size: 1.18rem;
}
.onboarding-progress > i {
    display: block;
    height: 6px;
    margin: 10px 0 8px;
    overflow: hidden;
    border-radius: 999px;
    background: #f7ece8;
}
.onboarding-progress > i b {
    display: block;
    height: 100%;
    border-radius: inherit;
    background: #ff5a1f;
    transition: width .2s ease;
}
.onboarding-progress > small {
    color: #a3998f;
    font-size: .62rem;
}
.onboarding-layout {
    display: flex;
    align-items: flex-start;
    gap: 24px;
}
.onboarding-sections {
    display: flex;
    min-width: 0;
    flex: 1 1 auto;
    flex-direction: column;
    gap: 20px;
}
.onboarding-guide {
    position: sticky;
    top: 88px;
    display: flex;
    flex: 0 0 270px;
    flex-direction: column;
    padding: 22px;
    border: 1px solid #f1e1da;
    border-radius: 15px;
    background: #fff;
    box-shadow: 0 10px 30px rgba(46, 38, 35, .05);
}
.onboarding-guide-icon {
    display: flex;
    width: 38px;
    height: 38px;
    align-items: center;
    justify-content: center;
    margin-bottom: 15px;
    border-radius: 11px;
    background: #fff7db;
    color: #ae880b;
}
.onboarding-guide h2 {
    margin: 0;
    padding: 0;
    border: 0;
    color: #302e2d;
    font-size: .92rem;
}
.onboarding-guide > p {
    margin: 8px 0 18px;
    color: #978c80;
    font-size: .72rem;
    line-height: 1.6;
}
.onboarding-guide nav {
    display: flex;
    flex-direction: column;
    margin: 0 -8px 18px;
}
.onboarding-guide nav a {
    display: flex;
    align-items: center;
    gap: 9px;
    padding: 9px 8px;
    border-radius: 8px;
    color: #72685e;
    font-size: .69rem;
    font-weight: 700;
    text-decoration: none;
}
.onboarding-guide nav a:hover { background: #fef3ef; color: #ff5a1f; }
.onboarding-guide nav i { width: 15px; color: #c4886e; text-align: center; }
.onboarding-guide-note {
    display: flex;
    flex-direction: column;
    gap: 3px;
    padding: 13px;
    border-radius: 10px;
    background: #fdf7f4;
}
.onboarding-guide-note strong { color: #4a4543; font-size: .69rem; }
.onboarding-guide-note span { color: #9d9388; font-size: .62rem; line-height: 1.45; }

.discovery-section {
    scroll-margin-top: 90px;
    padding: 24px;
    border: 1px solid #f1e1da;
    border-radius: 15px;
    background: #fff;
    box-shadow: 0 8px 25px rgba(46, 38, 35, .035);
}
.discovery-section-header {
    display: flex;
    align-items: flex-start;
    gap: 14px;
    margin-bottom: 22px;
    padding-bottom: 19px;
    border-bottom: 1px solid #f4ebe8;
}
.discovery-section-icon {
    display: flex;
    width: 40px;
    height: 40px;
    flex: 0 0 40px;
    align-items: center;
    justify-content: center;
    border-radius: 11px;
    background: #fef1eb;
    color: #ff5a1f;
}
.discovery-section-header > span:last-child {
    display: flex;
    min-width: 0;
    flex-direction: column;
}
.discovery-section-header small {
    margin-bottom: 3px;
    color: #ff5a1f;
    font-size: .6rem;
    font-weight: 800;
    letter-spacing: .08em;
    text-transform: uppercase;
}
.discovery-section-header strong {
    color: #302e2d;
    font-size: .96rem;
}
.discovery-section-header p {
    max-width: 700px;
    margin: 5px 0 0;
    color: #9e9388;
    font-size: .7rem;
    line-height: 1.5;
}
.discovery-fields {
    display: flex;
    flex-wrap: wrap;
    gap: 20px 18px;
}
.discovery-field {
    display: flex;
    min-width: 240px;
    flex: 1 1 calc(50% - 9px);
    flex-direction: column;
}
.discovery-field--wide { flex-basis: 100%; }
.discovery-field > label {
    display: flex;
    flex-direction: column;
    gap: 4px;
    margin: 0 0 8px;
}
.discovery-field > label strong,
.discovery-field legend {
    color: #4a4543;
    font-size: .72rem;
    font-weight: 750;
}
.discovery-field > label small,
.discovery-hint {
    margin: 0;
    color: #a3998f;
    font-size: .62rem;
    font-weight: 500;
    line-height: 1.45;
}
.discovery-field input,
.discovery-field textarea,
.discovery-field select {
    box-sizing: border-box;
    width: 100%;
    margin: 0;
    border-color: #ebdbd4;
    background: #fff;
    color: #151514;
    font-size: .76rem;
}
.discovery-field textarea {
    min-height: 94px;
    resize: vertical;
    line-height: 1.55;
}
.discovery-field input:focus,
.discovery-field textarea:focus,
.discovery-field select:focus {
    outline: none;
    border-color: #f19168;
    box-shadow: 0 0 0 3px rgba(242, 85, 18, .1);
}
.discovery-field fieldset {
    min-width: 0;
    margin: 0;
    padding: 0;
    border: 0;
}
.discovery-field legend { margin-bottom: 4px; }
.discovery-hint { margin-bottom: 9px; }
.discovery-choices,
.discovery-multi-options {
    display: flex;
    flex-wrap: wrap;
    gap: 9px;
}
.discovery-choice {
    display: flex;
    min-width: 175px;
    flex: 1 1 175px;
    align-items: center;
    gap: 10px;
    margin: 0;
    padding: 12px;
    border: 1px solid #eee1db;
    border-radius: 11px;
    background: #fff;
    cursor: pointer;
    transition: border-color .15s ease, background .15s ease, box-shadow .15s ease;
}
.discovery-choice:hover,
.discovery-choice.is-selected {
    border-color: #f1a07d;
    background: #fef6f3;
}
.discovery-choice.is-selected { box-shadow: inset 0 0 0 1px #f1a07d; }
.discovery-choice > input,
.discovery-multi-option > input {
    position: absolute;
    width: 1px;
    height: 1px;
    opacity: 0;
    pointer-events: none;
}
.discovery-choice-icon {
    display: flex;
    width: 30px;
    height: 30px;
    flex: 0 0 30px;
    align-items: center;
    justify-content: center;
    border-radius: 8px;
    background: #fef1eb;
    color: #ff5a1f;
}
.discovery-choice-copy {
    display: flex;
    min-width: 0;
    flex-direction: column;
    gap: 2px;
}
.discovery-choice-copy strong { color: #151514; font-size: .69rem; }
.discovery-choice-copy small { color: #a2988d; font-size: .59rem; font-weight: 500; line-height: 1.35; }
.discovery-palette {
    display: flex;
    width: 46px;
    height: 30px;
    flex: 0 0 46px;
    overflow: hidden;
    border: 1px solid rgba(46, 38, 35, .08);
    border-radius: 8px;
}
.discovery-palette i { flex: 1 1 0; }
.discovery-multi-option {
    display: flex;
    align-items: center;
    margin: 0;
    padding: 8px 11px;
    border: 1px solid #eee1db;
    border-radius: 999px;
    background: #fff;
    color: #72685e;
    font-size: .66rem;
    font-weight: 700;
    cursor: pointer;
}
.discovery-multi-option:hover,
.discovery-multi-option.is-selected {
    border-color: #f1a07d;
    background: #fef1eb;
    color: #ff5a1f;
}
.discovery-color-control {
    display: flex;
    align-items: center;
    gap: 9px;
}
.discovery-color-swatch {
    width: 38px;
    height: 38px;
    flex: 0 0 38px;
    border: 1px solid #e6d5cd;
    border-radius: 9px;
    background-color: #f7f3f2;
    background-image:
        linear-gradient(45deg, #e9e0dc 25%, transparent 25%),
        linear-gradient(-45deg, #e9e0dc 25%, transparent 25%),
        linear-gradient(45deg, transparent 75%, #e9e0dc 75%),
        linear-gradient(-45deg, transparent 75%, #e9e0dc 75%);
    background-position: 0 0, 0 5px, 5px -5px, -5px 0;
    background-size: 10px 10px;
}
.discovery-color-control input {
    min-width: 0;
    flex: 1 1 auto;
    font-family: var(--font-mono);
    letter-spacing: .03em;
    text-transform: uppercase;
}
.onboarding-actions {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    margin-top: 24px;
    padding: 18px 20px;
    border: 1px solid #f1e1da;
    border-radius: 14px;
    background: #fff;
}
.onboarding-actions > span {
    display: flex;
    align-items: center;
    gap: 15px;
}
.onboarding-actions small { color: #a3998f; font-size: .63rem; }
.onboarding-actions button { display: flex; align-items: center; gap: 8px; margin: 0; }

.modal-box--onboarding {
    max-width: 1050px;
    padding: 22px;
}
.modal-box--onboarding > .modal-header {
    margin-bottom: 18px;
    padding-bottom: 16px;
    border-bottom: 1px solid #f2e9e5;
}
.modal-box--onboarding > .modal-header p {
    margin: 4px 0 0;
    color: #a1968c;
    font-size: .7rem;
}
.modal-box--onboarding form {
    display: flex;
    flex-direction: column;
    gap: 16px;
}
.modal-box--onboarding .discovery-section {
    padding: 20px;
    box-shadow: none;
}
.modal-box--onboarding .customer-modal-actions {
    position: sticky;
    bottom: -22px;
    z-index: 2;
    margin: 0 -22px -22px;
    padding: 15px 22px;
    border-top: 1px solid #f1e1da;
    background: #fff;
}

@media (max-width: 980px) {
    .onboarding-layout { flex-direction: column; }
    .onboarding-guide {
        position: static;
        width: auto;
        flex: 0 0 auto;
        order: -1;
    }
    .onboarding-guide nav { flex-direction: row; flex-wrap: wrap; }
    .onboarding-guide nav a { flex: 1 1 180px; }
}

@media (max-width: 720px) {
    .onboarding-app-body { padding: 20px 16px 40px; }
    .onboarding-heading { align-items: stretch; flex-direction: column; gap: 18px; }
    .onboarding-progress { flex-basis: auto; }
    .onboarding-app-body .wizard-steps {
        align-items: flex-start;
        overflow-x: auto;
    }
    .wizard-step-label { white-space: nowrap; }
    .discovery-section { padding: 18px 15px; }
    .discovery-field { min-width: 100%; flex-basis: 100%; }
    .discovery-choice { min-width: 100%; flex-basis: 100%; }
    .onboarding-actions { align-items: stretch; flex-direction: column-reverse; }
    .onboarding-actions > span { align-items: stretch; flex-direction: column; gap: 8px; }
    .onboarding-actions button { justify-content: center; }
    .modal-box--onboarding { padding: 15px; }
    .modal-box--onboarding .customer-modal-actions {
        bottom: -15px;
        margin: 0 -15px -15px;
        padding: 12px 15px;
    }
}

/* ── Customer portal requests ───────────────────────────────────────────
   Customer-visible request threads. Flexbox is used for the full layout,
   summaries, list rows and conversation timeline. */
.portal-nav-count {
    min-width: 20px;
    margin-left: auto;
    padding: 3px 6px;
    border-radius: 999px;
    background: rgba(255,255,255,.18);
    color: #fff;
    font-size: .58rem;
    font-weight: 800;
    line-height: 1;
    text-align: center;
}
.portal-body .portal-sidebar .site-nav > a.active .portal-nav-count { background: #fff; color: #ff5a1f; }
.portal-request-status { text-decoration: none; }
.portal-request-status > i { margin-left: auto; color: #9c9186; font-size: .65rem; }
.portal-request-status:hover { background: #fdf8f6; }

.portal-requests-page {
    max-width: 1240px !important;
    padding-bottom: 56px !important;
}
.portal-requests-heading { align-items: center; }
.portal-primary-action {
    display: inline-flex;
    min-height: 40px;
    align-items: center;
    justify-content: center;
    gap: 8px;
    margin: 0;
    padding: 0 15px;
    border: 1px solid #ff5a1f;
    border-radius: 8px;
    background: #ff5a1f;
    color: #fff;
    font-size: .7rem;
    font-weight: 750;
    box-shadow: 0 5px 12px rgba(242, 85, 18, .16);
}
.portal-primary-action:hover { background: #de4a0a; }
.portal-request-summary {
    display: flex;
    flex-wrap: wrap;
    gap: 14px;
    margin: 0 0 20px;
}
.portal-request-summary article {
    display: flex;
    min-width: 220px;
    min-height: 105px;
    flex: 1 1 220px;
    align-items: center;
    gap: 14px;
    padding: 18px;
    border: 1px solid var(--portal-line);
    border-radius: 12px;
    background: #fff;
    box-shadow: 0 5px 14px rgba(53, 45, 41, .04);
    box-sizing: border-box;
}
.portal-request-summary article > span {
    display: flex;
    width: 43px;
    height: 43px;
    flex: 0 0 43px;
    align-items: center;
    justify-content: center;
    border-radius: 11px;
}
.portal-request-summary article > span.is-blue { background: var(--color-line); color: var(--color-text); }
.portal-request-summary article > span.is-green { background: #e8f8ef; color: #189f59; }
.portal-request-summary article > span.is-violet { background: #fef2ed; color: #db7c53; }
.portal-request-summary article > div {
    display: flex;
    min-width: 0;
    flex-direction: column;
}
.portal-request-summary small { color: #988c81; font-size: .64rem; font-weight: 700; }
.portal-request-summary strong { margin: 2px 0; color: #302e2d; font-size: 1.35rem; line-height: 1; }
.portal-request-summary em { color: #a89f95; font-size: .6rem; font-style: normal; }
.portal-request-filters {
    display: flex;
    gap: 4px;
    margin-bottom: 14px;
    padding: 4px;
    border: 1px solid var(--portal-line);
    border-radius: 10px;
    background: #fff;
}
.portal-request-filters a {
    display: inline-flex;
    min-height: 34px;
    align-items: center;
    gap: 7px;
    padding: 0 12px;
    border-radius: 7px;
    color: #807569;
    font-size: .66rem;
    font-weight: 750;
    text-decoration: none;
}
.portal-request-filters a:hover { background: #fdf6f3; color: #a23e14; }
.portal-request-filters a.is-active { background: #fef1eb; color: #ff5a1f; }
.portal-request-filters span {
    min-width: 18px;
    padding: 2px 5px;
    border-radius: 999px;
    background: rgba(242, 85, 18, .09);
    font-size: .56rem;
    line-height: 1.2;
    text-align: center;
}
.portal-requests-layout {
    display: flex;
    min-height: 610px;
    align-items: stretch;
    gap: 16px;
}
.portal-request-list-panel,
.portal-request-thread-panel {
    overflow: hidden;
    border: 1px solid var(--portal-line);
    border-radius: 13px;
    background: #fff;
    box-shadow: 0 5px 14px rgba(53, 45, 41, .04);
}
.portal-request-list-panel {
    display: flex;
    min-width: 330px;
    flex: 0 0 390px;
    flex-direction: column;
}
.portal-request-list-panel > header {
    display: flex;
    min-height: 58px;
    align-items: center;
    justify-content: space-between;
    padding: 0 17px;
    border-bottom: 1px solid var(--portal-line);
}
.portal-request-list-panel > header strong { color: #151514; font-size: .73rem; }
.portal-request-list-panel > header span {
    min-width: 22px;
    padding: 4px 7px;
    border-radius: 999px;
    background: #fef3ef;
    color: #ff5a1f;
    font-size: .58rem;
    font-weight: 800;
    text-align: center;
}
.portal-request-list {
    display: flex;
    flex-direction: column;
}
.portal-request-list > a {
    display: flex;
    min-height: 102px;
    align-items: flex-start;
    gap: 11px;
    padding: 15px;
    border-bottom: 1px solid var(--portal-line);
    color: inherit;
    text-decoration: none;
    box-sizing: border-box;
}
.portal-request-list > a:last-child { border-bottom: 0; }
.portal-request-list > a:hover { background: #fffaf8; }
.portal-request-list > a.is-selected { background: #fef3ef; box-shadow: inset 3px 0 0 #ff5a1f; }
.portal-request-list-icon {
    display: flex;
    width: 35px;
    height: 35px;
    flex: 0 0 35px;
    align-items: center;
    justify-content: center;
    border-radius: 9px;
    background: #fef1eb;
    color: #ff5a1f;
}
.portal-request-list-copy {
    display: flex;
    min-width: 0;
    flex: 1 1 auto;
    flex-direction: column;
}
.portal-request-list-copy strong {
    overflow: hidden;
    color: #151514;
    font-size: .7rem;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.portal-request-list-copy small {
    display: -webkit-box;
    margin-top: 5px;
    overflow: hidden;
    color: #988d82;
    font-size: .61rem;
    line-height: 1.35;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
}
.portal-request-list-copy time { margin-top: 7px; color: #afa69d; font-size: .56rem; }
.portal-request-list-meta {
    display: flex;
    flex: 0 0 auto;
    align-items: flex-end;
    flex-direction: column;
    gap: 6px;
}
.portal-request-list-meta small { color: #a99f95; font-size: .54rem; }
.portal-request-list-meta .portal-request-badge { font-size: .55rem; font-style: normal; white-space: nowrap; }
.portal-request-list-empty,
.portal-request-thread-empty {
    display: flex;
    flex: 1 1 auto;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    padding: 42px 25px;
    text-align: center;
}
.portal-request-list-empty > span,
.portal-request-thread-empty > span {
    display: flex;
    width: 48px;
    height: 48px;
    align-items: center;
    justify-content: center;
    margin-bottom: 12px;
    border-radius: 13px;
    background: #fef3ee;
    color: #ff5a1f;
}
.portal-request-list-empty strong,
.portal-request-thread-empty strong { color: #151514; font-size: .75rem; }
.portal-request-list-empty p,
.portal-request-thread-empty p { max-width: 280px; margin: 6px 0 0; color: #a3998f; font-size: .63rem; line-height: 1.5; }

.portal-request-thread-panel {
    display: flex;
    min-width: 0;
    flex: 1 1 auto;
    flex-direction: column;
}
.portal-request-thread-header {
    display: flex;
    min-height: 82px;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
    padding: 15px 20px;
    border-bottom: 1px solid var(--portal-line);
    box-sizing: border-box;
}
.portal-request-thread-header > div { min-width: 0; }
.portal-request-thread-header span { color: #ff5a1f; font-size: .56rem; font-weight: 800; text-transform: uppercase; }
.portal-request-thread-header h2 {
    margin: 3px 0 0;
    overflow: hidden;
    color: #302e2d;
    font-size: .92rem;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.portal-request-thread-header p { margin: 4px 0 0; color: #a3998f; font-size: .58rem; }
.portal-request-thread-header > em { flex: 0 0 auto; font-size: .58rem; font-style: normal; }
.portal-request-thread {
    display: flex;
    flex: 1 1 auto;
    flex-direction: column;
    gap: 18px;
    padding: 22px;
    background: #fefaf9;
}
.portal-request-thread article {
    display: flex;
    max-width: 82%;
    align-items: flex-start;
    gap: 10px;
}
.portal-request-thread article.is-customer { align-self: flex-end; flex-direction: row-reverse; }
.portal-request-author {
    display: flex;
    width: 31px;
    height: 31px;
    flex: 0 0 31px;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: #302e2d;
    color: #fff;
    font-size: .64rem;
    font-weight: 800;
}
.portal-request-thread article.is-customer .portal-request-author { background: #ff5a1f; }
.portal-request-thread article > div {
    min-width: 0;
    padding: 12px 14px;
    border: 1px solid #f1e1da;
    border-radius: 4px 12px 12px;
    background: #fff;
}
.portal-request-thread article.is-customer > div {
    border-color: #fdddcf;
    border-radius: 12px 4px 12px 12px;
    background: #fef3ee;
}
.portal-request-thread article header {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 14px;
}
.portal-request-thread article header strong { color: #151514; font-size: .64rem; }
.portal-request-thread article header time { color: #aea59b; font-size: .52rem; white-space: nowrap; }
.portal-request-thread article p { margin: 7px 0 0; color: #70665c; font-size: .68rem; line-height: 1.55; }
.portal-request-attachment {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-top: 10px;
    padding: 8px 10px;
    border: 1px solid #f1e1da;
    border-radius: 8px;
    background: rgba(255,255,255,.8);
    color: #a1512e;
    text-decoration: none;
}
.portal-request-attachment > span { display: flex; min-width: 0; flex-direction: column; }
.portal-request-attachment strong { overflow: hidden; font-size: .6rem; text-overflow: ellipsis; white-space: nowrap; }
.portal-request-attachment small { margin-top: 2px; color: #a3998f; font-size: .52rem; }
.portal-request-reply {
    padding: 17px 20px;
    border-top: 1px solid var(--portal-line);
    background: #fff;
}
.portal-request-reply > label { margin: 0 0 7px; color: #4a4543; font-size: .65rem; font-weight: 750; }
.portal-request-reply textarea {
    width: 100%;
    margin: 0;
    border-color: #ecdcd5;
    font-size: .7rem;
    box-sizing: border-box;
    resize: vertical;
}
.portal-request-reply > div {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    margin-top: 10px;
}
.portal-request-reply button {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin: 0;
}
.portal-request-reply > small { display: block; margin-top: 7px; color: #a07d0a; font-size: .57rem; }
.portal-new-request-modal .modal-header p { margin: 4px 0 0; color: #a1968c; font-size: .68rem; }
.portal-new-request-modal form { display: flex; flex-direction: column; }
.portal-new-request-modal form > label:not(.portal-file-picker) { margin: 12px 0 6px; color: #4a4543; font-size: .68rem; font-weight: 750; }
.portal-new-request-modal input,
.portal-new-request-modal textarea { margin: 0; }
.portal-file-picker--boxed {
    align-self: flex-start;
    margin-top: 12px;
    padding: 10px 12px;
    border: 1px dashed #e8d3ca;
    border-radius: 8px;
    background: #fffaf8;
}

/* Agency ticket visibility controls */
.ticket-note-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; }
.ticket-note-actions button { margin: 0; }

@media (max-width: 1050px) {
    .portal-requests-layout { flex-direction: column; }
    .portal-request-list-panel { min-width: 0; flex-basis: auto; }
    .portal-request-list { max-height: 360px; overflow-y: auto; }
    .portal-request-thread-panel { min-height: 560px; }
}

@media (max-width: 620px) {
    .portal-requests-heading { align-items: flex-start; }
    .portal-request-summary article { min-width: 100%; }
    .portal-request-filters { overflow-x: auto; }
    .portal-request-list > a { flex-wrap: wrap; }
    .portal-request-list-meta { width: 100%; align-items: center; flex-direction: row; padding-left: 46px; }
    .portal-request-thread article { max-width: 96%; }
    .portal-request-thread article header { align-items: flex-start; flex-direction: column; gap: 2px; }
    .portal-request-reply > div { align-items: stretch; flex-direction: column; }
    .portal-request-reply button { justify-content: center; }
}
.agency-booking-status { flex: 0 0 125px; margin: 0; }
.agency-booking-status select { width: 100%; margin: 0; }

@media (max-width: 860px) {
    .agency-module-heading { flex-direction: column; }
    .agency-module-placement { max-width: none; }
}
@media (max-width: 620px) {
    .agency-module-title { align-items: flex-start; }
    .agency-module-title h1 { font-size: 1.5rem; }
    .agency-module-actions { align-items: stretch; flex-direction: column; }
    .agency-module-actions form,
    .agency-module-actions button { width: 100%; }
    .agency-module-delete { margin-left: 0 !important; }
    .agency-booking-request-list article { flex-wrap: wrap; }
    .agency-booking-status { width: 100%; flex-basis: 100%; padding-left: 53px; }
}

/* Blog layout selection. */
.blog-presentation-panel { margin: 20px 0; overflow: hidden; }
.blog-presentation-form {
    display: flex;
    flex-wrap: wrap;
    gap: 16px;
    margin: 0;
    padding: 19px 20px;
}
.blog-presentation-form > label {
    display: flex;
    min-width: 260px;
    flex: 1 1 320px;
    flex-direction: column;
    gap: 6px;
    margin: 0;
}
.blog-presentation-form > label > span { color: #754f3f; font-size: .72rem; font-weight: 800; }
.blog-presentation-form select { width: 100%; margin: 0; }
.blog-presentation-form small { color: #a1968c; font-size: .63rem; line-height: 1.45; }
.blog-presentation-form code {
    padding: 2px 4px;
    border-radius: 4px;
    background: #faf1ee;
    color: #a1512e;
    font-size: .61rem;
}
@media (max-width: 560px) {
    .blog-presentation-form { padding: 16px; }
    .blog-presentation-form > label { min-width: 100%; }
}

/* Website module studio -------------------------------------------------
   These components belong to the redesigned site.php dashboard. Keep the
   layout flexbox-only so it behaves consistently with the rest of the app. */
.module-studio {
    margin: 0 0 22px;
    overflow: hidden;
    border: 1px solid #ede1dc;
    border-radius: 16px;
    background: #fff;
    box-shadow: 0 8px 24px rgba(53, 45, 41, .045);
}
.module-studio-heading {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 24px;
    padding: 22px 24px;
    border-bottom: 1px solid #f2e9e6;
}
.module-studio-heading > div { min-width: 0; }
.module-studio-heading h2 {
    margin: 0;
    color: #2d2b2a;
    font-size: 1.18rem;
    letter-spacing: -.02em;
}
.module-studio-heading p {
    max-width: 670px;
    margin: 6px 0 0;
    color: #9b9084;
    font-size: .76rem;
    line-height: 1.5;
}
.module-studio-count {
    display: flex;
    min-width: 94px;
    flex: 0 0 auto;
    flex-direction: column;
    align-items: flex-end;
    gap: 2px;
}
.module-studio-count strong { color: #ff5a1f; font-size: 1.35rem; line-height: 1; }
.module-studio-count small { color: #a1968c; font-size: .62rem; font-weight: 700; }
.module-studio-list {
    display: flex;
    flex-wrap: wrap;
    gap: 16px;
    padding: 20px;
    background: #fffaf8;
}
.module-card {
    display: flex;
    box-sizing: border-box;
    min-width: 285px;
    flex: 1 1 calc(50% - 8px);
    flex-direction: column;
    overflow: hidden;
    border: 1px solid #efe2dc;
    border-radius: 14px;
    background: #fff;
    box-shadow: 0 5px 15px rgba(53, 45, 41, .045);
    transition: border-color .16s ease, box-shadow .16s ease, transform .16s ease;
}
.module-card:hover {
    border-color: #ecd1c6;
    box-shadow: 0 10px 25px rgba(53, 45, 41, .08);
    transform: translateY(-2px);
}
.module-card.is-disabled { opacity: .78; }
.module-card.is-disabled:hover { opacity: 1; }
.module-card-visual {
    min-height: 158px;
    padding: 15px 17px 17px;
    background: #ffffff;
    box-sizing: border-box;
}
.module-card--catalogue .module-card-visual { background: #ffffff; }
.module-card--people .module-card-visual { background: #ffffff; }
.module-card--voices .module-card-visual { background: #ffffff; }
.module-card--answers .module-card-visual { background: #ffffff; }
.module-card--portfolio .module-card-visual { background: #ffffff; }
.module-card--calendar .module-card-visual { background: #ffffff; }
.module-card-visual-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 13px;
}
.module-card-visual-top > span {
    color: #825745;
    font-size: .59rem;
    font-weight: 850;
    letter-spacing: .08em;
    text-transform: uppercase;
}
.module-card-toggle-form { margin: 0; }
.module-card-body {
    display: flex;
    flex: 1 1 auto;
    flex-direction: column;
    padding: 17px;
}
.module-card-title {
    display: flex;
    align-items: flex-start;
    gap: 12px;
}
.module-card-title > span {
    display: inline-flex;
    width: 34px;
    height: 34px;
    flex: 0 0 34px;
    align-items: center;
    justify-content: center;
    border-radius: 9px;
    background: #fef1eb;
    color: #ff5a1f;
}
.module-card--people .module-card-title > span,
.module-card--portfolio .module-card-title > span { background: #fef3ee; color: #dc7c53; }
.module-card--voices .module-card-title > span { background: #fff7dc; color: #b68e0a; }
.module-card--answers .module-card-title > span,
.module-card--calendar .module-card-title > span { background: #e8f8ef; color: #169653; }
.module-card-title h3 { margin: 0; color: #302e2d; font-size: .86rem; }
.module-card-title p { margin: 5px 0 0; color: #9a8f83; font-size: .67rem; line-height: 1.45; }
.module-card-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-top: auto;
    padding-top: 17px;
}
.module-card-state {
    display: inline-flex;
    min-width: 0;
    align-items: center;
    gap: 6px;
    color: #918578;
    font-size: .58rem;
    font-weight: 750;
}
.module-card-state.is-ready { color: #16884d; }
.module-card-state.is-warning { color: #a17d08; }
.module-card-state.is-off { color: #a0958a; }
.module-card-manage {
    display: inline-flex;
    flex: 0 0 auto;
    align-items: center;
    gap: 6px;
    color: #ff5a1f;
    font-size: .63rem;
    font-weight: 800;
    text-decoration: none;
}
.module-card-hint { flex: 0 0 auto; color: #afa79e; font-size: .59rem; }
.module-art {
    position: relative;
    display: flex;
    width: 100%;
    height: 96px;
    overflow: hidden;
    border: 1px solid rgba(166, 113, 90, .16);
    border-radius: 11px;
    background: rgba(255, 255, 255, .8);
    box-shadow: 0 6px 18px rgba(91, 75, 68, .08);
    box-sizing: border-box;
}
.module-art--editorial { flex-direction: column; align-items: flex-start; gap: 7px; padding: 16px 122px 14px 16px; }
.module-art--editorial > span:not(.module-art-image) { display: block; height: 6px; border-radius: 99px; background: #eedad1; }
.module-art--editorial .module-art-kicker { width: 44px; height: 4px; background: #f2966f; }
.module-art--editorial .module-art-headline { width: 70%; height: 8px; background: #46413f; }
.module-art--editorial .module-art-headline.is-long { width: 94%; }
.module-art--editorial .module-art-byline { width: 48%; }
.module-art-image {
    position: absolute;
    top: 12px;
    right: 12px;
    bottom: 12px;
    display: flex !important;
    width: 96px;
    height: auto !important;
    align-items: center;
    justify-content: center;
    border-radius: 8px !important;
    background: #fce5db !important;
    color: #cd886b;
}
.module-art--catalogue { align-items: stretch; gap: 7px; padding: 11px; }
.module-art--catalogue > span {
    display: flex;
    min-width: 0;
    flex: 1 1 0;
    flex-direction: column;
    align-items: flex-start;
    gap: 7px;
    padding: 10px;
    border-radius: 8px;
    background: #fff;
    color: #ce5b29;
}
.module-art--catalogue b { margin-top: auto; color: #4a4543; font-size: .58rem; }
.module-art--catalogue small { color: #c1a497; font-size: .5rem; }
.module-art--people { align-items: flex-end; padding: 12px 15px; }
.module-person {
    position: absolute;
    bottom: 20px;
    display: flex;
    width: 44px;
    height: 44px;
    align-items: flex-end;
    justify-content: center;
    overflow: hidden;
    border-radius: 50%;
    background: #fbe0d4;
    color: #e38f6b;
}
.module-person.is-main { left: 18px; width: 58px; height: 58px; }
.module-person.is-second { left: 82px; }
.module-person.is-third { left: 132px; }
.module-people-line { position: absolute; right: 18px; bottom: 47px; width: 30%; height: 6px; border-radius: 99px; background: #eecdbf; }
.module-people-line.is-short { bottom: 32px; width: 22%; background: #f4dfd6; }
.module-art--voices { flex-direction: column; align-items: flex-start; gap: 8px; padding: 14px 17px; color: #cfa829; }
.module-quote-line { display: block; width: 80%; height: 5px; border-radius: 99px; background: #eadeb8; }
.module-quote-line.is-short { width: 52%; }
.module-rating { display: flex; gap: 3px; margin-top: auto; font-size: .5rem; }
.module-art--answers { flex-direction: column; padding: 7px 12px; }
.module-art--answers > span {
    display: flex;
    min-height: 25px;
    align-items: center;
    justify-content: space-between;
    border-bottom: 1px solid #e2ede8;
    color: #3d6151;
}
.module-art--answers > span:last-child { border-bottom: 0; }
.module-art--answers b { font-size: .54rem; }
.module-art--answers small { display: none; }
.module-art--portfolio { flex-wrap: wrap; align-content: flex-start; gap: 7px; padding: 10px; }
.module-project {
    display: flex;
    width: calc(29% - 7px);
    height: 50px;
    align-items: center;
    justify-content: center;
    border-radius: 7px;
    background: #f8e0d6;
    color: #d98967;
}
.module-project.is-large { width: 42%; }
.module-art--portfolio > b { width: 100%; color: #b1694a; font-size: .55rem; }
.module-art--calendar { flex-direction: column; padding: 10px 13px; }
.module-calendar-head,
.module-calendar-days,
.module-calendar-dates { display: flex; align-items: center; }
.module-calendar-head { justify-content: space-between; color: #277b53; font-size: .58rem; }
.module-calendar-days,
.module-calendar-dates { justify-content: space-between; margin-top: 7px; color: #6f8b7d; font-size: .47rem; }
.module-calendar-days > span,
.module-calendar-dates > span { display: inline-flex; width: 20px; align-items: center; justify-content: center; }
.module-calendar-dates .is-selected { height: 20px; border-radius: 50%; background: #23965f; color: #fff; }
.module-art--calendar > small { margin-top: auto; color: #27805a; font-size: .5rem; }

/* Agency pages management --------------------------------------------- */
.admin-pages-page { max-width: 1240px !important; }
.admin-pages-page .portal-pages-summary {
    display: flex;
    flex-wrap: wrap;
}
.admin-pages-page .portal-pages-stat {
    min-width: 240px;
    flex: 1 1 0;
}
.admin-pages-panel { margin-bottom: 22px; }
.admin-pages-list {
    display: flex;
    flex-direction: column;
}
.admin-page-row {
    display: flex;
    align-items: stretch;
    border-bottom: 1px solid var(--portal-line, #ede1dc);
}
.admin-page-row:last-child { border-bottom: 0; }
.admin-page-main {
    display: flex;
    align-items: center;
    gap: 16px;
    min-width: 0;
    flex: 1 1 auto;
    border-bottom: 0;
}
.admin-page-main .portal-page-row-icon { flex: 0 0 48px; }
.admin-page-main .portal-page-row-copy { flex: 1 1 auto; }
.admin-page-main .portal-page-traffic { width: 145px; flex: 0 0 145px; }
.admin-page-main .portal-page-views { width: 108px; flex: 0 0 108px; }
.admin-page-main .portal-page-row-chevron { width: 10px; flex: 0 0 10px; }
.admin-page-actions {
    display: flex;
    flex: 0 0 auto;
    align-items: center;
    gap: 3px;
    padding: 13px 15px 13px 5px;
}
.admin-page-actions form { margin: 0; }
.admin-row-action {
    display: inline-flex;
    min-width: 34px;
    height: 34px;
    align-items: center;
    justify-content: center;
    gap: 6px;
    margin: 0;
    padding: 0 9px;
    border: 1px solid transparent;
    border-radius: 8px;
    background: transparent;
    box-shadow: none;
    color: #82776b;
    font-size: .62rem;
    font-weight: 750;
    text-decoration: none;
}
.admin-row-action:hover { border-color: #f2ddd4; background: #fef6f3; color: #ff5a1f; }
.admin-row-action:disabled { opacity: .32; cursor: not-allowed; }
.admin-row-action.is-danger:hover { border-color: #f0cece; background: #fff1f1; color: #c83d3d; }
.admin-row-action span { display: none; }
.admin-create-panel { margin-top: 22px; overflow: hidden; }
.admin-inline-create-form {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    gap: 14px;
    margin: 0;
    padding: 20px;
}
.admin-inline-create-form > label {
    display: flex;
    min-width: 220px;
    flex: 1 1 280px;
    flex-direction: column;
    gap: 7px;
    margin: 0;
}
.admin-inline-create-form > label > span { color: #754f3f; font-size: .68rem; font-weight: 800; }
.admin-inline-create-form > label em { color: #a89f95; font-size: .58rem; font-style: normal; font-weight: 600; }
.admin-inline-create-form input,
.admin-inline-create-form select { width: 100%; margin: 0; box-sizing: border-box; }
.admin-inline-create-form > button {
    display: inline-flex;
    min-height: 40px;
    align-items: center;
    justify-content: center;
    gap: 7px;
    margin: 0;
}
.admin-panel-note {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    margin: 0;
    padding: 0 20px 20px;
    color: #968a7e;
    font-size: .66rem;
}

@media (max-width: 1080px) {
    .module-card { flex-basis: calc(50% - 16px); }
    .admin-page-row { flex-direction: column; }
    .admin-page-actions {
        justify-content: flex-end;
        padding: 0 15px 13px;
    }
    .admin-row-action span { display: inline; }
}
@media (max-width: 720px) {
    .module-studio-heading { align-items: flex-start; flex-direction: column; }
    .module-studio-count { align-items: flex-start; }
    .module-studio-list { padding: 14px; }
    .module-card { min-width: 100%; flex-basis: 100%; }
    .admin-pages-page .portal-pages-stat { min-width: 100%; }
    .admin-page-main {
        min-height: 82px;
        padding: 13px 14px;
    }
    .admin-page-main .portal-page-traffic,
    .admin-page-main .portal-page-views { display: none; }
    .admin-page-actions { justify-content: flex-start; overflow-x: auto; padding-left: 14px; }
    .admin-inline-create-form { align-items: stretch; flex-direction: column; }
    .admin-inline-create-form > label { min-width: 100%; flex-basis: auto; }
    .admin-inline-create-form > button { width: 100%; }
}

/* Site project workspaces ------------------------------------------------
   The project sidebar already defines the left edge of these screens. Let
   every agency-side workspace use the full remaining canvas instead of
   stopping at an old 1040/1200/1240px cap. Customer portal widths remain
   intentionally separate. */
body:not(.portal-body) .site-shell > .site-main > .site-main-inner {
    width: 100%;
    max-width: none !important;
    margin-right: 0;
    margin-left: 0;
    box-sizing: border-box;
}

body:not(.portal-body) .site-shell .publishing-page:not(.publishing-page--portal) {
    width: 100%;
    max-width: none;
    margin-right: 0;
    margin-left: 0;
    box-sizing: border-box;
}

/* The agency Blog heading does not need decorative editorial artwork. */
.admin-blog-page .blog-workspace-cover {
    display: none;
}