@font-face {
    font-family: "Anthropic Sans Text";
    src: url('../fonts/AnthropicSans-Text-Regular-Static.woff2') format('woff2'),
         url('../fonts/AnthropicSans-Text-Regular-Static.otf') format('opentype');
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: "Anthropic Sans Text";
    src: url('../fonts/AnthropicSans-Text-Medium-Static.woff2') format('woff2'),
         url('../fonts/AnthropicSans-Text-Medium-Static.otf') format('opentype');
    font-weight: 500;
    font-style: normal;
    font-display: swap;
}

:root {
    /* Tema claro — espelha app/globals.css de bi_DrogaPlan, com destaque vermelho da marca */
    --primary-50: #FDE3E2;
    --primary-100: #FBC7C6;
    --primary-500: #F13430;
    --primary-600: #D3120E;
    --accent: #639922;
    --dark: #0A0A0A;
    --surface: #FAFAFB;
    --border: #DADCE0;
    --white: #FFFFFF;
    --text: #111827;
    --muted: #52525B;
    --muted-2: #9CA3AF;
    --red: #E24B4A;
    --orange: #EF9F27;
    --blue: #378ADD;

    --surface-0: #FAFAFB;
    --surface-1: #FFFFFF;
    --surface-2: #F1F2F4;
    --text-primary: #111827;
    --text-secondary: #52525B;
    --text-muted: #9CA3AF;
    --text-accent: #F13430;
    --text-success: #639922;
    --text-danger: #E24B4A;
    --text-warning: #EF9F27;
    --color-blue: #378ADD;
    --color-teal: #1D9E75;
    --color-coral: #D85A30;
    --color-green: #639922;
    --border-strong: #B0B0B0;
    --radius: 8px;
    --radius-lg: 12px;
    --radius-xl: 16px;
    --bg-page: #EDEEF1;

    --primary-rgb: 241, 52, 48;
    --chart-grid: rgba(17, 24, 39, .06);
    --canvas-label-halo: rgba(255, 255, 255, .85);
    --shadow: 0 1px 2px rgb(15 23 42 / .05), 0 12px 28px -22px rgb(15 23 42 / .28);
    color-scheme: light;
}

html.dark {
    /* Tema escuro — wireframe original + destaque vermelho da marca */
    --primary-50: #4C0705;
    --primary-100: #390504;
    --primary-500: #F13430;
    --primary-600: #F67B78;
    --accent: #639922;
    --dark: #0A0A0A;
    --surface: #141414;
    --border: #2E2E2E;
    --white: #1E1E1E;
    --text: #F2F2F2;
    --muted: #A3A3A3;
    --muted-2: #6B6B6B;
    --red: #E24B4A;
    --orange: #EF9F27;
    --blue: #378ADD;

    --surface-0: #141414;
    --surface-1: #1E1E1E;
    --surface-2: #262626;
    --text-primary: #F2F2F2;
    --text-secondary: #A3A3A3;
    --text-muted: #6B6B6B;
    --text-accent: #F13430;
    --text-success: #639922;
    --text-danger: #E24B4A;
    --text-warning: #EF9F27;
    --color-blue: #378ADD;
    --color-teal: #1D9E75;
    --color-coral: #D85A30;
    --color-green: #639922;
    --border-strong: #424242;
    --radius: 8px;
    --radius-lg: 12px;
    --radius-xl: 16px;
    --bg-page: #0A0A0A;

    --primary-rgb: 241, 52, 48;
    --chart-grid: rgba(255, 255, 255, .06);
    --canvas-label-halo: rgba(10, 10, 10, .85);
    --shadow: 0 1px 2px rgb(0 0 0 / .35), 0 12px 28px -20px rgb(0 0 0 / .55);
    color-scheme: dark;
}

* {
    box-sizing: border-box;
}

html,
body {
    min-height: 100%;
    margin: 0;
    background: var(--surface);
}

body.amon-bi {
    min-height: 100vh;
    display: grid;
    grid-template-columns: 224px minmax(0, 1fr);
    color: var(--text);
    font-family: "Anthropic Sans Text", -apple-system, "Segoe UI", system-ui, sans-serif;
    font-size: 13px;
    -webkit-font-smoothing: antialiased;
}

button,
input,
select {
    font: inherit;
}

button {
    cursor: pointer;
}

@media (hover: hover) and (pointer: fine) {
    button:not(:disabled) {
        transition-duration: 150ms;
        transition-property: background-color, border-color, color, opacity, transform;
        transition-timing-function: ease-out;
    }
    button:not(:disabled):hover {
        transform: scale(1.035);
    }
    button:not(:disabled):active {
        transform: scale(.99);
    }
}

@media (prefers-reduced-motion: reduce) {
    button:not(:disabled),
    button:not(:disabled):hover,
    button:not(:disabled):active {
        transform: none;
        transition-duration: 0ms;
    }
}

a {
    color: inherit;
    text-decoration: none;
}

[hidden] {
    display: none !important;
}

.amon-sidebar {
    position: sticky;
    top: 0;
    height: 100vh;
    display: flex;
    flex-direction: column;
    border-right: 1px solid var(--border);
    background: var(--white);
}

.amon-brand {
    min-height: 58px;
    padding: 12px 14px;
    display: flex;
    align-items: center;
    gap: 10px;
    border-bottom: 1px solid var(--border);
}

.amon-brand img {
    width: 34px;
    height: 34px;
    border-radius: 8px;
    object-fit: cover;
    flex: 0 0 auto;
}

.amon-brand strong {
    display: block;
    color: var(--text);
    font-size: 13px;
    line-height: 1.05;
    letter-spacing: -.01em;
}

.amon-brand span {
    display: block;
    margin-top: 2px;
    color: var(--muted-2);
    font-size: 10.5px;
    font-weight: 500;
}

.amon-nav {
    flex: 1;
    padding: 12px 10px;
    overflow: auto;
}

.amon-nav a,
.amon-logout {
    min-height: 36px;
    margin-bottom: 3px;
    padding: 0 11px;
    display: flex;
    align-items: center;
    gap: 9px;
    border-radius: 8px;
    color: var(--text-secondary);
    font-size: 12px;
    font-weight: 500;
    transition: background-color .14s ease, color .14s ease;
}

.amon-nav a span,
.amon-logout span {
    width: 15px;
    display: inline-flex;
    justify-content: center;
    color: currentColor;
    opacity: .82;
}

.amon-nav .nav-icon {
    width: 18px;
    height: 18px;
    flex: 0 0 18px;
    color: currentColor;
    stroke: currentColor;
}

.amon-nav a.active .nav-icon {
    opacity: 1;
}

.amon-nav a.locked .nav-icon {
    opacity: .72;
}

.amon-nav a:hover {
    background: var(--surface-2);
    color: var(--text);
}

.amon-nav a.active {
    background: rgba(var(--primary-rgb), .12);
    color: var(--text-accent);
    font-weight: 500;
}

.amon-nav a.locked {
    opacity: .46;
}

.amon-sidebar-footer {
    padding: 10px;
    border-top: 1px solid var(--border);
}

.sidebar-sync-actions {
    display: flex;
    flex-direction: column;
}

.sidebar-sync-now {
    width: 100%;
    min-height: 42px;
    margin-bottom: 10px;
    padding: 8px 12px;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 10px;
    border: 1px solid rgba(var(--primary-rgb), .3);
    border-radius: 8px;
    background: rgba(var(--primary-rgb), .1);
    color: var(--text-accent);
    font: inherit;
    font-size: 11.5px;
    font-weight: 500;
    cursor: pointer;
    transition: background-color .18s ease, border-color .18s ease, opacity .18s ease;
}

.sidebar-sync-now:hover:not(:disabled) {
    background: rgba(var(--primary-rgb), .16);
    border-color: rgba(var(--primary-rgb), .45);
}

.sidebar-sync-now:focus-visible {
    outline: 3px solid rgba(var(--primary-rgb), .2);
    outline-offset: 2px;
}

.sidebar-sync-now:disabled {
    cursor: wait;
    opacity: .6;
}

.sidebar-sync-full {
    border-color: rgba(239, 159, 39, .32);
    background: rgba(239, 159, 39, .1);
    color: var(--text-warning);
}

.sidebar-sync-full:hover:not(:disabled) {
    background: rgba(239, 159, 39, .16);
    border-color: rgba(239, 159, 39, .45);
}

.sidebar-sync-icon {
    width: 26px;
    height: 26px;
    flex: 0 0 26px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 8px;
    background: rgba(var(--primary-rgb), .16);
}

.sidebar-sync-full .sidebar-sync-icon {
    background: rgba(239, 159, 39, .16);
}

.sidebar-sync-icon svg {
    width: 15px;
    height: 15px;
}

.sidebar-sync-now strong {
    letter-spacing: 0;
}

.sidebar-sync-now.is-loading .sidebar-sync-icon {
    animation: sidebar-sync-spin .85s linear infinite;
}

@keyframes sidebar-sync-spin {
    to { transform: rotate(360deg); }
}

.global-sync-toast {
    position: fixed;
    right: 20px;
    bottom: 20px;
    z-index: 9999;
    max-width: min(420px, calc(100vw - 40px));
    padding: 12px 16px;
    border-radius: 10px;
    background: var(--surface-2);
    color: #fff;
    font-size: 12px;
    border: 1px solid var(--border);
    box-shadow: 0 16px 38px rgba(0, 0, 0, .45);
    opacity: 0;
    pointer-events: none;
    transform: translateY(8px);
    transition: opacity .2s ease, transform .2s ease;
}

.global-sync-toast.is-visible {
    opacity: 1;
    transform: translateY(0);
}

.global-sync-toast.is-error {
    background: var(--text-danger);
}

body.sync-progress-open {
    overflow: hidden;
}

.sync-progress-modal {
    position: fixed;
    z-index: 10000;
    inset: 0;
    padding: 20px;
    display: grid;
    place-items: center;
    background: rgba(0, 0, 0, .65);
    backdrop-filter: blur(7px);
}

.sync-progress-card {
    width: min(740px, 100%);
    overflow: hidden;
    border: 1px solid var(--border);
    border-radius: 16px;
    background: var(--white);
    box-shadow: 0 34px 90px -28px rgba(0, 0, 0, .8);
}

.sync-pin-modal {
    position: fixed;
    z-index: 10001;
    inset: 0;
    padding: 20px;
    display: grid;
    place-items: center;
    background: rgba(0, 0, 0, .65);
    backdrop-filter: blur(7px);
}

.sync-pin-card {
    width: min(340px, 100%);
    padding: 22px;
    border: 1px solid var(--border);
    border-radius: 16px;
    background: var(--white);
    box-shadow: 0 34px 90px -28px rgba(0, 0, 0, .8);
    text-align: center;
}

.sync-pin-card h2 {
    margin: 0 0 6px;
    font-size: 16px;
    color: var(--text);
}

.sync-pin-card p {
    margin: 0 0 16px;
    color: var(--muted);
    font-size: 12px;
    line-height: 1.4;
}

.sync-pin-card input {
    width: 100%;
    height: 44px;
    padding: 0 14px;
    border: 1px solid var(--border);
    border-radius: 10px;
    background: var(--surface-1);
    color: var(--text);
    font: inherit;
    font-size: 18px;
    text-align: center;
    letter-spacing: 4px;
    outline: 0;
}

.sync-pin-card input:focus {
    border-color: var(--primary-500);
    box-shadow: 0 0 0 3px rgba(var(--primary-rgb), .16);
}

.sync-pin-actions {
    display: flex;
    gap: 10px;
    margin-top: 16px;
}

.sync-pin-actions .toolbar-button {
    flex: 1;
}

.sync-progress-header {
    padding: 20px 22px;
    display: grid;
    grid-template-columns: 46px minmax(0, 1fr) auto;
    align-items: center;
    gap: 13px;
    border-bottom: 1px solid var(--border);
    background: linear-gradient(135deg, var(--surface-1) 20%, var(--surface-2) 100%);
}

.sync-progress-mark {
    width: 46px;
    height: 46px;
    display: grid;
    place-items: center;
    border-radius: 12px;
    background: var(--primary-500);
    color: #fff;
    box-shadow: 0 10px 25px rgba(var(--primary-rgb), .24);
}

.sync-progress-mark svg {
    width: 23px;
    height: 23px;
    animation: sync-progress-spin 1.1s linear infinite;
}

.sync-progress-header span {
    display: block;
    margin-bottom: 3px;
    color: var(--primary-600);
    font-size: 9px;
    font-weight: 500;
    letter-spacing: .09em;
}

.sync-progress-header h2 {
    margin: 0;
    color: var(--text);
    font-size: 17px;
    letter-spacing: -.015em;
}

.sync-progress-header p {
    margin: 3px 0 0;
    color: var(--muted);
    font-size: 10.5px;
}

.sync-progress-time {
    min-width: 58px;
    padding: 7px 9px;
    border: 1px solid rgba(123, 194, 74, .35);
    border-radius: 8px;
    background: var(--surface-2);
    color: var(--primary-600);
    font-size: 12px;
    text-align: center;
}

.sync-progress-body {
    padding: 20px 22px 18px;
}

.sync-progress-current {
    display: grid;
    grid-template-columns: 12px minmax(0, 1fr) auto;
    align-items: center;
    gap: 11px;
}

.sync-progress-pulse {
    width: 10px;
    height: 10px;
    border-radius: 999px;
    background: var(--primary-500);
    box-shadow: 0 0 0 0 rgba(var(--primary-rgb), .35);
    animation: sync-progress-pulse 1.5s ease-out infinite;
}

.sync-progress-current small,
.sync-progress-current strong {
    display: block;
}

.sync-progress-current small {
    margin-bottom: 3px;
    color: var(--primary-600);
    font-size: 8.5px;
    font-weight: 500;
    letter-spacing: .07em;
}

.sync-progress-current strong {
    overflow-wrap: anywhere;
    color: var(--text);
    font-size: 12px;
    line-height: 1.35;
}

.sync-progress-current > b {
    color: var(--primary-600);
    font-size: 13px;
}

.sync-progress-track {
    height: 7px;
    margin: 14px 0 18px;
    overflow: hidden;
    border-radius: 999px;
    background: var(--surface-2);
}

.sync-progress-track i {
    display: block;
    width: 4%;
    height: 100%;
    border-radius: inherit;
    background: linear-gradient(90deg, var(--primary-500), var(--accent));
    box-shadow: 0 0 14px rgba(var(--primary-rgb), .35);
    transition: width .45s ease;
}

.sync-progress-steps {
    margin: 0;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 7px;
    list-style: none;
}

.sync-progress-steps li {
    min-width: 0;
    min-height: 112px;
    padding: 11px 10px;
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: 24px auto;
    align-items: start;
    align-content: start;
    gap: 9px;
    border: 1px solid var(--border);
    border-radius: 12px;
    background: var(--surface);
    transition: border-color .2s ease, background-color .2s ease, transform .2s ease;
}

.sync-progress-steps li > i {
    width: 24px;
    height: 24px;
    display: grid;
    place-items: center;
    border-radius: 8px;
    background: var(--surface-2);
    color: var(--muted);
    font-size: 9px;
    font-style: normal;
    font-weight: 500;
}

.sync-progress-steps li > div {
    min-width: 0;
    width: 100%;
}

.sync-progress-steps strong,
.sync-progress-steps span {
    display: block;
}

.sync-progress-steps strong {
    overflow-wrap: anywhere;
    word-break: normal;
    color: var(--text);
    font-size: 10px;
    line-height: 1.3;
}

.sync-progress-steps span {
    margin-top: 3px;
    overflow-wrap: anywhere;
    color: var(--muted);
    font-size: 8.5px;
    line-height: 1.35;
}

.sync-progress-steps li.is-active {
    border-color: rgba(var(--primary-rgb), .35);
    background: var(--primary-50);
    transform: translateY(-1px);
}

.sync-progress-steps li.is-active > i,
.sync-progress-steps li.is-done > i {
    background: var(--primary-500);
    color: #fff;
}

.sync-progress-steps li.is-done > i::before {
    content: '✓';
}

.sync-progress-steps li.is-done > i {
    font-size: 0;
}

.sync-progress-steps li.is-done > i::before {
    font-size: 11px;
}

.sync-progress-note {
    margin: 16px 0 0;
    padding: 10px 12px;
    border-radius: 8px;
    background: var(--surface-2);
    color: var(--muted);
    font-size: 9.5px;
    line-height: 1.4;
    text-align: center;
}

.sync-progress-footer {
    min-height: 50px;
    padding: 11px 22px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    border-top: 1px solid var(--border);
    background: var(--surface-2);
}

.sync-progress-footer span {
    color: var(--muted);
    font-size: 9.5px;
}

.sync-progress-modal.is-complete .sync-progress-mark svg,
.sync-progress-modal.is-error .sync-progress-mark svg {
    animation: none;
}

.sync-progress-modal.is-complete .sync-progress-pulse {
    animation: none;
    background: var(--primary-500);
}

.sync-progress-modal.is-error .sync-progress-mark,
.sync-progress-modal.is-error .sync-progress-pulse,
.sync-progress-steps li.is-error > i {
    background: var(--red);
}

.sync-progress-modal.is-error .sync-progress-current small,
.sync-progress-modal.is-error .sync-progress-current > b {
    color: var(--red);
}

@keyframes sync-progress-spin {
    to { transform: rotate(360deg); }
}

@keyframes sync-progress-pulse {
    70% { box-shadow: 0 0 0 8px rgba(var(--primary-rgb), 0); }
    100% { box-shadow: 0 0 0 0 rgba(var(--primary-rgb), 0); }
}

@media (max-width: 680px) {
    .sync-progress-modal { padding: 10px; }
    .sync-progress-header { padding: 17px; grid-template-columns: 42px minmax(0, 1fr); }
    .sync-progress-mark { width: 42px; height: 42px; }
    .sync-progress-time { grid-column: 1 / -1; justify-self: start; }
    .sync-progress-body { padding: 17px; }
    .sync-progress-steps { grid-template-columns: 1fr; }
    .sync-progress-steps li {
        min-height: 0;
        grid-template-columns: 24px minmax(0, 1fr);
        grid-template-rows: auto;
        align-items: center;
    }
    .sync-progress-footer { padding: 11px 17px; }
}

.amon-sync {
    position: relative;
    margin-bottom: 8px;
    padding: 12px 34px 12px 12px;
    border: 1px solid var(--border);
    border-radius: 12px;
    background: var(--white);
}

.amon-sync i {
    position: absolute;
    top: 14px;
    right: 14px;
    width: 8px;
    height: 8px;
    border-radius: 999px;
    background: var(--text-success);
    box-shadow: 0 0 0 5px rgba(34, 197, 94, .14);
}

.amon-sync strong {
    display: block;
    color: var(--text);
    font-size: 11.5px;
    line-height: 1.25;
}

.amon-sync span {
    display: block;
    margin-top: 6px;
    color: var(--muted);
    font-size: 11px;
}

.amon-logout {
    border: 1px solid rgba(226, 75, 74, .28);
    background: rgba(226, 75, 74, .08);
    color: var(--text-danger);
}

.amon-logout:hover {
    border-color: rgba(226, 75, 74, .42);
    background: rgba(226, 75, 74, .14);
    color: var(--text-danger);
}

.amon-main {
    min-width: 0;
    padding: 22px 24px 32px;
}

.amon-topbar {
    min-height: 58px;
    margin-bottom: 18px;
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 18px;
}

.amon-title h1 {
    margin: 0;
    color: var(--text);
    font-size: 24px;
    line-height: 1.15;
    letter-spacing: -.025em;
}

.amon-title p {
    margin: 4px 0 0;
    color: var(--muted);
    font-size: 13px;
    font-weight: 500;
}

.amon-userbox {
    display: flex;
    align-items: center;
    gap: 10px;
}

.amon-theme-toggle {
    width: 32px;
    height: 32px;
    display: grid;
    place-items: center;
    border: 1px solid var(--border);
    border-radius: 999px;
    background: var(--surface-1);
    color: var(--text-secondary);
    cursor: pointer;
    transition: background-color .14s ease, color .14s ease;
}

.amon-theme-toggle:hover {
    background: var(--surface-2);
    color: var(--text);
}

.theme-toggle-icon-sun {
    display: none;
}

.theme-toggle-icon-moon {
    display: block;
}

html.dark .theme-toggle-icon-sun {
    display: block;
}

html.dark .theme-toggle-icon-moon {
    display: none;
}

.amon-filterbar {
    margin-bottom: 14px;
    display: grid;
    grid-template-columns: minmax(260px, 1fr) minmax(160px, .35fr) minmax(160px, .35fr);
    gap: 10px;
}

.toolbar-datefilter,
.toolbar-multifilter {
    position: relative;
}

.toolbar-chip {
    min-height: 48px;
    width: 100%;
    padding: 8px 14px;
    display: flex;
    align-items: center;
    gap: 10px;
    border: 1px solid var(--border);
    border-radius: 8px;
    background: var(--white);
    color: var(--text);
    text-align: left;
    transition: border-color .14s ease, box-shadow .14s ease;
}

.toolbar-chip:hover,
.toolbar-chip.is-active {
    border-color: var(--primary-500);
    box-shadow: 0 0 0 3px rgba(var(--primary-rgb), .10);
}

.toolbar-label {
    color: var(--muted);
    font-size: 11px;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: .04em;
}

.toolbar-chip strong {
    overflow: hidden;
    color: var(--text);
    font-size: 13px;
    font-weight: 500;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.period-menu,
.toolbar-menu {
    position: absolute;
    z-index: 40;
    top: calc(100% + 8px);
    left: 0;
    min-width: min(360px, calc(100vw - 38px));
    padding: 12px;
    border: 1px solid var(--border);
    border-radius: 12px;
    background: var(--white);
    box-shadow: 0 20px 50px -22px rgba(15, 23, 42, .35);
}

.period-menu {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
}

.period-menu label,
.filter-grid label {
    display: grid;
    gap: 5px;
}

.period-menu label span,
.filter-grid label span {
    color: var(--muted);
    font-size: 11px;
    font-weight: 500;
}

.period-menu input,
.toolbar-menu input,
.filter-grid input,
.filter-grid select {
    width: 100%;
    min-height: 38px;
    padding: 0 10px;
    border: 1px solid var(--border);
    border-radius: 8px;
    background: var(--white);
    color: var(--text);
    outline: none;
}

.period-menu input:focus,
.toolbar-menu input:focus,
.filter-grid input:focus,
.filter-grid select:focus {
    border-color: var(--primary-500);
    box-shadow: 0 0 0 3px rgba(var(--primary-rgb), .12);
}

.period-menu-actions,
.toolbar-menu-actions,
.filter-actions {
    display: flex;
    gap: 8px;
}

.period-menu-actions {
    grid-column: 1 / -1;
}

.toolbar-button,
.toolbar-menu-head button {
    min-height: 36px;
    padding: 0 13px;
    border: 1px solid var(--border);
    border-radius: 8px;
    background: var(--white);
    color: var(--text-secondary);
    font-size: 12px;
    font-weight: 500;
}

.toolbar-button:hover,
.toolbar-menu-head button:hover {
    background: var(--surface-2);
}

.toolbar-button.primary {
    border-color: var(--primary-500);
    background: var(--primary-500);
    color: #fff;
}

.toolbar-button.primary:hover {
    background: var(--primary-600);
}

.toolbar-menu-head {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 8px;
    margin-bottom: 10px;
}

.toolbar-menu-options {
    max-height: 250px;
    overflow: auto;
    display: grid;
    gap: 3px;
}

.toolbar-option {
    min-height: 34px;
    padding: 7px 8px;
    display: flex;
    align-items: center;
    gap: 8px;
    border-radius: 8px;
    color: var(--text-secondary);
    font-size: 12px;
    font-weight: 500;
}

.toolbar-option:hover {
    background: var(--surface-2);
}

.toolbar-option.is-filtered-out {
    display: none;
}

.toolbar-option input {
    width: 14px;
    height: 14px;
    accent-color: var(--primary-500);
}

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

.period-preset {
    min-height: 36px;
    padding: 0 14px;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    background: var(--white);
    color: var(--text-secondary);
    font-size: 12px;
    font-weight: 500;
    transition: background-color .14s ease, color .14s ease, border-color .14s ease;
}

.period-preset:hover {
    background: var(--surface-2);
    color: var(--text);
}

.period-preset.active {
    border-color: rgba(var(--primary-rgb), .4);
    background: rgba(var(--primary-rgb), .12);
    color: var(--text-accent);
}

.ios-toggle {
    margin-left: auto;
    min-height: 36px;
    padding: 0 12px;
    display: inline-flex;
    align-items: center;
    gap: 9px;
    border: 1px solid var(--border);
    border-radius: 999px;
    background: var(--white);
    color: var(--text-secondary);
    font-size: 12px;
    font-weight: 500;
}

.ios-toggle input {
    position: absolute;
    opacity: 0;
}

.ios-toggle-track {
    width: 38px;
    height: 22px;
    padding: 3px;
    display: inline-flex;
    align-items: center;
    border-radius: 999px;
    background: var(--surface-2);
    transition: background .15s ease;
}

.ios-toggle-thumb {
    width: 16px;
    height: 16px;
    border-radius: 999px;
    background: var(--surface-1);
    box-shadow: 0 1px 2px rgba(0,0,0,.16);
    transition: transform .15s ease;
}

.ios-toggle input:checked + .ios-toggle-track {
    background: var(--primary-500);
}

.ios-toggle input:checked + .ios-toggle-track .ios-toggle-thumb {
    transform: translateX(16px);
}

.filter-drawer {
    margin-bottom: 14px;
    padding: 16px;
    border: 1px solid var(--border);
    border-radius: 12px;
    background: var(--white);
}

.filter-drawer-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 12px;
}

.filter-drawer h2 {
    margin: 0;
    font-size: 14px;
}

.filter-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 10px;
    align-items: end;
}

.amon-kpi-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 12px;
}

.amon-stat {
    min-height: 104px;
    padding: 15px;
    display: flex;
    align-items: flex-start;
    gap: 12px;
    border: 1px solid var(--border);
    border-radius: 12px;
    background: var(--white);
    transition: border-color .14s ease;
}

.amon-stat:hover,
.alert-card:hover,
.amon-card:hover {
    border-color: var(--border-strong, var(--border));
}

.amon-stat-icon {
    width: 38px;
    height: 38px;
    display: grid;
    place-items: center;
    flex: 0 0 auto;
    border-radius: 10px;
    background: var(--primary-500);
    color: #fff;
    font-weight: 500;
}

.amon-stat-icon.muted {
    background: var(--surface-2);
}

.amon-stat-icon.blue {
    background: var(--blue);
}

.amon-stat-icon.lime {
    background: var(--accent);
}

.amon-stat-icon.slate {
    background: var(--surface-2);
}

.amon-stat span {
    display: block;
    color: var(--muted);
    font-size: 12px;
    font-weight: 500;
}

.amon-stat strong {
    display: block;
    margin: 8px 0 8px;
    color: var(--text);
    font-size: clamp(22px, 2vw, 30px);
    line-height: 1;
    letter-spacing: -.03em;
}

.pill {
    display: inline-flex;
    max-width: 100%;
    padding: 3px 8px;
    border-radius: 999px;
    font-size: 11px;
    font-weight: 500;
    line-height: 1.25;
}

.pill.positive {
    background: rgba(123, 194, 74, .16);
    color: var(--text-success);
}

.pill.negative {
    background: rgba(226, 75, 74, .16);
    color: var(--text-danger);
}

.pill.warning {
    background: rgba(239, 159, 39, .16);
    color: var(--text-warning);
}

.hide-gross-discount .gross-discount-kpi {
    display: none;
}

.amon-card {
    margin-top: 14px;
    padding: 16px;
    border: 1px solid var(--border);
    border-radius: 12px;
    background: var(--white);
    transition: border-color .14s ease;
}

.amon-section-head {
    margin-bottom: 14px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}

.amon-section-head h2 {
    margin: 0;
    color: var(--text);
    font-size: 15px;
    font-weight: 500;
}

.amon-section-head p {
    margin: 3px 0 0;
    color: var(--muted);
    font-size: 12px;
}

.alert-row {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 10px;
}

.alert-card {
    min-height: 116px;
    padding: 13px;
    display: grid;
    grid-template-columns: 36px 1fr;
    grid-template-areas:
        "icon label"
        "icon title"
        "icon value"
        "icon yoy";
    gap: 3px 10px;
    border: 1px solid var(--border);
    border-radius: 12px;
    background: var(--surface-1);
    color: var(--text);
    text-align: left;
    transition: transform .14s ease, box-shadow .14s ease, border-color .14s ease;
}

.alert-card i {
    grid-area: icon;
    width: 36px;
    height: 36px;
    display: grid;
    place-items: center;
    border-radius: 10px;
    background: var(--primary-50);
    color: var(--primary-600);
    font-style: normal;
    font-weight: 500;
}

.alert-card small {
    grid-area: label;
    color: var(--muted);
    font-size: 10px;
    font-weight: 500;
}

.alert-card strong {
    grid-area: title;
    color: var(--text);
    font-size: 13px;
}

.alert-card span {
    grid-area: value;
    color: var(--primary-600);
    font-size: 12px;
    font-weight: 500;
    line-height: 1.35;
}

.alert-card small.alert-yoy {
    grid-area: yoy;
    color: var(--muted);
    font-size: 10px;
    font-weight: 500;
    line-height: 1.3;
}

.alert-card.danger i {
    background: rgba(226, 75, 74, .16);
    color: var(--red);
}

.alert-card.danger span {
    color: var(--red);
}

.alert-card.warning i {
    background: rgba(239, 159, 39, .16);
    color: var(--text-warning);
}

.alert-card.warning span {
    color: var(--text-warning);
}

.amon-dashboard-grid {
    display: grid;
    grid-template-columns: minmax(0, 1.35fr) minmax(310px, .65fr);
    gap: 14px;
}

.amon-chart-card {
    min-height: 330px;
}

.amon-chart-card canvas {
    width: 100% !important;
    height: 260px !important;
}

.amon-mix-card {
    min-height: 330px;
}

.mix-card {
    display: grid;
    grid-template-columns: minmax(150px, 190px) 1fr;
    gap: 16px;
    align-items: center;
}

.mix-chart-wrap {
    position: relative;
    width: min(190px, 100%);
    aspect-ratio: 1;
}

.mix-total {
    position: absolute;
    inset: 50% auto auto 50%;
    transform: translate(-50%, -50%);
    text-align: center;
}

.mix-total strong {
    display: block;
    color: var(--text);
    font-size: 16px;
}

.mix-total span {
    color: var(--muted);
    font-size: 10px;
    font-weight: 500;
}

.mix-legend {
    display: grid;
    gap: 8px;
}

.mix-legend div {
    display: grid;
    grid-template-columns: 9px 1fr auto;
    gap: 8px;
    align-items: center;
    color: var(--muted);
    font-size: 12px;
    font-weight: 500;
}

.mix-legend strong {
    color: var(--text);
}

.dot {
    width: 8px;
    height: 8px;
    border-radius: 999px;
    background: var(--muted-2);
}

.amon-ranking-card {
    grid-column: 1 / -1;
}

.amon-table-wrap {
    overflow-x: auto;
}

.executive-table {
    width: 100%;
    border-collapse: collapse;
}

.executive-table th,
.executive-table td {
    padding: 10px 9px;
    border-bottom: 1px solid var(--border);
    color: var(--text-secondary);
    text-align: left;
    font-size: 12px;
}

.executive-table th {
    color: var(--muted);
    font-size: 11px;
    font-weight: 500;
}

.executive-table tr:hover td {
    background: var(--surface-2);
}

.rank-sort {
    padding: 0;
    display: inline-flex;
    align-items: center;
    gap: 5px;
    border: 0;
    background: none;
    color: inherit;
    font: inherit;
    font-size: 11px;
    font-weight: 500;
    cursor: pointer;
}

.rank-sort:hover {
    color: var(--text);
}

.rank-sort.is-active {
    color: var(--text-accent);
}

.rank-sort-icon {
    font-size: 9px;
}

.metric {
    display: inline-flex;
    padding: 3px 8px;
    border-radius: 999px;
    font-size: 11px;
    font-weight: 500;
}

.metric.up {
    background: rgba(123, 194, 74, .16);
    color: var(--text-success);
}

.metric.down {
    background: rgba(226, 75, 74, .16);
    color: var(--text-danger);
}

.metric.warm {
    background: rgba(239, 159, 39, .16);
    color: var(--text-warning);
}

.sunday-modal {
    position: fixed;
    inset: 0;
    z-index: 100;
    display: grid;
    place-items: center;
    padding: 24px;
    background: rgba(15, 23, 42, .42);
}

.sunday-card {
    width: min(420px, 100%);
    padding: 24px;
    border: 1px solid var(--border);
    border-radius: 16px;
    background: var(--white);
    text-align: center;
    box-shadow: 0 24px 64px -30px rgba(15, 23, 42, .42);
}

.sunday-card strong {
    display: block;
    margin-bottom: 8px;
    color: var(--text);
    font-size: 20px;
}

.sunday-card p {
    margin: 0 0 16px;
    color: var(--muted);
}

@media (max-width: 1180px) {
    body.amon-bi {
        grid-template-columns: 1fr;
    }

    .amon-sidebar {
        position: relative;
        height: auto;
    }

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

    .amon-sidebar-footer {
        display: grid;
        grid-template-columns: 1fr auto;
        gap: 10px;
        align-items: center;
    }

    .amon-kpi-grid,
    .alert-row,
    .amon-dashboard-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .amon-ranking-card {
        grid-column: 1 / -1;
    }
}

@media (max-width: 760px) {
    .amon-main {
        padding: 16px;
    }

    .amon-topbar,
    .amon-preset-row {
        align-items: stretch;
        flex-direction: column;
    }

    .amon-userbox {
        align-self: flex-start;
    }

    .amon-filterbar,
    .amon-kpi-grid,
    .alert-row,
    .amon-dashboard-grid,
    .filter-grid,
    .period-menu,
    .mix-card,
    .amon-sidebar-footer {
        grid-template-columns: 1fr;
    }

    .ios-toggle {
        margin-left: 0;
        justify-content: flex-start;
    }
}

/* V3 shared page extensions */
.amon-kpi-grid.compact {
    grid-template-columns: repeat(4, minmax(0, 1fr));
}

.amon-kpi-grid.compact.commercial-kpis {
    grid-template-columns: repeat(5, minmax(0, 1fr));
}

.commercial-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px;
}

.commercial-card {
    min-height: 360px;
}

.commercial-card.wide {
    grid-column: 1 / -1;
}

.commercial-card canvas {
    width: 100% !important;
    height: 270px !important;
}

.payment-table-wrap {
    max-height: 190px;
    margin-top: 8px;
}

.compact-table td,
.compact-table th {
    padding: 8px 7px;
    font-size: 11px;
}

.compact-table td strong,
.compact-table td small {
    display: block;
}

.compact-table td small {
    margin-top: 2px;
    color: var(--muted);
    font-size: 10px;
}

.commercial-table th,
.commercial-table td {
    white-space: nowrap;
}

.commercial-column-filter-row th {
    padding-top: 0;
    background: var(--surface-1);
}

.commercial-column-filter-row input {
    width: 100%;
    min-width: 82px;
    height: 30px;
    padding: 0 8px;
    border: 1px solid var(--border);
    border-radius: 8px;
    background: var(--surface-1);
    color: var(--text);
    font: inherit;
    font-size: 11px;
    font-weight: 500;
}

.commercial-column-filter-row input:focus {
    outline: none;
    border-color: var(--primary-500);
    box-shadow: 0 0 0 3px rgba(var(--primary-rgb), .12);
}

.commercial-column-filter-row input::placeholder {
    color: var(--muted);
    font-weight: 500;
}

.empty-state {
    min-height: 220px;
    display: grid;
    place-items: center;
    padding: 24px;
    border: 1px dashed var(--border);
    border-radius: 12px;
    color: var(--muted);
    text-align: center;
    font-weight: 500;
    background: var(--surface-2);
}

.login-body {
    min-height: 100vh;
    margin: 0;
    display: grid;
    place-items: center;
    padding: 24px;
    background: var(--bg-page);
    color: var(--text);
    font-family: "Anthropic Sans Text", -apple-system, "Segoe UI", system-ui, sans-serif;
}

.login-theme-toggle {
    position: fixed;
    top: 20px;
    right: 20px;
}

.login-shell {
    width: min(380px, 100%);
    padding: 2rem;
    text-align: center;
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    background: var(--surface-1);
}

.login-brand {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    margin-bottom: 1.75rem;
}

.login-logo {
    width: 44px;
    height: 44px;
    display: block;
    object-fit: cover;
    border-radius: var(--radius);
}

.login-brand-name {
    font-size: 14px;
    font-weight: 500;
    color: var(--text-secondary);
}

.login-shell h1 {
    margin: 0 0 4px;
    color: var(--text);
    font-size: 18px;
    font-weight: 500;
    line-height: 1.2;
}

.login-shell .subtitle {
    margin: 0 0 1.75rem;
    color: var(--text-muted);
    font-size: 13px;
}

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

.login-form label {
    display: grid;
    gap: 6px;
    text-align: left;
}

.login-form label span {
    color: var(--text-secondary);
    font-size: 12px;
}

.login-form input {
    width: 100%;
    min-height: 40px;
    padding: 10px 12px;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    background: var(--surface-2);
    color: var(--text);
    font-size: 13px;
    outline: none;
    transition: border-color .14s ease, box-shadow .14s ease;
}

.login-form input:focus {
    border-color: var(--text-accent);
    box-shadow: 0 0 0 3px rgba(var(--primary-rgb), .16);
}

.login-error {
    margin: 0;
    padding: 10px 12px;
    border-radius: var(--radius);
    background: rgba(var(--primary-rgb), .12);
    color: var(--text-danger);
    font-size: 12px;
    font-weight: 500;
    text-align: left;
}

.login-form button {
    min-height: 44px;
    border: 0;
    border-radius: var(--radius);
    background: var(--primary-500);
    color: #fff;
    font-size: 13px;
    font-weight: 500;
    transition: background-color .14s ease;
}

.login-form button:hover {
    background: var(--primary-600);
}

.filters,
.panel,
.kpi {
    border: 1px solid var(--border);
    border-radius: 12px;
    background: var(--white);
}

.filters {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px;
    margin-bottom: 14px;
    padding: 14px;
}

.dataset-pill {
    min-height: 36px;
    padding: 0 12px;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    border: 1px solid var(--border);
    border-radius: 999px;
    background: var(--surface-1);
    color: var(--text);
    font-weight: 500;
}

.field-group {
    display: grid;
    gap: 6px;
}

.field-group > span {
    color: var(--muted);
    font-size: 11px;
    font-weight: 500;
    text-transform: uppercase;
}

.filters > button {
    min-height: 38px;
    padding: 0 16px;
    border: 0;
    border-radius: 10px;
    background: var(--primary-500);
    color: #fff;
    font-weight: 500;
}

.multi-filter {
    position: relative;
}

.multi-trigger {
    min-height: 38px;
    min-width: 180px;
    padding: 0 12px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    background: var(--white);
    color: var(--text);
    font-size: 12px;
    font-weight: 500;
    transition: border-color .14s ease, box-shadow .14s ease;
}

.multi-trigger:hover,
.multi-filter.open .multi-trigger {
    border-color: var(--primary-500);
    box-shadow: 0 0 0 3px rgba(var(--primary-rgb), .10);
}

.multi-arrow {
    color: var(--text-muted);
    font-size: 10px;
    transition: transform .14s ease;
}

.multi-filter.open .multi-arrow {
    transform: rotate(180deg);
}

.multi-menu {
    position: absolute;
    z-index: 40;
    top: calc(100% + 8px);
    left: 0;
    display: none;
    min-width: min(280px, calc(100vw - 38px));
    padding: 12px;
    border: 1px solid var(--border);
    border-radius: 12px;
    background: var(--white);
    box-shadow: 0 20px 50px -22px rgba(0, 0, 0, .45);
}

.multi-filter.open .multi-menu {
    display: block;
}

.multi-search {
    width: 100%;
    min-height: 36px;
    padding: 0 10px;
    margin-bottom: 8px;
    border: 1px solid var(--border);
    border-radius: 8px;
    background: var(--white);
    color: var(--text);
    outline: none;
}

.multi-search:focus {
    border-color: var(--primary-500);
    box-shadow: 0 0 0 3px rgba(var(--primary-rgb), .12);
}

.multi-actions {
    margin-bottom: 8px;
}

.multi-actions button {
    min-height: 32px;
    padding: 0 12px;
    border: 1px solid var(--border);
    border-radius: 8px;
    background: var(--white);
    color: var(--text-secondary);
    font-size: 12px;
    font-weight: 500;
}

.multi-actions button:hover {
    background: var(--surface-2);
}

.multi-options {
    max-height: 220px;
    overflow: auto;
    display: grid;
    gap: 3px;
}

.multi-option {
    min-height: 34px;
    padding: 7px 8px;
    display: flex;
    align-items: center;
    gap: 8px;
    border-radius: 8px;
    color: var(--text-secondary);
    font-size: 12px;
    font-weight: 500;
}

.multi-option:hover {
    background: var(--surface-2);
}

.multi-option input {
    width: 14px;
    height: 14px;
    accent-color: var(--primary-500);
}

.multi-empty {
    padding: 10px;
    color: var(--text-muted);
    font-size: 12px;
    text-align: center;
}

.kpi-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 12px;
    margin-bottom: 14px;
}

.kpi {
    min-height: 104px;
    padding: 16px;
}

.kpi span {
    display: block;
    color: var(--muted);
    font-size: 11px;
    font-weight: 500;
    text-transform: uppercase;
}

.kpi strong {
    display: block;
    margin-top: 12px;
    color: var(--text);
    font-size: 24px;
}

.dashboard-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px;
}

.panel {
    padding: 16px;
    min-height: 320px;
}

.panel canvas {
    width: 100% !important;
    height: 250px !important;
}

.panel-head h2 {
    margin: 0 0 12px;
    color: var(--text);
    font-size: 15px;
}

.ranking-header,
.sem-giro-hero,
.remanejo-hero,
.payroll-hero {
    margin-bottom: 18px;
}

.ranking-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 18px;
}

.ranking-header h1,
.sem-giro-hero h1,
.remanejo-hero h1,
.payroll-hero h1 {
    margin: 0;
    color: var(--text);
    font-size: 24px;
    line-height: 1.15;
    letter-spacing: -.025em;
}

.ranking-header p,
.sem-giro-hero p,
.remanejo-hero p,
.payroll-hero p {
    margin: 4px 0 0;
    color: var(--muted);
    font-size: 13px;
    font-weight: 500;
}

.ranking-toolbar,
.sem-giro-top-actions,
.remanejo-filters,
.payroll-controls,
.period-preset-bar,
.ranking-preset-bar {
    margin-bottom: 14px;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px;
}

.ranking-kpis,
.sem-giro-kpis,
.remanejo-kpis,
.payroll-kpis {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 12px;
    margin-bottom: 14px;
}

.ranking-kpi,
.sem-giro-kpi,
.remanejo-kpi,
.payroll-kpi,
.ranking-panel,
.sem-giro-panel,
.remanejo-panel,
.payroll-panel {
    border: 1px solid var(--border);
    border-radius: 12px;
    background: var(--white);
}

.ranking-kpi,
.sem-giro-kpi,
.remanejo-kpi,
.payroll-kpi {
    min-height: 104px;
    padding: 16px;
}

.ranking-kpi span,
.sem-giro-kpi span,
.remanejo-kpi span,
.payroll-kpi span {
    display: block;
    color: var(--muted);
    font-size: 11px;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: .03em;
}

.ranking-kpi strong,
.sem-giro-kpi strong,
.remanejo-kpi strong,
.payroll-kpi strong {
    display: block;
    margin-top: 10px;
    color: var(--text);
    font-size: 24px;
    line-height: 1.05;
}

.ranking-kpi small,
.sem-giro-kpi small,
.remanejo-kpi small,
.payroll-kpi small {
    display: block;
    margin-top: 8px;
    color: var(--primary-600);
    font-weight: 500;
}

.ranking-panel,
.sem-giro-panel,
.remanejo-panel,
.payroll-panel {
    padding: 16px;
}

.ranking-table-wrap,
.sem-giro-table-wrap,
.remanejo-list,
.payroll-table-wrap {
    overflow: auto;
}

.ranking-panel-head {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 18px;
    margin-bottom: 14px;
}

.ranking-panel-head h2 {
    margin: 0;
    color: var(--text);
    font-size: 15px;
    line-height: 1.25;
}

.ranking-panel-head p {
    margin: 4px 0 0;
    color: var(--muted);
    font-size: 11px;
    font-weight: 500;
    letter-spacing: .02em;
}

.ranking-panel-actions {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 10px;
    flex-wrap: wrap;
}

.ranking-seller-filter {
    width: min(340px, 42vw);
    min-width: 260px;
}

.ranking-seller-filter .toolbar-chip {
    min-height: 36px;
    box-shadow: none;
}

.ranking-seller-filter .toolbar-menu {
    right: 0;
    left: auto;
}

.ranking-sort {
    display: flex;
    align-items: center;
    gap: 8px;
    flex: 0 0 auto;
}

.ranking-sort span {
    color: var(--muted);
    font-size: 10px;
    font-weight: 500;
    white-space: nowrap;
}

.ranking-sort select {
    min-width: 170px;
    height: 36px;
    padding: 0 34px 0 11px;
    border: 1px solid var(--border);
    border-radius: 8px;
    outline: 0;
    background: var(--white);
    color: var(--text);
    font: inherit;
    font-size: 11px;
    font-weight: 500;
    cursor: pointer;
}

.ranking-sort select:focus {
    border-color: var(--primary-500);
    box-shadow: 0 0 0 3px rgba(20, 164, 92, .12);
}

.rank-sort-direction {
    display: grid;
    place-items: center;
    width: 36px;
    height: 36px;
    padding: 0;
    border: 1px solid var(--border);
    border-radius: 8px;
    background: var(--white);
    color: var(--text-secondary);
    font-size: 12px;
    cursor: pointer;
    transition: border-color .14s ease, color .14s ease;
}

.rank-sort-direction:hover {
    border-color: var(--primary-500);
    color: var(--primary-600);
}

.ranking-table-wrap {
    border: 1px solid var(--border);
    border-radius: 12px;
    background: var(--white);
}

.ranking-table {
    width: 100%;
    min-width: 1180px;
    border-collapse: collapse;
    table-layout: auto;
}

.ranking-table th,
.ranking-table td {
    padding: 10px 12px;
    border-bottom: 1px solid var(--border);
    text-align: right;
    vertical-align: middle;
    white-space: nowrap;
}

.ranking-table th:first-child,
.ranking-table td:first-child {
    min-width: 235px;
    text-align: left;
}

.ranking-table thead th {
    position: sticky;
    top: 0;
    z-index: 1;
    background: var(--surface-2);
    color: var(--muted);
    font-size: 9.5px;
    font-weight: 500;
    letter-spacing: .035em;
}

.ranking-table tbody td {
    color: var(--text);
    font-size: 11.5px;
}

.ranking-table tbody tr:hover td {
    background: var(--surface-2);
}

.ranking-table tbody td:first-child strong {
    display: block;
    max-width: 260px;
    overflow: hidden;
    color: var(--text);
    font-size: 11.5px;
    text-overflow: ellipsis;
}

.ranking-table tbody td:first-child small {
    display: block;
    margin-top: 3px;
    color: var(--muted);
    font-size: 9px;
    font-weight: 500;
    letter-spacing: .02em;
}

.ranking-margin {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 58px;
    padding: 4px 7px;
    border-radius: 999px;
    background: var(--primary-50);
    color: var(--primary-600);
    font-size: 10px;
    font-weight: 500;
}

.ranking-table tfoot td {
    position: sticky;
    bottom: 0;
    border-bottom: 0;
    background: var(--surface-2);
    color: var(--text);
    font-size: 11px;
    font-weight: 500;
}

.ranking-table-wrap::-webkit-scrollbar {
    height: 8px;
}

.ranking-table-wrap::-webkit-scrollbar-thumb {
    border: 2px solid var(--surface);
    border-radius: 999px;
    background: var(--surface-2);
}

/* ===== Remanejamento: filter bar ===== */
.remanejo-filter-bar {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    gap: 12px;
    margin-bottom: 14px;
    padding: 16px;
    border: 1px solid var(--border);
    border-radius: 12px;
    background: var(--white);
}

.remanejo-filter-title {
    flex: 1 1 100%;
}

.remanejo-filter-title h2 {
    margin: 0;
    color: var(--text);
    font-size: 14px;
    letter-spacing: .02em;
}

.remanejo-filter-title p {
    margin: 4px 0 0;
    color: var(--muted);
    font-size: 11.5px;
    font-weight: 500;
}

.rj-filter-field {
    display: grid;
    gap: 5px;
    color: var(--muted);
    font-size: 11px;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: .03em;
}

.rj-filter-control {
    min-height: 38px;
    padding: 0 10px;
    border: 1px solid var(--border);
    border-radius: 8px;
    background: var(--white);
    color: var(--text);
    font-size: 12px;
    font-weight: 500;
    text-transform: none;
    outline: none;
}

.rj-filter-control:focus {
    border-color: var(--primary-500);
    box-shadow: 0 0 0 3px rgba(var(--primary-rgb), .12);
}

.rj-product-filter {
    min-width: 160px;
}

.rj-multi-filter {
    position: relative;
    min-width: 170px;
}

.rj-filter-chip {
    min-height: 38px;
    width: 100%;
    padding: 0 12px;
    display: flex;
    align-items: center;
    border: 1px solid var(--border);
    border-radius: 8px;
    background: var(--white);
    color: var(--text);
    text-align: left;
    text-transform: none;
}

.rj-filter-chip strong {
    overflow: hidden;
    color: var(--text);
    font-size: 12px;
    font-weight: 500;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.rj-filter-chip:hover,
.rj-multi-filter.is-open .rj-filter-chip {
    border-color: var(--primary-500);
    box-shadow: 0 0 0 3px rgba(var(--primary-rgb), .10);
}

.rj-filter-menu {
    position: absolute;
    z-index: 40;
    top: calc(100% + 8px);
    left: 0;
    width: max(220px, 100%);
    padding: 10px;
    border: 1px solid var(--border);
    border-radius: 12px;
    background: var(--white);
    box-shadow: 0 20px 50px -22px rgba(15, 23, 42, .35);
}

.rj-filter-menu input[type="search"] {
    width: 100%;
    min-height: 36px;
    margin-bottom: 8px;
    padding: 0 10px;
    border: 1px solid var(--border);
    border-radius: 8px;
    background: var(--white);
    color: var(--text);
    font-size: 12px;
    outline: none;
}

.rj-filter-menu-clear {
    width: 100%;
    min-height: 32px;
    margin-bottom: 8px;
    border: 1px solid var(--border);
    border-radius: 8px;
    background: var(--white);
    color: var(--text-secondary);
    font-size: 11px;
    font-weight: 500;
    letter-spacing: .03em;
}

.rj-filter-menu-clear:hover {
    background: var(--surface-2);
}

.rj-filter-options {
    display: grid;
    gap: 2px;
    max-height: 220px;
    overflow: auto;
}

.rj-filter-option {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 7px 8px;
    border-radius: 7px;
    color: var(--text);
    font-size: 12px;
    font-weight: 500;
    cursor: pointer;
}

.rj-filter-option:hover {
    background: var(--surface);
}

.rj-filter-option.is-filtered-out {
    display: none;
}

.rj-stock-combo {
    display: flex;
    gap: 6px;
}

.rj-stock-mode {
    min-height: 38px;
    width: 52px;
    padding: 0 6px;
    border: 1px solid var(--border);
    border-radius: 8px;
    background: var(--white);
    color: var(--text);
    font-size: 12px;
    text-align: center;
}

.remanejo-stock-filter input {
    width: 84px;
}

.rj-filter-clear,
.rj-filter-apply {
    min-height: 38px;
    padding: 0 16px;
    border-radius: 8px;
    font-size: 11px;
    font-weight: 500;
    letter-spacing: .04em;
    text-transform: uppercase;
}

.rj-filter-clear {
    border: 1px solid var(--border);
    background: var(--white);
    color: var(--text-secondary);
}

.rj-filter-clear:hover {
    background: var(--surface-2);
}

.rj-filter-apply {
    border: 1px solid var(--primary-500);
    background: var(--primary-500);
    color: #fff;
}

.rj-filter-apply:hover {
    background: var(--primary-600);
}

/* ===== Remanejamento: layout (sugestões + lateral) ===== */
.remanejo-layout {
    display: grid;
    grid-template-columns: minmax(0, 1.6fr) minmax(280px, .9fr);
    gap: 14px;
    align-items: start;
}

.remanejo-main-card {
    border: 1px solid var(--border);
    border-radius: 12px;
    background: var(--white);
    padding: 16px;
}

.remanejo-tabs {
    display: flex;
    gap: 8px;
    margin-bottom: 14px;
}

.remanejo-tabs button {
    min-height: 38px;
    padding: 0 16px;
    border: 1px solid var(--border);
    border-radius: 8px;
    background: var(--white);
    color: var(--muted);
    font-size: 11px;
    font-weight: 500;
    letter-spacing: .04em;
}

.remanejo-tabs button.active {
    border-color: var(--primary-500);
    background: var(--primary-50);
    color: var(--primary-600);
}

.remanejo-list-head {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 14px;
}

.remanejo-list-head h2 {
    margin: 0;
    color: var(--text);
    font-size: 15px;
}

.remanejo-list-head p {
    margin: 4px 0 0;
    color: var(--muted);
    font-size: 11.5px;
    font-weight: 500;
}

.remanejo-list-head label {
    display: flex;
    align-items: center;
    gap: 8px;
    color: var(--muted);
    font-size: 11px;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: .03em;
}

.remanejo-list-head select {
    min-height: 36px;
    padding: 0 10px;
    border: 1px solid var(--border);
    border-radius: 8px;
    background: var(--white);
    color: var(--text);
    font-size: 12px;
    font-weight: 500;
    text-transform: none;
}

.remanejo-suggestions {
    display: grid;
    gap: 10px;
}

.rj-empty {
    margin: 0;
    padding: 24px;
    text-align: center;
    color: var(--muted);
    font-size: 13px;
}

.rj-card {
    display: grid;
    grid-template-columns: 110px minmax(0, 1.2fr) minmax(0, 1.3fr) minmax(0, .9fr) minmax(0, .9fr);
    gap: 14px;
    align-items: center;
    padding: 14px;
    border: 1px solid var(--border);
    border-radius: 12px;
    background: var(--surface);
}

.rj-card.is-hot {
    border-left: 3px solid var(--primary-500);
}

.rj-card.is-pair {
    border-left: 3px solid var(--orange);
}

.rj-card > div > span {
    display: block;
    margin-bottom: 4px;
    color: var(--muted);
    font-size: 10px;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: .04em;
}

.rj-card strong {
    display: block;
    color: var(--text);
    font-size: 13px;
    font-weight: 500;
}

.rj-card small {
    display: block;
    margin-top: 2px;
    color: var(--muted);
    font-size: 11px;
}

.rj-card em {
    display: block;
    margin-top: 2px;
    color: var(--muted-2);
    font-size: 10.5px;
    font-style: normal;
}

.rj-priority strong {
    color: var(--primary-600);
    font-size: 20px;
}

.rj-product {
    display: flex;
    align-items: center;
    gap: 10px;
}

.rj-tire,
.tire-stack {
    flex: none;
    width: 34px;
    height: 34px;
    border-radius: 50%;
    border: 6px solid var(--dark);
    background: var(--white);
}

.tire-stack {
    width: 18px;
    height: 18px;
    border-width: 4px;
}

.rj-origin {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    padding: 4px 0;
}

.rj-origin strong {
    font-size: 12px;
}

.rj-origin span {
    margin: 0;
    color: var(--muted);
    font-size: 10.5px;
    font-weight: 500;
    text-transform: none;
}

.rj-origin b {
    color: var(--primary-600);
    font-size: 14px;
}

.rj-list-footer {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    margin-top: 12px;
    padding-top: 12px;
    border-top: 1px solid var(--border);
    color: var(--muted);
    font-size: 11px;
    font-weight: 500;
    letter-spacing: .02em;
}

.rj-list-footer button {
    min-height: 34px;
    padding: 0 14px;
    border: 1px solid var(--border);
    border-radius: 8px;
    background: var(--white);
    color: var(--text-secondary);
    font-size: 11px;
    font-weight: 500;
}

.rj-list-footer button:hover {
    background: var(--surface-2);
}

/* ===== Remanejamento: cartões laterais ===== */
.remanejo-side {
    display: grid;
    gap: 14px;
}

.remanejo-info {
    border: 1px solid var(--border);
    border-radius: 12px;
    background: var(--white);
    padding: 16px;
}

.remanejo-info h3 {
    margin: 0 0 8px;
    color: var(--text);
    font-size: 13px;
}

.remanejo-info p {
    margin: 0;
    color: var(--muted);
    font-size: 12px;
    line-height: 1.5;
}

.remanejo-info ul {
    display: grid;
    gap: 10px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.remanejo-info li {
    display: flex;
    align-items: center;
    gap: 10px;
}

.remanejo-info li b {
    flex: none;
    width: 12px;
    height: 12px;
    border-radius: 4px;
    background: var(--muted-2);
}

.remanejo-info li b.green { background: var(--primary-500); }
.remanejo-info li b.yellow { background: var(--text-warning); }
.remanejo-info li b.red { background: var(--red); }
.remanejo-info li b.gray { background: var(--muted-2); }
.remanejo-info li b.blue { background: var(--blue); }

.remanejo-info li strong {
    display: block;
    color: var(--text);
    font-size: 12px;
}

.remanejo-info li span {
    display: block;
    color: var(--muted);
    font-size: 11px;
}

/* ===== Remanejamento: indicadores no cabeçalho dos KPIs ===== */
.remanejo-kpi {
    position: relative;
}

.remanejo-kpi i,
.remanejo-kpi > b {
    position: absolute;
    top: 16px;
    right: 16px;
    color: var(--muted-2);
    font-style: normal;
    font-weight: 500;
}

.remanejo-kpi.is-critical i {
    color: var(--red);
}

.remanejo-kpi b.pair {
    color: var(--orange);
}

/* ===== Estoque Sem Giro: barra de ferramentas no topo ===== */
.toolbar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px;
}

.sem-giro-toolbar {
    display: grid;
    grid-template-columns: 150px minmax(240px, 1fr) 150px auto auto;
    margin: 0;
    gap: 8px;
}

.sem-giro-controls {
    display: grid;
    gap: 10px;
    margin-bottom: 12px;
    padding: 12px;
    min-height: 0;
    overflow: visible;
}

.sem-giro-controls .toolbar-chip {
    min-height: 38px;
    padding: 5px 10px;
}

.toolbar-chip input {
    min-width: 0;
    border: none;
    outline: none;
    background: transparent;
    color: var(--text);
    font-size: 12px;
    font-weight: 500;
}

.sem-giro-days input {
    width: 56px;
}

.sem-giro-search input {
    width: 180px;
}

.sem-giro-qty-filter input {
    width: 90px;
}

.sem-giro-top-apply,
.sem-giro-export-button {
    min-height: 38px;
    padding: 0 16px;
    border-radius: 8px;
    font-size: 11px;
    font-weight: 500;
    letter-spacing: .04em;
    text-transform: uppercase;
}

.sem-giro-top-apply {
    border: 1px solid var(--primary-500);
    background: var(--primary-500);
    color: #fff;
}

.sem-giro-top-apply:hover {
    background: var(--primary-600);
}

.sem-giro-export-button {
    border: 1px solid var(--border);
    background: var(--white);
    color: var(--text-secondary);
}

.sem-giro-export-button:hover {
    background: var(--surface-2);
}

/* ===== Estoque Sem Giro: filtros multi-seleção ===== */
.sem-giro-filter-grid {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    align-content: start;
    align-items: start;
    gap: 10px;
    margin: 0;
    min-height: 0;
}

.sem-giro-multi-filter {
    position: relative;
    display: grid;
    align-content: start;
    gap: 4px;
}

.sem-giro-multi-filter > span {
    color: var(--muted);
    font-size: 10px;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: .03em;
}

.sem-giro-filter-chip {
    min-height: 36px;
    width: 100%;
    padding: 0 10px;
    display: flex;
    align-items: center;
    border: 1px solid var(--border);
    border-radius: 8px;
    background: var(--white);
    color: var(--text);
    text-align: left;
}

.sem-giro-filter-chip strong {
    overflow: hidden;
    color: var(--text);
    font-size: 12px;
    font-weight: 500;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.sem-giro-filter-chip:hover,
.sem-giro-multi-filter.is-open .sem-giro-filter-chip {
    border-color: var(--primary-500);
    box-shadow: 0 0 0 3px rgba(var(--primary-rgb), .10);
}

.sem-giro-filter-menu {
    position: absolute;
    z-index: 40;
    top: calc(100% + 8px);
    left: 0;
    width: max(220px, 100%);
    padding: 10px;
    border: 1px solid var(--border);
    border-radius: 12px;
    background: var(--white);
    box-shadow: 0 20px 50px -22px rgba(15, 23, 42, .35);
}

.sem-giro-filter-menu input[type="search"] {
    width: 100%;
    min-height: 36px;
    margin-bottom: 8px;
    padding: 0 10px;
    border: 1px solid var(--border);
    border-radius: 8px;
    background: var(--white);
    color: var(--text);
    font-size: 12px;
    outline: none;
}

.sem-giro-options {
    display: grid;
    gap: 2px;
    max-height: 220px;
    overflow: auto;
}

.sem-giro-options label {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 7px 8px;
    border-radius: 7px;
    color: var(--text);
    font-size: 12px;
    font-weight: 500;
    cursor: pointer;
}

.sem-giro-options label:hover {
    background: var(--surface);
}

.sem-giro-clear,
.sem-giro-apply {
    width: 100%;
    min-height: 34px;
    margin-top: 8px;
    border-radius: 8px;
    font-size: 11px;
    font-weight: 500;
    letter-spacing: .03em;
    text-transform: uppercase;
}

.sem-giro-clear {
    border: 1px solid var(--border);
    background: var(--white);
    color: var(--text-secondary);
}

.sem-giro-clear:hover {
    background: var(--surface-2);
}

.sem-giro-apply {
    border: 1px solid var(--primary-500);
    background: var(--primary-500);
    color: #fff;
}

.sem-giro-apply:hover {
    background: var(--primary-600);
}

/* ===== Estoque Sem Giro: KPIs ===== */
.kpi-card {
    min-height: 96px;
    padding: 16px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    border: 1px solid var(--border);
    border-radius: 12px;
    background: var(--white);
}

.kpi-card > div > span {
    display: block;
    color: var(--muted);
    font-size: 11px;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: .03em;
}

.kpi-card > div > strong {
    display: block;
    margin-top: 10px;
    color: var(--text);
    font-size: 22px;
    line-height: 1.05;
}

.kpi-card > small {
    display: block;
    margin-top: 8px;
    color: var(--muted);
    font-size: 11px;
    font-weight: 500;
}

.kpi-card.kpi-primary {
    border-color: var(--primary-500);
    background: var(--primary-50);
}

.kpi-card.kpi-primary > div > strong {
    color: var(--primary-600);
}

.kpi-card.kpi-primary > small {
    color: var(--primary-600);
}

/* ===== Estoque Sem Giro: tabela de itens parados ===== */
.sem-giro-grid {
    display: grid;
    gap: 14px;
}

.sem-giro-table {
    width: 100%;
    border-collapse: collapse;
}

.sem-giro-table th,
.sem-giro-table td {
    padding: 10px 9px;
    border-bottom: 1px solid var(--border);
    color: var(--text-secondary);
    text-align: left;
    font-size: 12px;
    white-space: nowrap;
}

.sem-giro-table th {
    color: var(--muted);
    font-size: 11px;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: .02em;
}

.sem-giro-table tr:hover td {
    background: var(--surface-2);
}

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

    .sidebar {
        position: relative;
        height: auto;
    }

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

    .amon-kpi-grid.compact,
    .amon-kpi-grid.compact.commercial-kpis,
    .commercial-grid,
    .ranking-kpis,
    .sem-giro-kpis,
    .remanejo-kpis,
    .payroll-kpis {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .remanejo-layout {
        grid-template-columns: 1fr;
    }

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

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

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

    .sem-giro-toolbar {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .sem-giro-search {
        grid-column: span 2;
    }
}

@media (max-width: 760px) {
    .app-shell,
    .amon-kpi-grid.compact,
    .amon-kpi-grid.compact.commercial-kpis,
    .commercial-grid,
    .ranking-kpis,
    .sem-giro-kpis,
    .remanejo-kpis,
    .payroll-kpis {
        grid-template-columns: 1fr;
    }

    .content {
        padding: 16px;
    }

    .commercial-card.wide {
        grid-column: auto;
    }

    .page-topbar,
    .remanejo-header,
    .ranking-header,
    .ranking-panel-head {
        flex-direction: column;
        align-items: stretch;
    }

    .ranking-panel-actions,
    .ranking-sort {
        justify-content: space-between;
    }

    .ranking-seller-filter {
        width: 100%;
        min-width: 0;
    }

    .ranking-seller-filter .toolbar-menu {
        right: auto;
        left: 0;
    }

    .ranking-sort select {
        flex: 1;
        min-width: 0;
    }

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

    .rj-card {
        grid-template-columns: 1fr;
    }

    .kpi-grid,
    .sem-giro-kpi-grid,
    .sem-giro-filter-grid {
        grid-template-columns: 1fr;
    }

    .sem-giro-toolbar {
        grid-template-columns: 1fr;
    }

    .sem-giro-search {
        grid-column: auto;
    }

    .toolbar-chip {
        width: 100%;
    }
}

/* ===== Meta Mensal ===== */
.monthly-goals-main { display: grid; align-content: start; gap: 16px; }
.monthly-toolbar { display: grid; grid-template-columns: auto minmax(180px, 240px) repeat(2, minmax(170px, 1fr)) auto; align-items: end; gap: 12px; padding: 14px; border: 1px solid var(--border); border-radius: 12px; background: var(--white); }
.monthly-yesterday-preset { min-height: 40px; align-self: end; }
.monthly-toolbar label, .monthly-period-status { display: grid; gap: 6px; }
.monthly-toolbar label > span, .monthly-period-status > span { color: var(--muted); font-size: 10px; font-weight: 500; letter-spacing: .05em; text-transform: uppercase; }
.monthly-toolbar input { min-height: 40px; padding: 0 12px; border: 1px solid var(--border); border-radius: 8px; background: var(--white); color: var(--text); font: inherit; font-weight: 500; }
.monthly-period-status { min-height: 40px; padding: 6px 12px; border: 1px solid var(--border); border-radius: 8px; background: var(--surface); }
.monthly-period-status strong { color: var(--text); font-size: 12px; }
.monthly-schema-warning { padding: 12px 14px; border: 1px solid rgba(239, 159, 39, .4); border-radius: 10px; background: rgba(239, 159, 39, .12); color: var(--text-warning); font-size: 12px; }
.monthly-summary-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
.monthly-summary-card { min-height: 122px; padding: 17px; display: flex; flex-direction: column; justify-content: center; border: 1px solid var(--border); border-radius: 12px; background: var(--white); transition: border-color .16s ease; }
.monthly-summary-card:hover { border-color: rgba(var(--primary-rgb), .34); }
.monthly-summary-card.primary { border-color: rgba(var(--primary-rgb), .34); background: linear-gradient(135deg, rgba(var(--primary-rgb), .12), var(--surface-1) 62%); }
.monthly-summary-card span { color: var(--muted); font-size: 10px; font-weight: 500; letter-spacing: .05em; text-transform: uppercase; }
.monthly-summary-card strong { margin-top: 10px; color: var(--text); font-size: clamp(22px, 2vw, 30px); line-height: 1; }
.monthly-summary-card small { margin-top: 9px; color: var(--primary-600); font-size: 11px; font-weight: 500; }
.monthly-cars-summary { margin-bottom: 14px; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; }
.monthly-cars-summary article { min-height: 92px; padding: 14px; display: grid; align-content: center; gap: 5px; border: 1px solid var(--border); border-radius: 12px; background: var(--surface); }
.monthly-cars-summary article.primary { border-color: rgba(var(--primary-rgb), .34); background: linear-gradient(135deg, rgba(var(--primary-rgb), .12), var(--surface-1) 70%); }
.monthly-cars-summary span { color: var(--muted); font-size: 9.5px; font-weight: 500; letter-spacing: .04em; text-transform: uppercase; }
.monthly-cars-summary strong { color: var(--text); font-size: 25px; line-height: 1; }
.monthly-cars-summary small { color: var(--primary-600); font-size: 10.5px; font-weight: 500; }
.monthly-cars-chart-card { margin-bottom: 14px; padding: 14px; border: 1px solid var(--border); border-radius: 12px; background: var(--white); }
.monthly-cars-chart-card header { margin-bottom: 10px; display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
.monthly-cars-chart-card h3 { margin: 0; color: var(--text); font-size: 14px; }
.monthly-cars-chart-card p { margin: 3px 0 0; color: var(--muted); font-size: 11px; font-weight: 500; }
.monthly-cars-chart-card header > strong { min-width: max-content; padding: 7px 10px; border-radius: 999px; background: var(--primary-50); color: var(--primary-600); font-size: 12px; font-weight: 500; }
.monthly-cars-chart-card canvas { width: 100% !important; height: 320px !important; }
.monthly-cars-table-wrap { max-height: none; overflow-x: auto; overflow-y: visible; }
.monthly-section { padding: 16px; border: 1px solid var(--border); border-radius: 12px; background: var(--white); }
.monthly-section > header { margin-bottom: 14px; display: flex; align-items: center; justify-content: space-between; }
.monthly-section h2, .monthly-section h3 { margin: 0; color: var(--text); }
.monthly-section h2 { font-size: 15px; }
.monthly-section h3 { font-size: 11px; text-transform: uppercase; letter-spacing: .04em; }
.monthly-section header p { margin: 4px 0 0; color: var(--muted); font-size: 11.5px; }
.monthly-seller-exclude-filter { width: min(360px, 100%); }
.monthly-seller-exclude-filter .toolbar-chip { min-height: 40px; width: 100%; justify-content: space-between; background: var(--surface-1); }
.monthly-seller-exclude-filter .toolbar-menu { left: auto; right: 0; width: min(360px, calc(100vw - 32px)); }
.monthly-seller-exclude-filter .toolbar-option span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.monthly-ranking-highlights, .monthly-seller-rankings { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; }
.monthly-highlight, .monthly-seller-rankings > article { min-width: 0; padding: 13px; border: 1px solid var(--border); border-radius: 12px; background: var(--surface); }
.monthly-highlight { position: relative; display: grid; grid-template-columns: 36px minmax(0, 1fr) auto; align-items: center; gap: 10px; }
.monthly-highlight-info { position: absolute; top: 6px; right: 6px; width: 16px; height: 16px; padding: 0; display: grid; place-items: center; border: 1px solid var(--border); border-radius: 50%; background: var(--surface-1); color: var(--text-secondary); font-size: 10px; line-height: 1; cursor: pointer; transition: border-color .14s ease, color .14s ease; }
.monthly-highlight-info:hover, .monthly-highlight-info[aria-expanded="true"] { border-color: var(--primary-500); color: var(--primary-600); }
.monthly-highlight-balloon { position: absolute; top: calc(100% + 8px); right: 0; z-index: 20; width: 240px; padding: 10px 12px; border: 1px solid var(--border); border-radius: 10px; background: var(--surface-1); color: var(--text); font-size: 11px; line-height: 1.45; box-shadow: var(--shadow); }
.monthly-highlight-balloon::before { content: ''; position: absolute; bottom: 100%; right: 10px; border: 6px solid transparent; border-bottom-color: var(--border); }
.monthly-highlight i { width: 36px; height: 36px; display: grid; place-items: center; border-radius: 10px; background: rgba(var(--primary-rgb), .12); color: var(--primary-600); font-size: 17px; font-style: normal; font-weight: 500; }
.monthly-highlight.negative i { background: rgba(226, 75, 74, .16); color: var(--text-danger); }
.monthly-highlight span { display: block; color: var(--muted); font-size: 9.5px; font-weight: 500; text-transform: uppercase; }
.monthly-highlight strong { display: block; margin-top: 3px; overflow: hidden; color: var(--text); font-size: 12px; text-overflow: ellipsis; white-space: nowrap; }
.monthly-highlight > b { color: var(--primary-600); font-size: 14px; }
.monthly-highlight.negative > b { color: var(--text-danger); }
.monthly-seller-rankings > article.danger { border-color: rgba(220, 38, 38, .18); background: rgba(226, 75, 74, .08); }
.monthly-seller-rankings h3 { margin-bottom: 10px; }
.monthly-ranking-row { display: grid; grid-template-columns: 26px minmax(0, 1fr) auto; align-items: center; gap: 8px; padding: 8px 0; border-top: 1px solid var(--border); }
.monthly-ranking-row:first-child { border-top: 0; }
.monthly-ranking-row > b { width: 24px; height: 24px; display: grid; place-items: center; border-radius: 7px; background: var(--primary-50); color: var(--primary-600); font-size: 11px; }
.monthly-ranking-row div strong, .monthly-ranking-row aside strong { display: block; overflow: hidden; color: var(--text); font-size: 11.5px; text-overflow: ellipsis; white-space: nowrap; }
.monthly-ranking-row span { display: block; margin-top: 2px; color: var(--muted); font-size: 9.5px; }
.monthly-ranking-row aside { max-width: 110px; text-align: right; }
.monthly-alerts { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.monthly-alerts article { min-width: 0; padding: 12px; display: grid; grid-template-columns: 32px minmax(0, 1fr); gap: 9px; border: 1px solid rgba(226, 75, 74, .35); border-radius: 10px; background: rgba(226, 75, 74, .12); }
.monthly-alerts i { grid-row: span 2; width: 30px; height: 30px; display: grid; place-items: center; border-radius: 8px; background: rgba(226, 75, 74, .16); color: var(--text-danger); font-style: normal; font-weight: 500; }
.monthly-alerts strong, .monthly-alerts span, .monthly-alerts b { display: block; }
.monthly-alerts strong { color: var(--text-danger); font-size: 11.5px; }
.monthly-alerts span { color: var(--text-danger); font-size: 10px; }
.monthly-alerts b { grid-column: 2; color: var(--text-danger); font-size: 10px; }
.monthly-table { width: 100%; border-collapse: collapse; font-size: 11px; }
.monthly-table th, .monthly-table td { padding: 11px 10px; border-bottom: 1px solid var(--border); text-align: right; white-space: nowrap; }
.monthly-table th:first-child, .monthly-table td:first-child { text-align: left; }
.monthly-table th { color: var(--muted); font-size: 9.5px; text-transform: uppercase; letter-spacing: .04em; }
.monthly-table tr:hover td { background: var(--surface); }
.monthly-status { display: inline-flex; min-width: 58px; padding: 4px 7px; justify-content: center; border-radius: 999px; font-weight: 500; }
.monthly-status.positive { background: rgba(123, 194, 74, .16); color: var(--text-success); }
.monthly-status.warning { background: rgba(239, 159, 39, .16); color: var(--text-warning); }
.monthly-status.negative { background: rgba(226, 75, 74, .16); color: var(--text-danger); }
.monthly-empty { margin: 0; padding: 14px; color: var(--muted); font-size: 11px; text-align: center; }
.monthly-load-error { padding: 14px !important; color: var(--text-danger) !important; font-size: 11px; font-weight: 500; text-align: center !important; white-space: normal !important; }
.monthly-modal { position: fixed; z-index: 100; inset: 0; padding: 24px; display: grid; place-items: center; background: rgba(15, 23, 42, .42); backdrop-filter: blur(5px); }
.monthly-modal[hidden] { display: none; }
.monthly-modal-open { overflow: hidden; }
.monthly-modal-card { width: min(1080px, 100%); max-height: min(820px, calc(100vh - 40px)); display: grid; grid-template-rows: auto minmax(0, 1fr) auto; overflow: hidden; border: 1px solid var(--border); border-radius: 16px; background: var(--white); box-shadow: 0 30px 90px -35px rgba(15, 23, 42, .7); }
.monthly-modal-card > header, .monthly-modal-card > footer { padding: 16px; display: flex; align-items: center; justify-content: space-between; gap: 12px; border-bottom: 1px solid var(--border); }
.monthly-modal-card > footer { justify-content: flex-end; border-top: 1px solid var(--border); border-bottom: 0; }
.monthly-modal-card h2 { margin: 0; color: var(--text); font-size: 16px; }
.monthly-modal-card header p { margin: 4px 0 0; color: var(--muted); font-size: 11px; }
.monthly-modal-card header > button { width: 32px; height: 32px; border: 1px solid var(--border); border-radius: 8px; background: var(--surface-1); color: var(--muted); font-size: 20px; }
.monthly-goal-editor { overflow: auto; padding: 14px 16px 18px; background: var(--surface); }
.monthly-editor-intro { margin-bottom: 10px; padding: 0 2px; display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.monthly-editor-intro div { display: grid; gap: 2px; }
.monthly-editor-intro strong { color: var(--text); font-size: 12px; }
.monthly-editor-intro span, .monthly-editor-intro small { color: var(--muted); font-size: 10px; }
.monthly-editor-intro small { padding: 5px 8px; border: 1px solid var(--border); border-radius: 999px; background: var(--white); font-weight: 500; white-space: nowrap; }
.monthly-editor-row { margin-top: 9px; padding: 12px; display: grid; grid-template-columns: 120px minmax(0, 3fr) minmax(250px, 2fr); gap: 12px; align-items: stretch; border: 1px solid var(--border); border-radius: 12px; background: var(--white); box-shadow: 0 5px 15px -14px rgba(15, 23, 42, .55); }
.monthly-editor-store { padding: 4px 10px 4px 2px; display: flex; flex-direction: column; justify-content: center; border-right: 1px solid var(--border); }
.monthly-editor-store span { color: var(--muted); font-size: 8.5px; font-weight: 500; letter-spacing: .06em; text-transform: uppercase; }
.monthly-editor-store strong { margin-top: 4px; color: var(--text); font-size: 12px; }
.monthly-editor-group { min-width: 0; padding: 2px 0; }
.monthly-editor-group > header { margin-bottom: 7px; color: var(--muted); font-size: 8.5px; font-weight: 500; letter-spacing: .06em; text-transform: uppercase; }
.monthly-editor-group > div { display: grid; gap: 8px; }
.monthly-editor-financial > div { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.monthly-editor-vehicles { padding-left: 12px; border-left: 1px solid var(--border); }
.monthly-editor-vehicles > div { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.monthly-editor-group label { min-width: 0; display: grid; gap: 5px; }
.monthly-editor-group label > span { overflow: hidden; color: var(--muted); font-size: 8.5px; font-weight: 500; text-overflow: ellipsis; white-space: nowrap; }
.monthly-editor-row input { width: 100%; min-width: 0; min-height: 36px; padding: 0 9px; border: 1px solid var(--border); border-radius: 8px; background: var(--surface-1); color: var(--text); font: inherit; font-size: 11.5px; text-align: right; }
.monthly-editor-row input:focus { border-color: var(--primary-500); outline: none; box-shadow: 0 0 0 3px rgba(var(--primary-rgb), .1); }
.monthly-loading .monthly-summary-card strong { opacity: .45; }

@media (max-width: 1180px) {
    .monthly-summary-grid, .monthly-ranking-highlights, .monthly-seller-rankings { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .monthly-cars-summary { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .monthly-toolbar { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .monthly-alerts { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .monthly-editor-row { grid-template-columns: 100px minmax(0, 1fr); }
    .monthly-editor-store { grid-row: span 2; }
    .monthly-editor-vehicles { padding-left: 0; border-left: 0; }
}

@media (max-width: 760px) {
    .monthly-summary-grid, .monthly-ranking-highlights, .monthly-seller-rankings, .monthly-alerts, .monthly-toolbar, .monthly-cars-summary { grid-template-columns: 1fr; }
    .monthly-section > header { align-items: stretch; flex-direction: column; }
    .monthly-seller-exclude-filter, .monthly-seller-exclude-filter .toolbar-menu { width: 100%; }
    .monthly-modal { padding: 10px; }
    .monthly-modal-card { max-height: calc(100vh - 20px); }
    .monthly-editor-intro { align-items: flex-start; }
    .monthly-editor-row { grid-template-columns: 1fr; padding: 12px; }
    .monthly-editor-store { grid-row: auto; padding: 0 0 9px; flex-direction: row; align-items: center; justify-content: space-between; border-right: 0; border-bottom: 1px solid var(--border); }
    .monthly-editor-store strong { margin-top: 0; }
    .monthly-editor-financial > div { grid-template-columns: 1fr; }
    .monthly-editor-vehicles > div { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .monthly-editor-row input { text-align: left; }
}