/* ------------------------------------------------------------------
   Vimo Ads panel — styles layered on top of MudBlazor.
   Colours come from MudBlazor theme variables (see Theme/VimoTheme.cs) so light and dark
   themes both work without a second set of hard-coded values.
   ------------------------------------------------------------------ */

html, body {
    font-family: Vazirmatn, "Noto Naskh Arabic", "Segoe UI", Tahoma, system-ui, sans-serif;
    /* Nothing may scroll the page sideways. Wide content — a table, a chart — scrolls inside its own box
       instead; a right-to-left page that overflows horizontally lets the reader drag the whole layout off
       into empty space, which is what a stray few pixels of overflow used to do here. */
    overflow-x: hidden;
    max-width: 100%;
}

/* Tables are the usual source: they are as wide as their columns need, which on a narrow screen is wider
   than the card holding them. Scrolled within the card, not by the page. */
.vimo-card .mud-table-container,
.vimo-card .mud-simple-table {
    overflow-x: auto;
    max-width: 100%;
}

/* The page background before MudBlazor has rendered anything.

   theme.js stamps data-theme on <html> from localStorage while the document is still parsing, so these two
   rules are what stop a light-theme browser from flashing black on every refresh. The values are the
   Background entries of the two palettes in Theme/VimoTheme.cs and have to stay in step with them. */
html[data-theme="dark"], html[data-theme="dark"] body {
    background-color: #000000;
}

html[data-theme="light"], html[data-theme="light"] body {
    background-color: #F2EEF0;
}

/* Latin identifiers, ids and permission keys read better monospaced and left-to-right. */
.vimo-mono {
    font-family: ui-monospace, "JetBrains Mono", Consolas, monospace;
    font-size: .78rem;
    direction: ltr;
    display: inline-block;
}

/* Numbers that sit in columns must not jitter as they change. */
/* The default treatment for a number that is supporting detail — a timestamp in a table cell, a count
   beside a label. Tabular figures so columns do not jitter as values change. */
.vimo-num {
    font-variant-numeric: tabular-nums;
    font-size: .82rem;
    color: var(--mud-palette-text-secondary);
}

/* A number that already carries a rank keeps it. `vimo-num` is applied to every numeral in the panel,
   including headline figures, and a utility that also fixes size and colour was quietly shrinking those
   to caption size and greying them out — which is why the insight tiles read as fine print. Here it goes
   back to being only what its name says: the numeral treatment. */
.vimo-kpi-value.vimo-num,
.vimo-funnel-value.vimo-num,
.vimo-funnel-rate-value.vimo-num,
.vimo-client-mini-value.vimo-num,
.vimo-hour-label.vimo-num,
.vimo-mono.vimo-num,
.vimo-num.vimo-mono,
.mud-chip .vimo-num {
    font-size: inherit;
    color: inherit;
}

/* --- bidi fix for the RTL panel ---
   Latin words, numbers, dates, ids, usernames and phone numbers must keep their own
   left-to-right order instead of being reordered by the surrounding RTL context.
   `plaintext` derives each value's direction from its first strong character, so
   Persian text stays RTL and English/numeric content reads correctly — panel-wide. */
.mud-typography,
.mud-table-cell,
.mud-chip-content,
.mud-select-item,
.vimo-kpi-value,
.vimo-funnel-value,
.vimo-funnel-label {
    /* `isolate` fixes the ordering of embedded Latin/number runs WITHOUT changing
       text-align, so table columns stay aligned (plaintext would left-align them). */
    unicode-bidi: isolate;
}

/* ---------- boot splash ---------- */
.vimo-splash {
    min-height: 100vh;
    display: grid;
    place-items: center;
    background: var(--mud-palette-background);
}

/* ---------- app shell ---------- */
.vimo-appbar {
    border-bottom: 1px solid var(--mud-palette-lines-default);
    backdrop-filter: blur(6px);
}

.vimo-drawer {
    border-inline-start: 1px solid var(--mud-palette-lines-default);
}

.vimo-brand {
    padding-inline: 20px;
}

.vimo-brand-accent {
    color: var(--mud-palette-primary);
}

.vimo-navgroup {
    font-size: .65rem;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--mud-palette-text-disabled);
    padding: 18px 20px 6px;
    font-family: ui-monospace, Consolas, monospace;
}

.vimo-drawer-foot {
    margin-top: auto;
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 16px;
    border-top: 1px solid var(--mud-palette-lines-default);
}

.vimo-who {
    display: flex;
    flex-direction: column;
    line-height: 1.35;
    min-width: 0;
    flex: 1;
}

.vimo-who-name {
    font-size: .8rem;
    font-weight: 600;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.vimo-who-role {
    font-size: .68rem;
    color: var(--mud-palette-text-secondary);
}

/* ---------- business picker in the app bar ---------- */
/* Active-business selector: a compact pill centered in the dense app bar. */
/* The whole pill is the button. It used to wrap a MudSelect whose own hit target was the stripped-down
   input slot inside it — a sliver a few pixels tall — so the thing that looked pressable was mostly not. */
.vimo-bizpick {
    display: flex;
    align-items: center;
    gap: 6px;
    height: 40px;
    padding-inline: 14px 10px;
    margin-inline-start: 8px;
    max-width: 260px;
    border-radius: 999px;
    cursor: pointer;
    user-select: none;
    /* It is a real <button>, so the UA's own font and colour have to be turned off explicitly. */
    font: inherit;
    color: inherit;
    background: color-mix(in srgb, var(--mud-palette-appbar-text) 8%, transparent);
    border: 1px solid color-mix(in srgb, var(--mud-palette-appbar-text) 14%, transparent);
    transition: background .15s ease, border-color .15s ease;
}

/* Keyboard focus stays visible — the pill is reachable by Tab and opens on Enter. */
.vimo-bizpick:focus-visible {
    outline: 2px solid var(--mud-palette-appbar-text);
    outline-offset: 2px;
}

.vimo-bizpick:hover {
    background: color-mix(in srgb, var(--mud-palette-appbar-text) 14%, transparent);
    border-color: color-mix(in srgb, var(--mud-palette-appbar-text) 28%, transparent);
}

.vimo-bizpick:active {
    background: color-mix(in srgb, var(--mud-palette-appbar-text) 20%, transparent);
}

.vimo-bizpick-icon,
.vimo-bizpick-caret {
    color: var(--mud-palette-appbar-text);
    opacity: .7;
    flex: none;
}

/* The name gives way before the chevron does — losing the affordance is worse than losing a few letters. */
.vimo-bizpick-name {
    color: var(--mud-palette-appbar-text);
    font-weight: 700;
    font-size: .9rem;
    min-width: 0;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}

/* Wide enough that names are readable rather than clipped, and never wider than the viewport. */
.vimo-bizpick-pop {
    min-width: 240px;
    max-width: min(360px, 90vw);
}

.vimo-bizopt {
    display: flex;
    align-items: center;
    gap: 8px;
    min-width: 0;
    width: 100%;
}

.vimo-bizopt-icon {
    flex: none;
    opacity: .6;
}

.vimo-bizopt--on .vimo-bizopt-icon {
    color: var(--mud-palette-primary);
    opacity: 1;
}

.vimo-bizopt--on .vimo-bizopt-name {
    font-weight: 700;
}

.vimo-bizopt-name {
    min-width: 0;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}

.vimo-bizopt-off {
    flex: none;
    margin-inline-start: auto;
    font-size: .7rem;
    color: var(--mud-palette-text-secondary);
}

/* ---------- dashboard ---------- */
.vimo-kpi {
    display: flex;
    flex-direction: column;
    gap: 2px;
    position: relative;
    min-height: 118px;
}

.vimo-kpi-icon {
    position: absolute;
    inset-inline-end: 12px;
    top: 12px;
    opacity: .5;
}

/* The figure is what the tile exists for, so it is sized here rather than left to whatever typography
   variant the markup happens to use — and set in full-contrast text, not the secondary grey. */
.vimo-kpi-value {
    font-size: 1.75rem;
    font-weight: 800;
    line-height: 1.15;
    margin-block: 4px 0;
    color: var(--mud-palette-text-primary);
    font-variant-numeric: tabular-nums;
}

.vimo-kpi-title {
    font-weight: 600;
}

.vimo-funnel-row {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-block: 8px;
}

.vimo-funnel-label {
    width: 104px;
    font-size: .88rem;
    text-align: start;
    flex: none;
}

.vimo-funnel-track {
    flex: 1;
    height: 22px;
    border-radius: 6px;
    background: var(--mud-palette-action-disabled-background);
    overflow: hidden;
}

.vimo-funnel-fill {
    height: 100%;
    border-radius: 6px;
    transition: width .4s ease;
    min-width: 2px;
}

/* The number a bar stands for. It sits at the end of the row and is read across from the label, so it
   needs the same weight as the label rather than the muted treatment a table cell gets. */
.vimo-funnel-value {
    width: 72px;
    text-align: end;
    font-weight: 700;
    font-size: 1rem;
    color: var(--mud-palette-text-primary);
    font-variant-numeric: tabular-nums;
    flex: none;
}

/* ---------- page frame ---------- */
.vimo-main {
    background: var(--mud-palette-background);
    min-height: 100vh;
}

.vimo-container {
    padding-block: 24px 64px;
}

.vimo-pagehead {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 16px;
    flex-wrap: wrap;
    margin-bottom: 20px;
}

.vimo-pagetitle {
    font-weight: 800;
    letter-spacing: -.01em;
}

.vimo-pagesub {
    color: var(--mud-palette-text-secondary);
    margin-top: 2px;
}

.vimo-pagehead-actions {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
}

.vimo-loading {
    margin-block: 24px;
}

.vimo-block {
    margin-block: 12px;
}

/* ---------- cards & grids ---------- */
.vimo-card {
    border: 1px solid var(--mud-palette-lines-default);
    border-radius: 12px;
    overflow: hidden;
    background: var(--mud-palette-surface);
}

.vimo-cell-title {
    display: flex;
    flex-direction: column;
    align-items: flex-start; /* both name and the @username sub-line hug the start (right in RTL) */
    line-height: 1.4;
}

.vimo-cell-name {
    font-weight: 600;
}

.vimo-cell-sub {
    font-size: .72rem;
    color: var(--mud-palette-text-secondary);
}

.vimo-rowacts {
    display: flex;
    gap: 2px;
    justify-content: flex-start;
}

/* ---------- empty state ---------- */
.vimo-emptystate {
    border: 1px dashed var(--mud-palette-lines-default);
    border-radius: 12px;
    background: transparent;
    padding: 48px 24px;
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
}

.vimo-emptystate-icon {
    color: var(--mud-palette-text-disabled);
    margin-bottom: 4px;
}

.vimo-emptystate-text {
    color: var(--mud-palette-text-secondary);
    max-width: 46ch;
}

/* ---------- forms & dialogs ---------- */
.vimo-field {
    margin-bottom: 14px;
}

.vimo-dialog-error,
.vimo-login-error {
    margin-top: 4px;
    margin-bottom: 12px;
}

.vimo-dialog-detail {
    display: block;
    margin-top: 8px;
    color: var(--mud-palette-text-secondary);
}

/* ---------- login ---------- */
.vimo-login {
    min-height: 100vh;
    display: grid;
    place-items: center;
    padding: 24px;
    background:
        radial-gradient(820px 380px at 50% -8%, rgba(117, 3, 39, .42), transparent 68%),
        var(--mud-palette-background);
}

.vimo-login-card {
    width: 100%;
    max-width: 372px;
    padding: 30px 26px;
    border: 1px solid var(--mud-palette-lines-default);
    border-radius: 16px;
    background: var(--mud-palette-surface);
}

.vimo-login-brand {
    margin-bottom: 22px;
}

.vimo-login-tag {
    color: var(--mud-palette-text-secondary);
    display: block;
}

.vimo-login-submit {
    margin-top: 4px;
}

.vimo-btn-spinner {
    margin-inline-end: 8px;
}

/* ---------- blazor error strip ---------- */
#blazor-error-ui {
    color-scheme: light only;
    background: #ffeaea;
    color: #6a1111;
    bottom: 0;
    box-shadow: 0 -1px 4px rgba(0, 0, 0, .2);
    display: none;
    left: 0;
    padding: 10px 16px;
    position: fixed;
    width: 100%;
    z-index: 1500;
    font-size: .85rem;
}

#blazor-error-ui .dismiss {
    cursor: pointer;
    position: absolute;
    left: 12px;
    top: 8px;
}

/* ---------- card sub-sections ---------- */
.vimo-cardhead {
    padding: 14px 18px;
    border-bottom: 1px solid var(--mud-palette-lines-default);
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.vimo-cardbody {
    padding: 18px;
}

.vimo-muted {
    color: var(--mud-palette-text-secondary);
}

.vimo-note {
    border: 1px solid var(--mud-palette-lines-default);
}

/* Long free text in a grid cell must not stretch the row. */
.vimo-clamp {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    max-width: 46ch;
    white-space: normal;
}

/* Phone numbers, usernames and URLs stay left-to-right inside the RTL page. */
.vimo-ltr-input input {
    direction: ltr;
    text-align: left;
}

.vimo-gridsearch {
    max-width: 280px;
}

/* ---------- permission picker ---------- */
.vimo-perms {
    border: 1px solid var(--mud-palette-lines-default);
    border-radius: 10px;
    background: var(--mud-palette-background-gray);
    padding: 6px 14px 14px;
    max-height: 340px;
    overflow-y: auto;
}

.vimo-perms-group {
    margin-top: 10px;
}

.vimo-perms-grouphead {
    display: flex;
    align-items: center;
    justify-content: space-between;
    border-bottom: 1px solid var(--mud-palette-lines-default);
    padding-bottom: 4px;
    margin-bottom: 6px;
    position: sticky;
    top: 0;
    background: var(--mud-palette-background-gray);
    z-index: 1;
}

.vimo-perms-groupname {
    font-family: ui-monospace, Consolas, monospace;
    font-size: .7rem;
    letter-spacing: .1em;
    text-transform: uppercase;
    font-weight: 700;
    color: var(--mud-palette-primary);
}

.vimo-perms-toggle {
    font-size: .7rem;
    min-width: 0;
}

.vimo-perms-items {
    display: grid;
    gap: 0 12px;
    grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
}

.vimo-perms-item {
    display: flex;
    align-items: center;
    gap: 4px;
}

.vimo-perms-item--blocked {
    opacity: .55;
}

.vimo-perms-lock {
    color: var(--mud-palette-text-disabled);
}

.vimo-preset-row {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
    margin-bottom: 14px;
}

/* ---------- permission matrix ---------- */
.vimo-matrix-scroll {
    overflow-x: auto;
    max-height: 620px;
    overflow-y: auto;
}

.vimo-matrix {
    width: 100%;
    border-collapse: collapse;
    font-size: .8rem;
}

.vimo-matrix th,
.vimo-matrix td {
    border-bottom: 1px solid var(--mud-palette-lines-default);
    padding: 7px 12px;
    white-space: nowrap;
}

.vimo-matrix thead th {
    position: sticky;
    top: 0;
    background: var(--mud-palette-background-gray);
    z-index: 2;
}

/* The permission column stays put while businesses scroll sideways. */
.vimo-matrix-permhead,
.vimo-matrix-perm {
    position: sticky;
    inset-inline-start: 0;
    background: var(--mud-palette-surface);
    text-align: right;
    z-index: 1;
}

.vimo-matrix-permhead {
    z-index: 3;
    background: var(--mud-palette-background-gray);
    font-size: .7rem;
    color: var(--mud-palette-text-secondary);
    font-weight: 600;
}

.vimo-matrix-bizhead {
    text-align: center;
    min-width: 132px;
}

.vimo-matrix-bizhead--out {
    opacity: .5;
}

.vimo-matrix-bizname {
    display: block;
    font-weight: 700;
    font-size: .8rem;
}

.vimo-matrix-bizmeta {
    display: block;
    font-size: .65rem;
    font-weight: 400;
    color: var(--mud-palette-text-secondary);
}

.vimo-matrix-cell {
    text-align: center;
    padding: 2px;
}

.vimo-matrix-grouprow td {
    background: var(--mud-palette-background-gray);
    font-family: ui-monospace, Consolas, monospace;
    font-size: .68rem;
    letter-spacing: .12em;
    text-transform: uppercase;
    font-weight: 700;
    color: var(--mud-palette-primary);
    position: sticky;
    inset-inline-start: 0;
}

.vimo-matrix-yes {
    color: var(--mud-palette-success);
    font-weight: 700;
}

.vimo-matrix-no,
.vimo-matrix-void {
    color: var(--mud-palette-text-disabled);
}

/* ---------- roles ---------- */
.vimo-rolegrid {
    display: grid;
    gap: 14px;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
}

.vimo-rolecard {
    padding: 16px;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.vimo-rolecard-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 8px;
}

.vimo-rolecard-perms {
    display: flex;
    flex-wrap: wrap;
    gap: 5px;
}

.vimo-perm-tag {
    background: var(--mud-palette-background-gray);
    border: 1px solid var(--mud-palette-lines-default);
    border-radius: 5px;
    padding: 1px 7px;
    font-size: .68rem;
}

.vimo-perm-tag--more {
    color: var(--mud-palette-text-secondary);
    font-family: inherit;
}

/* ---------- leads ---------- */
.vimo-leads {
    display: grid;
    gap: 16px;
    grid-template-columns: 260px 1fr;
    align-items: start;
}

@media (max-width: 860px) {
    .vimo-leads {
        grid-template-columns: 1fr;
    }
}

.vimo-leads-cat {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    width: 100%;
}

.vimo-list-on {
    background: var(--mud-palette-action-default-hover);
    font-weight: 700;
}

.vimo-upload {
    margin-block: 12px;
}

.vimo-uploadstats {
    display: grid;
    gap: 8px;
    grid-template-columns: 1fr 1fr;
    margin-top: 12px;
}

.vimo-uploadstat {
    background: var(--mud-palette-background-gray);
    border: 1px solid var(--mud-palette-lines-default);
    border-radius: 9px;
    padding: 10px 12px;
    display: flex;
    flex-direction: column;
    gap: 1px;
}

.vimo-uploadstat-k {
    font-size: .7rem;
    color: var(--mud-palette-text-secondary);
}

.vimo-uploadstat-v {
    font-size: 1.15rem;
    font-weight: 800;
    font-variant-numeric: tabular-nums;
}

.vimo-uploadstat-v--ok {
    color: var(--mud-palette-success);
}

/* ---------- ding composer ---------- */
.vimo-composer-head {
    margin-top: 8px;
    margin-bottom: 6px;
}

.vimo-chanlist {
    border: 1px solid var(--mud-palette-lines-default);
    border-radius: 10px;
    max-height: 340px;
    overflow-y: auto;
}

/* The picker groups channels under their lead category; the panel body holds the rows, so it
   supplies no padding of its own. */
.vimo-chanlist .mud-expand-panel-text {
    padding: 0;
}

.vimo-cangroup-head {
    display: flex;
    align-items: center;
    gap: 8px;
    min-width: 0;
    flex: 1;
}

.vimo-cangroup-name {
    font-size: .84rem;
    font-weight: 600;
}

.vimo-cangroup-meta {
    font-size: .7rem;
    color: var(--mud-palette-text-secondary);
    /* Latin counts inside an RTL run: isolate so they cannot reorder the label around them. */
    unicode-bidi: isolate;
}

.vimo-chanrow {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 6px 12px;
    border-bottom: 1px solid var(--mud-palette-lines-default);
}

.vimo-chanrow:last-child {
    border-bottom: none;
}

.vimo-chaninfo {
    display: flex;
    flex-direction: column;
    line-height: 1.35;
    min-width: 0;
    flex: 1;
}

.vimo-chaninfo-name {
    font-size: .82rem;
    font-weight: 600;
}

/* Wraps rather than truncates. The row carries four facts now — username, members, sent, free — and on a
   narrow dialog a single clipped line would drop the last of them, which is the one being decided on. The
   username is still the part allowed to shrink. */
.vimo-chaninfo-meta {
    display: flex;
    align-items: baseline;
    flex-wrap: wrap;
    gap: 4px;
    font-size: .68rem;
    color: var(--mud-palette-text-secondary);
    overflow: hidden;
}

/* A channel username is Latin inside an RTL line. Laying the parts out as flex items — each one its
   own bidi run — keeps "@name · 28,872 عضو" in that order instead of letting the count slide into
   the middle of the username. */
.vimo-chaninfo-meta > bdi {
    unicode-bidi: isolate;
    overflow: hidden;
    text-overflow: ellipsis;
}

.vimo-chaninfo-sep {
    opacity: .6;
}

/* What was sent from a list, and what is left of it. The second is the one that decides the number typed
   beside it, so it is the one that carries colour; a spent list goes red because "0 آزاد" beside a large
   member count is the easiest thing on the row to misread. */
.vimo-chansent,
.vimo-chanfree {
    unicode-bidi: isolate;
    white-space: nowrap;
}

.vimo-chanfree { color: var(--mud-palette-success); }
.vimo-chanfree--empty { color: var(--mud-palette-error); }

.vimo-chantake {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: .72rem;
    color: var(--mud-palette-text-secondary);
}

.vimo-chantake-input {
    width: 92px;
}

.vimo-tally {
    background: var(--mud-palette-background-gray);
    border: 1px solid var(--mud-palette-lines-default);
    border-radius: 10px;
    padding: 12px 14px;
    margin-top: 12px;
}

.vimo-tally-line {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    font-size: .85rem;
}

.vimo-tally-line b {
    font-variant-numeric: tabular-nums;
    font-size: 1.05rem;
    color: var(--mud-palette-primary);
}

.vimo-tally-note {
    font-size: .7rem;
    color: var(--mud-palette-text-secondary);
    margin-top: 6px;
}

.vimo-recipients {
    margin-top: 10px;
}

.vimo-daterow {
    display: grid;
    gap: 12px;
    grid-template-columns: 1fr 1fr;
}

.vimo-stepper {
    margin-bottom: 8px;
}

/* ---- campaign insight ---------------------------------------------------- */

.vimo-insight-empty {
    padding: 20px 4px 8px;
    text-align: center;
}

.vimo-insight-meta {
    font-size: .8125rem;
    margin: 4px 0 8px;
}

/* Hour-of-day histogram: 24 vertical bars, so the shape of a day is readable at a
   glance. Plain CSS on purpose — the rest of this panel charts the same way and no
   charting library is pulled in for one figure. */
.vimo-hours {
    display: flex;
    align-items: flex-end;
    gap: 3px;
    height: 132px;
}

.vimo-hour {
    display: flex;
    flex: 1 1 0;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    height: 100%;
    min-width: 0;
}

.vimo-hour-track {
    display: flex;
    align-items: flex-end;
    width: 100%;
    flex: 1 1 auto;
    background: var(--mud-palette-action-disabled-background);
    border-radius: 3px;
    overflow: hidden;
}

.vimo-hour-fill {
    width: 100%;
    /* An hour with no joins still shows a hairline, so a gap reads as "measured, zero"
       rather than as a rendering fault. */
    min-height: 2px;
    background: var(--mud-palette-primary);
    border-radius: 3px;
    transition: height .18s ease;
}

.vimo-hour-fill.is-peak {
    background: var(--mud-palette-success);
}

/* 10px was below what these are for: the whole point of the histogram is reading which hour a bar is,
   and an axis nobody can read makes the chart decorative. */
.vimo-hour-label {
    font-size: .75rem;
    font-variant-numeric: tabular-nums;
    line-height: 1;
    color: var(--mud-palette-text-secondary);
}

/* Settings page: label and help on one side, the input on the other, stacking on narrow screens. */
.vimo-setting {
    display: flex;
    align-items: flex-start;
    gap: 16px;
    padding: 10px 0;
    border-bottom: 1px solid var(--mud-palette-lines-default);
}

.vimo-setting:last-child {
    border-bottom: none;
}

.vimo-setting-label {
    display: flex;
    flex-direction: column;
    gap: 2px;
    flex: 1;
    min-width: 0;
}

.vimo-setting-title {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: .88rem;
    font-weight: 600;
}

.vimo-setting-help {
    font-size: .72rem;
    line-height: 1.6;
    color: var(--mud-palette-text-secondary);
}

.vimo-setting-input {
    width: 280px;
    flex-shrink: 0;
}

@media (max-width: 700px) {
    .vimo-setting {
        flex-direction: column;
    }

    .vimo-setting-input {
        width: 100%;
    }
}

/* ---- customer report (/client) ---------------------------------------------------------------- */

.vimo-client-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    flex-wrap: wrap;
}

/* ---- the trend chart ----------------------------------------------------------------------------
   Two series, two fixed colours, the same in both themes. Not var(--mud-palette-primary): that is
   #750327 in light mode, which is too dark to sit in the palette's lightness band and would fail the
   contrast-and-CVD checks these two passed on both surfaces (burgundy #C22A5E and green #18A957 —
   deutan ΔE 9.8, normal ΔE 35.4, contrast ≥ 3:1 against white and against #151113).

   The pairing is also the semantics: the brand colour for what we did, the success colour for what came
   of it. */

.vimo-chart {
    --sent: #C22A5E;
    --join: #18A957;
    margin-top: 0.75rem;
    /* Whatever the plot draws stays inside this box. Painted overflow still counts as scrollable overflow,
       and on a right-to-left page that turns into a horizontal scrollbar running off to the side. */
    max-width: 100%;
    overflow: hidden;
}

.vimo-chart svg {
    display: block;
    width: 100%;
    height: auto;
    /* Time runs left to right inside an otherwise right-to-left page: a mirrored time axis reads as a
       different chart, and every convention the reader has for one is built the other way. */
    direction: ltr;
}

/* Recessive: one step off the surface, hairline, solid. Grid is scaffolding, not data. */
.vimo-chart-grid {
    stroke: var(--mud-palette-lines-default);
    stroke-width: 1;
    shape-rendering: crispEdges;
}

.vimo-chart-line { fill: none; stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; }
.vimo-chart-line--sent { stroke: var(--sent); }
.vimo-chart-line--join { stroke: var(--join); }

/* A wash, never a saturated block — the line carries the shape, the fill only says which way is down. */
.vimo-chart-area { stroke: none; }
.vimo-chart-area--sent { fill: var(--sent); opacity: 0.1; }
.vimo-chart-area--join { fill: var(--join); opacity: 0.1; }

/* The 2px ring is the surface colour, so a marker stays legible wherever it lands. */
.vimo-chart-dot { stroke: var(--mud-palette-surface); stroke-width: 2; }
.vimo-chart-dot--sent { fill: var(--sent); }
.vimo-chart-dot--join { fill: var(--join); }

/* Text wears text tokens, never the series colour; the swatch beside it carries identity. */
.vimo-chart-ytick,
.vimo-chart-xtick {
    fill: var(--mud-palette-text-secondary);
    font-size: 10px;
    font-family: inherit;
}

.vimo-chart-ytick { text-anchor: end; }

.vimo-chart-plotname {
    fill: var(--mud-palette-text-primary);
    font-size: 11px;
    font-weight: 600;
    font-family: inherit;
}

/* ---- hover ---- */

.vimo-chart-hit { fill: transparent; }

.vimo-chart-cross,
.vimo-chart-hoverdot,
.vimo-chart-tip {
    opacity: 0;
    pointer-events: none;
    transition: opacity 90ms ease;
}

.vimo-chart-col:hover .vimo-chart-cross,
.vimo-chart-col:hover .vimo-chart-hoverdot,
.vimo-chart-col:hover .vimo-chart-tip { opacity: 1; }

.vimo-chart-cross {
    stroke: var(--mud-palette-text-secondary);
    stroke-width: 1;
    stroke-dasharray: 3 3;
}

.vimo-chart-hoverdot { stroke: var(--mud-palette-surface); stroke-width: 2; }
.vimo-chart-hoverdot--sent { fill: var(--sent); }
.vimo-chart-hoverdot--join { fill: var(--join); }

.vimo-chart-tipbox {
    direction: rtl;
    background: var(--mud-palette-surface);
    border: 1px solid var(--mud-palette-lines-default);
    border-radius: 8px;
    padding: 0.5rem 0.6rem;
    font-size: 0.72rem;
    box-shadow: 0 4px 14px rgb(0 0 0 / 18%);
}

.vimo-chart-tipdate {
    color: var(--mud-palette-text-secondary);
    margin-bottom: 0.3rem;
}

.vimo-chart-tiprow {
    display: flex;
    align-items: center;
    gap: 0.35rem;
    line-height: 1.6;
}

.vimo-chart-tiprow b { margin-inline-start: auto; font-weight: 600; }

.vimo-trend-legend {
    display: flex;
    gap: 1rem;
    margin-top: 0.5rem;
    font-size: 0.75rem;
    color: var(--mud-palette-text-secondary);
}

.vimo-swatch {
    display: inline-block;
    width: 0.6rem;
    height: 0.6rem;
    border-radius: 2px;
    margin-inline-end: 0.3rem;
    flex: none;
}

.vimo-swatch--sent { background: #C22A5E; }
.vimo-swatch--joined { background: #18A957; }

/* The one number the funnel exists to produce, said once and plainly. */
.vimo-funnel-rate {
    display: flex;
    align-items: baseline;
    gap: 0.5rem;
    margin-top: 1.1rem;
    padding-top: 0.9rem;
    border-top: 1px solid var(--mud-palette-lines-default);
}

.vimo-funnel-rate-value {
    font-size: 1.6rem;
    font-weight: 700;
    color: var(--join, #18A957);
}

.vimo-funnel-rate-label {
    font-size: 0.72rem;
    color: var(--mud-palette-text-secondary);
}

.vimo-client-mini {
    display: flex;
    flex-direction: column;
    padding: 0.5rem 0;
}

.vimo-client-mini-value { font-size: 1.15rem; font-weight: 600; }
.vimo-client-mini-title { font-size: 0.75rem; color: var(--mud-palette-text-secondary); }

/* The message as it was sent. Pre-wrap because line breaks are part of what the customer approved. */
.vimo-client-message {
    border: 1px solid var(--mud-palette-lines-default);
    border-radius: 8px;
    padding: 0.75rem 1rem;
    margin-bottom: 0.75rem;
}

.vimo-client-message-text {
    white-space: pre-wrap;
    word-break: break-word;
    margin-bottom: 0.5rem;
}

.vimo-client-message-meta {
    font-size: 0.75rem;
    color: var(--mud-palette-text-secondary);
}

/* ---- users page filters ------------------------------------------------------------------------ */

.vimo-filters {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.75rem;
    padding: 1rem 1rem 0.5rem;
}

.vimo-filter { flex: 0 1 11rem; min-width: 9rem; }
/* The search earns more room: it is the one people reach for first and the one with long content. */
.vimo-filter--search { flex: 1 1 18rem; min-width: 12rem; }

.vimo-usertabs { padding-top: 0.25rem; }

/* Activity screening progress, shown inside the status cell of a Ding send. */
.vimo-screen { display: flex; flex-direction: column; gap: 0.25rem; margin-top: 0.35rem; min-width: 11rem; }
.vimo-screen-bar { height: 4px; border-radius: 2px; }

/* How much of a lead list is left. The bar is secondary to the number — it answers "is this list nearly
   spent?" at a glance, which the digits alone do not. */
.vimo-usage { display: flex; flex-direction: column; gap: 0.3rem; min-width: 5.5rem; }
.vimo-usage-empty { color: var(--mud-palette-text-secondary); }
.vimo-usage-track { height: 4px; border-radius: 2px; background: var(--mud-palette-lines-default); overflow: hidden; }
.vimo-usage-fill { height: 100%; background: var(--mud-palette-primary); opacity: 0.55; }

/* ---- customer auto-reply (/client/smart-direct) ------------------------------------------------- */

.vimo-client-nav {
    display: flex;
    gap: 0.25rem;
    margin-inline-start: 1.25rem;
}

/* The current tab, underlined from below like a tab strip rather than filled — the app bar already carries
   the brand colour and a filled pill on top of it reads as a button to press, not as where you are. */
.vimo-client-tab {
    border-radius: 8px 8px 0 0;
    border-bottom: 2px solid transparent;
    opacity: .75;
}

.vimo-client-tab:hover { opacity: 1; }

.vimo-client-tab--on {
    opacity: 1;
    font-weight: 700;
    border-bottom-color: currentColor;
    background: color-mix(in srgb, var(--mud-palette-appbar-text) 10%, transparent);
}

/* On a narrow screen the labels would push the account menu off the bar; the icons carry them. */
@media (max-width: 599px) {
    .vimo-client-nav { margin-inline-start: 0.5rem; }
    .vimo-client-tab .mud-button-label > span:not(.mud-icon-root) { display: none; }
}

/* The guide is prose, so it gets prose measure and rhythm rather than the panel's dense defaults. */
.vimo-guide {
    max-width: 62ch;
    font-size: 0.875rem;
    line-height: 1.9;
    color: var(--mud-palette-text-primary);
}

.vimo-guide h4 {
    margin: 1.25rem 0 0.35rem;
    font-size: 0.9rem;
    font-weight: 700;
}

.vimo-guide h4:first-child { margin-top: 0; }
.vimo-guide p { margin: 0 0 0.35rem; }
.vimo-guide ul { margin: 0 0 0.35rem; padding-inline-start: 1.25rem; }
.vimo-guide li { margin-bottom: 0.25rem; }

.vimo-guide-lead { color: var(--mud-palette-text-secondary); }

.vimo-guide-example {
    margin-top: 0.5rem;
    padding: 0.75rem 1rem;
    border-radius: 8px;
    border-inline-start: 3px solid var(--mud-palette-primary);
    background: var(--mud-palette-background-gray);
}

/* A rule is a keyword set and the reply it produces; the reply is the long part, so it gets its own line
   rather than a column that would wrap into a sliver. */
.vimo-rule {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 0.75rem;
    padding: 0.85rem 0;
    border-bottom: 1px solid var(--mud-palette-lines-default);
}

.vimo-rule:last-child { border-bottom: none; }

.vimo-rule-main { min-width: 0; flex: 1; }

.vimo-rule-keys {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.25rem;
    margin-bottom: 0.35rem;
}

.vimo-rule-priority {
    font-size: 0.72rem;
    color: var(--mud-palette-text-secondary);
}

.vimo-rule-reply {
    font-size: 0.875rem;
    line-height: 1.8;
    color: var(--mud-palette-text-secondary);
    /* Replies are written with line breaks in them and sent that way, so they are shown that way. */
    white-space: pre-wrap;
    word-break: break-word;
}

/* --- Eitaa post picker (Smart Direct replies taken from a post) --- */

.vimo-post-picker-row {
    display: flex;
    align-items: flex-start;
    gap: 0.5rem;
}

.vimo-post-picker-row .vimo-field { flex: 1; min-width: 0; }

/* Lined up with the text box, not with its helper line underneath. */
.vimo-post-picker-btn { margin-top: 6px; flex-shrink: 0; }

.vimo-post-preview {
    padding: 0.65rem 0.85rem;
    border-radius: 8px;
    border: 1px solid var(--mud-palette-lines-default);
    border-inline-start: 3px solid var(--mud-palette-success);
    background: var(--mud-palette-background-gray);
}

.vimo-post-preview-head {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.4rem;
    font-size: 0.8rem;
    margin-bottom: 0.35rem;
}

.vimo-post-preview-head a { color: var(--mud-palette-primary); word-break: break-all; }

.vimo-post-preview-text {
    font-size: 0.875rem;
    line-height: 1.8;
    white-space: pre-wrap;
    word-break: break-word;
    /* A long post is a preview here, not the whole thing. */
    max-height: 12rem;
    overflow-y: auto;
}

@media (max-width: 599px) {
    .vimo-post-picker-row { flex-direction: column; align-items: stretch; }
    .vimo-post-picker-btn { margin-top: 0; }
}

/* --- channel admins --- */

/* The admin cards are the point of the page, so they get room rather than table rows: each one carries a
   phone number that someone is going to read aloud or copy, and a 12px table cell is the wrong place for
   that. auto-fill rather than a fixed count so three admins do not stretch into three half-empty columns. */
.vimo-admin-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 12px;
}

.vimo-admin-card {
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
    padding: 1rem;
}

.vimo-admin-head {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex-wrap: wrap;
}

.vimo-admin-name {
    font-weight: 600;
    font-size: 0.95rem;
}

/* The number is the deliverable. Large, monospaced and LTR: it is read digit by digit against another
   screen, and Persian numerals or a proportional font both make that harder — the panel shows Latin
   digits everywhere for the same reason (see Fa.cs). */
.vimo-phone {
    font-family: ui-monospace, "JetBrains Mono", Consolas, monospace;
    font-size: 1.35rem;
    font-variant-numeric: tabular-nums;
    letter-spacing: 0.06em;
    direction: ltr;
    /* Selectable on purpose: the copy button is the fast path, dragging over it is the fallback when
       the clipboard API is blocked and there is nothing else left. */
    user-select: all;
    line-height: 1.4;
}

.vimo-phone-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
    padding: 0.5rem 0.75rem;
    border: 1px solid var(--mud-palette-lines-default);
    border-radius: 10px;
    background: var(--mud-palette-background-gray);
}

/* No number at all, which is a gap in the crawl rather than a permission problem. Muted and plainly
   worded so it does not read as an error the operator can fix by trying again. */
.vimo-phone-missing {
    font-size: 0.85rem;
    color: var(--mud-palette-text-secondary);
    padding: 0.5rem 0.75rem;
}

.vimo-channel-facts {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.5rem 1.25rem;
}

.vimo-fact-label {
    font-size: 0.75rem;
    color: var(--mud-palette-text-secondary);
    margin-inline-end: 0.35rem;
}

/* ---- direct sends: the wizard, its step rail, and the figures on it ---- */

.vimo-wizard { padding: 0; overflow: hidden; }

/* A rail, not a navigator. Steps are not clickable because which one is live is a fact about the data --
   you cannot choose a message before the list has anybody in it. */
.vimo-steps {
    display: flex;
    align-items: center;
    gap: 0.25rem;
    padding: 1rem 1.25rem 0.75rem;
    overflow-x: auto;
}

.vimo-step {
    display: flex;
    align-items: center;
    gap: 0.45rem;
    padding: 0.35rem 0.7rem;
    border-radius: 999px;
    white-space: nowrap;
    font-size: 0.85rem;
    transition: background-color 0.15s ease, color 0.15s ease;
}

.vimo-step + .vimo-step { margin-inline-start: 0.15rem; }

.vimo-step-num {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.5rem;
    height: 1.5rem;
    border-radius: 50%;
    font-size: 0.78rem;
    font-weight: 600;
    background: var(--mud-palette-lines-default);
    color: var(--mud-palette-text-secondary);
}

.vimo-step-active { background: var(--mud-palette-primary-hover); color: var(--mud-palette-primary); }
.vimo-step-active .vimo-step-num { background: var(--mud-palette-primary); color: var(--mud-palette-primary-text); }

.vimo-step-done { color: var(--mud-palette-text-secondary); }
.vimo-step-done .vimo-step-num { background: var(--mud-palette-success); color: var(--mud-palette-success-text); }

.vimo-step-todo { color: var(--mud-palette-text-disabled); }

.vimo-wizard-divider { margin: 0; }

.vimo-wizard-body {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0.9rem;
    padding: 1.25rem;
}

.vimo-wizard-hint { color: var(--mud-palette-text-secondary); max-width: 46rem; line-height: 1.9; }

.vimo-wizard-progress { width: 100%; max-width: 46rem; }

.vimo-wizard-options,
.vimo-wizard-filters { display: flex; flex-direction: column; gap: 0.35rem; }

.vimo-wizard-actions { display: flex; flex-wrap: wrap; gap: 0.5rem; align-items: center; }

.vimo-wizard-runhead { display: flex; align-items: center; gap: 0.6rem; flex-wrap: wrap; }

/* The figures. Deliberately plain numbers with a word under them: a campaign's counts are read at a
   glance and compared with each other, which chart-like framing gets in the way of. */
.vimo-statrow {
    display: flex;
    flex-wrap: wrap;
    gap: 1.75rem;
    padding: 0.35rem 0;
}

.vimo-stat { display: flex; flex-direction: column; gap: 0.15rem; min-width: 5.5rem; }

.vimo-stat-num {
    font-size: 1.45rem;
    font-weight: 600;
    line-height: 1.2;
    font-variant-numeric: tabular-nums;
}

.vimo-stat-label { font-size: 0.78rem; color: var(--mud-palette-text-secondary); }

.vimo-stat-primary .vimo-stat-num { color: var(--mud-palette-primary); }

.vimo-field-narrow { max-width: 12rem; }

/* ---- the campaign list ---- */

.vimo-row-clickable { cursor: pointer; }

.vimo-progress-cell { display: flex; flex-direction: column; gap: 0.25rem; min-width: 9rem; }
.vimo-progress-bar { height: 4px; border-radius: 2px; }

.vimo-dialog-toolbar { padding-bottom: 0.75rem; }
.vimo-dialog-pager { display: flex; justify-content: center; padding-top: 0.75rem; }

/* ---------- bulk send: sender pool ---------- */

/* A label/value list for an account's status tab: the label column stays narrow and the value wraps. */
.vimo-dl { margin: 0; display: flex; flex-direction: column; gap: 0.35rem; }
.vimo-dl-row { display: flex; gap: 0.75rem; align-items: baseline; }
.vimo-dl-row dt { flex: 0 0 9.5rem; color: var(--mud-palette-text-secondary); font-size: 0.85rem; }
.vimo-dl-row dd { margin: 0; flex: 1; font-variant-numeric: tabular-nums; word-break: break-word; }

/* One wording of a text campaign: the textarea and its remove button side by side. */
.vimo-variant-row { display: flex; gap: 0.5rem; align-items: flex-start; }
.vimo-variant-row .vimo-field { flex: 1; }

/* A campaign's account list: the order buttons sit tight against the number. */
.vimo-senders-row { display: flex; align-items: center; gap: 0.5rem; padding: 0.35rem 0; border-bottom: 1px solid var(--mud-palette-lines-default); }
.vimo-senders-row:last-child { border-bottom: none; }
.vimo-senders-row .vimo-cell-title { flex: 1; }