:root {
    --primary: #465779;
    --primary-hover: #394764;
    --bg: #f4f8f8;
    --card: #ffffff;
    --text: #193036;
    --muted: #607780;
    --line: #d2e1e3;
    --sidebar: #465779;
    --surface-soft: #edf5f5;
    --sidebar-width: 270px;
}

/* Leads: segmentos, deduplicacao e previa transacional de importacao */
.lead-legacy-review {
    display: grid;
    gap: 1rem;
    margin: 1rem 0 1.25rem;
    padding: 1rem;
    border: 1px solid color-mix(in srgb, #d97706 42%, var(--line));
    border-radius: 20px;
    background: color-mix(in srgb, #f59e0b 7%, var(--card));
    box-shadow: 0 16px 42px color-mix(in srgb, #92400e 8%, transparent);
}

.lead-legacy-review-head,
.lead-legacy-review-head > div,
.lead-legacy-review-list article > div {
    display: flex;
}

.lead-legacy-review-head {
    align-items: flex-start;
    gap: .8rem;
}

.lead-legacy-review-head > i {
    display: grid;
    width: 42px;
    height: 42px;
    flex: 0 0 42px;
    place-items: center;
    border-radius: 13px;
    background: #f59e0b;
    color: #fff;
    font-size: 1.15rem;
}

.lead-legacy-review-head > div {
    flex-direction: column;
    gap: .12rem;
}

.lead-legacy-review-head span,
.lead-legacy-review-list small {
    color: #a16207;
    font-size: .72rem;
    font-weight: 800;
    letter-spacing: .04em;
    text-transform: uppercase;
}

.lead-legacy-review-head h2 {
    margin: 0;
    color: var(--text);
    font-size: 1rem;
}

.lead-legacy-review-head p,
.lead-legacy-review-list p {
    margin: 0;
    color: var(--muted);
    font-size: .8rem;
}

.lead-legacy-review-list {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: .75rem;
}

.lead-legacy-review-list article {
    display: grid;
    gap: .55rem;
    padding: .85rem;
    border: 1px solid color-mix(in srgb, #d97706 22%, var(--line));
    border-radius: 15px;
    background: var(--card);
}

.lead-legacy-review-list article > div {
    justify-content: space-between;
    gap: .5rem;
}

.lead-legacy-review-list article > div span,
.lead-legacy-review-list li {
    color: var(--muted);
    font-size: .76rem;
}

.lead-legacy-review-list ul {
    margin: 0;
    padding-left: 1.1rem;
}

.lead-segment-pill {
    display: inline-flex;
    align-items: center;
    gap: .42rem;
    max-width: 180px;
    padding: .42rem .68rem;
    border: 1px solid color-mix(in srgb, var(--primary) 18%, var(--line));
    border-radius: 999px;
    background: color-mix(in srgb, var(--primary) 8%, var(--card));
    color: color-mix(in srgb, var(--primary) 76%, var(--text));
    font-size: .75rem;
    font-weight: 800;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.lead-empty-value.is-warning {
    color: #a16207;
}

.lead-bulk-segment-form {
    display: block;
}

.lead-bulk-bar {
    display: grid;
    grid-template-columns: minmax(180px, 1fr) minmax(220px, 320px) auto;
    gap: .8rem;
    align-items: center;
    padding: .85rem 1rem;
    border-top: 1px solid var(--line);
    background: color-mix(in srgb, var(--primary) 5%, var(--card));
}

.lead-bulk-bar > div {
    display: flex;
    align-items: center;
    gap: .65rem;
    color: var(--muted);
    font-size: .82rem;
}

.lead-bulk-bar > div > i {
    display: grid;
    width: 34px;
    height: 34px;
    place-items: center;
    border-radius: 11px;
    background: color-mix(in srgb, var(--primary) 12%, var(--card));
    color: var(--primary);
}

.lead-bulk-bar strong {
    color: var(--text);
}

.lead-segments-modal .modal-content,
.lead-duplicate-modal .modal-content {
    overflow: hidden;
    border: 1px solid color-mix(in srgb, var(--primary) 14%, var(--line));
    border-radius: 24px;
    box-shadow: 0 28px 80px rgba(15, 23, 42, .22);
}

.lead-segments-modal .modal-header,
.lead-duplicate-modal .modal-header {
    padding: 1.35rem 1.5rem;
    background:
        radial-gradient(circle at 88% -20%, color-mix(in srgb, var(--primary) 16%, transparent), transparent 42%),
        color-mix(in srgb, var(--card) 95%, var(--surface-soft));
}

.lead-segment-list {
    display: grid;
    gap: .65rem;
}

.lead-segment-row {
    display: grid;
    grid-template-columns: minmax(240px, 1fr) auto auto auto auto;
    gap: .7rem;
    align-items: center;
    padding: .75rem;
    border: 1px solid var(--line);
    border-radius: 16px;
    background: color-mix(in srgb, var(--card) 97%, var(--surface-soft));
}

.lead-segment-row.is-inactive {
    opacity: .68;
}

.lead-segment-name-form {
    display: flex;
    gap: .45rem;
}

.lead-segment-count {
    color: var(--muted);
    font-size: .78rem;
    white-space: nowrap;
}

.lead-segment-count strong {
    color: var(--text);
}

.lead-duplicate-existing {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: .85rem;
}

.lead-duplicate-existing > div {
    display: flex;
    flex-direction: column;
    gap: .25rem;
    padding: 1rem;
    border: 1px solid var(--line);
    border-radius: 16px;
    background: color-mix(in srgb, var(--surface-soft) 56%, var(--card));
}

.lead-duplicate-existing small,
.lead-duplicate-comparison small {
    color: var(--muted);
    font-size: .68rem;
    font-weight: 800;
    letter-spacing: .08em;
    text-transform: uppercase;
}

.lead-duplicate-existing span {
    color: var(--muted);
    font-size: .78rem;
}

.lead-duplicate-comparison {
    display: grid;
    gap: .65rem;
}

.lead-duplicate-comparison label {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: .8rem;
    align-items: center;
    padding: .85rem;
    border: 1px solid var(--line);
    border-radius: 14px;
    cursor: pointer;
}

.lead-duplicate-comparison label:has(input:checked) {
    border-color: color-mix(in srgb, var(--primary) 36%, var(--line));
    background: color-mix(in srgb, var(--primary) 6%, var(--card));
}

.lead-duplicate-comparison label span {
    display: grid;
    grid-template-columns: minmax(110px, .65fr) 1fr 1fr;
    gap: .7rem;
    align-items: center;
}

.lead-duplicate-comparison del {
    color: var(--muted);
    font-size: .78rem;
}

.lead-duplicate-comparison strong {
    font-size: .82rem;
}

.lead-import-preview-page {
    --import-radius: 24px;
    display: grid;
    gap: 1.15rem;
    padding-bottom: 2rem;
}

.lead-import-preview-hero {
    position: relative;
    display: grid;
    grid-template-columns: minmax(130px, auto) minmax(0, 1fr) minmax(230px, auto);
    gap: 1.5rem;
    align-items: center;
    overflow: hidden;
    padding: 1.65rem;
    border: 1px solid color-mix(in srgb, var(--primary) 18%, var(--line));
    border-radius: var(--import-radius);
    background:
        radial-gradient(circle at 78% -30%, color-mix(in srgb, var(--primary) 22%, transparent), transparent 43%),
        linear-gradient(135deg, color-mix(in srgb, var(--card) 98%, var(--primary) 2%), color-mix(in srgb, var(--surface-soft) 72%, var(--card)));
    box-shadow: 0 20px 56px rgba(15, 23, 42, .09);
}

.lead-import-preview-hero > a {
    display: inline-flex;
    gap: .5rem;
    align-items: center;
    color: var(--muted);
    font-size: .78rem;
    font-weight: 800;
    text-decoration: none;
}

.lead-import-preview-hero > div:nth-child(2) > span {
    color: var(--primary);
    font-size: .72rem;
    font-weight: 900;
    letter-spacing: .1em;
    text-transform: uppercase;
}

.lead-import-preview-hero h1 {
    margin: .3rem 0 .2rem;
    font-family: "Plus Jakarta Sans", sans-serif;
    font-size: clamp(1.65rem, 2vw, 2.35rem);
    font-weight: 800;
}

.lead-import-preview-hero p {
    margin: 0;
    color: var(--muted);
}

.lead-import-preview-state {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: .15rem .65rem;
    align-items: center;
    padding: .9rem 1rem;
    border: 1px solid color-mix(in srgb, #198754 24%, var(--line));
    border-radius: 16px;
    background: color-mix(in srgb, #198754 8%, var(--card));
}

.lead-import-preview-state i {
    grid-row: span 2;
    color: #198754;
    font-size: 1.35rem;
}

.lead-import-preview-state small {
    color: var(--muted);
    font-size: .72rem;
}

.lead-import-preview-stats {
    display: grid;
    grid-template-columns: repeat(7, minmax(115px, 1fr));
    gap: .7rem;
}

.lead-import-preview-stats article {
    display: flex;
    gap: .65rem;
    align-items: center;
    min-height: 84px;
    padding: .85rem;
    border: 1px solid var(--line);
    border-radius: 17px;
    background: var(--card);
}

.lead-import-preview-stats article > i {
    display: grid;
    flex: 0 0 34px;
    width: 34px;
    height: 34px;
    place-items: center;
    border-radius: 11px;
    background: color-mix(in srgb, var(--primary) 9%, var(--card));
    color: var(--primary);
}

.lead-import-preview-stats article > div {
    display: flex;
    min-width: 0;
    flex-direction: column;
}

.lead-import-preview-stats strong {
    font-size: 1.2rem;
}

.lead-import-preview-stats span {
    color: var(--muted);
    font-size: .68rem;
    font-weight: 700;
}

.lead-import-preview-stats .is-success > i { color: #198754; background: color-mix(in srgb, #198754 10%, var(--card)); }
.lead-import-preview-stats .is-warning > i { color: #b7791f; background: color-mix(in srgb, #f59e0b 11%, var(--card)); }
.lead-import-preview-stats .is-danger > i { color: #dc3545; background: color-mix(in srgb, #dc3545 10%, var(--card)); }

.lead-import-warning {
    display: flex;
    gap: .9rem;
    align-items: center;
    padding: 1rem 1.15rem;
    border: 1px solid color-mix(in srgb, #f59e0b 32%, var(--line));
    border-radius: 17px;
    background: color-mix(in srgb, #f59e0b 9%, var(--card));
}

.lead-import-warning > i {
    color: #b7791f;
    font-size: 1.5rem;
}

.lead-import-warning p {
    margin: .15rem 0 0;
    color: var(--muted);
    font-size: .8rem;
}

.lead-import-confirm-form {
    display: grid;
    gap: 1rem;
}

.lead-import-decisions {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: .9rem;
}

.lead-import-decisions > div {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: .85rem;
    padding: 1rem;
    border: 1px solid var(--line);
    border-radius: 18px;
    background: var(--card);
}

.lead-import-decisions > div > span,
.lead-import-review-table > header > div > span {
    display: grid;
    width: 34px;
    height: 34px;
    place-items: center;
    border-radius: 11px;
    background: var(--primary);
    color: #fff;
    font-size: .73rem;
    font-weight: 900;
}

.lead-import-decisions label {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: .1rem .8rem;
    align-items: center;
}

.lead-import-decisions label small {
    color: var(--muted);
    font-size: .72rem;
}

.lead-import-decisions select {
    grid-column: 2;
    grid-row: 1 / span 2;
    min-width: 230px;
}

.lead-import-review-table {
    overflow: hidden;
    border: 1px solid var(--line);
    border-radius: var(--import-radius);
    background: var(--card);
    box-shadow: 0 14px 40px rgba(15, 23, 42, .06);
}

.lead-import-review-table > header {
    display: flex;
    justify-content: space-between;
    gap: 1rem;
    align-items: center;
    padding: 1.2rem 1.35rem;
    border-bottom: 1px solid var(--line);
}

.lead-import-review-table > header > div {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: .1rem .75rem;
}

.lead-import-review-table h2 {
    margin: 0;
    font-size: 1.05rem;
    font-weight: 800;
}

.lead-import-review-table header p {
    grid-column: 2;
    margin: 0;
    color: var(--muted);
    font-size: .74rem;
}

.lead-import-review-table table {
    min-width: 1180px;
    margin: 0;
}

.lead-import-review-table th {
    padding: .75rem;
    background: color-mix(in srgb, var(--surface-soft) 66%, var(--card));
    color: var(--muted);
    font-size: .65rem;
    letter-spacing: .07em;
    text-transform: uppercase;
}

.lead-import-review-table td {
    padding: .85rem .75rem;
    border-color: color-mix(in srgb, var(--line) 78%, transparent);
    font-size: .78rem;
    vertical-align: top;
}

.lead-import-review-table td > strong,
.lead-import-review-table td > span,
.lead-import-review-table td > small {
    display: block;
}

.lead-import-review-table td > span,
.lead-import-review-table td > small {
    margin-top: .15rem;
    color: var(--muted);
}

.lead-import-classification {
    display: inline-flex !important;
    gap: .35rem;
    align-items: center;
    padding: .35rem .55rem;
    border-radius: 999px;
    font-size: .68rem;
    font-weight: 800;
    white-space: nowrap;
}

.lead-import-classification.is-success { color: #157347; background: color-mix(in srgb, #198754 10%, var(--card)); }
.lead-import-classification.is-info { color: var(--primary); background: color-mix(in srgb, var(--primary) 10%, var(--card)); }
.lead-import-classification.is-warning { color: #9a6700; background: color-mix(in srgb, #f59e0b 12%, var(--card)); }
.lead-import-classification.is-danger { color: #b42334; background: color-mix(in srgb, #dc3545 10%, var(--card)); }

.lead-import-comparison,
.lead-import-existing {
    display: grid;
    gap: .35rem;
}

.lead-import-comparison > div {
    display: grid;
    grid-template-columns: 75px 1fr auto 1fr;
    gap: .35rem;
    align-items: center;
    padding-bottom: .3rem;
    border-bottom: 1px dashed var(--line);
    font-size: .7rem;
}

.lead-import-comparison small { color: var(--muted); font-weight: 800; }
.lead-import-comparison del { color: var(--muted); }
.lead-import-comparison strong { color: var(--primary); }
.lead-import-existing a { color: var(--primary); font-weight: 800; text-decoration: none; }

.lead-import-error {
    display: flex;
    gap: .4rem;
    color: #b42334;
    font-weight: 700;
}

.lead-import-line-choice {
    display: flex;
    gap: .4rem;
    align-items: center;
    margin-bottom: .5rem;
    color: var(--text);
    font-size: .72rem;
    font-weight: 800;
    white-space: nowrap;
}

.lead-import-confirm-footer {
    position: sticky;
    z-index: 8;
    bottom: 1rem;
    display: flex;
    gap: .7rem;
    align-items: center;
    padding: .85rem 1rem;
    border: 1px solid color-mix(in srgb, var(--primary) 18%, var(--line));
    border-radius: 18px;
    background: color-mix(in srgb, var(--card) 92%, transparent);
    box-shadow: 0 18px 48px rgba(15, 23, 42, .16);
    backdrop-filter: blur(18px);
}

.lead-import-confirm-footer > div {
    display: flex;
    flex: 1;
    gap: .65rem;
    align-items: center;
}

.lead-import-confirm-footer > div > i { color: var(--primary); font-size: 1.25rem; }
.lead-import-confirm-footer > div span { display: flex; flex-direction: column; }
.lead-import-confirm-footer small { color: var(--muted); font-size: .7rem; }

@media (max-width: 1199.98px) {
    .lead-import-preview-stats { grid-template-columns: repeat(4, minmax(120px, 1fr)); }
    .lead-import-preview-hero { grid-template-columns: 1fr auto; }
    .lead-import-preview-hero > a { grid-column: 1 / -1; }
    .lead-segment-row { grid-template-columns: minmax(220px, 1fr) auto auto; }
    .lead-segment-row > form:not(.lead-segment-name-form) { grid-row: 2; }
}

@media (max-width: 767.98px) {
    .lead-bulk-bar { grid-template-columns: 1fr; }
    .lead-import-preview-hero { grid-template-columns: 1fr; padding: 1.15rem; }
    .lead-import-preview-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .lead-import-decisions { grid-template-columns: 1fr; }
    .lead-import-decisions label { grid-template-columns: 1fr; }
    .lead-import-decisions select { grid-column: 1; grid-row: auto; min-width: 0; margin-top: .6rem; }
    .lead-segment-row { grid-template-columns: 1fr auto; }
    .lead-segment-name-form { grid-column: 1 / -1; }
    .lead-duplicate-existing { grid-template-columns: 1fr; }
    .lead-duplicate-comparison label span { grid-template-columns: 1fr; }
    .lead-import-confirm-footer { position: static; flex-wrap: wrap; }
    .lead-import-confirm-footer > div { flex-basis: 100%; }
    .lead-import-confirm-footer .btn { flex: 1 1 100%; }
}


html[data-accent='verde'] {
    --primary: #1f6f5b;
    --primary-hover: #185846;
    --sidebar: #1f6f5b;
}

html[data-accent='rosa'] {
    --primary: #a3396b;
    --primary-hover: #872f59;
    --sidebar: #a3396b;
}

html[data-accent='vinho'] {
    --primary: #7f1d3a;
    --primary-hover: #64172e;
    --sidebar: #7f1d3a;
}

html[data-accent='grafite'] {
    --primary: #28323c;
    --primary-hover: #1f2830;
    --sidebar: #28323c;
}

html[data-accent='preto'] {
    --primary: #111827;
    --primary-hover: #030712;
    --sidebar: #0b1120;
}

html[data-theme='dark'] {
    color-scheme: dark;
    --primary: #465779;
    --primary-hover: #5b6c8d;
    --bg: #0f0f0f;
    --card: #3f3f3f;
    --text: #ffffff;
    --muted: #d6dee2;
    --line: #262626;
    --sidebar: #0f0f0f;
    --surface-soft: #0f0f0f;
}

html[data-theme='dark'][data-accent='verde'] {
    --primary: #2f8f74;
    --primary-hover: #3da388;
}

html[data-theme='dark'][data-accent='rosa'] {
    --primary: #d95f9b;
    --primary-hover: #ec7eb3;
}

html[data-theme='dark'][data-accent='vinho'] {
    --primary: #a3294f;
    --primary-hover: #bd3761;
}

html[data-theme='dark'][data-accent='grafite'] {
    --primary: #41566b;
    --primary-hover: #536b82;
}

html[data-theme='dark'][data-accent='preto'] {
    --primary: #111827;
    --primary-hover: #030712;
    --sidebar: #030712;
}

html,
body {
    max-width: 100%;
    min-height: 100%;
    overflow-x: hidden;
    overflow-y: auto;
    -webkit-tap-highlight-color: transparent;
}

html {
    scrollbar-gutter: stable;
    scrollbar-width: thin;
    scrollbar-color: #c4ccd4 transparent;
}

@media (min-width: 992px) and (max-width: 1439.98px) {
    html {
        font-size: 90%;
    }
}

html::-webkit-scrollbar,
body::-webkit-scrollbar {
    width: 10px;
    height: 10px;
}

html::-webkit-scrollbar-track,
body::-webkit-scrollbar-track {
    background: transparent;
}

html::-webkit-scrollbar-thumb,
body::-webkit-scrollbar-thumb {
    border: 0;
    border-radius: 0;
    background: #c4ccd4;
    background-clip: border-box;
}

html::-webkit-scrollbar-thumb:hover,
body::-webkit-scrollbar-thumb:hover {
    background: #9ca3af;
    background-clip: border-box;
}

html[data-theme='dark'] {
    scrollbar-color: #325a82 transparent;
}

body.app-scroll-locked {
    position: fixed;
    inset: var(--app-scroll-lock-top, 0) 0 auto 0;
    width: 100%;
    overflow: hidden !important;
    padding-right: 0 !important;
}

body.modal-open,
body.offcanvas-open,
body.app-overlay-open {
    overflow: hidden !important;
    padding-right: 0 !important;
}

@media (min-width: 768px) {
    body.app-scroll-locked {
        inset: auto;
        position: static;
        width: auto;
    }
}

body {
    font-family: 'Manrope', 'Segoe UI', sans-serif;
    background:
        radial-gradient(circle at 8% 0%, rgba(9, 83, 94, .10), transparent 34%),
        radial-gradient(circle at 100% 0%, rgba(7, 68, 77, .08), transparent 30%),
        var(--bg);
    color: var(--text);
    letter-spacing: -.01em;
    touch-action: manipulation;
}

html[data-theme='dark'] body {
    background: #0f0f0f;
    color: #ffffff;
}

a {
    color: var(--primary);
}

.app-shell {
    display: flex;
    min-height: 100vh;
}

.sidebar {
    width: var(--sidebar-width);
    background: var(--sidebar);
    color: #fff;
    position: fixed;
    inset: 0 auto 0 0;
    overflow-y: auto;
    z-index: 1050;
    border-right: 1px solid rgba(255, 255, 255, .08);
    box-shadow: 16px 0 34px rgba(0, 0, 0, .22);
    transition: width .24s ease, transform .24s ease;
    scrollbar-width: none;
    -ms-overflow-style: none;
}

.sidebar::-webkit-scrollbar {
    width: 0;
    height: 0;
}

.sidebar .brand {
    min-height: 90px;
    border-bottom: 1px solid rgba(255, 255, 255, .15);
    display: flex;
    align-items: center;
    gap: .75rem;
}

.brand-mark,
.auth-brand-mark {
    width: 2.25rem;
    height: 2.25rem;
    border-radius: .85rem;
    background: linear-gradient(145deg, var(--primary), var(--primary-hover));
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: .8rem;
    font-weight: 800;
    color: #fff;
    flex: 0 0 auto;
}

.brand-eyebrow {
    font-size: .68rem;
    color: rgba(255, 255, 255, .56);
    text-transform: uppercase;
    letter-spacing: .08em;
}

.brand-title {
    line-height: 1.1;
}

.brand-subtitle {
    color: rgba(255, 255, 255, .62);
}

.sidebar .nav-link {
    color: rgba(229, 231, 235, .82);
    border-radius: .75rem;
    padding: .64rem .72rem;
    font-size: .92rem;
    font-weight: 600;
    display: flex;
    align-items: center;
    gap: .55rem;
    transition: all .2s ease;
}

.sidebar .nav-link i {
    font-size: 1.05rem;
    min-width: 1.3rem;
    text-align: center;
}

.sidebar .nav-link.active,
.sidebar .nav-link:hover {
    background: color-mix(in srgb, var(--primary) 24%, transparent 76%);
    color: #fff;
    transform: translateX(2px);
}

.sidebar-nav-section {
    margin: .9rem .72rem .25rem;
    color: rgba(229, 231, 235, .46);
    font-size: .61rem;
    font-weight: 800;
    letter-spacing: .11em;
}

html.sidebar-collapsed-init .sidebar-nav-section,
body.sidebar-collapsed .sidebar-nav-section {
    height: 1px;
    margin: .7rem .55rem .25rem;
    overflow: hidden;
    color: transparent;
    background: rgba(255, 255, 255, .14);
}

.nav-link-logout {
    margin-top: .4rem;
    border-top: 1px solid rgba(255, 255, 255, .16);
    border-radius: 0;
    padding-top: .9rem !important;
}

.content-area {
    margin-left: var(--sidebar-width);
    width: calc(100% - var(--sidebar-width));
    transition: margin-left .24s ease, width .24s ease;
}

.auth-content {
    margin-left: 0;
    width: 100%;
}

.topbar {
    position: sticky;
    top: 0;
    z-index: 900;
    min-height: 70px;
    padding: .9rem 1rem;
    border: 1px solid var(--line);
    border-radius: 1rem;
    margin: 1rem 1rem 0;
    background: color-mix(in srgb, var(--card) 88%, var(--surface-soft) 12%);
    backdrop-filter: blur(12px);
}

html[data-theme='dark'] .topbar {
    background: #0f0f0f;
    color: #ffffff;
}

.topbar h6 {
    font-weight: 800;
    letter-spacing: -.02em;
}

.page-container {
    padding: 1.5rem 1.1rem 2rem;
}

.text-soft-wrap,
.app-card,
.modal-content,
.offcanvas,
.notification-card,
.table td,
.table th {
    overflow-wrap: anywhere;
    word-break: normal;
}

.text-truncate-soft,
.email-truncate {
    display: inline-block;
    max-width: min(100%, 18rem);
    overflow: hidden;
    text-overflow: ellipsis;
    vertical-align: bottom;
    white-space: nowrap;
}

.email-truncate {
    direction: ltr;
}

.compact-muted {
    color: var(--muted);
    font-size: .82rem;
    line-height: 1.35;
}

.card-summary-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(9rem, 1fr));
    gap: .75rem;
}

.card-summary-item {
    min-width: 0;
    padding: .8rem;
    border: 1px solid var(--line);
    border-radius: .9rem;
    background: color-mix(in srgb, var(--card) 92%, var(--surface-soft) 8%);
}

.member-activity-page {
    max-width: 1180px;
    margin-inline: auto;
}

.member-activity-hero {
    padding: clamp(1.15rem, 2vw, 1.75rem);
    border: 1px solid var(--line);
    border-radius: 1rem;
    background: color-mix(in srgb, var(--card) 96%, var(--primary) 4%);
}

.member-activity-avatar {
    display: inline-grid;
    place-items: center;
    flex: 0 0 3.25rem;
    width: 3.25rem;
    height: 3.25rem;
    border-radius: 1rem;
    color: #fff;
    font-size: 1.35rem;
    font-weight: 800;
    background: var(--primary);
}

.member-activity-facts {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: .85rem;
}

.member-activity-fact {
    min-width: 0;
    border: 1px solid var(--line);
    border-radius: .9rem;
    background: var(--card);
}

.member-activity-fact {
    display: flex;
    align-items: center;
    gap: .8rem;
    min-height: 5.25rem;
    padding: 1rem;
}

.member-activity-fact > i {
    display: grid;
    place-items: center;
    flex: 0 0 2.5rem;
    width: 2.5rem;
    height: 2.5rem;
    border-radius: .75rem;
    color: var(--primary);
    background: color-mix(in srgb, var(--primary) 12%, transparent);
}

.member-activity-event {
    min-height: 5.7rem;
}

.member-activity-detail-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: .75rem;
}

.member-activity-detail-grid > div {
    min-width: 0;
    padding: .9rem 1rem;
    border: 1px solid var(--line);
    border-radius: .85rem;
    background: color-mix(in srgb, var(--card) 94%, var(--surface-soft) 6%);
}

.member-activity-detail-grid dt {
    margin-bottom: .15rem;
    color: var(--muted);
    font-size: .72rem;
    font-weight: 600;
}

.member-activity-detail-grid dd {
    margin: 0;
    overflow-wrap: anywhere;
    font-size: .86rem;
    font-weight: 700;
}

.member-activity-details-panel {
    width: min(38rem, 94vw) !important;
    --bs-offcanvas-width: min(38rem, 94vw);
}

.member-activity-details-panel .offcanvas-header {
    padding: 1.25rem;
    background: color-mix(in srgb, var(--card) 96%, var(--primary) 4%);
}

.member-activity-details-panel .offcanvas-body {
    padding: 1.25rem;
}

.member-activity-details-panel .member-activity-detail-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.member-activity-panel-icon {
    display: grid;
    place-items: center;
    flex: 0 0 2.75rem;
    width: 2.75rem;
    height: 2.75rem;
    border-radius: .8rem;
    color: var(--primary);
    background: color-mix(in srgb, var(--primary) 12%, transparent);
}

.member-activity-panel-eyebrow {
    margin-bottom: .15rem;
    font-size: .65rem;
    font-weight: 800;
    letter-spacing: .08em;
}

.member-activity-detail-wide {
    grid-column: 1 / -1;
}

.member-activity-detail-highlight {
    border-color: color-mix(in srgb, var(--primary) 30%, var(--line)) !important;
    background: color-mix(in srgb, var(--primary) 7%, var(--card)) !important;
}

.member-activity-detail-highlight dd {
    color: var(--primary);
    font-size: 1rem;
}

@media (max-width: 767.98px) {
    .member-activity-facts {
        grid-template-columns: 1fr;
    }

    .member-activity-detail-grid {
        grid-template-columns: 1fr;
    }

    .member-activity-details-panel .member-activity-detail-grid {
        grid-template-columns: 1fr;
    }
}

.card,
.app-card,
.metric,
.stat-card {
    border-radius: 1rem;
    border: 1px solid var(--line);
    background: color-mix(in srgb, var(--card) 94%, var(--surface-soft) 6%);
    box-shadow: 0 12px 24px rgba(15, 23, 42, .07);
}

.modal {
    --bs-modal-zindex: 2100;
}

.modal-backdrop {
    --bs-backdrop-zindex: 2090;
    background: rgba(7, 18, 26, .62);
    backdrop-filter: blur(3px);
}

.modal-backdrop.show {
    opacity: 1;
}

.modal.fade .modal-dialog {
    opacity: 0;
    transform: translate3d(0, 12px, 0) scale(.985);
    transition:
        opacity .18s ease,
        transform .22s cubic-bezier(.2, .8, .2, 1);
}

.modal.show .modal-dialog {
    opacity: 1;
    transform: translate3d(0, 0, 0) scale(1);
}

.modal-content {
    border: 1px solid var(--line);
    border-radius: 1.15rem;
    background:
        linear-gradient(180deg, color-mix(in srgb, var(--card) 98%, var(--surface-soft) 2%) 0%, color-mix(in srgb, var(--card) 92%, var(--surface-soft) 8%) 100%);
    color: var(--text);
    box-shadow: 0 28px 80px rgba(15, 23, 42, .24);
}

.modal-header,
.modal-footer {
    border-color: var(--line);
}

.modal-header {
    background: color-mix(in srgb, var(--card) 88%, var(--surface-soft) 12%);
}

.modal-body {
    background: transparent;
}

.modal-footer {
    background: color-mix(in srgb, var(--card) 92%, var(--surface-soft) 8%);
}

.offcanvas {
    --bs-offcanvas-zindex: 2060;
    transition: transform .24s cubic-bezier(.2, .8, .2, 1);
}

.offcanvas-backdrop {
    --bs-backdrop-zindex: 2050;
    background: rgba(7, 18, 26, .58);
    backdrop-filter: blur(3px);
}

.offcanvas-backdrop.show {
    opacity: 1;
}

@media (prefers-reduced-motion: reduce) {
    .modal.fade .modal-dialog,
    .offcanvas {
        transition: none;
    }
}

html[data-theme='dark'] .card,
html[data-theme='dark'] .app-card,
html[data-theme='dark'] .metric,
html[data-theme='dark'] .stat-card,
html[data-theme='dark'] .modal-content,
html[data-theme='dark'] .table-responsive {
    background: #0f0f0f;
    border-color: var(--line);
    color: #ffffff;
}

html[data-theme='dark'] .modal-content {
    background:
        linear-gradient(180deg, #121416 0%, #0b0d0f 100%);
    border-color: #2a2f35;
    box-shadow: 0 28px 90px rgba(0, 0, 0, .55);
}

.metric {
    padding: 1.25rem;
}

.metric-card {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: .45rem;
    min-height: 5.4rem;
    padding: 1rem 1.1rem;
    border: 1px solid var(--line);
    border-radius: 1rem;
    background: color-mix(in srgb, var(--card) 92%, var(--surface-soft) 8%);
}

.metric-card span {
    display: block;
    color: var(--muted);
    font-size: .82rem;
    font-weight: 800;
    line-height: 1.25;
}

.metric-card strong {
    display: block;
    color: var(--text);
    font-size: clamp(1.05rem, 1.6vw, 1.35rem);
    font-weight: 900;
    line-height: 1.2;
    word-break: break-word;
}

html[data-theme='dark'] .metric-card {
    background: #0f0f0f;
    border-color: var(--line);
}

html[data-theme='dark'] .metric-card strong {
    color: #ffffff;
}

.personal-expense-public {
    width: min(1180px, calc(100% - 2rem));
    margin: 2rem auto;
}

.personal-expense-public-brand {
    display: flex;
    align-items: center;
    gap: .8rem;
    margin-bottom: 1.25rem;
}

.personal-expense-public-logo {
    width: 2.75rem;
    height: 2.75rem;
    display: grid;
    place-items: center;
    border-radius: .9rem;
    color: #fff;
    font-size: 1.2rem;
    background: linear-gradient(145deg, var(--primary), var(--primary-hover));
    box-shadow: 0 10px 24px color-mix(in srgb, var(--primary) 28%, transparent);
}

.personal-expense-public-brand > div:nth-child(2) {
    display: grid;
}

.personal-expense-public-brand strong {
    font-size: .95rem;
}

.personal-expense-public-brand span {
    color: var(--muted);
    font-size: .75rem;
}

.personal-expense-public-readonly {
    margin-left: auto;
    padding: .45rem .7rem;
    border: 1px solid var(--line);
    border-radius: 999px;
    background: var(--card);
    font-weight: 700;
}

.personal-expense-public-hero {
    position: relative;
    overflow: hidden;
    border: 1px solid color-mix(in srgb, var(--primary) 18%, var(--line));
    box-shadow: 0 22px 55px rgba(21, 41, 49, .08);
}

.personal-expense-public-hero::after {
    content: '';
    position: absolute;
    width: 18rem;
    height: 18rem;
    right: -8rem;
    top: -10rem;
    border-radius: 50%;
    background: color-mix(in srgb, var(--primary) 8%, transparent);
    pointer-events: none;
}

.personal-expense-public-hero .card-body {
    padding: clamp(1.35rem, 3vw, 2rem);
}

.personal-expense-public-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    margin-bottom: .7rem;
    color: var(--primary);
    font-size: .76rem;
    font-weight: 800;
    letter-spacing: .04em;
    text-transform: uppercase;
}

.personal-expense-public-period {
    display: grid;
    min-width: 8rem;
    padding: .75rem 1rem;
    border: 1px solid var(--line);
    border-radius: .9rem;
    background: color-mix(in srgb, var(--card) 80%, var(--surface-soft) 20%);
}

.personal-expense-public-period span {
    color: var(--muted);
    font-size: .7rem;
    font-weight: 700;
}

.personal-expense-public-period strong {
    font-size: 1.15rem;
}

.personal-expense-public-metric {
    height: 100%;
    min-height: 8rem;
    display: grid;
    grid-template-columns: auto 1fr;
    align-content: center;
    gap: .25rem .65rem;
    padding: 1rem;
    border: 1px solid var(--line);
    border-radius: 1rem;
    background: color-mix(in srgb, var(--card) 88%, var(--surface-soft) 12%);
}

.personal-expense-public-metric-icon {
    grid-row: span 2;
    width: 2.25rem;
    height: 2.25rem;
    display: grid;
    place-items: center;
    border-radius: .75rem;
    color: var(--primary);
    background: color-mix(in srgb, var(--primary) 12%, transparent);
}

.personal-expense-public-metric.is-success .personal-expense-public-metric-icon { color: #198754; background: rgba(25, 135, 84, .12); }
.personal-expense-public-metric.is-warning .personal-expense-public-metric-icon { color: #b26a00; background: rgba(255, 193, 7, .15); }
.personal-expense-public-metric.is-info .personal-expense-public-metric-icon { color: #087990; background: rgba(13, 202, 240, .13); }

.personal-expense-public-metric span {
    color: var(--muted);
    font-size: .75rem;
    font-weight: 700;
}

.personal-expense-public-metric strong {
    font-size: clamp(1rem, 2vw, 1.28rem);
    line-height: 1.2;
}

.personal-expense-public-records {
    box-shadow: 0 18px 50px rgba(21, 41, 49, .07);
}

.personal-expense-public-records .card-body {
    padding: clamp(1rem, 2.5vw, 1.5rem);
}

.personal-expense-public-filter {
    display: flex;
    align-items: center;
    gap: .5rem;
    padding: .4rem;
    border: 1px solid var(--line);
    border-radius: .85rem;
    background: var(--surface-soft);
}

.personal-expense-public-table thead th {
    color: var(--muted);
    font-size: .7rem;
    letter-spacing: .05em;
    text-transform: uppercase;
}

.personal-expense-public-table tbody tr:last-child td {
    border-bottom: 0;
}

.personal-expense-public-footer {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: .45rem;
    padding: 1.25rem;
    color: var(--muted);
    font-size: .75rem;
}

@media (max-width: 767.98px) {
    .personal-expense-public {
        width: min(100% - 1rem, 1180px);
        margin: .75rem auto 1.5rem;
    }

    .personal-expense-public-readonly {
        display: none;
    }

    .personal-expense-public-period {
        width: 100%;
    }

    .personal-expense-public-metric {
        min-height: 7rem;
        grid-template-columns: 1fr;
    }

    .personal-expense-public-metric-icon {
        grid-row: auto;
    }

    .personal-expense-public-filter {
        width: 100%;
        justify-content: center;
        flex-wrap: wrap;
    }

    .personal-expense-public-filter form {
        flex: 1;
    }

    .personal-expense-public-filter input[type='month'] {
        min-width: 0;
    }
}

@media (min-width: 1280px) {
    .finance-recurring-metrics > [class*='col-'] {
        flex: 0 0 auto;
        width: 33.333333%;
    }
}

.crm-agenda-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
    gap: .75rem;
}

.crm-agenda-card,
.customer-crm-card {
    border: 1px solid color-mix(in srgb, var(--line) 86%, transparent);
    border-radius: 1.15rem;
    background:
        linear-gradient(180deg, color-mix(in srgb, var(--card) 98%, #ffffff 2%), var(--card));
    box-shadow: 0 14px 34px rgba(15, 23, 42, .055);
}

.crm-agenda-card {
    display: flex;
    flex-direction: column;
    gap: .45rem;
    min-height: 4.8rem;
    padding: .82rem .9rem;
    transition: transform .18s ease, border-color .18s ease, box-shadow .18s ease;
}

.crm-agenda-card:hover {
    border-color: color-mix(in srgb, var(--primary) 24%, var(--line));
    box-shadow: 0 16px 34px rgba(15, 23, 42, .075);
    transform: translateY(-1px);
}

.crm-agenda-card i {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.95rem;
    height: 1.95rem;
    border-radius: .75rem;
    background: color-mix(in srgb, currentColor 10%, transparent);
    font-size: .95rem;
}

.crm-agenda-card strong {
    display: block;
    margin-top: .15rem;
    color: var(--text);
    font-size: 1.25rem;
    font-weight: 900;
    line-height: 1;
}

.crm-agenda-card small,
.crm-agenda-label,
.crm-section-label {
    color: var(--muted);
    font-size: .72rem;
    font-weight: 800;
}

.crm-agenda-card small {
    display: -webkit-box;
    overflow: hidden;
    line-height: 1.25;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
}

.crm-agenda-label,
.crm-section-label {
    letter-spacing: .04em;
    text-transform: uppercase;
}

.customer-crm-page {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    margin-inline: auto;
    max-width: 1480px;
}

.customer-crm-hero {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1.25rem;
    padding: 1.25rem 1.35rem;
    border: 1px solid color-mix(in srgb, var(--line) 86%, transparent);
    border-radius: 1.5rem;
    background:
        radial-gradient(circle at top left, color-mix(in srgb, var(--primary) 5%, transparent), transparent 32%),
        linear-gradient(135deg, color-mix(in srgb, var(--card) 99%, var(--surface-soft) 1%), color-mix(in srgb, var(--card) 96%, var(--surface-soft) 4%));
    box-shadow: 0 10px 28px rgba(15, 23, 42, .035);
}

.customer-crm-hero-main {
    display: grid;
    gap: .85rem;
    min-width: 0;
}

.customer-crm-breadcrumb {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: .45rem;
    color: var(--muted);
    font-size: .82rem;
    font-weight: 700;
}

.customer-crm-breadcrumb a {
    color: inherit;
    text-decoration: none;
}

.customer-crm-breadcrumb i {
    font-size: .72rem;
}

.customer-crm-hero-copy {
    display: grid;
    gap: .55rem;
}

.customer-crm-identity {
    min-width: 0;
}

.customer-crm-hero-copy h1 {
    letter-spacing: -.035em;
    line-height: 1.05;
    font-size: clamp(1.45rem, 2vw, 1.95rem);
}

.customer-crm-tag-row {
    display: flex;
    flex-wrap: wrap;
    gap: .55rem;
}

.customer-crm-tag-row.is-stacked {
    margin-bottom: 1rem;
}

.customer-crm-hero-actions {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: .7rem;
}

.customer-crm-back {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.35rem;
    height: 2.35rem;
    padding: 0;
    border-radius: .85rem;
}

.customer-crm-contact {
    display: flex;
    flex-wrap: wrap;
    gap: .55rem .85rem;
    color: var(--muted);
    font-size: .86rem;
}

.customer-crm-contact span {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    padding: .42rem .64rem;
    border: 1px solid color-mix(in srgb, var(--line) 80%, transparent);
    border-radius: 999px;
    background: color-mix(in srgb, var(--card) 96%, transparent);
    font-size: .79rem;
}

.crm-summary-grid,
.customer-crm-layout,
.crm-two-columns {
    display: grid;
    gap: .9rem;
}

.crm-summary-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
}

.crm-summary-card {
    min-height: 6.5rem;
    padding: .9rem .95rem .85rem;
    border-radius: 1.15rem;
    box-shadow: 0 6px 18px rgba(15, 23, 42, .025);
}

.crm-summary-card strong {
    font-size: 1.35rem;
    letter-spacing: -.03em;
    line-height: 1.15;
}

.crm-summary-card small {
    color: var(--muted);
    font-size: .7rem;
    font-weight: 700;
    line-height: 1.3;
}

.crm-summary-card-accent {
    border-color: color-mix(in srgb, #d6a34d 34%, var(--line));
    box-shadow: inset 2px 0 0 color-mix(in srgb, #d6a34d 82%, white 18%);
}

.crm-summary-card-accent strong {
    color: #9a6a24;
}

.customer-crm-dashboard {
    display: grid;
    grid-template-columns: minmax(0, 1.62fr) minmax(300px, .78fr);
    gap: 1rem;
    align-items: start;
}

.customer-crm-main,
.customer-crm-sidebar {
    display: grid;
    gap: 1rem;
}

.customer-crm-sidebar {
    position: sticky;
    top: 1rem;
}

.customer-crm-duo {
    display: grid;
    gap: 1rem;
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.customer-crm-duo.is-single {
    grid-template-columns: minmax(0, 1fr);
}

.customer-crm-panel {
    border-color: color-mix(in srgb, var(--line) 82%, transparent);
    border-radius: 1.2rem;
    box-shadow: 0 8px 22px rgba(15, 23, 42, .03);
}

.customer-crm-panel .card-body {
    padding: .9rem;
}

.customer-crm-panel-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: .9rem;
    margin-bottom: .8rem;
}

.customer-crm-panel-header h2 {
    margin: .1rem 0 0;
    color: var(--text);
    font-size: .94rem;
    font-weight: 900;
    letter-spacing: -.02em;
}

.customer-crm-panel-meta {
    color: var(--muted);
    font-size: .74rem;
    font-weight: 800;
    white-space: nowrap;
}

.customer-crm-chip-row {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: .5rem;
}

.customer-crm-chip {
    padding: .38rem .62rem;
    border-radius: .75rem;
    background: color-mix(in srgb, var(--surface-soft) 42%, var(--card));
    color: var(--muted);
    font-size: .68rem;
    font-weight: 800;
}

.customer-crm-chip.is-active {
    background: color-mix(in srgb, var(--primary) 8%, var(--card));
    color: color-mix(in srgb, var(--primary) 78%, var(--text) 22%);
}

.customer-crm-finance-table {
    border: 1px solid color-mix(in srgb, var(--line) 80%, transparent);
    border-radius: 1.2rem;
    overflow: hidden;
    background: color-mix(in srgb, var(--card) 99%, transparent);
}

.customer-crm-finance-head,
.customer-crm-finance-row {
    display: grid;
    gap: 1rem;
    grid-template-columns: minmax(92px, .7fr) minmax(0, 1.5fr) minmax(100px, .6fr) minmax(92px, .55fr);
    align-items: center;
}

.customer-crm-finance-head {
    padding: .72rem .9rem;
    border-bottom: 1px solid color-mix(in srgb, var(--line) 72%, transparent);
    color: var(--muted);
    font-size: .64rem;
    font-weight: 900;
    letter-spacing: .08em;
    text-transform: uppercase;
}

.customer-crm-finance-body {
    display: grid;
}

.customer-crm-finance-row {
    padding: .8rem .9rem;
    border-bottom: 1px solid color-mix(in srgb, var(--line) 68%, transparent);
}

.customer-crm-finance-row:last-child {
    border-bottom: 0;
}

.customer-crm-finance-date,
.customer-crm-finance-value {
    color: var(--text);
    font-weight: 850;
    font-size: .82rem;
}

.customer-crm-finance-copy strong {
    display: block;
    font-size: .82rem;
    line-height: 1.25;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.customer-crm-finance-copy span {
    display: block;
    margin-top: .2rem;
    color: var(--muted);
    font-size: .69rem;
    line-height: 1.25;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.customer-crm-finance-value {
    text-align: right;
    font-size: .84rem;
}

.customer-crm-status {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: .28rem .5rem;
    border-radius: 999px;
    font-size: .66rem;
    font-weight: 900;
    line-height: 1;
    text-transform: uppercase;
}

.customer-crm-status.is-success {
    background: rgba(34, 197, 94, .08);
    color: #2d7a4f;
}

.customer-crm-status.is-warning {
    background: rgba(214, 163, 77, .11);
    color: #9a6a24;
}

.customer-crm-status.is-danger {
    background: rgba(239, 68, 68, .08);
    color: #9d3d3d;
}

.customer-crm-status.is-neutral {
    background: color-mix(in srgb, var(--surface-soft) 68%, transparent);
    color: var(--muted);
}

.customer-crm-product-list,
.customer-crm-message-stream {
    display: grid;
    gap: .8rem;
}

.customer-crm-product-item {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    gap: .85rem;
    align-items: center;
    padding: .72rem;
    border: 1px solid color-mix(in srgb, var(--line) 75%, transparent);
    border-radius: .9rem;
    background: color-mix(in srgb, var(--surface-soft) 30%, transparent);
}

.customer-crm-product-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 2.35rem;
    height: 2.35rem;
    padding-inline: .55rem;
    border-radius: .75rem;
    background: linear-gradient(135deg, color-mix(in srgb, var(--primary) 8%, white), color-mix(in srgb, #14b8a6 10%, white));
    color: color-mix(in srgb, var(--primary) 74%, var(--text) 26%);
    font-size: .82rem;
    font-weight: 900;
}

.customer-crm-product-copy strong {
    display: block;
    font-size: .8rem;
    line-height: 1.3;
    display: -webkit-box;
    overflow: hidden;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
}

.customer-crm-product-copy span {
    display: block;
    margin-top: .16rem;
    color: var(--muted);
    font-size: .67rem;
}

.customer-crm-message-stream {
    max-height: 22rem;
    overflow: auto;
    padding: .12rem .15rem .12rem 0;
}

.customer-crm-message-bubble {
    display: grid;
    gap: .42rem;
    width: 100%;
    padding: .72rem .78rem;
    border: 1px solid color-mix(in srgb, var(--line) 74%, transparent);
    border-left: 3px solid color-mix(in srgb, var(--primary) 56%, var(--line) 44%);
    border-radius: .85rem;
    background: color-mix(in srgb, var(--card) 96%, var(--surface-soft) 4%);
    color: var(--text);
    box-shadow: 0 3px 10px rgba(15, 23, 42, .025);
}

.customer-crm-message-bubble.is-brand {
    border-left-color: #198754;
    background: linear-gradient(135deg, color-mix(in srgb, #198754 5%, var(--card)), color-mix(in srgb, var(--surface-soft) 32%, var(--card)));
    color: var(--text);
}

.customer-crm-message-bubble.is-muted {
    border-left-color: #d6a34d;
    background: color-mix(in srgb, #d6a34d 7%, var(--card));
    color: var(--text);
}

.customer-crm-message-bubble.is-error {
    background: color-mix(in srgb, #ef4444 10%, var(--card));
    border: 1px solid rgba(239, 68, 68, .18);
    color: var(--text);
}

.customer-crm-message-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .75rem;
}

.customer-crm-message-top strong,
.customer-crm-message-bubble p,
.customer-crm-message-bubble small {
    color: inherit;
}

.customer-crm-message-top strong {
    font-size: .8rem;
    font-weight: 900;
    letter-spacing: -.01em;
}

.customer-crm-message-top span {
    border-radius: 999px;
    background: color-mix(in srgb, var(--surface-soft) 78%, var(--card));
    color: color-mix(in srgb, var(--text) 78%, var(--muted) 22%);
    font-size: .58rem;
    font-weight: 900;
    line-height: 1;
    padding: .26rem .43rem;
    text-transform: uppercase;
}

.customer-crm-message-bubble.is-brand .customer-crm-message-top span {
    background: rgba(25, 135, 84, .1);
    color: #1f7a4f;
}

.customer-crm-message-bubble.is-muted .customer-crm-message-top span {
    background: rgba(214, 163, 77, .12);
    color: #9a6a24;
}

.customer-crm-message-bubble.is-error .customer-crm-message-top span {
    background: rgba(239, 68, 68, .1);
    color: #9d3d3d;
}

.customer-crm-message-bubble p {
    margin: 0;
    line-height: 1.42;
    word-break: break-word;
    display: -webkit-box;
    overflow: hidden;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3;
    font-size: .73rem;
}

.customer-crm-message-bubble small {
    font-size: .62rem;
    color: var(--muted);
}

.customer-crm-message-error {
    color: #b91c1c !important;
    opacity: 1 !important;
}

.customer-crm-profile-card .card-body {
    text-align: center;
}

.customer-crm-avatar {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 3.85rem;
    height: 3.85rem;
    margin-bottom: .6rem;
    border-radius: 50%;
    background: linear-gradient(135deg, color-mix(in srgb, var(--primary) 68%, white 32%), color-mix(in srgb, #06b6d4 52%, white 48%));
    color: #fff;
    font-size: 1.35rem;
    font-weight: 900;
    box-shadow: 0 6px 16px rgba(79, 70, 229, .09);
}

.customer-crm-profile-name {
    margin: 0;
    color: var(--text);
    font-size: 1.08rem;
    font-weight: 900;
    letter-spacing: -.03em;
}

.customer-crm-profile-email {
    margin: .25rem 0 0;
    color: var(--muted);
    font-size: .72rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.customer-crm-profile-list {
    display: grid;
    gap: .52rem;
    margin-top: .85rem;
    padding-top: .8rem;
    border-top: 1px solid color-mix(in srgb, var(--line) 76%, transparent);
    text-align: left;
}

.customer-crm-profile-list > div {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .85rem;
}

.customer-crm-profile-list span {
    display: inline-flex;
    align-items: center;
    gap: .45rem;
    color: var(--muted);
    font-size: .68rem;
    min-width: 0;
}

.customer-crm-profile-list strong {
    color: var(--text);
    font-size: .72rem;
    font-weight: 850;
    text-align: right;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.customer-crm-highlight {
    display: grid;
    gap: .3rem;
    padding: .7rem .78rem;
    border-radius: .95rem;
    background: linear-gradient(135deg, color-mix(in srgb, var(--primary) 10%, var(--card)), color-mix(in srgb, #4f46e5 6%, var(--card)));
    color: var(--text);
    box-shadow: none;
    border: 1px solid color-mix(in srgb, var(--primary) 14%, var(--line));
}

.customer-crm-highlight strong,
.customer-crm-highlight small,
.customer-crm-highlight .crm-section-label {
    color: inherit;
}

.customer-crm-highlight .crm-section-label {
    opacity: .86;
}

.customer-crm-note-block {
    padding: .8rem;
    border: 1px solid color-mix(in srgb, var(--line) 75%, transparent);
    border-radius: .9rem;
    background: color-mix(in srgb, var(--surface-soft) 44%, transparent);
}

.customer-crm-note-block p {
    margin: .5rem 0 0;
    color: var(--muted);
    font-size: .74rem;
    line-height: 1.5;
    display: -webkit-box;
    overflow: hidden;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 6;
}

.customer-crm-kpi-stack {
    display: grid;
    gap: .55rem;
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.customer-crm-kpi-stack article {
    padding: .72rem .78rem;
    border: 1px solid color-mix(in srgb, var(--line) 75%, transparent);
    border-radius: .9rem;
    background: color-mix(in srgb, var(--surface-soft) 44%, transparent);
}

.customer-crm-kpi-stack span {
    display: block;
    color: var(--muted);
    font-size: .66rem;
    font-weight: 800;
    letter-spacing: .04em;
    text-transform: uppercase;
}

.customer-crm-kpi-stack strong {
    display: block;
    margin-top: .18rem;
    color: var(--text);
    font-size: .88rem;
    font-weight: 900;
}

.customer-crm-empty {
    padding: .8rem;
    border: 1px dashed color-mix(in srgb, var(--line) 70%, transparent);
    border-radius: .85rem;
    color: var(--muted);
    font-size: .72rem;
    text-align: center;
}

.customer-crm-more-note {
    border: 1px dashed color-mix(in srgb, var(--line) 70%, transparent);
    border-radius: .75rem;
    color: var(--muted);
    font-size: .7rem;
    font-weight: 800;
    padding: .55rem .7rem;
    text-align: center;
}

.crm-section-label {
    font-size: .66rem;
    letter-spacing: .08em;
}

.crm-list-row strong,
.crm-mini-list strong {
    font-size: .79rem;
    line-height: 1.3;
}

.crm-list-row span,
.crm-mini-list span {
    font-size: .68rem;
    line-height: 1.25;
}

.customer-crm-finance-scroll {
    max-height: 23rem;
    overflow: auto;
}

.customer-crm-compact-scroll {
    max-height: 14.5rem;
    overflow: auto;
}

.customer-crm-message-scroll {
    max-height: 14.5rem;
}

.customer-crm-timeline-scroll {
    max-height: 24rem;
    overflow: auto;
    padding-right: .15rem;
}

.customer-crm-layout {
    grid-template-columns: minmax(260px, .85fr) minmax(0, 1.15fr) minmax(0, 1.15fr);
    align-items: start;
}

.customer-crm-card-wide {
    grid-column: span 2;
}

.customer-crm-card .card-body {
    padding: 1rem;
}

.crm-card-title {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: .75rem;
    margin-bottom: .85rem;
}

.crm-card-title h2 {
    margin: .1rem 0 0;
    color: var(--text);
    font-size: 1rem;
    font-weight: 900;
    line-height: 1.2;
}

.crm-card-title > i {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2rem;
    height: 2rem;
    border-radius: .8rem;
    background: color-mix(in srgb, var(--primary) 9%, transparent);
    color: var(--primary);
    font-size: .95rem;
}

.crm-info-list,
.crm-mini-list {
    display: grid;
    gap: .7rem;
}

.crm-info-list > div,
.crm-mini-list > div,
.crm-timeline-item {
    border: 1px solid color-mix(in srgb, var(--line) 75%, transparent);
    border-radius: .95rem;
    background: color-mix(in srgb, var(--surface-soft) 44%, transparent);
    padding: .8rem .9rem;
}

.crm-info-list-compact {
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

.crm-info-list span,
.crm-mini-list span {
    display: block;
    color: var(--muted);
    font-size: .8rem;
    line-height: 1.35;
}

.crm-info-list strong,
.crm-mini-list strong {
    display: block;
    color: var(--text);
    font-weight: 850;
    line-height: 1.35;
    word-break: break-word;
}

.crm-two-columns {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.crm-subtitle {
    margin-bottom: .55rem;
    color: var(--muted);
    font-size: .75rem;
    font-weight: 900;
    letter-spacing: .04em;
    text-transform: uppercase;
}

.crm-list-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .8rem;
}

.crm-scroll-list {
    max-height: 18rem;
    overflow: auto;
    padding-right: .15rem;
}

.crm-message-list {
    max-height: 20rem;
}

.crm-followup-form {
    display: grid;
    gap: .55rem;
}

.crm-followup-form .form-control,
.crm-followup-form .btn {
    min-height: 2.55rem;
}

.crm-timeline {
    display: grid;
    gap: .62rem;
    position: relative;
}

.crm-timeline-item {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    gap: .65rem;
    padding: .68rem .78rem;
}

.crm-timeline-dot {
    width: .68rem;
    height: .68rem;
    margin-top: .28rem;
    border: 3px solid color-mix(in srgb, var(--card) 92%, white 8%);
    border-radius: 999px;
    box-shadow: 0 0 0 4px color-mix(in srgb, currentColor 15%, transparent);
}

.crm-timeline-item strong {
    font-size: .88rem;
}

.crm-timeline-item p {
    line-height: 1.35;
}

.customer-public-page {
    display: grid;
    min-height: min(720px, 100dvh - 2rem);
    place-items: center;
    width: 100%;
}

.customer-public-card {
    width: min(100%, 520px);
    padding: 1.5rem;
    border: 1px solid color-mix(in srgb, var(--line) 86%, transparent);
    border-radius: 1.35rem;
    background: color-mix(in srgb, var(--card) 96%, var(--surface-soft) 4%);
    box-shadow: 0 24px 70px rgba(15, 23, 42, .12);
}

.customer-public-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 3.25rem;
    height: 3.25rem;
    border-radius: 1rem;
    font-size: 1.45rem;
}

.profession-options {
    display: grid;
    gap: .45rem;
}

.profession-option {
    width: 100%;
    padding: .7rem .85rem;
    border: 1px solid var(--line);
    border-radius: .85rem;
    background: color-mix(in srgb, var(--card) 96%, var(--surface-soft) 4%);
    color: var(--text);
    font-weight: 750;
    text-align: left;
}

.profession-option:hover,
.profession-option:focus {
    border-color: color-mix(in srgb, var(--primary) 35%, var(--line));
    background: color-mix(in srgb, var(--primary) 8%, var(--card));
}

html[data-theme='dark'] .crm-agenda-card,
html[data-theme='dark'] .customer-crm-card,
html[data-theme='dark'] .customer-crm-hero {
    background: #0f0f0f;
    border-color: var(--line);
    box-shadow: none;
}

html[data-theme='dark'] .customer-crm-contact span,
html[data-theme='dark'] .crm-summary-card,
html[data-theme='dark'] .customer-crm-panel,
html[data-theme='dark'] .customer-crm-finance-table,
html[data-theme='dark'] .customer-crm-product-item,
html[data-theme='dark'] .customer-crm-note-block,
html[data-theme='dark'] .customer-crm-kpi-stack article {
    box-shadow: none;
}

html[data-theme='dark'] .customer-crm-chip,
html[data-theme='dark'] .customer-crm-profile-list > div,
html[data-theme='dark'] .customer-crm-event-meta span,
html[data-theme='dark'] .customer-crm-empty,
html[data-theme='dark'] .customer-crm-more-note {
    background: color-mix(in srgb, #ffffff 5%, #0f0f0f);
    border-color: var(--line);
    color: #d6dee2;
}

html[data-theme='dark'] .customer-crm-chip.is-active {
    background: color-mix(in srgb, var(--primary) 18%, #0f0f0f);
    color: #ffffff;
}

html[data-theme='dark'] .customer-crm-profile-list strong,
html[data-theme='dark'] .customer-crm-finance-copy strong,
html[data-theme='dark'] .customer-crm-finance-date,
html[data-theme='dark'] .customer-crm-finance-value,
html[data-theme='dark'] .crm-timeline-item strong,
html[data-theme='dark'] .crm-agenda-card strong {
    color: #ffffff;
}

html[data-theme='dark'] .customer-crm-finance-copy span,
html[data-theme='dark'] .customer-crm-profile-email,
html[data-theme='dark'] .customer-crm-note-block p,
html[data-theme='dark'] .customer-crm-product-copy span,
html[data-theme='dark'] .customer-crm-event-meta span,
html[data-theme='dark'] .crm-agenda-card small,
html[data-theme='dark'] .crm-agenda-label {
    color: #b8c3ca;
}

html[data-theme='dark'] .customer-crm-product-badge {
    background: linear-gradient(135deg, color-mix(in srgb, var(--primary) 30%, #0f0f0f), color-mix(in srgb, #14b8a6 24%, #0f0f0f));
    color: #ffffff;
}

html[data-theme='dark'] .crm-summary-card-accent {
    box-shadow: inset 3px 0 0 #f59e0b;
}

html[data-theme='dark'] .customer-crm-message-bubble.is-muted {
    background: color-mix(in srgb, #ffffff 6%, transparent);
}

html[data-theme='dark'] .customer-crm-message-bubble,
html[data-theme='dark'] .customer-crm-message-bubble.is-brand {
    background: color-mix(in srgb, #ffffff 5%, #0f0f0f);
    border-color: var(--line);
}

html[data-theme='dark'] .customer-crm-message-top span {
    background: color-mix(in srgb, #ffffff 8%, transparent);
    color: var(--muted);
}

html[data-theme='dark'] .customer-crm-highlight {
    color: #fff;
}

html[data-theme='dark'] .crm-info-list > div,
html[data-theme='dark'] .crm-mini-list > div,
html[data-theme='dark'] .crm-timeline-item {
    background: color-mix(in srgb, #ffffff 4%, transparent);
    border-color: var(--line);
}

html[data-theme='dark'] .badge-soft {
    background: color-mix(in srgb, var(--primary) 18%, #0f0f0f);
    color: #dbeafe;
}

html[data-theme='dark'] .alert-secondary {
    background: rgba(148, 163, 184, .16);
    border-color: rgba(148, 163, 184, .32);
    color: #ffffff;
}

@media (max-width: 1199px) {
    .crm-summary-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .customer-crm-dashboard,
    .customer-crm-duo,
    .customer-crm-layout {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .customer-crm-sidebar {
        position: static;
    }

    .customer-crm-card-wide {
        grid-column: span 2;
    }
}

.saas-page {
    display: flex;
    flex-direction: column;
    gap: 1.35rem;
    margin-inline: auto;
    max-width: 1480px;
}

.saas-hero {
    align-items: center;
    background:
        radial-gradient(circle at top left, color-mix(in srgb, var(--primary) 8%, transparent), transparent 34%),
        linear-gradient(135deg, color-mix(in srgb, var(--card) 98%, var(--surface-soft) 2%), color-mix(in srgb, var(--card) 91%, var(--surface-soft) 9%));
    border: 1px solid color-mix(in srgb, var(--line) 82%, transparent);
    border-radius: 1.45rem;
    box-shadow: 0 18px 46px rgba(15, 23, 42, .055);
    display: flex;
    gap: 1.25rem;
    justify-content: space-between;
    padding: 1.35rem 1.45rem;
    transition: border-color .18s ease, box-shadow .18s ease, transform .18s ease;
}

.saas-hero-compact {
    padding: 1.15rem 1.35rem;
}

.saas-hero h1 {
    letter-spacing: -.045em;
    line-height: 1.05;
}

.saas-hero p {
    font-size: .95rem;
    line-height: 1.45;
}

.saas-eyebrow {
    color: color-mix(in srgb, var(--primary) 74%, var(--muted) 26%);
    display: block;
    font-size: .72rem;
    font-weight: 900;
    letter-spacing: .105em;
    margin-bottom: .45rem;
    text-transform: uppercase;
}

.saas-hero-actions {
    align-items: center;
    display: flex;
    flex-wrap: wrap;
    gap: .65rem;
    justify-content: flex-end;
}

.saas-filter-form {
    align-items: center;
    display: grid;
    gap: .55rem;
    grid-template-columns: minmax(165px, 210px) auto;
}

.saas-filter-form-wide {
    grid-template-columns: minmax(165px, 210px) minmax(180px, 260px) auto;
}

.saas-filter-form .form-control,
.saas-filter-form .form-select,
.saas-filter-form .btn,
.saas-hero-actions > .btn {
    border-radius: .82rem;
    min-height: 42px;
}

.filter-result-anchor {
    scroll-margin-top: 7rem;
}

.saas-kpi-grid,
.saas-secondary-grid {
    display: grid;
    gap: .9rem;
}

.saas-kpi-grid,
.closing-kpi-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
}

.saas-kpi-card,
.saas-mini-card {
    background:
        linear-gradient(180deg, color-mix(in srgb, var(--card) 99%, var(--surface-soft) 1%), color-mix(in srgb, var(--card) 94%, var(--surface-soft) 6%));
    border: 1px solid color-mix(in srgb, var(--line) 84%, transparent);
    border-radius: 1.15rem;
    box-shadow: 0 14px 32px rgba(15, 23, 42, .045);
    min-width: 0;
    transition: border-color .18s ease, box-shadow .18s ease, transform .18s ease;
}

.saas-kpi-card:hover,
.saas-mini-card:hover,
.saas-panel:hover {
    border-color: color-mix(in srgb, var(--primary) 18%, var(--line) 82%);
    box-shadow: 0 18px 42px rgba(15, 23, 42, .07);
    transform: translateY(-1px);
}

.saas-kpi-card {
    display: grid;
    gap: .5rem;
    overflow: hidden;
    padding: 1.05rem 1.1rem;
    position: relative;
}

.saas-kpi-card::before {
    background: linear-gradient(90deg, var(--primary), color-mix(in srgb, var(--primary) 58%, #ffffff 42%));
    content: "";
    height: 3px;
    inset: 0 0 auto 0;
    opacity: .86;
    position: absolute;
    width: auto;
}

.saas-kpi-card.warning::before {
    background: linear-gradient(90deg, #f59e0b, #fbbf24);
}

.saas-kpi-card.success::before {
    background: linear-gradient(90deg, #0f8a74, #22c5a7);
}

.saas-kpi-icon {
    align-items: center;
    background: transparent;
    border: 1px solid color-mix(in srgb, var(--line) 80%, transparent);
    border-radius: .85rem;
    color: color-mix(in srgb, var(--primary) 74%, var(--muted) 26%);
    display: inline-flex;
    height: 38px;
    justify-content: center;
    width: 38px;
}

.saas-kpi-card span,
.saas-mini-card span {
    color: color-mix(in srgb, var(--muted) 86%, var(--text) 14%);
    font-size: .72rem;
    font-weight: 900;
    letter-spacing: .085em;
    text-transform: uppercase;
}

.saas-kpi-card strong {
    color: var(--text);
    font-size: clamp(1.46rem, 2vw, 2.02rem);
    font-weight: 850;
    letter-spacing: -.055em;
    line-height: 1.05;
}

.saas-kpi-card small {
    color: var(--muted);
    font-size: .82rem;
    line-height: 1.35;
    min-height: 1.15rem;
}

.saas-kpi-grid-compact .saas-kpi-card {
    gap: .4rem;
    min-height: 128px;
}

.saas-kpi-grid-compact .saas-kpi-card strong {
    font-size: clamp(1.22rem, 1.45vw, 1.65rem);
}

.saas-kpi-grid-compact .saas-kpi-card small {
    min-height: 0;
}

.saas-dashboard-kpi-grid {
    gap: .72rem;
    grid-template-columns: repeat(5, minmax(0, 1fr));
}

.saas-dashboard-kpi-grid .saas-kpi-card {
    gap: .35rem;
    min-height: 106px;
    padding: .88rem .95rem;
}

.saas-dashboard-kpi-grid .saas-kpi-card span {
    font-size: .68rem;
    letter-spacing: .075em;
}

.saas-dashboard-kpi-grid .saas-kpi-card strong {
    font-size: clamp(1.08rem, 1.35vw, 1.48rem);
    letter-spacing: -.045em;
}

.saas-dashboard-kpi-grid .saas-kpi-card small {
    font-size: .76rem;
}

.saas-sparkline,
.saas-bar-track {
    background: color-mix(in srgb, var(--line) 58%, transparent);
    border-radius: 999px;
    height: .36rem;
    overflow: hidden;
}

.saas-sparkline span,
.saas-bar-track span {
    background: linear-gradient(90deg, color-mix(in srgb, var(--primary) 88%, #0f172a 12%), color-mix(in srgb, var(--primary) 68%, #ffffff 32%));
    border-radius: inherit;
    display: block;
    height: 100%;
    transition: width .28s ease;
}

.saas-content-grid {
    display: grid;
    gap: 1.25rem;
    /* grid-template-columns: minmax(0, 2fr) minmax(320px, .95fr); */
}

.saas-insight-grid {
    align-items: start;
    display: grid;
    gap: 1.25rem;
    /* grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); */
}

.saas-side-stack {
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
    min-width: 0;
}

.saas-panel {
    border-color: color-mix(in srgb, var(--line) 84%, transparent);
    box-shadow: 0 14px 36px rgba(15, 23, 42, .045);
    overflow: hidden;
    transition: border-color .18s ease, box-shadow .18s ease, transform .18s ease;
}

.saas-backorder-panel .saas-panel-header {
    align-items: flex-start;
    margin-bottom: 1rem;
}

.backorder-summary-grid {
    display: grid;
    gap: 1rem;
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.backorder-summary-card {
    background: color-mix(in srgb, var(--surface-soft) 58%, var(--card) 42%);
    border: 1px solid color-mix(in srgb, var(--line) 82%, transparent);
    border-radius: 1rem;
    padding: .9rem 1rem;
}

.backorder-summary-card h3 {
    color: var(--text);
    font-size: .92rem;
    font-weight: 800;
    margin: 0 0 .7rem;
}

.backorder-summary-list {
    display: grid;
    gap: .45rem;
}

.backorder-summary-item {
    align-items: center;
    display: grid;
    gap: .75rem;
    grid-template-columns: minmax(0, 1fr) auto;
    min-height: 2.25rem;
}

.backorder-summary-item span {
    min-width: 0;
    overflow-wrap: anywhere;
}

.backorder-summary-item strong {
    align-items: center;
    background: color-mix(in srgb, var(--primary) 12%, var(--card) 88%);
    border-radius: 999px;
    color: var(--text);
    display: inline-flex;
    font-size: .85rem;
    justify-content: center;
    min-width: 2rem;
    padding: .2rem .55rem;
}

.saas-panel .card-body {
    padding: 1.35rem;
}

.saas-panel-header {
    align-items: flex-start;
    display: flex;
    gap: 1rem;
    justify-content: space-between;
    margin-bottom: 1.15rem;
}

.saas-panel-header h2 {
    letter-spacing: -.025em;
    line-height: 1.15;
}

.saas-panel-header p {
    line-height: 1.45;
}

.saas-panel-header .badge,
.saas-panel-header .badge-soft {
    border-radius: 999px;
    font-weight: 800;
    padding: .42rem .68rem;
}

.saas-bars,
.saas-legend,
.saas-alert-list,
.saas-stat-list,
.saas-profit-comparison {
    display: grid;
    gap: .85rem;
}

.saas-bar-row {
    display: grid;
    gap: .45rem;
}

.saas-bar-row > div:first-child,
.saas-profit-footer,
.saas-stat-list > div {
    align-items: center;
    display: flex;
    gap: 1rem;
    justify-content: space-between;
}

.saas-bar-row span,
.saas-profit-comparison span,
.saas-stat-list span {
    color: var(--muted);
    font-size: .86rem;
    font-weight: 800;
}

.saas-bar-row strong,
.saas-profit-comparison strong,
.saas-stat-list strong {
    color: var(--text);
    font-weight: 850;
    letter-spacing: -.025em;
}

.saas-chart-panel .card-body {
    padding-bottom: 1.1rem;
}

.saas-visual-chart {
    align-items: end;
    background:
        linear-gradient(to top, color-mix(in srgb, var(--line) 32%, transparent) 1px, transparent 1px);
    background-size: 100% 25%;
    display: grid;
    gap: 1rem;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    min-height: 360px;
    padding: 1.35rem .6rem .35rem;
}

.saas-chart-column {
    align-items: center;
    display: grid;
    gap: .65rem;
    grid-template-rows: auto 1fr auto;
    min-width: 0;
}

.saas-chart-column strong {
    color: var(--text);
    font-size: clamp(.92rem, 1.2vw, 1.08rem);
    line-height: 1.15;
    text-align: center;
    white-space: nowrap;
}

.saas-chart-column small {
    color: var(--muted);
    font-size: .78rem;
    font-weight: 900;
    letter-spacing: .05em;
    text-transform: uppercase;
}

.saas-chart-track {
    align-items: end;
    background:
        linear-gradient(180deg, color-mix(in srgb, var(--surface-soft) 78%, var(--card) 22%), color-mix(in srgb, var(--card) 78%, var(--surface-soft) 22%));
    border: 1px solid color-mix(in srgb, var(--line) 74%, transparent);
    border-radius: 999px 999px .55rem .55rem;
    box-shadow: inset 0 1px 3px rgba(15, 23, 42, .045);
    display: flex;
    height: 260px;
    justify-content: center;
    overflow: hidden;
    width: min(68px, 72%);
}

.saas-chart-track span {
    border-radius: inherit;
    display: block;
    min-height: 8px;
    transition: height .32s ease, width .32s ease;
    width: 100%;
}

.saas-closing-layout {
    display: grid;
    gap: 1.25rem;
    grid-template-columns: minmax(0, 1.7fr) minmax(260px, .85fr);
}

.saas-bridge-chart {
    background:
        linear-gradient(to right, color-mix(in srgb, var(--line) 30%, transparent) 1px, transparent 1px);
    background-size: 25% 100%;
    display: grid;
    gap: .9rem;
    min-height: 355px;
    padding: .35rem .1rem;
}

.saas-bridge-row {
    align-items: center;
    display: grid;
    gap: .75rem;
    grid-template-columns: minmax(104px, .55fr) minmax(0, 1.7fr) minmax(112px, auto);
    min-width: 0;
}

.saas-bridge-row > span {
    color: var(--muted);
    font-size: .78rem;
    font-weight: 900;
    letter-spacing: .05em;
    line-height: 1.2;
    text-transform: uppercase;
}

.saas-bridge-row > strong {
    color: var(--text);
    font-size: clamp(.95rem, 1.2vw, 1.08rem);
    line-height: 1.1;
    text-align: right;
    white-space: nowrap;
}

.saas-bridge-track {
    align-items: center;
    background: color-mix(in srgb, var(--surface-soft) 68%, var(--card) 32%);
    border: 1px solid color-mix(in srgb, var(--line) 76%, transparent);
    border-radius: 999px;
    box-shadow: inset 0 1px 3px rgba(15, 23, 42, .04);
    display: flex;
    height: 34px;
    overflow: hidden;
}

.saas-bridge-track i {
    border-radius: inherit;
    display: block;
    height: 100%;
    transition: width .32s ease;
}

.saas-bridge-row.is-negative .saas-bridge-track {
    justify-content: flex-end;
}

.saas-closing-summary {
    background:
        radial-gradient(circle at top left, color-mix(in srgb, var(--primary) 7%, transparent), transparent 38%),
        color-mix(in srgb, var(--surface-soft) 48%, var(--card) 52%);
    border: 1px solid color-mix(in srgb, var(--line) 80%, transparent);
    border-radius: 1rem;
    display: grid;
    gap: 1rem;
    padding: 1rem;
}

.saas-closing-summary > div:not(.saas-profit-footer) {
    display: grid;
    gap: .45rem;
}

.saas-closing-summary span {
    color: var(--muted);
    font-weight: 800;
}

.saas-closing-summary strong {
    color: var(--text);
}

.tone-primary {
    background: linear-gradient(180deg, color-mix(in srgb, var(--primary) 94%, #ffffff 6%), var(--primary)) !important;
}

.tone-success {
    background: linear-gradient(180deg, #22c5a7, #087f6f) !important;
}

.tone-warning {
    background: linear-gradient(180deg, #fbbf24, #b7791f) !important;
}

.tone-danger {
    background: linear-gradient(180deg, #fb7185, #b4233c) !important;
}

.tone-muted {
    background: linear-gradient(180deg, color-mix(in srgb, var(--primary) 34%, #cbd5e1 66%), color-mix(in srgb, var(--primary) 35%, #94a3b8 65%)) !important;
}

.saas-donut-wrap {
    align-items: center;
    display: grid;
    gap: 1rem;
    grid-template-columns: 140px minmax(180px, 1fr);
}

.saas-donut {
    align-items: center;
    aspect-ratio: 1;
    background: conic-gradient(color-mix(in srgb, var(--primary) 90%, #0f172a 10%) 0 var(--slice-a), #b7791f var(--slice-a) var(--slice-b), color-mix(in srgb, var(--primary) 18%, var(--line) 82%) var(--slice-b) 100%);
    border-radius: 999px;
    box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--line) 34%, transparent), 0 16px 34px rgba(15, 23, 42, .06);
    display: flex;
    justify-content: center;
    padding: 1rem;
}

.saas-donut span {
    align-items: center;
    background: var(--card);
    box-shadow: 0 10px 26px rgba(15, 23, 42, .07);
    border-radius: 999px;
    color: var(--muted);
    display: flex;
    flex-direction: column;
    font-size: .72rem;
    font-weight: 900;
    height: 86px;
    justify-content: center;
    line-height: 1.2;
    text-align: center;
    text-transform: uppercase;
    width: 86px;
}

.saas-donut strong {
    color: var(--text);
    font-size: .9rem;
    text-transform: none;
}

.saas-legend span {
    align-items: center;
    color: var(--muted);
    display: grid;
    gap: .4rem;
    grid-template-columns: auto minmax(0, 1fr) auto;
    min-width: 0;
}

.saas-legend strong {
    color: var(--text);
    white-space: nowrap;
}

.dot {
    border-radius: 999px;
    display: inline-flex;
    height: .7rem;
    width: .7rem;
}

.dot.primary {
    background: var(--primary);
}

.dot.warning {
    background: #b7791f;
}

.dot.soft {
    background: color-mix(in srgb, var(--primary) 24%, transparent);
}

.saas-alert-item {
    align-items: center;
    background: color-mix(in srgb, var(--surface-soft) 48%, var(--card) 52%);
    border: 1px solid color-mix(in srgb, var(--line) 82%, transparent);
    border-left-width: 3px;
    border-radius: .95rem;
    color: var(--text);
    display: grid;
    gap: .75rem;
    grid-template-columns: auto minmax(0, 1fr);
    padding: .76rem .82rem;
    text-decoration: none;
    transition: background .18s ease, border-color .18s ease, box-shadow .18s ease, transform .18s ease;
}

.saas-alert-item:hover,
.saas-alert-item:focus-visible {
    background: color-mix(in srgb, var(--surface-soft) 34%, var(--card) 66%);
    border-color: color-mix(in srgb, var(--primary) 18%, var(--line) 82%);
    box-shadow: 0 12px 26px rgba(15, 23, 42, .055);
    color: var(--text);
    transform: translateY(-1px);
}

.saas-alert-item strong,
.saas-alert-item small {
    display: block;
}

.saas-alert-item small {
    color: var(--muted);
    font-size: .82rem;
    line-height: 1.35;
}

.saas-alert-item.danger {
    border-left-color: #b4233c;
}

.saas-alert-item.warning {
    border-left-color: #b7791f;
}

.saas-alert-item.info {
    border-left-color: var(--primary);
}

.saas-secondary-grid {
    grid-template-columns: repeat(6, minmax(0, 1fr));
}

.closing-secondary-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

.saas-mini-card {
    display: grid;
    gap: .45rem;
    padding: .95rem 1rem;
}

.saas-mini-card i {
    color: color-mix(in srgb, var(--primary) 72%, var(--muted) 28%);
    font-size: 1.05rem;
}

.saas-mini-card strong {
    color: var(--text);
    font-size: 1.15rem;
}

.saas-flow-grid {
    display: grid;
    gap: .75rem;
    grid-template-columns: repeat(4, minmax(0, 1fr));
}

.saas-flow-grid > div,
.saas-profit-comparison {
    background: color-mix(in srgb, var(--surface-soft) 46%, var(--card) 54%);
    border: 1px solid var(--line);
    border-radius: .95rem;
    padding: .95rem;
}

.saas-flow-grid > div {
    display: grid;
    gap: .35rem;
}

.saas-flow-grid span {
    color: var(--muted);
    font-weight: 900;
    letter-spacing: .06em;
}

.saas-flow-grid small {
    color: var(--muted);
}

.saas-profit-comparison > div:not(.saas-profit-footer) {
    display: grid;
    gap: .45rem;
}

.saas-profit-footer,
.saas-stat-list > div {
    border-top: 1px solid var(--line);
    padding-top: .75rem;
}

.saas-stat-list > div:first-child {
    border-top: 0;
    padding-top: 0;
}

html[data-theme='dark'] .saas-kpi-card,
html[data-theme='dark'] .saas-mini-card,
html[data-theme='dark'] .saas-hero {
    box-shadow: none;
}

html[data-theme='dark'] .saas-kpi-card,
html[data-theme='dark'] .saas-mini-card,
html[data-theme='dark'] .saas-hero,
html[data-theme='dark'] .saas-alert-item,
html[data-theme='dark'] .saas-flow-grid > div,
html[data-theme='dark'] .saas-profit-comparison,
html[data-theme='dark'] .saas-closing-summary {
    background: #050505;
}

.receipt-preview-frame {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: min(68vh, 720px);
    overflow: hidden;
    border: 1px solid var(--line);
    border-radius: 1rem;
    background: color-mix(in srgb, var(--surface-soft) 70%, var(--card) 30%);
}

.receipt-preview-image {
    display: block;
    max-width: 100%;
    max-height: min(68vh, 720px);
    object-fit: contain;
}

.receipt-preview-pdf {
    width: 100%;
    min-height: min(68vh, 720px);
    border: 0;
    background: #fff;
}

.receipt-preview-empty {
    padding: 2rem;
}

html[data-theme='dark'] .receipt-preview-frame {
    background: #050505;
    border-color: var(--line);
}

.metric span {
    color: var(--muted);
    font-size: .86rem;
    font-weight: 700;
}

.metric strong {
    display: block;
    margin-top: .15rem;
    font-size: 1.45rem;
    font-family: 'Plus Jakarta Sans', 'Manrope', sans-serif;
    letter-spacing: -.04em;
}

.table-actions {
    display: inline-flex;
}

.table-actions-toggle {
    width: 2.35rem;
    min-height: 2.35rem;
    align-items: center;
    justify-content: center;
    border-radius: .8rem;
}

.table-actions-menu {
    min-width: 13.5rem;
    max-width: calc(100vw - 1.5rem);
    padding: .45rem;
    border-radius: .9rem;
    border-color: var(--line);
    background: var(--card);
    color: var(--text);
    box-shadow: 0 18px 48px rgba(15, 23, 42, .16);
    z-index: 2145;
}

.table-actions-menu .dropdown-item {
    display: flex;
    align-items: center;
    gap: .55rem;
    min-height: 2.45rem;
    border-radius: .65rem;
    font-weight: 700;
}

.table-actions-menu .dropdown-item .bi {
    flex: 0 0 1.1rem;
    width: 1.1rem;
    text-align: center;
}

.table-actions-menu .dropdown-divider {
    margin: .35rem 0;
}

.table-actions-menu form {
    margin: 0;
}

.table-actions-menu.is-floating {
    position: fixed;
    display: block;
    margin: 0;
    overflow-y: auto;
    transform: none !important;
}

.table-actions-menu.is-positioning {
    visibility: hidden;
    pointer-events: none;
}

html[data-theme='dark'] .table-actions-menu {
    background: #080808;
    border-color: var(--line);
    box-shadow: 0 18px 48px rgba(0, 0, 0, .34);
}

html[data-theme='dark'] .table-actions-menu .dropdown-item {
    color: var(--text);
}

html[data-theme='dark'] .table-actions-menu .dropdown-item.text-danger {
    color: var(--bs-danger) !important;
}

html[data-theme='dark'] .table-actions-menu .dropdown-item:hover,
html[data-theme='dark'] .table-actions-menu .dropdown-item:focus {
    background: rgba(255, 255, 255, .08);
}

.table {
    color: var(--text);
}

.app-table-wrap {
    position: relative;
}

.global-table-scrollbar {
    position: fixed;
    left: calc(var(--sidebar-width) + 1.1rem);
    right: 1.1rem;
    bottom: 0;
    z-index: 1025;
    display: none;
    overflow: hidden;
    height: 15px;
    padding: 0;
    border: 0;
    border-radius: 0;
    background: #e5e7eb;
    box-shadow: none;
    outline: 0;
    cursor: pointer;
    touch-action: none;
    user-select: none;
}

.global-table-scrollbar.is-visible {
    display: block;
}

.global-table-scrollbar-inner {
    position: absolute;
    inset: 0 auto 0 0;
    width: 80px;
    min-width: 42px;
    height: 100%;
    border: 0;
    border-radius: 0;
    background: #9ca3af;
    transform: translate3d(0, 0, 0);
    will-change: transform, width;
}

.global-table-scrollbar:hover .global-table-scrollbar-inner,
.global-table-scrollbar.is-dragging .global-table-scrollbar-inner {
    background: #6b7280;
}

.table-responsive {
    scrollbar-width: none;
    -ms-overflow-style: none;
}

.table-responsive::-webkit-scrollbar {
    width: 0 !important;
    height: 0 !important;
    display: none;
}

.table-responsive::-webkit-scrollbar-thumb,
.table-responsive::-webkit-scrollbar-track {
    display: none;
}

.table-pagination {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .75rem;
    margin-top: .9rem;
    padding: .75rem;
    border: 1px solid var(--line);
    border-radius: 1rem;
    background: color-mix(in srgb, var(--card) 92%, var(--surface-soft) 8%);
}

.table-pagination.is-hidden {
    display: none;
}

.table-pagination-status {
    color: var(--muted);
    font-size: .86rem;
    font-weight: 800;
}

.table-pagination-actions {
    display: inline-flex;
    align-items: center;
    gap: .45rem;
}

.table-pagination .btn {
    min-height: 2.35rem;
    border-radius: .8rem;
    font-weight: 800;
}

html[data-theme='dark'] .global-table-scrollbar {
    background: #2f3338;
}

html[data-theme='dark'] .table-pagination {
    background: #080808;
    border-color: var(--line);
}

html[data-theme='dark']::-webkit-scrollbar-thumb,
html[data-theme='dark'] body::-webkit-scrollbar-thumb {
    border: 0;
    border-radius: 0;
    background: #8b949e;
    background-clip: border-box;
}

html[data-theme='dark'] .global-table-scrollbar-inner {
    background: #8b949e;
}

html[data-theme='dark'] .global-table-scrollbar:hover .global-table-scrollbar-inner,
html[data-theme='dark'] .global-table-scrollbar.is-dragging .global-table-scrollbar-inner {
    background: #b2bac3;
}

html[data-theme='dark'] .table {
    --bs-table-color: #ffffff;
    --bs-table-bg: #050505;
    --bs-table-border-color: var(--line);
    --bs-table-striped-color: #ffffff;
    --bs-table-striped-bg: #0b0b0b;
    --bs-table-hover-color: #ffffff;
    --bs-table-hover-bg: #111111;
    color: #ffffff;
}

.table thead th {
    font-size: .74rem;
    color: var(--muted);
    text-transform: uppercase;
    letter-spacing: .06em;
    border-bottom-color: var(--line);
}

html[data-theme='dark'] .table thead th {
    background: #080808;
    color: #ffffff;
    border-bottom-color: var(--line);
}

.table td {
    border-color: color-mix(in srgb, var(--line) 68%, transparent 32%);
}

html[data-theme='dark'] .table td,
html[data-theme='dark'] .table th,
html[data-theme='dark'] .table> :not(caption)>*>* {
    background-color: transparent;
    border-color: var(--line);
    color: #ffffff;
}

.form-control,
.form-select,
.input-group-text {
    border-color: var(--line);
    background-color: color-mix(in srgb, var(--card) 96%, var(--surface-soft) 4%);
    color: var(--text);
}

html[data-theme='dark'] .form-control,
html[data-theme='dark'] .form-select,
html[data-theme='dark'] .input-group-text {
    background-color: #050505;
    border-color: #2d2d2d;
    color: #ffffff;
}

html[data-theme='dark'] .form-control::placeholder {
    color: #aeb8bd;
}

html[data-theme='dark'] .form-control:disabled,
html[data-theme='dark'] .form-select:disabled,
html[data-theme='dark'] .form-control[readonly] {
    background-color: #101010;
    color: #d6dee2;
}

html[data-theme='dark'] .form-check-input {
    background-color: #050505;
    border-color: #4b5563;
}

html[data-theme='dark'] .form-check-input:checked {
    background-color: var(--primary);
    border-color: var(--primary);
}

.form-control:focus,
.form-select:focus {
    border-color: var(--primary);
    box-shadow: 0 0 0 .2rem color-mix(in srgb, var(--primary) 20%, transparent 80%);
}

.btn-primary {
    --bs-btn-bg: var(--primary);
    --bs-btn-border-color: var(--primary);
    --bs-btn-hover-bg: var(--primary-hover);
    --bs-btn-hover-border-color: var(--primary-hover);
}

.btn,
.nav-link,
.dropdown-item,
.mobile-bottom-link {
    touch-action: manipulation;
    transition:
        background-color .18s ease,
        border-color .18s ease,
        box-shadow .18s ease,
        color .18s ease,
        transform .18s ease;
}

.btn:active,
.nav-link:active,
.dropdown-item:active,
.mobile-bottom-link:active {
    transform: scale(.98);
}

.saas-page .btn:hover,
.saas-page .btn:focus-visible {
    box-shadow: 0 10px 24px rgba(15, 23, 42, .08);
    transform: translateY(-1px);
}

.saas-page .btn:active {
    box-shadow: 0 6px 16px rgba(15, 23, 42, .06);
    transform: translateY(0) scale(.99);
}

.install-steps {
    display: grid;
    gap: .8rem;
}

.install-step {
    display: flex;
    align-items: flex-start;
    gap: .75rem;
    padding: .85rem;
    border: 1px solid var(--line);
    border-radius: 1rem;
    background: color-mix(in srgb, var(--card) 92%, var(--surface-soft) 8%);
}

.install-step span {
    width: 1.8rem;
    height: 1.8rem;
    border-radius: 999px;
    background: var(--primary);
    color: #fff;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-weight: 800;
    flex: 0 0 auto;
}

html[data-theme='dark'] .install-step {
    background: #080808;
    border-color: var(--line);
    color: #ffffff;
}

.btn-light,
.text-bg-light {
    background: color-mix(in srgb, var(--card) 86%, var(--surface-soft) 14%) !important;
    border-color: var(--line) !important;
    color: var(--text) !important;
}

html[data-theme='dark'] .btn-light,
html[data-theme='dark'] .text-bg-light,
html[data-theme='dark'] .alert-light {
    background: #080808 !important;
    border-color: var(--line) !important;
    color: #ffffff !important;
}

html[data-theme='dark'] .bg-white,
html[data-theme='dark'] .bg-light,
html[data-theme='dark'] .bg-body,
html[data-theme='dark'] .table-light,
html[data-theme='dark'] .modal-header,
html[data-theme='dark'] .modal-footer {
    background-color: #050505 !important;
    border-color: var(--line) !important;
    color: #ffffff !important;
}

html[data-theme='dark'] .dropdown-menu,
html[data-theme='dark'] .list-group-item,
html[data-theme='dark'] .offcanvas {
    background-color: #050505;
    border-color: var(--line);
    color: #ffffff;
}

html[data-theme='dark'] .dropdown-divider {
    border-top-color: var(--line);
}

html[data-theme='dark'] .btn-close {
    filter: invert(1) grayscale(100%);
    opacity: .9;
}

html[data-theme='dark'] .dropdown-item,
html[data-theme='dark'] .modal-title,
html[data-theme='dark'] .card-title,
html[data-theme='dark'] .form-label,
html[data-theme='dark'] .text-body,
html[data-theme='dark'] .text-dark,
html[data-theme='dark'] .text-secondary,
html[data-theme='dark'] .text-body-secondary {
    color: #ffffff !important;
}

html[data-theme='dark'] .text-muted,
html[data-theme='dark'] .form-text,
html[data-theme='dark'] small,
html[data-theme='dark'] .small {
    color: #d6dee2 !important;
}

html[data-theme='dark'] .border,
html[data-theme='dark'] .border-top,
html[data-theme='dark'] .border-end,
html[data-theme='dark'] .border-bottom,
html[data-theme='dark'] .border-start {
    border-color: var(--line) !important;
}

.notification-card {
    transition: background-color .18s ease, border-color .18s ease, box-shadow .18s ease;
    min-width: 0;
}

.notification-card .fw-bold,
.notification-card .small {
    min-width: 0;
    overflow-wrap: anywhere;
}

.notification-card:hover {
    box-shadow: 0 12px 28px rgba(15, 23, 42, .08);
}

.notification-card-warning {
    border-color: rgba(245, 158, 11, .35) !important;
    background: rgba(254, 249, 195, .45) !important;
}

.notification-card-danger {
    border-color: rgba(220, 38, 38, .35) !important;
    background: rgba(254, 226, 226, .55) !important;
}

html[data-theme='dark'] .notification-card,
html[data-theme='dark'] #pushNotificationBox {
    background: #050505 !important;
    border-color: var(--line) !important;
    color: #ffffff;
}

html[data-theme='dark'] .notification-card-warning {
    background: rgba(120, 53, 15, .35) !important;
    border-color: rgba(245, 158, 11, .38) !important;
}

html[data-theme='dark'] .notification-card-danger {
    background: rgba(127, 29, 29, .35) !important;
    border-color: rgba(248, 113, 113, .38) !important;
}

html[data-theme='dark'] .notification-card:hover {
    background: #0b0b0b !important;
    box-shadow: 0 16px 34px rgba(0, 0, 0, .42);
}

html[data-theme='dark'] .alert-info {
    background: rgba(34, 199, 220, .14);
    border-color: rgba(34, 199, 220, .34);
    color: #ffffff;
}

html[data-theme='dark'] .alert-warning {
    background: rgba(245, 158, 11, .14);
    border-color: rgba(245, 158, 11, .34);
    color: #ffffff;
}

html[data-theme='dark'] .alert-danger {
    background: rgba(220, 53, 69, .16);
    border-color: rgba(220, 53, 69, .38);
    color: #ffffff;
}

html[data-theme='dark'] .alert-success {
    background: rgba(25, 135, 84, .18);
    border-color: rgba(25, 135, 84, .42);
    color: #ffffff;
}

html[data-theme='dark'] select option {
    background: #050505;
    color: #ffffff;
}

html[data-theme='dark'] .auth-shell {
    background: #000000;
}

.badge-soft {
    background: color-mix(in srgb, var(--primary) 12%, transparent 88%);
    color: var(--primary);
}

.badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: fit-content;
    max-width: 100%;
    min-width: 3.15rem;
    min-height: 1.55rem;
    padding: .35rem .65rem;
    border-radius: 999px;
    font-size: .72rem;
    font-weight: 800;
    line-height: 1.1;
    text-align: center;
    white-space: normal;
    overflow-wrap: anywhere;
}

.table .badge {
    min-width: 3.45rem;
    padding-inline: .72rem;
}

.auth-shell {
    min-height: 100vh;
    display: grid;
    place-items: center;
    padding: 24px;
    background:
        radial-gradient(circle at top left, rgba(9, 83, 94, .16), transparent 36%),
        radial-gradient(circle at bottom right, rgba(31, 149, 165, .13), transparent 34%),
        var(--bg);
}

.auth-card {
    max-width: 460px;
    width: 100%;
    border-radius: 1.25rem;
    overflow: hidden;
}

.auth-brand-header {
    display: flex;
    align-items: center;
    gap: .85rem;
    margin-bottom: 1.35rem;
}

.auth-brand-title {
    font-weight: 800;
    font-family: 'Plus Jakarta Sans', 'Manrope', sans-serif;
}

.auth-brand-subtitle {
    color: var(--muted);
    font-size: .86rem;
}

.auth-login-title {
    font-weight: 800;
    letter-spacing: -.03em;
}

.super-admin-dashboard {
    display: grid;
    gap: 1.25rem;
    margin-bottom: 1.5rem;
}

.super-admin-hero {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    gap: 1rem;
    padding: 1.35rem 1.45rem;
    border: 1px solid color-mix(in srgb, var(--line) 84%, transparent);
    border-radius: 1.35rem;
    background:
        radial-gradient(circle at 8% 0%, rgba(15, 23, 42, .08), transparent 28%),
        color-mix(in srgb, var(--card) 94%, var(--surface-soft) 6%);
    box-shadow: 0 20px 46px rgba(15, 23, 42, .07);
}

.super-admin-eyebrow,
.super-admin-panel-head span {
    display: block;
    color: #64748b;
    font-size: .74rem;
    font-weight: 900;
    letter-spacing: .16em;
    text-transform: uppercase;
}

.super-admin-hero h1 {
    margin: .35rem 0 .25rem;
    color: #0f172a;
    font-size: clamp(1.75rem, 3vw, 2.35rem);
    font-weight: 900;
    letter-spacing: -.06em;
}

.super-admin-hero p {
    max-width: 680px;
    margin: 0;
    color: #64748b;
    font-size: 1rem;
}

.super-admin-actions {
    display: flex;
    flex-wrap: wrap;
    gap: .65rem;
    justify-content: flex-end;
}

.super-admin-kpi-grid {
    display: grid;
    grid-template-columns: repeat(6, minmax(0, 1fr));
    gap: .75rem;
}

.super-admin-kpi,
.super-admin-panel {
    border: 1px solid color-mix(in srgb, var(--line) 86%, transparent);
    background: rgba(255, 255, 255, .86);
    box-shadow: 0 18px 42px rgba(15, 23, 42, .055);
}

.super-admin-kpi {
    min-width: 0;
    min-height: 126px;
    padding: 1rem;
    border-radius: 1.05rem;
}

.super-admin-kpi span,
.super-admin-finance-grid span,
.super-admin-payment-list span {
    display: block;
    color: #64748b;
    font-size: .78rem;
    font-weight: 800;
    line-height: 1.25;
}

.super-admin-kpi strong {
    display: block;
    margin-top: .5rem;
    color: #0f172a;
    font-size: clamp(1.35rem, 2.2vw, 1.8rem);
    font-weight: 900;
    letter-spacing: -.06em;
}

.super-admin-kpi small {
    display: block;
    margin-top: .4rem;
    color: #64748b;
    font-weight: 650;
    line-height: 1.35;
}

.super-admin-kpi.is-primary {
    background: linear-gradient(135deg, #0f172a, #243244);
}

.super-admin-kpi.is-primary span,
.super-admin-kpi.is-primary small {
    color: rgba(255, 255, 255, .72);
}

.super-admin-kpi.is-primary strong {
    color: #fff;
}

.super-admin-board {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 1rem;
}

.super-admin-board-secondary {
    grid-template-columns: 1.15fr .95fr .9fr;
}

.super-admin-panel {
    min-width: 0;
    padding: 1.1rem;
    border-radius: 1.25rem;
}

.super-admin-panel-head {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: .85rem;
    margin-bottom: 1rem;
}

.super-admin-panel-head h2 {
    margin: .25rem 0 0;
    color: #0f172a;
    font-size: 1.08rem;
    font-weight: 900;
    letter-spacing: -.04em;
}

.super-admin-panel-head a,
.super-admin-panel-head small {
    color: #475569;
    font-size: .82rem;
    font-weight: 800;
    text-decoration: none;
}

.super-admin-chart-list,
.super-admin-alerts,
.super-admin-payment-list,
.super-admin-shortcuts {
    display: grid;
    gap: .65rem;
}

.super-admin-bar {
    display: grid;
    grid-template-columns: 108px minmax(0, 1fr) 34px;
    align-items: center;
    gap: .7rem;
}

.super-admin-bar span {
    overflow: hidden;
    color: #64748b;
    font-size: .82rem;
    font-weight: 800;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.super-admin-bar div {
    overflow: hidden;
    height: .52rem;
    border-radius: 999px;
    background: #e2e8f0;
}

.super-admin-bar i {
    display: block;
    height: 100%;
    min-width: 6px;
    border-radius: inherit;
    background: linear-gradient(90deg, #334155, #0f172a);
}

.super-admin-bar strong {
    color: #0f172a;
    text-align: right;
}

.super-admin-column-chart {
    display: flex;
    align-items: end;
    gap: .7rem;
    min-height: 190px;
    padding-top: .7rem;
}

.super-admin-column-chart div {
    display: grid;
    grid-template-rows: auto 1fr auto;
    align-items: end;
    flex: 1;
    min-width: 0;
    height: 172px;
    text-align: center;
}

.super-admin-column-chart strong {
    color: #0f172a;
    font-size: .9rem;
}

.super-admin-column-chart i {
    display: block;
    width: 100%;
    min-height: 8px;
    border-radius: 999px 999px .45rem .45rem;
    background: linear-gradient(180deg, #1e293b, #475569);
}

.super-admin-column-chart span {
    margin-top: .45rem;
    color: #64748b;
    font-size: .72rem;
    font-weight: 800;
}

.super-admin-alert {
    display: grid;
    grid-template-columns: 34px minmax(0, 1fr) auto;
    align-items: center;
    gap: .75rem;
    padding: .72rem .8rem;
    border: 1px solid rgba(15, 23, 42, .08);
    border-radius: .95rem;
    background: rgba(248, 250, 252, .82);
}

.super-admin-alert i {
    display: grid;
    place-items: center;
    width: 34px;
    height: 34px;
    border-radius: .8rem;
    background: #e2e8f0;
    color: #0f172a;
}

.super-admin-alert strong,
.super-admin-payment-list strong {
    display: block;
    overflow: hidden;
    color: #0f172a;
    font-size: .92rem;
    font-weight: 900;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.super-admin-alert span {
    display: block;
    color: #64748b;
    font-size: .78rem;
    font-weight: 650;
    line-height: 1.25;
}

.super-admin-alert b {
    color: #0f172a;
    font-size: 1.1rem;
}

.super-admin-alert.is-warning i { background: #fef3c7; color: #b45309; }
.super-admin-alert.is-danger i { background: #fee2e2; color: #b91c1c; }
.super-admin-alert.is-info i { background: #dbeafe; color: #1d4ed8; }

.super-admin-finance-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: .55rem;
    margin-bottom: .85rem;
}

.super-admin-finance-grid div {
    min-width: 0;
    padding: .75rem;
    border: 1px solid rgba(15, 23, 42, .08);
    border-radius: .9rem;
    background: rgba(248, 250, 252, .84);
}

.super-admin-finance-grid strong {
    display: block;
    margin-top: .2rem;
    color: #0f172a;
    font-size: 1.18rem;
    font-weight: 900;
}

.super-admin-payment-list {
    max-height: 190px;
    overflow: auto;
    padding-right: .15rem;
}

.super-admin-payment-list div {
    padding: .65rem .7rem;
    border: 1px solid rgba(15, 23, 42, .08);
    border-radius: .9rem;
    background: rgba(255, 255, 255, .72);
}

.super-admin-shortcuts {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.super-admin-shortcuts button,
.super-admin-shortcuts a {
    display: flex;
    align-items: center;
    gap: .6rem;
    min-width: 0;
    padding: .74rem .78rem;
    border: 1px solid rgba(15, 23, 42, .08);
    border-radius: .9rem;
    color: #0f172a;
    text-align: left;
    text-decoration: none;
    background: rgba(248, 250, 252, .86);
    transition: transform .16s ease, border-color .16s ease, background .16s ease;
}

.super-admin-shortcuts button:hover,
.super-admin-shortcuts a:hover {
    transform: translateY(-1px);
    border-color: rgba(15, 23, 42, .18);
    background: #fff;
}

.super-admin-shortcuts i {
    color: #475569;
}

.super-admin-shortcuts span {
    overflow: hidden;
    font-size: .86rem;
    font-weight: 850;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.admin-companies-table {
    --bs-table-bg: transparent;
}

.admin-companies-table thead th {
    color: #64748b;
    font-size: .72rem;
    font-weight: 900;
    letter-spacing: .08em;
    text-transform: uppercase;
    white-space: nowrap;
}

.admin-companies-table tbody tr {
    transition: background .16s ease;
}

.admin-companies-table tbody tr:hover {
    background: rgba(15, 23, 42, .025);
}

.admin-companies-table td {
    vertical-align: middle;
}

.admin-companies-table .form-select-sm {
    min-width: 136px;
    border-radius: .7rem;
    font-weight: 650;
}

.admin-feature-cell {
    display: grid;
    grid-template-columns: auto auto;
    align-items: center;
    justify-content: start;
    gap: .35rem .5rem;
    min-width: 132px;
}

.admin-feature-cell small {
    grid-column: 1 / -1;
    color: #64748b;
    font-size: .78rem;
    font-weight: 650;
}

.admin-switch-line {
    display: inline-flex;
    align-items: center;
    gap: .42rem;
    margin: 0;
    color: #0f172a;
    font-size: .84rem;
    font-weight: 750;
}

.admin-status-pill {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 1.55rem;
    padding: .28rem .58rem;
    border: 1px solid rgba(15, 23, 42, .08);
    border-radius: 999px;
    color: #475569;
    background: #f8fafc;
    font-size: .72rem;
    font-weight: 900;
    line-height: 1;
    white-space: nowrap;
}

.admin-status-pill.is-active,
.admin-status-pill.is-ok {
    border-color: rgba(5, 150, 105, .14);
    color: #047857;
    background: #d1fae5;
}

.admin-status-pill.is-warning {
    border-color: rgba(217, 119, 6, .18);
    color: #b45309;
    background: #fef3c7;
}

.admin-status-pill.is-muted {
    color: #64748b;
    background: #f1f5f9;
}

.admin-status-pill.is-plan {
    color: #0f172a;
    background: #e2e8f0;
}

.admin-subscription-summary {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: .7rem;
    margin-bottom: 1rem;
}

.admin-subscription-summary div,
.admin-subscription-card,
.admin-empty-state {
    border: 1px solid rgba(15, 23, 42, .08);
    background: rgba(255, 255, 255, .88);
    box-shadow: 0 14px 34px rgba(15, 23, 42, .045);
}

.admin-subscription-summary div {
    min-width: 0;
    padding: .82rem .9rem;
    border-radius: 1rem;
}

.admin-subscription-summary span,
.admin-subscription-eyebrow,
.admin-subscription-details span,
.admin-subscription-foot {
    display: block;
    color: #64748b;
    font-size: .76rem;
    font-weight: 850;
    line-height: 1.25;
}

.admin-subscription-summary strong {
    display: block;
    margin-top: .25rem;
    color: #0f172a;
    font-size: clamp(1rem, 1.4vw, 1.25rem);
    font-weight: 900;
    letter-spacing: -.04em;
}

.admin-subscription-list {
    display: grid;
    gap: .85rem;
}

.admin-subscription-card {
    overflow: hidden;
    padding: 1rem;
    border-radius: 1.15rem;
}

.admin-subscription-main {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 1rem;
    margin-bottom: .9rem;
}

.admin-subscription-main h3 {
    margin: .15rem 0 .18rem;
    color: #0f172a;
    font-size: 1.05rem;
    font-weight: 900;
    letter-spacing: -.03em;
}

.admin-subscription-main p {
    overflow: hidden;
    max-width: 460px;
    margin: 0;
    color: #64748b;
    font-size: .84rem;
    font-weight: 650;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.admin-subscription-badges {
    display: flex;
    flex-wrap: wrap;
    gap: .4rem;
    justify-content: flex-end;
}

.admin-subscription-details {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: .65rem;
}

.admin-subscription-details div {
    min-width: 0;
    padding: .65rem .7rem;
    border-radius: .85rem;
    background: #f8fafc;
}

.admin-subscription-details strong {
    display: block;
    overflow: hidden;
    margin-top: .2rem;
    color: #0f172a;
    font-size: .83rem;
    font-weight: 800;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.admin-subscription-foot {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: .5rem;
    margin-top: .8rem;
    padding-top: .75rem;
    border-top: 1px solid rgba(15, 23, 42, .08);
}

.admin-empty-state {
    display: grid;
    place-items: center;
    gap: .35rem;
    padding: 2rem 1rem;
    border-radius: 1.15rem;
    color: #64748b;
    text-align: center;
}

.admin-empty-state i {
    color: #0f172a;
    font-size: 1.8rem;
}

.admin-empty-state strong {
    color: #0f172a;
}

/* Super Admin — visual language intentionally isolated from the tenant dashboard. */
.super-admin-dashboard {
    --sa-ink: #101423;
    --sa-purple: #725cff;
    --sa-lime: #c8ff66;
    --sa-cyan: #57e6ff;
    gap: 1rem;
}

.super-admin-hero {
    position: relative;
    isolation: isolate;
    min-height: 270px;
    overflow: hidden;
    align-items: center;
    padding: clamp(1.5rem, 3vw, 2.6rem);
    border: 0;
    border-radius: 1.8rem;
    color: #fff;
    background:
        linear-gradient(rgba(255,255,255,.045) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255,255,255,.045) 1px, transparent 1px),
        radial-gradient(circle at 79% 20%, rgba(114,92,255,.62), transparent 29%),
        radial-gradient(circle at 94% 95%, rgba(87,230,255,.2), transparent 25%),
        #101423;
    background-size: 38px 38px, 38px 38px, auto, auto, auto;
    box-shadow: 0 30px 70px rgba(21, 19, 48, .22);
}

.super-admin-hero::after {
    position: absolute;
    z-index: -1;
    right: clamp(8rem, 22vw, 22rem);
    bottom: -6.5rem;
    width: 13rem;
    height: 13rem;
    border: 1px solid rgba(255,255,255,.18);
    border-radius: 50%;
    box-shadow: 0 0 0 2.8rem rgba(255,255,255,.025), 0 0 0 5.6rem rgba(255,255,255,.018);
    content: "";
}

.super-admin-hero-copy { max-width: 700px; }
.super-admin-live {
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    margin-bottom: 2.2rem;
    color: rgba(255,255,255,.72);
    font-size: .72rem;
    font-weight: 800;
    letter-spacing: .08em;
    text-transform: uppercase;
}
.super-admin-live i {
    width: .5rem;
    height: .5rem;
    border-radius: 50%;
    background: var(--sa-lime);
    box-shadow: 0 0 0 .3rem rgba(200,255,102,.12);
}
.super-admin-eyebrow { color: rgba(255,255,255,.55); }
.super-admin-hero h1 {
    margin: .4rem 0 .65rem;
    color: #fff;
    font-size: clamp(2.3rem, 5vw, 4.4rem);
    line-height: .98;
    letter-spacing: -.075em;
}
.super-admin-hero h1 em { color: var(--sa-lime); font-style: normal; }
.super-admin-hero p { color: rgba(255,255,255,.67); font-size: clamp(.95rem, 1.5vw, 1.12rem); }
.super-admin-actions { position: relative; z-index: 2; align-self: flex-end; }
.super-admin-action {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .6rem;
    min-height: 46px;
    padding: .7rem 1rem;
    border: 1px solid rgba(255,255,255,.15);
    border-radius: 999px;
    color: #fff;
    font-size: .83rem;
    font-weight: 800;
    background: rgba(255,255,255,.08);
    backdrop-filter: blur(12px);
    transition: transform .18s ease, background .18s ease;
}
.super-admin-action:hover { transform: translateY(-2px); background: rgba(255,255,255,.14); }
.super-admin-action.is-accent { border-color: var(--sa-lime); color: var(--sa-ink); background: var(--sa-lime); }

.super-admin-kpi-grid { grid-template-columns: repeat(12, minmax(0, 1fr)); gap: .75rem; }
.super-admin-kpi {
    position: relative;
    grid-column: span 2;
    min-height: 150px;
    overflow: hidden;
    padding: 1.15rem;
    border-radius: 1.25rem;
    transition: transform .2s ease, box-shadow .2s ease;
}
.super-admin-kpi:hover { transform: translateY(-3px); box-shadow: 0 22px 46px rgba(15,23,42,.1); }
.super-admin-kpi.is-primary { grid-column: span 3; background: var(--sa-purple); border-color: transparent; }
.super-admin-kpi.is-revenue { grid-column: span 3; background: #e9ffbe; border-color: transparent; }
.super-admin-kpi.is-revenue::after {
    position: absolute;
    right: -1.6rem;
    bottom: -2.5rem;
    width: 8rem;
    height: 8rem;
    border: 1.5rem solid rgba(16,20,35,.055);
    border-radius: 50%;
    content: "";
}
.super-admin-kpi-top { display: flex; align-items: center; justify-content: space-between; gap: .5rem; }
.super-admin-kpi-top > i {
    display: grid;
    place-items: center;
    width: 2rem;
    height: 2rem;
    border: 1px solid rgba(15,23,42,.08);
    border-radius: 50%;
    color: #3f4658;
    background: rgba(255,255,255,.5);
}
.super-admin-kpi strong { margin-top: 1rem; font-size: clamp(1.55rem, 2.5vw, 2.15rem); }
.super-admin-kpi small b { color: inherit; font-weight: 900; }
.super-admin-kpi small > i { display: inline-block; width: 3px; height: 3px; margin: 0 .3rem; border-radius: 50%; background: currentColor; vertical-align: middle; }
.super-admin-kpi.is-primary .super-admin-kpi-top > i { color: #fff; border-color: rgba(255,255,255,.16); background: rgba(255,255,255,.1); }

.super-admin-board { grid-template-columns: 1.15fr .85fr 1fr; }
.super-admin-panel { position: relative; overflow: hidden; padding: 1.25rem; border-radius: 1.35rem; box-shadow: 0 12px 38px rgba(15,23,42,.045); }
.super-admin-panel::before { position: absolute; top: 0; left: 1.25rem; width: 2.6rem; height: 3px; border-radius: 0 0 4px 4px; background: var(--sa-purple); content: ""; }
.super-admin-panel.is-status::before { background: var(--sa-cyan); }
.super-admin-panel.is-growth::before { background: var(--sa-lime); }
.super-admin-panel-head { margin-bottom: 1.3rem; }
.super-admin-panel-head h2 { font-size: 1.16rem; }
.super-admin-bar { grid-template-columns: 104px minmax(0,1fr) 28px; padding: .32rem 0; }
.super-admin-bar div { height: .42rem; background: #edf0f5; }
.super-admin-bar i { background: linear-gradient(90deg, var(--sa-purple), #a99cff); }
.super-admin-panel.is-status .super-admin-bar i { background: linear-gradient(90deg, #18bcd8, var(--sa-cyan)); }
.super-admin-column-chart { padding: .5rem .25rem 0; background: linear-gradient(to bottom, transparent 24%, rgba(15,23,42,.045) 25%, transparent 26%, transparent 49%, rgba(15,23,42,.045) 50%, transparent 51%, transparent 74%, rgba(15,23,42,.045) 75%, transparent 76%); }
.super-admin-column-chart i { width: 72%; margin-inline: auto; background: linear-gradient(180deg, var(--sa-lime), #9be72e); }
.super-admin-board-secondary { grid-template-columns: 1.1fr 1fr .8fr; }
.super-admin-panel.is-alerts { background: #fff8ed; }
.super-admin-alert { border: 0; border-bottom: 1px solid rgba(15,23,42,.07); border-radius: 0; background: transparent; }
.super-admin-alert:last-child { border-bottom: 0; }
.super-admin-finance-grid div { border: 0; background: #f3f1ff; }
.super-admin-shortcuts button, .super-admin-shortcuts a { min-height: 66px; border: 0; background: #f5f6f9; }
.super-admin-shortcuts i { display: grid; place-items: center; width: 2rem; height: 2rem; border-radius: .65rem; color: var(--sa-purple); background: #e9e5ff; }

.admin-companies-card { overflow: hidden; border: 0; border-radius: 1.5rem; box-shadow: 0 18px 50px rgba(15,23,42,.07); }
.admin-companies-card .card-body { padding: clamp(1rem, 2vw, 1.5rem); }
.admin-companies-heading { display: flex; align-items: flex-end; justify-content: space-between; gap: 1rem; margin-bottom: 1.25rem; }
.admin-companies-heading span { color: var(--sa-purple); font-size: .7rem; font-weight: 900; letter-spacing: .16em; text-transform: uppercase; }
.admin-companies-heading h2 { margin: .2rem 0 0; color: #101423; font-size: 1.35rem; font-weight: 900; letter-spacing: -.045em; }
.admin-companies-heading b { padding: .45rem .7rem; border-radius: 999px; color: #5e4ad5; font-size: .73rem; background: #efedff; }
.admin-companies-table { border-collapse: separate; border-spacing: 0 .45rem; }
.admin-companies-table thead th { border: 0; letter-spacing: .08em; text-transform: uppercase; }
.admin-companies-table tbody tr { box-shadow: 0 0 0 1px rgba(15,23,42,.065); }
.admin-companies-table tbody td { border: 0; background: #fafbfc; }
.admin-companies-table tbody td:first-child { border-radius: .85rem 0 0 .85rem; }
.admin-companies-table tbody td:last-child { border-radius: 0 .85rem .85rem 0; }

html[data-theme='dark'] .super-admin-hero { background-color: #101423; }
html[data-theme='dark'] .super-admin-kpi.is-primary { background: var(--sa-purple); }
html[data-theme='dark'] .super-admin-kpi.is-revenue { background: #b8e85f; }
html[data-theme='dark'] .super-admin-kpi.is-revenue strong,
html[data-theme='dark'] .super-admin-kpi.is-revenue span,
html[data-theme='dark'] .super-admin-kpi.is-revenue small { color: #101423; }
html[data-theme='dark'] .super-admin-panel.is-alerts { background: #18130d; }
html[data-theme='dark'] .admin-companies-card { background: #0f0f0f; }
html[data-theme='dark'] .admin-companies-heading h2 { color: #fff; }
html[data-theme='dark'] .admin-companies-table tbody td { background: #141414; }

@media (max-width: 1280px) {
    .super-admin-kpi { grid-column: span 4; }
    .super-admin-kpi.is-primary, .super-admin-kpi.is-revenue { grid-column: span 6; }
}
@media (max-width: 860px) {
    .super-admin-hero { min-height: 0; }
    .super-admin-actions { align-self: auto; }
    .super-admin-kpi-grid { grid-template-columns: repeat(2, minmax(0,1fr)); }
    .super-admin-kpi, .super-admin-kpi.is-primary, .super-admin-kpi.is-revenue { grid-column: span 1; }
}
@media (max-width: 560px) {
    .super-admin-hero { padding: 1.25rem; border-radius: 1.35rem; }
    .super-admin-live { margin-bottom: 1.5rem; }
    .super-admin-hero h1 { font-size: 2.45rem; }
    .super-admin-kpi-grid { grid-template-columns: 1fr; }
    .super-admin-kpi, .super-admin-kpi.is-primary, .super-admin-kpi.is-revenue { grid-column: 1; min-height: 132px; }
    .admin-companies-heading { align-items: flex-start; flex-direction: column; }
}

html[data-theme='dark'] .super-admin-kpi,
html[data-theme='dark'] .super-admin-panel {
    background: #0f0f0f;
    border-color: var(--line);
}

html[data-theme='dark'] .super-admin-hero h1,
html[data-theme='dark'] .super-admin-kpi strong,
html[data-theme='dark'] .super-admin-panel-head h2,
html[data-theme='dark'] .super-admin-bar strong,
html[data-theme='dark'] .super-admin-column-chart strong,
html[data-theme='dark'] .super-admin-alert strong,
html[data-theme='dark'] .super-admin-alert b,
html[data-theme='dark'] .super-admin-finance-grid strong,
html[data-theme='dark'] .super-admin-payment-list strong,
html[data-theme='dark'] .super-admin-shortcuts button,
html[data-theme='dark'] .super-admin-shortcuts a {
    color: #fff;
}

html[data-theme='dark'] .super-admin-alert,
html[data-theme='dark'] .super-admin-finance-grid div,
html[data-theme='dark'] .super-admin-payment-list div,
html[data-theme='dark'] .super-admin-shortcuts button,
html[data-theme='dark'] .super-admin-shortcuts a {
    background: #141414;
    border-color: var(--line);
}

html[data-theme='dark'] .admin-companies-table tbody tr:hover,
html[data-theme='dark'] .admin-subscription-summary div,
html[data-theme='dark'] .admin-subscription-card,
html[data-theme='dark'] .admin-empty-state,
html[data-theme='dark'] .admin-subscription-details div {
    background: #141414;
    border-color: var(--line);
}

html[data-theme='dark'] .admin-switch-line,
html[data-theme='dark'] .admin-status-pill.is-plan,
html[data-theme='dark'] .admin-subscription-summary strong,
html[data-theme='dark'] .admin-subscription-main h3,
html[data-theme='dark'] .admin-subscription-details strong,
html[data-theme='dark'] .admin-empty-state i,
html[data-theme='dark'] .admin-empty-state strong {
    color: #fff;
}

@media (max-width: 1280px) {
    .super-admin-kpi-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .super-admin-board,
    .super-admin-board-secondary {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .super-admin-board-secondary .super-admin-panel:first-child {
        grid-column: 1 / -1;
    }
}

@media (max-width: 860px) {
    .super-admin-hero {
        align-items: flex-start;
        flex-direction: column;
    }

    .super-admin-actions {
        width: 100%;
        justify-content: stretch;
    }

    .super-admin-actions .btn {
        flex: 1 1 160px;
        justify-content: center;
    }

    .super-admin-kpi-grid,
    .super-admin-board,
    .super-admin-board-secondary {
        grid-template-columns: 1fr;
    }

    .admin-subscription-summary,
    .admin-subscription-details {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 560px) {
    .super-admin-hero,
    .super-admin-panel {
        padding: 1rem;
        border-radius: 1rem;
    }

    .super-admin-kpi-grid {
        gap: .65rem;
    }

    .super-admin-kpi {
        min-height: auto;
    }

    .super-admin-bar {
        grid-template-columns: 88px minmax(0, 1fr) 28px;
        gap: .5rem;
    }

    .super-admin-finance-grid,
    .super-admin-shortcuts {
        grid-template-columns: 1fr;
    }

    .super-admin-column-chart {
        min-height: 150px;
    }

    .super-admin-column-chart div {
        height: 134px;
    }

    .admin-subscription-summary,
    .admin-subscription-details {
        grid-template-columns: 1fr;
    }

    .admin-subscription-main {
        flex-direction: column;
    }

    .admin-subscription-badges {
        justify-content: flex-start;
    }

    .admin-subscription-main p {
        max-width: 100%;
        white-space: normal;
    }
}

.admin-create-company-panel {
    width: min(760px, 100vw);
    background: color-mix(in srgb, var(--card) 94%, var(--surface-soft) 6%);
    color: var(--text);
    border-left: 1px solid var(--line);
}

.offcanvas.offcanvas-end {
    width: min(760px, 100vw) !important;
}

.offcanvas.offcanvas-end.inventory-history-panel {
    width: calc(100vw - 16px) !important;
    max-width: 1440px;
    z-index: 2080;
}

.offcanvas.offcanvas-end.consignee-payout-panel {
    width: min(1180px, calc(100vw - 16px)) !important;
    max-width: 1180px;
}

.consignee-payout-rule-grid {
    display: grid;
    grid-template-columns: minmax(180px, .8fr) minmax(260px, 1.1fr) minmax(340px, 1.45fr);
    gap: 1rem;
    align-items: start;
}

.consignee-payout-rule-field {
    min-width: 0;
}

.consignee-payout-switch {
    min-height: 3.05rem;
    display: flex;
    align-items: center;
    gap: .65rem;
    margin: 0;
}

.consignee-payout-switch .form-check-input {
    margin-top: 0;
}

.consignee-payout-products-table {
    min-width: 860px;
}

.consignee-payout-footer .btn {
    min-width: 132px;
}

@media (max-width: 991.98px) {
    .offcanvas.offcanvas-end.consignee-payout-panel {
        width: 100vw !important;
        max-width: 100vw;
    }

    .consignee-payout-rule-grid {
        grid-template-columns: 1fr;
    }
}

.inventory-history-panel .offcanvas-body {
    overflow: auto;
}

.inventory-history-table-wrap,
.inventory-expiry-table-wrap {
    position: relative;
    z-index: 1;
    padding-bottom: .2rem;
    scrollbar-gutter: stable both-edges;
    scrollbar-width: thin;
    -ms-overflow-style: auto;
}

.inventory-history-table-wrap::-webkit-scrollbar,
.inventory-expiry-table-wrap::-webkit-scrollbar {
    width: 12px !important;
    height: 12px !important;
    display: block !important;
}

.inventory-history-table-wrap::-webkit-scrollbar-track,
.inventory-expiry-table-wrap::-webkit-scrollbar-track {
    display: block;
    background: color-mix(in srgb, var(--surface-soft) 78%, transparent 22%);
}

.inventory-history-table-wrap::-webkit-scrollbar-thumb,
.inventory-expiry-table-wrap::-webkit-scrollbar-thumb {
    display: block;
    border: 2px solid transparent;
    border-radius: 999px;
    background: color-mix(in srgb, var(--muted) 68%, transparent 32%);
    background-clip: padding-box;
}

.inventory-history-panel .table-responsive {
    max-height: calc(100dvh - 255px);
    overflow: auto;
}

.inventory-history-panel .table {
    min-width: 980px;
}

.inventory-history-table {
    min-width: 1320px;
}

.inventory-history-table .inventory-history-col-date,
.inventory-history-table .inventory-history-col-product,
.inventory-history-table .inventory-history-col-context,
.inventory-history-table .inventory-history-col-origin,
.inventory-history-table .inventory-history-col-type,
.inventory-history-table .inventory-history-col-qty,
.inventory-history-table .inventory-history-col-cost {
    white-space: nowrap;
}

.inventory-history-table .inventory-history-col-product {
    min-width: 28rem;
}

.inventory-history-table .inventory-history-col-origin {
    min-width: 18rem;
}

#xmlImportPreviewPanel .offcanvas-header {
    padding-bottom: .85rem;
}

#xmlImportPreviewPanel .offcanvas-body {
    padding-top: .9rem;
}

#xmlImportPreviewPanel .xml-import-preview-toolbar {
    align-items: flex-start;
    gap: .65rem;
}

#xmlImportPreviewPanel .xml-import-preview-toolbar > form {
    margin: 0;
}

#xmlImportPreviewPanel .xml-import-preview-toolbar .btn,
#xmlImportPreviewPanel .xml-import-preview-toolbar .form-control {
    min-height: 2.25rem;
}

#xmlImportPreviewPanel .xml-import-preview-metrics > [class*='col-'] {
    display: flex;
}

#xmlImportPreviewPanel .xml-import-preview-metrics .metric-card {
    width: 100%;
    min-height: auto;
    padding: .75rem .85rem;
    gap: .3rem;
    border-radius: .85rem;
}

#xmlImportPreviewPanel .xml-import-preview-metrics .metric-card span {
    font-size: .72rem;
    letter-spacing: .03em;
}

#xmlImportPreviewPanel .xml-import-preview-metrics .metric-card strong {
    font-size: clamp(.92rem, 1.15vw, 1.12rem);
    line-height: 1.18;
}

#xmlImportPreviewPanel .xml-import-preview-metrics .metric-card strong.small {
    font-size: .8rem;
    word-break: break-all;
}

#xmlImportPreviewPanel .alert {
    padding: .75rem .9rem;
}

#xmlImportPreviewPanel .xml-import-batch-pricing {
    display: grid;
    grid-template-columns: minmax(190px, 1fr) minmax(130px, .72fr) auto;
    gap: .55rem;
    align-items: center;
}

#xmlImportPreviewPanel .xml-import-preview-table-wrap {
    border: 1px solid var(--line);
    border-radius: 1rem;
    background: color-mix(in srgb, var(--card) 96%, var(--surface-soft) 4%);
    padding: .35rem;
}

#xmlImportPreviewPanel .xml-import-preview-table {
    min-width: 1120px;
    margin-bottom: 0;
}

#xmlImportPreviewPanel .xml-import-preview-table th,
#xmlImportPreviewPanel .xml-import-preview-table td {
    padding: .52rem .42rem;
    font-size: .81rem;
    line-height: 1.3;
    vertical-align: top;
    white-space: normal;
}

#xmlImportPreviewPanel .xml-import-preview-table thead th {
    font-size: .7rem;
    text-transform: uppercase;
    letter-spacing: .04em;
    white-space: nowrap;
}

#xmlImportPreviewPanel .xml-import-preview-table .fw-semibold,
#xmlImportPreviewPanel .xml-import-preview-table .small,
#xmlImportPreviewPanel .xml-import-preview-table .text-muted,
#xmlImportPreviewPanel .xml-import-preview-table .badge {
    overflow-wrap: anywhere;
}

#xmlImportPreviewPanel .xml-import-col-description {
    min-width: 12.5rem;
}

#xmlImportPreviewPanel .xml-import-col-link {
    min-width: 14rem;
}

#xmlImportPreviewPanel .xml-import-col-validation {
    min-width: 6.25rem;
}

#xmlImportPreviewPanel .xml-import-col-item,
#xmlImportPreviewPanel .xml-import-col-code,
#xmlImportPreviewPanel .xml-import-col-barcode,
#xmlImportPreviewPanel .xml-import-col-unit,
#xmlImportPreviewPanel .xml-import-col-qty,
#xmlImportPreviewPanel .xml-import-col-money,
#xmlImportPreviewPanel .xml-import-col-price {
    overflow-wrap: normal;
    word-break: keep-all;
}

#xmlImportPreviewPanel .xml-import-col-code,
#xmlImportPreviewPanel .xml-import-col-barcode {
    font-variant-numeric: tabular-nums;
}

#xmlImportPreviewPanel .xml-import-col-item,
#xmlImportPreviewPanel .xml-import-col-code,
#xmlImportPreviewPanel .xml-import-col-unit,
#xmlImportPreviewPanel .xml-import-col-qty,
#xmlImportPreviewPanel .xml-import-col-money {
    white-space: nowrap;
}

#xmlImportPreviewPanel .xml-import-col-barcode {
    min-width: 5.75rem;
    white-space: nowrap;
}

#xmlImportPreviewPanel .xml-import-col-price {
    min-width: 7rem;
}

#xmlImportPreviewPanel .xml-import-preview-table .form-control,
#xmlImportPreviewPanel .xml-import-preview-table .form-select {
    min-height: 1.9rem;
    font-size: .79rem;
    padding-top: .28rem;
    padding-bottom: .28rem;
}

#xmlImportPreviewPanel .xml-import-preview-table .btn {
    font-size: .75rem;
    padding: .28rem .55rem;
}

#xmlImportPreviewPanel .xml-import-selected-product-label {
    line-height: 1.35;
    overflow-wrap: anywhere;
}

#xmlImportPreviewPanel .js-xml-import-sale-price {
    min-width: 5.85rem;
}

#xmlImportPreviewPanel .xml-import-col-link .form-select {
    min-width: 0;
}

#xmlImportPreviewPanel .xml-import-col-link .btn {
    max-width: 100%;
    white-space: normal;
}

#xmlImportPreviewPanel .xml-import-col-validation .badge {
    min-width: 0;
    padding-inline: .55rem;
}

@media (max-width: 1366px) {
    #xmlImportPreviewPanel .xml-import-preview-table {
        min-width: 1040px;
    }

    #xmlImportPreviewPanel .xml-import-col-description {
        min-width: 11rem;
    }

    #xmlImportPreviewPanel .xml-import-col-link {
        min-width: 12.5rem;
    }

    #xmlImportPreviewPanel .xml-import-col-validation {
        min-width: 5.5rem;
    }
}

#xmlImportPreviewPanel .xml-import-suggestions {
    display: flex;
    flex-wrap: wrap;
    gap: .2rem .45rem;
    align-items: baseline;
}

#xmlImportPreviewPanel .xml-import-inline-alert {
    margin-bottom: .9rem;
}

#xmlImportPreviewPanel .xml-import-inline-alert-content {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .85rem;
}

#xmlImportPreviewPanel .xml-import-inline-alert-message {
    min-width: 0;
}

#xmlImportPreviewPanel .xml-import-preview-table tr.is-pending-selection {
    --bs-table-bg: color-mix(in srgb, #fff3cd 88%, var(--card) 12%);
    --bs-table-hover-bg: color-mix(in srgb, #ffe8a1 86%, var(--card) 14%);
}

#xmlImportPreviewPanel .xml-import-preview-table tr.is-current-pending-target {
    outline: 2px solid color-mix(in srgb, var(--accent) 68%, #f59e0b 32%);
    outline-offset: -2px;
}

#xmlImportPreviewPanel .xml-import-suggestions-title {
    font-weight: 700;
}

#xmlImportPreviewPanel .xml-import-suggestions .btn-link {
    white-space: normal;
    text-align: left;
    line-height: 1.25;
}

#xmlImportPreviewPanel .xml-import-suggestion-reason {
    margin-right: .2rem;
}

#xmlImportProductPickerModal .modal-content {
    min-height: min(72vh, 760px);
}

#xmlImportProductPickerModal .modal-body {
    padding: 1.15rem 1.25rem 1.25rem;
}

#xmlImportProductPickerModal .ts-control,
#xmlImportProductPickerModal .ts-wrapper.single .ts-control,
#xmlImportProductPickerModal .form-select {
    min-height: 3rem;
}

#xmlImportHistoryPanel .accordion {
    display: grid;
    gap: .8rem;
}

#xmlImportHistoryPanel .accordion-item {
    border: 1px solid var(--line);
    border-radius: 1.15rem;
    overflow: hidden;
    background: color-mix(in srgb, var(--card) 96%, var(--surface-soft) 4%);
}

#xmlImportHistoryPanel .accordion-button {
    align-items: center;
    gap: .75rem;
    background: color-mix(in srgb, var(--card) 94%, var(--surface-soft) 6%);
    color: var(--text);
    box-shadow: none;
    padding: .95rem 1rem;
}

#xmlImportHistoryPanel .accordion-button:not(.collapsed) {
    background: color-mix(in srgb, var(--primary) 10%, var(--card) 90%);
    color: var(--text);
    box-shadow: none;
}

#xmlImportHistoryPanel .accordion-button:focus {
    box-shadow: none;
}

#xmlImportHistoryPanel .accordion-body {
    background: color-mix(in srgb, var(--card) 98%, var(--surface-soft) 2%);
    padding: 1rem;
}

#xmlImportHistoryPanel .table-responsive {
    border-radius: 1rem;
}

#xmlImportHistoryPanel .table {
    margin-bottom: 0;
}

#xmlImportHistoryPanel .table thead th {
    white-space: nowrap;
}

#xmlImportHistoryPanel .table tbody td {
    vertical-align: top;
}

@media (max-width: 991.98px) {
    #xmlImportPreviewPanel .xml-import-inline-alert-content {
        align-items: stretch;
        flex-direction: column;
    }

    #xmlImportPreviewPanel .xml-import-batch-pricing {
        grid-template-columns: 1fr;
    }

    #xmlImportPreviewPanel .xml-import-preview-toolbar,
    #xmlImportPreviewPanel .xml-import-preview-toolbar > form,
    #xmlImportPreviewPanel .xml-import-preview-toolbar > a {
        width: 100%;
    }

    #xmlImportPreviewPanel .xml-import-preview-toolbar .form-control,
    #xmlImportPreviewPanel .xml-import-preview-toolbar .btn {
        width: 100%;
    }

    #xmlImportProductPickerModal .modal-content {
        min-height: auto;
    }
}

@media (max-width: 767.98px) {
    #xmlImportPreviewPanel .offcanvas-header {
        padding: .9rem 1rem .75rem;
    }

    #xmlImportPreviewPanel .offcanvas-body {
        padding: .85rem .85rem calc(4rem + env(safe-area-inset-bottom, 0px));
    }

    #xmlImportPreviewPanel .xml-import-preview-metrics .metric-card {
        padding: .65rem .75rem;
    }

    #xmlImportPreviewPanel .xml-import-preview-metrics .metric-card strong {
        font-size: .96rem;
    }

    #xmlImportPreviewPanel .xml-import-preview-table-wrap {
        border: 0;
        background: transparent;
        padding: 0;
    }

    #xmlImportPreviewPanel .xml-import-preview-table tr {
        padding: .7rem;
        border-radius: .95rem;
    }

    #xmlImportPreviewPanel .xml-import-preview-table td {
        padding: .25rem 0;
        font-size: .81rem;
    }

    #xmlImportPreviewPanel .xml-import-col-item,
    #xmlImportPreviewPanel .xml-import-col-code,
    #xmlImportPreviewPanel .xml-import-col-barcode,
    #xmlImportPreviewPanel .xml-import-col-unit,
    #xmlImportPreviewPanel .xml-import-col-qty,
    #xmlImportPreviewPanel .xml-import-col-money,
    #xmlImportPreviewPanel .xml-import-col-price {
        white-space: normal;
    }

    #xmlImportPreviewPanel .xml-import-preview-table td[data-label] {
        grid-template-columns: minmax(5.7rem, 35%) minmax(0, 1fr);
        gap: .45rem;
        align-items: start;
    }

    #xmlImportPreviewPanel .xml-import-preview-table .form-control,
    #xmlImportPreviewPanel .xml-import-preview-table .form-select,
    #xmlImportPreviewPanel .xml-import-preview-table .btn {
        width: 100%;
    }
}

.offcanvas.offcanvas-end.consignee-history-panel {
    width: calc(100vw - 24px) !important;
    max-width: 1560px;
    z-index: 2080;
}

.offcanvas.offcanvas-end.consignment-movements-panel {
    width: calc(100vw - 16px) !important;
    max-width: 1680px;
    z-index: 2080;
}

.offcanvas.offcanvas-end.finance-history-panel {
    width: calc(100vw - 24px) !important;
    max-width: 1280px;
    z-index: 2080;
}

.finance-history-panel .offcanvas-body {
    overflow: auto;
}

.inventory-history-filters {
    align-items: end;
    display: grid;
    gap: .65rem;
    grid-template-columns: minmax(155px, .8fr) minmax(170px, .9fr) minmax(210px, 1.2fr) minmax(145px, .75fr) minmax(170px, .95fr) auto;
}

.inventory-history-filters .form-label {
    color: var(--muted);
    font-size: .76rem;
    font-weight: 800;
    margin-bottom: .25rem;
    text-transform: uppercase;
}

.inventory-history-filters .form-control,
.inventory-history-filters .form-select,
.inventory-history-filters .btn {
    min-height: 42px;
}

.inventory-history-filters .filter-actions {
    display: flex;
    gap: .5rem;
}

.inventory-history-filters .filter-actions .btn {
    align-items: center;
    display: inline-flex;
    flex: 0 0 auto;
    gap: .4rem;
    justify-content: center;
    min-width: 102px;
    white-space: nowrap;
}

.finance-adjustments-history-table {
    min-width: 760px;
}

.finance-adjustments-history-table th,
.finance-adjustments-history-table td {
    white-space: nowrap;
}

.finance-adjustments-history-table th:nth-child(3),
.finance-adjustments-history-table td:nth-child(3),
.finance-adjustments-history-table th:nth-child(4),
.finance-adjustments-history-table td:nth-child(4) {
    white-space: normal;
}

.settings-page {
    margin-inline: auto;
    max-width: 1440px;
}

.settings-hero {
    align-items: center;
    background:
        radial-gradient(circle at 92% 12%, color-mix(in srgb, var(--primary) 14%, transparent) 0, transparent 34%),
        color-mix(in srgb, var(--card) 92%, var(--surface-soft) 8%);
    border: 1px solid var(--line);
    border-radius: 1.35rem;
    box-shadow: var(--shadow-soft);
    display: flex;
    gap: 1rem;
    justify-content: space-between;
    margin-bottom: 1.25rem;
    padding: 1.35rem 1.45rem;
}

.settings-hero-premium {
    position: relative;
    overflow: hidden;
    align-items: stretch;
    gap: 1.25rem;
}

.settings-hero-premium::after {
    content: '';
    position: absolute;
    inset: auto -80px -110px auto;
    width: 240px;
    height: 240px;
    border-radius: 999px;
    background: color-mix(in srgb, var(--primary) 12%, transparent);
    filter: blur(8px);
    pointer-events: none;
}

.settings-hero-copy,
.settings-hero-side {
    position: relative;
    z-index: 1;
}

.settings-hero-copy {
    display: flex;
    flex: 1 1 360px;
    flex-direction: column;
    justify-content: space-between;
    min-width: 0;
}

.settings-hero-badge {
    align-items: center;
    align-self: flex-start;
    background: color-mix(in srgb, var(--primary) 18%, transparent);
    border: 1px solid color-mix(in srgb, var(--primary) 18%, transparent);
    border-radius: 999px;
    color: var(--primary);
    display: inline-flex;
    font-size: .72rem;
    font-weight: 900;
    letter-spacing: .08em;
    margin-bottom: .8rem;
    padding: .4rem .8rem;
    text-transform: uppercase;
}

.settings-hero-meta {
    display: flex;
    flex-wrap: wrap;
    gap: .6rem;
    margin-top: 1rem;
}

.settings-hero-meta span {
    align-items: center;
    background: rgba(255, 255, 255, .64);
    border: 1px solid rgba(15, 23, 42, .08);
    border-radius: 999px;
    color: var(--text);
    display: inline-flex;
    gap: .45rem;
    min-height: 38px;
    padding: .45rem .8rem;
}

.settings-hero-side {
    display: flex;
    flex: 1 1 460px;
    flex-direction: column;
    gap: .9rem;
    justify-content: space-between;
    min-width: 0;
}

.settings-summary-grid {
    display: grid;
    gap: .8rem;
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.settings-summary-card {
    background: rgba(255, 255, 255, .76);
    border: 1px solid rgba(15, 23, 42, .08);
    border-radius: 1.05rem;
    box-shadow: 0 14px 34px rgba(15, 23, 42, .06);
    min-width: 0;
    padding: .9rem 1rem;
}

.settings-summary-card span,
.settings-color-option small {
    color: var(--muted);
    display: block;
    font-size: .76rem;
    font-weight: 700;
}

.settings-summary-card strong {
    color: var(--text);
    display: block;
    font-size: 1rem;
    letter-spacing: -.02em;
    margin-top: .18rem;
}

.settings-summary-card small {
    display: block;
    margin-top: .28rem;
}

.settings-hero-save {
    align-self: flex-end;
}

.settings-layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(300px, 380px);
    gap: 1.25rem;
    align-items: start;
}

.settings-primary-column,
.settings-secondary-column {
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
    min-width: 0;
}

.settings-panel,
.settings-save-panel {
    overflow: hidden;
}

.settings-side-panel .card-body,
.settings-panel .card-body {
    padding: 1.25rem;
}

.settings-section-heading {
    align-items: flex-start;
    display: flex;
    gap: 1rem;
    justify-content: space-between;
}

.settings-section-badge {
    align-items: center;
    align-self: flex-start;
    background: color-mix(in srgb, var(--surface-soft) 72%, var(--card) 28%);
    border: 1px solid var(--line);
    border-radius: 999px;
    color: var(--muted);
    display: inline-flex;
    gap: .45rem;
    min-height: 36px;
    padding: .45rem .8rem;
    white-space: nowrap;
}

.settings-kicker {
    align-items: center;
    background: color-mix(in srgb, var(--primary) 16%, transparent);
    border-radius: 999px;
    color: var(--primary);
    display: inline-flex;
    font-size: .72rem;
    font-weight: 900;
    letter-spacing: .01em;
    margin-bottom: .55rem;
    padding: .35rem .75rem;
}

.settings-form-grid,
.settings-password-grid {
    display: grid;
    gap: 1rem;
}

.settings-form-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.settings-form-grid-full {
    grid-column: 1 / -1;
}

.settings-password-grid {
    grid-template-columns: repeat(1, minmax(0, 1fr));
}

.settings-toggle-card,
.settings-push-box {
    align-items: center;
    background: color-mix(in srgb, var(--surface-soft) 70%, var(--card) 30%);
    border: 1px solid var(--line);
    border-radius: 1rem;
    display: flex;
    gap: 1rem;
    justify-content: space-between;
    padding: 1rem;
}

.settings-push-box {
    align-items: stretch;
    flex-direction: column;
}

.settings-side-header {
    align-items: flex-start;
    display: flex;
    gap: 1rem;
    justify-content: space-between;
}

.settings-side-icon {
    align-items: center;
    background: color-mix(in srgb, var(--primary) 14%, transparent);
    border: 1px solid color-mix(in srgb, var(--primary) 18%, transparent);
    border-radius: 1rem;
    color: var(--primary);
    display: inline-flex;
    flex: 0 0 auto;
    font-size: 1rem;
    height: 44px;
    justify-content: center;
    width: 44px;
}

.settings-color-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
    gap: .75rem;
}

.settings-color-option {
    align-items: center;
    background: color-mix(in srgb, var(--card) 94%, var(--surface-soft) 6%);
    border: 1px solid var(--line);
    border-radius: 1rem;
    color: var(--text);
    display: flex;
    gap: .65rem;
    min-height: 50px;
    min-width: 0;
    padding: .75rem .9rem;
    text-align: left;
    transition: border-color .2s ease, box-shadow .2s ease, transform .2s ease;
}

.settings-color-option:hover,
.settings-color-option.active {
    border-color: color-mix(in srgb, var(--primary) 55%, var(--line) 45%);
    box-shadow: 0 12px 28px rgba(15, 23, 42, .08);
    transform: translateY(-1px);
}

.settings-color-option span:last-child {
    min-width: 0;
}

.settings-color-option strong {
    display: block;
    font-size: .92rem;
    line-height: 1.2;
}

.settings-color-option small {
    margin-top: .18rem;
}

.settings-color-dot {
    border: 2px solid rgba(255, 255, 255, .8);
    border-radius: 999px;
    box-shadow: 0 0 0 1px var(--line);
    display: inline-flex;
    height: 18px;
    width: 18px;
    flex: 0 0 auto;
}

.settings-color-dot.color-default {
    background: #465779;
}

.settings-color-dot.color-green {
    background: #1f6f5b;
}

.settings-color-dot.color-rose {
    background: #a3396b;
}

.settings-color-dot.color-wine {
    background: #7f1d3a;
}

.settings-color-dot.color-graphite {
    background: #28323c;
}

.settings-color-dot.color-black {
    background: #111827;
}

.settings-save-card {
    position: static;
}

.settings-save-panel .card-body {
    align-items: center;
    display: flex;
    gap: 1rem;
    justify-content: space-between;
}

html[data-theme='dark'] .settings-toggle-card,
html[data-theme='dark'] .settings-push-box,
html[data-theme='dark'] .settings-color-option {
    background: #0f0f0f;
}

html[data-theme='dark'] .modal-header,
html[data-theme='dark'] .modal-footer {
    background: #0d1012 !important;
    border-color: #252a30 !important;
}

html[data-theme='dark'] .modal-body {
    background: transparent;
}

html[data-theme='dark'] .modal .form-control,
html[data-theme='dark'] .modal .form-select,
html[data-theme='dark'] .modal .input-group-text,
html[data-theme='dark'] .modal .form-control-color {
    background-color: #121518;
    border-color: #323840;
    color: #ffffff;
}

html[data-theme='dark'] .modal .form-control:focus,
html[data-theme='dark'] .modal .form-select:focus {
    border-color: color-mix(in srgb, var(--primary) 72%, #ffffff 28%);
    box-shadow: 0 0 0 .22rem color-mix(in srgb, var(--primary) 20%, transparent 80%);
}

html[data-theme='dark'] .modal .input-group > .btn,
html[data-theme='dark'] .modal .btn-light,
html[data-theme='dark'] .modal .btn-outline-secondary {
    border-color: #323840;
}

html[data-theme='dark'] .modal .btn-light {
    background: #15181c !important;
    color: #f8fafc !important;
}

html[data-theme='dark'] .modal .btn-outline-secondary {
    background: transparent;
    color: #e5edf3;
}

html[data-theme='dark'] .modal .btn-outline-secondary:hover,
html[data-theme='dark'] .modal .btn-outline-secondary:focus {
    background: #1a1f24;
    color: #ffffff;
}

html[data-theme='dark'] .modal .text-muted,
html[data-theme='dark'] .modal .form-text,
html[data-theme='dark'] .modal small,
html[data-theme='dark'] .modal .small {
    color: #b8c3ca !important;
}

html[data-theme='dark'] .settings-hero,
html[data-theme='dark'] .settings-summary-card,
html[data-theme='dark'] .settings-hero-meta span,
html[data-theme='dark'] .settings-section-badge {
    background: #101214;
    border-color: #272d33;
    color: #ffffff;
}

html[data-theme='dark'] .settings-summary-card span,
html[data-theme='dark'] .settings-summary-card small,
html[data-theme='dark'] .settings-color-option small,
html[data-theme='dark'] .settings-hero-meta span {
    color: #c4d0d7;
}

html[data-theme='dark'] .settings-side-icon,
html[data-theme='dark'] .settings-hero-badge {
    background: color-mix(in srgb, var(--primary) 18%, #0f1214 82%);
    border-color: color-mix(in srgb, var(--primary) 22%, #20262c 78%);
}

html[data-theme='dark'] .crm-list-summary,
html[data-theme='dark'] .crm-list-counter {
    background: #111315;
    border-color: #2a3036;
    color: #ffffff;
}

html[data-theme='dark'] .crm-executive-title h1,
html[data-theme='dark'] .crm-panel-heading h2,
html[data-theme='dark'] .crm-donut-chart strong,
html[data-theme='dark'] .crm-donut-legend strong,
html[data-theme='dark'] .crm-bar-row strong,
html[data-theme='dark'] .crm-communication-list strong,
html[data-theme='dark'] .crm-executive-metrics strong,
html[data-theme='dark'] .crm-list-summary strong,
html[data-theme='dark'] .crm-segment-row strong,
html[data-theme='dark'] .crm-dashboard-agenda strong,
html[data-theme='dark'] .crm-rule-pill strong {
    color: #ffffff;
}

html[data-theme='dark'] .crm-executive-title p,
html[data-theme='dark'] .crm-executive-title span,
html[data-theme='dark'] .crm-panel-heading span,
html[data-theme='dark'] .crm-panel-heading a,
html[data-theme='dark'] .crm-donut-chart span,
html[data-theme='dark'] .crm-donut-legend a,
html[data-theme='dark'] .crm-bar-row span,
html[data-theme='dark'] .crm-communication-list span,
html[data-theme='dark'] .crm-executive-metrics span,
html[data-theme='dark'] .crm-executive-metrics small,
html[data-theme='dark'] .crm-rule-pill span,
html[data-theme='dark'] .crm-segment-row span,
html[data-theme='dark'] .crm-list-summary small,
html[data-theme='dark'] .crm-dashboard-agenda span,
html[data-theme='dark'] .crm-section-label {
    color: #b8c3ca;
}

html[data-theme='dark'] .crm-board-panel,
html[data-theme='dark'] .crm-board-panel-main,
html[data-theme='dark'] .crm-communication-list > div,
html[data-theme='dark'] .crm-executive-metrics a,
html[data-theme='dark'] .crm-rule-pill,
html[data-theme='dark'] .crm-segment-row,
html[data-theme='dark'] .crm-dashboard-agenda a {
    background: #111315;
    border-color: #2a3036;
    box-shadow: none;
}

html[data-theme='dark'] .crm-segment-row:hover,
html[data-theme='dark'] .crm-dashboard-agenda a:hover,
html[data-theme='dark'] .crm-executive-metrics a:hover,
html[data-theme='dark'] .crm-rule-pill.active {
    background: #171a1d;
    border-color: #363d44;
    box-shadow: none;
}

html[data-theme='dark'] .crm-donut-chart {
    background: conic-gradient(#7c8aa5 calc(var(--active) * 1%), #27303a 0 100%);
    box-shadow: inset 0 0 0 1px #2a3036;
}

html[data-theme='dark'] .crm-donut-chart > div {
    background: #0f1113;
    box-shadow: inset 0 0 0 1px #2a3036;
}

html[data-theme='dark'] .crm-bar-row div,
html[data-theme='dark'] .crm-thin-meter {
    background: #252d36;
}

html[data-theme='dark'] .crm-bar-row i,
html[data-theme='dark'] .crm-thin-meter i {
    background: linear-gradient(90deg, #8da0bb, #d7e0ea);
}

@media (max-width: 1199.98px) {
    .settings-hero {
        flex-direction: column;
    }

    .settings-hero-side,
    .settings-hero-save {
        align-self: stretch;
    }

    .settings-layout {
        grid-template-columns: 1fr;
    }

    .settings-secondary-column {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .settings-color-grid {
        grid-template-columns: repeat(auto-fit, minmax(132px, 1fr));
    }
}

@media (max-width: 767.98px) {
    .settings-summary-grid {
        grid-template-columns: 1fr;
    }

    .settings-section-badge,
    .settings-side-icon {
        display: none;
    }
}

@media (max-width: 575.98px) {
    .settings-hero,
    .settings-section-heading {
        align-items: flex-start;
        flex-direction: column;
    }

    .settings-hero-meta {
        flex-direction: column;
    }

    .settings-form-grid,
    .settings-password-grid,
    .settings-secondary-column {
        grid-template-columns: 1fr;
    }

    .settings-color-grid {
        grid-template-columns: 1fr;
    }

    .settings-save-panel .card-body {
        align-items: stretch;
        flex-direction: column;
    }

    .settings-save-panel .btn {
        width: 100%;
    }

    .settings-toggle-card {
        align-items: flex-start;
    }
}

.admin-create-company-panel .offcanvas-body {
    padding: 1.25rem 1.5rem 1.75rem;
}

.admin-create-company-panel .offcanvas-header {
    padding: 1.25rem 1.5rem;
}

.admin-create-company-panel .offcanvas-header {
    align-items: flex-start;
    border-bottom: 1px solid var(--line);
}

.admin-create-company-panel .btn-close {
    filter: none;
}

.admin-transfer-items-panel {
    border: 1px solid var(--line);
    border-radius: .5rem;
    background: var(--card);
    padding: .55rem;
}

.admin-transfer-items-summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .75rem;
    padding: .1rem .1rem .5rem;
    color: var(--muted);
    font-size: .875rem;
}

.admin-transfer-items-summary strong {
    color: var(--text);
    font-variant-numeric: tabular-nums;
}

.admin-transfer-items-list {
    max-height: min(34vh, 18rem);
    overflow-y: auto;
    padding-right: .15rem;
    -webkit-overflow-scrolling: touch;
}

.admin-transfer-item {
    border: 1px solid var(--line);
    border-radius: .5rem;
    background: var(--surface);
    padding: .55rem .6rem;
}

.admin-transfer-item-main {
    min-width: 0;
}

.admin-transfer-item-title {
    display: block;
    line-height: 1.2;
    overflow-wrap: anywhere;
}

html[data-theme='dark'] .admin-create-company-panel {
    background: #050505;
    color: #ffffff;
}

html[data-theme='dark'] .admin-create-company-panel .btn-close {
    filter: invert(1) grayscale(100%);
}

.premium-workflow-panel {
    --premium-accent: var(--muted);
    --premium-accent-strong: var(--text);
    --premium-accent-soft: color-mix(in srgb, var(--surface-soft) 78%, var(--card) 22%);
    --premium-panel-bg: color-mix(in srgb, var(--surface-soft) 72%, var(--card) 28%);
    --premium-card-bg: color-mix(in srgb, var(--card) 88%, var(--surface-soft) 12%);
}

.premium-sale-panel {
    --premium-accent: var(--muted);
    --premium-accent-strong: var(--text);
}

.premium-product-panel {
    --premium-accent: var(--muted);
    --premium-accent-strong: var(--text);
}

.premium-stock-panel {
    --premium-accent: var(--muted);
    --premium-accent-strong: var(--text);
}

.premium-workflow-panel.offcanvas.offcanvas-end {
    --bs-offcanvas-width: min(760px, 100vw);
    border-left: 0;
    box-shadow: -24px 0 80px rgba(15, 23, 42, .22);
}

.premium-workflow-panel .offcanvas-header {
    background: linear-gradient(135deg, color-mix(in srgb, var(--card) 90%, var(--surface-soft) 10%), var(--card));
    border-bottom: 1px solid var(--line);
    padding: 1.35rem 1.55rem 1.15rem;
    position: relative;
}

.premium-workflow-panel .offcanvas-header::after {
    background: color-mix(in srgb, var(--line) 86%, transparent);
    bottom: -1px;
    content: "";
    height: 3px;
    left: 1.55rem;
    position: absolute;
    right: 35%;
}

.premium-workflow-panel .offcanvas-header .badge {
    background: var(--premium-accent-soft) !important;
    border: 1px solid var(--line);
    color: var(--text) !important;
}

.premium-workflow-panel .offcanvas-title {
    letter-spacing: -.025em;
}

.premium-workflow-panel .offcanvas-body {
    background: var(--premium-panel-bg);
}

.premium-flow-hero {
    align-items: center;
    background: linear-gradient(135deg, var(--premium-card-bg), color-mix(in srgb, var(--card) 78%, transparent));
    border: 1px solid var(--line);
    border-radius: 24px;
    box-shadow: 0 18px 45px rgba(15, 23, 42, .08);
    display: flex;
    gap: 1rem;
    margin-bottom: .85rem;
    padding: 1rem;
}

.premium-flow-hero-icon {
    align-items: center;
    background: color-mix(in srgb, var(--surface-soft) 78%, var(--card) 22%);
    border: 1px solid var(--line);
    border-radius: 18px;
    box-shadow: 0 12px 28px rgba(15, 23, 42, .06);
    color: var(--muted);
    display: inline-flex;
    flex: 0 0 48px;
    font-size: 1.35rem;
    height: 48px;
    justify-content: center;
    width: 48px;
}

.premium-flow-hero strong,
.premium-flow-hero span {
    display: block;
}

.premium-flow-hero strong {
    color: var(--text);
    font-size: 1rem;
    letter-spacing: -.01em;
}

.premium-flow-hero span {
    color: var(--muted);
    font-size: .86rem;
    margin-top: .15rem;
}

.premium-workflow-form {
    background: color-mix(in srgb, var(--card) 92%, transparent);
    border: 1px solid var(--line);
    border-radius: 26px;
    box-shadow: 0 18px 50px rgba(15, 23, 42, .075);
    margin: 0;
    padding: 1rem;
}

.premium-workflow-form .form-label {
    color: var(--text);
    font-size: .78rem;
    font-weight: 850;
    letter-spacing: .015em;
    margin-bottom: .38rem;
}

.premium-workflow-form .form-control,
.premium-workflow-form .form-select,
.premium-workflow-form .searchable-select-trigger {
    background-color: color-mix(in srgb, var(--card) 88%, var(--surface-soft) 12%);
    border-color: var(--line);
    border-radius: 14px;
    min-height: 44px;
}

.premium-workflow-form textarea.form-control {
    min-height: auto;
}

.premium-workflow-form .form-control:focus,
.premium-workflow-form .form-select:focus,
.premium-workflow-form .searchable-select-trigger:focus {
    border-color: color-mix(in srgb, var(--premium-accent) 76%, var(--line) 24%);
    box-shadow: 0 0 0 .22rem color-mix(in srgb, var(--premium-accent) 16%, transparent);
}

.premium-workflow-form .form-text,
.premium-workflow-form .text-muted {
    color: var(--muted) !important;
}

.premium-workflow-form .form-check-input:checked {
    background-color: var(--premium-accent);
    border-color: var(--premium-accent);
}

.premium-sale-form .btn {
    align-items: center;
    display: inline-flex;
    font-weight: 850;
    gap: .4rem;
    justify-content: center;
    line-height: 1.15;
    min-height: 2.72rem;
    white-space: nowrap;
}

.premium-sale-form .btn-sm {
    min-height: 2.35rem;
    padding-inline: .78rem;
}

.premium-sale-form .btn > i,
.premium-sale-form .btn > .bi {
    flex: 0 0 auto;
    line-height: 1;
}

.premium-sale-form .btn-group {
    align-items: stretch;
    display: inline-flex;
    flex-wrap: wrap;
    gap: .4rem;
    justify-content: flex-end;
}

.premium-sale-form .btn-group > .btn {
    border-radius: .85rem !important;
    flex: 1 1 0;
    margin-left: 0 !important;
    min-width: 7rem;
}

.premium-sale-form .sale-cashback-box > .d-flex {
    align-items: center !important;
}

.premium-sale-form .sale-cashback-box .btn-group {
    margin-left: auto;
}

.premium-submit-bar {
    background: linear-gradient(180deg, color-mix(in srgb, var(--card) 70%, transparent), var(--card));
    border-radius: 0 0 22px 22px;
    margin-top: .25rem;
    padding-bottom: .15rem;
}

.premium-action-button {
    border-radius: 16px;
    box-shadow: 0 16px 34px rgba(15, 23, 42, .12);
    font-weight: 850;
    letter-spacing: .01em;
    min-height: 48px;
}

.premium-sale-form .premium-action-button {
    min-height: 48px;
}

.premium-action-button:hover {
    filter: brightness(1.03);
    transform: translateY(-1px);
}

.premium-workflow-form .alert-light,
.premium-workflow-form .inventory-price-mode-card,
.premium-workflow-form .installment-dates-card,
.premium-workflow-form .sale-form-section-card,
.premium-workflow-form .sale-form-secondary-card,
.premium-workflow-form .whatsapp-sale-box,
.premium-workflow-form .sale-items-builder,
.premium-workflow-form .sale-receipt-card,
.premium-workflow-form .product-color-picker {
    background: linear-gradient(135deg, color-mix(in srgb, var(--card) 86%, var(--surface-soft) 14%), color-mix(in srgb, var(--surface-soft) 76%, var(--card) 24%));
    border-color: var(--line);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .42);
}

.sale-receipt-card {
    border: 1px solid var(--line);
    border-radius: 20px;
    padding: 1rem;
}

.sale-form-section-card,
.sale-form-secondary-card {
    border: 1px solid var(--line);
    border-radius: 20px;
}

.sale-form-section-card {
    padding: 1rem;
}

.sale-form-section-header {
    align-items: flex-start;
    display: flex;
    gap: 1rem;
    justify-content: space-between;
    margin-bottom: 1rem;
}

.sale-form-section-header strong {
    color: var(--text);
    display: block;
    font-size: .98rem;
    font-weight: 900;
    line-height: 1.2;
    margin-bottom: .2rem;
}

.sale-form-section-header p {
    color: var(--muted);
    font-size: .84rem;
    line-height: 1.45;
}

.sale-form-section-badge {
    align-items: center;
    background: color-mix(in srgb, var(--premium-accent) 12%, var(--card) 88%);
    border: 1px solid color-mix(in srgb, var(--premium-accent) 18%, transparent);
    border-radius: 999px;
    color: var(--premium-accent);
    display: inline-flex;
    font-size: .72rem;
    font-weight: 900;
    line-height: 1;
    min-height: 1.9rem;
    padding: .42rem .72rem;
    white-space: nowrap;
}

.sale-form-secondary-card {
    overflow: hidden;
}

.sale-form-secondary-card summary {
    cursor: pointer;
    display: flex;
    flex-direction: column;
    gap: .18rem;
    list-style: none;
    padding: 1rem;
    position: relative;
}

.sale-form-secondary-card summary::-webkit-details-marker {
    display: none;
}

.sale-form-secondary-card summary::after {
    color: var(--muted);
    content: '+';
    font-size: 1.15rem;
    font-weight: 900;
    position: absolute;
    right: 1rem;
    top: 1rem;
}

.sale-form-secondary-card[open] summary::after {
    content: '-';
}

.sale-form-secondary-card summary span {
    color: var(--text);
    font-size: .92rem;
    font-weight: 900;
}

.sale-form-secondary-card summary small {
    color: var(--muted);
    font-size: .82rem;
    line-height: 1.45;
    max-width: calc(100% - 2rem);
}

.sale-form-secondary-card-body {
    border-top: 1px solid color-mix(in srgb, var(--line) 85%, transparent);
    padding: 0 1rem 1rem;
}

.sale-receipt-header {
    align-items: flex-start;
    border-bottom: 1px solid color-mix(in srgb, var(--line) 80%, transparent);
    display: flex;
    gap: 1rem;
    justify-content: space-between;
    margin-bottom: .95rem;
    padding-bottom: .9rem;
}

.sale-receipt-title {
    color: var(--text);
    display: block;
    font-size: 1rem;
    font-weight: 900;
    line-height: 1.2;
    margin-bottom: .18rem;
}

.sale-receipt-status {
    align-items: center;
    background: color-mix(in srgb, #64748b 12%, var(--card) 88%);
    border: 1px solid color-mix(in srgb, #64748b 18%, transparent);
    border-radius: 999px;
    color: color-mix(in srgb, #334155 88%, var(--text) 12%);
    display: inline-flex;
    flex: 0 0 auto;
    font-size: .72rem;
    font-weight: 900;
    justify-content: center;
    line-height: 1;
    min-height: 1.9rem;
    padding: .42rem .72rem;
    white-space: nowrap;
}

.sale-receipt-status[data-status="paid"] {
    background: color-mix(in srgb, #16a34a 14%, var(--card) 86%);
    border-color: color-mix(in srgb, #16a34a 28%, transparent);
    color: #166534;
}

.sale-receipt-status[data-status="partially_paid"] {
    background: color-mix(in srgb, #d97706 14%, var(--card) 86%);
    border-color: color-mix(in srgb, #d97706 28%, transparent);
    color: #92400e;
}

.sale-receipt-grid {
    align-items: end;
    display: grid;
    gap: .85rem;
    grid-template-columns: repeat(4, minmax(0, 1fr));
}

.sale-receipt-field {
    min-width: 0;
}

.sale-receipt-field-wide {
    grid-column: 1 / -1;
}

.sale-receipt-card .form-label {
    margin-bottom: .35rem;
}

.sale-receipt-card .form-control,
.sale-receipt-card .form-select,
.sale-receipt-card .sale-money-group {
    min-height: 2.85rem;
}

.sale-receipt-card .sale-money-group {
    background: color-mix(in srgb, var(--card) 90%, var(--surface-soft) 10%);
    border: 1px solid var(--line);
    border-radius: 14px;
    overflow: hidden;
}

.sale-receipt-card .sale-money-group .form-control,
.sale-receipt-card .sale-money-group .input-group-text {
    background: transparent !important;
    border: 0 !important;
    box-shadow: none;
}

.sale-receipt-card .sale-money-group .sale-money-prefix {
    border-right: 1px solid color-mix(in srgb, var(--line) 86%, transparent) !important;
    color: var(--muted);
}

@media (max-width: 991.98px) {
    .sale-receipt-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

.selection-summary {
    align-items: center;
    background: color-mix(in srgb, var(--surface-soft) 70%, var(--card) 30%);
    border: 1px solid var(--line);
    border-radius: 18px;
    display: flex;
    gap: 1rem;
    justify-content: space-between;
    padding: .9rem 1rem;
}

.selection-summary-sticky {
    position: sticky;
    top: .5rem;
    z-index: 5;
}

.inventory-price-mode-card {
    background: color-mix(in srgb, var(--surface-soft) 70%, var(--card) 30%);
    border: 1px solid var(--line);
    border-radius: 1rem;
    padding: .85rem 1rem;
}

.installment-dates-card {
    background: color-mix(in srgb, var(--surface-soft) 72%, var(--card) 28%);
    border: 1px solid var(--line);
    border-radius: 1rem;
    padding: .9rem 1rem;
}

.installment-dates-card .form-label {
    color: var(--muted);
    font-weight: 800;
    letter-spacing: .04em;
    text-transform: uppercase;
}

.sale-items-builder {
    border: 1px solid var(--line);
    border-radius: 18px;
    padding: .75rem;
}

.premium-sale-form .sale-items-builder {
    border-radius: 22px;
    padding: .95rem;
    position: relative;
}

.premium-sale-form .sale-items-builder::before,
.premium-product-form .product-color-picker::before,
.premium-stock-form .inventory-price-mode-card::before {
    color: var(--muted);
    display: block;
    font-size: .72rem;
    font-weight: 900;
    letter-spacing: .08em;
    margin-bottom: .65rem;
    text-transform: uppercase;
}

.premium-sale-form .sale-items-builder::before {
    content: "Itens da venda";
}

.premium-product-form .product-color-picker::before {
    content: "Variações do produto";
}

.premium-stock-form .inventory-price-mode-card::before {
    content: "Origem dos valores";
}

.sale-item-entry {
    align-items: end;
    display: grid;
    gap: .55rem;
    grid-template-columns: minmax(170px, 1.4fr) minmax(120px, .8fr) 92px 146px 42px;
}

.sale-item-entry > div {
    min-width: 0;
}

.sale-item-entry .form-label {
    align-items: flex-end;
    display: flex;
    font-size: .78rem;
    line-height: 1.15;
    margin-bottom: .25rem;
    min-height: 2.2em;
}

.sale-item-action {
    align-items: flex-end;
    display: flex;
    justify-content: center;
}

.sale-add-item-btn {
    align-items: center;
    display: inline-flex;
    height: 42px;
    justify-content: center;
    margin-top: 0;
    padding: 0;
    width: 42px;
}

.premium-sale-form .sale-add-item-btn {
    background: color-mix(in srgb, var(--surface-soft) 76%, var(--card) 24%);
    border-color: var(--line);
    box-shadow: 0 12px 22px rgba(15, 23, 42, .08);
    color: var(--text);
    min-height: 44px;
}

.premium-sale-form .sale-item-entry:has(.js-sale-variation-wrap.d-none) {
    grid-template-columns: minmax(190px, 1.6fr) minmax(94px, .55fr) minmax(142px, .75fr) 44px;
}

.sale-price-field {
    position: relative;
}

.sale-price-note {
    background: color-mix(in srgb, var(--primary) 12%, transparent);
    border-radius: 999px;
    color: var(--primary);
    display: inline-flex;
    font-size: .7rem;
    font-weight: 800;
    line-height: 1;
    margin-top: .3rem;
    padding: .22rem .45rem;
}

.sale-price-note.d-none {
    display: none !important;
}

.sale-manual-price-input {
    border-color: var(--primary);
    box-shadow: 0 0 0 .18rem color-mix(in srgb, var(--primary) 16%, transparent);
}

.sale-items-list {
    background: color-mix(in srgb, var(--surface-soft) 70%, var(--card) 30%);
    border: 1px solid var(--line);
    border-radius: 16px;
    padding: .55rem;
}

.premium-sale-form .sale-items-list {
    border-radius: 18px;
    overflow: hidden;
}

.premium-sale-form .sale-items-list .table {
    --bs-table-bg: transparent;
}

.sale-items-list .table th,
.sale-items-list .table td {
    font-size: .86rem;
    padding: .35rem .4rem;
    white-space: nowrap;
}

.sale-total-bar {
    align-items: center;
    display: flex;
    gap: 1rem;
    justify-content: space-between;
    padding: .3rem .1rem 0;
}

.premium-sale-form .sale-total-bar {
    background: color-mix(in srgb, var(--surface-soft) 76%, var(--card) 24%);
    border-radius: 14px;
    margin-top: .4rem;
    padding: .75rem .85rem;
}

.sale-total-bar span {
    color: var(--muted);
    font-weight: 700;
}

.sale-total-bar strong {
    color: var(--text);
    font-size: 1.05rem;
}

.premium-sale-form .sale-total-bar strong {
    color: var(--text);
    font-size: 1.22rem;
}

.whatsapp-sale-box {
    background: color-mix(in srgb, var(--surface-soft) 60%, var(--card) 40%);
    border: 1px solid var(--line);
    border-radius: 1rem;
    padding: .95rem;
}

.premium-workflow-form .whatsapp-sale-box {
    border-radius: 20px;
}

.sale-cashback-summary {
    display: grid;
    gap: .55rem;
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

.sale-cashback-summary span {
    background: color-mix(in srgb, var(--card) 78%, transparent);
    border: 1px solid color-mix(in srgb, var(--line) 76%, transparent);
    border-radius: .8rem;
    color: var(--muted);
    font-size: .78rem;
    padding: .62rem .7rem;
}

.sale-cashback-summary strong {
    color: var(--text);
    display: block;
    font-size: .96rem;
    margin-top: .15rem;
}

.whatsapp-connect-card {
    overflow: hidden;
}

.whatsapp-page {
    margin-inline: auto;
    max-width: 1240px;
}

.whatsapp-page-shell {
    display: grid;
    gap: 1rem;
}

.whatsapp-page-header {
    align-items: center;
    background:
        linear-gradient(135deg, color-mix(in srgb, var(--card) 96%, var(--surface-soft) 4%), color-mix(in srgb, var(--card) 88%, var(--surface-soft) 12%));
    border: 1px solid var(--line);
    border-radius: 1.25rem;
    box-shadow: 0 18px 40px rgba(15, 23, 42, .055);
    padding: 1.35rem 1.5rem;
}

.whatsapp-page-kicker,
.whatsapp-section-kicker {
    color: color-mix(in srgb, var(--primary) 72%, var(--text) 28%);
    display: inline-flex;
    font-size: .74rem;
    font-weight: 900;
    letter-spacing: .08em;
    margin-bottom: .35rem;
    text-transform: uppercase;
}

.whatsapp-toolbar .btn,
.whatsapp-toolbar form,
.whatsapp-toolbar form .btn {
    min-height: 42px;
}

.whatsapp-connect-card .card-body {
    padding: 1.35rem;
}

.whatsapp-hero {
    align-items: center;
    background:
        radial-gradient(circle at top left, color-mix(in srgb, var(--primary) 10%, transparent), transparent 36%),
        linear-gradient(135deg, color-mix(in srgb, var(--card) 96%, #ffffff 4%), color-mix(in srgb, var(--surface-soft) 70%, var(--card) 30%));
    border: 1px solid color-mix(in srgb, var(--primary) 18%, var(--line) 82%);
    border-radius: 1rem;
    display: grid;
    gap: 1.75rem;
    grid-template-columns: minmax(0, 1.15fr) minmax(320px, .85fr);
    padding: 1.35rem;
}

.whatsapp-hero.is-code-hidden {
    grid-template-columns: minmax(0, 1fr);
}

.whatsapp-hero-copy {
    padding: .35rem .45rem;
}

.whatsapp-hero-title {
    color: var(--text);
    font-size: clamp(2.1rem, 3vw, 2.8rem);
    line-height: 1.05;
    margin: 0 0 .85rem;
}

.whatsapp-hero-text {
    font-size: 1rem;
    margin-bottom: 0;
}

.whatsapp-pairing-form {
    display: grid;
    gap: .75rem;
    grid-template-columns: minmax(0, 1fr) auto;
    margin-top: 1.25rem;
}

.whatsapp-pairing-form .form-control,
.whatsapp-pairing-form .btn {
    min-height: 52px;
}

.whatsapp-step-list {
    display: grid;
    gap: .95rem;
}

.whatsapp-step-item {
    align-items: flex-start;
    display: grid;
    gap: .85rem;
    grid-template-columns: 1.7rem minmax(0, 1fr);
}

.whatsapp-step-item span {
    align-items: center;
    border: 1px solid color-mix(in srgb, var(--text) 28%, var(--line) 72%);
    border-radius: 999px;
    color: var(--text);
    display: inline-flex;
    font-size: .88rem;
    height: 1.7rem;
    justify-content: center;
    margin-top: .08rem;
    width: 1.7rem;
}

.whatsapp-step-item strong {
    color: var(--text);
    display: block;
    font-size: 1rem;
    margin-bottom: .22rem;
}

.whatsapp-step-item small {
    color: var(--muted);
    display: block;
    font-size: .95rem;
    line-height: 1.45;
}

.whatsapp-help-link {
    align-items: center;
    background: transparent;
    border: 0;
    color: #0b7a44;
    display: inline-flex;
    font-size: 1.02rem;
    font-weight: 700;
    gap: .35rem;
    margin-top: 1.25rem;
    padding: 0;
    text-decoration: underline;
    text-underline-offset: .2rem;
}

.whatsapp-help-link:hover,
.whatsapp-help-link:focus-visible {
    color: #085e34;
}

.whatsapp-hero-side {
    display: flex;
    min-height: 100%;
}

.whatsapp-code-stage {
    display: flex;
    flex: 1 1 auto;
}

.whatsapp-code-card {
    align-items: center;
    background: #fff;
    border: 1px solid color-mix(in srgb, var(--text) 14%, var(--line) 86%);
    border-radius: .95rem;
    box-shadow: 0 18px 40px rgba(15, 23, 42, .08);
    display: grid;
    gap: .7rem;
    justify-items: center;
    min-height: 100%;
    padding: 1.6rem;
    text-align: center;
    width: 100%;
}

.whatsapp-code-card i {
    color: var(--primary);
    font-size: 3.2rem;
}

.whatsapp-code-card strong {
    color: var(--text);
    font-size: 1.2rem;
}

.whatsapp-code-card small {
    color: var(--muted);
    display: block;
    font-size: .96rem;
    line-height: 1.5;
    max-width: 24rem;
}

.whatsapp-code-caption {
    color: var(--muted);
    display: block;
    font-size: .92rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .08em;
}

.whatsapp-code-value {
    color: var(--text);
    font-family: "Plus Jakarta Sans", var(--font-sans);
    font-size: clamp(2.3rem, 6vw, 3.5rem);
    letter-spacing: .18em;
    line-height: 1;
}

.whatsapp-code-card.is-success {
    background: color-mix(in srgb, var(--card) 88%, var(--surface-soft) 12%);
}

.whatsapp-connected-number {
    align-items: center;
    background: color-mix(in srgb, var(--surface-soft) 72%, var(--card) 28%);
    border: 1px solid var(--line);
    border-radius: 999px;
    color: var(--text);
    display: inline-flex;
    font-size: .9rem;
    font-weight: 700;
    gap: .45rem;
    padding: .45rem .75rem;
}

.whatsapp-connected-number::before {
    background: #16a34a;
    border-radius: 999px;
    box-shadow: 0 0 0 4px color-mix(in srgb, #16a34a 14%, transparent);
    content: "";
    height: .55rem;
    width: .55rem;
}

.whatsapp-connected-number.is-disconnected::before {
    background: var(--muted);
    opacity: .35;
}

.whatsapp-qr-box {
    align-items: center;
    background:
        radial-gradient(circle at top, color-mix(in srgb, var(--primary) 10%, transparent), transparent 34%),
        color-mix(in srgb, var(--surface-soft) 72%, var(--card) 28%);
    border: 1px dashed color-mix(in srgb, var(--primary) 35%, var(--line) 65%);
    border-radius: .95rem;
    display: flex;
    justify-content: center;
    min-height: 360px;
    padding: 1.25rem;
}

.whatsapp-qr-box img {
    background: #fff;
    border-radius: 1rem;
    box-shadow: 0 18px 44px rgba(15, 23, 42, .12);
    display: block;
    max-width: min(320px, 100%);
    padding: .75rem;
    width: 100%;
}

.whatsapp-state-success,
.whatsapp-state-empty {
    align-items: center;
    color: var(--muted);
    display: grid;
    gap: .55rem;
    justify-items: center;
    text-align: center;
}

.whatsapp-state-success i,
.whatsapp-state-empty i {
    color: var(--primary);
    font-size: 3rem;
}

.whatsapp-state-success strong,
.whatsapp-state-empty strong {
    color: var(--text);
    font-size: 1.1rem;
}

.whatsapp-pairing-panel {
    background: color-mix(in srgb, var(--surface-soft) 72%, var(--card) 28%);
    border: 1px solid var(--line);
    border-radius: 1.1rem;
    padding: 1rem;
}

.whatsapp-pairing-panel.is-primary {
    background:
        radial-gradient(circle at top left, color-mix(in srgb, var(--primary) 13%, transparent), transparent 42%),
        color-mix(in srgb, var(--surface-soft) 76%, var(--card) 24%);
    border-color: color-mix(in srgb, var(--primary) 26%, var(--line) 74%);
}

.whatsapp-card-divider {
    border-top: 1px solid var(--line);
    margin: 1.25rem 0;
}

.whatsapp-template-section .card-body {
    padding: 1.4rem;
}

.wa-safety-form-grid {
    display: grid;
    gap: 1rem;
    grid-template-columns: 1.15fr 1fr 1fr;
}

.wa-safety-group {
    background: color-mix(in srgb, var(--surface-soft) 72%, var(--card) 28%);
    border: 1px solid var(--line);
    border-radius: 1rem;
    min-width: 0;
    padding: 1rem;
}

.wa-safety-group legend {
    align-items: center;
    color: var(--text);
    display: flex;
    font-size: .92rem;
    font-weight: 800;
    gap: .5rem;
    margin: 0 0 .9rem;
    width: auto;
}

.wa-safety-group legend i {
    color: var(--primary);
}

.wa-safety-fields {
    align-items: start;
    display: grid;
    gap: .8rem;
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.wa-safety-fields > div {
    display: grid;
    grid-template-rows: 2.75rem auto 1.15rem;
    min-width: 0;
}

.wa-safety-fields.three {
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

.wa-safety-fields .form-label {
    align-items: flex-end;
    display: flex;
    font-size: .82rem;
    font-weight: 700;
    line-height: 1.2;
    margin: 0;
    padding-bottom: .4rem;
}

.wa-safety-fields .form-text {
    font-size: .72rem;
}

.wa-safety-form-footer {
    align-items: center;
    background: color-mix(in srgb, var(--primary) 5%, var(--card) 95%);
    border: 1px solid color-mix(in srgb, var(--primary) 16%, var(--line) 84%);
    border-radius: 1rem;
    display: flex;
    gap: 1rem;
    justify-content: space-between;
    margin-top: 1rem;
    padding: .9rem 1rem;
}

.wa-safety-consent .form-check-label {
    display: grid;
    gap: .1rem;
}

.wa-safety-consent small {
    color: var(--muted);
    font-size: .76rem;
}

@media (max-width: 1080px) {
    .wa-safety-form-grid {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 575.98px) {
    .wa-safety-fields,
    .wa-safety-fields.three {
        grid-template-columns: 1fr;
    }

    .wa-safety-form-footer {
        align-items: stretch;
        flex-direction: column;
    }

    .wa-safety-fields .form-label {
        padding-bottom: .4rem;
    }

    .wa-safety-fields > div {
        grid-template-rows: auto auto auto;
    }
}

.whatsapp-section-head {
    border-bottom: 1px solid var(--line);
    padding-bottom: 1rem;
}

.whatsapp-template-grid {
    display: grid;
    gap: 1.1rem;
}

.whatsapp-template-group {
    display: grid;
    gap: .85rem;
}

.whatsapp-template-group-head {
    align-items: center;
    display: flex;
    gap: .75rem;
}

.whatsapp-template-group-head > span {
    align-items: center;
    background: color-mix(in srgb, var(--primary) 10%, var(--card) 90%);
    border: 1px solid color-mix(in srgb, var(--primary) 18%, var(--line) 82%);
    border-radius: .8rem;
    color: var(--primary);
    display: inline-flex;
    height: 2.45rem;
    justify-content: center;
    width: 2.45rem;
}

.whatsapp-template-group-head h3 {
    color: var(--text);
    font-size: .98rem;
    font-weight: 900;
    margin: 0;
}

.whatsapp-template-group-head small {
    color: var(--muted);
    display: block;
    font-weight: 700;
}

.whatsapp-template-card-grid {
    display: grid;
    gap: .9rem;
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.whatsapp-template-card {
    background: color-mix(in srgb, var(--card) 97%, var(--surface-soft) 3%);
    border: 1px solid var(--line);
    border-radius: .9rem;
    box-shadow: 0 10px 24px rgba(15, 23, 42, .035);
    display: grid;
    gap: .75rem;
    min-height: 14rem;
    padding: .95rem;
}

.whatsapp-template-card-top,
.whatsapp-template-card-footer {
    align-items: center;
    display: flex;
    justify-content: space-between;
    gap: .75rem;
}

.whatsapp-template-icon {
    align-items: center;
    background: color-mix(in srgb, var(--primary) 10%, var(--card) 90%);
    border: 1px solid color-mix(in srgb, var(--primary) 20%, var(--line) 80%);
    border-radius: .75rem;
    color: var(--primary);
    display: inline-flex;
    flex: 0 0 auto;
    height: 2.35rem;
    justify-content: center;
    width: 2.35rem;
}

.whatsapp-template-pill {
    background: color-mix(in srgb, var(--surface-soft) 70%, var(--card) 30%);
    border: 1px solid var(--line);
    border-radius: 999px;
    color: var(--muted);
    font-size: .72rem;
    font-weight: 900;
    padding: .28rem .55rem;
}

.whatsapp-template-card h4 {
    color: var(--text);
    font-size: 1rem;
    font-weight: 900;
    margin: 0;
}

.whatsapp-template-card p {
    color: var(--muted);
    font-size: .86rem;
    line-height: 1.38;
    margin: 0;
}

.whatsapp-template-card .btn-sm {
    border-radius: .65rem;
    font-weight: 800;
}

.whatsapp-template-card-footer {
    margin-top: auto;
}

.whatsapp-template-card-footer > span {
    color: var(--muted);
    font-size: .78rem;
    font-weight: 800;
}

.whatsapp-variable-row {
    display: flex;
    flex-wrap: wrap;
    gap: .35rem;
}

.whatsapp-variable-row .btn {
    background: color-mix(in srgb, var(--card) 94%, var(--surface-soft) 6%);
    border-color: color-mix(in srgb, var(--primary) 28%, var(--line) 72%);
    color: color-mix(in srgb, var(--text) 78%, var(--primary) 22%);
    transition: background-color .16s ease, border-color .16s ease, color .16s ease, box-shadow .16s ease, transform .16s ease;
}

.whatsapp-variable-row .btn:hover,
.whatsapp-variable-row .btn:focus-visible {
    background: var(--primary);
    border-color: var(--primary);
    box-shadow: 0 .45rem 1rem color-mix(in srgb, var(--primary) 22%, transparent);
    color: #ffffff;
    transform: translateY(-1px);
}

.whatsapp-variable-row .btn:active {
    background: var(--primary-hover);
    border-color: var(--primary-hover);
    color: #ffffff;
    transform: translateY(0);
}

.whatsapp-template-preview {
    background: color-mix(in srgb, var(--surface-soft) 70%, var(--card) 30%);
    border: 1px solid var(--line);
    border-radius: .8rem;
    min-height: 5rem;
    padding: .85rem;
}

.whatsapp-template-preview.compact {
    color: var(--muted);
    display: -webkit-box;
    font-size: .82rem;
    line-height: 1.42;
    max-height: 5.6rem;
    min-height: 5.6rem;
    overflow: hidden;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 4;
}

.whatsapp-template-editor-modal .modal-dialog {
    margin: 0 0 0 auto;
    max-width: min(980px, calc(100vw - 1.25rem));
    min-height: 100vh;
}

.whatsapp-template-editor-modal .modal-content {
    border-radius: 1rem 0 0 1rem;
    min-height: 100vh;
}

.whatsapp-template-editor-modal.fade .modal-dialog {
    transform: translate3d(32px, 0, 0);
}

.whatsapp-template-editor-modal.show .modal-dialog {
    transform: translate3d(0, 0, 0);
}

.whatsapp-template-editor-title {
    align-items: center;
    display: flex;
    gap: .85rem;
}

.whatsapp-editor-layout {
    display: grid;
    gap: 1rem;
    grid-template-columns: minmax(0, 1.2fr) minmax(290px, .8fr);
}

.whatsapp-editor-main textarea.form-control {
    min-height: 26rem;
    resize: vertical;
}

.whatsapp-editor-preview-panel {
    background: color-mix(in srgb, var(--surface-soft) 66%, var(--card) 34%);
    border: 1px solid var(--line);
    border-radius: .9rem;
    padding: .9rem;
}

.whatsapp-template-preview.editor {
    background: var(--card);
    font-size: .9rem;
    line-height: 1.48;
    max-height: calc(100vh - 20rem);
    min-height: 25rem;
    overflow: auto;
}

.whatsapp-secondary-method .btn {
    align-items: center;
    display: flex;
    gap: .75rem;
}

.whatsapp-pairing-result {
    align-items: center;
    background: var(--card);
    border: 1px solid color-mix(in srgb, var(--primary) 24%, var(--line) 76%);
    border-radius: 1rem;
    display: grid;
    gap: .35rem;
    padding: .9rem;
    text-align: center;
}

.whatsapp-pairing-result strong {
    color: var(--primary);
    font-family: "Plus Jakarta Sans", var(--font-sans);
    font-size: clamp(1.7rem, 4vw, 2.4rem);
    letter-spacing: .14em;
}

.whatsapp-instructions-modal .modal-body {
    background: color-mix(in srgb, var(--surface-soft) 52%, var(--card) 48%);
}

.whatsapp-instructions-modal .modal-header,
.whatsapp-instructions-modal .modal-footer {
    background: color-mix(in srgb, var(--card) 84%, var(--surface-soft) 16%);
}

@media (min-width: 992px) {
    .whatsapp-connect-card .card-body {
        padding: 1.6rem;
    }
}

@media (max-width: 991.98px) {
    .whatsapp-hero {
        grid-template-columns: 1fr;
    }

    .whatsapp-template-card-grid,
    .whatsapp-editor-layout {
        grid-template-columns: 1fr;
    }

    .whatsapp-template-editor-modal .modal-dialog {
        max-width: 100vw;
    }

    .whatsapp-template-editor-modal .modal-content {
        border-radius: 0;
    }
}

@media (max-width: 576px) {
    .whatsapp-connected-number {
        width: 100%;
    }

    .whatsapp-pairing-form {
        grid-template-columns: 1fr;
    }

    .whatsapp-code-card {
        padding: 1.25rem;
    }

    .whatsapp-code-value {
        font-size: 2.2rem;
        letter-spacing: .12em;
    }

    .whatsapp-template-card-footer {
        align-items: stretch;
        flex-direction: column;
    }

    .whatsapp-template-card-footer .d-flex,
    .whatsapp-template-card-footer .btn {
        width: 100%;
    }
}

.terms-accept-page {
    margin-inline: auto;
    max-width: 980px;
}

.terms-card {
    overflow: hidden;
}

.terms-document {
    background: color-mix(in srgb, var(--surface-soft) 64%, var(--card) 36%);
    max-height: min(60vh, 640px);
    overflow: auto;
}

.terms-document h3 {
    font-size: 1rem;
    font-weight: 800;
    margin-top: 1.2rem;
}

.terms-document p {
    color: var(--muted);
    font-size: .95rem;
}

html[data-theme='dark'] .whatsapp-sale-box {
    background: #050505;
}

html[data-theme='dark'] .premium-workflow-panel {
    --premium-panel-bg: #131517;
    --premium-card-bg: #171a1d;
    --premium-accent-soft: #1d2126;
}

html[data-theme='dark'] .premium-workflow-panel.offcanvas.offcanvas-end {
    box-shadow: -24px 0 80px rgba(0, 0, 0, .45);
}

html[data-theme='dark'] .premium-workflow-panel .offcanvas-header {
    background: linear-gradient(135deg, #171a1d, #101214);
    border-bottom-color: #2a3036;
}

html[data-theme='dark'] .premium-workflow-panel .offcanvas-header::after {
    background: #2a3036;
}

html[data-theme='dark'] .premium-workflow-panel .offcanvas-header .badge {
    background: #1a1f24 !important;
    border-color: #2a3036;
    color: #ffffff !important;
}

html[data-theme='dark'] .premium-workflow-panel .offcanvas-body,
html[data-theme='dark'] .premium-workflow-form {
    background: #131517;
    border-color: #2a3036;
    box-shadow: none;
}

html[data-theme='dark'] .premium-flow-hero,
html[data-theme='dark'] .premium-workflow-form .alert-light,
html[data-theme='dark'] .premium-workflow-form .inventory-price-mode-card,
html[data-theme='dark'] .premium-workflow-form .installment-dates-card,
html[data-theme='dark'] .premium-workflow-form .sale-form-section-card,
html[data-theme='dark'] .premium-workflow-form .sale-form-secondary-card,
html[data-theme='dark'] .premium-workflow-form .whatsapp-sale-box,
html[data-theme='dark'] .premium-workflow-form .sale-items-builder,
html[data-theme='dark'] .premium-workflow-form .sale-receipt-card,
html[data-theme='dark'] .premium-workflow-form .product-color-picker,
html[data-theme='dark'] .sale-items-list,
html[data-theme='dark'] .premium-sale-form .sale-total-bar,
html[data-theme='dark'] .sale-cashback-summary span {
    background: #1a1d21;
    border-color: #2f363d;
    box-shadow: none;
}

html[data-theme='dark'] .premium-flow-hero-icon,
html[data-theme='dark'] .sale-add-item-btn,
html[data-theme='dark'] .sale-price-note {
    background: #111418;
    border-color: #2f363d;
    color: #e6edf3;
    box-shadow: none;
}

html[data-theme='dark'] .premium-flow-hero strong,
html[data-theme='dark'] .sale-receipt-title,
html[data-theme='dark'] .sale-total-bar strong,
html[data-theme='dark'] .sale-cashback-summary strong,
html[data-theme='dark'] .installment-dates-card strong {
    color: #ffffff;
}

html[data-theme='dark'] .premium-flow-hero span,
html[data-theme='dark'] .premium-workflow-form .form-text,
html[data-theme='dark'] .premium-workflow-form .text-muted,
html[data-theme='dark'] .sale-total-bar span,
html[data-theme='dark'] .sale-cashback-summary span,
html[data-theme='dark'] .installment-dates-card .form-label {
    color: #b8c3ca !important;
}

html[data-theme='dark'] .premium-workflow-form .form-control,
html[data-theme='dark'] .premium-workflow-form .form-select,
html[data-theme='dark'] .premium-workflow-form .searchable-select-toggle,
html[data-theme='dark'] .premium-workflow-form .bg-light {
    background: #090b0d !important;
    border-color: #2f363d;
    color: #ffffff !important;
}

html[data-theme='dark'] .premium-workflow-form .form-control::placeholder {
    color: #8e99a3;
}

html[data-theme='dark'] .sale-receipt-header,
html[data-theme='dark'] .sale-receipt-card .sale-money-group,
html[data-theme='dark'] .sale-receipt-card .sale-money-group .sale-money-prefix {
    border-color: #2f363d !important;
}

html[data-theme='dark'] .sale-receipt-card .sale-money-group {
    background: #090b0d;
}

html[data-theme='dark'] .sale-receipt-status {
    background: #111418;
    border-color: #2f363d;
    color: #d8e0e7;
}

html[data-theme='dark'] .sale-receipt-status[data-status="paid"] {
    background: rgba(22, 163, 74, .16);
    border-color: rgba(34, 197, 94, .3);
    color: #86efac;
}

html[data-theme='dark'] .sale-receipt-status[data-status="partially_paid"] {
    background: rgba(217, 119, 6, .16);
    border-color: rgba(245, 158, 11, .3);
    color: #fcd34d;
}

html[data-theme='dark'] .searchable-select-menu {
    background: #111418;
    border-color: #2f363d;
    box-shadow: 0 18px 34px rgba(0, 0, 0, .35);
}

html[data-theme='dark'] .searchable-select-option {
    color: #ffffff;
}

html[data-theme='dark'] .searchable-select-option:hover,
html[data-theme='dark'] .searchable-select-option.is-selected {
    background: #1c232a;
}

html[data-theme='dark'] .searchable-select-empty {
    color: #b8c3ca;
}

html[data-theme='dark'] #xmlImportHistoryPanel .accordion-item,
html[data-theme='dark'] #xmlImportHistoryPanel .accordion-button,
html[data-theme='dark'] #xmlImportHistoryPanel .accordion-body {
    background: #111315;
    border-color: #2a3036;
    color: #ffffff;
}

html[data-theme='dark'] #xmlImportHistoryPanel .accordion-button:not(.collapsed) {
    background: #182331;
}

html[data-theme='dark'] #xmlImportHistoryPanel .accordion-button::after {
    filter: invert(1) grayscale(100%);
}

html[data-theme='dark'] #xmlImportHistoryPanel .metric-card {
    background: #12161a;
    border-color: #2f363d;
    box-shadow: none;
}

html[data-theme='dark'] #xmlImportHistoryPanel .metric-card span,
html[data-theme='dark'] #xmlImportHistoryPanel .text-muted,
html[data-theme='dark'] #xmlImportHistoryPanel .small {
    color: #b8c3ca !important;
}

html[data-theme='dark'] #xmlImportHistoryPanel .metric-card strong,
html[data-theme='dark'] #xmlImportHistoryPanel .accordion-button .fw-semibold,
html[data-theme='dark'] #xmlImportHistoryPanel tbody strong {
    color: #ffffff;
}

html[data-theme='dark'] #xmlImportHistoryPanel .badge.text-bg-light {
    background: #161a1e !important;
    border: 1px solid #2f363d;
    color: #ffffff !important;
}

html[data-theme='dark'] #xmlImportHistoryPanel .badge.text-bg-success {
    background: rgba(25, 135, 84, .2) !important;
    border: 1px solid rgba(25, 135, 84, .34);
    color: #d8ffe8 !important;
}

html[data-theme='dark'] #xmlImportHistoryPanel .badge.text-bg-info {
    background: rgba(13, 202, 240, .18) !important;
    border: 1px solid rgba(13, 202, 240, .32);
    color: #d7f8ff !important;
}

html[data-theme='dark'] #xmlImportHistoryPanel .table-responsive > .responsive-card-table tr,
html[data-theme='dark'] #xmlImportHistoryPanel .table-responsive > .table tr,
html[data-theme='dark'] #xmlImportHistoryPanel .table thead th,
html[data-theme='dark'] #xmlImportHistoryPanel .table td {
    background: #0f1113;
    border-color: #2a3036;
    color: #ffffff;
    box-shadow: none;
}

html[data-theme='dark'] .premium-submit-bar {
    background: linear-gradient(180deg, rgba(19, 21, 23, .2), #131517);
}

html[data-theme='dark'] .premium-action-button {
    box-shadow: none;
}

html[data-theme='dark'] .premium-workflow-form .btn-light,
html[data-theme='dark'] .premium-workflow-form .btn-outline-secondary {
    background: #12161a !important;
    border-color: #2f363d !important;
    color: #ffffff !important;
}

html[data-theme='dark'] .whatsapp-qr-box {
    background: #050505;
}

html[data-theme='dark'] .whatsapp-hero {
    background: linear-gradient(135deg, #111315, #0b0d0f);
    border-color: var(--line);
}

html[data-theme='dark'] .whatsapp-page-header,
html[data-theme='dark'] .whatsapp-template-card,
html[data-theme='dark'] .whatsapp-template-preview {
    background: #111315;
    border-color: var(--line);
    box-shadow: none;
}

html[data-theme='dark'] .whatsapp-template-group-head > span,
html[data-theme='dark'] .whatsapp-template-icon,
html[data-theme='dark'] .whatsapp-template-pill,
html[data-theme='dark'] .whatsapp-editor-preview-panel {
    background: #0b0d0f;
    border-color: var(--line);
}

html[data-theme='dark'] .whatsapp-code-card {
    background: #050505;
    border-color: var(--line);
    box-shadow: none;
}

html[data-theme='dark'] .whatsapp-instructions-modal .modal-body,
html[data-theme='dark'] .whatsapp-instructions-modal .modal-header,
html[data-theme='dark'] .whatsapp-instructions-modal .modal-footer,
html[data-theme='dark'] .whatsapp-template-editor-modal .modal-body,
html[data-theme='dark'] .whatsapp-template-editor-modal .modal-header,
html[data-theme='dark'] .whatsapp-template-editor-modal .modal-footer {
    background: #050505;
}

.sales-toolbar-actions {
    align-items: center;
    justify-content: flex-end;
}

.sales-filter-form {
    align-items: center;
    display: grid;
    gap: .5rem;
    grid-template-columns: minmax(220px, 1.35fr) minmax(160px, .75fr) minmax(180px, .9fr) minmax(180px, .9fr) minmax(112px, auto);
}

.sales-filter-form .form-control,
.sales-filter-form .form-select,
.sales-filter-form .btn {
    min-height: 42px;
}

.sales-filter-form .btn,
.sales-toolbar-actions > .btn {
    align-items: center;
    justify-content: center;
    white-space: nowrap;
}

.sales-filter-form .btn {
    display: inline-flex;
}

.sales-toolbar-actions > .btn {
    flex: 0 0 auto;
}

.sale-contact-panel {
    --bs-offcanvas-width: 100vw;
    border-left: 0;
    box-shadow: -24px 0 70px rgba(3, 27, 32, .16);
    max-width: 100vw;
    z-index: 2305;
}

.offcanvas.offcanvas-end.sale-contact-panel {
    bottom: 0;
    left: 0;
    top: 0;
    width: 100vw !important;
}

body:has(.sale-contact-panel.show) .offcanvas-backdrop {
    --bs-backdrop-zindex: 2295;
}

.sale-contact-panel .offcanvas-header {
    align-items: flex-start;
    border-bottom: 1px solid var(--line);
    padding: 1rem clamp(1rem, 3vw, 2rem) .85rem;
}

.sale-contact-panel .offcanvas-body {
    padding: .9rem clamp(1rem, 3vw, 2rem) 1.1rem;
}

.sale-contact-panel-footer {
    align-items: center;
    background: color-mix(in srgb, var(--card) 86%, var(--surface-soft) 14%);
    border-top: 1px solid var(--line);
    display: flex;
    gap: .85rem;
    justify-content: space-between;
    padding: 1rem clamp(1rem, 3vw, 2rem);
}

.sale-contact-source-alert {
    align-items: flex-start;
    background: color-mix(in srgb, var(--surface-soft) 72%, var(--card) 28%);
    border: 1px solid var(--line);
    border-radius: 1rem;
    display: flex;
    gap: 1rem;
    justify-content: space-between;
    padding: .75rem .85rem;
}

.sale-contact-source-alert strong {
    color: var(--text);
    display: block;
    font-size: .95rem;
    margin-bottom: .15rem;
}

.sale-contact-source-alert p {
    color: var(--muted);
    font-size: .86rem;
    line-height: 1.45;
}

.sale-contact-web-qr {
    align-items: center;
    background: var(--card);
    border: 1px solid var(--line);
    border-radius: 1rem;
    display: flex;
    gap: 1rem;
    justify-content: space-between;
    padding: .85rem 1rem;
}

.sale-contact-web-qr img {
    border: 1px solid var(--line);
    border-radius: .75rem;
    height: 132px;
    width: 132px;
}

.sale-contact-results {
    display: grid;
    gap: .55rem;
    max-height: calc(100dvh - 285px);
    min-height: 160px;
    overflow: auto;
    padding-right: .15rem;
}

.sale-contact-loading {
    align-items: center;
    background: linear-gradient(135deg, color-mix(in srgb, var(--primary) 8%, var(--card) 92%), var(--card));
    border: 1px solid color-mix(in srgb, var(--primary) 14%, var(--line) 86%);
    border-radius: 1rem;
    box-shadow: 0 16px 40px rgba(3, 27, 32, .08);
    color: var(--text);
    display: flex;
    gap: .85rem;
    margin-top: 1rem;
    padding: .85rem 1rem;
}

.sale-contact-loading .spinner-border {
    color: var(--primary);
    height: 1.15rem;
    width: 1.15rem;
}

.sale-contact-loading strong,
.sale-contact-loading small {
    display: block;
}

.sale-contact-loading strong {
    font-size: .9rem;
    font-weight: 900;
}

.sale-contact-loading small {
    color: var(--muted);
    font-size: .8rem;
}

.sale-contact-result {
    align-items: center;
    background: var(--card);
    border: 1px solid var(--line);
    border-radius: .95rem;
    display: flex;
    gap: .8rem;
    justify-content: space-between;
    padding: .75rem .85rem;
}

.sale-contact-avatar {
    align-items: center;
    background: color-mix(in srgb, #cbd5e1 36%, var(--surface-soft) 64%);
    border: 1px solid color-mix(in srgb, #94a3b8 28%, var(--line) 72%);
    border-radius: 999px;
    color: #94a3b8;
    display: inline-flex;
    flex: 0 0 50px;
    font-size: 1.7rem;
    font-weight: 900;
    height: 50px;
    justify-content: center;
    overflow: hidden;
    width: 50px;
}

.sale-contact-avatar-placeholder {
    position: relative;
}

.sale-contact-avatar-placeholder::after {
    border: 2px solid rgba(255, 255, 255, .92);
    border-radius: 999px;
    bottom: -17px;
    content: "";
    height: 34px;
    left: 50%;
    position: absolute;
    transform: translateX(-50%);
    width: 54px;
}

.sale-contact-avatar-placeholder i {
    color: rgba(255, 255, 255, .95);
    font-size: 1.35rem;
    position: relative;
    top: -.18rem;
    z-index: 1;
}

.sale-contact-avatar img {
    height: 100%;
    object-fit: cover;
    width: 100%;
}

.sale-contact-result-main {
    flex: 1 1 auto;
    min-width: 0;
}

.sale-contact-result strong,
.sale-contact-result span,
.sale-contact-result em {
    display: block;
}

.sale-contact-result strong {
    color: var(--text);
    font-weight: 800;
}

.sale-contact-result span,
.sale-contact-empty,
.sale-contact-section-title {
    color: var(--muted);
    font-size: .86rem;
}

.sale-contact-source-badge {
    background: color-mix(in srgb, var(--primary) 9%, transparent);
    border: 1px solid color-mix(in srgb, var(--primary) 16%, transparent);
    border-radius: 999px;
    color: color-mix(in srgb, var(--primary) 72%, var(--text) 28%);
    display: inline-flex !important;
    font-size: .72rem;
    font-style: normal;
    font-weight: 900;
    letter-spacing: .08em;
    margin-top: .2rem;
    padding: .12rem .42rem;
    text-transform: uppercase;
    width: fit-content;
}

.sale-contact-customer-note {
    color: var(--success);
    display: block;
    font-size: .75rem;
    font-weight: 800;
    margin-top: .2rem;
}

.sale-contact-result-actions {
    display: flex;
    flex: 0 0 auto;
    gap: .45rem;
}

.sale-contact-empty {
    background: color-mix(in srgb, var(--surface-soft) 72%, var(--card) 28%);
    border: 1px dashed var(--line);
    border-radius: .95rem;
    padding: 1rem;
    text-align: center;
}

.sale-contact-section-title {
    font-size: .74rem;
    font-weight: 900;
    letter-spacing: .12em;
    margin: .35rem 0 .15rem;
    text-transform: uppercase;
}

.sales-table-wrap {
    overflow-x: auto;
}

.sales-table {
    min-width: 1040px;
}

.sales-table th {
    color: var(--muted);
    font-size: .72rem;
    line-height: 1.1;
    overflow-wrap: normal;
    white-space: nowrap;
    word-break: keep-all;
}

.sales-table td {
    overflow-wrap: normal;
    padding: .52rem .48rem;
    vertical-align: middle;
    word-break: normal;
}

.sales-table .sales-date,
.sales-table .sales-payment,
.sales-table .money-cell,
.sales-table .table-actions,
.sales-table .badge {
    white-space: nowrap;
}

.sales-table .badge {
    display: inline-flex;
    justify-content: center;
    line-height: 1.1;
    max-width: none;
    min-width: 74px;
    overflow-wrap: normal;
    word-break: keep-all;
}

.sales-table .table-truncate-sm {
    max-width: 132px;
}

.sales-table .table-truncate-lg {
    max-width: 210px;
}

.searchable-select {
    position: relative;
}

.inventory-toolbar,
.inventory-toolbar-actions,
.inventory-toolbar-filter,
.inventory-action-bar {
    min-width: 0;
}

.inventory-toolbar-filter > .form-control,
.inventory-toolbar-filter > .form-select,
.inventory-toolbar-filter > .searchable-select,
.inventory-toolbar-filter > select.js-searchable-select {
    max-width: 100%;
    min-width: 0;
}

.inventory-toolbar-filter > select.js-searchable-select,
.inventory-toolbar-filter .searchable-select {
    flex: 2 1 240px;
    min-width: min(100%, 220px);
}

.inventory-toolbar-filter > input[type="month"] {
    flex: 0 1 156px;
}

.inventory-toolbar-filter > select[name="origin_id"],
.inventory-toolbar-filter > select[name="context_id"],
.inventory-toolbar-filter > select[name="stock_view"] {
    flex: 1 1 170px;
}

.inventory-toolbar-filter > select.js-searchable-select:not(.searchable-select-native) {
    min-height: 42px;
}

.inventory-toolbar-actions {
    flex: 1 1 920px;
    justify-content: flex-end;
    max-width: 100%;
}

.inventory-toolbar-filter {
    flex: 1 1 760px;
    flex-wrap: wrap;
    justify-content: flex-end;
    max-width: 100%;
}

.inventory-action-bar {
    display: flex;
    flex: 1 1 100%;
    flex-wrap: wrap;
    gap: .5rem;
    justify-content: flex-end;
    max-width: 100%;
}

.inventory-action-bar > .btn,
.inventory-action-bar .dropdown > .btn {
    min-height: 42px;
    border-radius: .82rem;
    font-weight: 800;
    white-space: nowrap;
}

@media (max-width: 1280px) and (min-width: 576px) {
    .inventory-toolbar {
        align-items: flex-start !important;
    }

    .inventory-toolbar-actions {
        flex: 1 1 100%;
        width: 100%;
    }

    .inventory-toolbar-filter,
    .inventory-action-bar {
        justify-content: flex-start;
    }

    .inventory-action-bar .dropdown,
    .inventory-action-bar > .btn {
        flex: 0 1 auto;
        max-width: 100%;
    }
}

.inventory-action-menu {
    min-width: 15rem;
    padding: .4rem;
}

.inventory-action-menu .dropdown-item {
    min-height: 2.45rem;
    border-radius: .55rem;
    font-weight: 750;
}

.inventory-action-menu .dropdown-item i {
    color: var(--muted);
}

.searchable-select-native {
    height: 1px !important;
    left: 0;
    opacity: 0;
    pointer-events: none;
    position: absolute !important;
    top: 0;
    width: 1px !important;
}

.searchable-select-toggle {
    align-items: center;
    display: flex;
    min-height: 42px;
    overflow: hidden;
    padding-right: 2.25rem;
    text-align: left;
    width: 100%;
}

.searchable-select-label {
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.searchable-select-menu {
    background: var(--card);
    border: 1px solid var(--line);
    border-radius: 14px;
    box-shadow: var(--shadow-soft);
    display: none;
    left: 0;
    margin-top: .35rem;
    padding: .45rem;
    position: absolute;
    right: 0;
    top: 100%;
    z-index: 2300;
}

.searchable-select.is-open .searchable-select-menu {
    display: block;
}

.searchable-select-search {
    margin-bottom: .4rem;
}

.searchable-select-options {
    max-height: 220px;
    overflow-y: auto;
}

.searchable-select-option {
    background: transparent;
    border: 0;
    border-radius: 10px;
    color: var(--text);
    display: block;
    padding: .5rem .55rem;
    text-align: left;
    width: 100%;
}

.searchable-select-option:hover,
.searchable-select-option.is-selected {
    background: color-mix(in srgb, var(--primary) 12%, transparent);
}

.searchable-select-empty {
    color: var(--muted);
    font-size: .9rem;
    padding: .65rem;
    text-align: center;
}

.consignees-page-header,
.consignees-header-actions,
.consignees-filter-form {
    min-width: 0;
}

.consignees-table-wrap {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

@media (min-width: 992px) {
    .consignees-header-actions {
        align-items: center;
        flex-wrap: nowrap !important;
        justify-content: flex-end;
        max-width: 100%;
        overflow-x: auto;
        padding-bottom: .15rem;
        scrollbar-width: thin;
    }

    .consignees-header-actions::-webkit-scrollbar {
        height: 6px;
    }

    .consignees-header-actions .btn,
    .consignees-filter-form .btn {
        flex: 0 0 auto;
        white-space: nowrap;
    }

    .consignees-filter-form {
        flex: 0 0 auto;
    }

    .consignees-filter-form .form-control {
        min-width: 10.75rem;
    }

    .consignees-table-wrap {
        scrollbar-width: none;
        -ms-overflow-style: none;
    }

    .consignees-table {
        font-size: .92rem;
        min-width: 1080px;
    }

    .consignees-table th {
        color: var(--muted);
        font-size: .72rem;
        line-height: 1.15;
        overflow-wrap: normal;
        white-space: nowrap;
        word-break: keep-all;
    }

    .consignees-table td {
        overflow-wrap: normal;
        vertical-align: middle;
        white-space: nowrap;
        word-break: normal;
    }

    .consignees-table .consignee-name-cell,
    .consignees-table .email-truncate {
        display: inline-block;
        max-width: 16rem;
        overflow: hidden;
        text-overflow: ellipsis;
        vertical-align: bottom;
    }

    .consignees-table .consignee-name-cell {
        font-weight: 600;
        max-width: 12rem;
    }

    .consignees-table .consignee-actions-cell {
        text-align: center;
        width: 4.25rem;
    }

    .consignees-table .table-actions {
        justify-content: center;
    }
}

.consignments-toolbar-actions {
    align-items: flex-end;
    flex: 1 1 720px;
    flex-direction: column;
    justify-content: flex-end;
}

.consignments-filter-form {
    align-items: center;
    display: grid !important;
    gap: .55rem;
    grid-template-columns: minmax(160px, 190px) minmax(180px, 220px) minmax(190px, 250px) auto;
    justify-content: end;
    max-width: 820px;
    width: 100%;
}

.consignments-filter-form .form-control,
.consignments-filter-form .form-select,
.consignments-filter-form .btn,
.consignments-actions .btn {
    min-height: 42px;
    white-space: nowrap;
}

.consignments-actions {
    justify-content: flex-end;
    width: 100%;
}

.consignments-table-wrap {
    overflow-x: auto;
}

.consignments-table {
    font-size: .92rem;
    min-width: 1080px;
}

.consignments-table th {
    color: var(--muted);
    font-size: .72rem;
    line-height: 1.1;
    overflow-wrap: normal;
    white-space: nowrap;
    word-break: keep-all;
}

.consignments-table td {
    overflow-wrap: normal;
    padding: .58rem .55rem;
    vertical-align: middle;
    word-break: normal;
}

.consignments-table .badge {
    display: inline-flex;
    justify-content: center;
    line-height: 1.1;
    max-width: none;
    min-width: 74px;
    overflow-wrap: normal;
    white-space: nowrap;
    word-break: keep-all;
}

.consignments-table .table-actions {
    white-space: nowrap;
}

.consignment-activity-filters {
    align-items: end;
    display: grid;
    gap: .65rem;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    margin-bottom: .85rem;
}

.consignment-activity-filters .form-label {
    font-size: .78rem;
    margin-bottom: .25rem;
}

.consignment-activity-filters .form-control,
.consignment-activity-filters .form-select,
.consignment-activity-filters .btn {
    min-height: 40px;
    padding-bottom: .45rem;
    padding-top: .45rem;
}

.consignment-activity-filters .filter-field-wide {
    grid-column: span 2;
}

.consignment-activities-table-wrap {
    max-height: calc(100dvh - 330px);
    min-height: 260px;
    overflow: auto;
    position: relative;
}

.consignee-history-table-wrap {
    max-height: calc(100dvh - 210px);
    min-height: 320px;
    overflow: auto;
    position: relative;
}

.consignment-activities-table {
    font-size: .82rem;
    min-width: 1320px;
}

.consignee-history-table {
    font-size: .9rem;
    min-width: 1320px;
}

.consignment-detail-table {
    min-width: 1380px;
}

.consignment-detail-table-wrap {
    max-height: calc(100dvh - 520px);
    min-height: 240px;
    overflow: auto;
}

.consignment-activities-table thead th,
.consignee-history-table thead th {
    background: var(--card);
    position: sticky;
    top: 0;
    z-index: 3;
}

.consignment-activities-table th,
.consignment-activities-table td,
.consignee-history-table th,
.consignee-history-table td {
    padding: .48rem .55rem;
    vertical-align: middle;
}

.consignment-activities-table .select-col {
    width: 34px;
}

.money-cell,
.consignment-activities-table .text-nowrap,
.consignment-activities-table .badge,
.consignment-activities-table .badge-soft,
.consignment-activities-table .btn,
.consignee-history-table .text-nowrap,
.consignee-history-table .badge,
.consignee-history-table .badge-soft,
.consignee-history-table .btn {
    white-space: nowrap;
}

.consignment-activities-table .badge,
.consignment-activities-table .badge-soft,
.consignee-history-table .badge,
.consignee-history-table .badge-soft {
    flex-wrap: nowrap;
    line-height: 1.1;
    max-width: none;
}

.consignment-activities-table .badge-soft,
.consignee-history-table .badge-soft {
    border-radius: 999px;
    display: inline-flex;
    min-width: max-content;
    padding: .38rem .62rem;
}

.table-truncate {
    display: block;
    max-width: 240px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.table-truncate-sm {
    max-width: 180px;
}

.table-truncate-lg {
    max-width: 360px;
}

.table-truncate-note {
    max-width: 320px;
}

.finance-table {
    min-width: 1040px;
}

.finance-table thead th,
.finance-adjustments-history-table thead th,
.finance-recurring-history-table thead th {
    white-space: nowrap;
}

.finance-adjustments-history-table {
    min-width: 760px;
}

.finance-recurring-history-table {
    min-width: 860px;
}

.finance-adjustments-history-table th,
.finance-adjustments-history-table td {
    vertical-align: middle;
}

.finance-adjustments-history-table .badge,
.finance-adjustments-history-table .btn {
    flex-wrap: nowrap;
    max-width: none;
    white-space: nowrap;
}

.finance-balance-highlight {
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: .35rem;
    padding: 1.15rem;
    border: 1px solid var(--line);
    border-radius: 1rem;
    background: color-mix(in srgb, var(--brand) 8%, var(--card) 92%);
}

.finance-balance-highlight span,
.finance-breakdown-grid span {
    color: var(--muted);
    font-size: .82rem;
    font-weight: 800;
}

.finance-balance-highlight strong {
    color: var(--text);
    font-size: clamp(1.55rem, 3vw, 2.2rem);
    font-weight: 900;
    line-height: 1.05;
}

.finance-balance-highlight small {
    color: var(--muted);
    font-weight: 700;
}

.finance-breakdown-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: .75rem;
}

.finance-breakdown-grid > div {
    display: flex;
    min-width: 0;
    flex-direction: column;
    gap: .25rem;
    padding: .85rem;
    border: 1px solid var(--line);
    border-radius: .85rem;
    background: color-mix(in srgb, var(--surface-soft) 50%, var(--card) 50%);
}

.finance-breakdown-grid strong {
    color: var(--text);
    font-size: .98rem;
    font-weight: 900;
    word-break: break-word;
}

.finance-adjustments {
    display: grid;
    gap: .5rem;
}

.finance-recurring-card {
    background: color-mix(in srgb, var(--surface-soft) 72%, var(--card) 28%);
    border: 1px solid var(--line);
    border-radius: 1rem;
    padding: .9rem 1rem;
}

.finance-recurring-end-options {
    display: grid;
    gap: .65rem;
}

.finance-recurring-option {
    align-items: flex-start;
    background: var(--card);
    border: 1px solid var(--line);
    border-radius: .9rem;
    cursor: pointer;
    display: flex;
    gap: .7rem;
    padding: .75rem .85rem;
    transition: border-color .18s ease, box-shadow .18s ease, transform .18s ease;
}

.finance-recurring-option:hover,
.finance-recurring-option:has(input:checked) {
    border-color: color-mix(in srgb, var(--primary) 34%, var(--line) 66%);
    box-shadow: 0 14px 34px rgba(27, 56, 85, .08);
}

.finance-recurring-option:has(input:checked) {
    transform: translateY(-1px);
}

.finance-recurring-option span {
    display: grid;
    gap: .12rem;
}

.finance-recurring-option strong {
    color: var(--text);
    font-size: .92rem;
}

.finance-recurring-option small {
    color: var(--muted);
    line-height: 1.35;
}

.finance-filter-form .form-control,
.finance-filter-form .form-select,
.finance-filter-form .btn {
    min-height: 42px;
}

.reports-filter-form {
    min-width: 0;
}

.reports-filter-form > [class*='col-'] {
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
}

.reports-filter-form .searchable-select,
.reports-filter-form .form-control,
.reports-filter-form .form-select,
.reports-filter-form .btn {
    width: 100%;
}

.reports-filter-form .form-control,
.reports-filter-form .form-select,
.reports-filter-form .searchable-select-toggle,
.reports-filter-form .btn {
    min-height: 42px;
}

.reports-filter-form .form-text {
    min-height: 2.5em;
}

.reports-filter-submit {
    justify-content: flex-end !important;
}

.finance-entry-actions {
    flex-wrap: wrap;
    justify-content: flex-end;
}

.finance-entry-actions .btn {
    min-height: 34px;
}

.finance-adjustment-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .75rem;
    padding: .65rem .75rem;
    border: 1px solid var(--line);
    border-radius: .85rem;
    background: color-mix(in srgb, var(--card) 90%, var(--surface-soft) 10%);
}

.finance-adjustment-item div {
    min-width: 0;
}

.finance-adjustment-item strong,
.finance-adjustment-item span {
    display: block;
}

.finance-adjustment-item div strong {
    overflow: hidden;
    color: var(--text);
    font-size: .9rem;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.finance-adjustment-item span {
    color: var(--muted);
    font-size: .78rem;
    font-weight: 700;
}

.finance-adjustment-item > strong {
    flex: 0 0 auto;
    white-space: nowrap;
}

html[data-theme='dark'] .finance-balance-highlight,
html[data-theme='dark'] .finance-breakdown-grid > div,
html[data-theme='dark'] .finance-adjustment-item {
    background: #0f0f0f;
}

.team-table {
    min-width: 980px;
}

.finance-table th,
.finance-table td,
.team-table th,
.team-table td {
    vertical-align: middle;
}

.finance-table .badge,
.finance-table .badge-soft,
.finance-table .btn,
.team-table .badge,
.team-table .badge-soft,
.team-table .btn {
    flex-wrap: nowrap;
    max-width: none;
    white-space: nowrap;
}

.team-table .email-truncate {
    max-width: 260px;
}

@media (max-width: 1399px) {
    .saas-kpi-grid {
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }

    .saas-dashboard-kpi-grid {
        grid-template-columns: repeat(5, minmax(0, 1fr));
    }

    .closing-kpi-grid {
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }

    .saas-secondary-grid,
    .closing-secondary-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    /* .saas-content-grid {
        grid-template-columns: minmax(0, 1.65fr) minmax(300px, .9fr);
    } */

    .saas-visual-chart {
        min-height: 330px;
    }

    .saas-chart-track {
        height: 235px;
        width: min(56px, 72%);
    }

    .saas-closing-layout {
        grid-template-columns: 1fr;
    }

    .saas-bridge-chart {
        min-height: 310px;
    }

    .consignments-toolbar {
        align-items: flex-start !important;
    }

    .consignments-toolbar-actions {
        width: 100%;
    }

    .consignments-filter-form {
        flex: 1 1 auto;
        grid-template-columns: minmax(150px, .75fr) minmax(170px, 1fr) minmax(180px, 1fr) auto;
        max-width: none;
    }

    .consignments-table {
        font-size: .88rem;
        min-width: 1030px;
    }

    .consignments-table .table-truncate-sm {
        max-width: 118px;
    }

    .consignments-table .table-truncate-lg {
        max-width: 220px;
    }

    .sales-toolbar {
        align-items: flex-start !important;
    }

    .sales-toolbar-actions {
        width: 100%;
    }

    .sales-filter-form {
        flex: 1 1 auto;
        grid-template-columns: minmax(190px, 1.25fr) minmax(150px, .75fr) minmax(170px, .9fr) minmax(170px, .9fr) minmax(112px, auto);
    }

    .sales-table {
        font-size: .9rem;
        min-width: 980px;
    }

    .sales-table .table-truncate-sm {
        max-width: 118px;
    }

    .sales-table .table-truncate-lg {
        max-width: 180px;
    }

    .sale-item-entry {
        gap: .45rem;
        grid-template-columns: minmax(150px, 1fr) minmax(110px, .75fr) 86px 136px 40px;
    }

    .sale-add-item-btn {
        height: 40px;
        margin-top: 1.55rem;
        width: 40px;
    }

    .inventory-history-filters {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .inventory-history-filters .filter-actions {
        grid-column: 1 / -1;
    }

    .inventory-history-filters .filter-actions .btn {
        flex: 1 1 0;
    }

    .finance-table {
        min-width: 980px;
    }

    .team-table {
        min-width: 900px;
    }

    .team-table .email-truncate {
        max-width: 220px;
    }
}

@media (min-width: 768px) and (max-width: 991.98px) {
    .sales-toolbar-actions {
        align-items: stretch;
    }

    .sales-filter-form {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        width: 100%;
    }

    .sales-filter-form .btn,
    .sales-toolbar-actions > .btn {
        width: 100%;
    }
}

.stock-status-dot {
    border-radius: 999px;
    box-shadow: 0 0 0 4px color-mix(in srgb, currentColor 14%, transparent);
    display: inline-flex;
    height: .95rem;
    width: .95rem;
}

.stock-status-cell {
    text-align: center;
}

.stock-status-badge {
    align-items: center;
    border: 1px solid rgba(15, 23, 42, .08);
    border-radius: 999px;
    display: inline-flex;
    font-size: .78rem;
    font-weight: 800;
    gap: .45rem;
    justify-content: center;
    line-height: 1;
    min-height: 1.8rem;
    padding: .35rem .65rem;
    white-space: nowrap;
}

.stock-status-badge .stock-status-dot {
    box-shadow: 0 0 0 3px color-mix(in srgb, currentColor 14%, transparent);
    height: .65rem;
    width: .65rem;
}

.inventory-products-table {
    min-width: 900px;
}

.inventory-products-mobile-pagination-reserve {
    display: none;
}

@media (min-width: 768px) {
    .inventory-products-table:not([data-table-enhanced="1"]) tbody tr:nth-child(n+21) {
        display: none;
    }
}

@media (max-width: 767.98px) {
    .inventory-products-mobile-pagination-reserve {
        display: flex;
    }

    .inventory-products-table:not([data-table-enhanced="1"]) tbody tr:nth-child(n+11) {
        display: none;
    }
}

.inventory-products-table thead th {
    white-space: nowrap;
    vertical-align: middle;
}

.inventory-products-table th:nth-child(1),
.inventory-products-table td:nth-child(1) {
    min-width: 150px;
}

.inventory-products-table th:nth-child(2),
.inventory-products-table td:nth-child(2) {
    min-width: 92px;
}

.inventory-products-table th:nth-child(3),
.inventory-products-table td:nth-child(3) {
    min-width: 72px;
}

.inventory-products-table th:nth-child(4),
.inventory-products-table td:nth-child(4) {
    min-width: 104px;
    text-align: center;
}

.inventory-products-table th:nth-child(5),
.inventory-products-table td:nth-child(5) {
    min-width: 104px;
    text-align: right;
}

.inventory-products-table th:nth-child(6),
.inventory-products-table td:nth-child(6),
.inventory-products-table th:nth-child(7),
.inventory-products-table td:nth-child(7) {
    min-width: 82px;
}

.inventory-products-table th:nth-child(8),
.inventory-products-table td:nth-child(8),
.inventory-products-table th:nth-child(9),
.inventory-products-table td:nth-child(9) {
    min-width: 64px;
    text-align: center;
}

.inventory-expiry-table-wrap {
    overflow-x: auto;
}

.inventory-expiry-table {
    min-width: 1280px;
}

.inventory-expiry-col-product {
    min-width: 28rem;
    white-space: nowrap;
}

.inventory-expiry-col-variation,
.inventory-expiry-col-batch,
.inventory-expiry-col-qty,
.inventory-expiry-col-date,
.inventory-expiry-col-days,
.inventory-expiry-col-status,
.inventory-expiry-col-actions {
    white-space: nowrap;
}

.inventory-expiry-col-product .small {
    white-space: nowrap;
}

.inventory-expiry-row.is-highlighted {
    outline: 2px solid rgba(59, 130, 246, .28);
    outline-offset: -2px;
    background: rgba(219, 234, 254, .45);
}

.inventory-expiry-row.is-expired {
    background: rgba(254, 226, 226, .55);
}

html[data-theme='dark'] .inventory-expiry-row.is-highlighted {
    background: rgba(30, 64, 175, .22);
}

html[data-theme='dark'] .inventory-expiry-row.is-expired {
    background: rgba(127, 29, 29, .28);
}

@media (max-width: 767.98px) {
    .inventory-expiry-table {
        min-width: 0;
    }

    .inventory-expiry-col-product,
    .inventory-expiry-col-variation,
    .inventory-expiry-col-batch,
    .inventory-expiry-col-qty,
    .inventory-expiry-col-date,
    .inventory-expiry-col-days,
    .inventory-expiry-col-status,
    .inventory-expiry-col-actions {
        white-space: normal;
    }
}

.product-color-picker {
    background: #f8fafc;
    border: 1px solid rgba(148, 163, 184, .28);
    border-radius: 18px;
    display: grid;
    gap: .85rem;
    padding: .9rem;
}

.product-color-presets,
.product-color-list {
    display: flex;
    flex-wrap: wrap;
    gap: .5rem;
}

.product-color-dots {
    align-items: center;
    display: inline-flex;
    gap: .35rem;
    justify-content: center;
    max-width: 100%;
    white-space: nowrap;
}

.product-color-dot {
    background: var(--swatch-color, #cbd5e1);
    border: 1px solid rgba(15, 23, 42, .14);
    border-radius: 999px;
    box-shadow: 0 0 0 3px rgba(148, 163, 184, .12), inset 0 0 0 1px rgba(255, 255, 255, .38);
    display: inline-flex;
    flex: 0 0 auto;
    height: .9rem;
    width: .9rem;
}

.product-color-more {
    align-items: center;
    background: #f8fafc;
    border: 1px solid rgba(148, 163, 184, .34);
    border-radius: 999px;
    color: #64748b;
    display: inline-flex;
    flex: 0 0 auto;
    font-size: .78rem;
    font-weight: 800;
    height: 1.15rem;
    justify-content: center;
    letter-spacing: .02em;
    line-height: 1;
    padding: 0 .35rem .12rem;
}

.product-color-preset,
.product-color-pill {
    align-items: center;
    background: #fff;
    border: 1px solid rgba(148, 163, 184, .34);
    border-radius: 999px;
    color: #263743;
    display: inline-flex;
    font-size: .82rem;
    font-weight: 700;
    gap: .45rem;
    line-height: 1.1;
    padding: .42rem .68rem;
}

.product-color-preset {
    cursor: pointer;
    transition: border-color .18s ease, box-shadow .18s ease, transform .18s ease;
}

.product-color-preset:hover,
.product-color-preset:focus-visible {
    border-color: rgba(14, 165, 233, .55);
    box-shadow: 0 10px 22px rgba(15, 23, 42, .08);
    transform: translateY(-1px);
}

.context-variation-picker {
    background: #f8fafc;
    border: 1px solid rgba(148, 163, 184, .28);
    border-radius: 16px;
    display: grid;
    gap: .55rem;
    padding: .75rem;
}

.context-variation-option {
    align-items: center;
    background: #fff;
    border: 1px solid rgba(148, 163, 184, .34);
    border-radius: 14px;
    display: grid;
    grid-template-columns: minmax(130px, 1fr) minmax(78px, .55fr) minmax(116px, .8fr) minmax(116px, .85fr) minmax(116px, .85fr);
    font-size: .85rem;
    font-weight: 700;
    gap: .55rem;
    padding: .65rem;
}

.context-variation-option label {
    color: #64748b;
    display: grid;
    font-size: .72rem;
    font-weight: 800;
    gap: .2rem;
    margin: 0;
    text-transform: uppercase;
}

.context-variation-name {
    align-items: center;
    display: inline-flex;
    gap: .45rem;
}

.context-variation-calculated {
    color: #64748b;
    font-size: .72rem;
    font-weight: 800;
    grid-column: 4 / -1;
    text-align: right;
    text-transform: uppercase;
}

.inventory-variation-stock-list {
    align-items: center;
    display: flex;
    flex-wrap: wrap;
    gap: .35rem;
    max-width: 280px;
}

.inventory-variation-stock-row {
    background: #f8fafc;
    border: 1px solid rgba(148, 163, 184, .24);
    border-radius: 999px;
    display: inline-flex;
    align-items: center;
    gap: .3rem;
    max-width: 100%;
    padding: .22rem .45rem;
    white-space: nowrap;
}

.inventory-variation-stock-row > span {
    align-items: center;
    display: inline-flex;
    gap: .35rem;
    font-weight: 800;
    max-width: 110px;
    overflow: hidden;
    text-overflow: ellipsis;
}

.inventory-variation-stock-row small {
    color: #64748b;
    display: none;
}

.inventory-variation-legacy {
    color: #64748b;
    font-size: .78rem;
    font-weight: 700;
}

@media (max-width: 767.98px) {
    .context-variation-option {
        grid-template-columns: 1fr;
    }
}

.product-color-preset span,
.product-color-pill i {
    background: var(--swatch-color, #cbd5e1);
    border: 1px solid rgba(15, 23, 42, .14);
    border-radius: 999px;
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .35);
    display: inline-flex;
    flex: 0 0 auto;
    height: .9rem;
    width: .9rem;
}

.product-custom-color {
    align-items: center;
    display: grid;
    gap: .55rem;
    grid-template-columns: auto minmax(160px, 1fr) auto;
}

.product-selected-colors {
    display: grid;
    gap: .5rem;
}

.product-color-row {
    align-items: center;
    background: #fff;
    border: 1px solid rgba(148, 163, 184, .28);
    border-radius: 14px;
    display: grid;
    gap: .55rem;
    grid-template-columns: auto minmax(0, 1fr) auto;
    padding: .55rem;
}

.product-color-empty {
    color: #64748b;
    font-size: .86rem;
    padding: .1rem .2rem;
}

.product-color-row .form-control-color,
.product-custom-color .form-control-color {
    height: 2.4rem;
    padding: .25rem;
    width: 3.1rem;
}

@media (max-width: 575.98px) {
    .product-custom-color,
    .product-color-row {
        grid-template-columns: auto minmax(0, 1fr);
    }

    .product-custom-color .btn,
    .product-color-row .btn {
        grid-column: 1 / -1;
    }
}

.stock-status-dot-success {
    background: #22c55e;
    color: #22c55e;
}

.stock-status-dot-warning {
    background: #f59e0b;
    color: #f59e0b;
}

.stock-status-dot-danger {
    background: #ef4444;
    color: #ef4444;
}

.stock-status-badge-success {
    background: rgba(34, 197, 94, .1);
    color: #15803d;
}

.stock-status-badge-warning {
    background: rgba(245, 158, 11, .14);
    color: #92400e;
}

.stock-status-badge-danger {
    background: rgba(239, 68, 68, .12);
    color: #b91c1c;
}

.stock-context-badge {
    align-items: center;
    border: 1px solid rgba(15, 23, 42, .08);
    border-radius: 999px;
    display: inline-flex;
    font-size: .72rem;
    font-weight: 800;
    line-height: 1;
    min-height: 1.6rem;
    padding: .28rem .58rem;
    white-space: nowrap;
}

.stock-context-badge-info {
    background: rgba(59, 130, 246, .12);
    color: #1d4ed8;
}

.stock-context-badge-warning {
    background: rgba(245, 158, 11, .14);
    color: #92400e;
}

.stock-context-badge-muted {
    background: rgba(100, 116, 139, .12);
    color: #475569;
}

.batch-cost-actions {
    display: grid;
    gap: .75rem;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    padding-top: 2rem;
}

.batch-cost-actions .btn {
    min-height: 3.15rem;
}

.product-loans-heading {
    align-items: flex-start;
    gap: 1rem;
}

.product-loans-heading-copy {
    flex: 1 1 320px;
    min-width: min(100%, 260px);
}

.product-loans-toolbar {
    align-items: flex-end;
    flex-direction: column;
    flex: 1 1 560px;
    justify-content: flex-end;
}

.product-loans-filter {
    align-items: center;
    flex: 0 1 auto;
    flex-wrap: wrap;
    justify-content: flex-end;
    max-width: 600px;
    width: 100%;
}

.product-loans-filter .form-control,
.product-loans-filter .form-select {
    width: auto;
}

.product-loans-filter input[type="month"] {
    flex: 0 0 190px;
    max-width: 190px;
}

.product-loans-filter .form-select {
    flex: 1 1 240px;
    max-width: 300px;
    min-width: 220px;
}

.product-loans-filter .btn,
.product-loans-actions .btn {
    flex: 0 0 auto;
    white-space: nowrap;
}

.product-loans-actions {
    justify-content: flex-end;
    width: 100%;
}

.showcases-heading {
    align-items: flex-start;
    justify-content: space-between;
}

.showcases-heading-copy {
    flex: 1 1 360px;
    min-width: min(100%, 260px);
}

.showcases-toolbar {
    align-items: center;
    flex: 0 1 auto;
    flex-wrap: nowrap !important;
    justify-content: flex-end;
    min-width: 0;
}

.showcases-filter {
    align-items: center;
    flex: 0 0 auto;
    flex-wrap: nowrap;
    justify-content: flex-end;
    min-width: 0;
}

.showcases-filter .form-select {
    width: auto;
}

.showcases-filter select[name="context_id"] {
    flex: 0 0 270px;
    max-width: 270px;
    min-width: 0;
}

.showcases-filter select[name="status"] {
    flex: 0 0 230px;
    max-width: 230px;
    min-width: 0;
}

.showcases-filter .btn,
.showcases-toolbar > .btn {
    flex: 0 0 auto;
    white-space: nowrap;
}

.showcases-source-switch {
    background: color-mix(in srgb, var(--surface-soft) 74%, var(--card) 26%);
    border: 1px solid var(--line);
    border-radius: .9rem;
    display: grid;
    gap: .3rem;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    padding: .3rem;
}

.showcases-source-option {
    align-items: center;
    border: 1px solid transparent;
    border-radius: .68rem;
    color: var(--muted);
    cursor: pointer;
    display: inline-flex;
    font-size: .92rem;
    font-weight: 800;
    gap: .5rem;
    justify-content: center;
    line-height: 1.1;
    margin: 0;
    min-height: 2.45rem;
    padding: .55rem .75rem;
    text-align: center;
    transition: background-color .18s ease, border-color .18s ease, color .18s ease, box-shadow .18s ease;
    white-space: nowrap;
}

.showcases-source-option .bi {
    flex: 0 0 auto;
    font-size: 1rem;
    line-height: 1;
}

.showcases-source-switch .btn-check:checked + .showcases-source-option {
    background: var(--primary);
    border-color: var(--primary);
    box-shadow: 0 10px 22px color-mix(in srgb, var(--primary) 24%, transparent);
    color: #fff;
}

.showcases-source-switch .btn-check:focus-visible + .showcases-source-option {
    box-shadow: 0 0 0 .2rem color-mix(in srgb, var(--primary) 22%, transparent);
}

.showcases-source-switch .btn-check:disabled + .showcases-source-option {
    cursor: not-allowed;
    opacity: .52;
}

.showcases-table-wrap {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

.showcases-table {
    min-width: 1180px;
}

.showcases-table th,
.showcases-table td {
    overflow-wrap: normal;
    padding: .58rem .55rem;
    vertical-align: middle;
    word-break: normal;
}

.showcases-table th {
    line-height: 1.15;
    white-space: nowrap;
}

.showcases-table th:nth-child(1),
.showcases-table td:nth-child(1) {
    min-width: 190px;
}

.showcases-table th:nth-child(6),
.showcases-table td:nth-child(6),
.showcases-table th:nth-child(7),
.showcases-table td:nth-child(7),
.showcases-table th:nth-child(9),
.showcases-table td:nth-child(9) {
    min-width: 140px;
}

.showcases-table .badge {
    display: inline-flex;
    justify-content: center;
    line-height: 1.1;
    max-width: none;
    min-width: 78px;
    overflow-wrap: normal;
    white-space: nowrap;
    word-break: keep-all;
}

.showcases-table .table-actions {
    white-space: nowrap;
}

.product-loan-pending-row > * {
    background: color-mix(in srgb, #ef4444 11%, var(--card) 89%) !important;
}

.product-loan-pending-row {
    box-shadow: inset 4px 0 0 #ef4444;
}

@media (max-width: 767px) {
    .saas-page {
        gap: 1rem;
    }

    .saas-hero,
    .saas-panel-header {
        align-items: flex-start;
        flex-direction: column;
    }

    .saas-hero {
        border-radius: 1.18rem;
        padding: 1.1rem;
    }

    .saas-hero-actions,
    .saas-filter-form,
    .saas-filter-form-wide {
        grid-template-columns: 1fr;
        width: 100%;
    }

    .saas-hero-actions > .btn,
    .saas-filter-form .btn {
        justify-content: center;
        width: 100%;
    }

    .saas-kpi-grid,
    .closing-kpi-grid,
    .saas-content-grid,
    .saas-insight-grid,
    .saas-secondary-grid,
    .closing-secondary-grid,
    .saas-flow-grid {
        grid-template-columns: 1fr;
    }

    .saas-dashboard-kpi-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .backorder-summary-grid {
        grid-template-columns: 1fr;
    }

    .sale-cashback-summary {
        grid-template-columns: 1fr;
    }

    .crm-agenda-grid {
        grid-template-columns: 1fr 1fr;
        gap: .6rem;
    }

    .crm-agenda-card {
        min-height: 5.5rem;
        padding: .72rem;
    }

    .crm-agenda-card i {
        width: 1.75rem;
        height: 1.75rem;
        font-size: .85rem;
    }

    .crm-agenda-card strong {
        font-size: 1.12rem;
    }

    .customer-crm-hero {
        align-items: stretch;
        flex-direction: column;
        gap: .9rem;
        padding: .95rem;
    }

    .customer-crm-identity {
        gap: .7rem !important;
    }

    .customer-crm-breadcrumb {
        gap: .35rem;
        font-size: .78rem;
    }

    .customer-crm-back {
        width: 2.75rem;
        height: 2.75rem;
        border-radius: 1rem;
        flex: 0 0 auto;
    }

    .customer-crm-hero-copy {
        min-width: 0;
        gap: .48rem;
    }

    .customer-crm-hero-copy h1 {
        margin-bottom: .05rem !important;
        font-size: clamp(1.55rem, 9vw, 2.15rem);
        overflow-wrap: anywhere;
    }

    .customer-crm-hero-actions {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        align-items: stretch;
        gap: .55rem;
    }

    .customer-crm-hero-actions .btn {
        width: 100%;
        min-height: 3.15rem;
        justify-content: center;
        padding-inline: .65rem;
        white-space: normal;
    }

    .customer-crm-hero-actions .btn:last-child:nth-child(odd) {
        grid-column: 1 / -1;
    }

    .customer-crm-contact {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: .45rem;
    }

    .customer-crm-contact span {
        min-width: 0;
        justify-content: center;
        padding: .5rem .6rem;
        overflow-wrap: anywhere;
        text-align: center;
    }

    .customer-crm-contact span i {
        flex: 0 0 auto;
    }

    .crm-summary-grid,
    .customer-crm-dashboard,
    .customer-crm-main,
    .customer-crm-sidebar,
    .customer-crm-duo,
    .customer-crm-layout,
    .crm-two-columns,
    .crm-info-list-compact {
        grid-template-columns: 1fr;
    }

    .customer-crm-finance-head {
        display: none;
    }

    .customer-crm-finance-row {
        grid-template-columns: 1fr;
        gap: .45rem;
    }

    .customer-crm-finance-value {
        text-align: left;
    }

    .customer-crm-kpi-stack {
        grid-template-columns: 1fr;
    }

    .customer-crm-finance-scroll,
    .customer-crm-compact-scroll,
    .customer-crm-message-scroll,
    .customer-crm-timeline-scroll {
        max-height: none;
        overflow: visible;
        padding-right: 0;
    }

    .customer-crm-card-wide {
        grid-column: auto;
    }

    .customer-crm-card .card-body {
        padding: .9rem;
    }

    .crm-card-title {
        margin-bottom: .7rem;
    }

    .crm-scroll-list {
        max-height: none;
        overflow: visible;
        padding-right: 0;
    }

    .crm-timeline-item {
        grid-template-columns: minmax(0, 1fr);
    }

    .crm-timeline-dot {
        display: none;
    }

    .saas-visual-chart {
        align-items: stretch;
        background: none;
        gap: .65rem;
        grid-template-columns: 1fr;
        min-height: 0;
        overflow-x: visible;
        padding: 0;
    }

    .saas-chart-column {
        align-items: center;
        background: color-mix(in srgb, var(--card) 96%, var(--surface-soft) 4%);
        border: 1px solid color-mix(in srgb, var(--line) 84%, transparent);
        border-radius: .9rem;
        box-shadow: 0 10px 24px rgba(15, 23, 42, .035);
        gap: .55rem;
        grid-template-columns: minmax(88px, 1fr) minmax(0, 1.25fr) auto;
        grid-template-rows: auto;
        min-width: 0;
        padding: .7rem .75rem;
    }

    .saas-chart-track {
        align-items: center;
        border-radius: 999px;
        height: 10px;
        justify-content: flex-start;
        width: 100%;
    }

    .saas-chart-track span {
        height: 100% !important;
        width: var(--mobile-width, 100%) !important;
    }

    .saas-chart-column strong {
        font-size: .9rem;
        order: 3;
        text-align: right;
        white-space: nowrap;
    }

    .saas-chart-column small {
        font-size: .72rem;
        order: 1;
        text-align: left;
    }

    .saas-chart-column .saas-chart-track {
        order: 2;
    }

    .saas-bridge-chart {
        background-size: 50% 100%;
        min-height: auto;
    }

    .saas-bridge-row {
        align-items: start;
        gap: .45rem;
        grid-template-columns: 1fr;
    }

    .saas-bridge-row > strong {
        text-align: left;
    }

    .saas-bridge-track {
        height: 28px;
        width: 100%;
    }

    .saas-donut-wrap {
        grid-template-columns: 1fr;
        justify-items: center;
    }

    .saas-panel .card-body {
        padding: 1rem;
    }

    .saas-kpi-grid-compact .saas-kpi-card {
        min-height: auto;
    }

    .consignments-filter-form,
    .consignments-toolbar-actions {
        width: 100%;
    }

    .consignments-filter-form {
        grid-template-columns: 1fr;
    }

    .consignments-actions {
        flex-direction: column;
    }

    .consignments-actions .btn {
        justify-content: center;
        width: 100%;
    }

    .sales-filter-form,
    .sales-toolbar-actions {
        width: 100%;
    }

    .sales-filter-form {
        grid-template-columns: 1fr;
    }

    .sales-filter-form .btn,
    .sales-toolbar-actions > .btn {
        justify-content: center;
        width: 100%;
    }

    .sale-contact-panel {
        --bs-offcanvas-width: 100vw;
    }

    .sale-contact-panel-footer,
    .sale-contact-source-alert,
    .sale-contact-result,
    .sale-contact-result-actions {
        align-items: stretch;
        flex-direction: column;
    }

    .sale-contact-avatar {
        align-self: flex-start;
    }

    .sale-contact-result-actions .btn {
        justify-content: center;
        width: 100%;
    }

    .sale-contact-results {
        max-height: calc(100vh - 430px);
    }

    .sale-item-entry {
        grid-template-columns: 1fr 1fr;
    }

    .sale-item-entry > div:first-child {
        grid-column: 1 / -1;
    }

    .sale-add-item-btn {
        width: 100%;
    }

    .inventory-history-filters {
        grid-template-columns: 1fr;
    }

    .inventory-history-filters .filter-actions {
        flex-direction: column;
    }

    .finance-breakdown-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .finance-adjustment-item {
        align-items: flex-start;
        flex-direction: column;
    }

    .product-loans-heading,
    .showcases-heading,
    .consignments-toolbar,
    .content-area > .page-container > .d-flex.justify-content-between {
        align-items: stretch !important;
        flex-direction: column;
        gap: .85rem !important;
    }

    .product-loans-toolbar,
    .showcases-toolbar,
    .product-loans-filter,
    .showcases-filter,
    .product-loans-actions,
    .content-area > .page-container > .d-flex.justify-content-between > .d-flex {
        width: 100%;
    }

    .content-area > .page-container > .d-flex.justify-content-between > .d-flex,
    .content-area > .page-container > .d-flex.justify-content-between form.d-flex,
    .product-loans-filter,
    .showcases-toolbar,
    .showcases-filter,
    .product-loans-actions {
        align-items: stretch;
        flex-direction: column;
    }

    .content-area > .page-container > .d-flex.justify-content-between form.d-flex > *,
    .content-area > .page-container > .d-flex.justify-content-between > .d-flex > .btn,
    .product-loans-filter > *,
    .showcases-filter > *,
    .showcases-toolbar > .btn,
    .product-loans-actions > .btn {
        justify-content: center;
        max-width: none;
        width: 100%;
    }

    .product-loans-heading-copy,
    .product-loans-toolbar,
    .showcases-heading-copy,
    .showcases-toolbar,
    .consignments-toolbar-actions {
        flex: 0 1 auto;
        min-width: 0;
    }

    .product-loans-filter input[type="month"],
    .product-loans-filter .form-select,
    .showcases-filter .form-select,
    .consignments-filter-form .form-control,
    .consignments-filter-form .form-select,
    .consignments-filter-form .btn {
        flex: 1 1 auto;
        max-width: none;
        min-width: 0;
        width: 100%;
    }

    .product-loans-actions .btn,
    .consignments-actions .btn {
        min-height: 2.85rem;
    }
}

.product-loans-table {
    min-width: 1480px;
}

.product-loans-history-table {
    font-size: .84rem;
    min-width: 1160px;
}

.product-loans-table th,
.product-loans-table td,
.product-loans-history-table th,
.product-loans-history-table td {
    vertical-align: middle;
}

.product-loans-table th {
    line-height: 1.15;
    white-space: nowrap;
}

.product-loans-table th:nth-child(3),
.product-loans-table td:nth-child(3) {
    min-width: 160px;
}

.product-loans-table th:nth-child(5),
.product-loans-table td:nth-child(5) {
    min-width: 260px;
}

.product-loans-table th:nth-child(6),
.product-loans-table th:nth-child(7),
.product-loans-table th:nth-child(8),
.product-loans-table th:nth-child(9) {
    min-width: 90px;
}

.product-loans-table th:nth-child(10),
.product-loans-table th:nth-child(11) {
    min-width: 110px;
}

.product-loans-table .badge,
.product-loans-table .badge-soft,
.product-loans-table .btn,
.product-loans-history-table .badge,
.product-loans-history-table .badge-soft,
.product-loans-history-table .btn {
    flex-wrap: nowrap;
    max-width: none;
    white-space: nowrap;
}

.product-loans-table .badge,
.product-loans-history-table .badge {
    line-height: 1.1;
}

.product-loans-table .badge-soft,
.product-loans-history-table .badge-soft {
    border-radius: 999px;
    display: inline-flex;
    min-width: max-content;
    padding: .38rem .62rem;
}

@media (max-width: 1399px) {
    .product-loans-table {
        min-width: 1450px;
    }
}

@media (min-width: 768px) {
    .inventory-history-panel .table th,
    .inventory-history-panel .table td {
        vertical-align: middle;
    }

    .inventory-history-panel .table th:not(:last-child),
    .inventory-history-panel .table td:not(:last-child) {
        white-space: nowrap;
    }

    .inventory-history-table .inventory-history-col-product,
    .inventory-history-table .inventory-history-col-origin {
        white-space: normal !important;
    }

    .inventory-history-panel .table .badge,
    .inventory-history-panel .table .badge-soft,
    .inventory-history-panel .table .btn {
        white-space: nowrap;
    }
}

.consignment-activities-loading,
.inventory-history-loading {
    align-items: center;
    background: color-mix(in srgb, var(--card) 88%, transparent);
    border: 1px solid var(--line);
    border-radius: 999px;
    box-shadow: var(--shadow-soft);
    display: inline-flex;
    gap: .5rem;
    left: 50%;
    padding: .55rem .9rem;
    position: sticky;
    top: .75rem;
    transform: translateX(-50%);
    z-index: 10;
}

#consignmentActivitiesRows.is-loading,
#inventoryHistoryRows.is-loading {
    opacity: .45;
}

@media (max-width: 1399px) {
    .consignment-optional-col {
        display: none;
    }

    .consignment-activities-table {
        min-width: 1120px;
    }
}

.app-loading-overlay {
    position: fixed;
    inset: 0;
    z-index: 4000;
    display: none;
    align-items: center;
    justify-content: center;
    padding: 24px;
    background: rgba(8, 20, 24, .48);
    backdrop-filter: blur(5px);
}

.app-loading-overlay.is-blocking {
    display: block;
    background: transparent;
    backdrop-filter: none;
}

.app-loading-overlay.is-visible {
    display: flex;
    background: rgba(8, 20, 24, .48);
    backdrop-filter: blur(5px);
}

.app-loading-overlay:not(.is-visible) .app-loading-card {
    display: none;
}

body.app-is-loading {
    cursor: progress;
}

.app-loading-card {
    display: flex;
    align-items: center;
    gap: .95rem;
    width: min(420px, 100%);
    padding: 1.1rem 1.2rem;
    border: 1px solid var(--line);
    border-radius: 1.25rem;
    background: var(--card);
    color: var(--text);
    box-shadow: 0 24px 70px rgba(3, 27, 32, .24);
}

.consignment-focused-row {
    outline: 2px solid rgba(13, 202, 240, .55);
    outline-offset: -2px;
}

.sidebar-backdrop {
    display: none;
}

.mobile-bottom-nav {
    display: none;
}

html.sidebar-collapsed-init,
body.sidebar-collapsed {
    --sidebar-width: 86px;
}

html.sidebar-collapsed-init .brand-copy,
html.sidebar-collapsed-init .sidebar .nav-link span,
body.sidebar-collapsed .brand-copy,
body.sidebar-collapsed .sidebar .nav-link span {
    display: none;
}

html.sidebar-collapsed-init .sidebar .brand,
body.sidebar-collapsed .sidebar .brand {
    justify-content: center;
}

html.sidebar-collapsed-init .sidebar .nav-link,
body.sidebar-collapsed .sidebar .nav-link {
    justify-content: center;
    transform: none;
}

html.sidebar-collapsed-init .sidebar .nav-link i,
body.sidebar-collapsed .sidebar .nav-link i {
    margin: 0;
}

html.sidebar-collapsed-init .sidebar .nav-link.active,
html.sidebar-collapsed-init .sidebar .nav-link:hover,
html.sidebar-collapsed-init .sidebar .nav-link:focus,
html.sidebar-collapsed-init .sidebar .nav-link:active,
body.sidebar-collapsed .sidebar .nav-link.active,
body.sidebar-collapsed .sidebar .nav-link:hover,
body.sidebar-collapsed .sidebar .nav-link:focus,
body.sidebar-collapsed .sidebar .nav-link:active {
    transform: none;
}

html.sidebar-collapsed-init .global-table-scrollbar,
body.sidebar-collapsed .global-table-scrollbar {
    left: calc(var(--sidebar-width) + 1.1rem);
}

@media (max-width: 991.98px) {
    html,
    body {
        min-height: 100dvh;
        overflow-y: auto;
        overscroll-behavior-y: auto;
    }

    body.is-authenticated {
        background:
            linear-gradient(180deg, rgba(27, 56, 85, .08), transparent 180px),
            var(--bg);
    }

    .sidebar {
        transform: translateX(-102%);
        width: min(88vw, 340px);
        border-radius: 0;
        padding-top: env(safe-area-inset-top);
    }

    html.sidebar-collapsed-init,
    body.sidebar-collapsed {
        --sidebar-width: min(88vw, 340px);
    }

    html.sidebar-collapsed-init .brand-copy,
    html.sidebar-collapsed-init .sidebar .nav-link span,
    body.sidebar-collapsed .brand-copy,
    body.sidebar-collapsed .sidebar .nav-link span {
        display: block;
    }

    html.sidebar-collapsed-init .sidebar .brand,
    body.sidebar-collapsed .sidebar .brand {
        justify-content: flex-start;
    }

    html.sidebar-collapsed-init .sidebar .nav-link,
    body.sidebar-collapsed .sidebar .nav-link {
        justify-content: flex-start;
    }

    html.sidebar-collapsed-init .sidebar .nav-link i,
    body.sidebar-collapsed .sidebar .nav-link i {
        margin: 0;
    }

    body.sidebar-open .sidebar {
        transform: translateX(0);
    }

    .content-area {
        margin-left: 0;
        width: 100%;
        min-height: 100dvh;
    }

    .sidebar-backdrop {
        display: block;
        position: fixed;
        inset: 0;
        border: 0;
        background: rgba(15, 23, 42, .46);
        opacity: 0;
        pointer-events: none;
        z-index: 1040;
        transition: opacity .2s ease;
    }

    body.sidebar-open .sidebar-backdrop {
        opacity: 1;
        pointer-events: auto;
    }

    .page-container {
        padding: .9rem .8rem calc(10rem + env(safe-area-inset-bottom, 0px));
    }

    .topbar {
        min-height: 58px;
        margin: .55rem .7rem 0;
        padding: .65rem .75rem;
        border-radius: 1.15rem;
        box-shadow: 0 12px 30px rgba(15, 23, 42, .08);
    }

    .topbar h6 {
        font-size: .95rem;
    }

    .topbar small {
        display: none;
    }

    .topbar .btn {
        min-width: 2.75rem;
        min-height: 2.75rem;
        border-radius: .95rem;
    }

    .topbar-actions {
        gap: .45rem !important;
    }

    .mobile-bottom-nav {
        position: fixed !important;
        top: auto !important;
        left: 12px;
        right: 12px;
        bottom: max(12px, calc(env(safe-area-inset-bottom, 0px) + 8px)) !important;
        z-index: 1030;
        display: grid;
        grid-auto-flow: column;
        grid-auto-columns: 1fr;
        gap: .35rem;
        min-height: 68px;
        padding: .45rem;
        border: 1px solid color-mix(in srgb, var(--line) 76%, transparent 24%);
        border-radius: 1.35rem;
        background: color-mix(in srgb, var(--card) 90%, transparent 10%);
        box-shadow: 0 18px 46px rgba(15, 23, 42, .2);
        backdrop-filter: blur(18px);
        -webkit-backdrop-filter: blur(18px);
        transform: translate3d(0, 0, 0);
        will-change: transform;
        transition: opacity .18s ease, transform .18s ease;
    }

    body.app-overlay-open .mobile-bottom-nav,
    body.modal-open .mobile-bottom-nav {
        opacity: 0;
        pointer-events: none;
        transform: translate3d(0, 110%, 0);
    }

    .mobile-bottom-link {
        border: 0;
        border-radius: 1rem;
        background: transparent;
        color: var(--muted);
        min-width: 0;
        min-height: 56px;
        padding: .35rem .25rem;
        display: inline-flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: .18rem;
        text-decoration: none;
        font-size: .6rem;
        font-weight: 800;
        line-height: 1.1;
    }

    .mobile-bottom-link i {
        font-size: 1.2rem;
        line-height: 1;
    }

    .mobile-bottom-link.active {
        background: var(--primary);
        color: #ffffff;
        box-shadow: 0 8px 22px color-mix(in srgb, var(--primary) 36%, transparent 64%);
    }

    .mobile-bottom-link:not(.active):hover,
    .mobile-bottom-link:not(.active):focus {
        background: color-mix(in srgb, var(--primary) 10%, transparent 90%);
        color: var(--primary);
    }

    .metric,
    .card,
    .app-card,
    .stat-card {
        border-radius: 1.2rem;
    }

    .metric {
        padding: 1rem;
    }

    .metric strong {
        font-size: 1.2rem;
    }

    .btn {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        gap: .42rem;
        min-height: 2.75rem;
        border-radius: .95rem;
        font-weight: 800;
        line-height: 1.15;
        text-align: center;
        white-space: normal;
        vertical-align: middle;
    }

    .btn > i,
    .btn > .bi {
        flex: 0 0 auto;
        line-height: 1;
    }

    .form-control,
    .form-select,
    .input-group-text {
        min-height: 3rem;
        border-radius: .95rem;
        font-size: 1rem;
    }

    textarea.form-control {
        min-height: 6rem;
    }

    .dropdown-menu.table-actions-menu {
        min-width: min(18rem, calc(100vw - 1.5rem));
    }

    .table-responsive {
        overflow-x: auto;
    }

    .table-responsive > .responsive-card-table {
        border-collapse: separate;
        border-spacing: 0 .85rem;
    }

    .table-responsive > .responsive-card-table thead {
        display: none;
    }

    .table-responsive > .responsive-card-table tbody,
    .table-responsive > .responsive-card-table tr,
    .table-responsive > .responsive-card-table td {
        display: block;
        width: 100%;
    }

    .table-responsive > .responsive-card-table {
        min-width: 0 !important;
        width: 100% !important;
    }

    .table-responsive > .responsive-card-table tr {
        padding: .85rem;
        border: 1px solid var(--line);
        border-radius: 1.1rem;
        background: color-mix(in srgb, var(--card) 94%, var(--surface-soft) 6%);
        box-shadow: 0 10px 24px rgba(15, 23, 42, .06);
        margin-bottom: 8px;
    }

    .table-responsive > .responsive-card-table td {
        border: 0;
        padding: .3rem .15rem;
        min-width: 0 !important;
        text-align: left !important;
    }

    .table-responsive > .responsive-card-table td[data-label] {
        display: grid;
        grid-template-columns: minmax(6.8rem, 36%) minmax(0, 1fr);
        align-items: center;
        gap: .65rem;
    }

    .table-responsive > .responsive-card-table td[colspan] {
        display: block;
        padding: 1.15rem .4rem;
        text-align: center !important;
    }

    .table-responsive > .responsive-card-table td[colspan]::before {
        content: none;
    }

    .table-responsive > .responsive-card-table td .badge,
    .table-responsive > .responsive-card-table td .badge-soft {
        justify-self: start;
        min-width: 4.15rem;
        min-height: 1.75rem;
        padding: .4rem .8rem;
        font-size: .74rem;
        line-height: 1.15;
        white-space: nowrap;
    }

    .table-responsive > .responsive-card-table td:not([data-label]) .badge {
        max-width: min(9rem, 100%);
    }

    .responsive-card-table .table-truncate,
    .responsive-card-table .table-truncate-sm,
    .responsive-card-table .table-truncate-lg,
    .responsive-card-table .email-truncate {
        max-width: 100%;
        white-space: normal;
    }

    .responsive-card-table .money-cell,
    .responsive-card-table .text-nowrap {
        white-space: normal !important;
    }

    .responsive-card-table .stock-status-dot,
    .responsive-card-table .product-color-dots {
        justify-self: start;
    }

    .text-truncate-soft,
    .email-truncate {
        max-width: 100%;
        white-space: normal;
    }

    .card-summary-grid {
        grid-template-columns: 1fr 1fr;
    }

    .table-responsive > .responsive-card-table td[data-label]::before {
        content: attr(data-label);
        color: var(--muted);
        font-size: .72rem;
        font-weight: 900;
        text-transform: uppercase;
        letter-spacing: .05em;
    }

    .table-responsive > .responsive-card-table td[colspan],
    .table-responsive > .responsive-card-table td[colspan][data-label] {
        display: block !important;
        padding: 1.35rem .6rem !important;
        text-align: center !important;
        width: 100% !important;
    }

    .table-responsive > .responsive-card-table td[colspan]::before,
    .table-responsive > .responsive-card-table td[colspan][data-label]::before {
        content: none !important;
        display: none !important;
    }

    .table-responsive > .responsive-card-table td:first-child {
        font-weight: 800;
        color: var(--text);
    }

    .global-table-scrollbar {
        display: none !important;
    }

    .table-pagination {
        align-items: stretch;
        flex-direction: column;
        padding: .85rem;
    }

    .table-pagination-actions {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: .55rem;
    }

    .table-pagination-actions .table-pagination-status {
        grid-column: 1 / -1;
        order: -1;
        text-align: center;
    }

    .table-actions {
        width: 100%;
        justify-content: flex-end;
        margin-top: .35rem;
    }

    .table-actions-toggle {
        width: 3rem;
        min-height: 3rem;
        border-radius: 1rem;
    }

    .modal-dialog {
        margin: .5rem;
    }

    .modal-dialog-centered {
        min-height: calc(100% - 1rem);
    }

    .modal-content {
        border-radius: 1.25rem;
        max-height: calc(100dvh - 1rem - env(safe-area-inset-bottom, 0px));
        overflow: hidden;
    }

    .modal-body {
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
        padding-bottom: calc(1.5rem + env(safe-area-inset-bottom, 0px));
    }

    .modal-footer {
        padding-bottom: calc(1rem + env(safe-area-inset-bottom, 0px));
    }

    .offcanvas.offcanvas-end,
    .offcanvas.offcanvas-end.inventory-history-panel,
    .admin-create-company-panel {
        width: 100vw !important;
        max-width: 100vw;
        border-radius: 0;
    }

    .offcanvas.offcanvas-end {
        top: max(.65rem, env(safe-area-inset-top));
        height: calc(100dvh - max(.65rem, env(safe-area-inset-top)));
    }

    .admin-create-company-panel .offcanvas-header {
        padding: 1rem 1rem .85rem;
    }

    .admin-create-company-panel .offcanvas-body {
        padding: 1rem 1rem calc(4rem + env(safe-area-inset-bottom, 0px));
    }

    .selection-summary {
        align-items: stretch;
        flex-direction: column;
    }

    .selection-summary .btn {
        width: 100%;
    }

    .consignment-activity-filters {
        grid-template-columns: 1fr;
    }

    .consignment-activity-filters .filter-field-wide {
        grid-column: auto;
    }

    .consignment-activities-table-wrap {
        max-height: calc(100dvh - 360px);
    }

    .consignment-activities-table {
        font-size: .8rem;
        min-width: 820px;
    }

    .auth-shell {
        min-height: 100dvh;
        padding: max(1rem, env(safe-area-inset-top)) 1rem max(1rem, env(safe-area-inset-bottom));
    }

    .auth-card {
        border-radius: 1.35rem;
    }
}

@media (max-width: 575.98px) {
    .card-summary-grid {
        grid-template-columns: 1fr;
    }

    .page-container {
        padding-inline: .85rem;
    }
}

@media (max-width: 575.98px) {
    .d-flex.flex-wrap.justify-content-between.align-items-center.gap-3.mb-4 {
        gap: .85rem !important;
        margin-bottom: 1rem !important;
    }

    .d-flex.flex-wrap.justify-content-between.align-items-center.gap-3.mb-4 > div,
    .d-flex.flex-wrap.justify-content-between.align-items-center.gap-3.mb-4 > form {
        width: 100%;
    }

    .d-flex.flex-wrap.gap-2,
    form.d-flex.gap-2 {
        width: 100%;
    }

    form.d-flex.gap-2 {
        display: grid !important;
        grid-template-columns: 1fr auto;
    }

    h1.h3 {
        font-size: 1.45rem;
    }

    .row.g-3 > [class*='col-'] {
        margin-bottom: .1rem;
    }
}

@media all and (display-mode: standalone) {
    body.is-authenticated {
        user-select: none;
    }

    input,
    textarea,
    select {
        user-select: text;
    }

    .topbar {
        margin-top: max(.55rem, env(safe-area-inset-top));
    }
}

html.is-standalone-pwa body.is-authenticated {
    min-height: 100dvh;
}

html.is-standalone-pwa .page-container {
    padding-bottom: calc(10rem + env(safe-area-inset-bottom, 0px));
}

html.is-standalone-pwa .mobile-bottom-nav {
    position: fixed !important;
    bottom: max(12px, calc(env(safe-area-inset-bottom, 0px) + 8px)) !important;
}

html[data-theme='dark'] .mobile-bottom-nav {
    background: rgba(5, 5, 5, .92);
    border-color: #262626;
    box-shadow: 0 18px 46px rgba(0, 0, 0, .45);
}

html[data-theme='dark'] .mobile-bottom-link:not(.active) {
    color: #d6dee2;
}

html[data-theme='dark'] .mobile-bottom-link:not(.active):hover,
html[data-theme='dark'] .mobile-bottom-link:not(.active):focus {
    background: rgba(255, 255, 255, .08);
    color: #ffffff;
}

html[data-theme='dark'] .table-responsive > .table tr {
    background: #050505;
    border-color: var(--line);
}

.report-preview {
    overflow: visible;
}

.reports-mobile-export-note {
    display: none;
}

.report-header {
    display: flex;
    justify-content: space-between;
    gap: 1.5rem;
    align-items: flex-start;
    padding-bottom: 1rem;
    border-bottom: 1px solid var(--line);
    margin-bottom: 1rem;
}

.report-company {
    color: var(--muted);
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: .08em;
    font-size: .78rem;
}

.report-title {
    font-size: 1.55rem;
    font-weight: 900;
    color: var(--text);
}

.report-subtitle {
    color: var(--muted);
    font-weight: 700;
}

.report-issued {
    text-align: right;
    color: var(--muted);
    font-size: .82rem;
}

.report-issued strong {
    display: block;
    color: var(--text);
    font-size: .95rem;
}

.report-summary {
    display: flex;
    flex-wrap: wrap;
    gap: .75rem;
    margin-bottom: 1rem;
}

.report-summary span {
    border: 1px solid var(--line);
    border-radius: .85rem;
    padding: .55rem .75rem;
    background: color-mix(in srgb, var(--surface-soft) 72%, var(--card) 28%);
    color: var(--muted);
    font-weight: 700;
}

.report-summary strong {
    color: var(--text);
}

.report-table {
    --bs-table-bg: transparent;
    font-size: .92rem;
}

.report-table thead th {
    color: var(--muted);
    font-size: .76rem;
    line-height: 1.2;
    text-transform: uppercase;
    letter-spacing: .06em;
    white-space: normal;
}

.report-table td,
.report-table th {
    overflow-wrap: anywhere;
}

.report-table-wrap {
    max-width: 100%;
    min-width: 0;
}

.report-table-batch {
    min-width: 1320px;
}

.report-table-loans {
    min-width: 1120px;
}

.report-empty {
    border: 1px dashed var(--line);
    border-radius: 1rem;
    color: var(--muted);
    padding: 1.5rem;
    text-align: center;
    font-weight: 700;
}

@media (max-width: 991.98px) {
    .reports-heading {
        align-items: stretch !important;
    }

    .reports-heading > div:first-child {
        width: 100%;
    }

    .reports-export-actions {
        display: none !important;
    }

    .reports-mobile-export-note {
        display: flex;
        align-items: flex-start;
        gap: .75rem;
        width: 100%;
        border: 1px solid color-mix(in srgb, var(--primary) 20%, var(--line) 80%);
        border-radius: .9rem;
        padding: .85rem;
        background: color-mix(in srgb, var(--primary) 7%, var(--card) 93%);
        color: var(--muted);
        box-shadow: 0 12px 26px rgba(15, 23, 42, .06);
    }

    .reports-mobile-export-note i {
        width: 2.25rem;
        height: 2.25rem;
        border-radius: .72rem;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        flex: 0 0 auto;
        background: var(--primary);
        color: #ffffff;
        font-size: 1rem;
    }

    .reports-mobile-export-note strong,
    .reports-mobile-export-note span {
        display: block;
    }

    .reports-mobile-export-note strong {
        color: var(--text);
        font-size: .94rem;
        font-weight: 900;
    }

    .reports-mobile-export-note span {
        margin-top: .15rem;
        font-size: .84rem;
        line-height: 1.35;
    }
}

@media print {
    @page {
        size: A4 portrait;
        margin: 12mm;
    }

    @page report-wide {
        size: A4 landscape;
        margin: 12mm;
    }

    html,
    body {
        background: #ffffff !important;
        color: #111827 !important;
    }

    body * {
        visibility: hidden !important;
    }

    .print-report,
    .print-report * {
        visibility: visible !important;
    }

    .print-report {
        page: auto;
        position: absolute !important;
        inset: 0 auto auto 0 !important;
        width: 100% !important;
        border: 0 !important;
        box-shadow: none !important;
        background: #ffffff !important;
        color: #111827 !important;
        padding: 10mm 8mm !important;
        box-sizing: border-box !important;
    }

    .print-report.report-wide {
        page: report-wide;
    }

    .print-report .card-body {
        padding: 0 !important;
    }

    .no-print,
    .sidebar,
    .topbar,
    .mobile-bottom-nav,
    .sidebar-backdrop,
    .offcanvas,
    .modal,
    .btn,
    button {
        display: none !important;
    }

    .content-area,
    .page-container,
    .container-fluid {
        margin: 0 !important;
        padding: 0 !important;
        width: 100% !important;
    }

    .report-header {
        border-bottom: 2px solid #111827 !important;
        margin-bottom: 10px !important;
        padding-bottom: 8px !important;
    }

    .report-title {
        color: #111827 !important;
        font-size: 20px !important;
    }

    .report-company,
    .report-subtitle,
    .report-issued,
    .report-issued strong {
        color: #111827 !important;
    }

    .report-summary {
        gap: 6px !important;
        margin-bottom: 10px !important;
    }

    .report-summary span {
        background: #f3f4f6 !important;
        border: 1px solid #d1d5db !important;
        color: #111827 !important;
        padding: 5px 8px !important;
    }

    .report-table-wrap,
    .table-responsive {
        overflow: visible !important;
    }

    .report-table {
        width: 100% !important;
        border-collapse: collapse !important;
        font-size: 11px !important;
    }

    .report-table-batch {
        font-size: 9px !important;
    }

    .report-table-loans {
        font-size: 10px !important;
    }

    .report-table thead {
        display: table-header-group !important;
    }

    .report-table tbody {
        display: table-row-group !important;
    }

    .report-table tr {
        display: table-row !important;
        box-shadow: none !important;
        border: 0 !important;
        background: transparent !important;
        margin: 0 !important;
        padding: 0 !important;
        break-inside: avoid;
    }

    .report-table th,
    .report-table td {
        display: table-cell !important;
        width: auto !important;
        border: 1px solid #d1d5db !important;
        color: #111827 !important;
        padding: 5px 6px !important;
        vertical-align: top !important;
    }

    .report-table td[data-label]::before {
        content: none !important;
        display: none !important;
    }

    .report-table thead th {
        background: #eef2f7 !important;
        color: #111827 !important;
    }
}

@media (min-width: 992px) {
    body,
    body.sidebar-open {
        overflow-y: auto !important;
    }

    body.sidebar-open .sidebar-backdrop {
        display: none;
        opacity: 0;
        pointer-events: none;
    }

    .sidebar {
        border-radius: 0;
    }
}

.spin-soft {
    animation: spin-soft .75s linear infinite;
}

.refresh-hint {
    position: fixed;
    right: calc(16px + env(safe-area-inset-right, 0px));
    bottom: calc(90px + env(safe-area-inset-bottom, 0px));
    z-index: 2100;
    border-radius: 999px;
}

.pwa-update-hint {
    max-width: calc(100vw - 32px);
    white-space: normal;
}

@keyframes spin-soft {
    to {
        transform: rotate(360deg);
    }
}

.campaign-list .list-group-item {
    border: 1px solid var(--border-color, rgba(15, 23, 42, 0.08));
    border-radius: 16px;
    margin-bottom: .6rem;
}

.campaign-list .list-group-item.active {
    background: var(--bs-primary);
    border-color: var(--bs-primary);
}

.campaign-queue-list {
    display: grid;
    gap: .75rem;
    max-height: 680px;
    overflow: auto;
    padding-right: .15rem;
}

.campaign-queue-row {
    display: flex;
    justify-content: space-between;
    gap: 1rem;
    padding: .9rem;
    border: 1px solid var(--border-color, rgba(15, 23, 42, 0.08));
    border-radius: 16px;
    background: rgba(255, 255, 255, .78);
}

.campaign-status-icon {
    font-size: 1.1rem;
    line-height: 1.4;
}

.campaign-status-spin {
    animation: campaign-spin 1s linear infinite;
}

.campaign-message-preview {
    padding: .65rem;
    border-radius: 12px;
    background: rgba(15, 23, 42, .04);
}

.campaign-variable-chips {
    display: flex;
    flex-wrap: wrap;
    gap: .4rem;
}

@keyframes campaign-spin {
    to { transform: rotate(360deg); }
}

.crm-executive-hero {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    gap: 1rem;
}

.crm-executive-title span,
.crm-panel-heading span,
.crm-section-label {
    display: inline-flex;
    color: #64748b;
    font-size: .68rem;
    font-weight: 800;
    letter-spacing: .14em;
    text-transform: uppercase;
}

.crm-executive-title h1 {
    margin: .35rem 0 .25rem;
    color: #0f172a;
    font-size: clamp(1.65rem, 2.5vw, 2.25rem);
    font-weight: 850;
    letter-spacing: -.045em;
}

.crm-executive-title p {
    max-width: 760px;
    margin: 0;
    color: #64748b;
    font-size: 1rem;
}

.crm-executive-actions {
    display: flex;
    flex-wrap: wrap;
    gap: .55rem;
}

.crm-executive-board {
    display: grid;
    grid-template-columns: minmax(300px, 1fr) minmax(270px, .9fr) minmax(240px, .72fr);
    gap: .85rem;
}

.crm-board-panel {
    min-width: 0;
    min-height: 205px;
    padding: 1rem;
    border: 1px solid rgba(15, 23, 42, .08);
    border-radius: 22px;
    background:
        linear-gradient(145deg, rgba(255,255,255,.96), rgba(248,250,252,.88)),
        #fff;
    box-shadow: 0 18px 48px rgba(15, 23, 42, .075);
}

.crm-board-panel-main {
    grid-column: span 1;
    background:
        radial-gradient(circle at 90% 10%, rgba(15, 23, 42, .08), transparent 32%),
        linear-gradient(145deg, #ffffff, #f8fafc);
}

.crm-panel-heading {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 1rem;
    margin-bottom: .85rem;
}

.crm-panel-heading h2 {
    margin: .22rem 0 0;
    color: #111827;
    font-size: 1.05rem;
    font-weight: 820;
    letter-spacing: -.025em;
}

.crm-panel-heading a {
    color: #334155;
    font-size: .78rem;
    font-weight: 800;
    text-decoration: none;
}

.crm-panel-heading a:hover {
    color: #0f172a;
}

.crm-donut-layout {
    display: grid;
    grid-template-columns: 150px 1fr;
    align-items: center;
    gap: .9rem;
}

.crm-donut-chart {
    position: relative;
    display: grid;
    place-items: center;
    width: 150px;
    aspect-ratio: 1;
    border-radius: 999px;
    background:
        conic-gradient(#1e293b calc(var(--active) * 1%), #cbd5e1 0 100%);
    box-shadow: inset 0 0 0 1px rgba(15, 23, 42, .08), 0 18px 34px rgba(15, 23, 42, .12);
}

.crm-donut-chart > div {
    display: grid;
    place-items: center;
    width: 98px;
    aspect-ratio: 1;
    border-radius: 999px;
    background: #fff;
    box-shadow: inset 0 0 0 1px rgba(15, 23, 42, .06);
}

.crm-donut-chart strong {
    color: #0f172a;
    font-size: 1.45rem;
    line-height: 1;
    letter-spacing: -.055em;
}

.crm-donut-chart span {
    color: #64748b;
    font-size: .72rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: .12em;
}

.crm-donut-legend {
    display: grid;
    gap: .45rem;
}

.crm-donut-legend a {
    display: flex;
    align-items: center;
    gap: .55rem;
    color: #475569;
    text-decoration: none;
    font-size: .9rem;
}

.crm-donut-legend a:hover {
    color: #0f172a;
}

.crm-donut-legend span {
    width: .55rem;
    height: .55rem;
    border-radius: 999px;
    background: #1e293b;
}

.crm-donut-legend .is-inactive { background: #94a3b8; }
.crm-donut-legend .is-vip { background: #b45309; }
.crm-donut-legend strong {
    min-width: 2ch;
    color: #0f172a;
    font-size: 1rem;
}

.crm-horizontal-chart {
    display: grid;
    gap: .65rem;
}

.crm-bar-row {
    display: grid;
    grid-template-columns: 88px minmax(0, 1fr) 30px;
    align-items: center;
    gap: .75rem;
    color: inherit;
    text-decoration: none;
}

.crm-bar-row span,
.crm-communication-list span,
.crm-executive-metrics span,
.crm-rule-pill span,
.crm-segment-row span {
    display: block;
    color: #64748b;
    font-size: .78rem;
    font-weight: 700;
}

.crm-bar-row div {
    overflow: hidden;
    height: .55rem;
    border-radius: 999px;
    background: #e2e8f0;
}

.crm-bar-row i {
    display: block;
    height: 100%;
    min-width: 8px;
    border-radius: inherit;
    background: linear-gradient(90deg, #334155, #0f172a);
}

.crm-bar-row strong {
    color: #0f172a;
    text-align: right;
    font-size: .96rem;
}

.crm-communication-list {
    display: grid;
    gap: .55rem;
}

.crm-communication-list > div {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: .8rem;
    min-height: 48px;
    padding: .65rem .75rem;
    border: 1px solid rgba(15, 23, 42, .07);
    border-radius: 14px;
    background: rgba(255, 255, 255, .72);
}

.crm-communication-list strong {
    display: block;
    color: #0f172a;
    font-size: 1.12rem;
    letter-spacing: -.05em;
}

.crm-thin-meter {
    overflow: hidden;
    height: .38rem;
    grid-column: 1 / -1;
    margin-top: -.2rem;
    border-radius: 999px;
    background: #e2e8f0;
}

.crm-thin-meter i {
    display: block;
    height: 100%;
    min-width: 4px;
    border-radius: inherit;
    background: #1e293b;
}

.crm-executive-metrics {
    display: grid;
    grid-template-columns: repeat(6, minmax(0, 1fr));
    gap: .65rem;
}

.crm-executive-metrics a {
    min-width: 0;
    padding: .78rem .85rem;
    border: 1px solid rgba(15, 23, 42, .07);
    border-radius: 16px;
    color: inherit;
    text-decoration: none;
    background: rgba(255, 255, 255, .78);
    box-shadow: 0 12px 30px rgba(15, 23, 42, .045);
    transition: transform .16s ease, border-color .16s ease, box-shadow .16s ease;
}

.crm-executive-metrics a:hover {
    transform: translateY(-1px);
    border-color: rgba(15, 23, 42, .18);
    box-shadow: 0 18px 38px rgba(15, 23, 42, .075);
}

.crm-executive-metrics strong {
    display: block;
    margin-top: .25rem;
    color: #0f172a;
    font-size: clamp(1.02rem, 1.55vw, 1.24rem);
    letter-spacing: -.05em;
}

.crm-executive-metrics small {
    display: block;
    margin-top: .15rem;
    color: #64748b;
    font-size: .78rem;
    font-weight: 650;
}

.crm-rule-tabs {
    display: flex;
    flex-wrap: wrap;
    gap: .55rem;
}

.crm-rule-pill {
    display: inline-flex;
    align-items: center;
    gap: .65rem;
    padding: .55rem .75rem;
    border: 1px solid rgba(15, 23, 42, .08);
    border-radius: 999px;
    color: inherit;
    text-decoration: none;
    background: rgba(255, 255, 255, .82);
}

.crm-rule-pill::before {
    content: '';
    width: .65rem;
    height: .65rem;
    border-radius: 999px;
    background: var(--rule-color, #64748b);
}

.crm-rule-pill.active {
    border-color: rgba(15, 23, 42, .18);
    box-shadow: 0 0 0 3px rgba(15, 23, 42, .055);
}

.crm-rule-manager,
.crm-segment-list,
.crm-dashboard-agenda {
    display: grid;
    gap: .65rem;
}

.crm-list-header {
    align-items: center;
    display: flex;
    flex-wrap: wrap;
    gap: .75rem;
    justify-content: space-between;
    margin-bottom: .8rem;
}

.crm-list-summary {
    align-items: center;
    background: rgba(255, 255, 255, .76);
    border: 1px solid rgba(15, 23, 42, .08);
    border-radius: 16px;
    display: inline-flex;
    gap: .75rem;
    max-width: 100%;
    min-width: 0;
    padding: .72rem .82rem;
}

.crm-list-summary-dot {
    width: .8rem;
    height: .8rem;
    border-radius: 999px;
    background: var(--crm-rule-accent, #64748b);
    box-shadow: 0 0 0 6px color-mix(in srgb, var(--crm-rule-accent, #64748b) 14%, transparent);
    flex: 0 0 auto;
}

.crm-list-summary strong,
.crm-segment-row strong {
    color: #0f172a;
    display: block;
}

.crm-list-summary small {
    color: #64748b;
    display: block;
    margin-top: .12rem;
}

.crm-list-counter {
    align-items: center;
    background: rgba(255, 255, 255, .82);
    border: 1px solid rgba(15, 23, 42, .08);
    border-radius: 999px;
    color: #334155;
    display: inline-flex;
    font-size: .76rem;
    font-weight: 800;
    min-height: 34px;
    padding: .3rem .7rem;
    white-space: nowrap;
}

.crm-rule-form {
    display: grid;
    grid-template-columns: minmax(86px, 1fr) 64px 42px 42px 36px;
    gap: .4rem;
    align-items: center;
}

.crm-rule-form .form-control-color {
    width: 42px;
    min-width: 42px;
    padding-inline: .25rem;
}

.crm-segment-row,
.crm-dashboard-agenda a {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: .75rem;
    padding: .62rem .72rem;
    border: 1px solid rgba(15, 23, 42, .08);
    border-radius: 14px;
    color: inherit;
    text-decoration: none;
    background: rgba(255, 255, 255, .76);
}

.crm-segment-row:hover,
.crm-dashboard-agenda a:hover {
    border-color: rgba(15, 23, 42, .18);
    background: rgba(255, 255, 255, .92);
}

.crm-segment-list-scroll {
    max-height: 408px;
    overflow: auto;
    padding-right: .2rem;
}

.crm-segment-list-scroll::-webkit-scrollbar {
    width: 10px;
}

.crm-segment-list-scroll::-webkit-scrollbar-thumb {
    background: color-mix(in srgb, var(--line) 78%, var(--primary) 22%);
    border: 2px solid transparent;
    border-radius: 999px;
    background-clip: padding-box;
}

#crm-vip .crm-segment-list,
.crm-dashboard-agenda {
    max-height: 318px;
    overflow: auto;
    padding-right: .15rem;
}

@media (max-width: 1180px) {
    .crm-executive-board {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
    .crm-board-panel-main {
        grid-column: 1 / -1;
    }
}

@media (max-width: 980px) {
    .crm-executive-metrics {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

@media (max-width: 640px) {
    .crm-rule-form {
        grid-template-columns: 1fr 70px 44px;
    }
    .crm-rule-form .form-check,
    .crm-rule-form button {
        grid-column: auto;
    }
    .crm-executive-hero {
        align-items: flex-start;
        flex-direction: column;
    }
    .crm-executive-board,
    .crm-executive-metrics {
        grid-template-columns: 1fr;
    }
    .crm-donut-layout,
    .crm-communication-list {
        grid-template-columns: 1fr;
    }
    .crm-donut-chart {
        width: 154px;
        margin-inline: auto;
    }
    .crm-bar-row {
        grid-template-columns: 82px 1fr 30px;
    }
}

.campaign-progress-card {
    padding: .9rem;
    border: 1px solid rgba(15, 23, 42, .08);
    border-radius: 16px;
    background: rgba(255, 255, 255, .72);
}

.campaign-filter-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: .6rem;
    padding: .75rem;
    border: 1px solid rgba(15, 23, 42, .08);
    border-radius: 14px;
    background: rgba(15, 23, 42, .03);
}

.campaign-lead-filters {
    position: relative;
    padding: 1rem;
    border: 1px solid color-mix(in srgb, var(--primary) 14%, var(--line));
    border-radius: 17px;
    background: linear-gradient(145deg, color-mix(in srgb, var(--primary) 4%, var(--card)), var(--card));
}

.campaign-lead-filters-head {
    display: flex;
    align-items: center;
    gap: .7rem;
    margin-bottom: .9rem;
    padding-bottom: .75rem;
    border-bottom: 1px solid var(--line);
}

.campaign-lead-filters-head > span {
    display: inline-flex;
    flex: 0 0 auto;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border-radius: 11px;
    background: color-mix(in srgb, var(--primary) 11%, var(--card));
    color: var(--primary);
}

.campaign-lead-filters-head strong,
.campaign-lead-filters-head small {
    display: block;
}

.campaign-lead-filters-head strong {
    color: var(--text);
    font-size: .9rem;
}

.campaign-lead-filters-head small {
    margin-top: .08rem;
    color: var(--muted);
    font-size: .72rem;
}

.campaign-segment-picker {
    position: relative;
}

.campaign-segment-picker-trigger {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .75rem;
    width: 100%;
    min-height: 42px;
    padding: .5rem .75rem;
    border: 1px solid var(--line);
    border-radius: 10px;
    background: var(--card);
    color: var(--text);
    text-align: left;
    transition: border-color .18s ease, box-shadow .18s ease, background .18s ease;
}

.campaign-segment-picker-trigger:hover {
    border-color: color-mix(in srgb, var(--primary) 35%, var(--line));
    background: color-mix(in srgb, var(--primary) 2%, var(--card));
}

.campaign-segment-picker.is-open .campaign-segment-picker-trigger {
    border-color: color-mix(in srgb, var(--primary) 70%, var(--line));
    box-shadow: 0 0 0 .2rem color-mix(in srgb, var(--primary) 14%, transparent);
}

.campaign-segment-picker-trigger-copy,
.campaign-segment-picker-trigger-meta {
    display: inline-flex;
    align-items: center;
}

.campaign-segment-picker-trigger-copy {
    min-width: 0;
    gap: .55rem;
    font-size: .88rem;
    font-weight: 650;
}

.campaign-segment-picker-trigger-copy > i {
    color: var(--primary);
}

.campaign-segment-picker-trigger-copy > span {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.campaign-segment-picker-trigger-meta {
    flex: 0 0 auto;
    gap: .55rem;
    color: var(--muted);
}

.campaign-segment-picker-trigger-meta > i {
    font-size: .72rem;
    transition: transform .18s ease;
}

.campaign-segment-picker.is-open .campaign-segment-picker-trigger-meta > i {
    transform: rotate(180deg);
}

.campaign-segment-picker-count {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 23px;
    height: 23px;
    padding: 0 .4rem;
    border-radius: 999px;
    background: var(--primary);
    color: #fff;
    font-size: .7rem;
    font-weight: 800;
}

.campaign-segment-picker-panel {
    position: absolute;
    z-index: 1085;
    top: calc(100% + .45rem);
    right: 0;
    left: 0;
    overflow: hidden;
    border: 1px solid color-mix(in srgb, var(--primary) 16%, var(--line));
    border-radius: 14px;
    background: var(--card);
    box-shadow: 0 18px 45px rgba(15, 23, 42, .18);
}

.campaign-segment-picker-panel[hidden] {
    display: none;
}

.campaign-segment-picker-toolbar {
    display: flex;
    align-items: center;
    gap: .6rem;
    padding: .7rem;
    border-bottom: 1px solid var(--line);
    background: color-mix(in srgb, var(--surface-soft) 72%, var(--card));
}

.campaign-segment-picker-search {
    position: relative;
    flex: 1 1 auto;
    min-width: 130px;
}

.campaign-segment-picker-search i {
    position: absolute;
    top: 50%;
    left: .65rem;
    color: var(--muted);
    font-size: .78rem;
    transform: translateY(-50%);
    pointer-events: none;
}

.campaign-segment-picker-search input {
    width: 100%;
    height: 34px;
    padding: .35rem .65rem .35rem 1.95rem;
    border: 1px solid var(--line);
    border-radius: 9px;
    outline: 0;
    background: var(--card);
    color: var(--text);
    font-size: .78rem;
}

.campaign-segment-picker-search input:focus {
    border-color: color-mix(in srgb, var(--primary) 65%, var(--line));
    box-shadow: 0 0 0 .15rem color-mix(in srgb, var(--primary) 12%, transparent);
}

.campaign-segment-picker-actions {
    display: inline-flex;
    flex: 0 0 auto;
    gap: .25rem;
}

.campaign-segment-picker-actions button {
    padding: .32rem .45rem;
    border: 0;
    border-radius: 8px;
    background: transparent;
    color: var(--primary);
    font-size: .69rem;
    font-weight: 750;
}

.campaign-segment-picker-actions button:hover {
    background: color-mix(in srgb, var(--primary) 9%, transparent);
}

.campaign-segment-picker-options {
    display: grid;
    gap: .25rem;
    max-height: 245px;
    overflow-y: auto;
    padding: .45rem;
    scrollbar-width: thin;
}

.campaign-segment-picker-option {
    display: grid;
    grid-template-columns: 18px minmax(0, 1fr) auto;
    align-items: center;
    gap: .65rem;
    min-height: 48px;
    padding: .48rem .55rem;
    border: 1px solid transparent;
    border-radius: 10px;
    cursor: pointer;
    transition: border-color .15s ease, background .15s ease;
}

.campaign-segment-picker-option:hover {
    background: var(--surface-soft);
}

.campaign-segment-picker-option.is-selected {
    border-color: color-mix(in srgb, var(--primary) 18%, var(--line));
    background: color-mix(in srgb, var(--primary) 7%, var(--card));
}

.campaign-segment-picker-option .form-check-input {
    margin: 0;
    cursor: pointer;
}

.campaign-segment-picker-option-name,
.campaign-segment-picker-option-name strong,
.campaign-segment-picker-option-name small {
    display: block;
    min-width: 0;
}

.campaign-segment-picker-option-name strong {
    overflow: hidden;
    color: var(--text);
    font-size: .79rem;
    font-weight: 720;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.campaign-segment-picker-option-name small {
    margin-top: .08rem;
    color: var(--muted);
    font-size: .66rem;
}

.campaign-segment-picker-option-total {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 30px;
    height: 25px;
    padding: 0 .42rem;
    border-radius: 999px;
    background: var(--surface-soft);
    color: var(--muted);
    font-size: .67rem;
    font-weight: 800;
}

.campaign-segment-picker-option.is-selected .campaign-segment-picker-option-total {
    background: color-mix(in srgb, var(--primary) 12%, var(--card));
    color: var(--primary);
}

.campaign-segment-picker-empty {
    padding: 1.15rem .75rem;
    color: var(--muted);
    font-size: .76rem;
    text-align: center;
}

.campaign-segment-picker-selection {
    display: flex;
    flex-wrap: wrap;
    gap: .35rem;
    min-height: 24px;
    margin-top: .45rem;
}

.campaign-segment-picker-selection > span {
    color: var(--muted);
    font-size: .68rem;
}

.campaign-segment-picker-selection .campaign-segment-chip {
    display: inline-flex;
    align-items: center;
    gap: .2rem;
    min-height: 24px;
    padding: .2rem .48rem;
    border-radius: 999px;
    background: color-mix(in srgb, var(--primary) 9%, var(--card));
    color: color-mix(in srgb, var(--primary) 82%, var(--text));
    font-weight: 720;
}

.campaign-segment-picker-selection .campaign-segment-chip.is-more {
    background: var(--surface-soft);
    color: var(--muted);
}

.campaign-variable-chips button {
    cursor: pointer;
}

.campaign-variable-chips button:hover {
    background: rgba(37, 99, 235, .12) !important;
    color: rgb(30, 64, 175);
}

.campaign-audience-preview {
    display: grid;
    gap: .75rem;
    padding: .9rem;
    border: 1px solid rgba(15, 23, 42, .08);
    border-radius: 16px;
    background: rgba(248, 250, 252, .82);
}

.campaign-audience-preview-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: .75rem;
}

.campaign-audience-preview-head strong {
    display: block;
    color: #0f172a;
}

.campaign-audience-preview-head span,
.campaign-audience-preview-row span {
    display: block;
    color: #64748b;
    font-size: .82rem;
}

.campaign-audience-preview-stats {
    display: flex;
    flex-wrap: wrap;
    gap: .5rem;
}

.campaign-audience-preview-stats span {
    display: inline-flex;
    align-items: center;
    gap: .25rem;
    padding: .35rem .55rem;
    border: 1px solid rgba(15, 23, 42, .07);
    border-radius: 999px;
    background: rgba(255, 255, 255, .78);
    color: #475569;
    font-size: .82rem;
    font-weight: 700;
}

.campaign-audience-preview-list {
    display: grid;
    gap: .45rem;
    max-height: 260px;
    overflow: auto;
    padding-right: .15rem;
}

.campaign-audience-preview-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .75rem;
    padding: .62rem .7rem;
    border: 1px solid rgba(15, 23, 42, .07);
    border-radius: 13px;
    background: rgba(255, 255, 255, .86);
}

.campaign-audience-preview-row i {
    color: #0f766e;
}

.customer-crm-event-meta {
    display: flex;
    flex-wrap: wrap;
    gap: .35rem;
    margin: .2rem 0 .35rem;
}

.customer-crm-event-meta span {
    display: inline-flex;
    align-items: center;
    min-height: 1.35rem;
    padding: .15rem .45rem;
    border-radius: 999px;
    background: rgba(15, 23, 42, .06);
    color: #64748b;
    font-size: .72rem;
    font-weight: 700;
}

.personal-finance-flow {
    display: grid;
    grid-template-columns: repeat(6, minmax(0, 1fr));
    gap: 1rem;
    min-height: 240px;
    align-items: end;
}

.personal-finance-flow-month {
    display: grid;
    gap: .65rem;
    text-align: center;
    color: var(--muted, #64748b);
}

.personal-finance-flow-bars {
    height: 170px;
    display: flex;
    align-items: end;
    justify-content: center;
    gap: .35rem;
    padding: .75rem .35rem;
    border-radius: 1rem;
    background: rgba(15, 23, 42, .035);
}

.personal-finance-flow-bars span {
    width: 16px;
    min-height: 4px;
    border-radius: 999px 999px .35rem .35rem;
    display: block;
}

.personal-finance-flow-bars .income {
    background: linear-gradient(180deg, #22c55e, #15803d);
}

.personal-finance-flow-bars .expense {
    background: linear-gradient(180deg, #fb7185, #e11d48);
}

.personal-finance-flow-month strong {
    font-size: .78rem;
    color: var(--body-color, #0f172a);
}

.personal-finance-flow-month small {
    font-weight: 700;
}

.personal-finance-hero {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 1.15rem 1.5rem;
    align-items: center;
    padding: clamp(1rem, 2vw, 1.5rem);
    border: 1px solid var(--border-color, rgba(15, 23, 42, .08));
    border-radius: 1.25rem;
    background:
        radial-gradient(circle at 90% 0%, color-mix(in srgb, var(--brand) 10%, transparent), transparent 35%),
        color-mix(in srgb, var(--card) 94%, var(--surface-soft) 6%);
    box-shadow: 0 12px 32px rgba(15, 23, 42, .055);
}

.personal-finance-hero-copy {
    min-width: 0;
}

.personal-finance-hero-copy p {
    max-width: 680px;
}

.personal-finance-filter {
    display: grid;
    grid-column: 1 / -1;
    grid-template-columns: minmax(150px, .8fr) minmax(170px, 1fr) minmax(150px, .8fr) minmax(220px, 1.25fr) auto;
    gap: .7rem;
    width: 100%;
    padding-top: 1rem;
    border-top: 1px solid var(--border-color, rgba(15, 23, 42, .08));
}

.personal-finance-filter label {
    display: grid;
    gap: .35rem;
    min-width: 0;
}

.personal-finance-filter label > span {
    color: var(--muted);
    font-size: .68rem;
    font-weight: 850;
    letter-spacing: .045em;
    text-transform: uppercase;
}

.personal-finance-filter .form-control,
.personal-finance-filter .form-select,
.personal-finance-filter .btn,
.personal-finance-action-buttons .btn {
    min-height: 42px;
    border-radius: .85rem;
}

.personal-finance-action-buttons {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: .55rem;
}

.personal-finance-table-scroll.is-scrollable {
    max-height: 570px;
    overflow-x: auto;
    overflow-y: auto;
    overscroll-behavior: contain;
    scrollbar-width: thin;
    scrollbar-color: color-mix(in srgb, var(--muted) 45%, transparent) transparent;
}

.personal-finance-table-scroll.is-scrollable::-webkit-scrollbar {
    display: block;
    width: 8px !important;
    height: 8px !important;
}

.personal-finance-table-scroll.is-scrollable::-webkit-scrollbar-thumb {
    display: block;
    border: 2px solid transparent;
    border-radius: 999px;
    background: color-mix(in srgb, var(--muted) 45%, transparent);
    background-clip: padding-box;
}

.personal-finance-table-scroll.is-scrollable::-webkit-scrollbar-track {
    display: block;
    background: transparent;
}

.personal-finance-table-scroll.is-scrollable thead {
    position: sticky;
    z-index: 4;
    top: 0;
    background: var(--card);
    box-shadow: 0 1px 0 var(--border-color, rgba(15, 23, 42, .08));
}

.personal-finance-balance-card {
    overflow: hidden;
}

.personal-finance-balance-card .finance-balance-highlight {
    background:
        radial-gradient(circle at 18% 10%, color-mix(in srgb, var(--brand) 18%, transparent), transparent 36%),
        color-mix(in srgb, var(--brand) 8%, var(--card) 92%);
}

.personal-finance-safe-badge,
.personal-finance-note {
    display: inline-flex;
    align-items: center;
    gap: .45rem;
    color: #0f766e;
    font-size: .82rem;
    font-weight: 800;
}

.personal-finance-safe-badge {
    padding: .45rem .7rem;
    border: 1px solid rgba(15, 118, 110, .16);
    border-radius: 999px;
    background: rgba(20, 184, 166, .08);
}

.personal-finance-note {
    width: 100%;
    padding: .75rem .85rem;
    border: 1px solid rgba(15, 118, 110, .12);
    border-radius: .9rem;
    background: rgba(20, 184, 166, .06);
    line-height: 1.35;
}

.personal-finance-breakdown > div {
    min-height: 86px;
}

.personal-finance-category-card .card-body {
    display: flex;
    flex-direction: column;
    min-height: 0;
}

.personal-finance-category-list {
    display: grid;
    gap: .9rem;
    max-height: 25rem;
    overflow-y: auto;
    overscroll-behavior: contain;
    padding-right: .35rem;
}

.personal-finance-category-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: .55rem .9rem;
    align-items: center;
}

.personal-finance-category-row div {
    display: flex;
    align-items: center;
    gap: .55rem;
    min-width: 0;
}

.personal-finance-category-row div span {
    width: .7rem;
    height: .7rem;
    border-radius: 999px;
    flex: 0 0 auto;
}

.personal-finance-category-row strong {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.personal-finance-category-row em {
    font-style: normal;
    font-weight: 800;
}

.personal-finance-category-row small {
    grid-column: 1 / -1;
    height: .45rem;
    border-radius: 999px;
    background: rgba(15, 23, 42, .06);
    overflow: hidden;
}

.personal-finance-category-row small i {
    display: block;
    height: 100%;
    border-radius: inherit;
}

.personal-finance-account-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
    gap: .85rem;
}

.personal-finance-account-card {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto auto;
    gap: .75rem;
    align-items: center;
    padding: 1rem;
    border: 1px solid var(--border-color, rgba(15, 23, 42, .08));
    border-radius: 1rem;
    background: rgba(255, 255, 255, .72);
}

.personal-finance-account-card strong,
.personal-finance-upcoming strong {
    display: block;
    color: var(--body-color, #0f172a);
}

.personal-finance-account-card span,
.personal-finance-upcoming span {
    display: block;
    color: var(--muted, #64748b);
    font-size: .82rem;
}

.personal-finance-account-card b {
    font-size: 1rem;
    white-space: nowrap;
}

.personal-finance-account-card > :first-child {
    min-width: 0;
}

.personal-finance-account-card > :first-child strong {
    overflow-wrap: anywhere;
}

.personal-finance-upcoming {
    display: grid;
    gap: .75rem;
    max-height: 390px;
}

.personal-finance-upcoming article {
    display: flex;
    justify-content: space-between;
    gap: 1rem;
    padding: .85rem;
    border: 1px solid var(--border-color, rgba(15, 23, 42, .08));
    border-radius: 1rem;
    background: rgba(255, 255, 255, .72);
}

@media (max-width: 768px) {
    .personal-finance-hero {
        grid-template-columns: 1fr;
        gap: 1rem;
        padding: 1rem;
    }

    .personal-finance-action-buttons,
    .personal-finance-filter {
        grid-column: 1;
    }

    .personal-finance-table-scroll.is-scrollable {
        max-height: 650px;
    }

    .personal-finance-table-scroll.is-scrollable thead {
        position: static;
    }

    .personal-finance-actions,
    .personal-finance-filter,
    .personal-finance-action-buttons {
        width: 100%;
        justify-items: stretch;
    }

    .personal-finance-filter {
        grid-template-columns: 1fr;
    }

    .personal-finance-action-buttons .btn,
    .personal-finance-filter .btn {
        width: 100%;
        justify-content: center;
    }

    .personal-finance-breakdown {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .personal-finance-flow {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .personal-finance-flow-bars {
        height: 120px;
    }

    .personal-finance-account-card {
        grid-template-columns: minmax(0, 1fr) auto;
    }

    .finance-adjustments {
        max-height: 10.5rem;
        overflow-y: auto;
        overscroll-behavior: contain;
        padding-right: .15rem;
    }

    .personal-finance-upcoming {
        max-height: 21.5rem;
        overflow-y: auto;
        overscroll-behavior: contain;
        padding-right: .15rem;
    }

    .personal-finance-category-list {
        max-height: 20rem;
        padding-right: .2rem;
    }

    .personal-finance-upcoming article {
        flex-direction: column;
    }
}

@media (max-width: 575.98px) {
    .batch-cost-actions {
        grid-template-columns: 1fr;
        padding-top: 0;
    }

    .inventory-toolbar,
    .inventory-toolbar-actions,
    .inventory-toolbar-filter {
        width: 100%;
    }

    .inventory-toolbar-actions,
    .inventory-toolbar-filter {
        display: grid !important;
        grid-template-columns: 1fr;
    }

    .inventory-toolbar-filter .form-control,
    .inventory-toolbar-filter .form-select,
    .inventory-toolbar-filter .searchable-select,
    .inventory-toolbar-actions > .btn,
    .inventory-toolbar-filter .btn {
        width: 100%;
    }

    .inventory-action-bar {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        width: 100%;
    }

    .inventory-action-bar > .btn,
    .inventory-action-bar .dropdown,
    .inventory-action-bar .dropdown > .btn {
        justify-content: center;
        min-width: 0;
        width: 100%;
    }

    .inventory-action-bar .dropdown:last-child:nth-child(odd) {
        grid-column: 1 / -1;
    }

    .inventory-action-menu {
        width: min(19rem, calc(100vw - 2rem));
    }

    .reports-filter-form > [class*='col-'] {
        width: 100%;
    }

    .report-header {
        flex-direction: column;
        gap: .8rem;
    }

    .report-issued {
        text-align: left;
        width: 100%;
    }

    .report-summary {
        display: grid;
        grid-template-columns: 1fr;
    }

    .report-summary span {
        min-width: 0;
        overflow-wrap: anywhere;
    }

    .table-responsive > .cashback-mobile-table td[data-label] {
        grid-template-columns: 1fr;
        align-items: start;
        gap: .15rem;
    }

    .table-responsive > .cashback-mobile-table tr {
        padding: .8rem;
    }

    .report-preview {
        overflow: hidden;
    }

    .report-table-wrap {
        overflow-x: visible;
    }

    .report-table-wrap > .report-table,
    .report-table-wrap > .report-table thead,
    .report-table-wrap > .report-table tbody,
    .report-table-wrap > .report-table tr,
    .report-table-wrap > .report-table td {
        display: block;
        width: 100%;
    }

    .report-table-wrap > .report-table {
        min-width: 0 !important;
        border-collapse: separate;
        border-spacing: 0 .85rem;
    }

    .report-table-wrap > .report-table thead {
        display: none;
    }

    .report-table-wrap > .report-table tr {
        padding: .8rem;
        border: 1px solid var(--line);
        border-radius: 1rem;
        background: color-mix(in srgb, var(--card) 94%, var(--surface-soft) 6%);
        box-shadow: 0 10px 24px rgba(15, 23, 42, .06);
        margin-bottom: .75rem;
    }

    .report-table-wrap > .report-table td {
        border: 0;
        padding: .32rem .15rem;
        min-width: 0;
        text-align: left !important;
        overflow-wrap: anywhere;
    }

    .report-table-wrap > .report-table td[data-label] {
        display: grid;
        grid-template-columns: 1fr;
        gap: .12rem;
    }

    .report-table-wrap > .report-table td[data-label]::before {
        content: attr(data-label);
        color: var(--muted);
        font-size: .68rem;
        font-weight: 900;
        letter-spacing: .05em;
        text-transform: uppercase;
    }

    .report-table-wrap > .report-table .stock-status-badge,
    .report-table-wrap > .report-table .btn {
        width: 100%;
        justify-content: center;
    }
}

@media (min-width: 769px) and (max-width: 980px) {
    .personal-finance-hero {
        grid-template-columns: minmax(0, 1fr) auto;
    }

    .personal-finance-actions {
        width: 100%;
        justify-items: stretch;
    }

    .personal-finance-filter {
        width: 100%;
        grid-template-columns: repeat(2, minmax(0, 1fr)) auto;
    }
}

@media (min-width: 1280px) {
    .personal-finance-account-card {
        grid-template-columns: minmax(0, 1fr) auto;
        grid-template-areas:
            "info info"
            "amount actions";
        align-items: end;
    }

    .personal-finance-account-card > :first-child {
        grid-area: info;
    }

    .personal-finance-account-card > b {
        grid-area: amount;
    }

    .personal-finance-account-card > :last-child {
        grid-area: actions;
        justify-content: flex-end;
    }
}

.report-batch-title {
    display: block;
    max-width: 260px;
    color: #0f172a;
    line-height: 1.25;
    overflow-wrap: anywhere;
}

.report-batch-muted {
    display: block;
    margin-top: .25rem;
    color: #64748b;
    font-size: .82rem;
    line-height: 1.25;
    overflow-wrap: anywhere;
}

.report-batch-stack {
    display: grid;
    grid-template-columns: repeat(2, minmax(90px, 1fr));
    gap: .45rem .75rem;
    min-width: 250px;
}

.report-batch-stack span {
    display: grid;
    gap: .1rem;
    min-width: 0;
    color: #0f172a;
    font-weight: 800;
    line-height: 1.2;
}

.report-batch-stack b {
    color: #64748b;
    font-size: .68rem;
    font-weight: 800;
    letter-spacing: .04em;
    text-transform: uppercase;
}

.report-table-batch td,
.report-table-batch th {
    vertical-align: top;
}

.batch-history-modal .modal-body {
    background: linear-gradient(180deg, rgba(248, 250, 252, .75), #fff);
}

.batch-history-summary {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: .75rem;
}

.batch-history-summary div,
.batch-history-panel {
    border: 1px solid rgba(15, 23, 42, .08);
    border-radius: 1rem;
    background: rgba(255, 255, 255, .9);
    box-shadow: 0 14px 34px rgba(15, 23, 42, .06);
}

.batch-history-summary div {
    padding: .85rem;
}

.batch-history-summary span,
.batch-history-price-list span,
.batch-history-timeline time {
    display: block;
    color: #64748b;
    font-size: .75rem;
    font-weight: 800;
    letter-spacing: .04em;
    text-transform: uppercase;
}

.batch-history-summary strong {
    display: block;
    margin-top: .18rem;
    color: #0f172a;
    font-size: 1rem;
}

.batch-history-panel {
    padding: 1rem;
}

.batch-history-panel-head {
    display: flex;
    justify-content: space-between;
    align-items: start;
    gap: 1rem;
    margin-bottom: .85rem;
}

.batch-history-panel-head h3 {
    margin: 0;
    color: #0f172a;
    font-size: 1rem;
    font-weight: 900;
}

.batch-history-panel-head span {
    color: #64748b;
    font-size: .82rem;
    font-weight: 800;
}

.batch-history-table {
    font-size: .88rem;
}

.batch-history-table th {
    color: #64748b;
    font-size: .72rem;
    letter-spacing: .05em;
    text-transform: uppercase;
    white-space: nowrap;
}

.batch-history-price-list {
    display: grid;
    gap: .55rem;
}

.batch-history-price-list article {
    display: flex;
    justify-content: space-between;
    gap: 1rem;
    padding: .7rem .8rem;
    border-radius: .85rem;
    background: rgba(15, 23, 42, .035);
}

.batch-history-price-list b {
    white-space: nowrap;
}

.batch-history-timeline {
    position: relative;
    display: grid;
    gap: .75rem;
}

.batch-history-event {
    display: grid;
    grid-template-columns: 18px minmax(0, 1fr);
    gap: .75rem;
    align-items: start;
}

.batch-history-event i {
    width: 12px;
    height: 12px;
    margin-top: .25rem;
    border-radius: 999px;
    background: #334155;
    box-shadow: 0 0 0 4px rgba(51, 65, 85, .12);
}

.batch-history-event-sale i {
    background: #16a34a;
    box-shadow: 0 0 0 4px rgba(22, 163, 74, .12);
}

.batch-history-event-price_change i {
    background: #2563eb;
    box-shadow: 0 0 0 4px rgba(37, 99, 235, .12);
}

.batch-history-event-batch_created i {
    background: #f59e0b;
    box-shadow: 0 0 0 4px rgba(245, 158, 11, .14);
}

.batch-history-event strong,
.batch-history-event span {
    display: block;
    overflow-wrap: anywhere;
}

.batch-history-event strong {
    color: #0f172a;
    font-weight: 900;
}

.batch-history-event span {
    color: #475569;
    font-size: .86rem;
}

@media (max-width: 992px) {
    .batch-history-summary {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .report-batch-stack {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        min-width: 0;
    }
}

@media (max-width: 576px) {
    .batch-history-summary {
        grid-template-columns: 1fr;
    }

    .batch-history-price-list article {
        flex-direction: column;
    }
}

.batch-history-scroll {
    max-height: 360px;
    overflow: auto;
    padding-right: .25rem;
    overscroll-behavior: contain;
}

.batch-history-scroll::-webkit-scrollbar {
    width: 8px;
    height: 8px;
}

.batch-history-scroll::-webkit-scrollbar-thumb {
    background: rgba(100, 116, 139, .28);
    border-radius: 999px;
}

.batch-history-scroll::-webkit-scrollbar-track {
    background: rgba(15, 23, 42, .04);
    border-radius: 999px;
}

.batch-history-sales-scroll {
    max-height: 315px;
    padding-right: 0;
}

.batch-history-price-scroll {
    max-height: 220px;
}

.batch-history-table thead th {
    position: sticky;
    top: 0;
    z-index: 2;
    background: rgba(255, 255, 255, .98);
    box-shadow: 0 1px 0 rgba(15, 23, 42, .08);
}

.batch-history-timeline.batch-history-scroll {
    padding-top: .1rem;
}

.batch-history-event {
    padding-bottom: .15rem;
}

@media (max-width: 992px) {
    .batch-history-scroll,
    .batch-history-sales-scroll {
        max-height: 300px;
    }
}

@media (max-width: 767px) {
    .premium-workflow-panel .offcanvas-header {
        padding: 1rem 1rem .9rem;
    }

    .premium-workflow-panel .offcanvas-header::after {
        left: 1rem;
        right: 1rem;
    }

    .premium-flow-hero {
        align-items: flex-start;
        border-radius: 20px;
        padding: .9rem;
    }

    .premium-flow-hero-icon {
        border-radius: 16px;
        flex-basis: 42px;
        height: 42px;
        width: 42px;
    }

    .premium-workflow-form {
        border-radius: 22px;
        padding: .85rem;
    }

    .premium-sale-form .sale-item-entry,
    .premium-sale-form .sale-item-entry:has(.js-sale-variation-wrap.d-none) {
        grid-template-columns: 1fr;
    }

    .premium-sale-form .sale-add-item-btn {
        margin-top: .15rem;
        width: 100%;
    }

    .sale-receipt-card {
        padding: .9rem;
    }

    .sale-form-section-card,
    .sale-form-secondary-card summary,
    .sale-form-secondary-card-body {
        padding-inline: .9rem;
    }

    .sale-receipt-header {
        align-items: stretch;
        flex-direction: column;
        gap: .65rem;
    }

    .sale-receipt-status {
        align-self: flex-start;
    }

    .sale-receipt-grid {
        grid-template-columns: 1fr;
    }

    .premium-sale-form .sale-cashback-box > .d-flex {
        align-items: stretch !important;
    }

    .premium-sale-form .sale-cashback-box > .d-flex > div:first-child,
    .premium-sale-form .sale-cashback-box .btn-group {
        width: 100%;
    }

    .premium-sale-form .sale-cashback-box .btn-group {
        margin-left: 0;
    }

    .sale-form-section-header {
        flex-direction: column;
        gap: .55rem;
    }

    .premium-sale-form .btn-group > .btn {
        min-width: 0;
    }

    .premium-sale-form .sale-cashback-summary {
        grid-template-columns: 1fr;
    }
}

.scheduled-messages-page {
    --scheduled-green: #1f8a5b;
    --scheduled-blue: #2f6fb2;
    --scheduled-cyan: #087b8c;
    --scheduled-amber: #a16207;
    --scheduled-red: #b42318;
    --scheduled-gray: #64748b;
    --scheduled-violet: #7353b8;
}

.scheduled-filter-panel .card-body {
    padding: 1rem;
}

.scheduled-filter-grid {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: .85rem;
    align-items: end;
}

.scheduled-filter-actions {
    align-self: end;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: .55rem;
}

.scheduled-filter-actions .btn {
    min-height: 2.85rem;
    border-radius: .65rem;
    font-weight: 850;
}

.scheduled-last-sync {
    color: var(--muted);
    font-size: .85rem;
    font-weight: 700;
}

.scheduled-status-strip {
    display: grid;
    grid-template-columns: repeat(8, minmax(0, 1fr));
    gap: .65rem;
}

.scheduled-status-chip {
    min-width: 0;
    border: 1px solid var(--line);
    background: color-mix(in srgb, var(--card) 92%, var(--surface-soft) 8%);
    border-radius: .75rem;
    padding: .7rem .8rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .55rem;
    color: var(--text);
    font-weight: 800;
    text-align: left;
}

.scheduled-status-chip span {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.scheduled-status-chip strong {
    color: #fff;
    min-width: 2rem;
    min-height: 2rem;
    border-radius: 999px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: var(--scheduled-gray);
    font-size: .82rem;
}

.scheduled-status-chip.status-scheduled strong,
.scheduled-status-badge.status-scheduled,
.scheduled-day-dots .status-scheduled {
    background: var(--scheduled-blue);
}

.scheduled-status-chip.status-pending strong,
.scheduled-status-badge.status-pending,
.scheduled-day-dots .status-pending {
    background: var(--scheduled-gray);
}

.scheduled-status-chip.status-awaiting strong,
.scheduled-status-badge.status-awaiting,
.scheduled-day-dots .status-awaiting {
    background: var(--scheduled-cyan);
}

.scheduled-status-chip.status-sending strong,
.scheduled-status-badge.status-sending,
.scheduled-day-dots .status-sending {
    background: var(--scheduled-amber);
}

.scheduled-status-chip.status-sent strong,
.scheduled-status-badge.status-sent,
.scheduled-day-dots .status-sent {
    background: var(--scheduled-green);
}

.scheduled-status-chip.status-failed strong,
.scheduled-status-badge.status-failed,
.scheduled-day-dots .status-failed {
    background: var(--scheduled-red);
}

.scheduled-status-chip.status-cancelled strong,
.scheduled-status-badge.status-cancelled,
.scheduled-day-dots .status-cancelled {
    background: #475569;
}

.scheduled-status-chip.status-rescheduled strong,
.scheduled-status-badge.status-rescheduled,
.scheduled-day-dots .status-rescheduled {
    background: var(--scheduled-violet);
}

.scheduled-status-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 1.75rem;
    padding: .35rem .7rem;
    border-radius: 999px;
    color: #fff;
    font-size: .74rem;
    font-weight: 900;
    white-space: nowrap;
}

.scheduled-view-switch {
    display: inline-flex;
    border: 1px solid var(--line);
    border-radius: .85rem;
    padding: .25rem;
    background: color-mix(in srgb, var(--card) 94%, var(--surface-soft) 6%);
    gap: .25rem;
}

.scheduled-view-button {
    border: 0;
    border-radius: .65rem;
    background: transparent;
    color: var(--muted);
    min-height: 2.45rem;
    padding: .45rem .85rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .45rem;
    font-weight: 900;
}

.scheduled-view-button.active {
    background: var(--primary);
    color: #fff;
}

.scheduled-calendar-layout {
    display: grid;
    grid-template-columns: minmax(0, 1.3fr) minmax(22rem, .7fr);
    gap: 1rem;
    align-items: start;
}

.scheduled-calendar-head {
    display: grid;
    grid-template-columns: 2.8rem minmax(0, 1fr) 2.8rem;
    align-items: center;
    gap: .75rem;
    margin-bottom: 1rem;
}

.scheduled-calendar-head strong {
    text-align: center;
    font-size: 1.05rem;
    text-transform: capitalize;
}

.scheduled-calendar-weekdays,
.scheduled-calendar-grid {
    display: grid;
    grid-template-columns: repeat(7, minmax(0, 1fr));
    gap: .45rem;
}

.scheduled-calendar-weekdays {
    margin-bottom: .45rem;
}

.scheduled-calendar-weekdays span {
    color: var(--muted);
    font-size: .72rem;
    font-weight: 900;
    text-align: center;
    text-transform: uppercase;
}

.scheduled-calendar-empty,
.scheduled-calendar-day {
    min-height: 5.75rem;
    border-radius: .75rem;
}

.scheduled-calendar-day {
    position: relative;
    border: 1px solid var(--line);
    background: color-mix(in srgb, var(--card) 94%, var(--surface-soft) 6%);
    color: var(--text);
    padding: .65rem;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: .35rem;
    text-align: left;
}

.scheduled-calendar-day:hover,
.scheduled-calendar-day.active {
    border-color: color-mix(in srgb, var(--primary) 72%, var(--line) 28%);
    box-shadow: 0 10px 24px rgba(15, 23, 42, .10);
}

.scheduled-calendar-day.today::after {
    content: '';
    position: absolute;
    top: .5rem;
    right: .5rem;
    width: .48rem;
    height: .48rem;
    border-radius: 999px;
    background: var(--primary);
}

.scheduled-day-number {
    font-weight: 900;
}

.scheduled-day-count {
    min-width: 1.6rem;
    min-height: 1.6rem;
    border-radius: 999px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: color-mix(in srgb, var(--primary) 12%, transparent 88%);
    color: var(--primary);
    font-size: .76rem;
    font-weight: 900;
}

.scheduled-day-dots {
    margin-top: auto;
    display: flex;
    flex-wrap: wrap;
    gap: .25rem;
}

.scheduled-day-dots i {
    width: .46rem;
    height: .46rem;
    border-radius: 999px;
}

.scheduled-day-list {
    display: grid;
    gap: .65rem;
}

.scheduled-day-message {
    width: 100%;
    border: 1px solid var(--line);
    background: color-mix(in srgb, var(--card) 96%, var(--surface-soft) 4%);
    color: var(--text);
    border-radius: .75rem;
    padding: .75rem;
    display: grid;
    grid-template-columns: 4.2rem minmax(0, 1fr) minmax(7rem, auto) auto;
    gap: .75rem;
    align-items: center;
    text-align: left;
}

.scheduled-day-message:hover {
    border-color: color-mix(in srgb, var(--primary) 62%, var(--line) 38%);
}

.scheduled-day-time {
    font-size: 1rem;
    font-weight: 900;
    color: var(--primary);
}

.scheduled-day-main,
.scheduled-day-meta {
    min-width: 0;
    display: grid;
    gap: .15rem;
}

.scheduled-day-main small,
.scheduled-day-meta span {
    color: var(--muted);
    font-size: .78rem;
}

.scheduled-table {
    min-width: 1100px;
}

.scheduled-detail-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: .75rem;
}

.scheduled-detail-grid > div {
    min-width: 0;
    border: 1px solid var(--line);
    border-radius: .75rem;
    padding: .75rem;
    background: color-mix(in srgb, var(--card) 96%, var(--surface-soft) 4%);
}

.scheduled-detail-grid span {
    display: block;
    color: var(--muted);
    font-size: .72rem;
    font-weight: 900;
    text-transform: uppercase;
    margin-bottom: .25rem;
}

.scheduled-detail-grid strong {
    display: block;
    min-width: 0;
}

.scheduled-message-box {
    border: 1px solid var(--line);
    border-radius: .75rem;
    padding: .85rem;
    background: color-mix(in srgb, var(--card) 96%, var(--surface-soft) 4%);
}

.scheduled-message-box pre {
    margin: 0;
    white-space: pre-wrap;
    font-family: inherit;
    font-size: .94rem;
    line-height: 1.55;
}

.scheduled-history-item {
    position: relative;
    display: grid;
    grid-template-columns: 1.1rem minmax(0, 1fr);
    gap: .65rem;
    padding-bottom: .85rem;
}

.scheduled-history-item:not(:last-child)::before {
    content: '';
    position: absolute;
    left: .31rem;
    top: .72rem;
    bottom: -.1rem;
    width: 1px;
    background: var(--line);
}

.scheduled-history-dot {
    width: .68rem;
    height: .68rem;
    margin-top: .35rem;
    border-radius: 999px;
    background: var(--primary);
    position: relative;
    z-index: 1;
}

.scheduled-history-item strong,
.scheduled-history-item small,
.scheduled-history-item p {
    display: block;
}

.scheduled-history-item small {
    color: var(--muted);
}

.scheduled-history-item p {
    margin: .25rem 0 0;
}

.scheduled-variable-chips {
    display: flex;
    flex-wrap: wrap;
    gap: .4rem;
}

.scheduled-empty-state {
    min-height: 8rem;
    border: 1px dashed var(--line);
    border-radius: .75rem;
    display: grid;
    place-items: center;
    align-content: center;
    gap: .35rem;
    color: var(--muted);
    text-align: center;
}

.scheduled-empty-state i {
    font-size: 1.4rem;
}

.scheduled-toast-wrap {
    z-index: 2400;
}

.scheduled-detail-actions .btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .4rem;
}

html[data-theme='dark'] .scheduled-status-chip,
html[data-theme='dark'] .scheduled-view-switch,
html[data-theme='dark'] .scheduled-calendar-day,
html[data-theme='dark'] .scheduled-day-message,
html[data-theme='dark'] .scheduled-detail-grid > div,
html[data-theme='dark'] .scheduled-message-box {
    background: #151515;
}

@media (max-width: 1200px) {
    .scheduled-filter-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .scheduled-status-strip {
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }

    .scheduled-calendar-layout {
        grid-template-columns: 1fr;
    }

    .scheduled-detail-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 768px) {
    .scheduled-filter-grid,
    .scheduled-status-strip,
    .scheduled-detail-grid {
        grid-template-columns: 1fr;
    }

    .scheduled-view-switch {
        width: 100%;
        display: grid;
        grid-template-columns: 1fr 1fr;
    }

    .scheduled-calendar-weekdays,
    .scheduled-calendar-grid {
        gap: .28rem;
    }

    .scheduled-calendar-empty,
    .scheduled-calendar-day {
        min-height: 4.45rem;
        border-radius: .65rem;
    }

    .scheduled-calendar-day {
        padding: .45rem;
    }

    .scheduled-day-message {
        grid-template-columns: minmax(0, 1fr);
        gap: .45rem;
    }

    .scheduled-detail-actions {
        align-items: stretch;
        display: grid;
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: .45rem;
        padding: .6rem .65rem calc(.65rem + env(safe-area-inset-bottom, 0px));
        border-top: 1px solid var(--line);
        background: color-mix(in srgb, var(--card) 98%, var(--surface-soft) 2%);
        box-shadow: 0 -10px 24px rgba(15, 23, 42, .07);
    }

    .scheduled-detail-actions .btn {
        min-width: 0;
        min-height: 2.55rem;
        margin: 0;
        padding: .42rem .35rem;
        border-radius: .72rem;
        font-size: .75rem;
        font-weight: 850;
        line-height: 1.08;
        white-space: nowrap;
        width: 100%;
    }

    .scheduled-detail-close-action {
        display: none !important;
    }

    #detailSendNowBtn {
        grid-column: 1 / -1;
        order: 1;
        min-height: 2.35rem;
        border-radius: .72rem;
        font-size: .82rem;
        box-shadow: 0 8px 16px rgba(70, 87, 121, .16);
    }

    #detailEditBtn,
    #detailRescheduleBtn,
    #detailDuplicateBtn,
    #detailReactivateBtn {
        flex-direction: column;
        gap: .2rem;
        min-height: 2.85rem;
        border-color: color-mix(in srgb, var(--primary) 18%, var(--line) 82%);
        background: color-mix(in srgb, var(--primary) 3%, var(--card) 97%);
        color: color-mix(in srgb, var(--primary) 82%, var(--text) 18%);
        font-size: 0;
    }

    #detailEditBtn i,
    #detailRescheduleBtn i,
    #detailDuplicateBtn i,
    #detailReactivateBtn i,
    #detailCancelBtn i,
    #detailSendNowBtn i {
        margin: 0;
        font-size: .95rem;
        line-height: 1;
    }

    #detailEditBtn::after,
    #detailRescheduleBtn::after,
    #detailDuplicateBtn::after,
    #detailReactivateBtn::after {
        font-size: .68rem;
        line-height: 1;
    }

    #detailEditBtn {
        order: 2;
    }

    #detailEditBtn::after {
        content: 'Editar';
    }

    #detailRescheduleBtn {
        order: 3;
    }

    #detailRescheduleBtn::after {
        content: 'Reagendar';
    }

    #detailDuplicateBtn {
        order: 4;
    }

    #detailDuplicateBtn::after {
        content: 'Duplicar';
    }

    #detailReactivateBtn {
        order: 5;
    }

    #detailReactivateBtn::after {
        content: 'Reativar';
    }

    #detailCancelBtn {
        grid-column: 1 / -1;
        order: 6;
        min-height: 2.4rem;
        border-color: color-mix(in srgb, #dc3545 28%, var(--line) 72%);
        background: color-mix(in srgb, #dc3545 3%, var(--card) 97%);
        font-size: 0;
    }

    #detailCancelBtn::after {
        content: 'Cancelar agendamento';
        font-size: .78rem;
    }
}

.scheduled-board-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: 1.05rem;
    border: 1px solid color-mix(in srgb, var(--line) 78%, #ffffff 22%);
    border-radius: .85rem;
    background: linear-gradient(135deg, color-mix(in srgb, var(--card) 97%, #f8fbff 3%), color-mix(in srgb, var(--card) 91%, #edf7fb 9%));
    box-shadow: 0 16px 36px rgba(15, 23, 42, .08);
    letter-spacing: 0;
}

.scheduled-title-group,
.scheduled-board-actions {
    display: flex;
    align-items: center;
    gap: .85rem;
    min-width: 0;
}

.scheduled-board-actions {
    justify-content: flex-end;
    flex-wrap: wrap;
}

.scheduled-board-icon {
    width: 3.15rem;
    height: 3.15rem;
    border-radius: .75rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    color: #ffffff;
    background: #2f6fb2;
    box-shadow: inset 0 -10px 18px rgba(0, 0, 0, .12);
}

.scheduled-eyebrow,
.scheduled-day-card-kicker {
    color: var(--muted);
    font-size: .72rem;
    font-weight: 900;
    text-transform: uppercase;
    letter-spacing: 0;
}

.scheduled-last-sync {
    min-height: 2.45rem;
    padding: .45rem .8rem;
    border: 1px solid var(--line);
    border-radius: 999px;
    background: color-mix(in srgb, var(--card) 94%, var(--surface-soft) 6%);
    display: inline-flex;
    align-items: center;
    gap: .45rem;
    font-size: .85rem;
}

.scheduled-last-sync i {
    color: #1f8a5b;
}

.scheduled-board-card {
    border-radius: .85rem;
    border-color: color-mix(in srgb, var(--line) 86%, #ffffff 14%);
    box-shadow: 0 16px 34px rgba(15, 23, 42, .07);
}

.scheduled-board-toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .75rem;
}

.scheduled-refresh-button {
    min-height: 2.45rem;
    border-radius: .7rem;
    font-weight: 850;
}

.scheduled-panel-title {
    display: inline-flex;
    align-items: center;
    gap: .45rem;
    margin-bottom: .85rem;
    color: var(--text);
    font-weight: 900;
}

.scheduled-panel-title i {
    color: var(--primary);
}

.scheduled-filter-grid {
    grid-template-columns: repeat(5, minmax(9.5rem, 1fr));
    gap: .75rem .85rem;
}

.scheduled-filter-grid .form-label {
    margin-bottom: .35rem;
    color: color-mix(in srgb, var(--text) 88%, var(--muted) 12%);
    font-size: .83rem;
    font-weight: 850;
}

.scheduled-filter-grid .form-control,
.scheduled-filter-grid .form-select {
    min-height: 2.85rem;
    border-radius: .65rem;
    border-color: color-mix(in srgb, var(--line) 82%, var(--muted) 18%);
    background-color: color-mix(in srgb, var(--card) 96%, var(--surface-soft) 4%);
    font-weight: 650;
}

.scheduled-status-strip {
    grid-template-columns: repeat(auto-fit, minmax(10.75rem, 1fr));
    gap: .75rem;
}

.scheduled-status-chip {
    min-height: 4.35rem;
    padding: .72rem;
    border-radius: .85rem;
    display: grid;
    grid-template-columns: 2.35rem minmax(0, 1fr) auto;
    align-items: center;
    background: #ffffff;
    box-shadow: 0 12px 26px rgba(15, 23, 42, .06);
    transition: transform .16s ease, border-color .16s ease, box-shadow .16s ease;
}

.scheduled-status-chip:hover,
.scheduled-status-chip.active {
    transform: translateY(-1px);
    border-color: color-mix(in srgb, var(--primary) 56%, var(--line) 44%);
    box-shadow: 0 18px 34px rgba(15, 23, 42, .10);
}

.scheduled-status-icon {
    width: 2.35rem;
    height: 2.35rem;
    border-radius: .7rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: #ffffff;
    background: var(--scheduled-gray);
}

.scheduled-status-copy {
    min-width: 0;
    display: grid;
    gap: .1rem;
}

.scheduled-status-copy strong {
    min-height: auto;
    width: auto;
    border-radius: 0;
    display: block;
    background: transparent;
    color: var(--text);
    font-size: .93rem;
    line-height: 1.1;
}

.scheduled-status-copy small {
    color: var(--muted);
    font-size: .76rem;
    font-weight: 800;
}

.scheduled-status-total {
    min-width: 2.1rem;
    min-height: 2.1rem;
    border-radius: 999px;
    color: #ffffff;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: .84rem;
    font-weight: 950;
    background: var(--scheduled-gray);
}

.scheduled-status-chip.status-scheduled .scheduled-status-icon,
.scheduled-status-chip.status-scheduled .scheduled-status-total {
    background: var(--scheduled-blue);
}

.scheduled-status-chip.status-awaiting .scheduled-status-icon,
.scheduled-status-chip.status-awaiting .scheduled-status-total {
    background: var(--scheduled-cyan);
}

.scheduled-status-chip.status-sending .scheduled-status-icon,
.scheduled-status-chip.status-sending .scheduled-status-total {
    background: var(--scheduled-amber);
}

.scheduled-status-chip.status-sent .scheduled-status-icon,
.scheduled-status-chip.status-sent .scheduled-status-total {
    background: var(--scheduled-green);
}

.scheduled-status-chip.status-failed .scheduled-status-icon,
.scheduled-status-chip.status-failed .scheduled-status-total {
    background: var(--scheduled-red);
}

.scheduled-status-chip.status-cancelled .scheduled-status-icon,
.scheduled-status-chip.status-cancelled .scheduled-status-total {
    background: #475569;
}

.scheduled-status-chip.status-rescheduled .scheduled-status-icon,
.scheduled-status-chip.status-rescheduled .scheduled-status-total {
    background: var(--scheduled-violet);
}

.scheduled-calendar-day {
    min-height: 7.05rem;
    border-radius: .8rem;
    padding: .7rem;
    background: #ffffff;
    transition: transform .14s ease, box-shadow .14s ease, border-color .14s ease;
}

.scheduled-calendar-day:hover {
    transform: translateY(-1px);
}

.scheduled-calendar-day.active {
    border-color: #465779;
    box-shadow: inset 0 0 0 1px #465779, 0 16px 28px rgba(15, 23, 42, .10);
}

.scheduled-day-top {
    width: 100%;
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: .35rem;
}

.scheduled-day-status-stack {
    width: 100%;
    margin-top: auto;
    display: grid;
    gap: .28rem;
}

.scheduled-day-status-line {
    min-width: 0;
    min-height: 1.2rem;
    border-radius: .42rem;
    display: grid;
    grid-template-columns: .42rem minmax(0, 1fr) auto;
    align-items: center;
    gap: .32rem;
    padding: .18rem .32rem;
    background: rgba(100, 116, 139, .09);
    color: var(--text);
    font-size: .68rem;
    font-weight: 900;
}

.scheduled-day-status-line i {
    width: .42rem;
    height: .42rem;
    border-radius: 999px;
    background: currentColor;
}

.scheduled-day-status-line span {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.scheduled-day-status-line.status-scheduled {
    color: var(--scheduled-blue);
}

.scheduled-day-status-line.status-pending {
    color: var(--scheduled-gray);
}

.scheduled-day-status-line.status-awaiting {
    color: var(--scheduled-cyan);
}

.scheduled-day-status-line.status-sending {
    color: var(--scheduled-amber);
}

.scheduled-day-status-line.status-sent {
    color: var(--scheduled-green);
}

.scheduled-day-status-line.status-failed {
    color: var(--scheduled-red);
}

.scheduled-day-status-line.status-cancelled {
    color: #475569;
}

.scheduled-day-status-line.status-rescheduled {
    color: var(--scheduled-violet);
}

.scheduled-day-card {
    position: sticky;
    top: 1rem;
}

.scheduled-day-message {
    position: relative;
    overflow: hidden;
    grid-template-columns: .28rem 4.15rem minmax(0, 1fr) minmax(6.5rem, auto) auto;
    border-radius: .8rem;
    background: #ffffff;
    box-shadow: 0 10px 22px rgba(15, 23, 42, .06);
}

.scheduled-day-message-rail {
    align-self: stretch;
    width: .28rem;
    border-radius: 999px;
    background: var(--scheduled-gray);
}

.scheduled-day-message.status-scheduled .scheduled-day-message-rail {
    background: var(--scheduled-blue);
}

.scheduled-day-message.status-awaiting .scheduled-day-message-rail {
    background: var(--scheduled-cyan);
}

.scheduled-day-message.status-sending .scheduled-day-message-rail {
    background: var(--scheduled-amber);
}

.scheduled-day-message.status-sent .scheduled-day-message-rail {
    background: var(--scheduled-green);
}

.scheduled-day-message.status-failed .scheduled-day-message-rail {
    background: var(--scheduled-red);
}

.scheduled-day-message.status-cancelled .scheduled-day-message-rail {
    background: #475569;
}

.scheduled-day-message.status-rescheduled .scheduled-day-message-rail {
    background: var(--scheduled-violet);
}

.scheduled-message-tags {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: .35rem;
}

.scheduled-message-tags span {
    max-width: 10rem;
    border: 1px solid var(--line);
    border-radius: 999px;
    padding: .25rem .55rem;
    background: color-mix(in srgb, var(--surface-soft) 50%, #ffffff 50%);
    color: var(--muted);
    font-size: .72rem;
    font-weight: 850;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.scheduled-table {
    border-collapse: separate;
    border-spacing: 0 .55rem;
}

.scheduled-table tbody tr {
    background: #ffffff;
    box-shadow: 0 10px 22px rgba(15, 23, 42, .05);
}

.scheduled-table tbody td {
    border-top: 1px solid var(--line);
    border-bottom: 1px solid var(--line);
    padding-top: .85rem;
    padding-bottom: .85rem;
}

.scheduled-table tbody td:first-child {
    border-left: 1px solid var(--line);
    border-radius: .75rem 0 0 .75rem;
}

.scheduled-table tbody tr.status-scheduled td:first-child {
    border-left: 4px solid var(--scheduled-blue);
}

.scheduled-table tbody tr.status-pending td:first-child {
    border-left: 4px solid var(--scheduled-gray);
}

.scheduled-table tbody tr.status-awaiting td:first-child {
    border-left: 4px solid var(--scheduled-cyan);
}

.scheduled-table tbody tr.status-sending td:first-child {
    border-left: 4px solid var(--scheduled-amber);
}

.scheduled-table tbody tr.status-sent td:first-child {
    border-left: 4px solid var(--scheduled-green);
}

.scheduled-table tbody tr.status-failed td:first-child {
    border-left: 4px solid var(--scheduled-red);
}

.scheduled-table tbody tr.status-cancelled td:first-child {
    border-left: 4px solid #475569;
}

.scheduled-table tbody tr.status-rescheduled td:first-child {
    border-left: 4px solid var(--scheduled-violet);
}

.scheduled-table tbody td:last-child {
    border-right: 1px solid var(--line);
    border-radius: 0 .75rem .75rem 0;
}

.scheduled-customer-cell {
    min-width: 0;
    display: inline-flex;
    align-items: center;
    gap: .65rem;
}

.scheduled-customer-cell > span:last-child {
    min-width: 0;
    display: grid;
    gap: .1rem;
}

.scheduled-customer-cell small {
    color: var(--muted);
    font-size: .75rem;
    font-weight: 800;
}

.scheduled-avatar {
    width: 2.25rem;
    height: 2.25rem;
    border-radius: .68rem;
    background: color-mix(in srgb, var(--primary) 15%, #ffffff 85%);
    color: var(--primary);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    font-size: .75rem;
    font-weight: 950;
}

@media (max-width: 992px) {
    .scheduled-board-header {
        flex-direction: column;
        align-items: stretch;
    }

    .scheduled-board-actions .btn,
    .scheduled-last-sync {
        justify-content: center;
    }

    .scheduled-day-card {
        position: static;
    }
}

@media (max-width: 768px) {
    .scheduled-filter-grid,
    .scheduled-status-strip {
        grid-template-columns: 1fr;
    }

    .scheduled-day-message {
        grid-template-columns: .28rem minmax(0, 1fr);
    }

    .scheduled-day-time,
    .scheduled-day-main,
    .scheduled-message-tags,
    .scheduled-day-message .scheduled-status-badge {
        grid-column: 2;
        justify-self: start;
    }
}

html[data-theme='dark'] .scheduled-board-header {
    border-color: #262626;
    background: linear-gradient(135deg, #151515, #101417);
    box-shadow: 0 16px 36px rgba(0, 0, 0, .22);
}

html[data-theme='dark'] .scheduled-board-card,
html[data-theme='dark'] .scheduled-status-chip,
html[data-theme='dark'] .scheduled-calendar-day,
html[data-theme='dark'] .scheduled-day-message,
html[data-theme='dark'] .scheduled-table tbody tr {
    background: #151515;
    box-shadow: 0 14px 30px rgba(0, 0, 0, .24);
}

html[data-theme='dark'] .scheduled-last-sync,
html[data-theme='dark'] .scheduled-message-tags span {
    background: #0f0f0f;
    border-color: #262626;
}

html[data-theme='dark'] .scheduled-filter-grid .form-control,
html[data-theme='dark'] .scheduled-filter-grid .form-select {
    background-color: #101010;
    border-color: #262626;
    color: #ffffff;
}

html[data-theme='dark'] .scheduled-avatar {
    background: #202b3c;
    color: #d6e4ff;
}

.scheduled-messages-page {
    --scheduled-status-scheduled: #465779;
    --scheduled-status-pending: #64748b;
    --scheduled-status-awaiting: #3f6470;
    --scheduled-status-sending: #75613a;
    --scheduled-status-sent: #2f6f55;
    --scheduled-status-failed: #8b3a3a;
    --scheduled-status-cancelled: #475569;
    --scheduled-status-rescheduled: #5b5875;
}

.scheduled-status-chip.status-scheduled,
.scheduled-status-badge.status-scheduled,
.scheduled-day-status-line.status-scheduled,
.scheduled-day-message.status-scheduled,
.scheduled-table tbody tr.status-scheduled {
    --scheduled-status-color: var(--scheduled-status-scheduled);
}

.scheduled-status-chip.status-pending,
.scheduled-status-badge.status-pending,
.scheduled-day-status-line.status-pending,
.scheduled-day-message.status-pending,
.scheduled-table tbody tr.status-pending {
    --scheduled-status-color: var(--scheduled-status-pending);
}

.scheduled-status-chip.status-awaiting,
.scheduled-status-badge.status-awaiting,
.scheduled-day-status-line.status-awaiting,
.scheduled-day-message.status-awaiting,
.scheduled-table tbody tr.status-awaiting {
    --scheduled-status-color: var(--scheduled-status-awaiting);
}

.scheduled-status-chip.status-sending,
.scheduled-status-badge.status-sending,
.scheduled-day-status-line.status-sending,
.scheduled-day-message.status-sending,
.scheduled-table tbody tr.status-sending {
    --scheduled-status-color: var(--scheduled-status-sending);
}

.scheduled-status-chip.status-sent,
.scheduled-status-badge.status-sent,
.scheduled-day-status-line.status-sent,
.scheduled-day-message.status-sent,
.scheduled-table tbody tr.status-sent {
    --scheduled-status-color: var(--scheduled-status-sent);
}

.scheduled-status-chip.status-failed,
.scheduled-status-badge.status-failed,
.scheduled-day-status-line.status-failed,
.scheduled-day-message.status-failed,
.scheduled-table tbody tr.status-failed {
    --scheduled-status-color: var(--scheduled-status-failed);
}

.scheduled-status-chip.status-cancelled,
.scheduled-status-badge.status-cancelled,
.scheduled-day-status-line.status-cancelled,
.scheduled-day-message.status-cancelled,
.scheduled-table tbody tr.status-cancelled {
    --scheduled-status-color: var(--scheduled-status-cancelled);
}

.scheduled-status-chip.status-rescheduled,
.scheduled-status-badge.status-rescheduled,
.scheduled-day-status-line.status-rescheduled,
.scheduled-day-message.status-rescheduled,
.scheduled-table tbody tr.status-rescheduled {
    --scheduled-status-color: var(--scheduled-status-rescheduled);
}

.scheduled-board-header {
    background: color-mix(in srgb, var(--card) 96%, var(--surface-soft) 4%);
}

.scheduled-board-icon {
    background: var(--primary);
}

.scheduled-status-chip {
    background: color-mix(in srgb, var(--card) 97%, var(--surface-soft) 3%);
    box-shadow: 0 10px 24px rgba(15, 23, 42, .045);
}

.scheduled-status-icon,
.scheduled-status-total,
.scheduled-status-chip.status-scheduled .scheduled-status-icon,
.scheduled-status-chip.status-scheduled .scheduled-status-total,
.scheduled-status-chip.status-awaiting .scheduled-status-icon,
.scheduled-status-chip.status-awaiting .scheduled-status-total,
.scheduled-status-chip.status-sending .scheduled-status-icon,
.scheduled-status-chip.status-sending .scheduled-status-total,
.scheduled-status-chip.status-sent .scheduled-status-icon,
.scheduled-status-chip.status-sent .scheduled-status-total,
.scheduled-status-chip.status-failed .scheduled-status-icon,
.scheduled-status-chip.status-failed .scheduled-status-total,
.scheduled-status-chip.status-cancelled .scheduled-status-icon,
.scheduled-status-chip.status-cancelled .scheduled-status-total,
.scheduled-status-chip.status-rescheduled .scheduled-status-icon,
.scheduled-status-chip.status-rescheduled .scheduled-status-total {
    border: 1px solid color-mix(in srgb, var(--scheduled-status-color, var(--muted)) 18%, var(--line) 82%);
    background: color-mix(in srgb, var(--scheduled-status-color, var(--muted)) 8%, var(--card) 92%);
    color: var(--scheduled-status-color, var(--muted));
}

.scheduled-status-chip.active .scheduled-status-icon,
.scheduled-status-chip.active .scheduled-status-total {
    background: var(--primary);
    border-color: var(--primary);
    color: #ffffff;
}

.scheduled-status-badge,
.scheduled-status-badge.status-scheduled,
.scheduled-status-badge.status-pending,
.scheduled-status-badge.status-awaiting,
.scheduled-status-badge.status-sending,
.scheduled-status-badge.status-sent,
.scheduled-status-badge.status-failed,
.scheduled-status-badge.status-cancelled,
.scheduled-status-badge.status-rescheduled {
    background: color-mix(in srgb, var(--card) 96%, var(--surface-soft) 4%);
    border: 1px solid var(--line);
    box-shadow: inset 3px 0 0 var(--scheduled-status-color, var(--muted));
    color: color-mix(in srgb, var(--text) 86%, var(--scheduled-status-color, var(--muted)) 14%);
}

.scheduled-day-status-line,
.scheduled-day-status-line.status-scheduled,
.scheduled-day-status-line.status-pending,
.scheduled-day-status-line.status-awaiting,
.scheduled-day-status-line.status-sending,
.scheduled-day-status-line.status-sent,
.scheduled-day-status-line.status-failed,
.scheduled-day-status-line.status-cancelled,
.scheduled-day-status-line.status-rescheduled {
    background: rgba(100, 116, 139, .075);
    color: var(--text);
}

.scheduled-day-status-line i,
.scheduled-day-message-rail {
    background: var(--scheduled-status-color, var(--muted));
}

.scheduled-day-message.status-scheduled .scheduled-day-message-rail {
    background: var(--scheduled-status-scheduled);
}

.scheduled-day-message.status-pending .scheduled-day-message-rail {
    background: var(--scheduled-status-pending);
}

.scheduled-day-message.status-awaiting .scheduled-day-message-rail {
    background: var(--scheduled-status-awaiting);
}

.scheduled-day-message.status-sending .scheduled-day-message-rail {
    background: var(--scheduled-status-sending);
}

.scheduled-day-message.status-sent .scheduled-day-message-rail {
    background: var(--scheduled-status-sent);
}

.scheduled-day-message.status-failed .scheduled-day-message-rail {
    background: var(--scheduled-status-failed);
}

.scheduled-day-message.status-cancelled .scheduled-day-message-rail {
    background: var(--scheduled-status-cancelled);
}

.scheduled-day-message.status-rescheduled .scheduled-day-message-rail {
    background: var(--scheduled-status-rescheduled);
}

.scheduled-table tbody tr.status-scheduled td:first-child {
    border-left-color: var(--scheduled-status-scheduled);
}

.scheduled-table tbody tr.status-pending td:first-child {
    border-left-color: var(--scheduled-status-pending);
}

.scheduled-table tbody tr.status-awaiting td:first-child {
    border-left-color: var(--scheduled-status-awaiting);
}

.scheduled-table tbody tr.status-sending td:first-child {
    border-left-color: var(--scheduled-status-sending);
}

.scheduled-table tbody tr.status-sent td:first-child {
    border-left-color: var(--scheduled-status-sent);
}

.scheduled-table tbody tr.status-failed td:first-child {
    border-left-color: var(--scheduled-status-failed);
}

.scheduled-table tbody tr.status-cancelled td:first-child {
    border-left-color: var(--scheduled-status-cancelled);
}

.scheduled-table tbody tr.status-rescheduled td:first-child {
    border-left-color: var(--scheduled-status-rescheduled);
}

html[data-theme='dark'] .scheduled-status-icon,
html[data-theme='dark'] .scheduled-status-total,
html[data-theme='dark'] .scheduled-status-badge {
    background: #101010;
    border-color: #262626;
}

.scheduled-status-strip {
    grid-template-columns: repeat(auto-fit, minmax(12.25rem, 1fr));
    gap: .9rem;
}

.scheduled-status-chip {
    position: relative;
    overflow: hidden;
    min-height: 4.75rem;
    padding: .88rem .95rem;
    border-radius: .9rem;
    grid-template-columns: 2.55rem minmax(0, 1fr) auto;
    border-color: color-mix(in srgb, var(--line) 88%, var(--scheduled-status-color, var(--muted)) 12%);
    background: linear-gradient(180deg, color-mix(in srgb, var(--card) 98%, var(--surface-soft) 2%), color-mix(in srgb, var(--card) 94%, var(--surface-soft) 6%));
    box-shadow: 0 12px 26px rgba(15, 23, 42, .055);
}

.scheduled-status-chip::before {
    content: '';
    position: absolute;
    inset: 0 auto 0 0;
    width: 3px;
    background: var(--scheduled-status-color, var(--muted));
    opacity: .46;
}

.scheduled-status-chip:hover,
.scheduled-status-chip.active {
    border-color: color-mix(in srgb, var(--scheduled-status-color, var(--primary)) 34%, var(--line) 66%);
    background: color-mix(in srgb, var(--card) 95%, var(--surface-soft) 5%);
    box-shadow: 0 16px 32px rgba(15, 23, 42, .085);
}

.scheduled-status-chip.active::before {
    opacity: .9;
    width: 4px;
}

.scheduled-status-chip .scheduled-status-copy {
    gap: .16rem;
    white-space: normal;
}

.scheduled-status-chip .scheduled-status-copy strong,
.scheduled-status-chip.status-scheduled .scheduled-status-copy strong,
.scheduled-status-chip.status-pending .scheduled-status-copy strong,
.scheduled-status-chip.status-awaiting .scheduled-status-copy strong,
.scheduled-status-chip.status-sending .scheduled-status-copy strong,
.scheduled-status-chip.status-sent .scheduled-status-copy strong,
.scheduled-status-chip.status-failed .scheduled-status-copy strong,
.scheduled-status-chip.status-cancelled .scheduled-status-copy strong,
.scheduled-status-chip.status-rescheduled .scheduled-status-copy strong {
    min-width: 0;
    min-height: 0;
    width: auto;
    padding: 0;
    border: 0;
    border-radius: 0;
    display: block;
    background: transparent;
    box-shadow: none;
    color: var(--text);
    font-size: .94rem;
    font-weight: 900;
    line-height: 1.15;
    white-space: normal;
}

.scheduled-status-chip .scheduled-status-copy small {
    color: var(--muted);
    font-size: .75rem;
    font-weight: 850;
    line-height: 1.2;
    white-space: normal;
}

.scheduled-status-icon,
.scheduled-status-total {
    position: relative;
    z-index: 1;
}

.scheduled-status-icon {
    width: 2.5rem;
    height: 2.5rem;
    border-radius: .78rem;
}

.scheduled-status-total {
    min-width: 1.85rem;
    min-height: 1.85rem;
    font-size: .78rem;
}

html[data-theme='dark'] .scheduled-status-chip {
    background: linear-gradient(180deg, #171717, #121212);
    border-color: #262626;
}

.scheduled-status-strip {
    grid-template-columns: repeat(auto-fit, minmax(15.75rem, 1fr));
    gap: 1rem;
}

.scheduled-status-chip {
    min-height: 5.25rem;
    padding: 1rem 3.65rem 1rem 1rem;
    grid-template-columns: 2.75rem minmax(0, 1fr);
    column-gap: .9rem;
}

.scheduled-status-icon {
    width: 2.65rem;
    height: 2.65rem;
}

.scheduled-status-total {
    position: absolute;
    top: 50%;
    right: 1rem;
    transform: translateY(-50%);
    min-width: 2rem;
    min-height: 2rem;
}

.scheduled-calendar-layout {
    grid-template-columns: 1fr;
}

.scheduled-calendar-card .card-body {
    padding: 1.15rem;
}

.scheduled-calendar-grid {
    gap: .65rem;
}

.scheduled-calendar-day {
    min-height: 7.45rem;
}

.scheduled-calendar-detail-count {
    min-width: 2rem;
    min-height: 2rem;
    border-radius: 999px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: color-mix(in srgb, var(--primary) 10%, var(--card) 90%);
    color: var(--primary);
    font-size: .82rem;
    font-weight: 950;
}

.scheduled-day-offcanvas {
    --bs-offcanvas-width: min(42rem, 96vw);
    border-left: 1px solid color-mix(in srgb, var(--line) 82%, var(--card) 18%);
    background: color-mix(in srgb, var(--card) 97%, var(--surface-soft) 3%);
    color: var(--text);
}

.scheduled-day-offcanvas .offcanvas-header {
    align-items: flex-start;
    gap: 1rem;
    padding: 1.15rem 1.2rem;
    border-bottom: 1px solid var(--line);
    background: color-mix(in srgb, var(--card) 98%, var(--surface-soft) 2%);
}

.scheduled-day-offcanvas .offcanvas-body {
    padding: 1.1rem 1.2rem 1.25rem;
    overflow-y: auto;
}

.scheduled-day-offcanvas .scheduled-day-list {
    gap: .85rem;
}

.scheduled-day-offcanvas .scheduled-day-message {
    grid-template-columns: .3rem 4.65rem minmax(0, 1fr) auto;
    align-items: start;
    padding: .95rem;
}

.scheduled-day-offcanvas .scheduled-message-tags {
    grid-column: 3 / 5;
    justify-content: flex-start;
}

.scheduled-day-offcanvas .scheduled-status-badge {
    justify-self: end;
}

.scheduled-day-offcanvas .scheduled-empty-state {
    min-height: 13rem;
    border-radius: .9rem;
    background: color-mix(in srgb, var(--card) 94%, var(--surface-soft) 6%);
}

html[data-theme='dark'] .scheduled-day-offcanvas {
    background: #101010;
    border-color: #262626;
    color: #ffffff;
}

html[data-theme='dark'] .scheduled-day-offcanvas .offcanvas-header,
html[data-theme='dark'] .scheduled-day-offcanvas .scheduled-empty-state {
    background: #151515;
    border-color: #262626;
}

@media (max-width: 768px) {
    .scheduled-status-strip {
        grid-template-columns: 1fr;
    }

    .scheduled-status-chip {
        min-height: 4.85rem;
    }

    .scheduled-calendar-card .card-body {
        padding: .85rem;
    }

    .scheduled-calendar-day {
        min-height: 5.25rem;
    }

    .scheduled-day-offcanvas .scheduled-day-message {
        grid-template-columns: .28rem minmax(0, 1fr);
    }

    .scheduled-day-offcanvas .scheduled-day-time,
    .scheduled-day-offcanvas .scheduled-day-main,
    .scheduled-day-offcanvas .scheduled-message-tags,
    .scheduled-day-offcanvas .scheduled-status-badge {
        grid-column: 2;
        justify-self: start;
    }
}

.scheduled-status-strip {
    padding: 1.15rem;
    border: 1px solid color-mix(in srgb, var(--line) 86%, var(--card) 14%);
    border-radius: 1rem;
    background: color-mix(in srgb, var(--card) 92%, var(--surface-soft) 8%);
    box-shadow: 0 14px 30px rgba(15, 23, 42, .055);
    grid-template-columns: repeat(auto-fit, minmax(16.75rem, 1fr));
    gap: 1rem;
}

.scheduled-status-chip {
    min-height: 5.65rem;
    padding: 1.12rem 3.9rem 1.12rem 1.18rem;
    border-radius: 1rem;
    border-color: color-mix(in srgb, var(--line) 92%, var(--scheduled-status-color, var(--muted)) 8%);
    box-shadow: 0 10px 22px rgba(15, 23, 42, .045);
}

.scheduled-status-chip::before {
    width: 4px;
    border-radius: 999px;
    inset: .85rem auto .85rem .55rem;
}

.scheduled-status-icon {
    margin-left: .25rem;
}

.scheduled-status-total {
    right: 1.15rem;
}

html[data-theme='dark'] .scheduled-status-strip {
    background: #101010;
    border-color: #262626;
    box-shadow: 0 14px 30px rgba(0, 0, 0, .22);
}

@media (max-width: 768px) {
    .scheduled-status-strip {
        padding: .8rem;
        border-radius: .9rem;
    }

    .scheduled-status-chip {
        min-height: 5.05rem;
        padding: .95rem 3.55rem .95rem 1rem;
    }
}

.offcanvas.offcanvas-end.scheduled-day-offcanvas {
    width: min(920px, calc(100vw - 16px)) !important;
    max-width: 920px;
}

.scheduled-day-offcanvas {
    background:
        linear-gradient(180deg, color-mix(in srgb, var(--card) 99%, var(--surface-soft) 1%) 0%, color-mix(in srgb, var(--card) 94%, var(--surface-soft) 6%) 100%);
    box-shadow: -28px 0 70px rgba(15, 23, 42, .18);
}

.scheduled-day-offcanvas .offcanvas-header {
    padding: 1.45rem 1.65rem 1.2rem;
    background:
        linear-gradient(180deg, color-mix(in srgb, var(--card) 98%, var(--surface-soft) 2%), color-mix(in srgb, var(--card) 93%, var(--surface-soft) 7%));
}

.scheduled-day-offcanvas .offcanvas-header h2 {
    max-width: 34rem;
    line-height: 1.15;
}

.scheduled-day-offcanvas .btn-close {
    width: 1em;
    height: 1em;
    margin-top: .15rem;
    padding: .25em;
    border-radius: 0;
    background-color: transparent;
    opacity: .65;
}

.scheduled-day-offcanvas .btn-close:hover {
    opacity: .9;
}

.scheduled-day-offcanvas .offcanvas-body {
    padding: 1.35rem 1.65rem 1.65rem;
}

.scheduled-day-offcanvas .scheduled-day-list {
    display: grid;
    gap: 1rem;
}

.scheduled-day-offcanvas .scheduled-day-message {
    min-height: 0;
    grid-template-columns: .32rem 7.35rem minmax(0, 1fr) auto;
    grid-template-rows: auto auto;
    gap: .7rem 1rem;
    align-items: center;
    padding: 1.05rem 1.1rem;
    border-radius: 1rem;
    background: color-mix(in srgb, var(--card) 98%, var(--surface-soft) 2%);
    box-shadow: 0 14px 32px rgba(15, 23, 42, .06);
}

.scheduled-day-offcanvas .scheduled-day-message:hover {
    transform: translateY(-1px);
    box-shadow: 0 18px 38px rgba(15, 23, 42, .09);
}

.scheduled-day-offcanvas .scheduled-day-message-rail {
    grid-column: 1;
    grid-row: 1 / 3;
    width: .32rem;
    border-radius: 999px;
}

.scheduled-day-offcanvas .scheduled-day-time {
    grid-column: 2;
    grid-row: 1 / 3;
    min-width: 0;
    width: 100%;
    min-height: 3rem;
    border: 1px solid var(--line);
    border-radius: .85rem;
    background: color-mix(in srgb, var(--surface-soft) 62%, var(--card) 38%);
    color: var(--text);
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: .18rem;
    font-size: .76rem;
}

.scheduled-day-offcanvas .scheduled-day-time i {
    color: var(--muted);
    font-size: .9rem;
}

.scheduled-day-offcanvas .scheduled-day-time strong {
    max-width: 100%;
    color: var(--text);
    font-size: .86rem;
    font-weight: 950;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.scheduled-day-offcanvas .scheduled-day-main {
    grid-column: 3;
    grid-row: 1;
    gap: .2rem;
}

.scheduled-day-offcanvas .scheduled-day-main strong {
    font-size: 1rem;
    line-height: 1.2;
}

.scheduled-day-offcanvas .scheduled-day-main small {
    font-size: .82rem;
}

.scheduled-day-offcanvas .scheduled-message-tags {
    grid-column: 3 / 5;
    grid-row: 2;
    justify-content: flex-start;
    align-self: start;
}

.scheduled-day-offcanvas .scheduled-message-tags span {
    max-width: 14rem;
    padding: .34rem .68rem;
    background: color-mix(in srgb, var(--surface-soft) 72%, var(--card) 28%);
}

.scheduled-day-offcanvas .scheduled-status-badge {
    grid-column: 4;
    grid-row: 1;
    justify-self: end;
    align-self: start;
}

.scheduled-day-offcanvas .scheduled-empty-state {
    min-height: 18rem;
    border-style: solid;
    background:
        linear-gradient(180deg, color-mix(in srgb, var(--card) 98%, var(--surface-soft) 2%), color-mix(in srgb, var(--card) 92%, var(--surface-soft) 8%));
}

html[data-theme='dark'] .scheduled-day-offcanvas {
    background: #101010;
    box-shadow: -28px 0 70px rgba(0, 0, 0, .34);
}

html[data-theme='dark'] .scheduled-day-offcanvas .scheduled-day-message,
html[data-theme='dark'] .scheduled-day-offcanvas .scheduled-day-time,
html[data-theme='dark'] .scheduled-day-offcanvas .scheduled-message-tags span {
    background: #151515;
    border-color: #262626;
}

@media (max-width: 768px) {
    .offcanvas.offcanvas-end.scheduled-day-offcanvas {
        width: 100vw !important;
        max-width: 100vw;
    }

    .scheduled-day-offcanvas .offcanvas-header,
    .scheduled-day-offcanvas .offcanvas-body {
        padding-left: 1rem;
        padding-right: 1rem;
    }

    .scheduled-day-offcanvas .scheduled-day-message {
        grid-template-columns: .28rem minmax(0, 1fr);
        grid-template-rows: auto;
        gap: .55rem .75rem;
    }

    .scheduled-day-offcanvas .scheduled-day-message-rail {
        grid-row: 1 / 5;
    }

    .scheduled-day-offcanvas .scheduled-day-time,
    .scheduled-day-offcanvas .scheduled-day-main,
    .scheduled-day-offcanvas .scheduled-message-tags,
    .scheduled-day-offcanvas .scheduled-status-badge {
        grid-column: 2;
        grid-row: auto;
        justify-self: start;
    }

    .scheduled-day-offcanvas .scheduled-day-time {
        width: auto;
        min-height: 2.35rem;
        padding: .45rem .7rem;
        flex-direction: row;
    }
}

.scheduled-filter-grid {
    grid-template-columns: minmax(10rem, .7fr) minmax(10.5rem, .85fr) minmax(12rem, .95fr) minmax(12.5rem, .7fr);
}

.scheduled-filter-actions {
    align-self: end;
    display: grid;
    grid-template-columns: minmax(5.75rem, 1fr) minmax(5.75rem, 1fr);
    gap: .6rem;
}

.scheduled-filter-actions .btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .35rem;
    min-height: 2.85rem;
    border-radius: .65rem;
    font-weight: 850;
    white-space: nowrap;
}

.scheduled-business-warning {
    display: flex;
    align-items: flex-start;
    gap: .75rem;
    padding: .75rem .85rem;
    border: 1px solid color-mix(in srgb, #a16207 24%, var(--line) 76%);
    border-radius: .8rem;
    background: color-mix(in srgb, #a16207 8%, var(--card) 92%);
    color: color-mix(in srgb, var(--text) 82%, #a16207 18%);
    font-size: .88rem;
    line-height: 1.35;
}

.scheduled-business-warning i {
    color: #a16207;
    font-size: 1.05rem;
    line-height: 1;
    margin-top: .12rem;
}

.scheduled-business-warning strong {
    display: block;
    color: var(--text);
    font-size: .9rem;
}

@media (max-width: 992px) {
    .scheduled-filter-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 768px) {
    .scheduled-filter-grid {
        grid-template-columns: 1fr;
    }
}

input.form-control[type="month"],
input.form-control-sm[type="month"] {
    font-variant-numeric: tabular-nums;
    max-width: 100%;
    min-width: 10.75rem;
    white-space: nowrap;
}

.saas-filter-form input[type="month"],
.sales-filter-form input[type="month"],
.inventory-toolbar-filter input[type="month"],
.inventory-history-filters input[type="month"],
.consignments-filter-form input[type="month"],
.consignment-activity-filters input[type="month"],
.finance-filter-form input[type="month"],
.reports-filter-form input[type="month"],
.product-loans-filter input[type="month"],
.personal-finance-filter input[type="month"],
.scheduled-filter-grid input[type="month"] {
    min-width: 0;
    width: 100%;
}

.scheduled-calendar-day:not(.has-messages) .scheduled-day-count {
    opacity: 0;
    visibility: hidden;
}

.crm-rule-form .form-control,
.crm-rule-form .btn,
.crm-rule-form .form-check {
    min-height: 2.45rem;
}

.crm-rule-form .btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: .75rem;
}

.crm-rule-form .form-check {
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

@media (max-width: 768px) {
    input.form-control[type="month"],
    input.form-control-sm[type="month"] {
        width: 100%;
    }

    form.d-flex.gap-2:has(input[type="month"]),
    .period-filter:has(input[type="month"]) {
        align-items: stretch !important;
        display: grid !important;
        grid-template-columns: 1fr;
        width: 100%;
    }

    form.d-flex.gap-2:has(input[type="month"]) > *,
    .period-filter:has(input[type="month"]) > * {
        max-width: none !important;
        min-width: 0 !important;
        width: 100% !important;
    }

    .crm-executive-hero {
        align-items: stretch;
        flex-direction: column;
    }

    .crm-executive-actions .btn {
        justify-content: center;
        width: 100%;
    }

    .crm-executive-board,
    .crm-executive-metrics {
        grid-template-columns: 1fr;
    }

    .crm-donut-layout {
        grid-template-columns: 1fr;
        justify-items: center;
        text-align: center;
    }

    .crm-donut-legend {
        width: 100%;
    }

    .crm-rule-tabs {
        display: grid;
        grid-template-columns: 1fr;
    }

    .crm-rule-pill {
        justify-content: space-between;
        width: 100%;
    }

    .crm-rule-manager {
        gap: .85rem;
    }

    .crm-rule-form {
        grid-template-columns: minmax(0, 1fr) 5.25rem 3.05rem;
        gap: .55rem;
        padding: .72rem;
        border: 1px solid rgba(15, 23, 42, .08);
        border-radius: 1rem;
        background: rgba(255, 255, 255, .68);
    }

    .crm-rule-form input[name="name"] {
        grid-column: 1 / -1;
    }

    .crm-rule-form input[name="days"] {
        min-width: 0;
    }

    .crm-rule-form .form-control-color {
        width: 3.05rem;
        min-width: 3.05rem;
    }

    .crm-rule-form .form-check {
        justify-content: flex-start;
    }

    .crm-rule-form .btn {
        grid-column: 2 / -1;
        width: 100%;
    }

    .scheduled-board-header,
    .scheduled-title-group,
    .scheduled-board-actions,
    .scheduled-board-toolbar {
        align-items: stretch;
        flex-direction: column;
    }

    .scheduled-board-actions .btn,
    .scheduled-last-sync {
        width: 100%;
    }

    .scheduled-calendar-head {
        grid-template-columns: 2.65rem minmax(0, 1fr) 2.65rem;
        gap: .45rem;
        margin-bottom: .75rem;
    }

    .scheduled-calendar-head .btn {
        width: 2.65rem;
        min-width: 0;
        min-height: 2.65rem;
        padding: 0;
        border-radius: .82rem;
    }

    .scheduled-calendar-head strong {
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        text-transform: none;
    }

    .scheduled-calendar-card .card-body {
        padding: .75rem;
    }

    .scheduled-calendar-weekdays,
    .scheduled-calendar-grid {
        gap: .28rem;
    }

    .scheduled-calendar-weekdays span {
        font-size: .64rem;
        letter-spacing: 0;
    }

    .scheduled-calendar-empty,
    .scheduled-calendar-day {
        border-radius: .58rem;
        min-height: 4.45rem;
        min-width: 0;
    }

    .scheduled-calendar-day {
        gap: .24rem;
        overflow: hidden;
        padding: .38rem .3rem;
    }

    .scheduled-day-top {
        align-items: center;
        gap: .2rem;
        min-width: 0;
    }

    .scheduled-day-number {
        flex: 1 1 auto;
        font-size: 1rem;
        line-height: 1;
        min-width: 0;
        white-space: nowrap;
    }

    .scheduled-day-count,
    .scheduled-calendar-detail-count {
        min-width: 1.32rem;
        min-height: 1.32rem;
        padding: 0 .25rem;
        flex: 0 0 auto;
        font-size: .68rem;
    }

    .scheduled-calendar-day.today::after {
        top: .3rem;
        right: .3rem;
        width: .34rem;
        height: .34rem;
    }

    .scheduled-day-status-stack {
        display: flex;
        flex-wrap: wrap;
        gap: .18rem;
        align-items: flex-end;
        margin-top: auto;
    }

    .scheduled-day-status-line,
    .scheduled-day-status-line.status-scheduled,
    .scheduled-day-status-line.status-pending,
    .scheduled-day-status-line.status-awaiting,
    .scheduled-day-status-line.status-sending,
    .scheduled-day-status-line.status-sent,
    .scheduled-day-status-line.status-failed,
    .scheduled-day-status-line.status-cancelled,
    .scheduled-day-status-line.status-rescheduled {
        width: .46rem;
        min-width: .46rem;
        height: .46rem;
        min-height: .46rem;
        padding: 0;
        border-radius: 999px;
        background: var(--scheduled-status-color, var(--muted));
    }

    .scheduled-day-status-line i,
    .scheduled-day-status-line span,
    .scheduled-day-status-line strong {
        display: none;
    }
}

@media (max-width: 575.98px) {
    .scheduled-calendar-card .card-body {
        padding: .62rem;
    }

    .scheduled-calendar-head {
        grid-template-columns: 2.45rem minmax(0, 1fr) 2.45rem;
        gap: .35rem;
    }

    .scheduled-calendar-head .btn {
        width: 2.45rem;
        min-height: 2.45rem;
    }

    .scheduled-calendar-head strong {
        font-size: .98rem;
    }

    .scheduled-calendar-weekdays,
    .scheduled-calendar-grid {
        gap: .2rem;
    }

    .scheduled-calendar-empty,
    .scheduled-calendar-day {
        min-height: 4.05rem;
    }

    .scheduled-calendar-day {
        padding: .34rem .24rem;
    }

    .scheduled-day-count,
    .scheduled-calendar-detail-count {
        min-width: 1.2rem;
        min-height: 1.2rem;
        font-size: .64rem;
    }

    .scheduled-day-number {
        font-size: .95rem;
    }
}

html[data-theme='dark'] .crm-rule-form {
    background: #111315;
    border-color: #2a3036;
}

.scheduled-status-chip .scheduled-status-total {
    box-sizing: border-box;
    width: 2.85rem !important;
    min-width: 2.85rem !important;
    height: 1.25rem !important;
    min-height: 1.25rem !important;
    padding: 0 !important;
    border-radius: .45rem !important;
    line-height: 1 !important;
}

@media (max-width: 575.98px) {
    .scheduled-status-chip .scheduled-status-total {
        width: 3.05rem !important;
        min-width: 3.05rem !important;
        height: 1.15rem !important;
        min-height: 1.15rem !important;
        font-size: .72rem !important;
    }
}

@media (max-width: 575.98px) {
    .inventory-toolbar {
        align-items: stretch !important;
        gap: .75rem !important;
        margin-bottom: 1rem !important;
    }

    .inventory-toolbar > div:first-child,
    .inventory-toolbar-actions,
    .inventory-toolbar-filter,
    .inventory-action-bar {
        flex: 0 0 auto !important;
        min-height: 0 !important;
        width: 100% !important;
    }

    .inventory-toolbar-actions,
    .inventory-toolbar-filter {
        align-content: start !important;
        gap: .5rem !important;
    }

    .inventory-action-bar {
        align-content: start !important;
        gap: .45rem !important;
        margin-top: 0 !important;
    }

    .inventory-action-bar > .btn,
    .inventory-action-bar .dropdown > .btn {
        min-height: 2.55rem !important;
        padding-block: .45rem !important;
    }

    .inventory-toolbar ~ .row.g-4 {
        margin-top: 0 !important;
    }
}

.sale-money-group .sale-money-prefix {
    min-width: 3rem;
    justify-content: center;
    font-weight: 600;
}

.sale-money-group {
    flex-wrap: nowrap;
}

.sale-money-group .sale-money-input,
.sale-money-group .sale-money-display {
    min-height: calc(1.5em + .75rem + 2px);
}

.sale-money-group .sale-money-input,
.sale-money-display {
    text-align: right;
    font-variant-numeric: tabular-nums;
}

.sale-money-group .sale-money-display {
    display: flex;
    align-items: center;
    justify-content: flex-end;
}

/* Campaign command center */
.campaign-workspace {
    --campaign-surface: var(--card);
    --campaign-soft: var(--surface-soft);
    --campaign-border: var(--line);
    --campaign-ink: var(--text);
    --campaign-muted: var(--muted);
    display: grid;
    gap: 1.25rem;
    margin-bottom: 2rem;
}

.campaign-hero {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1.5rem;
    min-height: 152px;
    padding: 1.6rem 1.75rem;
    overflow: hidden;
    border: 1px solid color-mix(in srgb, var(--primary) 16%, var(--campaign-border));
    border-radius: 22px;
    background:
        radial-gradient(circle at 88% 20%, color-mix(in srgb, var(--primary) 12%, transparent), transparent 30%),
        linear-gradient(135deg, color-mix(in srgb, var(--campaign-surface) 96%, var(--primary)), var(--campaign-surface));
    box-shadow: 0 18px 45px rgba(15, 23, 42, .06);
}

.campaign-hero::after {
    position: absolute;
    right: 25%;
    bottom: -55px;
    width: 170px;
    height: 170px;
    border: 32px solid color-mix(in srgb, var(--primary) 7%, transparent);
    border-radius: 50%;
    content: '';
    pointer-events: none;
}

.campaign-hero-copy,
.campaign-hero-actions {
    position: relative;
    z-index: 1;
}

.campaign-eyebrow,
.campaign-section-label {
    display: inline-flex;
    align-items: center;
    gap: .42rem;
    color: var(--primary);
    font-size: .7rem;
    font-weight: 800;
    letter-spacing: .11em;
    text-transform: uppercase;
}

.campaign-hero h1 {
    margin: .42rem 0 .25rem;
    color: var(--campaign-ink);
    font-size: clamp(1.8rem, 3vw, 2.45rem);
    font-weight: 850;
    letter-spacing: -.045em;
}

.campaign-hero p {
    max-width: 660px;
    margin: 0;
    color: var(--campaign-muted);
    font-size: .96rem;
}

.campaign-hero-actions {
    display: flex;
    align-items: center;
    gap: .75rem;
}

.campaign-create-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .5rem;
    min-height: 46px;
    padding-inline: 1.15rem;
    border-radius: 13px;
    box-shadow: 0 10px 24px color-mix(in srgb, var(--primary) 25%, transparent);
}

.campaign-connection {
    display: inline-flex;
    align-items: center;
    gap: .48rem;
    min-height: 38px;
    padding: .48rem .72rem;
    border: 1px solid var(--campaign-border);
    border-radius: 999px;
    background: color-mix(in srgb, var(--campaign-surface) 88%, transparent);
    color: var(--campaign-muted);
    font-size: .76rem;
    font-weight: 750;
    white-space: nowrap;
}

.campaign-connection-dot {
    width: .5rem;
    height: .5rem;
    border-radius: 50%;
    background: #94a3b8;
    box-shadow: 0 0 0 4px rgba(148, 163, 184, .14);
}

.campaign-connection.is-online {
    border-color: rgba(16, 185, 129, .22);
    color: #047857;
}

.campaign-connection.is-online .campaign-connection-dot {
    background: #10b981;
    box-shadow: 0 0 0 4px rgba(16, 185, 129, .14);
}

.campaign-connection.is-offline {
    border-color: rgba(245, 158, 11, .25);
    color: #b45309;
}

.campaign-connection.is-offline .campaign-connection-dot {
    background: #f59e0b;
    box-shadow: 0 0 0 4px rgba(245, 158, 11, .14);
}

.campaign-overview-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: .85rem;
}

.campaign-overview-card {
    display: flex;
    align-items: center;
    gap: .8rem;
    min-width: 0;
    min-height: 86px;
    padding: .9rem 1rem;
    border: 1px solid var(--campaign-border);
    border-radius: 17px;
    background: var(--campaign-surface);
    box-shadow: 0 9px 24px rgba(15, 23, 42, .035);
}

.campaign-overview-icon,
.campaign-list-icon,
.campaign-focus-icon,
.campaign-summary-card-head > span {
    display: inline-flex;
    flex: 0 0 auto;
    align-items: center;
    justify-content: center;
    color: var(--primary);
    background: color-mix(in srgb, var(--primary) 10%, transparent);
}

.campaign-overview-icon {
    width: 42px;
    height: 42px;
    border-radius: 13px;
    font-size: 1.05rem;
}

.campaign-overview-card > div {
    display: grid;
    min-width: 0;
}

.campaign-overview-card strong {
    color: var(--campaign-ink);
    font-size: 1.35rem;
    font-weight: 850;
    line-height: 1.1;
    font-variant-numeric: tabular-nums;
}

.campaign-overview-card span:last-child {
    margin-top: .18rem;
    overflow: hidden;
    color: var(--campaign-muted);
    font-size: .76rem;
    font-weight: 650;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.campaign-overview-card[data-tone='success'] .campaign-overview-icon,
.campaign-list-icon[data-tone='success'],
.campaign-focus-icon[data-tone='success'] {
    color: #047857;
    background: rgba(16, 185, 129, .11);
}

.campaign-overview-card[data-tone='warning'] .campaign-overview-icon,
.campaign-list-icon[data-tone='warning'],
.campaign-focus-icon[data-tone='warning'] {
    color: #b45309;
    background: rgba(245, 158, 11, .13);
}

.campaign-overview-card[data-tone='danger'] .campaign-overview-icon,
.campaign-list-icon[data-tone='danger'],
.campaign-focus-icon[data-tone='danger'] {
    color: #b91c1c;
    background: rgba(239, 68, 68, .1);
}

.campaign-overview-card[data-tone='neutral'] .campaign-overview-icon,
.campaign-list-icon[data-tone='neutral'],
.campaign-focus-icon[data-tone='neutral'] {
    color: #64748b;
    background: rgba(100, 116, 139, .1);
}

.campaign-main-grid {
    display: grid;
    grid-template-columns: minmax(315px, 360px) minmax(0, 1fr);
    gap: 1rem;
    align-items: start;
}

.campaign-browser,
.campaign-focus,
.campaign-detail {
    border-color: var(--campaign-border);
    border-radius: 20px;
    background: var(--campaign-surface);
    box-shadow: 0 12px 32px rgba(15, 23, 42, .045);
}

.campaign-browser {
    padding: 1rem;
}

.campaign-browser-head,
.campaign-detail-head,
.campaign-focus-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1rem;
}

.campaign-browser-head h2,
.campaign-detail-head h2 {
    margin: .25rem 0 0;
    color: var(--campaign-ink);
    font-size: 1.03rem;
    font-weight: 800;
    letter-spacing: -.025em;
}

.campaign-count-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 2rem;
    height: 2rem;
    padding: 0 .5rem;
    border-radius: 10px;
    background: var(--campaign-soft);
    color: var(--campaign-muted);
    font-size: .78rem;
    font-weight: 800;
}

.campaign-browser-tools {
    display: grid;
    gap: .65rem;
    margin: 1rem 0;
}

.campaign-browser-footer {
    margin-top: .8rem;
    padding-top: .8rem;
    border-top: 1px solid var(--campaign-border);
}

.campaign-view-all-button {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .75rem;
    width: 100%;
    min-height: 46px;
    padding: .65rem .75rem;
    border: 1px solid color-mix(in srgb, var(--primary) 20%, var(--campaign-border));
    border-radius: 12px;
    background: color-mix(in srgb, var(--primary) 6%, var(--campaign-surface));
    color: var(--primary);
    transition: border-color .18s ease, background .18s ease, transform .18s ease;
}

.campaign-view-all-button:hover {
    border-color: color-mix(in srgb, var(--primary) 42%, var(--campaign-border));
    background: color-mix(in srgb, var(--primary) 10%, var(--campaign-surface));
    transform: translateY(-1px);
}

.campaign-view-all-button > span,
.campaign-view-all-button > small {
    display: inline-flex;
    align-items: center;
    gap: .42rem;
}

.campaign-view-all-button strong {
    font-size: .73rem;
}

.campaign-view-all-button small {
    color: var(--campaign-muted);
    font-size: .62rem;
    font-weight: 700;
    white-space: nowrap;
}

.campaign-search {
    display: flex;
    align-items: center;
    gap: .55rem;
    min-height: 42px;
    padding: 0 .75rem;
    border: 1px solid var(--campaign-border);
    border-radius: 12px;
    background: var(--campaign-soft);
    color: var(--campaign-muted);
    transition: border-color .18s ease, box-shadow .18s ease, background .18s ease;
}

.campaign-search:focus-within {
    border-color: color-mix(in srgb, var(--primary) 55%, var(--campaign-border));
    background: var(--campaign-surface);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--primary) 10%, transparent);
}

.campaign-search input {
    width: 100%;
    min-width: 0;
    border: 0;
    outline: 0;
    background: transparent;
    color: var(--campaign-ink);
    font: inherit;
    font-size: .84rem;
}

.campaign-search input::placeholder {
    color: var(--campaign-muted);
}

.campaign-filter-chips {
    display: flex;
    gap: .4rem;
    overflow-x: auto;
    padding: .05rem 0 .15rem;
    scrollbar-width: none;
}

.campaign-filter-chips::-webkit-scrollbar {
    display: none;
}

.campaign-filter-chip {
    flex: 0 0 auto;
    min-height: 31px;
    padding: .32rem .62rem;
    border: 1px solid var(--campaign-border);
    border-radius: 999px;
    background: transparent;
    color: var(--campaign-muted);
    font-size: .7rem;
    font-weight: 750;
    transition: .18s ease;
}

.campaign-filter-chip:hover,
.campaign-filter-chip.is-active {
    border-color: color-mix(in srgb, var(--primary) 32%, var(--campaign-border));
    background: color-mix(in srgb, var(--primary) 9%, transparent);
    color: var(--primary);
}

.campaign-list {
    --campaign-list-card-height: 184px;
    display: grid;
    gap: .65rem;
    max-height: 378px;
    overflow-y: auto;
    padding: 0 .18rem .1rem 0;
    scrollbar-width: thin;
}

.campaign-list-item {
    position: relative;
    display: grid;
    gap: .72rem;
    height: var(--campaign-list-card-height);
    padding: .85rem;
    overflow: hidden;
    border: 1px solid var(--campaign-border);
    border-radius: 15px;
    background: var(--campaign-surface);
    color: inherit;
    text-decoration: none;
    transition: transform .18s ease, border-color .18s ease, box-shadow .18s ease, background .18s ease;
}

.campaign-list-item::before {
    position: absolute;
    inset: 0 auto 0 0;
    width: 3px;
    border-radius: 0 3px 3px 0;
    background: transparent;
    content: '';
}

.campaign-list-item:hover {
    border-color: color-mix(in srgb, var(--primary) 28%, var(--campaign-border));
    color: inherit;
    transform: translateY(-1px);
    box-shadow: 0 10px 22px rgba(15, 23, 42, .055);
}

.campaign-list-item.is-active {
    border-color: color-mix(in srgb, var(--primary) 34%, var(--campaign-border));
    background: color-mix(in srgb, var(--campaign-surface) 95%, var(--primary));
    box-shadow: 0 12px 26px color-mix(in srgb, var(--primary) 11%, transparent);
}

.campaign-list-item.is-active::before {
    background: var(--primary);
}

.campaign-list-item-top {
    display: grid;
    grid-template-columns: 36px minmax(0, 1fr) auto;
    align-items: start;
    gap: .6rem;
}

.campaign-list-icon {
    width: 36px;
    height: 36px;
    border-radius: 11px;
    font-size: .9rem;
}

.campaign-list-title {
    display: grid;
    min-width: 0;
}

.campaign-list-title strong {
    overflow: hidden;
    color: var(--campaign-ink);
    font-size: .84rem;
    font-weight: 800;
    line-height: 1.35;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.campaign-list-title span {
    margin-top: .13rem;
    overflow: hidden;
    color: var(--campaign-muted);
    font-size: .66rem;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.campaign-status-pill {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 23px;
    padding: .24rem .48rem;
    border: 1px solid transparent;
    border-radius: 999px;
    color: var(--primary);
    background: color-mix(in srgb, var(--primary) 9%, transparent);
    font-size: .62rem;
    font-weight: 800;
    line-height: 1;
    white-space: nowrap;
}

.campaign-status-pill[data-tone='success'] {
    border-color: rgba(16, 185, 129, .15);
    color: #047857;
    background: rgba(16, 185, 129, .1);
}

.campaign-status-pill[data-tone='warning'] {
    border-color: rgba(245, 158, 11, .18);
    color: #b45309;
    background: rgba(245, 158, 11, .12);
}

.campaign-status-pill[data-tone='danger'] {
    border-color: rgba(239, 68, 68, .16);
    color: #b91c1c;
    background: rgba(239, 68, 68, .09);
}

.campaign-status-pill[data-tone='neutral'] {
    border-color: rgba(100, 116, 139, .14);
    color: #64748b;
    background: rgba(100, 116, 139, .09);
}

.campaign-status-pill.is-prominent {
    min-height: 31px;
    padding-inline: .7rem;
    font-size: .7rem;
}

.campaign-list-progress {
    display: grid;
    gap: .32rem;
}

.campaign-list-progress > span {
    display: flex;
    justify-content: space-between;
    color: var(--campaign-muted);
    font-size: .65rem;
}

.campaign-list-progress > span strong {
    color: var(--campaign-ink);
    font-size: .7rem;
}

.campaign-list-progress .progress,
.campaign-delivery-bar {
    height: 6px;
    overflow: hidden;
    border-radius: 999px;
    background: color-mix(in srgb, var(--campaign-border) 55%, transparent);
}

.campaign-list-progress .progress-bar,
.campaign-delivery-bar .progress-bar {
    border-radius: inherit;
    background: var(--primary);
}

.campaign-list-stats {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: .4rem;
}

.campaign-list-stats span {
    display: grid;
    padding: .42rem .38rem;
    border-radius: 9px;
    background: var(--campaign-soft);
    color: var(--campaign-muted);
    font-size: .61rem;
    text-align: center;
}

.campaign-list-stats strong {
    color: var(--campaign-ink);
    font-size: .76rem;
    font-variant-numeric: tabular-nums;
}

.campaign-list-stats .has-error strong,
.campaign-delivery-stats .has-error {
    color: #dc2626;
}

.campaign-list-next {
    display: flex;
    align-items: center;
    gap: .45rem;
    color: var(--campaign-muted);
    font-size: .63rem;
}

.campaign-list-next i {
    color: var(--primary);
}

.campaign-list-next strong {
    color: var(--campaign-ink);
    font-weight: 750;
}

.campaign-list-next span {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.campaign-empty-state,
.campaign-focus-empty {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    min-height: 240px;
    padding: 1.5rem;
    color: var(--campaign-muted);
    text-align: center;
}

.campaign-empty-state > span,
.campaign-focus-empty > span {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 48px;
    height: 48px;
    margin-bottom: .75rem;
    border-radius: 15px;
    background: color-mix(in srgb, var(--primary) 9%, transparent);
    color: var(--primary);
    font-size: 1.15rem;
}

.campaign-empty-state strong,
.campaign-focus-empty h2 {
    margin: 0;
    color: var(--campaign-ink);
    font-size: .95rem;
    font-weight: 800;
}

.campaign-empty-state p,
.campaign-focus-empty p {
    max-width: 310px;
    margin: .35rem 0 0;
    font-size: .76rem;
}

.campaign-focus {
    min-width: 0;
    padding: 1.15rem;
}

.campaign-focus-head {
    padding: .1rem .1rem 1rem;
    border-bottom: 1px solid var(--campaign-border);
}

.campaign-focus-identity {
    display: flex;
    align-items: flex-start;
    gap: .75rem;
    min-width: 0;
}

.campaign-focus-icon {
    width: 44px;
    height: 44px;
    border-radius: 14px;
    font-size: 1.05rem;
}

.campaign-focus-kicker {
    margin-bottom: .18rem;
    color: var(--campaign-muted);
    font-size: .66rem;
    font-weight: 700;
}

.campaign-live-indicator {
    display: inline-flex;
    align-items: center;
    gap: .3rem;
    margin-left: .35rem;
    padding: .18rem .42rem;
    border: 1px solid color-mix(in srgb, var(--primary) 18%, var(--campaign-border));
    border-radius: 999px;
    background: color-mix(in srgb, var(--primary) 7%, transparent);
    color: var(--primary);
    line-height: 1;
    vertical-align: middle;
}

.campaign-live-indicator > i {
    width: 6px;
    height: 6px;
    flex: 0 0 auto;
    border-radius: 50%;
    background: currentColor;
}

.campaign-live-indicator.is-syncing > i {
    animation: campaign-live-pulse 1.1s ease-in-out infinite;
}

.campaign-live-indicator.is-updated {
    border-color: rgba(16, 185, 129, .22);
    background: rgba(16, 185, 129, .09);
    color: #059669;
}

.campaign-live-indicator.is-error {
    border-color: rgba(239, 68, 68, .2);
    background: rgba(239, 68, 68, .08);
    color: #dc2626;
}

.campaign-live-indicator.is-paused {
    border-color: var(--campaign-border);
    background: color-mix(in srgb, var(--campaign-muted) 7%, transparent);
    color: var(--campaign-muted);
}

@keyframes campaign-live-pulse {
    0%, 100% { opacity: .35; transform: scale(.8); }
    50% { opacity: 1; transform: scale(1.25); }
}

.campaign-focus h2 {
    margin: 0;
    color: var(--campaign-ink);
    font-size: 1.25rem;
    font-weight: 850;
    letter-spacing: -.035em;
}

.campaign-focus-head p {
    margin: .25rem 0 0;
    color: var(--campaign-muted);
    font-size: .78rem;
}

.campaign-system-alert {
    display: flex;
    align-items: center;
    gap: .7rem;
    margin-top: 1rem;
    padding: .75rem .85rem;
    border: 1px solid rgba(245, 158, 11, .24);
    border-radius: 13px;
    background: rgba(245, 158, 11, .08);
}

.campaign-system-alert > span {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    flex: 0 0 auto;
    border-radius: 10px;
    background: rgba(245, 158, 11, .13);
    color: #b45309;
}

.campaign-system-alert strong,
.campaign-system-alert p {
    display: block;
    margin: 0;
}

.campaign-system-alert strong {
    color: var(--campaign-ink);
    font-size: .78rem;
}

.campaign-system-alert p {
    margin-top: .08rem;
    color: var(--campaign-muted);
    font-size: .7rem;
}

.campaign-delivery-overview {
    display: grid;
    grid-template-columns: 142px minmax(0, 1fr);
    align-items: center;
    gap: 1.2rem;
    margin-top: 1rem;
    padding: 1rem;
    border: 1px solid var(--campaign-border);
    border-radius: 17px;
    background: color-mix(in srgb, var(--campaign-soft) 65%, var(--campaign-surface));
}

.campaign-progress-ring {
    display: grid;
    width: 116px;
    height: 116px;
    margin-inline: auto;
    place-items: center;
    border-radius: 50%;
    background: conic-gradient(var(--primary) calc(var(--campaign-progress) * 1%), color-mix(in srgb, var(--campaign-border) 70%, transparent) 0);
}

.campaign-progress-ring::before {
    grid-area: 1 / 1;
    width: 88px;
    height: 88px;
    border-radius: 50%;
    background: var(--campaign-surface);
    content: '';
}

.campaign-progress-ring > div {
    z-index: 1;
    display: grid;
    grid-area: 1 / 1;
    text-align: center;
}

.campaign-progress-ring strong {
    color: var(--campaign-ink);
    font-size: 1.32rem;
    font-weight: 850;
    line-height: 1;
}

.campaign-progress-ring span {
    margin-top: .22rem;
    color: var(--campaign-muted);
    font-size: .63rem;
}

.campaign-delivery-main {
    min-width: 0;
}

.campaign-delivery-title {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: .75rem;
}

.campaign-delivery-title > div {
    display: grid;
}

.campaign-delivery-title span:first-child {
    color: var(--campaign-muted);
    font-size: .67rem;
    font-weight: 700;
}

.campaign-delivery-title strong {
    margin-top: .12rem;
    color: var(--campaign-ink);
    font-size: .88rem;
    font-weight: 800;
}

.campaign-cadence {
    display: inline-flex;
    align-items: center;
    gap: .32rem;
    padding: .28rem .48rem;
    border-radius: 999px;
    background: var(--campaign-surface);
    color: var(--campaign-muted) !important;
    font-size: .62rem !important;
    white-space: nowrap;
}

.campaign-delivery-bar {
    height: 8px;
    margin-top: .72rem;
}

.campaign-delivery-stats {
    display: flex;
    flex-wrap: wrap;
    gap: .85rem;
    margin-top: .55rem;
    color: var(--campaign-muted);
    font-size: .66rem;
}

.campaign-delivery-stats strong {
    color: var(--campaign-ink);
    font-size: .72rem;
    font-variant-numeric: tabular-nums;
}

.campaign-timeline {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: .5rem;
    margin-top: .8rem;
}

.campaign-timeline > div {
    display: flex;
    align-items: center;
    gap: .5rem;
    min-width: 0;
    padding: .55rem .6rem;
    border: 1px solid var(--campaign-border);
    border-radius: 11px;
    background: var(--campaign-surface);
}

.campaign-timeline i {
    flex: 0 0 auto;
    color: var(--primary);
    font-size: .85rem;
}

.campaign-timeline span {
    display: grid;
    min-width: 0;
    color: var(--campaign-muted);
    font-size: .58rem;
}

.campaign-timeline strong {
    margin-top: .06rem;
    overflow: hidden;
    color: var(--campaign-ink);
    font-size: .66rem;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.campaign-daily-panel {
    display: grid;
    grid-template-columns: minmax(190px, .8fr) minmax(330px, 1.2fr);
    align-items: center;
    gap: 1rem;
    margin-top: .85rem;
    padding: .8rem .9rem;
    border: 1px solid var(--campaign-border);
    border-radius: 15px;
}

.campaign-daily-copy > strong,
.campaign-daily-copy > p {
    display: block;
}

.campaign-daily-copy > strong {
    margin-top: .17rem;
    color: var(--campaign-ink);
    font-size: .79rem;
}

.campaign-daily-copy > p {
    margin: .12rem 0 0;
    color: var(--campaign-muted);
    font-size: .63rem;
}

.campaign-daily-metrics {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: .4rem;
}

.campaign-daily-metrics > div {
    display: grid;
    padding: .55rem .4rem;
    border-radius: 10px;
    background: var(--campaign-soft);
    text-align: center;
}

.campaign-daily-metrics strong {
    color: var(--campaign-ink);
    font-size: .9rem;
    font-weight: 850;
    font-variant-numeric: tabular-nums;
}

.campaign-daily-metrics span {
    color: var(--campaign-muted);
    font-size: .58rem;
}

.campaign-action-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    margin-top: 1rem;
    padding-top: 1rem;
    border-top: 1px solid var(--campaign-border);
}

.campaign-action-label {
    color: var(--campaign-muted);
    font-size: .68rem;
    font-weight: 750;
    white-space: nowrap;
}

.campaign-action-buttons {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: .45rem;
}

.campaign-action-buttons form {
    display: inline-flex;
}

.campaign-action-buttons .btn {
    display: inline-flex;
    align-items: center;
    gap: .38rem;
    min-height: 34px;
    border-radius: 10px;
    font-size: .7rem;
    font-weight: 750;
}

.campaign-focus-empty {
    min-height: 560px;
}

.campaign-detail {
    min-width: 0;
    overflow: hidden;
}

.campaign-detail-head {
    padding: 1.15rem 1.2rem 1rem;
}

.campaign-detail-head p {
    margin: .18rem 0 0;
    color: var(--campaign-muted);
    font-size: .74rem;
}

.campaign-detail-context {
    display: inline-flex;
    align-items: center;
    gap: .35rem;
    padding: .38rem .58rem;
    border-radius: 9px;
    background: var(--campaign-soft);
    color: var(--campaign-muted);
    font-size: .66rem;
    font-weight: 750;
    white-space: nowrap;
}

.campaign-tabs-wrap {
    overflow-x: auto;
    border-top: 1px solid var(--campaign-border);
    border-bottom: 1px solid var(--campaign-border);
    background: color-mix(in srgb, var(--campaign-soft) 72%, var(--campaign-surface));
    scrollbar-width: none;
}

.campaign-tabs-wrap::-webkit-scrollbar {
    display: none;
}

.campaign-tabs {
    display: flex;
    flex-wrap: nowrap;
    gap: .25rem;
    width: max-content;
    min-width: 100%;
    padding: .48rem .7rem;
    border: 0;
}

.campaign-tabs .nav-link {
    display: inline-flex;
    align-items: center;
    gap: .38rem;
    min-height: 38px;
    padding: .45rem .65rem;
    border: 0;
    border-radius: 10px;
    color: var(--campaign-muted);
    font-size: .7rem;
    font-weight: 750;
    white-space: nowrap;
}

.campaign-tabs .nav-link:hover {
    color: var(--campaign-ink);
    background: color-mix(in srgb, var(--campaign-surface) 78%, transparent);
}

.campaign-tabs .nav-link.active {
    color: var(--primary);
    background: var(--campaign-surface);
    box-shadow: 0 3px 10px rgba(15, 23, 42, .06);
}

.campaign-tabs .nav-link b {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 20px;
    height: 20px;
    padding: 0 .32rem;
    border-radius: 7px;
    background: var(--campaign-soft);
    color: var(--campaign-muted);
    font-size: .6rem;
    font-variant-numeric: tabular-nums;
}

.campaign-tabs .nav-link b.is-danger {
    color: #b91c1c;
    background: rgba(239, 68, 68, .1);
}

.campaign-tab-content {
    padding: 1.2rem;
}

.campaign-summary-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: .85rem;
}

.campaign-summary-card {
    min-width: 0;
    padding: .95rem;
    border: 1px solid var(--campaign-border);
    border-radius: 16px;
    background: color-mix(in srgb, var(--campaign-soft) 40%, var(--campaign-surface));
}

.campaign-summary-card-head {
    display: flex;
    align-items: center;
    gap: .62rem;
    margin-bottom: .85rem;
}

.campaign-summary-card-head > span {
    width: 36px;
    height: 36px;
    border-radius: 11px;
}

.campaign-summary-card-head > div {
    display: grid;
}

.campaign-summary-card-head strong {
    color: var(--campaign-ink);
    font-size: .79rem;
}

.campaign-summary-card-head small {
    margin-top: .08rem;
    color: var(--campaign-muted);
    font-size: .62rem;
}

.campaign-definition-list {
    display: grid;
    margin: 0;
}

.campaign-definition-list > div {
    display: grid;
    grid-template-columns: minmax(120px, .8fr) minmax(0, 1.2fr);
    gap: .75rem;
    padding: .53rem 0;
    border-top: 1px solid var(--campaign-border);
}

.campaign-definition-list dt,
.campaign-definition-list dd {
    margin: 0;
    font-size: .68rem;
}

.campaign-definition-list dt {
    color: var(--campaign-muted);
    font-weight: 650;
}

.campaign-definition-list dd {
    color: var(--campaign-ink);
    font-weight: 750;
    text-align: right;
}

.campaign-phone-preview {
    padding: .75rem;
    border: 1px solid color-mix(in srgb, #10b981 16%, var(--campaign-border));
    border-radius: 14px;
    background: color-mix(in srgb, #10b981 5%, var(--campaign-surface));
}

.campaign-phone-preview-label {
    display: inline-flex;
    align-items: center;
    gap: .32rem;
    margin-bottom: .52rem;
    color: #047857;
    font-size: .61rem;
    font-weight: 800;
    text-transform: uppercase;
}

.campaign-phone-preview .campaign-message-preview {
    padding: .7rem .78rem;
    border-radius: 12px 12px 4px 12px;
    background: var(--campaign-surface);
    color: var(--campaign-ink);
    font-size: .72rem;
    line-height: 1.55;
    box-shadow: 0 5px 14px rgba(15, 23, 42, .05);
}

.campaign-safe-note {
    display: flex;
    align-items: flex-start;
    gap: .4rem;
    margin: .65rem 0 0;
    color: var(--campaign-muted);
    font-size: .62rem;
    line-height: 1.45;
}

.campaign-safe-note i {
    color: #047857;
}

.campaign-audience-strip {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: .65rem;
    margin-top: .85rem;
}

.campaign-audience-strip > div {
    display: grid;
    grid-template-columns: 36px auto;
    grid-template-rows: auto auto;
    column-gap: .6rem;
    align-items: center;
    padding: .7rem .75rem;
    border: 1px solid var(--campaign-border);
    border-radius: 13px;
}

.campaign-audience-strip span {
    display: inline-flex;
    grid-row: 1 / 3;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border-radius: 11px;
    background: var(--campaign-soft);
    color: var(--primary);
}

.campaign-audience-strip strong {
    color: var(--campaign-ink);
    font-size: .9rem;
    line-height: 1.1;
}

.campaign-audience-strip small {
    color: var(--campaign-muted);
    font-size: .61rem;
}

.campaign-detail .table-responsive {
    border: 1px solid var(--campaign-border);
    border-radius: 13px;
}

.campaign-detail .table {
    margin: 0;
    color: var(--campaign-ink);
    font-size: .7rem;
}

.campaign-detail .table > :not(caption) > * > * {
    padding: .7rem .65rem;
    border-color: var(--campaign-border);
    vertical-align: middle;
}

.campaign-detail .table thead th {
    border-bottom-width: 1px;
    background: var(--campaign-soft);
    color: var(--campaign-muted);
    font-size: .61rem;
    font-weight: 800;
    letter-spacing: .025em;
    text-transform: uppercase;
    white-space: nowrap;
}

.campaign-detail .table tbody tr:last-child > * {
    border-bottom: 0;
}

.campaign-detail details summary {
    color: var(--primary);
    font-size: .67rem;
    font-weight: 750;
    cursor: pointer;
}

.campaign-detail pre {
    max-width: 420px;
    white-space: pre-wrap;
}

#campaignCreateModal .modal-content,
#campaignEditModal .modal-content,
#campaignCancelModal .modal-content,
#campaignMessageEditModal .modal-content,
#campaignMessageCancelModal .modal-content,
#campaignAllModal .modal-content {
    overflow: hidden;
    border: 1px solid var(--line);
    border-radius: 19px;
    background: var(--card);
    box-shadow: 0 28px 70px rgba(15, 23, 42, .18);
}

#campaignCreateModal .modal-header,
#campaignEditModal .modal-header,
#campaignCancelModal .modal-header,
#campaignMessageEditModal .modal-header,
#campaignMessageCancelModal .modal-header,
#campaignAllModal .modal-header {
    border-color: var(--line);
    background: color-mix(in srgb, var(--surface-soft) 66%, var(--card));
}

#campaignCreateModal {
    padding-right: 0 !important;
}

#campaignCreateModal .campaign-create-side-dialog {
    width: min(960px, calc(100vw - 1.5rem));
    max-width: 960px;
    min-height: 100%;
    height: 100%;
    margin: 0 0 0 auto;
}

#campaignCreateModal.fade .campaign-create-side-dialog {
    transform: translateX(100%);
    transition: transform .28s cubic-bezier(.22, .75, .2, 1);
}

#campaignCreateModal.show .campaign-create-side-dialog {
    transform: translateX(0);
}

#campaignCreateModal .modal-content {
    height: 100%;
    max-height: 100vh;
    border: 0;
    border-radius: 0;
    box-shadow: -24px 0 60px rgba(15, 23, 42, .18);
}

#campaignCreateModal .modal-header,
#campaignCreateModal .modal-footer {
    flex: 0 0 auto;
    padding: 1rem 1.2rem;
}

#campaignCreateModal .modal-body {
    flex: 1 1 auto;
    overflow-y: auto;
    padding: 1.1rem 1.2rem;
}

.campaign-all-modal {
    --campaign-surface: var(--card);
    --campaign-soft: var(--surface-soft);
    --campaign-border: var(--line);
    --campaign-ink: var(--text);
    --campaign-muted: var(--muted);
}

.campaign-all-modal-head {
    align-items: center;
    padding: 1rem 1.2rem;
}

.campaign-all-modal-head h2 {
    margin: .22rem 0 0;
    color: var(--campaign-ink);
    font-size: 1.25rem;
    font-weight: 850;
    letter-spacing: -.035em;
}

.campaign-all-modal-head p {
    margin: .18rem 0 0;
    color: var(--campaign-muted);
    font-size: .72rem;
}

.campaign-all-modal-head-actions {
    display: flex;
    align-items: center;
    gap: .75rem;
}

.campaign-all-modal-body {
    padding: 1rem 1.2rem 1.2rem;
    background: var(--campaign-surface);
}

.campaign-all-toolbar {
    display: grid;
    grid-template-columns: minmax(240px, 1fr) auto;
    align-items: center;
    gap: .75rem;
    margin-bottom: .85rem;
}

.campaign-all-list {
    display: grid;
    gap: .55rem;
}

.campaign-all-item {
    display: grid;
    grid-template-columns: 38px minmax(150px, 1.15fr) auto minmax(120px, .7fr) minmax(210px, 1fr) minmax(120px, .7fr) 18px;
    align-items: center;
    gap: .72rem;
    min-width: 0;
    padding: .72rem .8rem;
    border: 1px solid var(--campaign-border);
    border-radius: 13px;
    background: var(--campaign-surface);
    color: inherit;
    text-decoration: none;
    transition: border-color .18s ease, background .18s ease, box-shadow .18s ease, transform .18s ease;
}

.campaign-all-item:hover {
    border-color: color-mix(in srgb, var(--primary) 32%, var(--campaign-border));
    background: color-mix(in srgb, var(--campaign-surface) 96%, var(--primary));
    color: inherit;
    box-shadow: 0 9px 20px rgba(15, 23, 42, .05);
    transform: translateY(-1px);
}

.campaign-all-item.is-active {
    border-color: color-mix(in srgb, var(--primary) 42%, var(--campaign-border));
    background: color-mix(in srgb, var(--campaign-surface) 94%, var(--primary));
    box-shadow: inset 3px 0 0 var(--primary);
}

.campaign-all-identity,
.campaign-all-progress,
.campaign-all-next {
    display: grid;
    min-width: 0;
}

.campaign-all-identity strong {
    overflow: hidden;
    color: var(--campaign-ink);
    font-size: .76rem;
    font-weight: 800;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.campaign-all-identity span,
.campaign-all-progress > span,
.campaign-all-next span {
    margin-top: .1rem;
    overflow: hidden;
    color: var(--campaign-muted);
    font-size: .6rem;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.campaign-all-progress > span strong {
    color: var(--campaign-ink);
    font-size: .65rem;
}

.campaign-all-progress .progress {
    height: 5px;
    margin-top: .32rem;
    border-radius: 999px;
    background: color-mix(in srgb, var(--campaign-border) 58%, transparent);
}

.campaign-all-progress .progress-bar {
    border-radius: inherit;
    background: var(--primary);
}

.campaign-all-stats {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: .28rem;
}

.campaign-all-stats span {
    display: grid;
    min-width: 0;
    padding: .32rem .24rem;
    border-radius: 8px;
    background: var(--campaign-soft);
    color: var(--campaign-muted);
    font-size: .54rem;
    text-align: center;
}

.campaign-all-stats strong {
    color: var(--campaign-ink);
    font-size: .65rem;
    font-variant-numeric: tabular-nums;
}

.campaign-all-stats .has-error strong {
    color: #dc2626;
}

.campaign-all-next strong {
    margin-top: .08rem;
    overflow: hidden;
    color: var(--campaign-ink);
    font-size: .64rem;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.campaign-all-arrow {
    color: var(--campaign-muted);
    font-size: .72rem;
}

.campaign-all-list .campaign-empty-state {
    min-height: 280px;
}

html[data-theme='dark'] .campaign-all-stats .has-error strong {
    color: #fca5a5;
}

html[data-theme='dark'] .campaign-connection.is-online,
html[data-theme='dark'] .campaign-phone-preview-label,
html[data-theme='dark'] .campaign-safe-note i {
    color: #6ee7b7;
}

html[data-theme='dark'] .campaign-connection.is-offline,
html[data-theme='dark'] .campaign-status-pill[data-tone='warning'],
html[data-theme='dark'] .campaign-system-alert > span {
    color: #fbbf24;
}

html[data-theme='dark'] .campaign-status-pill[data-tone='success'] {
    color: #6ee7b7;
}

html[data-theme='dark'] .campaign-status-pill[data-tone='danger'],
html[data-theme='dark'] .campaign-tabs .nav-link b.is-danger,
html[data-theme='dark'] .campaign-list-stats .has-error strong,
html[data-theme='dark'] .campaign-delivery-stats .has-error {
    color: #fca5a5;
}

@media (min-width: 1200px) {
    .campaign-browser {
        position: sticky;
        top: 1rem;
    }
}

@media (max-width: 1199.98px) {
    .campaign-overview-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .campaign-main-grid {
        grid-template-columns: minmax(290px, 330px) minmax(0, 1fr);
    }

    .campaign-delivery-overview {
        grid-template-columns: 118px minmax(0, 1fr);
        gap: .8rem;
    }

    .campaign-progress-ring {
        width: 102px;
        height: 102px;
    }

    .campaign-progress-ring::before {
        width: 78px;
        height: 78px;
    }

    .campaign-daily-panel {
        grid-template-columns: 1fr;
    }

    .campaign-all-item {
        grid-template-columns: 38px minmax(180px, 1fr) auto minmax(125px, .7fr) minmax(110px, .65fr) 18px;
    }

    .campaign-all-stats {
        grid-column: 2 / 5;
    }

    .campaign-all-next {
        grid-column: 5;
        grid-row: 1;
    }

    .campaign-all-arrow {
        grid-column: 6;
        grid-row: 1;
    }
}

@media (max-width: 991.98px) {
    .campaign-main-grid {
        grid-template-columns: 1fr;
    }

    .campaign-list {
        grid-template-columns: 1fr;
        max-height: 378px;
        overflow-y: auto;
    }

    .campaign-empty-state {
        grid-column: 1 / -1;
    }

    .campaign-focus-empty {
        min-height: 320px;
    }
}

@media (max-width: 767.98px) {
    .campaign-workspace {
        gap: 1rem;
    }

    .campaign-hero {
        align-items: flex-start;
        flex-direction: column;
        min-height: 0;
        padding: 1.2rem;
        border-radius: 18px;
    }

    .campaign-hero::after {
        right: -65px;
        bottom: -80px;
    }

    .campaign-hero-actions {
        width: 100%;
        justify-content: space-between;
    }

    .campaign-overview-grid {
        gap: .6rem;
    }

    .campaign-overview-card {
        min-height: 76px;
        padding: .75rem;
    }

    .campaign-overview-icon {
        width: 38px;
        height: 38px;
    }

    .campaign-overview-card strong {
        font-size: 1.15rem;
    }

    .campaign-list {
        grid-template-columns: 1fr;
        max-height: 378px;
    }

    .campaign-delivery-overview {
        grid-template-columns: 1fr;
    }

    .campaign-progress-ring {
        width: 112px;
        height: 112px;
    }

    .campaign-progress-ring::before {
        width: 84px;
        height: 84px;
    }

    .campaign-daily-metrics,
    .campaign-audience-strip {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .campaign-action-bar {
        align-items: flex-start;
        flex-direction: column;
    }

    .campaign-action-buttons {
        width: 100%;
        justify-content: flex-start;
    }

    .campaign-summary-grid {
        grid-template-columns: 1fr;
    }

    .campaign-audience-strip > div:last-child {
        grid-column: 1 / -1;
    }

    .campaign-detail-head {
        align-items: flex-start;
        flex-direction: column;
    }

    .campaign-all-toolbar {
        grid-template-columns: 1fr;
    }

    .campaign-all-item {
        grid-template-columns: 38px minmax(0, 1fr) auto;
        gap: .6rem;
    }

    .campaign-all-progress,
    .campaign-all-stats,
    .campaign-all-next {
        grid-column: 2 / 4;
        grid-row: auto;
    }

    .campaign-all-arrow {
        display: none;
    }
}

@media (max-width: 575.98px) {
    .campaign-hero-actions {
        align-items: stretch;
        flex-direction: column;
    }

    .campaign-create-button,
    .campaign-connection {
        width: 100%;
        justify-content: center;
    }

    .campaign-overview-card {
        align-items: flex-start;
        flex-direction: column;
        gap: .48rem;
        min-height: 112px;
    }

    .campaign-overview-card span:last-child {
        white-space: normal;
    }

    .campaign-browser,
    .campaign-focus {
        padding: .85rem;
        border-radius: 17px;
    }

    .campaign-list-item-top {
        grid-template-columns: 34px minmax(0, 1fr) auto;
    }

    .campaign-list-item-top .campaign-status-pill {
        grid-column: auto;
        justify-self: start;
    }

    .campaign-focus-head {
        align-items: flex-start;
        flex-direction: column;
    }

    .campaign-delivery-title {
        align-items: flex-start;
        flex-direction: column;
    }

    .campaign-timeline,
    .campaign-daily-metrics,
    .campaign-audience-strip {
        grid-template-columns: 1fr;
    }

    .campaign-audience-strip > div:last-child {
        grid-column: auto;
    }

    .campaign-action-buttons .btn,
    .campaign-action-buttons form {
        flex: 1 1 auto;
    }

    .campaign-action-buttons form .btn {
        width: 100%;
        justify-content: center;
    }

    .campaign-detail-head,
    .campaign-tab-content {
        padding: .9rem;
    }

    .campaign-definition-list > div {
        grid-template-columns: 1fr;
        gap: .14rem;
    }

    .campaign-definition-list dd {
        text-align: left;
    }

    .campaign-view-all-button {
        align-items: flex-start;
        flex-direction: column;
    }

    .campaign-all-modal-head {
        align-items: flex-start;
    }

    .campaign-all-modal-head-actions {
        align-items: flex-end;
        flex-direction: column-reverse;
    }

    .campaign-all-modal-head-actions .campaign-count-badge {
        display: none;
    }

    .campaign-all-modal-body {
        padding: .8rem;
    }

    .campaign-all-item {
        align-items: start;
        padding: .72rem;
    }

    .campaign-all-item > .campaign-status-pill {
        grid-column: 2 / 4;
        justify-self: start;
    }

    .campaign-all-progress,
    .campaign-all-stats,
    .campaign-all-next {
        grid-column: 1 / -1;
    }

    #campaignCreateModal .campaign-create-side-dialog {
        width: 100%;
        max-width: none;
    }

    #campaignCreateModal .modal-content {
        border-left: 0;
        border-radius: 0;
    }

    .campaign-lead-filters {
        padding: .8rem;
    }

    .campaign-lead-filters-head {
        align-items: flex-start;
    }

    .campaign-segment-picker-panel {
        position: static;
        margin-top: .45rem;
        box-shadow: 0 10px 24px rgba(15, 23, 42, .11);
    }

    .campaign-segment-picker-toolbar {
        align-items: stretch;
        flex-direction: column;
    }

    .campaign-segment-picker-actions {
        justify-content: space-between;
    }

    .campaign-segment-picker-actions button {
        flex: 1 1 50%;
    }
}


/* Leads workspace -------------------------------------------------------- */
.lead-hub {
    --lead-ink: color-mix(in srgb, var(--primary) 72%, #0b1220 28%);
    --lead-ink-soft: color-mix(in srgb, var(--primary) 62%, #17233a 38%);
    --lead-aqua: color-mix(in srgb, var(--primary) 62%, #ffffff 38%);
    --lead-sky: color-mix(in srgb, var(--primary) 76%, #ffffff 24%);
    --lead-surface: color-mix(in srgb, var(--card) 94%, #f7fbff 6%);
    display: grid;
    gap: 1.35rem;
    min-width: 0;
}

.lead-hero {
    isolation: isolate;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 2rem;
    min-height: 220px;
    padding: clamp(1.5rem, 2.8vw, 2.75rem);
    overflow: hidden;
    border: 1px solid rgba(255, 255, 255, .1);
    border-radius: 30px;
    background:
        linear-gradient(125deg, color-mix(in srgb, var(--primary) 78%, #07111f 22%) 0%, color-mix(in srgb, var(--primary) 52%, #111d33 48%) 58%, color-mix(in srgb, var(--primary) 34%, #142641 66%) 100%);
    color: #fff;
    box-shadow: 0 26px 60px rgba(15, 23, 42, .18);
}

.lead-hero::before {
    content: '';
    position: absolute;
    z-index: -1;
    inset: 0;
    opacity: .24;
    background-image:
        linear-gradient(rgba(255, 255, 255, .055) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255, 255, 255, .055) 1px, transparent 1px);
    background-size: 40px 40px;
    mask-image: linear-gradient(90deg, #000, transparent 74%);
}

.lead-hero-orb {
    position: absolute;
    z-index: -1;
    border-radius: 999px;
    filter: blur(3px);
    pointer-events: none;
}

.lead-hero-orb-one {
    top: -80px;
    right: 12%;
    width: 250px;
    height: 250px;
    background: radial-gradient(circle, color-mix(in srgb, var(--lead-aqua) 34%, transparent), transparent 68%);
}

.lead-hero-orb-two {
    right: -90px;
    bottom: -150px;
    width: 330px;
    height: 330px;
    background: radial-gradient(circle, color-mix(in srgb, var(--lead-sky) 30%, transparent), transparent 70%);
}

.lead-hero-copy {
    display: flex;
    align-items: flex-start;
    gap: 1.15rem;
    min-width: 0;
    max-width: 760px;
}

.lead-hero-mark {
    display: grid;
    flex: 0 0 auto;
    width: 58px;
    height: 58px;
    place-items: center;
    border: 1px solid rgba(255, 255, 255, .18);
    border-radius: 19px;
    background: rgba(255, 255, 255, .1);
    color: var(--lead-aqua);
    font-size: 1.45rem;
    box-shadow: inset 0 1px rgba(255, 255, 255, .12);
    backdrop-filter: blur(12px);
}

.lead-eyebrow {
    display: flex;
    align-items: center;
    gap: .55rem;
    margin: .05rem 0 .55rem;
    color: #b8c7d9;
    font-size: .72rem;
    font-weight: 800;
    letter-spacing: .13em;
    text-transform: uppercase;
}

.lead-eyebrow span {
    width: 22px;
    height: 2px;
    border-radius: 4px;
    background: var(--lead-aqua);
    box-shadow: 0 0 12px color-mix(in srgb, var(--lead-aqua) 78%, transparent);
}

.lead-hero h1 {
    margin: 0;
    color: #fff;
    font-family: 'Plus Jakarta Sans', 'Manrope', sans-serif;
    font-size: clamp(2.15rem, 4vw, 3.5rem);
    font-weight: 800;
    letter-spacing: -.055em;
    line-height: 1;
}

.lead-hero-copy p {
    max-width: 690px;
    margin: .8rem 0 1rem;
    color: #c4d0df;
    font-size: clamp(.9rem, 1.25vw, 1.03rem);
    line-height: 1.65;
}

.lead-hero-tags {
    display: flex;
    flex-wrap: wrap;
    gap: .55rem;
}

.lead-hero-tags span {
    display: inline-flex;
    align-items: center;
    gap: .45rem;
    padding: .42rem .7rem;
    border: 1px solid rgba(255, 255, 255, .12);
    border-radius: 999px;
    background: rgba(255, 255, 255, .07);
    color: #dce6f1;
    font-size: .72rem;
    font-weight: 700;
}

.lead-hero-tags i {
    color: var(--lead-aqua);
}

.lead-hero-actions {
    display: flex;
    flex: 0 0 auto;
    align-items: center;
    gap: 1.15rem;
}

.lead-hero-button-group {
    display: flex;
    align-items: center;
    gap: .6rem;
}

.lead-hero-pulse {
    display: grid;
    min-width: 112px;
    gap: .12rem;
    padding-right: 1.15rem;
    border-right: 1px solid rgba(255, 255, 255, .14);
    text-align: right;
}

.lead-hero-pulse span {
    color: #fff;
    font-family: 'Plus Jakarta Sans', sans-serif;
    font-size: 1.9rem;
    font-weight: 800;
    line-height: 1;
}

.lead-hero-pulse small {
    max-width: 90px;
    color: #a9b9cb;
    font-size: .68rem;
    line-height: 1.3;
}

.lead-primary-action {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .6rem;
    min-height: 48px;
    padding: .72rem 1rem .72rem .72rem;
    border: 0;
    border-radius: 15px;
    background: var(--lead-aqua);
    color: #071b20;
    font-size: .84rem;
    font-weight: 800;
    text-decoration: none;
    box-shadow: 0 14px 28px color-mix(in srgb, var(--primary) 24%, transparent);
    transition: transform .2s ease, box-shadow .2s ease, background .2s ease;
}

.lead-primary-action i {
    display: grid;
    width: 32px;
    height: 32px;
    place-items: center;
    border-radius: 10px;
    background: rgba(7, 27, 32, .1);
    font-size: 1rem;
}

.lead-primary-action:hover {
    transform: translateY(-2px);
    background: color-mix(in srgb, var(--primary) 50%, #ffffff 50%);
    color: #071b20;
    box-shadow: 0 18px 34px color-mix(in srgb, var(--primary) 32%, transparent);
}

.lead-secondary-action {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .5rem;
    min-height: 48px;
    padding: .72rem .9rem;
    border: 1px solid rgba(255, 255, 255, .18);
    border-radius: 15px;
    background: rgba(255, 255, 255, .08);
    color: #fff;
    font-size: .78rem;
    font-weight: 800;
    backdrop-filter: blur(10px);
    transition: transform .2s ease, background .2s ease, border-color .2s ease;
}

.lead-secondary-action i {
    color: var(--lead-aqua);
    font-size: 1rem;
}

.lead-secondary-action:hover {
    transform: translateY(-2px);
    border-color: color-mix(in srgb, var(--lead-aqua) 55%, transparent);
    background: rgba(255, 255, 255, .14);
    color: #fff;
}

.lead-scope-nav {
    position: relative;
    z-index: 2;
    display: flex;
    align-items: center;
    gap: .3rem;
    width: max-content;
    max-width: calc(100% - 2rem);
    margin: -2.25rem auto 0;
    padding: .42rem;
    overflow-x: auto;
    border: 1px solid color-mix(in srgb, var(--line) 82%, transparent);
    border-radius: 18px;
    background: color-mix(in srgb, var(--card) 92%, transparent);
    box-shadow: 0 16px 38px rgba(15, 23, 42, .12);
    scrollbar-width: none;
    backdrop-filter: blur(18px);
}

.lead-scope-nav::-webkit-scrollbar {
    display: none;
}

.lead-scope-link {
    display: inline-flex;
    flex: 0 0 auto;
    align-items: center;
    gap: .48rem;
    min-height: 42px;
    padding: .62rem .8rem;
    border-radius: 12px;
    color: var(--muted);
    font-size: .76rem;
    font-weight: 700;
    text-decoration: none;
    white-space: nowrap;
    transition: background .2s ease, color .2s ease, transform .2s ease;
}

.lead-scope-link i {
    font-size: .95rem;
}

.lead-scope-link:hover {
    background: var(--surface-soft);
    color: var(--text);
}

.lead-scope-link.is-active {
    background: var(--lead-ink);
    color: #fff;
    box-shadow: 0 8px 18px rgba(16, 26, 46, .2);
}

.lead-scope-link.is-active i {
    color: var(--lead-aqua);
}

.lead-overview {
    display: grid;
    grid-template-columns: minmax(290px, .88fr) minmax(0, 2.12fr);
    gap: 1rem;
}

.lead-conversion-card {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    min-height: 232px;
    padding: 1.35rem;
    overflow: hidden;
    border-radius: 24px;
    background:
        radial-gradient(circle at 100% 0, color-mix(in srgb, var(--lead-aqua) 18%, transparent), transparent 40%),
        linear-gradient(145deg, var(--lead-ink), color-mix(in srgb, var(--primary) 48%, #182a46 52%));
    color: #fff;
    box-shadow: 0 18px 40px rgba(15, 23, 42, .13);
}

.lead-conversion-head,
.lead-conversion-body {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
}

.lead-conversion-head > div {
    display: grid;
}

.lead-card-kicker,
.lead-section-kicker {
    color: #879ab2;
    font-size: .67rem;
    font-weight: 800;
    letter-spacing: .12em;
    text-transform: uppercase;
}

.lead-conversion-head strong {
    margin-top: .15rem;
    font-family: 'Plus Jakarta Sans', sans-serif;
    font-size: 2.35rem;
    font-weight: 800;
    line-height: 1;
}

.lead-conversion-head small {
    margin-top: .2rem;
    color: #a9b8ca;
    font-size: .74rem;
}

.lead-conversion-head > i {
    display: grid;
    width: 42px;
    height: 42px;
    place-items: center;
    border: 1px solid rgba(255, 255, 255, .1);
    border-radius: 14px;
    background: rgba(255, 255, 255, .06);
    color: var(--lead-aqua);
    font-size: 1.15rem;
}

.lead-conversion-ring {
    display: grid;
    flex: 0 0 auto;
    width: 92px;
    height: 92px;
    padding: 8px;
    place-items: center;
    border-radius: 50%;
    background: conic-gradient(var(--lead-aqua) 0 var(--lead-progress), rgba(255, 255, 255, .1) var(--lead-progress) 100%);
    box-shadow: 0 0 28px color-mix(in srgb, var(--primary) 10%, transparent);
}

.lead-conversion-ring > div {
    display: grid;
    width: 100%;
    height: 100%;
    place-content: center;
    border-radius: 50%;
    background: color-mix(in srgb, var(--primary) 38%, #111827 62%);
    text-align: center;
}

.lead-conversion-ring strong {
    font-size: 1rem;
    font-weight: 800;
}

.lead-conversion-ring span {
    color: #8fa1b8;
    font-size: .58rem;
}

.lead-conversion-copy {
    display: grid;
    min-width: 0;
    gap: .12rem;
}

.lead-conversion-copy span,
.lead-conversion-copy small {
    color: #91a3b9;
    font-size: .66rem;
}

.lead-conversion-copy strong {
    color: #fff;
    font-size: .85rem;
}

.lead-metric-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: .8rem;
    min-width: 0;
}

.lead-metric {
    --metric-color: var(--primary);
    position: relative;
    display: flex;
    align-items: center;
    gap: .8rem;
    min-width: 0;
    min-height: 108px;
    padding: 1rem;
    overflow: hidden;
    border: 1px solid color-mix(in srgb, var(--line) 74%, transparent);
    border-radius: 21px;
    background: var(--lead-surface);
    box-shadow: 0 12px 28px rgba(15, 23, 42, .055);
    transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}

.lead-metric::after {
    content: '';
    position: absolute;
    top: -28px;
    right: -28px;
    width: 78px;
    height: 78px;
    border-radius: 50%;
    background: color-mix(in srgb, var(--metric-color) 11%, transparent);
}

.lead-metric:hover {
    transform: translateY(-2px);
    border-color: color-mix(in srgb, var(--metric-color) 32%, var(--line));
    box-shadow: 0 16px 32px rgba(15, 23, 42, .08);
}

.lead-metric--cyan { --metric-color: color-mix(in srgb, var(--primary) 68%, #ffffff 32%); }
.lead-metric--blue { --metric-color: color-mix(in srgb, var(--primary) 84%, #ffffff 16%); }
.lead-metric--green { --metric-color: var(--primary); }
.lead-metric--amber { --metric-color: color-mix(in srgb, var(--primary) 86%, #111827 14%); }
.lead-metric--rose { --metric-color: color-mix(in srgb, var(--primary) 72%, #ffffff 28%); }
.lead-metric--violet { --metric-color: var(--primary-hover); }
.lead-metric--emerald { --metric-color: color-mix(in srgb, var(--primary) 76%, #111827 24%); }
.lead-metric--slate { --metric-color: color-mix(in srgb, var(--primary) 52%, var(--muted) 48%); }

.lead-metric-icon {
    display: grid;
    flex: 0 0 auto;
    width: 42px;
    height: 42px;
    place-items: center;
    border-radius: 14px;
    background: color-mix(in srgb, var(--metric-color) 11%, var(--card));
    color: var(--metric-color);
    font-size: 1.08rem;
}

.lead-metric-copy {
    display: grid;
    min-width: 0;
    gap: .18rem;
}

.lead-metric-copy strong {
    color: var(--text);
    font-family: 'Plus Jakarta Sans', sans-serif;
    font-size: 1.55rem;
    font-weight: 800;
    line-height: 1;
}

.lead-metric-copy span {
    overflow: hidden;
    color: var(--muted);
    font-size: .7rem;
    font-weight: 700;
    line-height: 1.3;
    text-overflow: ellipsis;
}

.lead-workspace {
    min-width: 0;
    overflow: hidden;
    border: 1px solid color-mix(in srgb, var(--line) 78%, transparent);
    border-radius: 27px;
    background: var(--lead-surface);
    box-shadow: 0 20px 46px rgba(15, 23, 42, .075);
}

.lead-workspace-head {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 1rem;
    padding: 1.4rem 1.5rem 1rem;
}

.lead-section-kicker {
    color: color-mix(in srgb, var(--primary) 72%, var(--muted));
}

.lead-workspace-head h2 {
    margin: .2rem 0 .1rem;
    color: var(--text);
    font-family: 'Plus Jakarta Sans', sans-serif;
    font-size: 1.35rem;
    font-weight: 800;
    letter-spacing: -.035em;
}

.lead-workspace-head p {
    margin: 0;
    color: var(--muted);
    font-size: .75rem;
}

.lead-result-count {
    display: inline-flex;
    align-items: baseline;
    gap: .3rem;
    padding: .5rem .7rem;
    border-radius: 11px;
    background: var(--surface-soft);
    color: var(--muted);
    font-size: .68rem;
    font-weight: 700;
}

.lead-result-count strong {
    color: var(--text);
    font-size: .9rem;
}

.lead-filter-form {
    margin: 0 1.5rem 1.2rem;
    padding: .55rem;
    border: 1px solid color-mix(in srgb, var(--line) 82%, transparent);
    border-radius: 18px;
    background: color-mix(in srgb, var(--surface-soft) 72%, var(--card));
}

.lead-filter-toolbar {
    display: grid;
    grid-template-columns: minmax(240px, 1fr) minmax(150px, 190px) auto auto;
    gap: .5rem;
}

.lead-search-field,
.lead-sort-field {
    position: relative;
    display: flex;
    align-items: center;
    min-width: 0;
    min-height: 46px;
    margin: 0;
    border: 1px solid color-mix(in srgb, var(--line) 88%, transparent);
    border-radius: 13px;
    background: var(--card);
    transition: border-color .2s ease, box-shadow .2s ease;
}

.lead-search-field:focus-within,
.lead-sort-field:focus-within {
    border-color: color-mix(in srgb, var(--primary) 45%, var(--line));
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--primary) 10%, transparent);
}

.lead-search-field > i,
.lead-sort-field > i {
    flex: 0 0 auto;
    margin-left: .85rem;
    color: var(--muted);
    font-size: .9rem;
}

.lead-search-field input,
.lead-sort-field select {
    width: 100%;
    min-width: 0;
    height: 44px;
    padding: 0 .75rem;
    border: 0;
    outline: 0;
    background: transparent;
    color: var(--text);
    font: inherit;
    font-size: .76rem;
}

.lead-sort-field select {
    cursor: pointer;
}

.lead-filter-toggle,
.lead-filter-submit {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .45rem;
    min-height: 46px;
    padding: .68rem .9rem;
    border-radius: 13px;
    font-size: .76rem;
    font-weight: 800;
}

.lead-filter-toggle {
    border: 1px solid color-mix(in srgb, var(--line) 88%, transparent);
    background: var(--card);
    color: var(--text);
}

.lead-filter-toggle:hover,
.lead-filter-toggle.has-filters {
    border-color: color-mix(in srgb, var(--primary) 30%, var(--line));
    background: color-mix(in srgb, var(--primary) 7%, var(--card));
    color: var(--primary);
}

.lead-filter-toggle b {
    display: grid;
    width: 20px;
    height: 20px;
    place-items: center;
    border-radius: 7px;
    background: var(--primary);
    color: #fff;
    font-size: .62rem;
}

.lead-filter-submit {
    border: 0;
    background: var(--lead-ink);
    color: #fff;
}

.lead-filter-submit i {
    display: grid;
    width: 25px;
    height: 25px;
    place-items: center;
    border-radius: 8px;
    background: var(--lead-aqua);
    color: var(--lead-ink);
}

.lead-filter-submit:hover {
    background: var(--lead-ink-soft);
}

.lead-advanced-filters {
    display: grid;
    gap: 1rem;
    margin-top: .65rem;
    padding: 1rem;
    border-top: 1px solid var(--line);
}

.lead-filter-group {
    display: grid;
    grid-template-columns: 120px minmax(0, 1fr);
    gap: 1rem;
}

.lead-filter-group-title {
    display: flex;
    align-items: center;
    gap: .45rem;
    align-self: start;
    padding-top: 1.55rem;
    color: var(--muted);
    font-size: .69rem;
    font-weight: 800;
}

.lead-filter-group-title i {
    color: var(--primary);
}

.lead-filter-grid {
    display: grid;
    gap: .7rem;
}

.lead-filter-grid-segments {
    grid-template-columns: repeat(4, minmax(0, 1fr));
}

.lead-filter-grid-dates {
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

.lead-filter-grid label {
    display: grid;
    min-width: 0;
    gap: .3rem;
    margin: 0;
}

.lead-filter-grid label > span {
    color: var(--muted);
    font-size: .64rem;
    font-weight: 700;
}

.lead-filter-grid select,
.lead-filter-grid input {
    width: 100%;
    min-width: 0;
    height: 42px;
    padding: 0 .7rem;
    border: 1px solid var(--line);
    border-radius: 11px;
    outline: 0;
    background: var(--card);
    color: var(--text);
    font: inherit;
    font-size: .72rem;
}

.lead-filter-grid select:focus,
.lead-filter-grid input:focus {
    border-color: color-mix(in srgb, var(--primary) 48%, var(--line));
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--primary) 9%, transparent);
}

.lead-filter-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding-top: .2rem;
    color: var(--muted);
    font-size: .66rem;
}

.lead-filter-footer a {
    display: inline-flex;
    align-items: center;
    gap: .35rem;
    color: var(--muted);
    font-weight: 800;
    text-decoration: none;
}

.lead-filter-footer a:hover {
    color: var(--text);
}

.lead-table-wrap {
    width: 100%;
    overflow: visible;
    border-top: 1px solid color-mix(in srgb, var(--line) 70%, transparent);
}

.lead-table {
    width: 100%;
    min-width: 0;
    border-collapse: collapse;
}

.lead-table th {
    padding: .8rem .75rem;
    border-bottom: 1px solid var(--line);
    background: color-mix(in srgb, var(--surface-soft) 62%, var(--card));
    color: var(--muted);
    font-size: .6rem;
    font-weight: 800;
    letter-spacing: .075em;
    text-align: left;
    text-transform: uppercase;
    white-space: nowrap;
}

.lead-table th:first-child,
.lead-table td:first-child {
    padding-left: 1.5rem;
}

.lead-table th:last-child,
.lead-table td:last-child {
    padding-right: 1.5rem;
}

.lead-table td {
    padding: .85rem .75rem;
    border-bottom: 1px solid color-mix(in srgb, var(--line) 62%, transparent);
    color: var(--text);
    font-size: .7rem;
    vertical-align: middle;
}

.lead-table tbody tr:not(.lead-empty-row) {
    transition: background .18s ease;
}

.lead-table tbody tr:not(.lead-empty-row):hover {
    background: color-mix(in srgb, var(--primary) 3.5%, var(--card));
}

.lead-table tbody tr:last-child td {
    border-bottom: 0;
}

.lead-person {
    display: flex;
    align-items: center;
    gap: .7rem;
    min-width: 170px;
    color: var(--text);
    text-decoration: none;
}

.lead-avatar {
    display: grid;
    flex: 0 0 auto;
    width: 39px;
    height: 39px;
    place-items: center;
    border-radius: 13px;
    background: linear-gradient(145deg, color-mix(in srgb, var(--primary) 88%, #1b2b47), color-mix(in srgb, var(--primary) 62%, #273955));
    color: #fff;
    font-size: .69rem;
    font-weight: 800;
    box-shadow: 0 7px 15px color-mix(in srgb, var(--primary) 17%, transparent);
}

.lead-person-copy {
    display: grid;
    min-width: 0;
    gap: .12rem;
}

.lead-person-copy strong {
    max-width: 190px;
    overflow: hidden;
    font-size: .76rem;
    font-weight: 800;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.lead-person-copy small {
    color: var(--muted);
    font-size: .6rem;
}

.lead-person-copy em {
    color: var(--primary);
    font-style: normal;
    font-weight: 800;
}

.lead-phone,
.lead-owner,
.lead-empty-value {
    display: inline-flex;
    align-items: center;
    gap: .35rem;
    white-space: nowrap;
}

.lead-phone i {
    color: #16a34a;
}

.lead-owner i,
.lead-empty-value {
    color: var(--muted);
}

.lead-origin-pill {
    display: inline-flex;
    max-width: 105px;
    padding: .32rem .52rem;
    overflow: hidden;
    border: 1px solid color-mix(in srgb, var(--line) 80%, transparent);
    border-radius: 8px;
    background: var(--surface-soft);
    color: var(--muted);
    font-size: .62rem;
    font-weight: 700;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.lead-status-pill,
.lead-response {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    white-space: nowrap;
}

.lead-status-pill {
    --status-color: var(--primary);
    padding: .34rem .52rem;
    border-radius: 9px;
    background: color-mix(in srgb, var(--status-color) 9%, var(--card));
    color: color-mix(in srgb, var(--status-color) 84%, var(--text));
    font-size: .62rem;
    font-weight: 800;
}

.lead-status-pill > i,
.lead-response > i {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: currentColor;
    box-shadow: 0 0 0 3px color-mix(in srgb, currentColor 12%, transparent);
}

.lead-status--new { --status-color: color-mix(in srgb, var(--primary) 68%, #ffffff 32%); }
.lead-status--contacted { --status-color: color-mix(in srgb, var(--primary) 84%, #ffffff 16%); }
.lead-status--responded { --status-color: var(--primary); }
.lead-status--no-response { --status-color: color-mix(in srgb, var(--primary) 58%, var(--muted) 42%); }
.lead-status--interested { --status-color: color-mix(in srgb, var(--primary) 74%, #ffffff 26%); }
.lead-status--negotiation { --status-color: var(--primary-hover); }
.lead-status--converted { --status-color: color-mix(in srgb, var(--primary) 78%, #111827 22%); }
.lead-status--no-interest,
.lead-status--archived { --status-color: color-mix(in srgb, var(--primary) 42%, var(--muted) 58%); }

.lead-response {
    color: var(--muted);
    font-size: .65rem;
    font-weight: 700;
}

.lead-response--waiting { color: var(--muted); }
.lead-response--responded { color: var(--primary); }
.lead-response--no-response { color: color-mix(in srgb, var(--primary) 58%, var(--muted) 42%); }

.lead-date {
    display: grid;
    min-width: 72px;
    gap: .08rem;
    white-space: nowrap;
}

.lead-date strong {
    font-size: .68rem;
    font-weight: 700;
}

.lead-date small {
    color: var(--muted);
    font-size: .58rem;
}

.lead-date.is-late strong,
.lead-date.is-late small {
    color: #d97706;
}

.lead-open-action {
    display: grid;
    width: 34px;
    height: 34px;
    place-items: center;
    border: 1px solid var(--line);
    border-radius: 11px;
    background: var(--card);
    color: var(--text);
    text-decoration: none;
    transition: transform .18s ease, background .18s ease, color .18s ease;
}

.lead-open-action:hover {
    transform: translate(2px, -2px);
    border-color: var(--lead-ink);
    background: var(--lead-ink);
    color: #fff;
}

.lead-empty-state {
    display: grid;
    justify-items: center;
    max-width: 440px;
    margin: 0 auto;
    padding: 3.5rem 1rem 4rem;
    text-align: center;
}

.lead-empty-state > span {
    display: grid;
    width: 74px;
    height: 74px;
    margin-bottom: 1rem;
    place-items: center;
    border: 1px solid color-mix(in srgb, var(--primary) 14%, var(--line));
    border-radius: 25px;
    background:
        radial-gradient(circle, color-mix(in srgb, var(--primary) 14%, transparent), transparent 68%),
        var(--surface-soft);
    color: var(--primary);
    font-size: 1.65rem;
}

.lead-empty-state strong {
    color: var(--text);
    font-family: 'Plus Jakarta Sans', sans-serif;
    font-size: 1.05rem;
}

.lead-empty-state p {
    max-width: 370px;
    margin: .45rem 0 1rem;
    color: var(--muted);
    font-size: .75rem;
    line-height: 1.55;
}

.lead-empty-state > div {
    display: flex;
    gap: .55rem;
}

.lead-import-modal .modal-dialog {
    max-width: 850px;
}

.lead-import-modal .modal-content {
    overflow: hidden;
    border: 0;
    border-radius: 26px;
    background: var(--card);
    box-shadow: 0 30px 80px rgba(15, 23, 42, .25);
}

.lead-import-head {
    position: relative;
    display: flex;
    align-items: flex-start;
    gap: .9rem;
    padding: 1.45rem 1.55rem;
    overflow: hidden;
    background:
        radial-gradient(circle at 86% 0, color-mix(in srgb, var(--lead-aqua) 24%, transparent), transparent 34%),
        linear-gradient(135deg, var(--lead-ink), color-mix(in srgb, var(--primary) 48%, #1a2d4b 52%));
    color: #fff;
}

.lead-import-head-icon {
    display: grid;
    flex: 0 0 auto;
    width: 46px;
    height: 46px;
    place-items: center;
    border-radius: 15px;
    background: var(--lead-aqua);
    color: var(--lead-ink);
    font-size: 1.15rem;
}

.lead-import-head > div:nth-child(2) {
    min-width: 0;
}

.lead-import-head span {
    color: var(--lead-aqua);
    font-size: .61rem;
    font-weight: 800;
    letter-spacing: .1em;
    text-transform: uppercase;
}

.lead-import-head h2 {
    margin: .12rem 0 .25rem;
    color: #fff;
    font-family: 'Plus Jakarta Sans', sans-serif;
    font-size: 1.35rem;
    font-weight: 800;
}

.lead-import-head p {
    margin: 0;
    color: #bac8d8;
    font-size: .72rem;
}

.lead-import-head .btn-close {
    margin-left: auto;
}

.lead-import-body {
    display: grid;
    gap: 1.25rem;
    padding: 1.4rem 1.55rem;
}

.lead-import-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1rem;
}

.lead-import-upload,
.lead-import-format,
.lead-import-settings {
    min-width: 0;
}

.lead-import-section-title {
    display: flex;
    align-items: center;
    gap: .65rem;
    margin-bottom: .8rem;
}

.lead-import-section-title > span {
    display: grid;
    flex: 0 0 auto;
    width: 29px;
    height: 29px;
    place-items: center;
    border-radius: 9px;
    background: color-mix(in srgb, var(--primary) 10%, var(--card));
    color: var(--primary);
    font-size: .58rem;
    font-weight: 800;
}

.lead-import-section-title > div {
    display: grid;
}

.lead-import-section-title strong {
    color: var(--text);
    font-size: .76rem;
}

.lead-import-section-title small {
    color: var(--muted);
    font-size: .61rem;
}

.lead-import-drop {
    display: grid;
    justify-items: center;
    min-height: 176px;
    padding: 1rem;
    border: 1px dashed color-mix(in srgb, var(--primary) 38%, var(--line));
    border-radius: 18px;
    background: color-mix(in srgb, var(--primary) 4%, var(--card));
    text-align: center;
    cursor: pointer;
    transition: border-color .2s ease, background .2s ease;
}

.lead-import-drop:hover {
    border-color: var(--primary);
    background: color-mix(in srgb, var(--primary) 7%, var(--card));
}

.lead-import-drop > i {
    display: grid;
    width: 48px;
    height: 48px;
    place-items: center;
    border-radius: 15px;
    background: color-mix(in srgb, var(--primary) 10%, var(--card));
    color: var(--primary);
    font-size: 1.3rem;
}

.lead-import-drop strong {
    margin-top: .5rem;
    color: var(--text);
    font-size: .77rem;
}

.lead-import-drop > span {
    color: var(--muted);
    font-size: .61rem;
}

.lead-import-drop input {
    width: 100%;
    margin-top: .7rem;
    color: var(--muted);
    font-size: .65rem;
}

.lead-template-link {
    display: flex;
    align-items: center;
    gap: .65rem;
    margin-top: .6rem;
    padding: .65rem .75rem;
    border: 1px solid var(--line);
    border-radius: 13px;
    color: var(--text);
    text-decoration: none;
}

.lead-template-link > i {
    display: grid;
    width: 33px;
    height: 33px;
    place-items: center;
    border-radius: 10px;
    background: color-mix(in srgb, var(--primary) 10%, var(--card));
    color: var(--primary);
}

.lead-template-link > span {
    display: grid;
}

.lead-template-link strong {
    font-size: .68rem;
}

.lead-template-link small {
    color: var(--muted);
    font-size: .58rem;
}

.lead-template-link:hover {
    border-color: color-mix(in srgb, var(--primary) 36%, var(--line));
    color: var(--primary);
}

.lead-import-example {
    overflow: hidden;
    border: 1px solid var(--line);
    border-radius: 16px;
}

.lead-import-example-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
}

.lead-import-example-row + .lead-import-example-row {
    border-top: 1px solid var(--line);
}

.lead-import-example-row span {
    padding: .72rem .75rem;
    color: var(--text);
    font-size: .66rem;
}

.lead-import-example-row span + span {
    border-left: 1px solid var(--line);
}

.lead-import-example-row.is-head {
    background: color-mix(in srgb, var(--primary) 8%, var(--card));
}

.lead-import-example-row.is-head span {
    color: var(--primary);
    font-size: .59rem;
    font-weight: 800;
    letter-spacing: .055em;
    text-transform: uppercase;
}

.lead-import-note {
    display: flex;
    align-items: flex-start;
    gap: .55rem;
    margin-top: .65rem;
    padding: .7rem;
    border-radius: 13px;
    background: color-mix(in srgb, var(--primary) 7%, var(--card));
    color: var(--primary);
}

.lead-import-note p {
    margin: 0;
    color: var(--muted);
    font-size: .61rem;
    line-height: 1.5;
}

.lead-import-settings {
    padding-top: 1rem;
    border-top: 1px solid var(--line);
}

.lead-import-settings .form-label {
    color: var(--text);
    font-size: .66rem;
    font-weight: 800;
}

.lead-import-settings .form-select {
    min-height: 44px;
    border-radius: 12px;
    font-size: .7rem;
}

.lead-import-footer {
    display: flex;
    justify-content: flex-end;
    gap: .65rem;
    padding: .9rem 1.55rem;
    border-top: 1px solid var(--line);
    background: color-mix(in srgb, var(--surface-soft) 58%, var(--card));
}

.offcanvas.offcanvas-end.lead-create-panel {
    --bs-offcanvas-width: min(570px, 96vw);
    border: 0;
    background: var(--card);
    box-shadow: -30px 0 70px rgba(15, 23, 42, .2);
}

.lead-create-head {
    align-items: flex-start;
    padding: 1.6rem;
    border: 0;
    background:
        radial-gradient(circle at 90% 0, color-mix(in srgb, var(--lead-aqua) 22%, transparent), transparent 36%),
        linear-gradient(135deg, var(--lead-ink), color-mix(in srgb, var(--primary) 48%, #1a2d4b 52%));
    color: #fff;
}

.lead-create-title {
    display: flex;
    align-items: flex-start;
    gap: .9rem;
}

.lead-create-title > span {
    display: grid;
    flex: 0 0 auto;
    width: 44px;
    height: 44px;
    place-items: center;
    border-radius: 14px;
    background: var(--lead-aqua);
    color: var(--lead-ink);
    font-size: 1.1rem;
}

.lead-create-title small {
    color: var(--lead-aqua);
    font-size: .62rem;
    font-weight: 800;
    letter-spacing: .1em;
    text-transform: uppercase;
}

.lead-create-title h2 {
    margin: .12rem 0 .25rem;
    color: #fff;
    font-family: 'Plus Jakarta Sans', sans-serif;
    font-size: 1.35rem;
    font-weight: 800;
}

.lead-create-title p {
    max-width: 390px;
    margin: 0;
    color: #adbed0;
    font-size: .72rem;
    line-height: 1.45;
}

.lead-create-body {
    padding: 0;
}

.lead-create-form {
    display: grid;
}

.lead-create-form > section {
    padding: 1.35rem 1.6rem;
    border-bottom: 1px solid var(--line);
}

.lead-form-section-title {
    display: flex;
    align-items: center;
    gap: .7rem;
    margin-bottom: 1rem;
}

.lead-form-section-title > span {
    display: grid;
    width: 30px;
    height: 30px;
    place-items: center;
    border-radius: 10px;
    background: color-mix(in srgb, var(--primary) 10%, var(--card));
    color: var(--primary);
    font-size: .6rem;
    font-weight: 800;
}

.lead-form-section-title > div {
    display: grid;
}

.lead-form-section-title strong {
    color: var(--text);
    font-size: .8rem;
}

.lead-form-section-title small {
    color: var(--muted);
    font-size: .62rem;
}

.lead-create-form .form-label {
    color: var(--text);
    font-size: .68rem;
    font-weight: 800;
}

.lead-create-form .form-label small {
    color: var(--muted);
    font-size: .58rem;
    font-weight: 600;
}

.lead-create-form .form-control,
.lead-create-form .form-select {
    min-height: 46px;
    border-radius: 12px;
}

.lead-input-icon {
    position: relative;
}

.lead-input-icon > i {
    position: absolute;
    z-index: 1;
    top: 50%;
    left: .8rem;
    color: #16a34a;
    transform: translateY(-50%);
}

.lead-input-icon .form-control {
    padding-left: 2.25rem;
}

.lead-create-footer {
    position: sticky;
    z-index: 2;
    bottom: 0;
    display: flex;
    justify-content: flex-end;
    gap: .7rem;
    padding: 1rem 1.6rem;
    border-top: 1px solid var(--line);
    background: color-mix(in srgb, var(--card) 92%, transparent);
    backdrop-filter: blur(15px);
}

html[data-theme='dark'] .lead-hub {
    --lead-surface: #181818;
}

html[data-theme='dark'] .lead-scope-nav,
html[data-theme='dark'] .lead-workspace,
html[data-theme='dark'] .lead-metric,
html[data-theme='dark'] .lead-search-field,
html[data-theme='dark'] .lead-sort-field,
html[data-theme='dark'] .lead-filter-toggle,
html[data-theme='dark'] .lead-filter-grid select,
html[data-theme='dark'] .lead-filter-grid input,
html[data-theme='dark'] .lead-open-action {
    background-color: #181818;
}

html[data-theme='dark'] .lead-filter-form,
html[data-theme='dark'] .lead-table th,
html[data-theme='dark'] .lead-origin-pill {
    background: #121212;
}

html[data-theme='dark'] .lead-filter-submit,
html[data-theme='dark'] .lead-scope-link.is-active,
html[data-theme='dark'] .lead-open-action:hover {
    background: color-mix(in srgb, var(--primary) 64%, #161616 36%);
}

html[data-theme='dark'] .lead-table tbody tr:not(.lead-empty-row):hover {
    background: #202020;
}

@media (max-width: 1399.98px) {
    .lead-hero {
        min-height: 200px;
    }

    .lead-overview {
        grid-template-columns: minmax(260px, .82fr) minmax(0, 2.18fr);
    }

    .lead-metric {
        min-height: 98px;
        padding: .82rem;
    }

    .lead-metric-icon {
        width: 36px;
        height: 36px;
    }

    .lead-table th:nth-child(3),
    .lead-table td:nth-child(3),
    .lead-table th:nth-child(9),
    .lead-table td:nth-child(9) {
        display: none;
    }
}

@media (max-width: 1199.98px) {
    .lead-hero-actions {
        align-items: flex-end;
        flex-direction: column;
    }

    .lead-hero-pulse {
        padding: 0 0 .7rem;
        border-right: 0;
        border-bottom: 1px solid rgba(255, 255, 255, .14);
    }

    .lead-overview {
        grid-template-columns: 1fr;
    }

    .lead-conversion-card {
        min-height: 190px;
    }

    .lead-metric-grid {
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }

    .lead-filter-group {
        grid-template-columns: 1fr;
        gap: .55rem;
    }

    .lead-filter-group-title {
        padding-top: 0;
    }
}

@media (max-width: 991.98px) {
    .lead-hero {
        align-items: flex-start;
        flex-direction: column;
    }

    .lead-hero-actions {
        width: 100%;
        align-items: center;
        flex-direction: row;
        justify-content: space-between;
    }

    .lead-hero-pulse {
        align-content: center;
        min-height: 48px;
        padding: 0 1rem 0 0;
        border-right: 1px solid rgba(255, 255, 255, .14);
        border-bottom: 0;
        text-align: left;
    }

    .lead-filter-toolbar {
        grid-template-columns: minmax(0, 1fr) minmax(145px, 180px) auto;
    }

    .lead-filter-submit {
        grid-column: 1 / -1;
    }

    .lead-filter-grid-segments,
    .lead-filter-grid-dates {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 767.98px) {
    .lead-hub {
        gap: 1rem;
    }

    .lead-hero {
        min-height: 0;
        gap: 1.25rem;
        padding: 1.35rem;
        border-radius: 23px;
    }

    .lead-hero-copy {
        gap: .8rem;
    }

    .lead-hero-mark {
        width: 45px;
        height: 45px;
        border-radius: 14px;
        font-size: 1.1rem;
    }

    .lead-hero h1 {
        font-size: 2rem;
    }

    .lead-hero-copy p {
        margin: .55rem 0 .8rem;
        font-size: .78rem;
    }

    .lead-hero-tags span:last-child,
    .lead-hero-pulse {
        display: none;
    }

    .lead-hero-actions,
    .lead-hero-button-group,
    .lead-primary-action {
        width: 100%;
    }

    .lead-hero-button-group {
        display: grid;
        grid-template-columns: 1fr 1fr;
    }

    .lead-secondary-action,
    .lead-primary-action {
        padding-right: .65rem;
        padding-left: .65rem;
    }

    .lead-scope-nav {
        width: calc(100% - 1rem);
        max-width: none;
        margin-top: -1.75rem;
        justify-content: flex-start;
        border-radius: 15px;
    }

    .lead-scope-link {
        min-height: 39px;
        padding: .55rem .68rem;
        font-size: .69rem;
    }

    .lead-conversion-card {
        min-height: 205px;
        border-radius: 21px;
    }

    .lead-metric-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: .65rem;
    }

    .lead-metric {
        min-height: 90px;
        padding: .78rem;
        border-radius: 17px;
    }

    .lead-metric-copy strong {
        font-size: 1.3rem;
    }

    .lead-metric-copy span {
        font-size: .63rem;
    }

    .lead-workspace {
        border-radius: 22px;
    }

    .lead-workspace-head {
        align-items: flex-start;
        padding: 1.2rem 1rem .85rem;
    }

    .lead-workspace-head p {
        display: none;
    }

    .lead-filter-form {
        margin: 0 .8rem 1rem;
    }

    .lead-filter-toolbar {
        grid-template-columns: 1fr auto;
    }

    .lead-search-field {
        grid-column: 1 / -1;
    }

    .lead-sort-field {
        min-width: 0;
    }

    .lead-filter-toggle span,
    .lead-filter-submit span {
        display: none;
    }

    .lead-filter-submit {
        grid-column: auto;
        padding: .5rem;
    }

    .lead-filter-submit i {
        width: 30px;
        height: 30px;
    }

    .lead-advanced-filters {
        padding: .85rem .35rem .35rem;
    }

    .lead-filter-grid-segments,
    .lead-filter-grid-dates {
        grid-template-columns: 1fr;
    }

    .lead-filter-footer {
        align-items: flex-start;
        flex-direction: column;
    }

    .lead-table-wrap {
        padding: .2rem .8rem 1rem;
        overflow: visible;
        border-top: 1px solid var(--line);
    }

    .lead-table {
        min-width: 0;
    }

    .lead-table thead {
        display: none;
    }

    .lead-table tbody {
        display: grid;
        gap: .75rem;
        padding-top: .8rem;
    }

    .lead-table tbody tr:not(.lead-empty-row) {
        position: relative;
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: .65rem .9rem;
        padding: .95rem;
        border: 1px solid var(--line);
        border-radius: 18px;
        background: var(--card);
        box-shadow: 0 8px 20px rgba(15, 23, 42, .05);
    }

    .lead-table tbody tr:not(.lead-empty-row):hover {
        background: var(--card);
    }

    .lead-table td,
    .lead-table th:first-child,
    .lead-table td:first-child,
    .lead-table th:last-child,
    .lead-table td:last-child {
        display: grid;
        gap: .25rem;
        padding: 0;
        border: 0;
    }

    .lead-table td::before {
        content: attr(data-label);
        color: var(--muted);
        font-size: .56rem;
        font-weight: 800;
        letter-spacing: .055em;
        text-transform: uppercase;
    }

    .lead-table td:first-child {
        grid-column: 1 / -1;
        padding-bottom: .75rem;
        border-bottom: 1px solid var(--line);
    }

    .lead-table td:first-child::before,
    .lead-table td:last-child::before {
        display: none;
    }

    .lead-table td:last-child {
        position: absolute;
        right: .95rem;
        margin-top: .2rem;
    }

    .lead-table th:nth-child(3),
    .lead-table td:nth-child(3),
    .lead-table th:nth-child(9),
    .lead-table td:nth-child(9) {
        display: grid;
    }

    .lead-person-copy strong {
        max-width: 210px;
    }

    .lead-empty-row,
    .lead-empty-row td {
        display: block;
    }

    .lead-empty-row td::before {
        display: none;
    }

    .lead-empty-state {
        padding: 2.5rem .5rem;
    }

    .lead-import-modal .modal-dialog {
        min-height: 100%;
        margin: 0;
    }

    .lead-import-modal .modal-content {
        min-height: 100vh;
        border-radius: 0;
    }

    .lead-import-grid {
        grid-template-columns: 1fr;
    }

    .lead-import-head,
    .lead-import-body,
    .lead-import-footer {
        padding-right: 1rem;
        padding-left: 1rem;
    }

    .lead-import-footer {
        position: sticky;
        bottom: 0;
    }

    .lead-create-head,
    .lead-create-form > section,
    .lead-create-footer {
        padding-right: 1rem;
        padding-left: 1rem;
    }

    .lead-create-title p {
        display: none;
    }
}

@media (max-width: 430px) {
    .lead-hero-copy {
        display: block;
    }

    .lead-hero-mark {
        margin-bottom: .8rem;
    }

    .lead-conversion-body {
        align-items: flex-start;
    }

    .lead-conversion-ring {
        width: 82px;
        height: 82px;
    }

    .lead-metric {
        align-items: flex-start;
        flex-direction: column;
        gap: .55rem;
    }

    .lead-workspace-head h2 {
        font-size: 1.1rem;
    }

    .lead-result-count {
        padding: .42rem .5rem;
    }
}

/* Keep the Super Admin cockpit grid authoritative after shared responsive rules. */
/* Super Admin refinement: spacious structure, neutral palette, restrained accents. */
.super-admin-view-nav {
    display: flex;
    align-items: center;
    gap: .35rem;
    width: fit-content;
    max-width: 100%;
    margin-bottom: 1.35rem;
    padding: .35rem;
    overflow-x: auto;
    border: 1px solid var(--line);
    border-radius: 1rem;
    background: var(--card);
    box-shadow: 0 8px 24px rgba(15, 23, 42, .035);
    scrollbar-width: none;
}
.super-admin-view-nav::-webkit-scrollbar { display: none; }
.super-admin-view-nav button {
    display: inline-flex;
    align-items: center;
    gap: .55rem;
    min-height: 42px;
    padding: .6rem .85rem;
    border: 0;
    border-radius: .72rem;
    color: var(--muted);
    font-size: .82rem;
    font-weight: 800;
    white-space: nowrap;
    background: transparent;
    transition: color .16s ease, background .16s ease, box-shadow .16s ease;
}
.super-admin-view-nav button:hover { color: var(--text); background: var(--surface-soft); }
.super-admin-view-nav button.is-active {
    color: var(--text);
    background: var(--surface-soft);
    box-shadow: inset 0 0 0 1px var(--line);
}
.super-admin-view-nav button.is-active i { color: var(--primary); }
.super-admin-view-nav button b {
    display: grid;
    place-items: center;
    min-width: 1.35rem;
    height: 1.35rem;
    padding-inline: .3rem;
    border-radius: 999px;
    color: var(--muted);
    font-size: .65rem;
    background: var(--card);
}
.super-admin-view[hidden] { display: none !important; }
.super-admin-view:not([hidden]) { animation: super-admin-view-in .22s ease-out; }
@keyframes super-admin-view-in {
    from { opacity: 0; transform: translateY(5px); }
    to { opacity: 1; transform: translateY(0); }
}

.super-admin-dashboard {
    --sa-accent: var(--primary);
    gap: 1.35rem;
}

.super-admin-hero {
    min-height: 0;
    padding: clamp(1.5rem, 2.7vw, 2.25rem);
    border: 1px solid var(--line);
    border-radius: 1.5rem;
    color: var(--text);
    background: var(--card);
    box-shadow: 0 14px 38px rgba(15, 23, 42, .055);
}
.super-admin-hero::after { display: none; }
.super-admin-hero-copy { max-width: 760px; }
.super-admin-hero .super-admin-eyebrow { color: var(--primary); }
.super-admin-hero h1 {
    margin: .45rem 0 .45rem;
    color: var(--text);
    font-size: clamp(1.9rem, 3.5vw, 3rem);
    line-height: 1.08;
    letter-spacing: -.055em;
}
.super-admin-hero p { color: var(--muted); font-size: 1rem; }
.super-admin-actions { align-self: center; }
.super-admin-action {
    min-height: 44px;
    border-color: var(--line);
    border-radius: .85rem;
    color: var(--text);
    background: var(--surface-soft);
    backdrop-filter: none;
}
.super-admin-action:hover { border-color: color-mix(in srgb, var(--primary) 35%, var(--line)); background: var(--card); }
.super-admin-action.is-accent { border-color: var(--primary); color: #fff; background: var(--primary); }

.super-admin-kpi-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1rem; }
.super-admin-kpi,
.super-admin-kpi.is-primary,
.super-admin-kpi.is-revenue {
    grid-column: auto;
    min-height: 154px;
    padding: 1.3rem;
    border: 1px solid var(--line);
    border-radius: 1.2rem;
    color: var(--text);
    background: var(--card);
    box-shadow: 0 10px 30px rgba(15, 23, 42, .04);
}
.super-admin-kpi.is-primary,
.super-admin-kpi.is-revenue { border-top: 3px solid var(--primary); }
.super-admin-kpi.is-revenue::after { display: none; }
.super-admin-kpi-top > i,
.super-admin-kpi.is-primary .super-admin-kpi-top > i {
    width: 2.35rem;
    height: 2.35rem;
    border: 0;
    border-radius: .75rem;
    color: var(--primary);
    background: color-mix(in srgb, var(--primary) 10%, var(--card));
}
.super-admin-kpi.is-primary span,
.super-admin-kpi.is-primary small,
.super-admin-kpi.is-primary strong,
.super-admin-kpi.is-revenue span,
.super-admin-kpi.is-revenue small,
.super-admin-kpi.is-revenue strong { color: inherit; }
.super-admin-kpi strong { margin-top: 1.15rem; }

.super-admin-board { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.15rem; }
.super-admin-board .super-admin-panel.is-growth { grid-column: 1 / -1; }
.super-admin-board-secondary { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.super-admin-board-secondary .super-admin-panel.is-shortcuts { grid-column: 1 / -1; }
.super-admin-panel,
.super-admin-panel.is-alerts {
    padding: 1.4rem;
    border: 1px solid var(--line);
    border-radius: 1.25rem;
    background: var(--card);
    box-shadow: 0 10px 32px rgba(15,23,42,.04);
}
.super-admin-panel::before { display: none; }
.super-admin-panel-head { margin-bottom: 1.45rem; }
.super-admin-panel-head span { color: var(--muted); }
.super-admin-bar { grid-template-columns: 125px minmax(0, 1fr) 36px; gap: 1rem; padding: .5rem 0; }
.super-admin-bar div { height: .48rem; background: var(--surface-soft); }
.super-admin-bar i,
.super-admin-panel.is-status .super-admin-bar i { background: var(--primary); }
.super-admin-column-chart { min-height: 225px; padding: .75rem 1rem 0; }
.super-admin-column-chart div { height: 205px; }
.super-admin-column-chart i { width: min(62px, 65%); background: color-mix(in srgb, var(--primary) 72%, #94a3b8); }
.super-admin-alert { padding: .9rem .25rem; }
.super-admin-finance-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .75rem; }
.super-admin-finance-grid div { padding: 1rem; border: 1px solid var(--line); background: var(--surface-soft); }
.super-admin-shortcuts { grid-template-columns: repeat(5, minmax(0, 1fr)); gap: .75rem; }
.super-admin-shortcuts button,
.super-admin-shortcuts a { min-height: 78px; padding: .9rem; border: 1px solid var(--line); background: var(--surface-soft); }
.super-admin-shortcuts i { color: var(--primary); background: color-mix(in srgb, var(--primary) 9%, var(--card)); }

.admin-companies-card { border: 1px solid var(--line); border-radius: 1.25rem; box-shadow: 0 10px 32px rgba(15,23,42,.04); }
.admin-companies-heading span { color: var(--primary); }
.admin-companies-heading b { color: var(--text); background: var(--surface-soft); }
.admin-companies-table { border-collapse: collapse; border-spacing: 0; }
.admin-companies-table tbody tr { box-shadow: none; }
.admin-companies-table tbody td { border-top: 1px solid var(--line); background: transparent; }
.admin-companies-table tbody td:first-child,
.admin-companies-table tbody td:last-child { border-radius: 0; }

html[data-theme='dark'] .super-admin-hero,
html[data-theme='dark'] .super-admin-kpi,
html[data-theme='dark'] .super-admin-kpi.is-primary,
html[data-theme='dark'] .super-admin-kpi.is-revenue,
html[data-theme='dark'] .super-admin-panel,
html[data-theme='dark'] .super-admin-panel.is-alerts { color: var(--text); background: var(--card); border-color: var(--line); }
html[data-theme='dark'] .super-admin-hero h1,
html[data-theme='dark'] .super-admin-kpi.is-primary strong,
html[data-theme='dark'] .super-admin-kpi.is-revenue strong { color: var(--text); }

@media (max-width: 1280px) and (min-width: 861px) {
    .super-admin-kpi-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .super-admin-kpi,
    .super-admin-kpi.is-primary,
    .super-admin-kpi.is-revenue { grid-column: auto; }
}

@media (max-width: 860px) and (min-width: 561px) {
    .super-admin-kpi-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .super-admin-kpi,
    .super-admin-kpi.is-primary,
    .super-admin-kpi.is-revenue { grid-column: span 1; }
    .super-admin-shortcuts { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 560px) {
    .super-admin-view-nav { width: 100%; border-radius: .9rem; }
    .super-admin-view-nav button { flex: 0 0 auto; }
    .super-admin-hero { padding: 1.25rem; border-radius: 1.35rem; }
    .super-admin-kpi-grid { grid-template-columns: 1fr; }
    .super-admin-kpi,
    .super-admin-kpi.is-primary,
    .super-admin-kpi.is-revenue { grid-column: 1; min-height: 132px; }
    .super-admin-shortcuts { grid-template-columns: 1fr; }
}

/* Super Admin control center */
.super-admin-shell {
    display: grid;
    grid-template-columns: 248px minmax(0, 1fr);
    gap: 1.25rem;
    align-items: start;
    width: 100%;
    min-width: 0;
}

.super-admin-sidebar {
    position: sticky;
    top: 1rem;
    display: flex;
    flex-direction: column;
    min-height: calc(100vh - 2rem);
    padding: 1rem;
    border: 1px solid var(--line);
    border-radius: 1.25rem;
    background: color-mix(in srgb, var(--card) 97%, var(--primary) 3%);
    box-shadow: 0 14px 38px rgba(15, 23, 42, .055);
}

.super-admin-sidebar-brand {
    display: flex;
    align-items: center;
    gap: .75rem;
    padding: .25rem .3rem 1rem;
    border-bottom: 1px solid var(--line);
}

.super-admin-sidebar-brand > span {
    display: grid;
    place-items: center;
    width: 2.55rem;
    height: 2.55rem;
    flex: 0 0 auto;
    border-radius: .8rem;
    color: #fff;
    font-size: 1.05rem;
    background: var(--primary);
    box-shadow: 0 8px 20px color-mix(in srgb, var(--primary) 24%, transparent);
}

.super-admin-sidebar-brand div { display: grid; min-width: 0; }
.super-admin-sidebar-brand strong { color: var(--text); font-size: .92rem; }
.super-admin-sidebar-brand small { color: var(--muted); font-size: .7rem; }

.super-admin-sidebar .super-admin-view-nav {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    width: 100%;
    max-width: none;
    margin: 1rem 0;
    padding: 0;
    overflow: visible;
    border: 0;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
}

.super-admin-sidebar .super-admin-view-nav > small {
    margin: .8rem .65rem .3rem;
    color: var(--muted);
    font-size: .61rem;
    font-weight: 900;
    letter-spacing: .12em;
}

.super-admin-sidebar .super-admin-view-nav button,
.super-admin-sidebar .super-admin-view-nav a {
    display: grid;
    grid-template-columns: 1.35rem minmax(0, 1fr) auto;
    align-items: center;
    gap: .65rem;
    width: 100%;
    min-height: 42px;
    padding: .62rem .7rem;
    border: 0;
    border-radius: .7rem;
    color: var(--muted);
    font-size: .79rem;
    font-weight: 750;
    text-align: left;
    text-decoration: none;
    background: transparent;
    transition: color .16s ease, background .16s ease, transform .16s ease;
}

.super-admin-sidebar .super-admin-view-nav button:hover,
.super-admin-sidebar .super-admin-view-nav a:hover {
    color: var(--text);
    background: var(--surface-soft);
    transform: translateX(2px);
}

.super-admin-sidebar .super-admin-view-nav button.is-active {
    color: var(--primary);
    background: color-mix(in srgb, var(--primary) 10%, var(--card));
    box-shadow: none;
}

.super-admin-sidebar .super-admin-view-nav button.is-active::before {
    position: absolute;
    left: 0;
    width: 3px;
    height: 22px;
    border-radius: 0 4px 4px 0;
    background: var(--primary);
    content: "";
}

.super-admin-sidebar .super-admin-view-nav button { position: relative; }
.super-admin-sidebar .super-admin-view-nav i { width: 1.25rem; text-align: center; }
.super-admin-sidebar .super-admin-view-nav b { justify-self: end; }

.super-admin-sidebar-foot {
    display: flex;
    align-items: center;
    gap: .65rem;
    margin-top: auto;
    padding: .8rem;
    border: 1px solid var(--line);
    border-radius: .8rem;
    color: var(--muted);
    font-size: .68rem;
    background: var(--surface-soft);
}
.super-admin-sidebar-foot i { color: var(--primary); }
.super-admin-sidebar-foot strong { color: var(--text); font-weight: 800; }

.super-admin-workspace {
    display: grid;
    gap: 1.1rem;
    min-width: 0;
}

.super-admin-topbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    min-height: 72px;
    padding: .9rem 1.1rem;
    border: 1px solid var(--line);
    border-radius: 1.1rem;
    background: var(--card);
}
.super-admin-topbar > div:first-child { display: grid; gap: .15rem; }
.super-admin-topbar > div:first-child > span {
    color: var(--primary);
    font-size: .62rem;
    font-weight: 900;
    letter-spacing: .12em;
}
.super-admin-topbar h1 {
    margin: 0;
    color: var(--text);
    font-size: 1.25rem;
    font-weight: 850;
    letter-spacing: -.025em;
}
.super-admin-topbar-actions { display: flex; gap: .55rem; }
.super-admin-topbar-actions .btn {
    display: inline-flex;
    align-items: center;
    gap: .45rem;
    min-height: 40px;
    border-radius: .72rem;
    font-size: .78rem;
    font-weight: 800;
}

.super-admin-workspace .super-admin-hero {
    padding: 1.35rem 1.5rem;
    border-radius: 1.15rem;
    box-shadow: none;
}
.super-admin-workspace .super-admin-hero h1 { font-size: clamp(1.55rem, 2.5vw, 2.15rem); letter-spacing: -.04em; }
.super-admin-workspace .super-admin-kpi,
.super-admin-workspace .super-admin-panel,
.super-admin-workspace .admin-companies-card {
    border-radius: 1rem;
    box-shadow: 0 7px 22px rgba(15, 23, 42, .035);
}

.admin-company-directory-tools {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    flex-wrap: wrap;
    gap: .65rem;
    flex: 1;
}
.admin-company-directory-tools > b { flex: 0 0 auto; white-space: nowrap; }
.admin-company-search {
    display: flex;
    align-items: center;
    gap: .5rem;
    width: min(330px, 100%);
    min-height: 40px;
    padding: 0 .75rem;
    border: 1px solid var(--line);
    border-radius: .7rem;
    color: var(--muted);
    background: var(--surface-soft);
}
.admin-company-search:focus-within {
    border-color: color-mix(in srgb, var(--primary) 45%, var(--line));
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--primary) 10%, transparent);
}
.admin-company-search input {
    width: 100%;
    min-width: 0;
    border: 0;
    outline: 0;
    color: var(--text);
    font-size: .78rem;
    background: transparent;
}

.admin-companies-card,
.admin-companies-card .card-body,
.admin-companies-card .table-responsive {
    min-width: 0;
    max-width: 100%;
}

.admin-companies-card .table-responsive {
    overflow-x: auto;
    scrollbar-gutter: stable;
}

.admin-companies-table {
    width: 100%;
    min-width: 940px;
    table-layout: fixed;
}

.admin-companies-table th:nth-child(1) { width: 18%; }
.admin-companies-table th:nth-child(2) { width: 21%; }
.admin-companies-table th:nth-child(3) { width: 31%; }
.admin-companies-table th:nth-child(4) { width: 25%; }
.admin-companies-table th:nth-child(5) { width: 5%; }

.admin-companies-table tbody td {
    padding: 1rem .65rem;
    overflow: hidden;
    vertical-align: top;
    word-break: normal;
    overflow-wrap: normal;
}

.admin-companies-table tbody td:first-child .fw-semibold {
    overflow: hidden;
    color: var(--text);
    font-size: .88rem;
    font-weight: 800 !important;
    line-height: 1.3;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.admin-companies-table tbody td:first-child .badge { white-space: nowrap; }

.admin-companies-table .email-truncate {
    display: block;
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.admin-company-access {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: .45rem;
}

.admin-company-access label {
    display: grid;
    gap: .3rem;
    min-width: 0;
    margin: 0;
}

.admin-company-access label > span {
    color: var(--muted);
    font-size: .61rem;
    font-weight: 850;
    letter-spacing: .06em;
    text-transform: uppercase;
}

.admin-company-access .form-select-sm {
    width: 100%;
    min-width: 0;
    height: 36px;
    padding-right: 1.8rem;
    font-size: .75rem;
}

.admin-company-features {
    display: grid;
    gap: .42rem;
}

.admin-company-feature-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .6rem;
    min-width: 0;
}

.admin-company-feature-row > span:first-child {
    display: inline-flex;
    align-items: center;
    gap: .35rem;
    min-width: 0;
    color: var(--muted);
    font-size: .7rem;
    font-weight: 750;
    white-space: nowrap;
}

.admin-company-feature-row > span:first-child i {
    width: 1rem;
    color: var(--primary);
    text-align: center;
}

.admin-company-feature-row .admin-feature-cell {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: .35rem;
    min-width: 0;
}

.admin-company-feature-row .admin-feature-cell small {
    color: var(--muted);
    font-size: .62rem;
    white-space: nowrap;
}

.admin-feature-toggle {
    display: inline-flex;
    align-items: center;
    gap: .3rem;
    min-height: 28px;
    padding: .25rem .5rem;
    border: 1px solid color-mix(in srgb, var(--muted) 25%, var(--line));
    border-radius: 999px;
    color: var(--muted);
    font-size: .65rem;
    font-weight: 800;
    background: var(--card);
}

.admin-feature-toggle.is-on {
    border-color: color-mix(in srgb, #059669 28%, var(--line));
    color: #047857;
    background: color-mix(in srgb, #d1fae5 70%, var(--card));
}

.admin-feature-toggle i { font-size: .9rem; }
.admin-company-actions { overflow: visible !important; text-align: right; }
.admin-company-actions .dropdown { display: inline-block; }

@media (max-width: 1150px) {
    .admin-companies-table { min-width: 900px; }
    .admin-company-feature-row .admin-feature-cell small { display: none; }
}

@media (max-width: 1100px) {
    .super-admin-shell { grid-template-columns: 210px minmax(0, 1fr); gap: .85rem; }
    .super-admin-sidebar { padding: .75rem; }
    .super-admin-kpi-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 820px) {
    .super-admin-shell { display: block; }
    .super-admin-sidebar {
        position: static;
        min-height: 0;
        margin-bottom: .85rem;
        padding: .75rem;
    }
    .super-admin-sidebar-brand,
    .super-admin-sidebar-foot,
    .super-admin-sidebar .super-admin-view-nav > small { display: none; }
    .super-admin-sidebar .super-admin-view-nav {
        flex-direction: row;
        gap: .35rem;
        margin: 0;
        overflow-x: auto;
        scrollbar-width: none;
    }
    .super-admin-sidebar .super-admin-view-nav button,
    .super-admin-sidebar .super-admin-view-nav a {
        display: inline-flex;
        width: auto;
        flex: 0 0 auto;
        white-space: nowrap;
    }
    .super-admin-sidebar .super-admin-view-nav button.is-active::before { display: none; }
    .super-admin-topbar { min-height: 64px; }
}

@media (max-width: 560px) {
    .super-admin-topbar { align-items: flex-start; padding: .8rem; }
    .super-admin-topbar-actions .btn span { display: none; }
    .super-admin-topbar-actions .btn { width: 40px; justify-content: center; padding: 0; }
    .super-admin-workspace .super-admin-hero { display: block; padding: 1rem; }
    .super-admin-workspace .super-admin-hero .super-admin-actions { margin-top: 1rem; }
    .admin-companies-heading { align-items: stretch; flex-direction: column; }
    .admin-company-directory-tools { align-items: stretch; flex-direction: column; }
    .admin-company-search { width: 100%; }
}

.admin-commercial-page {
    display: grid;
    gap: 1rem;
    max-width: 1500px;
    margin-inline: auto;
}
.admin-commercial-nav {
    display: flex;
    align-items: center;
    gap: .35rem;
    width: fit-content;
    max-width: 100%;
    padding: .35rem;
    overflow-x: auto;
    border: 1px solid var(--line);
    border-radius: .9rem;
    background: var(--card);
}
.admin-commercial-nav a,
.admin-commercial-nav > span {
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    min-height: 40px;
    padding: .55rem .75rem;
    border-radius: .65rem;
    color: var(--muted);
    font-size: .76rem;
    font-weight: 800;
    text-decoration: none;
    white-space: nowrap;
}
.admin-commercial-nav a:hover { color: var(--text); background: var(--surface-soft); }
.admin-commercial-nav .is-active {
    color: var(--primary);
    background: color-mix(in srgb, var(--primary) 10%, var(--card));
}
.admin-commercial-page > .app-card {
    border: 1px solid var(--line);
    border-radius: 1rem;
    box-shadow: 0 8px 26px rgba(15, 23, 42, .04);
}

.team-permissions-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: .65rem;
}

.team-permission-option {
    display: flex;
    align-items: flex-start;
    gap: .65rem;
    min-width: 0;
    padding: .8rem;
    border: 1px solid var(--line);
    border-radius: .8rem;
    cursor: pointer;
    background: var(--surface-soft);
}

.team-permission-option:hover {
    border-color: color-mix(in srgb, var(--primary) 35%, var(--line));
    background: color-mix(in srgb, var(--primary) 5%, var(--card));
}

.team-permission-option input { flex: 0 0 auto; margin-top: .15rem; }
.team-permission-option > span { display: grid; min-width: 0; }
.team-permission-option strong { color: var(--text); font-size: .78rem; }
.team-permission-option small { color: var(--muted); font-size: .66rem; line-height: 1.35; }

@media (max-width: 620px) {
    .team-permissions-grid { grid-template-columns: 1fr; }
}

/* Lead profile — a focused opportunity workspace */
.lead-profile {
    --lead-profile-ink: color-mix(in srgb, var(--primary) 64%, #0b1220 36%);
    --lead-profile-deep: color-mix(in srgb, var(--primary) 42%, #0a1424 58%);
    --lead-profile-glow: color-mix(in srgb, var(--primary) 55%, #ffffff 45%);
    --lead-profile-surface: color-mix(in srgb, var(--card) 96%, var(--surface-soft) 4%);
    display: grid;
    gap: 1.25rem;
    min-width: 0;
    padding-bottom: 1rem;
    scroll-behavior: smooth;
}

.lead-profile-hero {
    isolation: isolate;
    position: relative;
    display: grid;
    gap: 1.5rem;
    min-width: 0;
    padding: clamp(1.35rem, 2.6vw, 2.5rem);
    overflow: hidden;
    border: 1px solid rgba(255, 255, 255, .1);
    border-radius: 32px;
    background:
        linear-gradient(124deg, var(--lead-profile-deep) 0%, color-mix(in srgb, var(--primary) 48%, #12213a 52%) 54%, color-mix(in srgb, var(--primary) 30%, #172b47 70%) 100%);
    color: #fff;
    box-shadow: 0 28px 70px rgba(15, 23, 42, .19);
}

.lead-profile-hero::before {
    content: '';
    position: absolute;
    z-index: -1;
    inset: 0;
    opacity: .22;
    background-image:
        linear-gradient(rgba(255, 255, 255, .055) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255, 255, 255, .055) 1px, transparent 1px);
    background-size: 38px 38px;
    mask-image: linear-gradient(100deg, #000 0%, rgba(0, 0, 0, .45) 64%, transparent 100%);
}

.lead-profile-orb {
    position: absolute;
    z-index: -1;
    border-radius: 50%;
    pointer-events: none;
}

.lead-profile-orb-one {
    top: -170px;
    right: -70px;
    width: 430px;
    height: 430px;
    background: radial-gradient(circle, color-mix(in srgb, var(--lead-profile-glow) 28%, transparent), transparent 68%);
}

.lead-profile-orb-two {
    bottom: -250px;
    left: 18%;
    width: 500px;
    height: 500px;
    background: radial-gradient(circle, color-mix(in srgb, var(--primary) 22%, transparent), transparent 70%);
}

.lead-profile-hero-top,
.lead-profile-hero-main,
.lead-profile-contact-line,
.lead-profile-pills,
.lead-profile-actions,
.lead-profile-form-footer,
.lead-profile-message footer,
.lead-profile-timeline-links {
    display: flex;
    align-items: center;
}

.lead-profile-hero-top,
.lead-profile-hero-main {
    justify-content: space-between;
    gap: 1.2rem;
}

.lead-profile-back {
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    color: #c4d0df;
    font-size: .72rem;
    font-weight: 800;
    text-decoration: none;
    transition: color .18s ease, transform .18s ease;
}

.lead-profile-back i {
    display: grid;
    width: 31px;
    height: 31px;
    place-items: center;
    border: 1px solid rgba(255, 255, 255, .13);
    border-radius: 10px;
    background: rgba(255, 255, 255, .07);
}

.lead-profile-back:hover {
    color: #fff;
    transform: translateX(-2px);
}

.lead-profile-reference {
    padding: .42rem .65rem;
    border: 1px solid rgba(255, 255, 255, .1);
    border-radius: 999px;
    background: rgba(255, 255, 255, .055);
    color: #9fb0c5;
    font-size: .62rem;
    font-weight: 800;
    letter-spacing: .07em;
    text-transform: uppercase;
}

.lead-profile-identity {
    display: flex;
    align-items: center;
    gap: 1.15rem;
    min-width: 0;
}

.lead-profile-avatar {
    display: grid;
    flex: 0 0 auto;
    width: 82px;
    height: 82px;
    place-items: center;
    border: 1px solid rgba(255, 255, 255, .2);
    border-radius: 25px;
    background:
        linear-gradient(145deg, color-mix(in srgb, var(--primary) 45%, rgba(255, 255, 255, .18)), rgba(255, 255, 255, .06));
    color: #fff;
    font-family: 'Plus Jakarta Sans', sans-serif;
    font-size: 1.35rem;
    font-weight: 800;
    letter-spacing: -.04em;
    box-shadow: inset 0 1px rgba(255, 255, 255, .16), 0 18px 34px rgba(0, 0, 0, .15);
    backdrop-filter: blur(12px);
}

.lead-profile-title {
    min-width: 0;
}

.lead-profile-kicker {
    display: flex;
    align-items: center;
    gap: .5rem;
    margin-bottom: .35rem;
    color: #9fb0c5;
    font-size: .63rem;
    font-weight: 800;
    letter-spacing: .12em;
    text-transform: uppercase;
}

.lead-profile-kicker i {
    width: 18px;
    height: 2px;
    border-radius: 99px;
    background: var(--lead-profile-glow);
    box-shadow: 0 0 12px color-mix(in srgb, var(--lead-profile-glow) 70%, transparent);
}

.lead-profile-title h1 {
    max-width: 720px;
    margin: 0;
    overflow: hidden;
    color: #fff;
    font-family: 'Plus Jakarta Sans', 'Manrope', sans-serif;
    font-size: clamp(2rem, 3.5vw, 3.25rem);
    font-weight: 800;
    letter-spacing: -.055em;
    line-height: 1.05;
    text-overflow: ellipsis;
}

.lead-profile-contact-line {
    flex-wrap: wrap;
    gap: .45rem 1rem;
    margin-top: .6rem;
    color: #b8c6d7;
    font-size: .76rem;
}

.lead-profile-contact-line span {
    display: inline-flex;
    align-items: center;
    gap: .42rem;
}

.lead-profile-contact-line i {
    color: var(--lead-profile-glow);
}

.lead-profile-pills {
    flex-wrap: wrap;
    gap: .45rem;
    margin-top: .85rem;
}

.lead-profile-status,
.lead-profile-response,
.lead-profile-current-state,
.lead-profile-message-status,
.lead-profile-connection {
    display: inline-flex;
    align-items: center;
    gap: .42rem;
    font-size: .65rem;
    font-weight: 800;
    white-space: nowrap;
}

.lead-profile-status,
.lead-profile-response {
    padding: .42rem .65rem;
    border: 1px solid rgba(255, 255, 255, .1);
    border-radius: 999px;
    background: rgba(255, 255, 255, .07);
    color: #d9e4ef;
}

.lead-profile-status > i,
.lead-profile-response > i,
.lead-profile-current-state > i,
.lead-profile-message-status > i,
.lead-profile-connection > i {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: currentColor;
    box-shadow: 0 0 0 3px color-mix(in srgb, currentColor 13%, transparent);
}

.lead-profile-status {
    color: color-mix(in srgb, var(--status-color) 48%, #ffffff 52%);
}

.lead-profile-response.lead-response--responded,
.lead-profile-response.lead-response--no-response {
    color: var(--lead-profile-glow);
}

.lead-profile-actions {
    flex: 0 0 auto;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: .55rem;
}

.lead-profile-action,
.lead-profile-more {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 46px;
    border-radius: 14px;
    font-size: .75rem;
    font-weight: 800;
    text-decoration: none;
    transition: transform .18s ease, background .18s ease, border-color .18s ease, box-shadow .18s ease;
}

.lead-profile-action {
    gap: .52rem;
    padding: .7rem .9rem;
}

.lead-profile-action.is-primary {
    border: 0;
    background: var(--lead-profile-glow);
    color: #0b1926;
    box-shadow: 0 14px 30px color-mix(in srgb, var(--primary) 22%, transparent);
}

.lead-profile-action.is-ghost,
.lead-profile-more {
    border: 1px solid rgba(255, 255, 255, .15);
    background: rgba(255, 255, 255, .07);
    color: #fff;
    backdrop-filter: blur(10px);
}

.lead-profile-more {
    width: 46px;
    padding: 0;
}

.lead-profile-action:hover,
.lead-profile-more:hover {
    transform: translateY(-2px);
}

.lead-profile-action.is-primary:hover {
    background: color-mix(in srgb, var(--lead-profile-glow) 82%, #ffffff 18%);
    color: #0b1926;
    box-shadow: 0 18px 34px color-mix(in srgb, var(--primary) 30%, transparent);
}

.lead-profile-action.is-ghost:hover,
.lead-profile-more:hover {
    border-color: rgba(255, 255, 255, .3);
    background: rgba(255, 255, 255, .13);
    color: #fff;
}

.lead-profile-menu {
    min-width: 220px;
    padding: .45rem;
    border: 1px solid var(--line);
    border-radius: 15px;
    background: var(--card);
    box-shadow: 0 18px 40px rgba(15, 23, 42, .18);
}

.lead-profile-menu .dropdown-item {
    display: flex;
    align-items: center;
    gap: .55rem;
    padding: .62rem .7rem;
    border-radius: 10px;
    color: var(--text);
    font-size: .72rem;
    font-weight: 700;
}

.lead-profile-menu form {
    margin: 0;
}

.lead-profile-signal-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: .6rem;
    padding-top: 1.25rem;
    border-top: 1px solid rgba(255, 255, 255, .1);
}

.lead-profile-signal-grid article {
    display: flex;
    align-items: center;
    gap: .7rem;
    min-width: 0;
    min-height: 64px;
    padding: .72rem;
    border: 1px solid rgba(255, 255, 255, .085);
    border-radius: 16px;
    background: rgba(255, 255, 255, .045);
    backdrop-filter: blur(10px);
}

.lead-profile-signal-grid article.is-alert {
    border-color: rgba(251, 191, 36, .26);
    background: rgba(251, 191, 36, .08);
}

.lead-profile-signal-icon {
    display: grid;
    flex: 0 0 auto;
    width: 38px;
    height: 38px;
    place-items: center;
    border-radius: 12px;
    background: rgba(255, 255, 255, .07);
    color: var(--lead-profile-glow);
}

.lead-profile-signal-grid article > div {
    display: grid;
    min-width: 0;
    gap: .12rem;
}

.lead-profile-signal-grid small {
    color: #91a3b8;
    font-size: .58rem;
    font-weight: 700;
}

.lead-profile-signal-grid strong {
    overflow: hidden;
    color: #eef5fb;
    font-size: .68rem;
    font-weight: 800;
    line-height: 1.35;
    text-overflow: ellipsis;
}

.lead-profile-nav {
    position: sticky;
    z-index: 10;
    top: .6rem;
    display: flex;
    align-items: center;
    justify-self: center;
    gap: .22rem;
    width: max-content;
    max-width: calc(100% - 1rem);
    margin-top: -2.25rem;
    padding: .38rem;
    overflow-x: auto;
    border: 1px solid color-mix(in srgb, var(--line) 76%, transparent);
    border-radius: 17px;
    background: color-mix(in srgb, var(--card) 88%, transparent);
    box-shadow: 0 16px 38px rgba(15, 23, 42, .12);
    scrollbar-width: none;
    backdrop-filter: blur(18px);
}

.lead-profile-nav::-webkit-scrollbar {
    display: none;
}

.lead-profile-nav a {
    display: inline-flex;
    flex: 0 0 auto;
    align-items: center;
    gap: .42rem;
    min-height: 39px;
    padding: .55rem .72rem;
    border-radius: 11px;
    color: var(--muted);
    font-size: .68rem;
    font-weight: 800;
    text-decoration: none;
    white-space: nowrap;
    transition: background .18s ease, color .18s ease;
}

.lead-profile-nav a:hover {
    background: color-mix(in srgb, var(--primary) 8%, var(--card));
    color: var(--primary);
}

.lead-profile-notice {
    display: flex;
    align-items: center;
    gap: .8rem;
    padding: .9rem 1rem;
    border: 1px solid var(--line);
    border-left: 3px solid var(--muted);
    border-radius: 15px;
    background: var(--lead-profile-surface);
}

.lead-profile-notice > i {
    display: grid;
    flex: 0 0 auto;
    width: 37px;
    height: 37px;
    place-items: center;
    border-radius: 12px;
    background: var(--surface-soft);
    color: var(--muted);
}

.lead-profile-notice > div {
    display: grid;
    gap: .1rem;
}

.lead-profile-notice strong {
    color: var(--text);
    font-size: .76rem;
}

.lead-profile-notice span {
    color: var(--muted);
    font-size: .68rem;
}

.lead-profile-notice.is-success {
    border-left-color: var(--primary);
}

.lead-profile-notice.is-success > i {
    background: color-mix(in srgb, var(--primary) 10%, var(--card));
    color: var(--primary);
}

.lead-profile-notice.is-warning {
    border-left-color: #d69e2e;
}

.lead-profile-notice.is-warning > i {
    background: color-mix(in srgb, #d69e2e 10%, var(--card));
    color: #b7791f;
}

.lead-profile-layout {
    display: grid;
    grid-template-columns: minmax(290px, 350px) minmax(0, 1fr);
    align-items: start;
    gap: 1.15rem;
    min-width: 0;
    scroll-margin-top: 6rem;
}

.lead-profile-sidebar,
.lead-profile-main {
    display: grid;
    gap: 1.15rem;
    min-width: 0;
}

.lead-profile-sidebar {
    position: sticky;
    top: 5.3rem;
}

.lead-profile-card {
    min-width: 0;
    overflow: hidden;
    border: 1px solid color-mix(in srgb, var(--line) 78%, transparent);
    border-radius: 23px;
    background: var(--lead-profile-surface);
    box-shadow: 0 16px 38px rgba(15, 23, 42, .065);
}

.lead-profile-card-head,
.lead-profile-section-head {
    display: flex;
    align-items: center;
}

.lead-profile-card-head {
    justify-content: space-between;
    gap: 1rem;
    padding: 1.2rem 1.25rem 1rem;
}

.lead-profile-card-head > div,
.lead-profile-section-head > div:nth-child(2) {
    display: grid;
    min-width: 0;
}

.lead-profile-card-head span,
.lead-profile-section-head > div:nth-child(2) > span,
.lead-profile-edit-title small,
.lead-profile-modal .modal-header span {
    color: color-mix(in srgb, var(--primary) 75%, var(--muted));
    font-size: .6rem;
    font-weight: 800;
    letter-spacing: .11em;
    text-transform: uppercase;
}

.lead-profile-card-head h2,
.lead-profile-section-head h2 {
    margin: .12rem 0 0;
    color: var(--text);
    font-family: 'Plus Jakarta Sans', sans-serif;
    font-size: 1rem;
    font-weight: 800;
    letter-spacing: -.025em;
}

.lead-profile-card-head > i {
    display: grid;
    flex: 0 0 auto;
    width: 38px;
    height: 38px;
    place-items: center;
    border-radius: 12px;
    background: color-mix(in srgb, var(--primary) 9%, var(--card));
    color: var(--primary);
}

.lead-profile-data-list {
    display: grid;
    padding: 0 1.25rem 1rem;
}

.lead-profile-data-list > div {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    min-width: 0;
    padding: .72rem 0;
    border-bottom: 1px solid color-mix(in srgb, var(--line) 70%, transparent);
}

.lead-profile-data-list > div:last-child {
    border-bottom: 0;
}

.lead-profile-data-list span {
    display: inline-flex;
    align-items: center;
    gap: .45rem;
    color: var(--muted);
    font-size: .65rem;
}

.lead-profile-data-list span i {
    color: var(--primary);
}

.lead-profile-data-list strong {
    max-width: 52%;
    overflow: hidden;
    color: var(--text);
    font-size: .68rem;
    font-weight: 800;
    text-align: right;
    text-overflow: ellipsis;
}

.lead-profile-note {
    margin: 0 1.25rem 1.25rem;
    padding: .85rem;
    border: 1px solid color-mix(in srgb, var(--primary) 12%, var(--line));
    border-radius: 14px;
    background: color-mix(in srgb, var(--primary) 5%, var(--card));
}

.lead-profile-note > span {
    display: flex;
    align-items: center;
    gap: .42rem;
    color: var(--primary);
    font-size: .61rem;
    font-weight: 800;
    letter-spacing: .05em;
    text-transform: uppercase;
}

.lead-profile-note p {
    margin: .45rem 0 0;
    color: var(--text);
    font-size: .69rem;
    line-height: 1.6;
}

.lead-profile-compact-form,
.lead-profile-form {
    display: grid;
}

.lead-profile-compact-form {
    gap: .8rem;
    padding: 0 1.25rem 1.25rem;
}

.lead-profile-compact-form label,
.lead-profile-form label {
    display: grid;
    min-width: 0;
    gap: .35rem;
    margin: 0;
}

.lead-profile-compact-form label > span,
.lead-profile-form label > span {
    color: var(--muted);
    font-size: .63rem;
    font-weight: 800;
}

.lead-profile-compact-form .form-control,
.lead-profile-compact-form .form-select,
.lead-profile-form .form-control,
.lead-profile-form .form-select,
.lead-profile-edit-form .form-control,
.lead-profile-edit-form .form-select,
.lead-profile-modal .form-control,
.lead-profile-modal .form-select {
    min-height: 44px;
    border-color: color-mix(in srgb, var(--line) 86%, transparent);
    border-radius: 12px;
    background-color: var(--card);
    color: var(--text);
    font-size: .72rem;
}

.lead-profile-compact-form textarea.form-control,
.lead-profile-form textarea.form-control {
    padding: .75rem;
    line-height: 1.55;
}

.lead-profile-compact-form .form-control:focus,
.lead-profile-compact-form .form-select:focus,
.lead-profile-form .form-control:focus,
.lead-profile-form .form-select:focus,
.lead-profile-edit-form .form-control:focus,
.lead-profile-edit-form .form-select:focus {
    border-color: color-mix(in srgb, var(--primary) 48%, var(--line));
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--primary) 9%, transparent);
}

.lead-profile-submit {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .55rem;
    min-height: 44px;
    padding: .65rem .75rem .65rem .9rem;
    border: 0;
    border-radius: 12px;
    background: var(--lead-profile-ink);
    color: #fff;
    font-size: .7rem;
    font-weight: 800;
    transition: transform .18s ease, background .18s ease, box-shadow .18s ease;
}

.lead-profile-submit i {
    display: grid;
    width: 27px;
    height: 27px;
    place-items: center;
    border-radius: 9px;
    background: var(--lead-profile-glow);
    color: var(--lead-profile-ink);
}

.lead-profile-submit:hover {
    transform: translateY(-1px);
    background: color-mix(in srgb, var(--lead-profile-ink) 88%, #000 12%);
    color: #fff;
    box-shadow: 0 12px 24px color-mix(in srgb, var(--primary) 18%, transparent);
}

.lead-profile-convert {
    position: relative;
    display: grid;
    gap: .85rem;
    padding: 1.25rem;
    overflow: hidden;
    border: 1px solid color-mix(in srgb, var(--primary) 24%, var(--line));
    border-radius: 23px;
    background:
        radial-gradient(circle at 100% 0, color-mix(in srgb, var(--lead-profile-glow) 17%, transparent), transparent 42%),
        linear-gradient(145deg, color-mix(in srgb, var(--primary) 8%, var(--card)), var(--card));
    box-shadow: 0 16px 36px color-mix(in srgb, var(--primary) 7%, transparent);
}

.lead-profile-convert-icon {
    display: grid;
    width: 43px;
    height: 43px;
    place-items: center;
    border-radius: 14px;
    background: var(--primary);
    color: #fff;
    font-size: 1.05rem;
    box-shadow: 0 10px 22px color-mix(in srgb, var(--primary) 25%, transparent);
}

.lead-profile-convert small {
    color: var(--primary);
    font-size: .58rem;
    font-weight: 800;
    letter-spacing: .1em;
    text-transform: uppercase;
}

.lead-profile-convert h2 {
    margin: .15rem 0 .3rem;
    color: var(--text);
    font-family: 'Plus Jakarta Sans', sans-serif;
    font-size: 1.02rem;
    font-weight: 800;
}

.lead-profile-convert p {
    margin: 0;
    color: var(--muted);
    font-size: .67rem;
    line-height: 1.55;
}

.lead-profile-convert button {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .7rem;
    min-height: 43px;
    padding: .6rem .6rem .6rem .8rem;
    border: 0;
    border-radius: 12px;
    background: var(--primary);
    color: #fff;
    font-size: .68rem;
    font-weight: 800;
}

.lead-profile-convert button i {
    display: grid;
    width: 27px;
    height: 27px;
    place-items: center;
    border-radius: 8px;
    background: rgba(255, 255, 255, .13);
}

.lead-profile-form-card,
.lead-profile-message-card,
.lead-profile-messages,
.lead-profile-history {
    scroll-margin-top: 5.5rem;
}

.lead-profile-section-head {
    gap: .8rem;
    padding: 1.2rem 1.25rem 1rem;
    border-bottom: 1px solid color-mix(in srgb, var(--line) 68%, transparent);
}

.lead-profile-section-icon {
    display: grid;
    flex: 0 0 auto;
    width: 43px;
    height: 43px;
    place-items: center;
    border-radius: 14px;
    background: color-mix(in srgb, var(--primary) 10%, var(--card));
    color: var(--primary);
    font-size: 1.05rem;
}

.lead-profile-section-icon.is-whatsapp {
    background: color-mix(in srgb, #16a34a 10%, var(--card));
    color: #159447;
}

.lead-profile-section-head h2 {
    font-size: 1.12rem;
}

.lead-profile-section-head p {
    margin: .2rem 0 0;
    color: var(--muted);
    font-size: .66rem;
    line-height: 1.45;
}

.lead-profile-current-state,
.lead-profile-connection,
.lead-profile-count {
    margin-left: auto;
}

.lead-profile-current-state,
.lead-profile-connection {
    padding: .42rem .6rem;
    border-radius: 999px;
    background: var(--surface-soft);
    color: var(--muted);
}

.lead-profile-current-state.lead-response--responded {
    background: color-mix(in srgb, var(--primary) 9%, var(--card));
    color: var(--primary);
}

.lead-profile-current-state.lead-response--no-response {
    color: color-mix(in srgb, var(--primary) 54%, var(--muted));
}

.lead-profile-connection.is-online {
    background: color-mix(in srgb, #16a34a 9%, var(--card));
    color: #168a44;
}

.lead-profile-count {
    display: grid;
    flex: 0 0 auto;
    width: 33px;
    height: 33px;
    place-items: center;
    border-radius: 11px;
    background: var(--surface-soft);
    color: var(--text);
    font-size: .7rem;
    font-weight: 800;
}

.lead-profile-form {
    gap: .9rem;
    padding: 1.15rem 1.25rem 1.25rem;
}

.lead-profile-form-grid {
    display: grid;
    gap: .8rem;
}

.lead-profile-form-grid.is-three {
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

.lead-profile-full-field {
    display: grid;
}

.lead-profile-check {
    display: flex !important;
    align-items: center;
    width: fit-content;
    padding: .55rem .7rem;
    border: 1px solid var(--line);
    border-radius: 12px;
    background: var(--card);
    cursor: pointer;
}

.lead-profile-check input {
    flex: 0 0 auto;
    margin: 0;
}

.lead-profile-check > span {
    display: grid;
    gap: .05rem;
}

.lead-profile-check strong {
    color: var(--text);
    font-size: .66rem;
}

.lead-profile-check small {
    color: var(--muted);
    font-size: .58rem;
    font-weight: 600;
}

.lead-profile-form-footer {
    justify-content: space-between;
    gap: 1rem;
    padding-top: .25rem;
}

.lead-profile-form-footer > span {
    display: inline-flex;
    align-items: center;
    gap: .42rem;
    color: var(--muted);
    font-size: .62rem;
}

.lead-profile-form-footer > span i {
    color: var(--primary);
}

.lead-profile-form-footer.is-end {
    justify-content: flex-end;
}

.lead-profile-composer {
    margin: 1.15rem 1.25rem 1.25rem;
    overflow: hidden;
    border: 1px solid color-mix(in srgb, #16a34a 18%, var(--line));
    border-radius: 17px;
    background: var(--card);
}

.lead-profile-composer-body {
    display: flex;
    align-items: flex-start;
    gap: .75rem;
    padding: .9rem;
}

.lead-profile-mini-avatar {
    display: grid;
    flex: 0 0 auto;
    width: 38px;
    height: 38px;
    place-items: center;
    border-radius: 12px;
    background: linear-gradient(145deg, var(--lead-profile-ink), color-mix(in srgb, var(--primary) 58%, #223451 42%));
    color: #fff;
    font-size: .62rem;
    font-weight: 800;
}

.lead-profile-composer textarea {
    width: 100%;
    min-height: 92px;
    padding: .35rem;
    resize: vertical;
    border: 0;
    outline: 0;
    background: transparent;
    color: var(--text);
    font: inherit;
    font-size: .75rem;
    line-height: 1.6;
}

.lead-profile-composer footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: .65rem .75rem;
    border-top: 1px solid var(--line);
    background: color-mix(in srgb, var(--surface-soft) 65%, var(--card));
}

.lead-profile-composer footer small {
    display: inline-flex;
    align-items: center;
    gap: .38rem;
    color: var(--muted);
    font-size: .59rem;
}

.lead-profile-composer footer button {
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    min-height: 39px;
    padding: .6rem .8rem;
    border: 0;
    border-radius: 11px;
    background: #168a44;
    color: #fff;
    font-size: .67rem;
    font-weight: 800;
}

.lead-profile-unavailable {
    display: flex;
    align-items: center;
    gap: .75rem;
    margin: 1.15rem 1.25rem 1.25rem;
    padding: 1rem;
    border: 1px dashed var(--line);
    border-radius: 15px;
    background: var(--surface-soft);
}

.lead-profile-unavailable > i {
    color: var(--muted);
    font-size: 1.15rem;
}

.lead-profile-unavailable p {
    margin: 0;
    color: var(--muted);
    font-size: .68rem;
}

.lead-profile-message-list {
    display: grid;
    padding: .25rem 1.25rem 1.25rem;
}

.lead-profile-message {
    display: grid;
    grid-template-columns: 42px minmax(0, 1fr);
    gap: .8rem;
    padding: 1rem 0;
    border-bottom: 1px solid color-mix(in srgb, var(--line) 70%, transparent);
}

.lead-profile-message:last-child {
    border-bottom: 0;
}

.lead-profile-message-icon {
    display: grid;
    width: 42px;
    height: 42px;
    place-items: center;
    border-radius: 14px;
    background: color-mix(in srgb, var(--primary) 9%, var(--card));
    color: var(--primary);
}

.lead-profile-message.is-manual .lead-profile-message-icon {
    background: color-mix(in srgb, #16a34a 9%, var(--card));
    color: #168a44;
}

.lead-profile-message-content {
    min-width: 0;
}

.lead-profile-message-content > header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1rem;
}

.lead-profile-message-content > header > div {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .5rem;
}

.lead-profile-message-content > header span {
    padding: .32rem .48rem;
    border-radius: 8px;
    background: color-mix(in srgb, var(--primary) 8%, var(--card));
    color: var(--primary);
    font-size: .56rem;
    font-weight: 800;
    text-transform: uppercase;
}

.lead-profile-message-content > header strong {
    color: var(--text);
    font-size: .72rem;
}

.lead-profile-message-content time,
.lead-profile-timeline-content time {
    flex: 0 0 auto;
    color: var(--muted);
    font-size: .59rem;
    white-space: nowrap;
}

.lead-profile-message-content > p {
    margin: .65rem 0;
    color: var(--text);
    font-size: .69rem;
    line-height: 1.62;
}

.lead-profile-message footer {
    flex-wrap: wrap;
    gap: .55rem 1rem;
}

.lead-profile-message footer small {
    display: inline-flex;
    align-items: center;
    gap: .35rem;
    color: var(--muted);
    font-size: .59rem;
}

.lead-profile-message-status {
    color: var(--muted);
}

.lead-profile-message-status.is-sent {
    color: var(--primary);
}

.lead-profile-message-status.is-error,
.lead-profile-message-status.is-cancelled {
    color: #c24141;
}

.lead-profile-cancel-message {
    display: inline-flex;
    align-items: center;
    gap: .35rem;
    margin-top: .65rem;
    padding: .42rem .58rem;
    border: 1px solid color-mix(in srgb, #dc3545 28%, var(--line));
    border-radius: 9px;
    background: transparent;
    color: #c24141;
    font-size: .6rem;
    font-weight: 800;
}

.lead-profile-empty {
    display: grid;
    justify-items: center;
    gap: .3rem;
    padding: 2.2rem 1rem;
    color: var(--muted);
    text-align: center;
}

.lead-profile-empty > i {
    display: grid;
    width: 48px;
    height: 48px;
    margin-bottom: .25rem;
    place-items: center;
    border-radius: 16px;
    background: var(--surface-soft);
    color: var(--primary);
    font-size: 1.15rem;
}

.lead-profile-empty strong {
    color: var(--text);
    font-size: .74rem;
}

.lead-profile-empty span {
    font-size: .63rem;
}

.lead-profile-history {
    scroll-margin-top: 5.5rem;
}

.lead-profile-timeline {
    padding: .45rem 1.25rem 1.25rem;
}

.lead-profile-timeline-item {
    display: grid;
    grid-template-columns: 42px minmax(0, 1fr);
    gap: .85rem;
    min-width: 0;
}

.lead-profile-timeline-rail {
    position: relative;
    display: flex;
    justify-content: center;
}

.lead-profile-timeline-rail::after {
    content: '';
    position: absolute;
    z-index: 0;
    top: 43px;
    bottom: -2px;
    width: 1px;
    background: color-mix(in srgb, var(--line) 86%, transparent);
}

.lead-profile-timeline-item:last-child .lead-profile-timeline-rail::after {
    display: none;
}

.lead-profile-timeline-rail span {
    position: relative;
    z-index: 1;
    display: grid;
    width: 36px;
    height: 36px;
    margin-top: .8rem;
    place-items: center;
    border: 1px solid color-mix(in srgb, var(--primary) 13%, var(--line));
    border-radius: 12px;
    background: color-mix(in srgb, var(--primary) 7%, var(--card));
    color: var(--primary);
    font-size: .8rem;
}

.lead-profile-timeline-content {
    min-width: 0;
    padding: .85rem 0 1.05rem;
    border-bottom: 1px solid color-mix(in srgb, var(--line) 66%, transparent);
}

.lead-profile-timeline-item:last-child .lead-profile-timeline-content {
    border-bottom: 0;
}

.lead-profile-timeline-content > header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1rem;
}

.lead-profile-timeline-content > header > div {
    display: grid;
    gap: .12rem;
}

.lead-profile-timeline-content > header strong {
    color: var(--text);
    font-size: .73rem;
}

.lead-profile-timeline-content > header small {
    color: var(--muted);
    font-size: .59rem;
}

.lead-profile-timeline-content > p {
    margin: .55rem 0 0;
    color: var(--text);
    font-size: .68rem;
    line-height: 1.62;
}

.lead-profile-stage-change {
    display: flex;
    align-items: center;
    width: fit-content;
    gap: .45rem;
    margin-top: .55rem;
    padding: .38rem .52rem;
    border-radius: 9px;
    background: var(--surface-soft);
    color: var(--muted);
    font-size: .61rem;
}

.lead-profile-stage-change i {
    color: var(--primary);
}

.lead-profile-stage-change strong {
    color: var(--text);
}

.lead-profile-timeline-links {
    flex-wrap: wrap;
    gap: .5rem 1rem;
    margin-top: .55rem;
}

.lead-profile-timeline-links span,
.lead-profile-timeline-links a {
    display: inline-flex;
    align-items: center;
    gap: .35rem;
    color: var(--primary);
    font-size: .6rem;
    font-weight: 700;
    text-decoration: none;
}

.offcanvas.offcanvas-end.lead-profile-edit-panel {
    --bs-offcanvas-width: min(590px, 96vw);
    border: 0;
    background: var(--card);
    box-shadow: -30px 0 70px rgba(15, 23, 42, .2);
}

.lead-profile-edit-head {
    align-items: flex-start;
    padding: 1.5rem;
    border: 0;
    background:
        radial-gradient(circle at 90% 0, color-mix(in srgb, var(--lead-profile-glow) 22%, transparent), transparent 36%),
        linear-gradient(135deg, var(--lead-profile-deep), color-mix(in srgb, var(--primary) 42%, #1a2d4b 58%));
    color: #fff;
}

.lead-profile-edit-title {
    display: flex;
    align-items: flex-start;
    gap: .85rem;
}

.lead-profile-edit-title > span {
    display: grid;
    flex: 0 0 auto;
    width: 43px;
    height: 43px;
    place-items: center;
    border-radius: 14px;
    background: var(--lead-profile-glow);
    color: var(--lead-profile-ink);
}

.lead-profile-edit-title h2 {
    margin: .12rem 0 .2rem;
    color: #fff;
    font-family: 'Plus Jakarta Sans', sans-serif;
    font-size: 1.25rem;
    font-weight: 800;
}

.lead-profile-edit-title p {
    margin: 0;
    color: #aebed0;
    font-size: .67rem;
}

.lead-profile-edit-body {
    padding: 0;
}

.lead-profile-edit-form {
    display: grid;
}

.lead-profile-edit-form > section {
    padding: 1.25rem 1.5rem;
    border-bottom: 1px solid var(--line);
}

.lead-profile-edit-section {
    display: flex;
    align-items: center;
    gap: .65rem;
    margin-bottom: .9rem;
}

.lead-profile-edit-section > span {
    display: grid;
    width: 29px;
    height: 29px;
    place-items: center;
    border-radius: 9px;
    background: color-mix(in srgb, var(--primary) 9%, var(--card));
    color: var(--primary);
    font-size: .58rem;
    font-weight: 800;
}

.lead-profile-edit-section > div {
    display: grid;
}

.lead-profile-edit-section strong {
    color: var(--text);
    font-size: .72rem;
}

.lead-profile-edit-section small {
    color: var(--muted);
    font-size: .59rem;
}

.lead-profile-edit-form .form-label,
.lead-profile-modal .form-label {
    color: var(--text);
    font-size: .65rem;
    font-weight: 800;
}

.lead-profile-edit-form > footer {
    position: sticky;
    bottom: 0;
    display: flex;
    justify-content: flex-end;
    gap: .65rem;
    padding: .9rem 1.5rem;
    border-top: 1px solid var(--line);
    background: color-mix(in srgb, var(--card) 91%, transparent);
    backdrop-filter: blur(16px);
}

.lead-profile-modal .modal-content {
    overflow: hidden;
    border: 0;
    border-radius: 24px;
    background: var(--card);
    box-shadow: 0 28px 80px rgba(15, 23, 42, .25);
}

.lead-profile-modal .modal-header {
    padding: 1.25rem 1.35rem;
    border-bottom-color: var(--line);
    background: color-mix(in srgb, var(--primary) 5%, var(--card));
}

.lead-profile-modal .modal-header h2 {
    margin-top: .12rem;
    color: var(--text);
    font-family: 'Plus Jakarta Sans', sans-serif;
    font-size: 1.2rem;
    font-weight: 800;
}

.lead-profile-modal-summary {
    display: flex;
    align-items: center;
    gap: .7rem;
    margin-bottom: 1rem;
    padding: .85rem;
    border: 1px solid var(--line);
    border-radius: 14px;
    background: var(--surface-soft);
}

.lead-profile-modal-summary > div {
    display: grid;
}

.lead-profile-modal-summary strong {
    color: var(--text);
    font-size: .76rem;
}

.lead-profile-modal-summary small {
    color: var(--muted);
    font-size: .62rem;
}

html[data-theme='dark'] .lead-profile {
    --lead-profile-surface: #181818;
}

html[data-theme='dark'] .lead-profile-card,
html[data-theme='dark'] .lead-profile-notice,
html[data-theme='dark'] .lead-profile-menu,
html[data-theme='dark'] .lead-profile-composer,
html[data-theme='dark'] .lead-profile-compact-form .form-control,
html[data-theme='dark'] .lead-profile-compact-form .form-select,
html[data-theme='dark'] .lead-profile-form .form-control,
html[data-theme='dark'] .lead-profile-form .form-select,
html[data-theme='dark'] .lead-profile-edit-form .form-control,
html[data-theme='dark'] .lead-profile-edit-form .form-select,
html[data-theme='dark'] .lead-profile-modal .form-control,
html[data-theme='dark'] .lead-profile-modal .form-select {
    background-color: #181818;
}

html[data-theme='dark'] .lead-profile-nav,
html[data-theme='dark'] .lead-profile-edit-form > footer {
    background: rgba(24, 24, 24, .9);
}

html[data-theme='dark'] .lead-profile-menu .dropdown-item:hover,
html[data-theme='dark'] .lead-profile-menu .dropdown-item:focus {
    background: #242424;
}

@media (max-width: 1199.98px) {
    .lead-profile-hero-main {
        align-items: flex-start;
    }

    .lead-profile-actions {
        max-width: 260px;
    }

    .lead-profile-signal-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .lead-profile-layout {
        grid-template-columns: minmax(270px, 315px) minmax(0, 1fr);
    }

    .lead-profile-form-grid.is-three {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 991.98px) {
    .lead-profile-hero-main {
        display: grid;
    }

    .lead-profile-actions {
        max-width: none;
        justify-content: flex-start;
    }

    .lead-profile-layout {
        grid-template-columns: 1fr;
    }

    .lead-profile-sidebar {
        position: static;
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .lead-profile-dossier {
        grid-row: span 2;
    }
}

@media (max-width: 767.98px) {
    .lead-profile {
        gap: 1rem;
    }

    .lead-profile-hero {
        gap: 1.15rem;
        padding: 1.15rem;
        border-radius: 24px;
    }

    .lead-profile-reference,
    .lead-profile-back span {
        display: none;
    }

    .lead-profile-identity {
        align-items: flex-start;
        gap: .8rem;
    }

    .lead-profile-avatar {
        width: 57px;
        height: 57px;
        border-radius: 18px;
        font-size: .95rem;
    }

    .lead-profile-title h1 {
        font-size: 1.7rem;
    }

    .lead-profile-contact-line {
        display: grid;
        gap: .3rem;
        font-size: .69rem;
    }

    .lead-profile-actions {
        display: grid;
        grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) auto;
        width: 100%;
    }

    .lead-profile-action span {
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .lead-profile-signal-grid {
        grid-template-columns: 1fr 1fr;
        padding-top: 1rem;
    }

    .lead-profile-signal-grid article {
        align-items: flex-start;
        min-height: 82px;
        flex-direction: column;
        gap: .45rem;
    }

    .lead-profile-signal-icon {
        width: 31px;
        height: 31px;
        border-radius: 10px;
    }

    .lead-profile-nav {
        top: .35rem;
        justify-self: stretch;
        width: calc(100% - .6rem);
        max-width: none;
        margin: -1.9rem auto 0;
    }

    .lead-profile-nav a {
        min-height: 37px;
        padding: .5rem .62rem;
        font-size: .63rem;
    }

    .lead-profile-sidebar {
        grid-template-columns: 1fr;
    }

    .lead-profile-dossier {
        grid-row: auto;
    }

    .lead-profile-card {
        border-radius: 19px;
    }

    .lead-profile-section-head {
        align-items: flex-start;
        padding: 1rem;
    }

    .lead-profile-section-head p {
        display: none;
    }

    .lead-profile-section-icon {
        width: 38px;
        height: 38px;
        border-radius: 12px;
    }

    .lead-profile-current-state,
    .lead-profile-connection {
        max-width: 124px;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    .lead-profile-form,
    .lead-profile-message-list,
    .lead-profile-timeline {
        padding-right: 1rem;
        padding-left: 1rem;
    }

    .lead-profile-form-grid.is-three {
        grid-template-columns: 1fr;
    }

    .lead-profile-form-footer {
        align-items: stretch;
        flex-direction: column;
    }

    .lead-profile-form-footer .lead-profile-submit {
        width: 100%;
    }

    .lead-profile-form-footer.is-end {
        align-items: flex-end;
    }

    .lead-profile-composer,
    .lead-profile-unavailable {
        margin-right: 1rem;
        margin-left: 1rem;
    }

    .lead-profile-composer footer small {
        display: none;
    }

    .lead-profile-composer footer button {
        width: 100%;
        justify-content: center;
    }

    .lead-profile-message {
        grid-template-columns: 34px minmax(0, 1fr);
        gap: .65rem;
    }

    .lead-profile-message-icon {
        width: 34px;
        height: 34px;
        border-radius: 11px;
    }

    .lead-profile-message-content > header,
    .lead-profile-timeline-content > header {
        display: grid;
        gap: .4rem;
    }

    .lead-profile-timeline-item {
        grid-template-columns: 34px minmax(0, 1fr);
        gap: .65rem;
    }

    .lead-profile-timeline-rail span {
        width: 31px;
        height: 31px;
        border-radius: 10px;
    }

    .lead-profile-timeline-rail::after {
        top: 38px;
    }

    .lead-profile-notice {
        align-items: flex-start;
    }

    .lead-profile-edit-form > section,
    .lead-profile-edit-head,
    .lead-profile-edit-form > footer {
        padding-right: 1rem;
        padding-left: 1rem;
    }
}

@media (max-width: 430px) {
    .lead-profile-title h1 {
        font-size: 1.45rem;
    }

    .lead-profile-kicker {
        font-size: .55rem;
    }

    .lead-profile-pills {
        align-items: flex-start;
        flex-direction: column;
    }

    .lead-profile-status,
    .lead-profile-response {
        padding: .34rem .52rem;
        font-size: .59rem;
    }

    .lead-profile-signal-grid {
        gap: .45rem;
    }

    .lead-profile-signal-grid article {
        padding: .65rem;
    }

    .lead-profile-nav a span {
        display: none;
    }

    .lead-profile-current-state {
        display: none;
    }

    .lead-profile-connection {
        width: 8px;
        height: 8px;
        padding: 0;
        overflow: visible;
        background: transparent;
        font-size: 0;
    }

    .lead-profile-connection > i {
        width: 8px;
        height: 8px;
    }

    .lead-profile-composer-body {
        display: block;
    }

    .lead-profile-composer-body .lead-profile-mini-avatar {
        margin-bottom: .55rem;
    }
}