* { box-sizing: border-box; }

:root {
    color-scheme: light;
    --bg: #f5f7fb;
    --bg-soft: #ffffff;
    --bg-elevated: rgba(255, 255, 255, 0.84);
    --sidebar-bg: linear-gradient(180deg, #0f172a 0%, #111827 100%);
    --sidebar-text: #d9e4f4;
    --sidebar-muted: #91a4c0;
    --sidebar-border: rgba(255, 255, 255, 0.08);
    --text: #152236;
    --muted: #66758a;
    --border: #e3eaf4;
    --border-strong: #d2dceb;
    --primary: #2958ff;
    --primary-strong: #163bcc;
    --primary-soft: rgba(41, 88, 255, 0.09);
    --secondary-soft: rgba(89, 112, 255, 0.08);
    --success: #0f7b42;
    --success-soft: rgba(15, 123, 66, 0.12);
    --warning: #b76b00;
    --warning-soft: rgba(183, 107, 0, 0.14);
    --danger: #c03947;
    --danger-soft: rgba(192, 57, 71, 0.14);
    --info: #2454d8;
    --info-soft: rgba(36, 84, 216, 0.12);
    --ring: rgba(41, 88, 255, 0.22);
    --shadow-sm: 0 8px 24px rgba(15, 23, 42, 0.06);
    --shadow: 0 18px 48px rgba(15, 23, 42, 0.10);
    --shadow-strong: 0 24px 64px rgba(15, 23, 42, 0.16);
    --radius-xs: .8rem;
    --radius-sm: 1rem;
    --radius: 1.35rem;
    --radius-lg: 1.75rem;
    --radius-xl: 2rem;
    --transition: 180ms ease;
}

html[data-theme="dark"],
html[data-theme="midnight"] {
    color-scheme: dark;
    --bg: #09111f;
    --bg-soft: #101b2d;
    --bg-elevated: rgba(16, 27, 45, 0.82);
    --sidebar-bg: linear-gradient(180deg, #050a14 0%, #0b1220 100%);
    --sidebar-text: #eff5ff;
    --sidebar-muted: #93a5c0;
    --sidebar-border: rgba(255, 255, 255, 0.08);
    --text: #e8eef9;
    --muted: #8fa2be;
    --border: #213248;
    --border-strong: #314864;
    --primary: #7fa1ff;
    --primary-strong: #9cb5ff;
    --primary-soft: rgba(127, 161, 255, 0.16);
    --secondary-soft: rgba(141, 125, 255, 0.15);
    --success: #64d39a;
    --success-soft: rgba(34, 105, 70, 0.28);
    --warning: #f4b454;
    --warning-soft: rgba(125, 84, 13, 0.30);
    --danger: #ff7d8d;
    --danger-soft: rgba(120, 42, 56, 0.30);
    --info: #7fa1ff;
    --info-soft: rgba(56, 86, 153, 0.28);
    --ring: rgba(127, 161, 255, 0.28);
    --shadow-sm: 0 10px 30px rgba(0, 0, 0, 0.18);
    --shadow: 0 24px 58px rgba(0, 0, 0, 0.24);
    --shadow-strong: 0 28px 74px rgba(0, 0, 0, 0.34);
}

html[data-theme="midnight"] {
    --primary: #a48cff;
    --primary-strong: #b49eff;
    --primary-soft: rgba(164, 140, 255, 0.18);
    --secondary-soft: rgba(107, 89, 255, 0.20);
    --ring: rgba(164, 140, 255, 0.30);
}

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

body {
    margin: 0;
    font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    background:
        radial-gradient(circle at top left, rgba(41, 88, 255, 0.10), transparent 32%),
        radial-gradient(circle at top right, rgba(110, 120, 255, 0.10), transparent 28%),
        linear-gradient(180deg, var(--bg) 0%, var(--bg) 100%);
    color: var(--text);
    line-height: 1.5;
}

a {
    color: var(--primary);
    text-decoration: none;
    transition: color var(--transition), opacity var(--transition), transform var(--transition);
}

a:hover {
    text-decoration: none;
    opacity: .96;
}

h1, h2, h3 {
    margin: 0;
    line-height: 1.15;
    letter-spacing: -.02em;
}

h1 {
    font-size: clamp(1.75rem, 2vw, 2.35rem);
}

h2 {
    font-size: clamp(1.2rem, 1.3vw, 1.45rem);
}

p {
    margin: 0 0 1rem;
}

code {
    background: var(--primary-soft);
    color: var(--primary);
    padding: .18rem .48rem;
    border-radius: .65rem;
    font-size: .92em;
}

hr {
    border: 0;
    border-top: 1px solid var(--border);
    margin: 1.35rem 0;
}

.small { font-size: .82rem; }
.muted { color: var(--muted); }
.spacer-sm { height: 1rem; }
.full, .full-width { grid-column: 1 / -1; }

.eyebrow {
    display: inline-flex;
    align-items: center;
    gap: .45rem;
    margin-bottom: .35rem;
    color: var(--muted);
    font-size: .76rem;
    font-weight: 700;
    letter-spacing: .14em;
    text-transform: uppercase;
}

.app-shell {
    display: grid;
    grid-template-columns: 320px minmax(0, 1fr);
    min-height: 100vh;
}

.sidebar {
    position: sticky;
    top: 0;
    align-self: start;
    height: 100vh;
    padding: 1rem;
}

.sidebar-inner {
    height: calc(100vh - 2rem);
    display: flex;
    flex-direction: column;
    gap: 1rem;
    padding: 1.15rem;
    border-radius: 2rem;
    color: var(--sidebar-text);
    background: var(--sidebar-bg);
    border: 1px solid var(--sidebar-border);
    box-shadow: var(--shadow-strong);
}

.brand,
.auth-brand {
    display: flex;
    gap: .9rem;
    align-items: center;
}

.brand strong,
.auth-brand strong {
    font-size: 1rem;
}

.brand-mark,
.user-avatar {
    display: grid;
    place-items: center;
    flex: 0 0 auto;
    color: #fff;
    font-weight: 800;
    letter-spacing: .04em;
    background: linear-gradient(135deg, var(--primary) 0%, #7a8dff 100%);
    box-shadow: 0 16px 32px rgba(41, 88, 255, 0.28);
}

.brand-mark {
    width: 3.4rem;
    height: 3.4rem;
    border-radius: 1.15rem;
}

.brand-logo {
    width: 3.4rem;
    height: 3.4rem;
    object-fit: contain;
    border-radius: 1.15rem;
    background: rgba(255, 255, 255, 0.94);
    padding: .45rem;
    box-shadow: 0 10px 30px rgba(15, 23, 42, 0.18);
}

.user-panel {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: .9rem;
    align-items: start;
    padding: 1rem;
    border-radius: 1.45rem;
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(255, 255, 255, 0.07);
    backdrop-filter: blur(18px);
}

.user-avatar {
    width: 3rem;
    height: 3rem;
    border-radius: 1rem;
    font-size: 1rem;
}

.user-meta {
    min-width: 0;
}

.status-row {
    display: flex;
    flex-wrap: wrap;
    gap: .45rem;
    margin-top: .55rem;
}

.status-chip {
    display: inline-flex;
    align-items: center;
    gap: .35rem;
    border-radius: 999px;
    padding: .36rem .72rem;
    background: var(--primary-soft);
    color: var(--primary);
    border: 1px solid transparent;
    font-size: .79rem;
    font-weight: 600;
    white-space: nowrap;
}

.sidebar .status-chip {
    background: rgba(255, 255, 255, 0.08);
    color: var(--sidebar-text);
    border-color: rgba(255, 255, 255, 0.08);
}

.nav {
    display: grid;
    gap: .35rem;
    overflow: auto;
    padding-right: .1rem;
}

.nav-section {
    margin-top: .8rem;
    margin-bottom: .2rem;
    color: var(--sidebar-muted);
    font-size: .74rem;
    font-weight: 700;
    letter-spacing: .14em;
    text-transform: uppercase;
}

.nav a,
.nav .nav-logout-button {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .8rem;
    padding: .9rem 1rem;
    border-radius: 1rem;
    color: var(--sidebar-text);
    border: 1px solid transparent;
}

.nav a:hover,
.nav a.active,
.nav .nav-logout-button:hover,
.nav .nav-logout-button:focus-visible {
    background: rgba(255, 255, 255, 0.08);
    border-color: rgba(255, 255, 255, 0.08);
    transform: translateX(2px);
}

.nav-main {
    display: inline-flex;
    align-items: center;
    gap: .8rem;
    min-width: 0;
}

.nav-text {
    overflow: hidden;
    text-overflow: ellipsis;
}

.nav-icon,
.button-icon,
.sidebar-footer-badge svg {
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.nav-icon {
    width: 2rem;
    height: 2rem;
    border-radius: .8rem;
    background: rgba(255, 255, 255, 0.08);
    color: currentColor;
    flex: 0 0 auto;
}

.nav-icon svg,
.button-icon svg,
.sidebar-footer-badge svg {
    width: 1rem;
    height: 1rem;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.9;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.nav-badge {
    min-width: 1.7rem;
}

.nav-logout-form {
    margin: 0;
}

.nav-logout-button {
    width: 100%;
    background: transparent;
    border: 1px solid transparent;
    cursor: pointer;
    font: inherit;
    text-align: left;
}

.logout-link {
    color: #ffb7c0 !important;
}

.logout-link .nav-icon {
    background: rgba(255, 125, 141, 0.12);
}

.sidebar-footer {
    margin-top: auto;
    padding: 1rem;
    border-radius: 1.35rem;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.07);
}

.sidebar-footer-badge {
    display: inline-flex;
    align-items: center;
    gap: .55rem;
    margin-bottom: .45rem;
    font-size: .88rem;
    font-weight: 700;
}

.main {
    padding: 1rem 1.2rem 2rem 0;
}

.topbar {
    position: sticky;
    top: 1rem;
    z-index: 20;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    margin-bottom: 1rem;
    padding: 1rem 1.2rem;
    border-radius: 1.6rem;
    background: var(--bg-elevated);
    border: 1px solid var(--border);
    box-shadow: var(--shadow);
    backdrop-filter: blur(14px);
}

.page-intro {
    display: grid;
    gap: .3rem;
}

.topbar-meta {
    display: flex;
    flex-wrap: wrap;
    gap: .45rem;
}

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

.toolbar {
    margin-bottom: 1rem;
}

.toolbar > .inline-form,
.toolbar > form.inline-form {
    display: flex;
    flex-wrap: wrap;
    gap: .7rem;
    align-items: end;
    padding: 1rem 1.1rem;
    border-radius: 1.35rem;
    background: var(--bg-soft);
    border: 1px solid var(--border);
    box-shadow: var(--shadow-sm);
}

.page-grid,
.widget-grid,
.stats-columns {
    display: grid;
    grid-template-columns: repeat(12, minmax(0, 1fr));
    gap: 1rem;
}

.card,
.auth-card {
    position: relative;
    background: var(--bg-soft);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow);
    padding: 1.25rem;
    overflow: hidden;
}

.card::before,
.auth-card::before {
    content: "";
    position: absolute;
    inset: 0 auto auto 0;
    width: 100%;
    height: 4px;
    background: linear-gradient(90deg, var(--primary), rgba(122, 141, 255, 0.45));
    opacity: .7;
}

.card { grid-column: span 12; }
.page-grid > .card { grid-column: span 6; }
.widget-grid > .widget { grid-column: span 6; }
.stats-columns > div { grid-column: span 6; }

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

.actions {
    display: flex;
    gap: .55rem;
    flex-wrap: wrap;
    align-items: center;
}

.button {
    appearance: none;
    border: 1px solid transparent;
    background: linear-gradient(135deg, var(--primary) 0%, var(--primary-strong) 100%);
    color: #fff;
    padding: .82rem 1rem;
    border-radius: 1rem;
    font-weight: 700;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .5rem;
    box-shadow: 0 14px 26px rgba(41, 88, 255, 0.18);
    transition: transform var(--transition), box-shadow var(--transition), opacity var(--transition), background var(--transition);
}

.button:hover {
    transform: translateY(-1px);
    box-shadow: 0 18px 32px rgba(41, 88, 255, 0.24);
}

.button.ghost {
    background: var(--bg-soft);
    color: var(--text);
    border-color: var(--border);
    box-shadow: none;
}

.button.ghost:hover {
    border-color: var(--border-strong);
    background: var(--primary-soft);
    color: var(--primary);
    box-shadow: none;
}

.button.danger {
    background: linear-gradient(135deg, #db4254 0%, #b62d3e 100%);
    box-shadow: 0 14px 26px rgba(192, 57, 71, 0.18);
}

.button.small {
    padding: .58rem .82rem;
    border-radius: .9rem;
    font-size: .88rem;
}

.button.icon-only {
    width: 2.4rem;
    min-width: 2.4rem;
    height: 2.4rem;
    padding: .55rem;
    gap: 0;
}

.button.icon-only .button-icon svg {
    width: 1.05rem;
    height: 1.05rem;
}

.inline-form,
.grid-form {
    display: grid;
    gap: .9rem;
}

.inline-form {
    grid-auto-flow: column;
    align-items: end;
    justify-content: start;
    grid-auto-columns: max-content;
}


.intervention-status-form {
    align-items: start;
}

.intervention-completion-response {
    min-width: min(24rem, 72vw);
    max-width: 28rem;
}

.intervention-completion-response textarea {
    min-height: 4.8rem;
    resize: vertical;
}

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

label,
fieldset {
    display: grid;
    gap: .4rem;
    min-width: 0;
}

label span,
legend {
    font-size: .88rem;
    font-weight: 600;
    color: var(--muted);
}

input,
select,
textarea {
    width: 100%;
    border: 1px solid var(--border);
    background: var(--bg-soft);
    color: var(--text);
    border-radius: 1rem;
    padding: .82rem .92rem;
    font: inherit;
    outline: 0;
    transition: border-color var(--transition), box-shadow var(--transition), background var(--transition);
}

input::placeholder,
textarea::placeholder {
    color: color-mix(in srgb, var(--muted) 72%, transparent);
}

input:focus,
select:focus,
textarea:focus {
    border-color: var(--primary);
    box-shadow: 0 0 0 4px var(--ring);
}

textarea {
    resize: vertical;
    min-height: 120px;
}

fieldset {
    border: 1px solid var(--border);
    border-radius: 1.15rem;
    padding: 1rem;
}

.checkbox {
    display: flex;
    align-items: center;
    gap: .65rem;
    align-self: center;
    min-height: 100%;
}

.checkbox input {
    width: 1rem;
    height: 1rem;
    margin: 0;
    box-shadow: none;
}

.checkbox-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
    gap: .6rem;
}

.table-responsive {
    overflow: auto;
    border-radius: 1rem;
    border: 1px solid var(--border);
}

table {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
    min-width: 760px;
    background: var(--bg-soft);
}

thead th {
    position: sticky;
    top: 0;
    z-index: 1;
    background: color-mix(in srgb, var(--bg-soft) 90%, var(--primary-soft));
}

th,
td {
    padding: .9rem .85rem;
    border-bottom: 1px solid var(--border);
    text-align: left;
    vertical-align: top;
}

th {
    color: var(--muted);
    font-weight: 700;
    font-size: .84rem;
    letter-spacing: .02em;
}

tbody tr:nth-child(even) {
    background: rgba(127, 127, 127, 0.02);
}

tbody tr:hover {
    background: color-mix(in srgb, var(--primary-soft) 55%, transparent);
}


.sort-link {
    display: inline-flex;
    align-items: center;
    gap: .38rem;
    color: inherit;
    text-decoration: none;
}

.sort-link span {
    font-size: .86em;
    opacity: .72;
}

.sort-link:hover {
    color: var(--primary);
}

.alert,
.badge-success,
.badge-warning,
.badge-danger,
.badge-info {
    display: inline-flex;
    align-items: center;
    gap: .45rem;
    padding: .72rem .95rem;
    border-radius: 999px;
    margin-bottom: 1rem;
    font-weight: 600;
    border: 1px solid transparent;
}

.alert {
    display: flex;
    width: 100%;
}

.badge-success {
    background: var(--success-soft);
    color: var(--success);
    border-color: color-mix(in srgb, var(--success) 18%, transparent);
}

.badge-warning {
    background: var(--warning-soft);
    color: var(--warning);
    border-color: color-mix(in srgb, var(--warning) 18%, transparent);
}

.badge-danger {
    background: var(--danger-soft);
    color: var(--danger);
    border-color: color-mix(in srgb, var(--danger) 18%, transparent);
}

.badge-info {
    background: var(--info-soft);
    color: var(--info);
    border-color: color-mix(in srgb, var(--info) 18%, transparent);
}

.pill {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 1.7rem;
    text-align: center;
    background: var(--primary);
    color: #fff;
    border-radius: 999px;
    padding: .18rem .52rem;
    font-size: .74rem;
    font-weight: 700;
}

.timeline {
    margin: 0;
    padding: 0 0 0 1.25rem;
    list-style: none;
    display: grid;
    gap: .9rem;
    position: relative;
}

.timeline::before {
    content: "";
    position: absolute;
    left: .32rem;
    top: .35rem;
    bottom: .35rem;
    width: 2px;
    background: linear-gradient(180deg, var(--primary), transparent);
    opacity: .35;
}

.timeline li {
    position: relative;
    padding: .1rem 0 0 .6rem;
}

.timeline li::before {
    content: "";
    position: absolute;
    left: -.98rem;
    top: .45rem;
    width: .8rem;
    height: .8rem;
    border-radius: 50%;
    background: var(--bg-soft);
    border: 2px solid var(--primary);
    box-shadow: 0 0 0 5px var(--primary-soft);
}

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

.stats-grid > div {
    padding: 1rem;
    border-radius: 1.2rem;
    background: linear-gradient(180deg, color-mix(in srgb, var(--bg-soft) 80%, var(--primary-soft)) 0%, var(--bg-soft) 100%);
    border: 1px solid var(--border);
    box-shadow: var(--shadow-sm);
}

.stats-grid strong {
    display: block;
    margin-bottom: .35rem;
    font-size: .82rem;
    color: var(--muted);
    text-transform: uppercase;
    letter-spacing: .08em;
}

.chart-card {
    display: grid;
    grid-template-columns: 210px 1fr;
    gap: 1.1rem;
    align-items: center;
    min-height: 220px;
}

.chart-card .chart-circle {
    position: relative;
    width: 210px;
    height: 210px;
    border-radius: 50%;
    border: 10px solid rgba(255, 255, 255, 0.16);
    box-shadow: inset 0 0 0 18px var(--bg-soft), 0 18px 36px rgba(15, 23, 42, 0.10);
}

.chart-card .chart-center {
    position: absolute;
    inset: 50% auto auto 50%;
    transform: translate(-50%, -50%);
    width: 104px;
    height: 104px;
    display: grid;
    place-items: center;
    text-align: center;
    border-radius: 50%;
    background: var(--bg-soft);
    border: 1px solid var(--border);
    box-shadow: var(--shadow-sm);
    line-height: 1.2;
}

.chart-card .chart-center strong {
    display: block;
    font-size: .78rem;
    color: var(--muted);
    letter-spacing: .08em;
    text-transform: uppercase;
}

.chart-card .chart-center span {
    font-size: 1.25rem;
    font-weight: 800;
}

.chart-card .chart-legend {
    display: grid;
    gap: .55rem;
}

.chart-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .8rem;
    padding: .62rem .72rem;
    border-radius: .95rem;
    background: color-mix(in srgb, var(--secondary-soft) 55%, transparent);
    border: 1px solid color-mix(in srgb, var(--border) 84%, transparent);
}

.chart-dot {
    width: .9rem;
    height: .9rem;
    border-radius: 50%;
    flex: 0 0 auto;
    box-shadow: 0 0 0 4px rgba(127, 127, 127, 0.08);
}


.client-stats-columns > div {
    align-self: start;
}

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

.revenue-head h3 {
    margin-bottom: .35rem;
}

.revenue-kpis {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: .85rem;
    margin-bottom: 1rem;
}

.revenue-kpi {
    padding: 1rem 1.05rem;
    border-radius: 1.2rem;
    border: 1px solid var(--border);
    background: linear-gradient(180deg, color-mix(in srgb, var(--bg-soft) 82%, var(--primary-soft)) 0%, color-mix(in srgb, var(--bg-soft) 96%, white) 100%);
    box-shadow: var(--shadow-sm);
}

.revenue-kpi span,
.revenue-kpi small {
    display: block;
    color: var(--muted);
}

.revenue-kpi span {
    font-size: .82rem;
    text-transform: uppercase;
    letter-spacing: .08em;
    margin-bottom: .45rem;
}

.revenue-kpi strong {
    display: block;
    font-size: 1.55rem;
    line-height: 1.15;
    margin-bottom: .2rem;
}

.revenue-bars {
    display: grid;
    gap: .7rem;
}

.revenue-row {
    display: grid;
    grid-template-columns: 60px minmax(0, 1fr) 138px;
    gap: .75rem;
    align-items: center;
    padding: .72rem .85rem;
    border-radius: 1rem;
    border: 1px solid var(--border);
    background: color-mix(in srgb, var(--secondary-soft) 40%, transparent);
}

.revenue-row.is-current {
    border-color: color-mix(in srgb, var(--primary) 35%, var(--border));
    background: color-mix(in srgb, var(--primary-soft) 72%, transparent);
    box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--primary) 10%, transparent);
}

.revenue-month {
    font-weight: 700;
    color: var(--muted);
}

.revenue-bar-track {
    position: relative;
    width: 100%;
    height: 14px;
    border-radius: 999px;
    overflow: hidden;
    background: color-mix(in srgb, var(--border) 50%, transparent);
}

.revenue-bar {
    height: 100%;
    min-width: 0;
    border-radius: inherit;
    background: linear-gradient(90deg, var(--primary) 0%, var(--primary-strong) 100%);
    box-shadow: 0 8px 18px rgba(41, 88, 255, 0.24);
}

.revenue-amount {
    text-align: right;
    font-weight: 700;
    white-space: nowrap;
}

.empty-state-inline {
    padding: 1rem 1.1rem;
    border-radius: 1rem;
    border: 1px dashed var(--border-strong);
    color: var(--muted);
    background: color-mix(in srgb, var(--bg-soft) 92%, var(--primary-soft));
}

.supplier-other-row {
    margin-top: 1rem;
}

.is-hidden {
    display: none !important;
}

.pagination {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .45rem;
    margin-top: 1rem;
}

.pagination a,
.pagination button,
.pagination .pagination-ellipsis,
.pagination .pagination-summary {
    padding: .58rem .82rem;
    border-radius: .9rem;
    border: 1px solid var(--border);
    color: var(--text);
    background: var(--bg-soft);
    box-shadow: var(--shadow-sm);
}

.pagination a.active,
.pagination button.active {
    background: linear-gradient(135deg, var(--primary) 0%, var(--primary-strong) 100%);
    color: #fff;
    border-color: transparent;
}

.pagination .pagination-nav {
    font-weight: 600;
}

.pagination .disabled {
    opacity: .45;
    pointer-events: none;
}

.pagination .pagination-ellipsis,
.pagination .pagination-summary {
    cursor: default;
}

.pagination button {
    font: inherit;
    cursor: pointer;
}

.pagination button:disabled {
    cursor: not-allowed;
}

.rating-display {
    font-size: 2rem;
    letter-spacing: .14rem;
}

.qr-block {
    display: flex;
    gap: 1rem;
    align-items: center;
    flex-wrap: wrap;
}

.qr-block img {
    width: 220px;
    height: 220px;
    border-radius: 1.2rem;
    background: white;
    padding: .6rem;
    box-shadow: var(--shadow);
}

.stars-links {
    display: flex;
    flex-direction: column;
    gap: .55rem;
    margin-bottom: 1rem;
}

.star-link {
    padding: .75rem .9rem;
    border-radius: 1rem;
    background: var(--primary-soft);
    border: 1px solid color-mix(in srgb, var(--primary) 18%, transparent);
    font-weight: 700;
}

.auth-shell {
    min-height: 100vh;
    display: grid;
    place-items: center;
    padding: 1.5rem;
    background:
        radial-gradient(circle at top left, rgba(41, 88, 255, 0.18), transparent 28%),
        radial-gradient(circle at bottom right, rgba(141, 125, 255, 0.18), transparent 30%),
        linear-gradient(180deg, var(--bg) 0%, color-mix(in srgb, var(--bg) 85%, #d9e4ff) 100%);
}

.auth-wrapper {
    width: min(1120px, 100%);
    display: grid;
    grid-template-columns: 1.15fr minmax(360px, 460px);
    gap: 1.2rem;
    align-items: stretch;
}

.auth-brand-panel,
.auth-panel {
    border-radius: 2rem;
    border: 1px solid var(--border);
    box-shadow: var(--shadow-strong);
}

.auth-brand-panel {
    padding: 2rem;
    background:
        radial-gradient(circle at top right, rgba(255, 255, 255, 0.16), transparent 30%),
        linear-gradient(135deg, #0f172a 0%, #1d2d5b 62%, #2958ff 100%);
    color: #fff;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    min-height: 620px;
}

.auth-brand-panel .eyebrow,
.auth-brand-panel p {
    color: rgba(255, 255, 255, 0.8);
}

.auth-brand-panel h1 {
    max-width: 12ch;
    margin: 1.5rem 0 1rem;
    font-size: clamp(2rem, 3vw, 3rem);
}

.auth-feature-list {
    display: grid;
    gap: .85rem;
    margin-top: 2rem;
}

.auth-feature {
    padding: .9rem 1rem;
    border-radius: 1.15rem;
    background: rgba(255, 255, 255, 0.10);
    border: 1px solid rgba(255, 255, 255, 0.12);
    backdrop-filter: blur(10px);
    font-weight: 600;
}

.auth-panel {
    padding: 1rem;
    background: color-mix(in srgb, var(--bg-soft) 94%, transparent);
    backdrop-filter: blur(16px);
    display: flex;
    align-items: center;
    justify-content: center;
}

.auth-container {
    width: min(520px, 100%);
    display: grid;
    gap: 1rem;
    align-content: center;
}

.auth-alert {
    margin: 0;
}

.auth-card {
    width: 100%;
    padding: 1.6rem;
}

.auth-card h1 {
    margin-bottom: .85rem;
}

.auth-links {
    margin-top: 1rem;
    display: flex;
    flex-wrap: wrap;
    gap: .5rem;
}

@media (max-width: 1220px) {
    .app-shell {
        grid-template-columns: 290px minmax(0, 1fr);
    }

    .chart-card {
        grid-template-columns: 1fr;
        justify-items: start;
    }
}

@media (max-width: 1080px) {
    .widget-grid > .widget,
    .page-grid > .card,
    .stats-columns > div {
        grid-column: span 12;
    }

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

    .auth-wrapper {
        grid-template-columns: 1fr;
    }

    .auth-brand-panel {
        min-height: auto;
    }
}

@media (max-width: 920px) {
    .app-shell {
        grid-template-columns: 1fr;
    }

    .sidebar {
        position: static;
        height: auto;
        padding: 1rem 1rem 0;
    }

    .sidebar-inner {
        height: auto;
    }

    .main {
        padding: 1rem;
    }

    .topbar {
        position: static;
        flex-direction: column;
        align-items: flex-start;
    }

    .toolbar > .inline-form,
    .toolbar > form.inline-form {
        display: grid;
        grid-template-columns: 1fr;
        align-items: stretch;
    }

    .inline-form {
        grid-auto-flow: row;
        grid-auto-columns: 1fr;
    }
}

@media (max-width: 700px) {
    .grid-form.two-cols,
    .stats-grid {
        grid-template-columns: 1fr;
    }

    .planner-filter-grid,
    .planner-revenue-range-row {
        grid-template-columns: 1fr;
    }

    .chart-card .chart-circle {
        width: 180px;
        height: 180px;
    }

    .chart-card .chart-center {
        width: 94px;
        height: 94px;
    }

    .auth-shell {
        padding: 1rem;
    }

    .auth-brand-panel,
    .auth-panel,
    .card,
    .auth-card,
    .topbar,
    .toolbar > .inline-form,
    .toolbar > form.inline-form {
        border-radius: 1.35rem;
    }

    table {
        min-width: 640px;
    }
}


/* ===== v4.3 premium auth refresh ===== */
.auth-wrapper-premium {
    position: relative;
    width: min(1220px, 100%);
    gap: 1.5rem;
}

.auth-wrapper-premium::before,
.auth-wrapper-premium::after {
    content: "";
    position: absolute;
    border-radius: 999px;
    pointer-events: none;
    filter: blur(8px);
}

.auth-wrapper-premium::before {
    width: 240px;
    height: 240px;
    left: -70px;
    top: -50px;
    background: rgba(41, 88, 255, 0.12);
}

.auth-wrapper-premium::after {
    width: 260px;
    height: 260px;
    right: -30px;
    bottom: -45px;
    background: rgba(164, 140, 255, 0.12);
}

.auth-brand-panel {
    position: relative;
    overflow: hidden;
    min-height: 700px;
    padding: 2.2rem;
    background:
        radial-gradient(circle at top right, rgba(255, 255, 255, 0.18), transparent 26%),
        radial-gradient(circle at bottom left, rgba(122, 141, 255, 0.20), transparent 24%),
        linear-gradient(145deg, #0a1227 0%, #12244f 48%, #1f46c7 100%);
}

.auth-brand-panel::before {
    content: "";
    position: absolute;
    inset: auto -40px -60px auto;
    width: 220px;
    height: 220px;
    border-radius: 44px;
    background: rgba(255, 255, 255, 0.08);
    transform: rotate(18deg);
}

.auth-brand-top,
.auth-hero-copy,
.auth-hero-metrics,
.auth-feature-grid {
    position: relative;
    z-index: 1;
}

.auth-brand-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
}

.auth-status-chip,
.auth-mini-badge,
.auth-card-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 2rem;
    padding: .4rem .8rem;
    border-radius: 999px;
    font-size: .76rem;
    font-weight: 700;
    letter-spacing: .04em;
}

.auth-status-chip {
    color: #fff;
    background: rgba(255, 255, 255, 0.12);
    border: 1px solid rgba(255, 255, 255, 0.16);
    backdrop-filter: blur(10px);
}

.auth-hero-copy {
    margin-top: 2.4rem;
}

.auth-brand-panel h1 {
    max-width: 11ch;
    margin: 1rem 0 1rem;
    font-size: clamp(2.4rem, 4vw, 4.1rem);
    line-height: .98;
}

.auth-brand-panel p {
    max-width: 58ch;
    font-size: 1.04rem;
}

.auth-hero-metrics {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: .9rem;
    margin-top: 2rem;
}

.auth-metric {
    padding: 1rem 1.05rem;
    border-radius: 1.4rem;
    background: rgba(255, 255, 255, 0.10);
    border: 1px solid rgba(255, 255, 255, 0.12);
    backdrop-filter: blur(14px);
}

.auth-metric strong {
    display: block;
    font-size: 1.3rem;
    margin-bottom: .25rem;
}

.auth-metric span {
    display: block;
    color: rgba(255, 255, 255, 0.78);
    font-size: .88rem;
}

.auth-feature-grid {
    display: grid;
    gap: .85rem;
    margin-top: 1.35rem;
}

.auth-feature {
    display: grid;
    gap: .35rem;
    padding: 1rem 1.05rem;
    border-radius: 1.25rem;
    background: rgba(255, 255, 255, 0.09);
    border: 1px solid rgba(255, 255, 255, 0.10);
    backdrop-filter: blur(14px);
}

.auth-feature strong {
    color: #fff;
    font-size: .98rem;
}

.auth-feature span {
    color: rgba(255, 255, 255, 0.8);
    font-size: .92rem;
}

.auth-panel {
    padding: 1.2rem;
    background:
        linear-gradient(180deg, rgba(255, 255, 255, 0.70), rgba(255, 255, 255, 0.48)),
        radial-gradient(circle at top, rgba(41, 88, 255, 0.10), transparent 40%);
}

html[data-theme="dark"] .auth-panel,
html[data-theme="midnight"] .auth-panel {
    background:
        linear-gradient(180deg, rgba(16, 27, 45, 0.84), rgba(16, 27, 45, 0.72)),
        radial-gradient(circle at top, rgba(127, 161, 255, 0.10), transparent 40%);
}

.auth-panel-frame {
    width: 100%;
    max-width: 520px;
    padding: 1.15rem;
    border-radius: 2rem;
    background: rgba(255, 255, 255, 0.42);
    border: 1px solid rgba(255, 255, 255, 0.55);
    box-shadow: 0 24px 60px rgba(15, 23, 42, 0.10);
    backdrop-filter: blur(22px);
}

html[data-theme="dark"] .auth-panel-frame,
html[data-theme="midnight"] .auth-panel-frame {
    background: rgba(7, 12, 24, 0.34);
    border-color: rgba(255, 255, 255, 0.09);
}

.auth-panel-head {
    display: grid;
    gap: .55rem;
    margin-bottom: .95rem;
    padding: .25rem .25rem 0;
}

.auth-mini-badge {
    justify-self: start;
    color: var(--primary);
    background: var(--primary-soft);
    border: 1px solid color-mix(in srgb, var(--primary) 20%, transparent);
}

.auth-panel-head p {
    margin: 0;
    color: var(--muted);
}

.auth-container {
    gap: .9rem;
}

.auth-shell .auth-card {
    padding: 1.5rem;
    border-radius: 1.7rem;
    background:
        linear-gradient(180deg, rgba(255, 255, 255, 0.96), rgba(255, 255, 255, 0.90));
    box-shadow: 0 20px 50px rgba(15, 23, 42, 0.10);
}

html[data-theme="dark"] .auth-shell .auth-card,
html[data-theme="midnight"] .auth-shell .auth-card {
    background:
        linear-gradient(180deg, rgba(18, 30, 48, 0.96), rgba(11, 20, 34, 0.96));
}

.auth-card-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: .8rem;
    margin-bottom: .5rem;
}

.auth-card-badge {
    color: var(--primary);
    background: var(--primary-soft);
    border: 1px solid color-mix(in srgb, var(--primary) 18%, transparent);
    white-space: nowrap;
}

.auth-card-lead {
    margin-bottom: 1.1rem;
}

.auth-shell .auth-card input,
.auth-shell .auth-card select,
.auth-shell .auth-card textarea {
    min-height: 3.2rem;
    border-radius: 1.05rem;
    background: color-mix(in srgb, var(--bg-soft) 88%, white);
}

.auth-shell .auth-card .button {
    min-height: 3.15rem;
    border-radius: 1.05rem;
    font-size: .98rem;
    box-shadow: 0 16px 32px rgba(41, 88, 255, 0.22);
}

.auth-trust-note,
.auth-panel-foot {
    display: flex;
    flex-wrap: wrap;
    gap: .55rem;
    color: var(--muted);
    font-size: .84rem;
}

.auth-trust-note {
    margin-top: 1rem;
    padding-top: .95rem;
    border-top: 1px solid var(--border);
}

.auth-panel-foot {
    margin-top: 1rem;
    justify-content: center;
}

.auth-panel-foot span {
    display: inline-flex;
    align-items: center;
    gap: .35rem;
    padding: .36rem .72rem;
    border-radius: 999px;
    background: var(--primary-soft);
    color: var(--primary);
}

@media (max-width: 1080px) {
    .auth-wrapper-premium {
        width: min(860px, 100%);
    }

    .auth-brand-panel {
        min-height: auto;
    }
}

@media (max-width: 820px) {
    .auth-brand-top,
    .auth-card-header {
        flex-direction: column;
        align-items: flex-start;
    }

    .auth-hero-metrics {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 700px) {
    .auth-brand-panel,
    .auth-panel,
    .auth-panel-frame,
    .auth-shell .auth-card {
        border-radius: 1.45rem;
    }

    .auth-brand-panel {
        padding: 1.35rem;
    }

    .auth-brand-panel h1 {
        max-width: 13ch;
        font-size: clamp(2rem, 10vw, 2.8rem);
    }

    .auth-panel {
        padding: .7rem;
    }

    .auth-panel-frame,
    .auth-shell .auth-card {
        padding: 1rem;
    }
}

html[data-theme="aurora"] {
    color-scheme: dark;
    --bg: #08151f;
    --bg-soft: #0f1f2b;
    --bg-elevated: rgba(15, 31, 43, 0.84);
    --sidebar-bg: linear-gradient(180deg, #06111b 0%, #0b1b2a 100%);
    --sidebar-text: #eefcff;
    --sidebar-muted: #94b9c1;
    --sidebar-border: rgba(255,255,255,.08);
    --text: #ecf9ff;
    --muted: #91b3bb;
    --border: #1f3a46;
    --border-strong: #2d4b58;
    --primary: #5bd0d0;
    --primary-strong: #93e8e8;
    --primary-soft: rgba(91,208,208,.15);
    --secondary-soft: rgba(114,255,208,.12);
    --success: #74e4a1;
    --warning: #ffcc6d;
    --danger: #ff8799;
    --info: #67d8ff;
    --ring: rgba(91,208,208,.28);
}

html[data-theme="sand"] {
    color-scheme: light;
    --bg: #f7f1e6;
    --bg-soft: #fffaf1;
    --bg-elevated: rgba(255,250,241,.9);
    --sidebar-bg: linear-gradient(180deg, #2c2118 0%, #3b2b1d 100%);
    --sidebar-text: #f4e8da;
    --sidebar-muted: #d8c2ab;
    --sidebar-border: rgba(255,255,255,.08);
    --text: #2f261e;
    --muted: #7e6b57;
    --border: #eadbc5;
    --border-strong: #dbc3a0;
    --primary: #b5792d;
    --primary-strong: #8f5d1f;
    --primary-soft: rgba(181,121,45,.12);
    --secondary-soft: rgba(164,110,57,.10);
    --success: #2f8f61;
    --warning: #ba7a13;
    --danger: #b6544a;
    --info: #7d6bff;
    --ring: rgba(181,121,45,.22);
}

.sidebar-topbar { display:flex; align-items:center; justify-content:space-between; gap:.75rem; }
.sidebar-collapse-button { width:2.75rem; height:2.75rem; border-radius:1rem; border:1px solid rgba(255,255,255,.08); background:rgba(255,255,255,.05); color:var(--sidebar-text); display:grid; place-items:center; cursor:pointer; }
.sidebar-collapse-button .nav-icon { margin:0; }
.mobile-sidebar-toggle { display:none; }
.brand-copy { min-width:0; }
.sidebar .brand { min-width:0; }
.sidebar .brand strong { display:block; overflow:hidden; text-overflow:ellipsis; }

body.sidebar-collapsed.app-shell { grid-template-columns: 112px minmax(0, 1fr); }
body.sidebar-collapsed .sidebar { width:112px; }
body.sidebar-collapsed .sidebar-inner { padding:1rem .75rem; }
body.sidebar-collapsed .brand-copy,
body.sidebar-collapsed .user-meta,
body.sidebar-collapsed .nav-text,
body.sidebar-collapsed .nav-section,
body.sidebar-collapsed .nav-badge { display:none; }
body.sidebar-collapsed .user-panel { grid-template-columns:1fr; justify-items:center; padding:.85rem .5rem; }
body.sidebar-collapsed .status-row { display:none; }
body.sidebar-collapsed .nav a,
.nav .nav-logout-button { justify-content:center; padding:.9rem; }
body.sidebar-collapsed .nav-main { justify-content:center; }
body.sidebar-collapsed .nav-icon { margin:0; }
body.sidebar-collapsed .sidebar-collapse-button svg { transform: rotate(180deg); }
body.sidebar-collapsed .sidebar .brand { justify-content:center; }
body.sidebar-collapsed .sidebar .brand-mark, body.sidebar-collapsed .sidebar .brand-logo { width:2.9rem; height:2.9rem; }

.toolbar-card { padding:1rem 1.1rem; }
.compact-filters { gap:.9rem 1rem; align-items:end; }
.compact-filters label span { margin-bottom:.35rem; display:block; }
.filter-actions, .form-actions-row { display:flex; gap:.75rem; align-items:center; flex-wrap:wrap; }
.checkbox-stack { display:grid; grid-template-columns:repeat(auto-fit,minmax(240px,1fr)); gap:.6rem 1rem; }
.compact-form { gap:1rem 1.1rem; }
.admin-settings-grid { gap:1.2rem; }
.preview-grid.two-up { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:1rem; }
.preview-card { padding:1rem; border:1px solid var(--border); border-radius:1.25rem; background:var(--bg-soft); }
.email-preview { border:1px solid var(--border); border-radius:1rem; padding:1rem; background:var(--bg); }
.email-preview-plain { white-space:pre-wrap; border:1px solid var(--border); border-radius:1rem; padding:1rem; background:var(--bg); color:var(--text); }
.sticky-actions { position:sticky; bottom:1rem; z-index:3; display:flex; justify-content:flex-end; }

.kpi-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(160px,1fr)); gap:1rem; }
.kpi-card { padding:1rem 1.1rem; border-radius:1.25rem; border:1px solid var(--border); background:linear-gradient(180deg,var(--bg-soft),var(--bg)); box-shadow:var(--shadow-sm); }
.kpi-card span, .kpi-card small { display:block; color:var(--muted); }
.kpi-card strong { display:block; font-size:1.5rem; margin:.3rem 0; }
.kpi-card.emphasis { border-color:var(--primary); background:linear-gradient(180deg,var(--primary-soft),var(--bg-soft)); }
.client-premium-grid { gap:1.2rem; }
.client-hero-card { overflow:hidden; }
.client-hero-head { align-items:flex-start; }
.client-hero-meta { display:flex; flex-wrap:wrap; gap:.55rem; margin-top:.75rem; }
.dense-stats-grid { grid-template-columns:repeat(3,minmax(0,1fr)); gap:1rem; }
.premium-timeline li { padding-left:1rem; }
.client-stats-premium { overflow:hidden; }
.client-stats-head { align-items:flex-start; gap:1rem; }
.stats-filter-form { align-items:end; gap:.8rem; }
.client-stats-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:1.2rem; margin:1rem 0 1.25rem; }
.revenue-kpis { margin:1rem 0 1.2rem; }
.revenue-panel { margin-top:.5rem; padding:1rem; border:1px solid var(--border); border-radius:1.4rem; background:linear-gradient(180deg,var(--bg-soft),var(--bg)); }
.revenue-bars { display:grid; grid-template-columns:repeat(12,minmax(0,1fr)); gap:.7rem; align-items:end; }
.revenue-bar { display:flex; flex-direction:column; gap:.45rem; align-items:center; }
.revenue-bar-column { width:100%; min-height:180px; display:flex; align-items:flex-end; justify-content:center; padding:.25rem; border-radius:1rem; background:var(--primary-soft); border:1px solid var(--border); }
.revenue-bar-column span { width:100%; border-radius:.85rem; background:linear-gradient(180deg,var(--primary-strong),var(--primary)); display:block; }
.revenue-bar.is-active .revenue-bar-column { border-color:var(--primary); box-shadow:0 0 0 3px var(--ring); }
.revenue-bar strong { font-size:.9rem; }
.revenue-bar small { text-align:center; font-size:.72rem; color:var(--muted); }

@media (max-width: 1100px) {
    .preview-grid.two-up, .client-stats-grid { grid-template-columns:1fr; }
    .dense-stats-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
}

@media (max-width: 980px) {
    .app-shell,
    body.sidebar-collapsed.app-shell {
        grid-template-columns: 1fr;
    }

    .sidebar {
        position: fixed;
        inset: 0 auto 0 0;
        width: 280px;
        z-index: 20;
        transform: translateX(0);
        transition: transform var(--transition);
    }

    body.sidebar-collapsed .sidebar {
        transform: translateX(-100%);
        width: 280px;
    }

    body.sidebar-collapsed .sidebar-inner {
        padding: 1.15rem;
    }

    body.sidebar-collapsed .brand-copy,
    body.sidebar-collapsed .user-meta,
    body.sidebar-collapsed .nav-text,
    body.sidebar-collapsed .nav-section,
    body.sidebar-collapsed .nav-badge {
        display: initial;
    }

    body.sidebar-collapsed .user-panel {
        grid-template-columns: auto 1fr;
        justify-items: stretch;
    }

    .mobile-sidebar-toggle {
        display: inline-flex;
    }
}

@media (max-width: 760px) {
    .dense-stats-grid, .kpi-grid, .revenue-bars { grid-template-columns:1fr; }
    .topbar { flex-direction:column; align-items:stretch; }
    .client-hero-head { flex-direction:column; }
    .toolbar-filters.four-cols, .grid-form.three-cols { grid-template-columns:1fr; }
}



/* v4.9 premium refinements */
.premium-filter-card {
    border-radius: 1.5rem;
    background: linear-gradient(180deg, var(--bg-elevated), var(--bg-soft));
}
.clients-filter-grid,
.reports-filter-grid {
    align-items: end;
    gap: 1rem 1.1rem;
}
.filter-inline-pair {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: .9rem 1rem;
}
.filter-inline-triple {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: .9rem 1rem;
}
.search-field input {
    padding-left: 1rem;
}
.client-stats-xl,
.reports-history-xl {
    padding-top: 1.2rem;
}
.client-stats-grid-xl {
    grid-template-columns: 1.2fr 1.2fr;
    gap: 1.25rem;
}
.subtle-card {
    background: linear-gradient(180deg, var(--bg-soft), var(--bg));
    border: 1px solid var(--border);
    box-shadow: var(--shadow-sm);
}
.chart-card-xl .chart-circle {
    width: 220px;
    height: 220px;
}
.revenue-panel-xl {
    margin-top: 1rem;
    padding: 1.15rem 1.2rem;
}
.revenue-overview-list {
    display: grid;
    gap: .9rem;
}
.revenue-line {
    display: grid;
    gap: .45rem;
    padding: .8rem .9rem;
    border-radius: 1rem;
    background: var(--bg);
    border: 1px solid var(--border);
}
.revenue-line.is-active {
    border-color: var(--primary);
    box-shadow: 0 0 0 3px var(--ring);
    background: linear-gradient(180deg, var(--primary-soft), var(--bg));
}
.revenue-line-meta {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
}
.revenue-progress-track {
    width: 100%;
    height: 14px;
    border-radius: 999px;
    background: rgba(99, 102, 241, 0.12);
    overflow: hidden;
}
.revenue-progress-bar {
    height: 100%;
    border-radius: 999px;
    background: linear-gradient(90deg, var(--primary), var(--primary-strong));
}
.report-history-table td,
.report-history-table th {
    vertical-align: top;
}
.text-wrap-cell {
    min-width: 220px;
    white-space: normal;
}
.admin-settings-hero {
    display: flex;
    justify-content: space-between;
    gap: 1.25rem;
    align-items: flex-start;
}
.admin-settings-kpis {
    display: grid;
    grid-template-columns: repeat(3, minmax(110px, 1fr));
    gap: .8rem;
    min-width: min(100%, 420px);
}
.mini-kpi {
    padding: .95rem 1rem;
    border-radius: 1.1rem;
    background: linear-gradient(180deg, var(--bg), var(--bg-soft));
    border: 1px solid var(--border);
    box-shadow: var(--shadow-sm);
}
.mini-kpi strong {
    display: block;
    font-size: 1.08rem;
}
.mini-kpi span {
    display: block;
    margin-top: .2rem;
    color: var(--muted);
    font-size: .86rem;
}
.setting-preview-chip {
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    padding: .75rem .9rem;
    border-radius: 1rem;
    background: var(--bg-soft);
    border: 1px dashed var(--border);
}
.template-vars-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: .85rem;
    margin-bottom: 1rem;
}
.template-var {
    padding: .85rem .95rem;
    border-radius: 1rem;
    background: linear-gradient(180deg, var(--bg-soft), var(--bg));
    border: 1px solid var(--border);
}
.template-var strong {
    display: block;
    margin-bottom: .25rem;
}
.template-var span {
    color: var(--muted);
    font-size: .88rem;
}
.import-inline-form {
    margin-top: .85rem;
}
.sidebar-topbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .75rem;
}
.sidebar-collapse-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 0;
    width: 2.5rem;
    height: 2.5rem;
    border-radius: .95rem;
    background: rgba(255,255,255,.08);
    color: var(--sidebar-text);
    cursor: pointer;
}
.sidebar-collapse-button:hover {
    background: rgba(255,255,255,.12);
}
body.sidebar-collapsed .sidebar-collapse-button {
    margin-inline: auto;
}
body.sidebar-collapsed .sidebar-topbar {
    justify-content: center;
}
body.sidebar-collapsed .sidebar-topbar .brand {
    display: none;
}

@media (max-width: 1100px) {
    .admin-settings-hero,
    .filter-inline-pair,
    .filter-inline-triple {
        grid-template-columns: 1fr;
        flex-direction: column;
    }
    .admin-settings-kpis {
        grid-template-columns: repeat(3, minmax(0, 1fr));
        min-width: 100%;
    }
}
@media (max-width: 760px) {
    .client-stats-grid-xl,
    .filter-inline-pair,
    .filter-inline-triple,
    .admin-settings-kpis {
        grid-template-columns: 1fr;
    }
    .revenue-line-meta {
        flex-direction: column;
        align-items: flex-start;
    }
}

.siret-chip, .siret-value {
    overflow-wrap:anywhere;
    word-break:break-word;
}
.siret-value {
    font-variant-numeric:tabular-nums;
}


.company-status-chip.good,
.company-status-badge.good {
    background: var(--success-soft);
    color: var(--success);
}
.company-status-chip.bad,
.company-status-badge.bad {
    background: var(--danger-soft);
    color: var(--danger);
}
.company-status-chip.neutral,
.company-status-badge.neutral,
.company-status-chip.unknown,
.company-status-badge.unknown {
    background: var(--warning-soft);
    color: var(--warning);
}
.company-status-badge {
    display: inline-flex;
    align-items: center;
    gap: .35rem;
    padding: .45rem .85rem;
    border-radius: 999px;
    font-weight: 700;
    max-width: 100%;
    overflow-wrap: anywhere;
}
.company-status-badge.compact {
    padding: .32rem .72rem;
    font-size: .92rem;
}
.company-status-panel {
    display: grid;
    gap: 1rem;
}
.company-status-main {
    display: grid;
    gap: .65rem;
}
.company-status-meta {
    display: grid;
    gap: .2rem;
}
.bulk-progress {
    margin-top: 1rem;
    display: grid;
    gap: .7rem;
}
.bulk-progress-bar {
    width: 100%;
    height: 14px;
    border-radius: 999px;
    background: var(--border);
    overflow: hidden;
}
.bulk-progress-bar > span {
    display: block;
    width: 0%;
    height: 100%;
    border-radius: inherit;
    background: linear-gradient(90deg, var(--primary) 0%, var(--primary-strong) 100%);
    transition: width 180ms ease;
}
.bulk-progress-meta {
    display: flex;
    justify-content: space-between;
    gap: 1rem;
    flex-wrap: wrap;
}
.bulk-progress-log {
    margin: 0;
    padding-left: 1.1rem;
    max-height: 220px;
    overflow: auto;
}

.client-layout-toolbar {
    display: flex;
    align-items: center;
    gap: .75rem;
    flex-wrap: wrap;
    margin-top: 1rem;
}

.client-section-controls {
    display: none;
    align-items: center;
    gap: .45rem;
    margin-left: auto;
}

.client-organize-mode [data-client-section] {
    outline: 2px dashed color-mix(in srgb, var(--primary) 55%, transparent);
    outline-offset: 4px;
}

.client-organize-mode .client-section-controls {
    display: inline-flex;
}

.client-organize-mode [data-client-section] {
    cursor: default;
}

.template-auto-note {
    padding: .85rem .95rem;
    border-radius: 1rem;
    border: 1px dashed var(--border);
    background: var(--bg);
}

.preview-grid-large {
    align-items: stretch;
}

.preview-card-large {
    display: grid;
    gap: .85rem;
}

.preview-card-head {
    margin-bottom: 0;
}

.preview-subject {
    font-weight: 600;
}

.email-preview-large {
    min-height: 260px;
    max-height: 380px;
    overflow: auto;
}

.email-preview-modal {
    position: fixed;
    inset: 0;
    z-index: 60;
    display: grid;
    place-items: center;
    padding: 1.5rem;
}

.email-preview-modal-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(15, 23, 42, .6);
}

.email-preview-modal-dialog {
    position: relative;
    z-index: 1;
    width: min(1100px, 100%);
    max-height: calc(100vh - 3rem);
    overflow: auto;
    background: var(--bg-soft);
}

.email-preview-zoom {
    min-height: 520px;
    max-height: none;
}

body.modal-open {
    overflow: hidden;
}

@media (max-width: 760px) {
    .client-layout-toolbar {
        flex-direction: column;
        align-items: flex-start;
    }

    .email-preview-modal {
        padding: .75rem;
    }

    .email-preview-zoom {
        min-height: 360px;
    }
}

.profile-note {
    margin: .55rem 0 0;
}

.top-gap {
    margin-top: 1rem;
}

.copy-input {
    font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
    font-size: .92rem;
}


.wrap-actions {
    flex-wrap: wrap;
}

.report-contact-prefill-row {
    display: flex;
    gap: .65rem;
    align-items: center;
}

.report-contact-prefill-row > select {
    flex: 1 1 auto;
}

.diagnostic-overall {
    display: flex;
    justify-content: space-between;
    gap: 1rem;
    align-items: flex-start;
    padding: 1rem 1.1rem;
    border-radius: 1rem;
    border: 1px solid transparent;
}

.diagnostic-state-ok {
    background: var(--success-soft);
    color: var(--success);
    border-color: color-mix(in srgb, var(--success) 18%, transparent);
}

.diagnostic-state-warn {
    background: var(--warning-soft);
    color: var(--warning);
    border-color: color-mix(in srgb, var(--warning) 18%, transparent);
}

.diagnostic-state-error {
    background: var(--danger-soft);
    color: var(--danger);
    border-color: color-mix(in srgb, var(--danger) 18%, transparent);
}

.diagnostic-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 4.5rem;
    padding: .35rem .75rem;
    border-radius: 999px;
    font-size: .8rem;
    font-weight: 700;
    text-transform: uppercase;
}

.diagnostic-list {
    margin: 0;
    padding-left: 1.15rem;
    display: grid;
    gap: .55rem;
}

.diagnostic-item.error {
    color: var(--danger);
}

.diagnostic-item.warn {
    color: var(--warning);
}

.diagnostic-preview {
    margin-top: 1rem;
    padding: .95rem 1rem;
    border-radius: 1rem;
    border: 1px solid var(--border);
    background: var(--bg);
    font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
    font-size: .9rem;
    display: grid;
    gap: .35rem;
    max-height: 280px;
    overflow: auto;
}

@media (max-width: 760px) {
    .report-contact-prefill-row,
    .diagnostic-overall {
        flex-direction: column;
        align-items: stretch;
    }

    .client-geocode-manual-grid {
        grid-template-columns: 1fr;
    }
}

.agenda-filter-form {
    align-items: end;
    gap: .9rem;
}

.agenda-period-group {
    display: inline-flex;
    flex-wrap: wrap;
    gap: .9rem;
    align-items: end;
}

.client-hours-stack {
    display: grid;
    gap: 1rem;
}

.client-geocode-panel {
    display: grid;
    gap: .8rem;
    padding: 1rem 1.05rem;
    border-radius: 1.2rem;
    border: 1px solid var(--border);
    background: linear-gradient(180deg, var(--bg-soft), var(--bg));
}

.client-geocode-action-row {
    display: flex;
    flex-wrap: wrap;
    gap: .75rem;
    align-items: center;
}

.client-address-grid {
    display: grid;
    grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr);
    gap: 1rem;
}

.client-address-panel,
.client-hours-panel {
    display: grid;
    gap: .95rem;
    padding: 1rem 1.05rem;
    border-radius: 1.2rem;
    border: 1px solid var(--border);
    background: linear-gradient(180deg, var(--bg-soft), var(--bg));
}

.client-address-panel h3,
.client-hours-panel h3 {
    margin: 0;
    font-size: 1rem;
}

.client-address-lines,
.client-geocode-meta,
.opening-hours-list {
    display: grid;
    gap: .45rem;
}

.client-geocode-manual-form {
    display: grid;
    gap: .85rem;
    padding-top: .25rem;
    border-top: 1px dashed var(--border);
}

.client-geocode-manual-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: .85rem 1rem;
}

.opening-hours-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 1rem;
    padding: .65rem .8rem;
    border-radius: .95rem;
    border: 1px solid var(--border);
    background: var(--bg);
}

.opening-hours-row strong {
    min-width: 6.5rem;
}

.client-closure-box {
    display: grid;
    gap: .35rem;
    padding: .95rem 1rem;
    border-radius: 1rem;
    border: 1px dashed var(--border);
    background: var(--bg);
}

.client-closure-box.is-active {
    border-style: solid;
    border-color: color-mix(in srgb, var(--warning) 28%, transparent);
    background: var(--warning-soft);
}

.opening-hours-form-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: .9rem;
}

.form-inline-note {
    align-self: end;
    padding: .85rem .95rem;
    border-radius: 1rem;
    border: 1px dashed var(--border);
    background: var(--bg);
}

@media (max-width: 900px) {
    .client-address-grid,
    .opening-hours-form-grid,
    .agenda-period-group {
        grid-template-columns: 1fr;
    }

    .agenda-period-group {
        display: grid;
    }

    .opening-hours-row,
    .client-geocode-action-row {
        flex-direction: column;
        align-items: flex-start;
    }
}

.planner-intro-card {
    margin-bottom: 1rem;
}

.planner-steps {
    display: flex;
    flex-wrap: wrap;
    gap: .85rem;
}

.planner-step-chip {
    display: inline-flex;
    align-items: center;
    gap: .65rem;
    padding: .7rem .95rem;
    border-radius: 999px;
    border: 1px solid var(--border);
    background: var(--bg);
    color: var(--text-soft);
}

.planner-step-chip.is-active {
    border-color: color-mix(in srgb, var(--primary) 40%, var(--border));
    background: color-mix(in srgb, var(--primary) 10%, var(--bg));
    color: var(--text);
}

.planner-step-chip.is-done {
    border-color: color-mix(in srgb, var(--success) 35%, var(--border));
    background: color-mix(in srgb, var(--success) 12%, var(--bg));
    color: var(--text);
}

.planner-step-index {
    width: 1.8rem;
    height: 1.8rem;
    border-radius: 999px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: var(--bg-soft);
    border: 1px solid var(--border);
    font-weight: 700;
}

.planner-form,
.planner-filter-grid {
    gap: 1rem;
}

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

.planner-weekdays-grid {
    grid-template-columns: repeat(7, minmax(0, 1fr));
}

.planner-point-card {
    padding: .8rem 0 0;
}

.planner-toolbar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 1rem;
    margin: 1rem 0;
    flex-wrap: wrap;
}

.planner-toolbar-meta {
    display: grid;
    gap: .25rem;
    justify-items: end;
}

.planner-revenue-range-row {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1rem;
}

.planner-selected-card {
    margin-top: 1rem;
    gap: .9rem;
}

.planner-selected-head-meta {
    display: grid;
    gap: .25rem;
    justify-items: end;
    text-align: right;
}

.planner-selected-list {
    display: grid;
    gap: .75rem;
    max-height: 22rem;
    overflow-y: auto;
    padding-right: .2rem;
}

.planner-selected-item {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto auto;
    gap: .85rem;
    align-items: center;
    padding: .85rem 1rem;
    border: 1px solid var(--border);
    border-radius: .95rem;
    background: var(--bg);
}

.planner-selected-item-main {
    display: grid;
    gap: .2rem;
    min-width: 0;
}

.planner-selected-item-mandatory {
    min-width: max-content;
}

.planner-selection-limit-alert {
    margin: .25rem 0 0;
}

.planner-table-wrap {
    max-height: 70vh;
}

.planner-table th,
.planner-table td {
    vertical-align: top;
}


.planner-sort-button {
    background: transparent;
    border: 0;
    padding: 0;
    font: inherit;
    cursor: pointer;
}

.planner-sort-button.is-active {
    color: var(--primary);
}

.planner-table-check {
    min-width: max-content;
}

.planner-actions-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 1rem;
    flex-wrap: wrap;
    margin-top: 1rem;
}

.planner-kpis {
    margin-bottom: 1rem;
}

.planner-days-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(290px, 1fr));
    gap: 1rem;
    margin: 1rem 0;
}

.planner-day-card {
    display: grid;
    gap: .9rem;
}

.planner-day-visits {
    display: grid;
    gap: .8rem;
}

.planner-visit-row {
    display: grid;
    grid-template-columns: auto 1fr auto;
    gap: .9rem;
    align-items: start;
    padding: .9rem 1rem;
    border-radius: 1rem;
    border: 1px solid var(--border);
    background: var(--bg);
}

.planner-visit-time {
    min-width: 5rem;
    display: grid;
    gap: .2rem;
}

.planner-visit-time span,
.planner-visit-main .small {
    color: var(--text-soft);
}

.planner-visit-side {
    display: flex;
    justify-content: flex-end;
}

.planner-unscheduled-card {
    margin-top: 1rem;
}

.planner-notice-stack {
    display: grid;
    gap: .6rem;
    margin-bottom: 1rem;
}

.planner-conflict-item {
    display: grid;
    gap: .25rem;
    margin-bottom: .65rem;
}


.planner-confirm-table input[type="date"],
.planner-confirm-table input[type="time"],
.planner-confirm-table input[type="text"],
.planner-confirm-table textarea {
    width: 100%;
}

.planner-confirm-datetime {
    display: grid;
    gap: .6rem;
    min-width: 12rem;
}

.planner-time-inline {
    display: flex;
    align-items: center;
    gap: .45rem;
}

.planner-time-inline input[type="time"] {
    min-width: 6.25rem;
}

.planner-delete-check {
    min-width: max-content;
}

.planner-confirmation-form {
    display: grid;
    gap: 1rem;
}

.planner-confirm-help {
    margin: 0;
}

.planner-pagination {
    margin-top: 1rem;
}

.planner-loading-overlay {
    position: fixed;
    inset: 0;
    display: none;
    place-items: center;
    padding: 1.25rem;
    background: rgba(15, 23, 42, .5);
    backdrop-filter: blur(4px);
    z-index: 60;
}

.planner-loading-overlay:not([hidden]) {
    display: grid;
}

.planner-loading-card {
    width: min(100%, 30rem);
    display: grid;
    gap: .85rem;
    padding: 1.2rem 1.25rem;
    border-radius: 1rem;
    border: 1px solid var(--border);
    background: var(--bg-soft);
    box-shadow: var(--shadow);
}

.planner-loading-bar {
    width: 100%;
    height: .8rem;
    border-radius: 999px;
    overflow: hidden;
    background: var(--bg-soft);
    border: 1px solid var(--border);
}

.planner-loading-bar > span {
    display: block;
    width: 0;
    height: 100%;
    border-radius: inherit;
    background: linear-gradient(90deg, var(--primary), color-mix(in srgb, var(--primary) 65%, white));
    transition: width .25s ease;
}

.planner-confirm-list {
    display: grid;
    gap: .9rem;
}

.planner-confirm-card {
    border: 1px solid var(--border);
    border-radius: 1rem;
    background: var(--bg);
    box-shadow: var(--shadow-sm);
    overflow: hidden;
}

.planner-confirm-card[open] {
    border-color: color-mix(in srgb, var(--primary) 35%, var(--border));
}

.planner-confirm-summary {
    list-style: none;
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 1rem;
    align-items: start;
    padding: 1rem 1.1rem;
    cursor: pointer;
}

.planner-confirm-summary::-webkit-details-marker {
    display: none;
}

.planner-confirm-summary-main {
    display: grid;
    gap: .35rem;
    min-width: 0;
}

.planner-confirm-summary-title-row {
    display: flex;
    align-items: center;
    gap: .55rem;
    flex-wrap: wrap;
}

.planner-confirm-index {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 2rem;
    height: 2rem;
    padding: 0 .55rem;
    border-radius: 999px;
    background: var(--bg-soft);
    border: 1px solid var(--border);
    font-weight: 700;
}

.planner-confirm-summary-meta {
    display: grid;
    gap: .65rem;
    justify-items: end;
    text-align: right;
}

.planner-confirm-summary-datetime {
    display: grid;
    gap: .2rem;
}

.planner-confirm-summary-badges {
    display: flex;
    gap: .45rem;
    flex-wrap: wrap;
    justify-content: flex-end;
}

.planner-confirm-body {
    display: grid;
    gap: 1rem;
    padding: 1rem 1.1rem 1.1rem;
    border-top: 1px solid var(--border);
    background: var(--bg-soft);
}

.planner-confirm-grid {
    gap: 1rem;
}

.planner-confirm-grid input[type="date"],
.planner-confirm-grid input[type="time"],
.planner-confirm-grid input[type="text"],
.planner-confirm-grid textarea {
    width: 100%;
}

.planner-confirm-time-group {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1rem;
    align-items: end;
}

.planner-confirm-footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 1rem;
    flex-wrap: wrap;
}

.planner-confirm-conflicts {
    display: grid;
    gap: .65rem;
}

.opening-hours-editor {
    display: grid;
    gap: .85rem;
}

.opening-hours-default-toolbar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .75rem;
    margin-bottom: .9rem;
}

.opening-hours-editor-row {
    display: grid;
    grid-template-columns: minmax(130px, .9fr) repeat(4, minmax(0, 1fr));
    gap: .8rem;
    align-items: end;
    padding: .95rem 1rem;
    border-radius: 1rem;
    border: 1px solid var(--border);
    background: var(--bg-soft);
}

.opening-hours-editor-day {
    display: grid;
    gap: .55rem;
}

.opening-hours-editor-day .checkbox.compact {
    margin-top: 0;
}

.opening-hours-list-compact {
    gap: .55rem;
}

.opening-hours-row-compact {
    align-items: flex-start;
}

.opening-hours-row-body {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: .45rem;
}

.opening-hours-windows {
    display: flex;
    flex-wrap: wrap;
    gap: .45rem;
    justify-content: flex-end;
}

.opening-window-chip {
    display: inline-flex;
    align-items: center;
    padding: .32rem .62rem;
    border-radius: 999px;
    background: color-mix(in srgb, var(--primary) 12%, var(--bg));
    border: 1px solid color-mix(in srgb, var(--primary) 28%, var(--border));
    font-size: .84rem;
}

.opening-hours-row-compact.is-closed {
    background: color-mix(in srgb, var(--warning) 10%, var(--bg));
}

.opening-hours-row-compact.is-empty {
    opacity: .92;
}

@media (max-width: 1100px) {
    .opening-hours-editor-row {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .opening-hours-editor-day {
        grid-column: 1 / -1;
    }
}

@media (max-width: 900px) {
    .planner-visit-row {
        grid-template-columns: 1fr;
    }

    .planner-actions-row {
        flex-direction: column;
        align-items: stretch;
    }

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

    .planner-toolbar-meta,
    .planner-confirm-summary-meta,
    .planner-selected-head-meta {
        justify-items: start;
        text-align: left;
    }

    .planner-selected-item {
        grid-template-columns: 1fr;
        align-items: start;
    }

    .planner-revenue-range-row {
        grid-template-columns: 1fr;
    }

    .planner-confirm-summary {
        grid-template-columns: 1fr;
    }

    .planner-confirm-summary-badges {
        justify-content: flex-start;
    }
}

@media (max-width: 700px) {
    .planner-weekdays-grid,
    .opening-hours-editor-row,
    .planner-confirm-time-group,
    .planner-filter-grid,
    .planner-revenue-range-row {
        grid-template-columns: 1fr;
    }

    .opening-hours-row-body,
    .opening-hours-windows {
        justify-content: flex-start;
    }
}

.account-opening-variable-list {
    display: flex;
    flex-wrap: wrap;
    gap: .45rem;
}

.account-opening-preview-card {
    display: grid;
    gap: .9rem;
}

.account-opening-preview-language-row {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: center;
    gap: .75rem;
}

.screen-feedback-modal {
    position: fixed;
    inset: 0;
    z-index: 1200;
    display: grid;
    place-items: center;
    padding: 1.25rem;
}

.screen-feedback-modal.is-hidden {
    display: none !important;
}

.screen-feedback-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(15, 23, 42, 0.45);
    backdrop-filter: blur(2px);
}

.screen-feedback-dialog {
    position: relative;
    z-index: 1;
    width: min(560px, 100%);
}

.screen-feedback-dialog .alert {
    margin: 0;
    box-shadow: 0 18px 50px rgba(15, 23, 42, 0.22);
}

.screen-feedback-dialog .alert p {
    margin: .5rem 0 0;
}

.account-opening-template-tabs {
    display: flex;
    flex-wrap: wrap;
    gap: .6rem;
}

.account-opening-template-tabs .button.is-active {
    background: linear-gradient(135deg, var(--primary) 0%, var(--primary-strong) 100%);
    border-color: transparent;
    color: #fff;
    box-shadow: 0 14px 26px rgba(41, 88, 255, 0.18);
}

.account-opening-template-panels {
    display: grid;
    gap: 1rem;
}

.account-opening-template-panel {
    display: grid;
    gap: 1rem;
    padding: 1rem;
    border: 1px solid var(--border);
    border-radius: 1.35rem;
    background: color-mix(in srgb, var(--bg-soft) 94%, var(--primary-soft));
}

.account-opening-template-panel[hidden] {
    display: none !important;
}

.account-opening-template-panel-head {
    display: flex;
    justify-content: space-between;
    gap: .75rem;
    align-items: center;
}

.account-opening-builder-translations {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: .85rem;
}

.account-opening-builder-language-toolbar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: .75rem;
    margin-bottom: 1rem;
}

.account-opening-builder-translation {
    display: grid;
    gap: .75rem;
    padding: .95rem;
    border: 1px solid var(--border);
    border-radius: 1.1rem;
    background: #fff;
}

.account-opening-builder-translation.is-extra-language {
    display: none;
}

.account-opening-builder-show-extra-languages .account-opening-builder-translation.is-extra-language {
    display: grid;
}

.account-opening-builder-preview-shell {
    border: 1px solid var(--border);
    border-radius: 1.4rem;
    overflow: hidden;
    background: #fff;
}

.account-opening-builder-workbench {
    display: grid;
    grid-template-columns: minmax(0, 1.9fr) minmax(300px, .9fr);
    gap: 1rem;
    align-items: start;
}

.account-opening-builder-main,
.account-opening-builder-side {
    display: grid;
    gap: 1rem;
}

.account-opening-builder-side-card {
    display: grid;
    gap: .9rem;
    padding: 1rem;
    border: 1px solid var(--border);
    border-radius: 1.2rem;
    background: color-mix(in srgb, var(--bg-soft) 94%, var(--primary-soft));
    position: sticky;
    top: 1rem;
}

.account-opening-builder-side-card h3 {
    margin: 0;
}

.account-opening-builder-preview-frame {
    width: 100%;
    min-height: 840px;
    border: 0;
    background: #fff;
}

.account-opening-preview-meta {
    font-size: .82rem;
    color: var(--muted);
}

.account-opening-email-frame {
    width: 100%;
    min-height: 420px;
    border: 1px solid var(--border);
    border-radius: 1.15rem;
    background: #fff;
}

.account-opening-builder-list,
.account-opening-builder-library,
.account-opening-builder-preview {
    display: grid;
    gap: .9rem;
}

.account-opening-builder-item,
.account-opening-library-item,
.account-opening-builder-preview-step,
.account-opening-builder-preview-block {
    border: 1px solid var(--border);
    border-radius: 1.2rem;
    background: color-mix(in srgb, var(--bg-soft) 92%, var(--primary-soft));
    padding: 1rem;
}

.account-opening-builder-item header,
.account-opening-library-item,
.account-opening-builder-preview-step {
    display: grid;
    gap: .35rem;
}

.account-opening-library-item {
    align-content: start;
}

.account-opening-builder-item.is-dragging {
    opacity: .55;
}

.account-opening-builder-static {
    padding: .85rem 0;
    align-self: end;
}

.account-opening-builder-preview {
    background: linear-gradient(180deg, color-mix(in srgb, var(--primary-soft) 26%, transparent), transparent 28%);
    border-radius: 1.4rem;
}

.account-opening-builder-preview h4 {
    margin: 0 0 .35rem;
}

.account-opening-builder-preview-block + .account-opening-builder-preview-block {
    margin-top: .7rem;
}

.account-opening-public-body {
    min-height: 100vh;
    background:
        radial-gradient(circle at top left, rgba(41, 88, 255, 0.14), transparent 28%),
        radial-gradient(circle at top right, rgba(122, 141, 255, 0.16), transparent 24%),
        linear-gradient(180deg, #eef3fb 0%, #f7f9fd 100%);
    color: #172033;
}

.account-opening-public-shell {
    width: min(1080px, calc(100% - 2rem));
    margin: 0 auto;
    padding: 2rem 0 3rem;
}

.account-opening-public-shell--narrow {
    width: min(760px, calc(100% - 2rem));
}

.account-opening-public-header,
.account-opening-final-card,
.account-opening-public-form {
    background: rgba(255, 255, 255, 0.92);
    backdrop-filter: blur(10px);
    border: 1px solid rgba(219, 228, 242, 0.9);
    box-shadow: 0 24px 56px rgba(15, 23, 42, 0.09);
    border-radius: 2rem;
}

.account-opening-public-header {
    display: flex;
    justify-content: space-between;
    gap: 1.25rem;
    padding: 1.5rem 1.6rem;
    margin-bottom: 1rem;
}

.account-opening-public-header p {
    max-width: 52rem;
}

.account-opening-public-meta {
    display: grid;
    gap: .65rem;
    min-width: 220px;
}

[hidden] {
    display: none !important;
}

.account-opening-language-switch {
    display: flex;
    flex-wrap: wrap;
    gap: .45rem;
}

.account-opening-language-select {
    min-width: 180px;
    width: 100%;
    background: #fff;
}

.account-opening-language-switch a,
.account-opening-stepper button {
    appearance: none;
    border: 1px solid var(--border);
    background: #fff;
    color: inherit;
    font: inherit;
    text-decoration: none;
    cursor: pointer;
    border-radius: 999px;
    padding: .58rem .9rem;
    transition: background var(--transition), border-color var(--transition), color var(--transition), transform var(--transition);
}

.account-opening-language-switch a.is-active,
.account-opening-stepper button.is-active {
    background: linear-gradient(135deg, var(--primary) 0%, var(--primary-strong) 100%);
    border-color: transparent;
    color: #fff;
    box-shadow: 0 14px 26px rgba(41, 88, 255, 0.18);
}

.account-opening-public-form {
    padding: 1.35rem;
    display: grid;
    gap: 1.1rem;
}

.account-opening-demo-banner {
    display: grid;
    gap: .35rem;
    padding: 1rem 1.15rem;
    margin-bottom: 1rem;
    background: rgba(255, 255, 255, 0.92);
    border: 1px solid rgba(219, 228, 242, 0.9);
    border-radius: 1.4rem;
    box-shadow: 0 18px 38px rgba(15, 23, 42, 0.07);
}

.account-opening-demo-banner p {
    margin: 0;
}

.account-opening-required-legend {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    font-size: .86rem;
    color: #5f6f89;
}

.required-star {
    color: var(--danger);
    font-weight: 700;
}

.account-opening-stepper {
    display: flex;
    flex-wrap: wrap;
    gap: .55rem;
}

.account-opening-step-panel {
    display: grid;
    gap: 1rem;
}

.account-opening-step-panel[hidden],
[data-identity-mode-panel][hidden],
[data-delivery-address-section][hidden] {
    display: none !important;
}

.account-opening-section {
    border: 1px solid rgba(220, 228, 241, 0.95);
    background: #fff;
    border-radius: 1.6rem;
    padding: 1.2rem;
    box-shadow: 0 12px 32px rgba(15, 23, 42, 0.04);
}

.account-opening-section > header {
    display: grid;
    gap: .35rem;
    margin-bottom: .95rem;
}

.account-opening-section > header h2 {
    font-size: 1.08rem;
}

.account-opening-section > header p {
    margin: 0;
    color: #5f6f89;
}

.account-opening-radio-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: .8rem;
}

.account-opening-choice,
.account-opening-certification {
    display: flex;
    gap: .75rem;
    align-items: flex-start;
    background: #fff;
    border: 1px solid var(--border);
    border-radius: 1.2rem;
    padding: .95rem 1rem;
}

.account-opening-choice input,
.account-opening-certification input {
    width: 1rem;
    height: 1rem;
    margin-top: .18rem;
    box-shadow: none;
}

.account-opening-inline-notice {
    margin-top: .55rem;
}

.account-opening-signature-block {
    display: grid;
    gap: .85rem;
    width: 100%;
    max-width: none;
}

.account-opening-signature-identity {
    align-items: start;
}

.account-opening-signature-hint {
    margin: 0;
}

.account-opening-signature-shell {
    position: relative;
    width: 100%;
    max-width: none;
    min-height: 220px;
    border: 2px dashed color-mix(in srgb, var(--primary) 18%, #c7d3e6);
    border-radius: 1.35rem;
    background: linear-gradient(180deg, #ffffff 0%, color-mix(in srgb, #fff 84%, var(--primary-soft)) 100%);
    overflow: hidden;
    box-sizing: border-box;
}

.account-opening-signature-canvas {
    display: block;
    width: 100%;
    max-width: none;
    height: clamp(220px, 28vw, 280px);
    cursor: crosshair;
    touch-action: none;
    box-sizing: border-box;
}

.account-opening-signature-placeholder {
    position: absolute;
    left: 1rem;
    right: 1rem;
    bottom: 1rem;
    padding-top: .95rem;
    border-top: 1px dashed #9aa8bf;
    color: #66758f;
    pointer-events: none;
    user-select: none;
}

.account-opening-signature-shell:not(.is-empty) .account-opening-signature-placeholder {
    display: none;
}

.account-opening-signature-toolbar {
    display: flex;
    flex-wrap: wrap;
    gap: .75rem;
}

.account-opening-signature-contractual {
    margin-top: .1rem;
}

.account-opening-contacts {
    display: grid;
    gap: .8rem;
}

.account-opening-contact-row {
    display: grid;
    grid-template-columns: minmax(0, 1.6fr) minmax(260px, .95fr) auto;
    gap: .85rem;
    align-items: start;
    padding: .95rem;
    border: 1px solid var(--border);
    border-radius: 1.25rem;
    background: color-mix(in srgb, #fff 94%, var(--primary-soft));
}

.account-opening-contact-main {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: .75rem;
}

.account-opening-contact-main label:first-child {
    grid-column: 1 / -1;
}

.account-opening-contact-flags {
    display: grid;
    gap: .55rem;
    align-content: start;
}

.account-opening-contact-flag {
    display: flex;
    align-items: flex-start;
    gap: .6rem;
    padding: .7rem .8rem;
    border: 1px solid var(--border);
    border-radius: 1rem;
    background: #fff;
}

.account-opening-contact-flag input[type="checkbox"] {
    margin-top: .15rem;
}

.account-opening-contact-row .actions {
    align-self: start;
}

.account-opening-contact-row.is-email-required [data-contact-email-label] span {
    font-weight: 700;
}

.account-opening-text-block {
    color: #344259;
    background: color-mix(in srgb, var(--primary-soft) 42%, transparent);
    border: 1px solid color-mix(in srgb, var(--primary) 12%, transparent);
    border-radius: 1.2rem;
    padding: 1rem 1.1rem;
}

.account-opening-error {
    color: var(--danger);
    font-size: .86rem;
    font-weight: 600;
    margin-top: .35rem;
}

.account-opening-step-actions {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: .75rem;
    margin-top: .2rem;
}

.account-opening-final-card {
    text-align: center;
    padding: 2rem;
    display: grid;
    gap: 1rem;
    justify-items: center;
}

@media (max-width: 980px) {
    .account-opening-builder-workbench {
        grid-template-columns: 1fr;
    }

    .account-opening-builder-side-card {
        position: static;
    }

    .account-opening-public-header {
        flex-direction: column;
    }

    .account-opening-contact-row {
        grid-template-columns: 1fr;
    }

    .account-opening-contact-main {
        grid-template-columns: 1fr 1fr;
    }

    .account-opening-contact-row > .actions {
        grid-column: 1 / -1;
    }
}

@media (max-width: 720px) {
    .account-opening-public-shell {
        width: calc(100% - 1rem);
        padding-top: 1rem;
    }

    .account-opening-public-header,
    .account-opening-public-form,
    .account-opening-final-card {
        border-radius: 1.4rem;
        padding: 1.1rem;
    }

    .account-opening-contact-row,
    .account-opening-radio-grid,
    .account-opening-contact-main {
        grid-template-columns: 1fr;
    }

    .account-opening-builder-language-toolbar {
        align-items: flex-start;
    }

    .account-opening-step-actions {
        justify-content: stretch;
    }

    .account-opening-step-actions .button {
        width: 100%;
    }
}

.clients-filter-group-field {
    max-width: 28rem;
}

.clients-filter-secondary-row label {
    max-width: none;
}

.client-geocode-manual-form[hidden] {
    display: none !important;
}

@media (max-width: 1100px) {
    .clients-filter-primary-row {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 760px) {
    .clients-filter-primary-row {
        grid-template-columns: 1fr;
    }

    .clients-filter-group-field {
        max-width: none;
    }
}


.password-field-wrap {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 0.6rem;
    align-items: center;
}

.password-toggle-button {
    white-space: nowrap;
}

.password-toggle-button.is-active {
    border-style: solid;
}

.password-toggle-button--icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.85rem;
    min-width: 2.85rem;
    padding-inline: 0.75rem;
}

.password-toggle-button__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.password-toggle-button__icon svg {
    width: 1rem;
    height: 1rem;
}

.password-toggle-button__icon--hide {
    display: none;
}

.password-toggle-button--icon.is-active .password-toggle-button__icon--show {
    display: none;
}

.password-toggle-button--icon.is-active .password-toggle-button__icon--hide {
    display: inline-flex;
}

.visually-hidden {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

.password-strength-indicator {
    display: grid;
    gap: 0.4rem;
    margin-top: 0.55rem;
}

.password-strength-meter {
    position: relative;
    width: 100%;
    height: 0.55rem;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.08);
    overflow: hidden;
}

.password-strength-meter span {
    display: block;
    height: 100%;
    width: 0;
    border-radius: inherit;
    background: linear-gradient(90deg, #ef4444 0%, #f59e0b 45%, #22c55e 100%);
    transition: width 0.2s ease;
}

.public-privacy-link {
    margin-top: 1rem;
    padding: 0.95rem 1.05rem;
    border-radius: 1.15rem;
    border: 1px solid color-mix(in srgb, var(--primary) 18%, transparent);
    background: color-mix(in srgb, var(--bg-soft) 90%, transparent);
    box-shadow: var(--shadow-sm);
}

.public-privacy-link__inner {
    display: flex;
    align-items: flex-start;
    gap: 0.8rem;
}

.public-privacy-link__icon {
    width: 2.3rem;
    height: 2.3rem;
    border-radius: 999px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: var(--primary-soft);
    color: var(--primary);
    flex: 0 0 auto;
}

.public-privacy-link__icon svg {
    width: 1.1rem;
    height: 1.1rem;
}

.public-privacy-link__content {
    min-width: 0;
}

.public-privacy-link__content p {
    margin: 0.25rem 0 0;
}

.public-privacy-link__content a {
    font-weight: 700;
}

.public-privacy-notice {
    margin-top: 1rem;
    padding: 1.1rem 1.2rem;
    border-radius: 1.2rem;
    border: 1px solid rgba(148, 163, 184, 0.24);
    background: rgba(15, 23, 42, 0.72);
    color: var(--text-color, #e5eefc);
    box-shadow: 0 16px 40px rgba(15, 23, 42, 0.18);
}

.public-privacy-notice h2,
.public-privacy-notice h3 {
    margin: 0;
}

.public-privacy-notice h2 {
    font-size: 1.1rem;
}

.public-privacy-notice h3 {
    font-size: 0.95rem;
}

.public-privacy-notice a {
    color: inherit;
}

.public-privacy-notice ul {
    margin: 0.4rem 0 0;
    padding-left: 1.15rem;
}

.public-privacy-notice p {
    margin: 0;
}

.public-privacy-notice__head {
    display: flex;
    justify-content: space-between;
    gap: 1rem;
    align-items: flex-start;
    margin-bottom: 0.7rem;
}

.public-privacy-notice__lead,
.public-privacy-notice__foot,
.public-privacy-notice__extra {
    margin-top: 0.75rem;
    line-height: 1.55;
}

.public-privacy-notice__grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.9rem 1.2rem;
}

.auth-container--wide {
    width: min(980px, 100%);
}

.public-privacy-page {
    display: grid;
    gap: 1rem;
}

.public-privacy-page .public-privacy-notice {
    margin-top: 0;
}

.account-opening-preview-banner {
    margin-bottom: 1rem;
    padding: 0.85rem 1rem;
    border-radius: 1rem;
    border: 1px dashed rgba(251, 191, 36, 0.45);
    background: rgba(251, 191, 36, 0.08);
}

.account-opening-preview-banner p {
    margin: 0.35rem 0 0;
}

.account-opening-history-feedback {
    margin-bottom: 1rem;
}

.copyable-inline-field {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 0.6rem;
    align-items: center;
}

.copyable-inline-field input {
    min-width: 0;
}

@media (max-width: 760px) {
    .password-field-wrap,
    .copyable-inline-field,
    .public-privacy-notice__head,
    .public-privacy-notice__grid {
        grid-template-columns: 1fr;
    }

    .public-privacy-link__inner {
        align-items: flex-start;
    }
}

@media (max-width: 980px) {
    .sidebar {
        position: fixed;
        inset: 0 auto 0 0;
        width: min(86vw, 320px);
        height: 100vh;
        height: 100dvh;
        max-height: 100vh;
        max-height: 100dvh;
        padding: max(.75rem, env(safe-area-inset-top)) .75rem max(.75rem, env(safe-area-inset-bottom));
        overflow: hidden;
        display: flex;
        z-index: 60;
    }

    .sidebar-inner {
        width: 100%;
        height: auto;
        min-height: 0;
        flex: 1 1 auto;
        overflow: hidden;
    }

    .sidebar-topbar,
    .user-panel,
    .sidebar-footer {
        flex: 0 0 auto;
    }

    .nav {
        flex: 1 1 auto;
        min-height: 0;
        overflow-y: auto;
        overflow-x: hidden;
        overscroll-behavior: contain;
        -webkit-overflow-scrolling: touch;
        padding-right: .35rem;
    }

    body.sidebar-collapsed .sidebar {
        width: min(86vw, 320px);
        transform: translateX(calc(-100% - 1rem));
    }

    body.sidebar-collapsed .sidebar-inner {
        height: auto;
        min-height: 0;
    }
}


.message-preview summary {
    cursor: pointer;
    color: var(--accent);
    font-weight: 700;
}

.message-preview-box {
    margin-top: .6rem;
    min-width: min(32rem, 75vw);
    max-width: 36rem;
    padding: .8rem;
    border: 1px solid var(--border);
    border-radius: 12px;
    background: #f8fafc;
    box-shadow: 0 10px 25px rgba(15, 23, 42, .08);
}

.message-preview-label {
    margin-top: .7rem;
}

.message-preview pre {
    margin: .35rem 0 0;
    white-space: pre-wrap;
    word-break: break-word;
    max-height: 18rem;
    overflow: auto;
    font-family: inherit;
    font-size: .88rem;
    line-height: 1.45;
}


.message-preview-box--modal {
    min-width: 0;
    max-width: none;
    width: 100%;
    box-shadow: none;
}


.appointment-customer-search {
    padding: .9rem;
    border: 1px solid var(--border);
    border-radius: 1rem;
    background: color-mix(in srgb, var(--bg-soft) 88%, #fff);
}

.appointment-customer-search-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: .55rem;
    align-items: center;
}

.appointment-customer-search-results {
    display: grid;
    gap: .45rem;
    margin-top: .65rem;
}

.appointment-customer-search-result,
.appointment-customer-search-empty {
    width: 100%;
    padding: .7rem .8rem;
    border: 1px solid var(--border);
    border-radius: .9rem;
    background: #fff;
    color: var(--text);
    text-align: left;
}

.appointment-customer-search-result {
    display: grid;
    gap: .18rem;
    cursor: pointer;
}

.appointment-customer-search-result:hover,
.appointment-customer-search-result:focus-visible {
    border-color: var(--primary);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--primary) 16%, transparent);
    outline: none;
}

@media (max-width: 720px) {
    .appointment-customer-search-row {
        grid-template-columns: 1fr;
    }
}