:root {
    --ink: #202124;
    --muted: #6c7078;
    --line: #ece3e1;
    --paper: #fbf8f6;
    --panel: rgba(255,255,255,.86);
    --input: #ffffff;
    --soft: #f9f7f5;
    --table-head: #f7f4f2;
    --rose: #b8576b;
    --rose-dark: #8f3348;
    --sage: #6f8b7a;
    --success: #238b57;
    --success-dark: #17623c;
    --danger: #c94f5f;
    --danger-dark: #9c2f3d;
    --blue: #426b8f;
    --gold: #c69b52;
    --shadow: 0 18px 55px rgba(55, 38, 46, .10);
    --page-bg:
        radial-gradient(circle at top left, rgba(184,87,107,.14), transparent 34%),
        linear-gradient(135deg, #fbf8f6 0%, #f4efec 48%, #edf4f0 100%);
    --sidebar-bg: linear-gradient(180deg, #2a2428 0%, #181719 100%);
    --sidebar-link: rgba(255,255,255,.78);
    --modal-cover: rgba(32, 33, 36, .48);
    --period-bg: #d9e8fb;
    --professional-bg: #fff0bd;
    --revenue-bg: #d9efd0;
    --expense-bg: #f4c7ca;
    --cash-bg: #d8e7fb;
    --primary-head: #1f5fbf;
    --login-accent: #B15567;
    --vivid-green: #00a95c;
    --vivid-red: #e74c3c;
    --vivid-cyan: #10b9d7;
    --vivid-purple: #c76ad8;
    --vivid-teal: #0b91a8;
    --vivid-blue: #229df2;
}

:root[data-theme="dark"] {
    --ink: #f4f7fb;
    --muted: #aab4c2;
    --line: #334155;
    --paper: #0f172a;
    --panel: rgba(24,34,53,.9);
    --input: #111827;
    --soft: #1f2a3d;
    --table-head: #243249;
    --rose: #e07a90;
    --rose-dark: #f2a3b3;
    --sage: #92c6a8;
    --success: #45b97c;
    --success-dark: #2f8b5d;
    --danger: #f06b7b;
    --danger-dark: #c94f5f;
    --blue: #8db8ea;
    --gold: #f1c96b;
    --shadow: 0 22px 60px rgba(0, 0, 0, .28);
    --page-bg:
        radial-gradient(circle at top left, rgba(224,122,144,.10), transparent 36%),
        linear-gradient(135deg, #0f172a 0%, #111827 52%, #1d283a 100%);
    --sidebar-bg: linear-gradient(180deg, #0b1020 0%, #070a12 100%);
    --sidebar-link: rgba(244,247,251,.74);
    --modal-cover: rgba(2, 6, 23, .72);
    --period-bg: #173153;
    --professional-bg: #4b3b13;
    --revenue-bg: #173f2c;
    --expense-bg: #52232a;
    --cash-bg: #173153;
    --primary-head: #1d4ed8;
    --login-accent: #B15567;
    --vivid-green: #05b86a;
    --vivid-red: #f05243;
    --vivid-cyan: #18c4e6;
    --vivid-purple: #d46be0;
    --vivid-teal: #0ea0b8;
    --vivid-blue: #38a7ff;
}

:root[data-theme="rose"] {
    --ink: #2b1c22;
    --muted: #765d66;
    --line: #ead5db;
    --paper: #fff7f9;
    --panel: rgba(255,250,251,.9);
    --input: #fffefe;
    --soft: #fff0f4;
    --table-head: #f9e8ed;
    --rose: #B15567;
    --rose-dark: #7f3044;
    --sage: #7e997f;
    --success: #27875a;
    --success-dark: #17623c;
    --danger: #c94f5f;
    --danger-dark: #9c2f3d;
    --blue: #586f8a;
    --gold: #c49a58;
    --shadow: 0 18px 55px rgba(116, 48, 68, .14);
    --page-bg:
        radial-gradient(circle at top left, rgba(177,85,103,.18), transparent 36%),
        linear-gradient(135deg, #fff9fa 0%, #f9ecef 52%, #f6f0ed 100%);
    --sidebar-bg: linear-gradient(180deg, #3a232b 0%, #1f171b 100%);
    --sidebar-link: rgba(255,244,247,.78);
    --modal-cover: rgba(43, 28, 34, .48);
    --period-bg: #f8dfe7;
    --professional-bg: #fff0bd;
    --revenue-bg: #dcefd8;
    --expense-bg: #f2c8d1;
    --cash-bg: #e5edf8;
    --primary-head: #B15567;
    --login-accent: #B15567;
}

:root[data-theme="champagne"] {
    --ink: #2b261f;
    --muted: #74685b;
    --line: #e8ddcf;
    --paper: #fbf7f0;
    --panel: rgba(255,252,247,.9);
    --input: #fffdfa;
    --soft: #f8f0e3;
    --table-head: #f3eadb;
    --rose: #B15567;
    --rose-dark: #83394c;
    --sage: #758a67;
    --success: #2d855c;
    --success-dark: #1d6041;
    --danger: #be4d5f;
    --danger-dark: #94313f;
    --blue: #566f87;
    --gold: #b88b42;
    --shadow: 0 18px 55px rgba(84, 67, 42, .12);
    --page-bg:
        radial-gradient(circle at top left, rgba(184,139,66,.16), transparent 34%),
        linear-gradient(135deg, #fffaf1 0%, #f3eadb 55%, #edf3eb 100%);
    --sidebar-bg: linear-gradient(180deg, #2f2922 0%, #171411 100%);
    --sidebar-link: rgba(255,248,238,.78);
    --modal-cover: rgba(43, 38, 31, .48);
    --period-bg: #e6eef9;
    --professional-bg: #f4dc9a;
    --revenue-bg: #dcebd4;
    --expense-bg: #f0cbd0;
    --cash-bg: #dde9f6;
    --primary-head: #8d6831;
    --login-accent: #B15567;
}

:root[data-theme="graphite"] {
    --ink: #f8fafc;
    --muted: #bbc4cf;
    --line: #3f4652;
    --paper: #121417;
    --panel: rgba(29,32,38,.91);
    --input: #171a20;
    --soft: #262b33;
    --table-head: #2d333d;
    --rose: #d27487;
    --rose-dark: #f0a3b1;
    --sage: #a4c29c;
    --success: #4db980;
    --success-dark: #348f62;
    --danger: #ef7180;
    --danger-dark: #c94f5f;
    --blue: #9cbce3;
    --gold: #e0bc71;
    --shadow: 0 24px 62px rgba(0, 0, 0, .34);
    --page-bg:
        radial-gradient(circle at top left, rgba(177,85,103,.12), transparent 34%),
        linear-gradient(135deg, #13161b 0%, #1d2026 54%, #111318 100%);
    --sidebar-bg: linear-gradient(180deg, #101217 0%, #06070a 100%);
    --sidebar-link: rgba(248,250,252,.74);
    --modal-cover: rgba(0, 0, 0, .72);
    --period-bg: #263a56;
    --professional-bg: #57451b;
    --revenue-bg: #1c4632;
    --expense-bg: #572731;
    --cash-bg: #263a56;
    --primary-head: #303947;
    --login-accent: #B15567;
}

* { box-sizing: border-box; }
body {
    margin: 0;
    min-height: 100vh;
    position: relative;
    isolation: isolate;
    font-family: Inter, Segoe UI, Arial, sans-serif;
    color: var(--ink);
    background: var(--page-bg);
    background-attachment: fixed;
}

body::before {
    content: "";
    position: fixed;
    inset: 0;
    z-index: -1;
    pointer-events: none;
    background:
        linear-gradient(135deg, rgba(251,248,246,.88), rgba(244,239,236,.78)),
        url("studio-background.jpeg") center / cover no-repeat;
    opacity: .34;
    filter: saturate(.9);
}

:root[data-theme="dark"] body::before {
    background:
        linear-gradient(135deg, rgba(15,23,42,.9), rgba(17,24,39,.82)),
        url("studio-background.jpeg") center / cover no-repeat;
    opacity: .28;
    filter: saturate(.75) brightness(.72);
}

:root[data-theme="rose"] body::before {
    background:
        linear-gradient(135deg, rgba(255,247,249,.88), rgba(249,236,239,.8)),
        url("studio-background.jpeg") center / cover no-repeat;
    opacity: .32;
    filter: saturate(.85);
}

:root[data-theme="champagne"] body::before {
    background:
        linear-gradient(135deg, rgba(255,250,241,.88), rgba(243,234,219,.8)),
        url("studio-background.jpeg") center / cover no-repeat;
    opacity: .30;
    filter: saturate(.8);
}

:root[data-theme="graphite"] body::before {
    background:
        linear-gradient(135deg, rgba(19,22,27,.9), rgba(17,19,24,.84)),
        url("studio-background.jpeg") center / cover no-repeat;
    opacity: .30;
    filter: saturate(.7) brightness(.66);
}

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

.sidebar {
    position: fixed;
    inset: 0 auto 0 0;
    width: 268px;
    padding: 22px 16px;
    background: var(--sidebar-bg);
    color: #fff;
    display: flex;
    flex-direction: column;
    gap: 22px;
    border-right: 1px solid rgba(255,255,255,.08);
    transition: width .22s ease, transform .22s ease, padding .22s ease;
}
.sidebar-backdrop,
.sidebar-close,
.menu-toggle {
    display: none;
}
.sidebar-collapse {
    flex: 0 0 auto;
    margin-left: auto;
    width: 36px;
    height: 36px;
    display: grid;
    place-items: center;
    border: 1px solid rgba(255,255,255,.14);
    border-radius: 999px;
    background: rgba(255,255,255,.08);
    color: #fff;
    font-size: 20px;
    line-height: 1;
    padding: 0;
}
.sidebar-collapse:hover { background: rgba(255,255,255,.16); }

.brand {
    display: grid;
    grid-template-columns: 54px minmax(0, 1fr) 36px;
    align-items: center;
    gap: 10px;
    letter-spacing: 0;
    min-height: 72px;
    padding: 10px;
    border: 1px solid rgba(255,255,255,.08);
    border-radius: 16px;
    background: rgba(255,255,255,.06);
    overflow: hidden;
}

.brand img {
    flex: 0 0 auto;
    width: 54px;
    height: 48px;
    object-fit: contain;
    border: 1px solid rgba(255,255,255,.9);
    border-radius: 12px;
    background: #fff;
    padding: 6px;
}

.brand strong {
    font-size: 19px;
    line-height: 1.1;
    min-width: 0;
}

nav { display: grid; gap: 8px; }
nav a, .logout {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 11px 12px;
    border-radius: 12px;
    color: var(--sidebar-link);
    font-size: 14px;
    font-weight: 700;
    transition: background .16s ease, transform .16s ease, color .16s ease;
}
nav a.active, nav a:hover, .logout:hover {
    background: rgba(255,255,255,.12);
    color: #fff;
    transform: translateX(2px);
}
.logout { margin-top: auto; color: #ffced7; }
.nav-icon {
    flex: 0 0 19px;
    width: 19px;
    height: 19px;
    display: inline-grid;
    place-items: center;
    opacity: .92;
}
.nav-icon svg {
    width: 19px;
    height: 19px;
    fill: currentColor;
}

.main {
    margin-left: 268px;
    padding: 24px;
    transition: margin-left .22s ease;
}
@media (min-width: 921px) {
    body.sidebar-collapsed .sidebar {
        width: 72px;
        padding: 22px 10px;
        align-items: center;
    }
    body.sidebar-collapsed .brand {
        width: 52px;
        min-height: auto;
        display: grid;
        grid-template-columns: 1fr;
        justify-items: center;
        padding: 8px;
    }
    body.sidebar-collapsed .brand img {
        display: none;
    }
    body.sidebar-collapsed .brand strong,
    body.sidebar-collapsed nav a .nav-label,
    body.sidebar-collapsed .logout .nav-label {
        display: none;
    }
    body.sidebar-collapsed .sidebar-collapse {
        margin-left: 0;
        width: 36px;
        height: 36px;
    }
    body.sidebar-collapsed nav,
    body.sidebar-collapsed .logout {
        width: 100%;
    }
    body.sidebar-collapsed nav a,
    body.sidebar-collapsed .logout {
        justify-content: center;
        min-height: 44px;
        padding: 12px 0;
        border-radius: 10px;
    }
    body.sidebar-collapsed .nav-icon {
        display: inline-grid;
        flex-basis: 22px;
        width: 22px;
        height: 22px;
        opacity: 1;
        color: rgba(255,255,255,.86);
    }
    body.sidebar-collapsed .nav-icon svg {
        width: 22px;
        height: 22px;
    }
    body.sidebar-collapsed nav a.active .nav-icon,
    body.sidebar-collapsed nav a:hover .nav-icon,
    body.sidebar-collapsed .logout:hover .nav-icon {
        color: #fff;
    }
    body.sidebar-collapsed nav a:hover,
    body.sidebar-collapsed .logout:hover {
        transform: none;
    }
    body.sidebar-collapsed .main {
        margin-left: 72px;
    }
}

.topbar {
    position: relative;
    z-index: 120;
    min-height: 70px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 16px;
    padding: 12px 14px;
    border: 1px solid var(--line);
    border-radius: 18px;
    background: color-mix(in srgb, var(--panel) 82%, transparent);
    box-shadow: var(--shadow);
    backdrop-filter: blur(14px);
}
.topbar-title {
    min-width: 0;
}
.topbar h1 { margin: 0; font-size: 28px; letter-spacing: 0; }
.top-actions {
    display: flex;
    align-items: center;
    gap: 10px;
}
.menu-toggle {
    width: 42px;
    height: 42px;
    border: 1px solid var(--line);
    border-radius: 999px;
    background: var(--panel);
    color: var(--ink);
    font-size: 20px;
    line-height: 1;
    padding: 0;
}
.appearance-menu {
    position: relative;
    z-index: 130;
}
.theme-switch {
    position: relative;
    width: 64px;
    height: 30px;
    display: grid;
    grid-template-columns: 1fr 1fr;
    align-items: center;
    border: 0;
    border-radius: 999px;
    background: #fff7f7;
    color: #78798a;
    padding: 0 6px;
    box-shadow: inset 0 0 0 1px rgba(120,121,138,.14), 0 8px 18px rgba(30, 22, 26, .10);
}
.theme-switch:hover {
    background: #fff7f7;
    transform: translateY(-1px);
}
.theme-switch i {
    position: absolute;
    top: 4px;
    left: 4px;
    width: 22px;
    height: 22px;
    border-radius: 999px;
    background: #7e8093;
    box-shadow: 0 5px 12px rgba(72,73,90,.22);
    transition: transform .2s ease, background .2s ease;
}
.theme-sun,
.theme-moon {
    position: relative;
    z-index: 1;
    width: 14px;
    height: 14px;
    justify-self: center;
}
.theme-sun {
    border-radius: 999px;
    border: 2px solid #78798a;
    background: transparent;
}
.theme-sun::before,
.theme-sun::after {
    content: "";
    position: absolute;
    inset: -6px;
    background:
        linear-gradient(#78798a, #78798a) center 0 / 2px 5px no-repeat,
        linear-gradient(#78798a, #78798a) center 100% / 2px 5px no-repeat,
        linear-gradient(90deg, #78798a, #78798a) 0 center / 5px 2px no-repeat,
        linear-gradient(90deg, #78798a, #78798a) 100% center / 5px 2px no-repeat;
}
.theme-sun::after {
    transform: rotate(45deg);
}
.theme-moon {
    width: 14px;
    height: 14px;
    border-radius: 999px;
    background: #78798a;
}
.theme-moon::after {
    content: "";
    position: absolute;
    top: -1px;
    left: 5px;
    width: 14px;
    height: 14px;
    border-radius: inherit;
    background: #fff7f7;
}
:root[data-theme="dark"] .theme-switch {
    background: #7e8093;
    box-shadow: inset 0 0 0 1px rgba(255,255,255,.18), 0 10px 26px rgba(0,0,0,.18);
}
:root[data-theme="dark"] .theme-switch:hover {
    background: #7e8093;
}
:root[data-theme="dark"] .theme-switch i {
    transform: translateX(0);
    background: #fff7f7;
}
:root[data-theme="light"] .theme-switch i {
    transform: translateX(34px);
}
:root[data-theme="dark"] .theme-sun {
    border-color: #fff7f7;
}
:root[data-theme="dark"] .theme-sun::before,
:root[data-theme="dark"] .theme-sun::after {
    background:
        linear-gradient(#fff7f7, #fff7f7) center 0 / 2px 5px no-repeat,
        linear-gradient(#fff7f7, #fff7f7) center 100% / 2px 5px no-repeat,
        linear-gradient(90deg, #fff7f7, #fff7f7) 0 center / 5px 2px no-repeat,
        linear-gradient(90deg, #fff7f7, #fff7f7) 100% center / 5px 2px no-repeat;
}
:root[data-theme="dark"] .theme-moon {
    background: #fff7f7;
}
:root[data-theme="dark"] .theme-moon::after {
    background: #7e8093;
}
.appearance-button {
    width: 42px;
    height: 42px;
    display: grid;
    place-items: center;
    border: 1px solid var(--line);
    border-radius: 999px;
    background: color-mix(in srgb, var(--panel) 88%, transparent);
    color: var(--ink);
    padding: 0;
    box-shadow: 0 10px 24px rgba(30, 22, 26, .08);
}
.appearance-button:hover,
.appearance-button[aria-expanded="true"] {
    border-color: var(--rose);
    color: var(--rose);
    background: color-mix(in srgb, var(--rose) 10%, var(--panel));
}
.appearance-button svg {
    width: 19px;
    height: 19px;
    fill: currentColor;
}
.appearance-popover {
    position: absolute;
    top: calc(100% + 10px);
    right: 0;
    z-index: 240;
    width: 190px;
    display: none;
    gap: 4px;
    padding: 8px;
    border: 1px solid var(--line);
    border-radius: 14px;
    background: color-mix(in srgb, var(--panel) 94%, transparent);
    box-shadow: var(--shadow);
    backdrop-filter: blur(16px);
}
.appearance-popover.open {
    display: grid;
}
.appearance-popover p {
    margin: 2px 6px 6px;
    color: var(--muted);
    font-size: 11px;
    font-weight: 900;
    text-transform: uppercase;
}
.appearance-popover button {
    width: 100%;
    min-height: 36px;
    display: flex;
    align-items: center;
    gap: 9px;
    border: 0;
    border-radius: 10px;
    background: transparent;
    color: var(--ink);
    padding: 8px 9px;
    font-size: 13px;
    font-weight: 800;
    text-align: left;
}
.appearance-popover button:hover,
.appearance-popover button.active {
    background: color-mix(in srgb, var(--rose) 12%, var(--soft));
}
.appearance-popover i {
    width: 15px;
    height: 15px;
    border: 2px solid color-mix(in srgb, #fff 62%, transparent);
    border-radius: 999px;
    background: var(--swatch);
    box-shadow: 0 0 0 1px var(--line);
}
.appearance-popover button.active::after {
    content: "✓";
    margin-left: auto;
    color: var(--rose);
    font-weight: 900;
}
:root[data-theme="dark"] .appearance-popover button:hover,
:root[data-theme="dark"] .appearance-popover button.active,
:root[data-theme="graphite"] .appearance-popover button:hover,
:root[data-theme="graphite"] .appearance-popover button.active {
    background: rgba(255,255,255,.08);
    color: #fff;
}
:root[data-theme="dark"] .appearance-popover button.active::after,
:root[data-theme="graphite"] .appearance-popover button.active::after {
    color: #fff;
}
.notification-menu {
    position: relative;
    z-index: 130;
    display: grid;
    place-items: center;
    overflow: visible;
}
.notification-button {
    position: relative;
    width: 42px;
    height: 42px;
    display: grid;
    place-items: center;
    border: 1px solid var(--line);
    border-radius: 999px;
    background: color-mix(in srgb, var(--panel) 88%, transparent);
    color: var(--ink);
    padding: 0;
    overflow: visible;
    line-height: 1;
    box-shadow: 0 10px 24px rgba(30, 22, 26, .08);
}
.notification-button:hover,
.notification-button[aria-expanded="true"] {
    border-color: var(--rose);
    color: var(--rose);
    background: color-mix(in srgb, var(--rose) 10%, var(--panel));
}
.appearance-button:hover,
.appearance-button[aria-expanded="true"],
.notification-button:hover,
.notification-button[aria-expanded="true"],
.menu-toggle:hover {
    transform: translateY(-1px);
}
:root[data-theme="dark"] .appearance-button:hover,
:root[data-theme="dark"] .appearance-button[aria-expanded="true"],
:root[data-theme="dark"] .notification-button:hover,
:root[data-theme="dark"] .notification-button[aria-expanded="true"],
:root[data-theme="dark"] .menu-toggle:hover,
:root[data-theme="graphite"] .appearance-button:hover,
:root[data-theme="graphite"] .appearance-button[aria-expanded="true"],
:root[data-theme="graphite"] .notification-button:hover,
:root[data-theme="graphite"] .notification-button[aria-expanded="true"],
:root[data-theme="graphite"] .menu-toggle:hover {
    border-color: rgba(255,255,255,.62);
    color: #fff;
    background: rgba(255,255,255,.08);
}
.notification-button svg {
    width: 19px;
    height: 19px;
    display: block;
    fill: currentColor;
}
.notification-button > span {
    position: absolute;
    top: -4px;
    right: -3px;
    min-width: 18px;
    height: 18px;
    display: grid;
    place-items: center;
    border: 2px solid var(--panel);
    border-radius: 999px;
    background: var(--danger);
    color: #fff;
    font-size: 10px;
    font-weight: 900;
}
.notification-popover {
    position: absolute;
    top: calc(100% + 10px);
    right: 0;
    z-index: 250;
    width: min(360px, 86vw);
    max-height: 420px;
    display: none;
    gap: 8px;
    overflow-y: auto;
    padding: 10px;
    border: 1px solid var(--line);
    border-radius: 16px;
    background: color-mix(in srgb, var(--panel) 96%, transparent);
    box-shadow: var(--shadow);
    backdrop-filter: blur(16px);
}
.notification-popover.open {
    display: grid;
}
.notification-head {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    align-items: center;
    padding: 3px 4px 7px;
    border-bottom: 1px solid var(--line);
}
.notification-head strong {
    font-size: 14px;
}
.notification-head small,
.notification-empty {
    color: var(--muted);
    font-size: 12px;
    font-weight: 800;
}
.notification-empty {
    margin: 2px 4px 6px;
}
.notification-item {
    display: grid;
    gap: 6px;
    padding: 10px;
    border: 1px solid var(--line);
    border-radius: 12px;
    background: color-mix(in srgb, var(--soft) 70%, transparent);
}
.notification-item.notification-success {
    border-color: color-mix(in srgb, var(--success) 58%, var(--line));
    background: color-mix(in srgb, var(--success) 14%, var(--soft));
}
.notification-item.notification-warning {
    border-color: color-mix(in srgb, var(--gold) 62%, var(--line));
    background: color-mix(in srgb, var(--gold) 14%, var(--soft));
}
.notification-item.notification-danger {
    border-color: color-mix(in srgb, var(--danger) 62%, var(--line));
    background: color-mix(in srgb, var(--danger) 14%, var(--soft));
}
.notification-item b {
    color: var(--ink);
    font-size: 13px;
}
.notification-item p {
    margin: 0;
    color: var(--muted);
    font-size: 12px;
    line-height: 1.35;
}
.notification-item small {
    color: var(--muted);
    font-size: 11px;
    font-weight: 800;
}
.notification-item form {
    margin: 2px 0 0;
}
.notification-item button,
.notification-link {
    width: auto;
    min-height: 30px;
    justify-self: start;
    padding: 6px 10px;
    border: 0;
    border-radius: 9px;
    background: var(--success);
    color: #fff;
    font-size: 12px;
    font-weight: 900;
    text-decoration: none;
}
.notification-item button:hover,
.notification-link:hover {
    background: var(--success-dark);
}
.user-chip {
    display: grid;
    justify-items: center;
    gap: 3px;
    min-width: 64px;
    color: var(--ink);
    font-size: 11px;
    font-weight: 900;
}
.user-chip span {
    max-width: 92px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.avatar {
    width: 38px;
    height: 38px;
    display: inline-grid;
    place-items: center;
    overflow: hidden;
    border: 1px solid var(--line);
    border-radius: 999px;
    background: color-mix(in srgb, var(--rose) 18%, var(--panel));
    color: var(--rose-dark);
    font-size: 12px;
    font-weight: 900;
}
.avatar.small {
    width: 34px;
    height: 34px;
}
.avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.person-cell {
    display: inline-flex;
    align-items: center;
    gap: 10px;
}

.login-screen {
    min-height: 100vh;
    display: block;
    padding: 0;
    background: #fff;
    color: #1e1e1e;
}
.login-shell {
    width: 100%;
    min-height: 100vh;
    display: grid;
    grid-template-columns: minmax(520px, 1fr) 520px;
    background: linear-gradient(90deg, color-mix(in srgb, var(--login-accent) 14%, #fff) 0%, color-mix(in srgb, var(--login-accent) 14%, #fff) calc(100% - 520px), #fff calc(100% - 520px), #fff 100%);
}
.login-visual {
    position: relative;
    display: grid;
    align-content: center;
    justify-items: center;
    padding: 54px 64px;
    overflow: hidden;
    color: #fff;
    background:
        linear-gradient(135deg, rgba(177,85,103,.64), rgba(177,85,103,.30)),
        url("login-bg-dm-nails.jpeg") center / cover no-repeat;
}
.login-visual::before {
    content: "";
    position: absolute;
    inset: 0;
    background:
        radial-gradient(circle at 25% 20%, rgba(255,255,255,.28), transparent 32%),
        linear-gradient(90deg, rgba(38,21,29,.24), rgba(38,21,29,.04));
    pointer-events: none;
}
.login-visual::after {
    content: "";
    position: absolute;
    inset: 0 0 0 auto;
    width: 1px;
    background: #d6c8cc;
    box-shadow: 12px 0 28px rgba(46, 35, 41, .10);
}
.login-form-area {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 100vh;
    box-sizing: border-box;
    padding: 56px 52px 96px;
    background: #fff;
}
.login-card {
    width: 420px;
    max-width: 100%;
    display: flex;
    flex-direction: column;
    padding: 0;
    background: #fff;
}
.login-card-head {
    display: grid;
    justify-items: center;
    margin-bottom: 34px;
}
.login-card-head img {
    width: 170px;
    height: 122px;
    object-fit: contain;
    margin-bottom: 14px;
}
.login-card-head h2 {
    max-width: none;
    margin: 0;
    color: #1e1e1e;
    font-size: 18px;
    line-height: 1.25;
    text-align: center;
    font-weight: 700;
    white-space: nowrap;
}
.floating-field {
    position: relative;
    margin-bottom: 18px;
}
.floating-field input {
    height: 56px;
    width: 100%;
    min-width: 160px;
    padding: 20px 48px 8px 20px;
    border: 1px solid #dbdbdb;
    border-radius: 8px;
    background: #fff;
    color: #1e1e1e;
    font-size: 14px;
}
.floating-field span {
    position: absolute;
    left: 20px;
    top: 18px;
    color: #666;
    font-size: 14px;
    transition: all .16s ease;
    pointer-events: none;
}
.floating-field input:focus + span,
.floating-field input:not(:placeholder-shown) + span {
    top: 8px;
    font-size: 11px;
    font-weight: 700;
    color: var(--login-accent);
    text-transform: uppercase;
}
.floating-field input:focus {
    outline: none;
    border-color: var(--login-accent);
    background: #fff4f7;
}
.login-actions {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 14px;
    margin-top: 12px;
}
.login-actions button {
    width: 100%;
    height: 56px;
    display: grid;
    place-items: center;
    border-radius: 8px;
    font-size: 16px;
    font-weight: 400;
}
.login-actions button {
    border: 1px solid var(--login-accent);
    background: var(--login-accent);
    color: #fff;
}
.login-actions button:hover {
    background: color-mix(in srgb, var(--login-accent) 82%, #451423);
}
.login-partner-footer {
    position: absolute;
    right: 52px;
    bottom: 28px;
    left: 52px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    color: #7a7a7a;
    font-size: 11px;
    line-height: 1;
}
.login-partner-link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 2px 0;
    opacity: .72;
    transition: opacity .2s ease, transform .2s ease;
}
.login-partner-link img {
    display: block;
    width: min(156px, 42vw);
    max-height: 28px;
    object-fit: contain;
}
.login-partner-link:hover,
.login-partner-link:focus-visible {
    opacity: 1;
    transform: translateY(-1px);
}

.metrics {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 14px;
    margin-bottom: 18px;
}
.basic-metrics {
    grid-template-columns: 1fr 2fr;
}
.commission-metrics {
    grid-template-columns: repeat(3, minmax(0, 1fr));
}
.metrics article {
    background: var(--panel);
    border: 1px solid var(--line);
    border-radius: 18px;
    padding: 18px;
    box-shadow: var(--shadow);
}
.metrics > article > span { color: var(--muted); font-size: 13px; }
.metrics > article > strong { display: block; margin-top: 10px; font-size: 25px; }
.metric-card { min-height: 210px; }
.metrics > .metric-card {
    position: relative;
    overflow: hidden;
}
.commission-metrics .metric-card {
    min-height: 170px;
    display: flex;
    flex-direction: column;
}
.commission-metrics .metric-card > strong {
    font-size: 29px;
}
.commission-due > strong { color: var(--ink); }
.commission-paid > strong { color: var(--success); }
.commission-balance > strong { color: var(--blue); }
.access-note,
.form-hint {
    margin: 14px 0 0;
    color: var(--muted);
    font-size: 12px;
    line-height: 1.5;
}
.metric-lines {
    display: grid;
    gap: 8px;
    margin-top: 14px;
}
.metric-lines p {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    margin: 0;
    padding-top: 8px;
    border-top: 1px solid var(--line);
    color: var(--muted);
    font-size: 12px;
}
.metric-lines b {
    color: var(--ink);
    overflow: hidden;
    text-overflow: ellipsis;
}
.metric-lines em {
    color: var(--ink);
    font-style: normal;
    font-weight: 800;
    white-space: nowrap;
}
.metric-chart {
    display: grid;
    gap: 10px;
    margin-top: 14px;
}
.metric-chart + .metric-chart {
    margin-top: 16px;
    padding-top: 14px;
    border-top: 1px solid var(--line);
}
.metric-chart h3 {
    margin: 0 0 2px;
    color: var(--muted);
    font-size: 11px;
    font-weight: 900;
    letter-spacing: .04em;
    text-transform: uppercase;
}
.chart-row {
    display: grid;
    gap: 6px;
}
.chart-row-head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 12px;
    color: var(--ink);
    font-size: 12px;
}
.chart-row-head b {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.chart-row-head em {
    flex: 0 0 auto;
    color: var(--ink);
    font-style: normal;
    font-weight: 900;
    white-space: nowrap;
}
.chart-track {
    display: block;
    height: 8px;
    overflow: hidden;
    border-radius: 999px;
    background: color-mix(in srgb, var(--line) 68%, transparent);
}
.chart-track i {
    display: block;
    width: var(--bar);
    height: 100%;
    border-radius: inherit;
    background: linear-gradient(90deg, var(--vivid-green), var(--vivid-cyan));
}
.chart-row.is-negative .chart-track i {
    background: linear-gradient(90deg, var(--vivid-red), #ff7a66);
}
.chart-empty {
    margin: 0;
    color: var(--muted);
    font-size: 12px;
}
.metric-pie {
    display: grid;
    grid-template-columns: 96px minmax(0, 1fr);
    align-items: center;
    gap: 14px;
    margin-top: 16px;
    padding-top: 14px;
    border-top: 1px solid var(--line);
}
.pie-chart {
    position: relative;
    width: 96px;
    aspect-ratio: 1;
    border-radius: 50%;
    box-shadow: inset 0 0 0 1px rgba(255,255,255,.12), 0 12px 30px rgba(0,0,0,.12);
}
.pie-chart span {
    position: absolute;
    inset: 30%;
    border-radius: inherit;
    background: var(--panel);
    box-shadow: inset 0 0 0 1px var(--line);
}
.pie-legend {
    display: grid;
    gap: 7px;
    min-width: 0;
}
.pie-legend p {
    display: grid;
    grid-template-columns: 10px minmax(0, 1fr) auto;
    align-items: center;
    gap: 7px;
    margin: 0;
    color: var(--muted);
    font-size: 11px;
}
.pie-legend i {
    width: 10px;
    height: 10px;
    border-radius: 50%;
}
.pie-legend b {
    min-width: 0;
    overflow: hidden;
    color: var(--ink);
    text-overflow: ellipsis;
    white-space: nowrap;
}
.pie-legend em {
    color: var(--ink);
    font-style: normal;
    font-weight: 900;
    white-space: nowrap;
}
.panel-pie {
    margin: 2px 0 18px;
    padding: 14px;
    border: 1px solid color-mix(in srgb, var(--vivid-cyan) 26%, var(--line));
    border-radius: 14px;
    background:
        linear-gradient(135deg, color-mix(in srgb, var(--vivid-cyan) 8%, transparent), transparent 62%),
        color-mix(in srgb, var(--soft) 72%, transparent);
}
.panel-pie h3 {
    margin: 0 0 12px;
    color: color-mix(in srgb, var(--vivid-cyan) 72%, var(--ink));
    font-size: 11px;
    font-weight: 900;
    letter-spacing: .04em;
    text-transform: uppercase;
}
.panel-pie .metric-pie {
    grid-template-columns: 148px minmax(0, 1fr);
    margin: 0;
    padding: 0;
    border-top: 0;
}
.panel-pie .pie-chart {
    width: 148px;
}
.panel-pie .pie-legend {
    gap: 9px;
}
.panel-pie .pie-legend p {
    font-size: 12px;
}
.metrics article:nth-child(2) > strong { color: var(--blue); }
.metrics article:nth-child(3) > strong { color: var(--sage); }
.metrics article:nth-child(4) > strong { color: var(--gold); }

.grid { display: grid; gap: 18px; }
.two { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.wide { grid-column: 1 / -1; }
.form-list { grid-template-columns: 330px minmax(0, 1fr); align-items: start; }
.intake { grid-template-columns: 390px minmax(0, 1fr); align-items: start; }

.dashboard-filter {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-start;
    gap: 12px;
    margin: -8px 0 18px;
}
.dashboard-filter label {
    width: 170px;
    margin: 0;
}
.period-chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin: -6px 0 18px;
    padding: 8px 12px;
    border: 1px solid var(--line);
    border-radius: 999px;
    background: var(--panel);
    color: var(--muted);
    font-size: 12px;
    font-weight: 800;
}
.period-chip strong {
    color: var(--ink);
}

.agenda-search-panel {
    display: grid;
    grid-template-columns: minmax(260px, 1fr) auto;
    align-items: end;
    gap: 12px;
    margin: 0 0 18px;
    padding: 14px;
    border: 1px solid var(--line);
    border-radius: 18px;
    background: color-mix(in srgb, var(--panel) 88%, transparent);
    box-shadow: var(--shadow);
    backdrop-filter: blur(14px);
}
.agenda-search-panel label {
    margin: 0;
}
.agenda-search-panel input {
    min-height: 42px;
}
.agenda-search-actions {
    display: flex;
    align-items: center;
    gap: 8px;
}
.agenda-search-actions button,
.agenda-search-actions .form-cancel {
    min-height: 42px;
    margin: 0;
    white-space: nowrap;
}
.search-feedback {
    grid-column: 1 / -1;
    margin: -2px 0 0;
    padding: 9px 11px;
    border: 1px solid color-mix(in srgb, var(--gold) 34%, var(--line));
    border-radius: 12px;
    background: color-mix(in srgb, var(--gold) 13%, var(--panel));
    color: var(--ink);
    font-size: 12px;
    font-weight: 800;
}
.search-feedback.success {
    border-color: color-mix(in srgb, var(--success) 34%, var(--line));
    background: color-mix(in srgb, var(--success) 12%, var(--panel));
}

.agenda-google-app {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 18px;
    align-items: start;
}
.agenda-create-card,
.agenda-google-main {
    border: 1px solid var(--line);
    border-radius: 18px;
    background: var(--panel);
    box-shadow: var(--shadow);
}
.agenda-create-card {
    padding: 16px;
}
.agenda-create-card.form-dropdown {
    padding: 0;
}
.agenda-create-card .collapsible-body {
    display: grid;
    grid-template-columns: repeat(4, minmax(170px, 1fr));
    align-items: end;
    gap: 12px;
    padding: 14px 16px 16px;
}
.agenda-date-row {
    grid-template-columns: repeat(2, minmax(150px, 1fr));
    grid-column: span 2;
}
.agenda-create-card textarea {
    min-height: 44px;
    max-height: 82px;
}
.agenda-create-card label:has(textarea),
.agenda-create-card .form-cancel-wide,
.agenda-create-card datalist {
    grid-column: span 2;
}
.agenda-create-card button {
    min-height: 44px;
    align-self: end;
    grid-column: span 2;
}
.agenda-create-card .agenda-form-submit,
.agenda-create-card .form-cancel-wide {
    width: min(100%, 420px);
    min-height: 40px;
    margin-top: 0;
    justify-self: start;
}
.agenda-all-day-check {
    width: fit-content;
    align-self: end;
    align-items: center;
    gap: 9px;
    padding: 8px 10px;
    border: 1px solid var(--line);
    border-radius: 999px;
    background: var(--soft);
    cursor: pointer;
}
.agenda-all-day-check input {
    width: 16px;
    height: 16px;
    accent-color: var(--success);
}
.agenda-all-day-check span {
    display: none;
}
.agenda-all-day-check em {
    position: static;
    width: auto;
    height: auto;
    overflow: visible;
    clip: auto;
    color: var(--ink);
    font-size: 12px;
    font-style: normal;
    font-weight: 900;
}
.agenda-create-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 14px;
}
.agenda-create-head h2 {
    margin: 0;
    font-size: 22px;
}
.agenda-create-head span {
    color: var(--muted);
    font-size: 12px;
    font-weight: 800;
}
.agenda-google-main {
    overflow: hidden;
}
.agenda-mobile-sticky-head {
    display: contents;
}
.agenda-google-toolbar {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 14px;
    border-bottom: 1px solid var(--line);
    background: color-mix(in srgb, var(--panel) 88%, transparent);
}
.agenda-google-toolbar > a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 36px;
    border: 1px solid var(--line);
    border-radius: 999px;
    padding: 0 14px;
    background: var(--input);
    color: var(--ink);
    font-size: 13px;
    font-weight: 900;
}
.agenda-google-toolbar .icon-nav {
    width: 36px;
    padding: 0;
    font-size: 26px;
    line-height: 1;
}
.agenda-google-toolbar h2 {
    flex: 1;
    margin: 0 8px;
    font-size: 20px;
    letter-spacing: 0;
}
.agenda-today-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 36px;
    border: 1px solid var(--line);
    border-radius: 999px;
    padding: 0 12px;
    background: var(--input);
    color: var(--ink);
    font-size: 12px;
    font-weight: 900;
    text-decoration: none;
    white-space: nowrap;
}
.agenda-today-button:hover,
.agenda-today-button:focus-visible {
    border-color: #d8dce5;
    background: #fff;
    color: #1f2937;
}
.agenda-view-switch {
    display: flex !important;
    width: 142px !important;
    flex: 0 0 142px;
    gap: 5px;
    margin: 0 !important;
    color: var(--muted);
    font-size: 10px;
    font-weight: 900;
    text-transform: uppercase;
}
.agenda-view-switch select {
    width: 100%;
    min-height: 36px;
    padding: 7px 10px;
    font-size: 12px;
    text-transform: none;
}
.agenda-mobile-filter-actions {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-left: auto;
}
.agenda-mobile-filter-toggle {
    display: grid;
    width: 36px;
    height: 36px;
    min-height: 36px;
    place-items: center;
    padding: 0;
    border: 1px solid var(--line);
    border-radius: 10px;
    background: var(--input);
    color: var(--muted);
}
.agenda-mobile-filter-toggle svg {
    width: 17px;
    height: 17px;
    fill: currentColor;
}
.agenda-mobile-filter-toggle:hover,
.agenda-mobile-filter-toggle:active,
.agenda-mobile-filter-toggle:focus-visible,
.agenda-mobile-filter-toggle[aria-expanded="true"] {
    background: #fff !important;
    border-color: #d8dce5;
    color: #1f2937 !important;
}
.agenda-mobile-create-toggle {
    border-color: color-mix(in srgb, var(--success) 55%, var(--line));
    color: var(--success);
}
.agenda-floating-create {
    position: fixed;
    right: 28px;
    bottom: 28px;
    z-index: 155;
    display: grid;
    width: 60px;
    height: 60px;
    min-height: 60px;
    place-items: center;
    padding: 0;
    border: 1px solid color-mix(in srgb, var(--success) 72%, #fff);
    border-radius: 50%;
    background: color-mix(in srgb, var(--success) 86%, transparent);
    color: #fff;
    box-shadow: 0 12px 26px color-mix(in srgb, var(--success) 26%, transparent), 0 0 0 4px color-mix(in srgb, var(--success) 12%, transparent);
    cursor: pointer;
    transition: transform .18s ease, filter .18s ease, box-shadow .18s ease;
}
.agenda-floating-create svg {
    width: 26px;
    height: 26px;
    fill: currentColor;
}
.agenda-floating-create:hover,
.agenda-floating-create:focus-visible {
    background: var(--success);
    color: #fff;
    filter: brightness(1.06);
    transform: translateY(-2px) scale(1.03);
    box-shadow: 0 15px 30px color-mix(in srgb, var(--success) 34%, transparent), 0 0 0 5px color-mix(in srgb, var(--success) 15%, transparent);
}
.agenda-floating-create:active {
    transform: translateY(0) scale(.98);
}
.agenda-google-toolbar > label[data-agenda-filter-field] {
    display: none;
}
.agenda-google-toolbar.filter-professional-open > label[data-agenda-filter-field="professional"],
.agenda-google-toolbar.filter-client-open > label[data-agenda-filter-field="client"] {
    display: flex;
}
.agenda-google-toolbar .agenda-toolbar-submit {
    display: none;
}
.agenda-google-toolbar.filter-client-open .agenda-toolbar-submit {
    display: inline-flex;
}
.agenda-create-top {
    display: none;
}
.gcal-mobile-weekdays-fixed {
    display: none;
}
.agenda-google-toolbar label {
    width: 150px;
    margin: 0;
}
.agenda-google-toolbar label:has(select) {
    width: 230px;
}
.agenda-google-toolbar select {
    min-height: 36px;
    padding: 7px 10px;
}
.agenda-toolbar-search {
    width: 180px !important;
}
.agenda-toolbar-search input {
    min-height: 36px;
    padding: 7px 10px;
}
.agenda-toolbar-submit,
.agenda-toolbar-clear {
    min-height: 36px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 999px;
    padding: 0 12px;
    font-size: 12px;
    font-weight: 900;
    white-space: nowrap;
}
.agenda-toolbar-submit {
    width: auto;
    border: 1px solid transparent;
    background: var(--success);
    color: #fff;
}
.agenda-toolbar-submit:hover,
.agenda-toolbar-submit:active,
.agenda-toolbar-submit:focus-visible {
    border: 1px solid var(--success);
    background: #fff;
    color: var(--success);
}
.agenda-toolbar-clear {
    border: 1px solid var(--line);
    background: var(--input);
    color: var(--ink);
    text-decoration: none;
}
.agenda-toolbar-clear.agenda-toolbar-reset {
    width: 36px;
    min-width: 36px;
    height: 36px;
    min-height: 36px;
    padding: 0;
    border-radius: 10px;
}
.agenda-toolbar-reset svg {
    width: 17px;
    height: 17px;
    fill: currentColor;
}
@media (min-width: 641px) {
    .agenda-google-toolbar h2 {
        flex: 0 0 auto;
    }
    .agenda-google-toolbar .agenda-view-switch {
        margin-left: auto !important;
    }
}

@media (min-width: 1101px) {
    body:has(.agenda-google-app) .topbar {
        position: sticky;
        top: 8px;
        z-index: 140;
    }
    body:has(.agenda-google-app) .agenda-mobile-sticky-head {
        top: 88px;
    }
}
.agenda-create-modal .agenda-create-card {
    border: 0;
    border-radius: 0;
    box-shadow: none;
    background: transparent;
    padding: 0;
}
.agenda-create-modal .agenda-create-card > summary {
    display: none;
}
@media (min-width: 1101px) {
    /* Keep the desktop appointment form vertical and close to the mobile reading order. */
    .modal.agenda-create-modal-card {
        width: min(540px, calc(100vw - 120px));
        max-width: calc(100vw - 40px);
        box-sizing: border-box;
        padding: 22px;
    }
    .agenda-create-modal-card .modal-close {
        top: 14px;
        right: 14px;
    }
    .agenda-create-modal .agenda-create-card .collapsible-body {
        grid-template-columns: 1fr;
        gap: 8px;
        padding: 8px 16px 12px;
    }
    .agenda-create-modal-card .modal-head {
        margin-bottom: 10px;
    }
    .agenda-create-modal-card .modal-head h2 {
        font-size: 24px;
    }
    .agenda-create-modal .agenda-create-card label {
        gap: 3px;
        margin-bottom: 5px;
        font-size: 11px;
    }
    .agenda-create-modal .agenda-create-card input,
    .agenda-create-modal .agenda-create-card select,
    .agenda-create-modal .agenda-create-card textarea {
        padding: 7px 10px;
        border-radius: 10px;
        font-size: 13px;
    }
    .agenda-create-modal .agenda-create-card textarea {
        min-height: 42px;
        max-height: 54px;
    }
    .agenda-create-modal .agenda-create-card > .collapsible-body > label,
    .agenda-create-modal .agenda-create-card .agenda-date-row,
    .agenda-create-modal .agenda-create-card [data-agenda-time-row],
    .agenda-create-modal .agenda-create-card .agenda-payment-fields,
    .agenda-create-modal .agenda-create-card .agenda-split-preview,
    .agenda-create-modal .agenda-create-card .agenda-form-submit,
    .agenda-create-modal .agenda-create-card .form-cancel-wide {
        grid-column: auto;
        width: min(100%, 460px);
    }
    .agenda-create-modal .agenda-create-card > .collapsible-body > label:has(textarea) {
        width: min(100%, 460px);
    }
    .agenda-create-modal .agenda-create-card .agenda-date-row,
    .agenda-create-modal .agenda-create-card [data-agenda-time-row],
    .agenda-create-modal .agenda-create-card .agenda-payment-fields,
    .agenda-create-modal .agenda-create-card .agenda-split-preview,
    .agenda-create-modal .agenda-create-card .agenda-form-submit,
    .agenda-create-modal .agenda-create-card .form-cancel-wide {
        justify-self: start;
    }
    .agenda-create-modal .agenda-create-card .agenda-form-submit,
    .agenda-create-modal .agenda-create-card .form-cancel-wide {
        width: min(100%, 420px);
        min-height: 36px;
    }
    .agenda-create-modal .agenda-create-card .agenda-all-day-check {
        padding: 6px 9px;
    }
    .agenda-create-modal .agenda-create-card .agenda-split-preview {
        margin: 0;
    }
    .agenda-create-modal .agenda-create-card .agenda-split-preview span {
        min-height: 56px;
        padding: 9px 10px;
    }
}
.agenda-inline-feedback {
    margin: 8px 14px;
}
.agenda-status-strip {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    padding: 8px 14px;
    border-bottom: 1px solid var(--line);
}
.agenda-status-strip span,
.agenda-status-strip a {
    display: inline-flex;
    align-items: center;
    border-radius: 999px;
    padding: 6px 10px;
    background: var(--soft);
    color: var(--muted);
    font-size: 12px;
    font-weight: 800;
    text-decoration: none;
    transition: filter .15s ease, box-shadow .15s ease, transform .15s ease;
}
.agenda-status-strip a:hover {
    filter: brightness(1.08);
    transform: translateY(-1px);
}
.agenda-status-filter.completed {
    background: color-mix(in srgb, #188038 16%, var(--panel));
    color: #188038;
}
.agenda-status-filter.booked {
    background: color-mix(in srgb, #1a73e8 16%, var(--panel));
    color: #1a73e8;
}
.agenda-status-filter.blocked {
    background: color-mix(in srgb, #dc2626 16%, var(--panel));
    color: #dc2626;
}
.agenda-status-filter.is-active {
    box-shadow: 0 0 0 2px currentColor;
}
.agenda-status-strip b {
    color: currentColor;
}
.gcal-month-grid {
    display: none;
    grid-template-columns: repeat(7, minmax(118px, 1fr));
    min-width: 760px;
    border: 1px solid var(--line);
    background: var(--panel);
    gap: 0;
}
.gcal-mobile-agenda {
    display: none;
}
.agenda-day-view {
    padding: 16px;
    background: color-mix(in srgb, var(--input) 88%, var(--panel));
}
.agenda-day-view-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 14px;
    padding: 0 4px 14px;
    border-bottom: 1px solid var(--line);
}
.agenda-day-view-head small {
    display: block;
    margin-bottom: 4px;
    color: var(--muted);
    font-size: 11px;
    font-weight: 900;
    text-transform: uppercase;
}
.agenda-day-view-head h3 {
    margin: 0;
    color: var(--ink);
    font-size: 22px;
}
.agenda-day-view-head nav {
    display: flex;
    gap: 8px;
}
.agenda-day-view-head .icon-action {
    display: grid;
    width: 36px;
    height: 36px;
    min-height: 36px;
    place-items: center;
    padding: 0;
    font-size: 22px;
    line-height: 1;
    text-decoration: none;
}
.agenda-day-week {
    display: grid;
    grid-template-columns: repeat(7, minmax(0, 1fr));
    margin: 0 0 14px;
    overflow: hidden;
    border: 1px solid var(--line);
    border-radius: 10px;
    background: var(--line);
    gap: 1px;
}
.agenda-day-week-day {
    display: flex;
    min-width: 0;
    min-height: 56px;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 4px;
    padding: 7px 4px;
    background: var(--panel);
    color: var(--muted);
    text-decoration: none;
}
.agenda-day-week-day:hover,
.agenda-day-week-day:focus-visible {
    background: #fff;
    color: #1f2937;
}
.agenda-day-week-day small {
    font-size: 10px;
    font-weight: 900;
}
.agenda-day-week-day strong {
    color: var(--ink);
    font-size: 17px;
    line-height: 1;
}
.agenda-day-week-day.is-selected {
    background: color-mix(in srgb, var(--blue) 18%, var(--panel));
    box-shadow: inset 0 -3px 0 var(--blue);
    color: var(--blue);
}
.agenda-day-week-day.is-selected strong {
    color: var(--blue);
}
.agenda-day-week-day.is-today:not(.is-selected) strong {
    display: grid;
    width: 28px;
    height: 28px;
    place-items: center;
    border-radius: 50%;
    background: #f59e0b;
    color: #fff;
}
.agenda-day-status-dots {
    display: inline-flex;
    min-height: 7px;
    align-items: center;
    justify-content: center;
    gap: 4px;
}
.agenda-day-status-dot {
    display: block;
    width: 7px;
    height: 7px;
    flex: 0 0 7px;
    border-radius: 50%;
}
.agenda-day-status-dot.status-completed {
    background: #188038;
}
.agenda-day-status-dot.status-booked {
    background: #1a73e8;
}
.agenda-day-status-dot.status-blocked {
    background: #dc2626;
}
.agenda-day-empty {
    margin: 8px 4px 14px;
    color: var(--muted);
    font-size: 13px;
}
.agenda-day-timeline {
    position: relative;
    min-height: 1152px;
    overflow: hidden;
    border: 1px solid var(--line);
    border-radius: 10px;
    background: color-mix(in srgb, var(--input) 90%, var(--panel));
}
.agenda-day-hours {
    display: grid;
    grid-template-rows: repeat(18, 64px);
}
.agenda-day-hour {
    display: grid;
    grid-template-columns: 74px minmax(0, 1fr);
    min-height: 64px;
}
.agenda-day-hour time {
    padding: 10px 12px 0 10px;
    color: var(--muted);
    font-size: 11px;
    font-weight: 900;
    text-align: right;
}
.agenda-day-hour span {
    border-top: 1px solid var(--line);
}
.agenda-day-events {
    position: absolute;
    inset: 0 0 0 74px;
}
.agenda-day-event {
    position: absolute;
    top: var(--event-top);
    right: 12px;
    left: 10px;
    height: var(--event-height);
    min-height: 46px;
    z-index: 2;
    border: 1px solid color-mix(in srgb, var(--event-color) 58%, var(--line));
    border-radius: 8px;
    box-shadow: 0 5px 12px color-mix(in srgb, var(--event-color) 14%, transparent);
}
.agenda-day-event .gcal-event-open {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    align-content: center;
    gap: 3px 8px;
    height: 100%;
    min-height: 46px;
    padding: 8px 10px;
}
.agenda-day-event .gcal-event-open b {
    grid-row: span 2;
    align-self: start;
    font-size: 12px;
}
.agenda-day-event .gcal-event-open span,
.agenda-day-event .gcal-event-open em {
    display: block;
    max-width: 100%;
    font-size: 12px;
}
.agenda-day-event .gcal-event-open em {
    width: max-content;
    max-width: 100%;
}
@media (min-width: 641px) {
.agenda-google-main {
    overflow: visible;
}
.agenda-mobile-sticky-head {
    position: sticky;
    top: 0;
    z-index: 40;
    display: block;
    background: var(--panel);
    box-shadow: 0 8px 18px color-mix(in srgb, var(--shadow-color, #101828) 18%, transparent);
}
.gcal-year-agenda {
    display: grid;
    gap: 18px;
    padding: 14px;
    background: color-mix(in srgb, var(--input) 88%, var(--panel));
}
.gcal-year-month {
    overflow: hidden;
    border: 1px solid var(--line);
    border-radius: 14px;
    background: color-mix(in srgb, var(--input) 92%, var(--panel));
}
.gcal-year-month h3 {
    margin: 0;
    padding: 15px 16px 12px;
    color: var(--ink);
    font-size: 21px;
    line-height: 1.15;
}
.gcal-year-month .gcal-mobile-weekdays,
.gcal-year-month .gcal-mobile-month-grid {
    display: grid;
    grid-template-columns: repeat(7, minmax(0, 1fr));
}
.gcal-year-month .gcal-mobile-weekdays {
    border-top: 1px solid var(--line);
    border-bottom: 1px solid var(--line);
    background: var(--panel);
}
.gcal-year-month .gcal-mobile-weekdays span {
    padding: 10px 8px 8px;
    color: var(--muted);
    font-size: 11px;
    font-weight: 900;
    text-align: center;
}
.gcal-year-month .gcal-mobile-month-grid {
    background: var(--panel);
    gap: 0;
}
.gcal-year-month .gcal-mobile-date {
    display: flex;
    min-width: 0;
    min-height: 108px;
    flex-direction: column;
    padding: 8px;
    background: color-mix(in srgb, var(--input) 90%, var(--panel));
    border-right: 1px solid color-mix(in srgb, var(--line) 72%, var(--ink) 28%);
    border-bottom: 1px solid color-mix(in srgb, var(--line) 72%, var(--ink) 28%);
}
.gcal-year-month .gcal-mobile-date:nth-child(7n) {
    border-right: 0;
}
.gcal-year-month .gcal-mobile-date.empty-date {
    background: color-mix(in srgb, var(--soft) 75%, var(--input));
}
.gcal-year-month .gcal-mobile-date > header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    min-height: 26px;
    margin-bottom: 5px;
}
.gcal-year-month .gcal-mobile-date > header span {
    display: inline-grid;
    width: 26px;
    height: 26px;
    place-items: center;
    border-radius: 50%;
    color: var(--ink);
    font-size: 13px;
    font-weight: 900;
}
.gcal-year-month .gcal-mobile-date.today > header span {
    background: #f59e0b;
    color: #fff;
}
.gcal-year-month .gcal-mobile-date > header em {
    color: #f59e0b;
    font-size: 11px;
    font-style: normal;
    font-weight: 800;
}
.gcal-year-month .gcal-mobile-date-events {
    display: grid;
    gap: 3px;
    width: 100%;
}
.gcal-year-month .gcal-mobile-date .gcal-event {
    width: 100%;
    min-height: 20px;
    border-radius: 5px;
    background: color-mix(in srgb, var(--event-color) 18%, transparent);
}
.gcal-year-month .gcal-mobile-date .gcal-event-open {
    width: 100%;
    height: auto;
    min-height: 20px;
    padding: 3px 5px;
    border-left: 4px solid var(--event-color);
    border-radius: 5px;
    background: transparent;
}
.gcal-year-month .gcal-mobile-date .gcal-event b,
.gcal-year-month .gcal-mobile-date .gcal-event span,
.gcal-year-month .gcal-mobile-date .gcal-event em {
    display: inline;
}
}
.gcal-weekday {
    min-height: 34px;
    padding: 10px 8px 6px;
    background: var(--panel);
    color: var(--muted);
    font-size: 11px;
    font-weight: 900;
    text-align: center;
    border-right: 1px solid var(--line);
    border-bottom: 1px solid var(--line);
}
.gcal-weekday:nth-child(7n) {
    border-right: 0;
}
.gcal-day {
    min-height: 92px;
    background: color-mix(in srgb, var(--input) 90%, var(--panel));
    padding: 6px;
    border-right: 1px solid var(--line);
    border-bottom: 1px solid var(--line);
}
.gcal-day:nth-child(7n) {
    border-right: 0;
}
.gcal-day.muted-day {
    background: color-mix(in srgb, var(--soft) 75%, var(--input));
}
.gcal-day header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    min-height: 20px;
    margin-bottom: 3px;
}
.gcal-day header span {
    display: inline-grid;
    place-items: center;
    width: 22px;
    height: 22px;
    border-radius: 999px;
    color: var(--ink);
    font-size: 12px;
    font-weight: 800;
}
.gcal-day.today header span {
    background: #f59e0b;
    color: #fff;
}
.gcal-day header strong {
    color: #f59e0b;
    font-size: 11px;
}
.gcal-day-events {
    display: grid;
    gap: 3px;
}
.gcal-event {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: 4px;
    min-height: 20px;
    overflow: hidden;
    border-radius: 5px;
    background: color-mix(in srgb, var(--event-color) 18%, transparent);
    color: var(--ink);
}
.gcal-event.completed,
.gcal-event.available {
    background: color-mix(in srgb, #188038 18%, transparent);
}
.gcal-event.booked {
    background: color-mix(in srgb, #1a73e8 28%, transparent);
}
.gcal-event.blocked {
    background: color-mix(in srgb, #dc2626 18%, transparent);
}
.gcal-event.is-search-match {
    outline: 2px solid var(--gold);
    outline-offset: 1px;
    box-shadow: 0 0 0 4px color-mix(in srgb, var(--gold) 24%, transparent);
    background: color-mix(in srgb, var(--event-color) 24%, var(--panel));
}
.gcal-event-open {
    display: flex;
    align-items: center;
    gap: 5px;
    width: 100%;
    height: auto;
    min-width: 0;
    padding: 3px 5px;
    border: 0;
    border-radius: 5px;
    border-left: 4px solid var(--event-color);
    background: transparent;
    color: var(--ink);
    text-align: left;
    cursor: pointer;
}
.gcal-event-open:hover {
    background: color-mix(in srgb, var(--event-color) 12%, transparent);
    color: var(--ink);
}
.gcal-event.completed .gcal-event-open,
.gcal-event.available .gcal-event-open {
    border-left-color: #188038;
    border-right: 4px solid #188038;
}
.gcal-event.booked .gcal-event-open {
    border-left-color: #1a73e8;
    border-right: 4px solid #1a73e8;
}
.gcal-event b,
.gcal-event span,
.gcal-event em {
    min-width: 0;
    overflow: hidden;
    font-size: 10px;
    line-height: 1.2;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.gcal-event b {
    flex: 0 0 auto;
}
.gcal-event em {
    flex: 0 0 auto;
    padding: 2px 5px;
    border-radius: 999px;
    background: var(--success);
    color: #fff;
    font-style: normal;
    font-weight: 900;
}

.agenda-filter {
    align-items: end;
}
.week-nav {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    align-items: center;
    padding-bottom: 1px;
}
.week-nav a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 38px;
    border: 1px solid var(--line);
    border-radius: 999px;
    padding: 0 13px;
    background: var(--panel);
    color: var(--ink);
    font-size: 12px;
    font-weight: 900;
}
.week-nav a:hover {
    border-color: var(--rose);
    color: var(--rose-dark);
}
:root[data-theme="dark"] .week-nav a:hover,
:root[data-theme="graphite"] .week-nav a:hover {
    border-color: rgba(255,255,255,.62);
    color: #fff;
    background: rgba(255,255,255,.08);
}
.agenda-metrics article:first-child strong {
    font-size: 19px;
}
.agenda-layout {
    grid-template-columns: 360px minmax(0, 1fr);
    align-items: start;
}
.agenda-panel {
    overflow: hidden;
}
.agenda-week {
    display: grid;
    grid-template-columns: repeat(7, minmax(170px, 1fr));
    gap: 10px;
    overflow-x: auto;
    padding-bottom: 4px;
}
.agenda-day {
    min-height: 430px;
    border: 1px solid var(--line);
    border-radius: 16px;
    background: color-mix(in srgb, var(--soft) 72%, transparent);
    overflow: hidden;
}
.agenda-day.today {
    border-color: color-mix(in srgb, var(--rose) 55%, var(--line));
    box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--rose) 24%, transparent);
}
.agenda-day header {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 10px;
    padding: 12px;
    border-bottom: 1px solid var(--line);
    background: color-mix(in srgb, var(--panel) 84%, transparent);
}
.agenda-day header span {
    min-width: 0;
    overflow: hidden;
    color: var(--muted);
    font-size: 11px;
    font-weight: 900;
    text-overflow: ellipsis;
    text-transform: uppercase;
    white-space: nowrap;
}
.agenda-day header strong {
    color: var(--ink);
    font-size: 18px;
}
.agenda-day-body {
    display: grid;
    gap: 9px;
    padding: 10px;
}
.agenda-empty {
    margin: 0;
    border: 1px dashed var(--line);
    border-radius: 12px;
    padding: 13px 10px;
    color: var(--muted);
    font-size: 12px;
    font-weight: 800;
    text-align: center;
}
.slot-card {
    display: grid;
    gap: 7px;
    border: 1px solid var(--line);
    border-left: 4px solid var(--success);
    border-radius: 10px;
    padding: 8px;
    background: var(--panel);
    box-shadow: 0 8px 18px rgba(30, 22, 26, .06);
}
.slot-card.booked {
    border-left-color: var(--blue);
}
.slot-card.blocked {
    border-left-color: var(--danger);
}
.slot-main {
    display: flex;
    justify-content: space-between;
    gap: 8px;
    align-items: center;
}
.slot-main strong {
    color: var(--ink);
    font-size: 12px;
    white-space: nowrap;
}
.slot-main span {
    border-radius: 999px;
    padding: 3px 6px;
    background: color-mix(in srgb, var(--success) 16%, transparent);
    color: var(--ink);
    font-size: 9px;
    font-weight: 900;
    white-space: nowrap;
}
.slot-card.booked .slot-main span {
    background: color-mix(in srgb, var(--blue) 18%, transparent);
}
.slot-card.blocked .slot-main span {
    background: color-mix(in srgb, var(--danger) 18%, transparent);
}
.slot-summary {
    display: flex;
    align-items: start;
    gap: 8px;
    min-width: 0;
}
.slot-summary .avatar.small {
    width: 24px;
    height: 24px;
}
.slot-summary p {
    display: grid;
    gap: 1px;
    min-width: 0;
    margin: 0;
}
.slot-summary b {
    min-width: 0;
    overflow: hidden;
    color: var(--ink);
    font-size: 12px;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.slot-summary em {
    min-width: 0;
    overflow: hidden;
    color: var(--muted);
    font-size: 11px;
    font-style: normal;
    font-weight: 700;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.slot-card footer {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 8px;
    padding-top: 2px;
}
.slot-card footer form {
    margin: 0;
}
.slot-card footer button,
.slot-card footer .edit-link {
    width: 30px;
    min-width: 30px;
    height: 30px;
    min-height: 30px;
    padding: 0;
    border-radius: 9px;
    font-size: 10px;
}
.agenda-month {
    display: grid;
    grid-template-columns: repeat(7, minmax(150px, 1fr));
    gap: 8px;
    overflow-x: auto;
}
.month-weekday {
    padding: 8px 10px;
    border-radius: 10px;
    background: var(--table-head);
    color: var(--muted);
    font-size: 11px;
    text-align: center;
    text-transform: uppercase;
}
.agenda-month-day {
    min-height: 168px;
    border: 1px solid var(--line);
    border-radius: 12px;
    background: color-mix(in srgb, var(--soft) 68%, transparent);
    overflow: hidden;
}
.agenda-month-day.muted-day {
    opacity: .48;
}
.agenda-month-day.today {
    border-color: color-mix(in srgb, var(--rose) 55%, var(--line));
    box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--rose) 24%, transparent);
}
.agenda-month-day header {
    display: flex;
    justify-content: space-between;
    gap: 8px;
    padding: 8px 9px;
    border-bottom: 1px solid var(--line);
    background: color-mix(in srgb, var(--panel) 82%, transparent);
}
.agenda-month-day header span {
    color: var(--ink);
    font-size: 13px;
    font-weight: 900;
}
.agenda-month-day header em {
    color: var(--muted);
    font-size: 10px;
    font-style: normal;
    font-weight: 800;
}
.agenda-month .agenda-day-body {
    gap: 6px;
    padding: 7px;
}
.agenda-month .agenda-empty {
    padding: 8px;
    font-size: 11px;
}
.agenda-month .slot-card {
    padding: 7px;
}
.agenda-month .slot-card footer {
    display: none;
}

.panel {
    background: var(--panel);
    border: 1px solid var(--line);
    border-radius: 18px;
    padding: 18px;
    box-shadow: var(--shadow);
    overflow: auto;
}
.panel-title {
    display: flex;
    justify-content: space-between;
    align-items: end;
    gap: 18px;
    margin-bottom: 14px;
}
.panel h2, .panel-title h2 { margin: 0; font-size: 18px; }
.panel-title p { margin: 0; color: var(--muted); font-size: 13px; }

label {
    display: grid;
    gap: 6px;
    margin-bottom: 11px;
    color: var(--ink);
    font-size: 12px;
    font-weight: 700;
}
label[data-client-referral-field][hidden] {
    display: none !important;
}
input, select, textarea {
    width: 100%;
    border: 1px solid var(--line);
    background: var(--input);
    border-radius: 12px;
    padding: 9px 11px;
    font: inherit;
    font-size: 14px;
    color: var(--ink);
}
input:focus, select:focus, textarea:focus {
    outline: 3px solid color-mix(in srgb, var(--rose) 22%, transparent);
    border-color: var(--rose);
}
:root[data-theme="dark"] input:focus,
:root[data-theme="dark"] select:focus,
:root[data-theme="dark"] textarea:focus,
:root[data-theme="graphite"] input:focus,
:root[data-theme="graphite"] select:focus,
:root[data-theme="graphite"] textarea:focus {
    outline-color: rgba(255,255,255,.18);
    border-color: rgba(255,255,255,.86);
}
textarea { resize: vertical; }
.row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
}
.check {
    display: flex;
    align-items: center;
    gap: 9px;
}
.check input { width: auto; }
.switch-check {
    gap: 10px;
    cursor: pointer;
    user-select: none;
}
.switch-check input {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}
.switch-check span {
    position: relative;
    width: 78px;
    height: 28px;
    flex: 0 0 78px;
    border-radius: 5px;
    background: #d93631;
    box-shadow: inset 0 0 0 1px rgba(0,0,0,.08), 0 6px 14px rgba(38, 20, 28, .10);
    transition: background .18s ease, box-shadow .18s ease;
}
.switch-check span::before {
    content: "";
    position: absolute;
    top: 3px;
    left: 3px;
    width: 6px;
    height: 22px;
    border-radius: 3px;
    background: #fff;
    transition: transform .18s ease;
}
.switch-check span::after {
    content: "Inativo";
    position: absolute;
    inset: 0;
    display: grid;
    place-items: center;
    padding-left: 8px;
    color: #fff;
    font-size: 12px;
    font-weight: 900;
    letter-spacing: 0;
}
.switch-check input:checked + span {
    background: #58b957;
}
.switch-check input:checked + span::before {
    transform: translateX(66px);
}
.switch-check input:checked + span::after {
    content: "Ativo";
    padding-left: 0;
    padding-right: 8px;
}
.switch-check input:focus-visible + span {
    outline: 3px solid color-mix(in srgb, var(--blue) 38%, transparent);
    outline-offset: 2px;
}
.switch-check em {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
}
.yesno-switch span {
    width: 62px;
    flex-basis: 62px;
}
.yesno-switch span::after {
    content: "Não";
}
.yesno-switch input:checked + span::before {
    transform: translateX(50px);
}
.yesno-switch input:checked + span::after {
    content: "Sim";
}
.yesno-switch em {
    position: static;
    width: auto;
    height: auto;
    overflow: visible;
    clip: auto;
    color: var(--ink);
    font-size: 13px;
    font-style: normal;
    font-weight: 900;
    white-space: normal;
}

.split-preview {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 10px;
    margin: 2px 0 16px;
}
.agenda-split-preview {
    align-items: stretch;
    margin: 0;
}
.agenda-split-preview span {
    min-height: 68px;
    align-content: space-between;
    line-height: 1.25;
}
.agenda-split-preview strong {
    display: block;
    margin-top: auto;
    line-height: 1.15;
}
.split-preview span {
    display: grid;
    gap: 6px;
    border: 1px solid var(--line);
    background: var(--soft);
    border-radius: 8px;
    padding: 12px;
    color: var(--muted);
    font-size: 12px;
    font-weight: 700;
}
.split-preview strong {
    color: var(--ink);
    font-size: 15px;
}

button {
    width: 100%;
    border: 0;
    border-radius: 12px;
    padding: 10px 13px;
    background: var(--rose);
    color: #fff;
    font-weight: 800;
    cursor: pointer;
}
button:hover { background: var(--rose-dark); }
.button-success {
    background: var(--success);
}
.button-success:hover {
    background: var(--success-dark);
}
.button-blue {
    background: color-mix(in srgb, var(--blue) 84%, #062a58);
}
.button-blue:hover {
    background: color-mix(in srgb, var(--blue) 74%, #062a58);
}
.button-danger {
    background: var(--danger);
}
.button-danger:hover {
    background: var(--danger-dark);
}
.button-warning {
    background: var(--gold);
    color: #fff;
}
.button-warning:hover {
    background: color-mix(in srgb, var(--gold) 84%, #6f4c00);
}
.button-muted {
    background: color-mix(in srgb, var(--muted) 28%, var(--panel));
    color: var(--ink);
}
.button-muted:hover {
    background: color-mix(in srgb, var(--muted) 42%, var(--panel));
}
.action-row {
    display: flex;
    gap: 6px;
    align-items: center;
}
.action-row form {
    margin: 0;
}
.action-row button {
    margin: 0;
}
.status-pill {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 94px;
    padding: 5px 9px;
    border-radius: 999px;
    border: 1px solid color-mix(in srgb, var(--gold) 50%, transparent);
    background: color-mix(in srgb, var(--gold) 34%, transparent);
    color: var(--gold);
    font-size: 11px;
    font-weight: 900;
}
.status-pill.approved {
    border: 1px solid color-mix(in srgb, var(--success) 38%, transparent);
    background: color-mix(in srgb, var(--success) 22%, transparent);
    color: var(--success);
}
.status-pill.pending-balance {
    border: 1px solid color-mix(in srgb, var(--blue) 42%, transparent);
    background: color-mix(in srgb, var(--blue) 18%, transparent);
    color: var(--blue);
}
.status-pill.booked {
    border-color: color-mix(in srgb, var(--blue) 42%, transparent);
    background: color-mix(in srgb, var(--blue) 18%, transparent);
    color: var(--blue);
}
.status-pill.rejected {
    border-color: color-mix(in srgb, var(--danger) 46%, transparent);
    background: color-mix(in srgb, var(--danger) 18%, transparent);
    color: var(--danger);
}
.attention-badge {
    display: inline-flex;
    align-items: center;
    margin-left: 8px;
    padding: 4px 8px;
    border: 1px solid color-mix(in srgb, var(--success) 48%, transparent);
    border-radius: 999px;
    background: color-mix(in srgb, var(--success) 20%, transparent);
    color: var(--success);
    font-size: 10px;
    font-weight: 900;
    text-decoration: none;
    vertical-align: middle;
}
.attention-badge:hover {
    background: var(--success);
    color: #fff;
}
tr.needs-client-registration td {
    background: color-mix(in srgb, var(--success) 6%, transparent);
}

.link-button {
    width: auto;
    border: 0;
    background: transparent;
    color: var(--ink);
    padding: 0;
    font-weight: 800;
    text-align: left;
    text-decoration: underline;
    text-underline-offset: 3px;
}
.link-button:hover {
    background: transparent;
    color: var(--ink);
    text-decoration: underline;
}
:root[data-theme="dark"] .link-button,
:root[data-theme="dark"] .link-button:hover,
:root[data-theme="graphite"] .link-button,
:root[data-theme="graphite"] .link-button:hover {
    color: #fff;
}
.icon-action {
    display: inline-grid;
    place-items: center;
    width: 34px;
    height: 34px;
    min-width: 34px;
    border: 1px solid var(--line);
    border-radius: 10px;
    background: var(--soft);
    color: color-mix(in srgb, var(--blue) 84%, #062a58);
    padding: 0;
    text-decoration: none;
    cursor: pointer;
}
.icon-action svg {
    width: 17px;
    height: 17px;
    fill: currentColor;
}
.icon-action:hover {
    border-color: color-mix(in srgb, var(--blue) 84%, #062a58);
    color: #fff;
    background: color-mix(in srgb, var(--blue) 84%, #062a58);
}
.icon-action.approve-action {
    color: var(--success);
}
.icon-action.approve-action:hover {
    border-color: var(--success);
    color: #fff;
    background: var(--success);
}
.icon-action.reject-action {
    color: var(--danger);
}
.icon-action.reject-action:hover {
    border-color: var(--danger);
    color: #fff;
    background: var(--danger);
}
.icon-action.restore-action {
    color: var(--blue);
}
.icon-action.restore-action:hover {
    border-color: var(--blue);
    color: #fff;
    background: var(--blue);
}
.icon-action.adjustment-action {
    color: var(--gold);
}
.icon-action.adjustment-action:hover {
    border-color: var(--gold);
    color: #fff;
    background: var(--gold);
}
.icon-action.reset-action {
    color: #8a5a00;
}
.icon-action.reset-action:hover {
    border-color: #d99a16;
    color: #fff;
    background: #d99a16;
}
.icon-action.impersonate-action {
    color: #2563eb;
}
.icon-action.impersonate-action:hover {
    border-color: #2563eb;
    color: #fff;
    background: #2563eb;
}
.adjustment-box {
    display: grid;
    gap: 12px;
    margin-top: 16px;
    padding: 14px;
    border: 1px solid color-mix(in srgb, var(--gold) 36%, var(--line));
    border-radius: 14px;
    background: color-mix(in srgb, var(--gold) 9%, var(--panel));
}
.adjustment-box strong {
    color: var(--ink);
    font-size: 16px;
}
.adjustment-box p {
    margin: 4px 0 0;
    color: var(--muted);
    font-size: 12px;
    line-height: 1.45;
}
.adjustment-box textarea {
    margin-top: 6px;
}
.adjustment-box .action-row button {
    width: auto;
}
.collapsible-panel {
    padding: 0;
}
.collapsible-panel summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 18px;
    cursor: pointer;
    list-style: none;
}
.collapsible-panel summary::-webkit-details-marker {
    display: none;
}
.collapsible-panel summary span {
    display: grid;
    gap: 4px;
}
.collapsible-panel summary strong {
    color: var(--ink);
    font-size: 19px;
}
.collapsible-panel summary em {
    color: var(--muted);
    font-size: 12px;
    font-style: normal;
    font-weight: 800;
}
.collapsible-panel summary b {
    display: inline-grid;
    place-items: center;
    width: 30px;
    min-width: 30px;
    height: 30px;
    padding: 0;
    border: 1px solid var(--line);
    border-radius: 999px;
    color: var(--muted);
    font-size: 0;
    font-weight: 900;
    line-height: 1;
}
.collapsible-panel summary b::before {
    content: "+";
    font-size: 20px;
}
.collapsible-panel[open] summary {
    border-bottom: 1px solid var(--line);
}
.collapsible-panel[open] summary b::before {
    content: "-";
}
.approval-pending-panel {
    border-color: color-mix(in srgb, #f59e0b 62%, var(--line));
    background: color-mix(in srgb, #f59e0b 22%, var(--panel));
    box-shadow: inset 4px 0 0 color-mix(in srgb, #f59e0b 72%, transparent), var(--shadow);
}
.approval-pending-panel > summary {
    background: color-mix(in srgb, #f59e0b 24%, var(--panel));
}
.approval-pending-panel > .collapsible-body {
    background: color-mix(in srgb, #f59e0b 17%, var(--panel));
}
.approval-pending-panel > .collapsible-body table tbody td {
    background: color-mix(in srgb, #f59e0b 10%, var(--panel));
}
.approval-pending-panel > summary strong {
    color: color-mix(in srgb, #f59e0b 72%, var(--ink));
}
.approval-pending-panel > summary em {
    color: color-mix(in srgb, #f59e0b 65%, var(--muted));
}
.collapsible-body {
    padding: 18px;
}
.form-dropdown {
    overflow: hidden;
}
.form-dropdown > .form {
    margin: 0;
    border: 0;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
}
.form-dropdown summary b {
    width: 34px;
    height: 34px;
    min-width: 34px;
    display: grid;
    place-items: center;
    padding: 0;
    border-color: color-mix(in srgb, var(--success) 42%, var(--line));
    background: color-mix(in srgb, var(--success) 14%, transparent);
    color: var(--success);
    font-size: 22px;
    line-height: 1;
}
.form-dropdown[open] summary b {
    font-size: 0;
}
.form-dropdown[open] summary b::before {
    content: "-";
    font-size: 24px;
    line-height: 1;
}
.compact-filter {
    margin-bottom: 14px;
}
.client-search-filter {
    display: flex;
    align-items: end;
    flex-wrap: wrap;
    gap: 10px;
}
.client-search-filter label {
    width: min(280px, 100%);
}
.client-search-filter .button-success,
.client-search-filter .form-cancel {
    width: auto;
    min-width: 104px;
    min-height: 40px;
    margin: 0;
    padding-inline: 16px;
    white-space: nowrap;
}
.mini-calendar-toolbar {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 0 0 14px;
    padding: 0 0 14px;
    border-bottom: 1px solid var(--line);
}
.mini-calendar-toolbar > a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 36px;
    border: 1px solid var(--line);
    border-radius: 999px;
    padding: 0 14px;
    background: var(--input);
    color: var(--ink);
    font-size: 13px;
    font-weight: 900;
    text-decoration: none;
}
:root[data-theme="dark"] .mini-calendar-toolbar > a:hover,
:root[data-theme="graphite"] .mini-calendar-toolbar > a:hover {
    border-color: rgba(255,255,255,.62);
    color: #fff;
    background: rgba(255,255,255,.08);
}
.mini-calendar-toolbar .icon-nav {
    width: 36px;
    padding: 0;
    font-size: 26px;
    line-height: 1;
}
.mini-calendar-toolbar h2 {
    margin: 0 8px;
    color: var(--ink);
    font-size: 22px;
}
.form-cancel {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: auto;
    border: 1px solid var(--line);
    border-radius: 999px;
    background: var(--soft);
    color: var(--rose-dark);
    padding: 6px 10px;
    font-size: 12px;
    font-weight: 900;
    text-decoration: none;
}
.form-cancel:hover {
    border-color: var(--rose);
    color: var(--rose);
}
:root[data-theme="dark"] .form-cancel,
:root[data-theme="graphite"] .form-cancel {
    color: rgba(255,255,255,.78);
}
:root[data-theme="dark"] .form-cancel:hover,
:root[data-theme="graphite"] .form-cancel:hover {
    border-color: rgba(255,255,255,.62);
    color: #fff;
    background: rgba(255,255,255,.08);
}
.form-cancel-wide {
    width: 100%;
    min-height: 31px;
    border-color: color-mix(in srgb, var(--danger) 32%, var(--line));
    background: color-mix(in srgb, var(--danger) 14%, var(--panel));
    color: var(--danger-dark);
}
.form-cancel-wide:hover {
    border-color: var(--danger);
    background: color-mix(in srgb, var(--danger) 22%, var(--panel));
    color: var(--danger-dark);
}
:root[data-theme="dark"] .form-cancel-wide,
:root[data-theme="graphite"] .form-cancel-wide {
    border-color: color-mix(in srgb, var(--danger) 45%, var(--line));
    background: color-mix(in srgb, var(--danger) 16%, transparent);
    color: #fecdd3;
}
:root[data-theme="dark"] .form-cancel-wide:hover,
:root[data-theme="graphite"] .form-cancel-wide:hover {
    border-color: var(--danger);
    background: color-mix(in srgb, var(--danger) 28%, transparent);
    color: #fff;
}
.form-cancel {
    margin-top: 10px;
}

.modal-backdrop {
    position: fixed;
    inset: 0;
    z-index: 320;
    display: none;
    align-items: center;
    justify-content: center;
    padding: 24px;
    background: var(--modal-cover);
}
.modal-backdrop.show { display: flex; }
.modal {
    position: relative;
    width: min(1180px, calc(100vw - 40px));
    max-height: min(860px, calc(100vh - 34px));
    overflow: auto;
    background: var(--paper);
    border: 1px solid var(--line);
    border-radius: 20px;
    box-shadow: 0 28px 80px rgba(20, 18, 18, .28);
    padding: 26px;
}
.form-launch-card {
    width: 100%;
    min-height: 118px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
    padding: 22px;
    border: 1px solid var(--line);
    border-radius: 16px;
    background: linear-gradient(145deg, color-mix(in srgb, var(--panel) 96%, #ffffff 4%), var(--panel));
    color: var(--ink);
    text-align: left;
    box-shadow: 0 16px 42px rgba(15, 23, 42, .10);
}
.form-launch-card:hover {
    background: color-mix(in srgb, var(--panel) 90%, var(--success) 10%);
}
.form-launch-card > span {
    display: grid;
    gap: 5px;
}
.form-launch-card strong {
    font-size: 19px;
}
.form-launch-card em {
    color: var(--muted);
    font-size: 12px;
    font-style: normal;
    font-weight: 800;
}
.form-launch-card > b {
    width: 36px;
    min-width: 36px;
    height: 36px;
    display: grid;
    place-items: center;
    border: 1px solid color-mix(in srgb, var(--success) 55%, var(--line));
    border-radius: 999px;
    color: var(--success);
    font-size: 24px;
    line-height: 1;
}
.client-form-modal-card,
.service-form-modal-card,
.professional-form-modal-card,
.expense-form-modal-card,
.commission-form-modal-card,
.payment-form-modal-card,
.access-form-modal-card {
    width: min(680px, calc(100vw - 36px));
}
.client-modal-form,
.service-modal-form,
.professional-modal-form,
.expense-modal-form,
.commission-modal-form,
.payment-modal-form,
.access-modal-form {
    display: grid;
    gap: 0;
}
.client-modal-form .form-cancel-wide,
.service-modal-form .form-cancel-wide {
    width: 100%;
    text-align: center;
}
.modal-close {
    position: absolute;
    right: 18px;
    top: 18px;
    width: auto;
    padding: 9px 12px;
    background: var(--panel);
    color: var(--ink);
    border: 1px solid var(--line);
}
.modal-close:hover { background: var(--soft); }
.modal-head { margin-bottom: 18px; padding-right: 90px; }
.modal-head p {
    margin: 0 0 5px;
    color: var(--rose-dark);
    font-size: 12px;
    font-weight: 800;
    text-transform: uppercase;
}
.modal-head h2 { margin: 0; font-size: 27px; }
.hidden {
    display: none !important;
}
.agenda-modal {
    max-width: 640px;
    --agenda-status-color: #1a73e8;
    --agenda-status-soft: rgba(26, 115, 232, .16);
    border-top: 4px solid var(--agenda-status-color);
}
.agenda-detail-modal.status-completed .agenda-modal {
    --agenda-status-color: #188038;
    --agenda-status-soft: rgba(24, 128, 56, .16);
}
.agenda-detail-modal.status-blocked .agenda-modal {
    --agenda-status-color: #dc2626;
    --agenda-status-soft: rgba(220, 38, 38, .16);
}
.agenda-detail-modal.status-completed .agenda-modal .agenda-detail-list,
.agenda-detail-modal.status-booked .agenda-modal .agenda-detail-list,
.agenda-detail-modal.status-blocked .agenda-modal .agenda-detail-list {
    border-color: color-mix(in srgb, var(--agenda-status-color) 62%, var(--line));
    box-shadow: 0 0 0 3px var(--agenda-status-soft);
}
.agenda-detail-modal.status-completed .agenda-modal .agenda-detail-list dt,
.agenda-detail-modal.status-booked .agenda-modal .agenda-detail-list dt,
.agenda-detail-modal.status-blocked .agenda-modal .agenda-detail-list dt {
    background: color-mix(in srgb, var(--agenda-status-color) 28%, var(--table-head));
}
.agenda-detail-modal.status-completed .agenda-modal .agenda-detail-list dd,
.agenda-detail-modal.status-booked .agenda-modal .agenda-detail-list dd,
.agenda-detail-modal.status-blocked .agenda-modal .agenda-detail-list dd {
    background: color-mix(in srgb, var(--agenda-status-color) 7%, var(--panel));
}
.agenda-detail-list {
    display: grid;
    grid-template-columns: 130px minmax(0, 1fr);
    gap: 0;
    margin: 0;
    border: 1px solid var(--line);
    border-radius: 14px;
    overflow: hidden;
}
.agenda-detail-list dt,
.agenda-detail-list dd {
    margin: 0;
    padding: 12px 14px;
    border-bottom: 1px solid var(--line);
}
.agenda-detail-list dt {
    background: var(--table-head);
    color: var(--muted);
    font-size: 12px;
    font-weight: 900;
    text-transform: uppercase;
}
.agenda-detail-list dd {
    background: color-mix(in srgb, var(--panel) 88%, transparent);
    color: var(--ink);
    font-weight: 800;
}
.agenda-detail-list dt:last-of-type,
.agenda-detail-list dd:last-of-type {
    border-bottom: 0;
}
.agenda-new-client-badge {
    display: none;
    margin-left: 8px;
    color: #fff;
}
.agenda-new-client-badge.show {
    display: inline-flex;
}
.agenda-modal-actions {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 10px;
    margin-top: 18px;
}
.agenda-modal-actions form {
    margin: 0;
}
.agenda-modal-navigation {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 10px;
    margin: 0 0 12px;
}
.agenda-modal-navigation span {
    min-width: 62px;
    color: var(--muted);
    font-size: 12px;
    font-weight: 800;
    text-align: center;
}
.agenda-modal-navigation .icon-action {
    width: 34px;
    min-width: 34px;
    min-height: 34px;
    padding: 0;
    font-size: 22px;
    line-height: 1;
}
.agenda-modal-navigation .icon-action:disabled {
    cursor: not-allowed;
    opacity: .38;
}
.agenda-modal-actions .button-blue,
.agenda-modal-actions .button-danger {
    min-height: 42px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 12px;
    padding: 0 16px;
}
.agenda-modal-actions .icon-action {
    width: 42px;
    height: 42px;
    min-width: 42px;
    min-height: 42px;
    padding: 0;
}
.confirm-delete-modal {
    z-index: 500;
}
.confirm-delete-box {
    width: min(440px, calc(100vw - 36px));
    padding: 22px;
    border: 1px solid color-mix(in srgb, var(--danger) 38%, var(--line));
    border-radius: 18px;
    background: var(--paper);
    box-shadow: 0 28px 80px rgba(20, 18, 18, .32);
}
.confirm-delete-box .modal-head {
    margin-bottom: 12px;
    padding-right: 0;
}
.confirm-delete-box .modal-head p {
    color: var(--danger);
}
.confirm-delete-box h2 {
    font-size: 22px;
}
.confirm-delete-box > p {
    margin: 0 0 18px;
    color: var(--ink);
    font-size: 14px;
    line-height: 1.45;
}
.confirm-delete-actions {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
}
.confirm-delete-actions .form-cancel,
.confirm-delete-actions .button-danger {
    width: 100%;
    min-height: 42px;
    margin: 0;
}
.client-profile-grid {
    display: grid;
    grid-template-columns: minmax(360px, .9fr) minmax(520px, 1.25fr);
    gap: 16px;
    margin-bottom: 16px;
}
.profile-card {
    background: var(--panel);
    border: 1px solid var(--line);
    border-radius: 16px;
    padding: 16px;
    overflow: auto;
}
.profile-card h3 { margin: 0 0 12px; font-size: 16px; }
.profile-card dl {
    display: grid;
    grid-template-columns: 145px 1fr;
    gap: 10px 12px;
    margin: 0;
}
.profile-card dt {
    color: var(--muted);
    font-size: 12px;
    font-weight: 800;
    text-transform: uppercase;
}
.profile-card dd { margin: 0; font-weight: 700; }
.profile-metrics {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 10px;
}
.profile-metrics span, .service-tags span {
    display: grid;
    gap: 4px;
    background: var(--soft);
    border: 1px solid var(--line);
    border-radius: 8px;
    padding: 10px;
    color: var(--muted);
    font-size: 12px;
    font-weight: 700;
}
.profile-metrics strong, .service-tags strong { color: var(--ink); font-size: 14px; }
.service-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 12px;
}
.service-tags span { display: inline-flex; flex-direction: row; align-items: center; }
.profile-table table { min-width: 900px; }

.social-link {
    color: var(--rose-dark);
    font-weight: 800;
    text-decoration: none;
}
.social-link:hover { color: var(--blue); text-decoration: underline; }
:root[data-theme="dark"] .social-link,
:root[data-theme="graphite"] .social-link {
    color: rgba(255,255,255,.86);
}
:root[data-theme="dark"] .social-link:hover,
:root[data-theme="graphite"] .social-link:hover {
    color: #fff;
}

table {
    width: 100%;
    border-collapse: collapse;
    min-width: 620px;
}
th {
    text-align: left;
    font-size: 12px;
    color: var(--muted);
    text-transform: uppercase;
    background: var(--table-head);
}
th, td {
    padding: 10px 10px;
    border-bottom: 1px solid var(--line);
    white-space: nowrap;
}
td { font-size: 14px; }
tbody tr:hover td {
    filter: brightness(.985);
}
:root[data-theme="dark"] tbody tr:hover td {
    background: color-mix(in srgb, #ffffff 5%, var(--panel));
    filter: none;
}
:root[data-theme="graphite"] tbody tr:hover td {
    background: color-mix(in srgb, #ffffff 6%, var(--panel));
    filter: none;
}
tfoot td {
    background: color-mix(in srgb, var(--rose) 8%, var(--panel));
    color: var(--ink);
    font-weight: 900;
}
:root[data-theme="dark"] tfoot td,
:root[data-theme="graphite"] tfoot td {
    background: var(--table-head);
}
.table-total-header td {
    background: var(--table-head);
}
.table-total-header.total-paid td {
    background: color-mix(in srgb, var(--success) 18%, var(--table-head));
    color: var(--success);
}
.table-total-header.total-pending td {
    background: color-mix(in srgb, var(--blue) 18%, var(--table-head));
    color: var(--blue);
}

.monthly-comparison { min-width: 960px; }
.monthly-comparison th {
    background: var(--primary-head);
    color: #fff;
    text-align: center;
}
.monthly-comparison td {
    text-align: right;
    font-weight: 700;
}
.monthly-comparison td:first-child,
.monthly-comparison td:nth-child(2) {
    text-align: center;
}
.monthly-comparison tbody tr td:first-child,
.monthly-comparison tbody tr td:nth-child(2) {
    background: color-mix(in srgb, #2f80ed 18%, var(--panel));
    color: var(--ink);
}
.monthly-comparison tbody tr td:nth-child(3),
.monthly-comparison tbody tr td:nth-child(4) {
    background: color-mix(in srgb, #f2c230 28%, var(--panel));
    color: var(--ink);
}
.monthly-comparison tbody tr td:nth-child(5) {
    background: color-mix(in srgb, #27ae60 22%, var(--panel));
    color: var(--ink);
}
.monthly-comparison tbody tr td:nth-child(6) {
    background: color-mix(in srgb, #e74c3c 22%, var(--panel));
    color: var(--ink);
}
.monthly-comparison tbody tr td:nth-child(7) {
    background: color-mix(in srgb, #2f80ed 18%, var(--panel));
    color: var(--ink);
}
.monthly-comparison .negative { color: #b4232e; }
.monthly-comparison .positive { color: #166534; }
.monthly-comparison .total-row td {
    background: var(--primary-head) !important;
    color: #fff !important;
}
.monthly-comparison .percent-row td {
    background: var(--primary-head) !important;
    color: #fff !important;
}
.monthly-comparison .average-row td {
    background: var(--primary-head) !important;
    color: #fff !important;
}

.flash {
    border: 1px solid var(--line);
    background: var(--soft);
    color: var(--ink);
    padding: 12px 14px;
    border-radius: 14px;
    margin-bottom: 16px;
}
.flash.danger {
    border-color: #b15567;
    background: #c95c6b;
    color: #fff;
    font-weight: 900;
}
.flash.success {
    border-color: #188038;
    background: #35ae72;
    color: #fff;
    font-weight: 900;
}
.flash.warning {
    border-color: #c58a16;
    background: #d6a52d;
    color: #1f2937;
    font-weight: 900;
}
.flash-floating {
    position: fixed;
    top: 86px;
    left: 50%;
    z-index: 600;
    width: min(520px, calc(100vw - 32px));
    margin: 0;
    transform: translateX(-50%);
    box-shadow: 0 16px 36px rgba(15, 23, 42, .28);
    animation: flash-slide-in .18s ease-out;
}
.flash-floating.is-hidden {
    opacity: 0;
    transform: translate(-50%, -8px);
    transition: opacity .2s ease, transform .2s ease;
}
.temporary-feedback {
    transition: opacity .2s ease, transform .2s ease;
}
.temporary-feedback.is-hidden {
    opacity: 0;
    transform: translateY(-6px);
}
@keyframes flash-slide-in {
    from { opacity: 0; transform: translate(-50%, -10px); }
    to { opacity: 1; transform: translate(-50%, 0); }
}
.impersonation-banner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    border: 1px solid color-mix(in srgb, #f59e0b 42%, var(--line));
    background: color-mix(in srgb, #f59e0b 14%, var(--panel));
    color: var(--ink);
    padding: 12px 14px;
    border-radius: 14px;
    margin-bottom: 16px;
}
.impersonation-banner div {
    display: grid;
    gap: 2px;
}
.impersonation-banner strong {
    font-size: 14px;
}
.impersonation-banner span {
    color: var(--muted);
    font-size: 12px;
}
.impersonation-banner a {
    border: 1px solid color-mix(in srgb, #2563eb 60%, var(--line));
    background: #2563eb;
    color: #fff;
    border-radius: 999px;
    padding: 9px 13px;
    text-decoration: none;
    font-size: 12px;
    font-weight: 900;
    white-space: nowrap;
}

:root[data-theme="dark"] .monthly-comparison .negative { color: #fca5a5; }
:root[data-theme="dark"] .monthly-comparison .positive { color: #86efac; }

@media (max-width: 920px) {
    .sidebar {
        position: fixed;
        inset: 0 auto 0 0;
        z-index: 140;
        width: min(86vw, 330px);
        min-height: 100vh;
        transform: translateX(-105%);
        transition: transform .22s ease;
        box-shadow: 22px 0 60px rgba(0,0,0,.28);
    }
    body.menu-open { overflow: hidden; }
    body.menu-open .sidebar { transform: translateX(0); }
    .sidebar-backdrop {
        position: fixed;
        inset: 0;
        z-index: 80;
        display: none;
        background: rgba(0,0,0,.42);
    }
    body.menu-open .sidebar-backdrop { display: block; }
    .sidebar-close {
        display: none;
    }
    .sidebar-collapse {
        display: grid;
        width: 34px;
        height: 34px;
        min-height: 34px;
        font-size: 22px;
    }
    .menu-toggle { display: grid; place-items: center; }
    body.menu-open .topbar {
        display: none;
    }
    .main { margin-left: 0; padding: 18px; }
    .agenda-search-panel { grid-template-columns: 1fr; }
    .agenda-search-actions { flex-wrap: wrap; }
    .metrics, .two, .form-list, .intake, .agenda-layout, .agenda-google-app { grid-template-columns: 1fr; }
    .agenda-week, .agenda-month { grid-template-columns: repeat(7, minmax(210px, 1fr)); }
    .agenda-day { min-height: 360px; }
    .agenda-month-day { min-height: 150px; }
    .metric-pie { grid-template-columns: 82px minmax(0, 1fr); }
    .pie-chart { width: 82px; }
    .panel-pie .metric-pie { grid-template-columns: 96px minmax(0, 1fr); }
    .panel-pie .pie-chart { width: 96px; }
    .wide { grid-column: auto; }
    .topbar {
        position: sticky;
        top: 8px;
        z-index: 140;
        align-items: center;
        gap: 10px;
        flex-direction: row;
        justify-content: space-between;
    }
    .agenda-google-main { overflow-x: auto; }
    .agenda-google-toolbar { align-items: flex-start; flex-wrap: wrap; }
    .agenda-google-toolbar h2 { flex-basis: 100%; order: -1; margin: 0; }
    .agenda-google-toolbar label { width: min(180px, 100%); }
    .agenda-toolbar-search { width: min(220px, 100%) !important; }
    .gcal-month-grid { min-width: 720px; }
    .split-preview { grid-template-columns: 1fr; }
    .client-profile-grid, .profile-metrics { grid-template-columns: 1fr; }
    .profile-card dl { grid-template-columns: 1fr; }
    .login-screen { padding: 0; }
    .login-shell {
        grid-template-columns: 1fr;
        min-height: auto;
        background: #fff;
    }
    .login-visual {
        min-height: 255px;
        padding: 0;
        background-position: center 38%;
    }
    .login-visual::after {
        inset: auto 0 0;
        width: auto;
        height: 1px;
        box-shadow: 0 12px 28px rgba(46, 35, 41, .10);
    }
    .login-form-area { padding: 32px 22px 88px; }
    .login-partner-footer {
        right: 22px;
        bottom: 24px;
        left: 22px;
    }
    .login-card-head h2 {
        max-width: none;
        font-size: clamp(15px, 4.7vw, 18px);
        white-space: nowrap;
    }
    .login-card { width: min(420px, 100%); }
    .login-actions { flex-direction: column; }
    .floating-field input { width: 100%; }
}

@media (max-width: 640px) {
    body {
        font-size: 14px;
    }
    .main {
        padding: 10px;
    }
    .topbar {
        min-height: auto;
        margin-bottom: 12px;
        padding: 14px;
        border-radius: 16px;
        gap: 10px;
    }
    .topbar h1 {
        font-size: clamp(18px, 5.2vw, 24px);
        line-height: 1.22;
        padding: 1px 0 3px;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }
    .topbar-title {
        min-width: 0;
        flex: 0 1 auto;
        display: flex;
        align-items: center;
        gap: 8px;
    }
    .topbar-title h1 {
        flex: 0 1 auto;
        max-width: min(48vw, 280px);
    }
    .topbar-title .menu-toggle {
        flex: 0 0 auto;
    }
    .top-actions {
        width: auto;
        flex: 0 0 auto;
        display: flex;
        gap: 7px;
        align-items: center;
    }
    .menu-toggle,
    .notification-button {
        width: 36px;
        height: 36px;
        min-height: 36px;
    }
    .notification-menu {
        width: 36px;
        height: 36px;
    }
    .notification-button > span {
        top: -2px;
        right: -2px;
    }
    .theme-switch {
        width: 52px;
        height: 28px;
        min-height: 28px;
        padding: 0 5px;
        justify-self: start;
    }
    .theme-switch i {
        top: 4px;
        left: 4px;
        width: 20px;
        height: 20px;
    }
    :root[data-theme="dark"] .theme-switch i {
        transform: translateX(0);
    }
    :root[data-theme="light"] .theme-switch i {
        transform: translateX(24px);
    }
    .theme-sun,
    .theme-moon {
        width: 12px;
        height: 12px;
    }
    .theme-sun {
        border-width: 2px;
    }
    .theme-sun::before,
    .theme-sun::after {
        inset: -5px;
        background:
            linear-gradient(#78798a, #78798a) center 0 / 2px 4px no-repeat,
            linear-gradient(#78798a, #78798a) center 100% / 2px 4px no-repeat,
            linear-gradient(90deg, #78798a, #78798a) 0 center / 4px 2px no-repeat,
            linear-gradient(90deg, #78798a, #78798a) 100% center / 4px 2px no-repeat;
    }
    :root[data-theme="dark"] .theme-sun::before,
    :root[data-theme="dark"] .theme-sun::after {
        background:
            linear-gradient(#fff7f7, #fff7f7) center 0 / 2px 4px no-repeat,
            linear-gradient(#fff7f7, #fff7f7) center 100% / 2px 4px no-repeat,
            linear-gradient(90deg, #fff7f7, #fff7f7) 0 center / 4px 2px no-repeat,
            linear-gradient(90deg, #fff7f7, #fff7f7) 100% center / 4px 2px no-repeat;
    }
    .theme-moon::after {
        top: -1px;
        left: 4px;
        width: 12px;
        height: 12px;
    }
    .user-chip {
        display: none;
    }
    .avatar.small {
        width: 30px;
        height: 30px;
    }
    .notification-popover {
        position: fixed;
        top: 78px;
        right: auto;
        left: 50%;
        width: min(360px, calc(100vw - 20px));
        max-height: 62vh;
        transform: translateX(-50%);
    }
    .dashboard-filter {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 10px;
        margin: 0 0 12px;
    }
    .dashboard-filter label {
        width: auto;
    }
    .dashboard-filter label:nth-of-type(3),
    .dashboard-filter .button-success,
    .dashboard-filter .button-blue,
    .dashboard-filter .form-cancel {
        grid-column: 1 / -1;
    }
    .client-search-filter {
        display: grid;
        grid-template-columns: 1fr;
    }
    .client-search-filter label,
    .client-search-filter .button-success,
    .client-search-filter .form-cancel {
        width: 100%;
        min-width: 0;
    }
    label {
        font-size: 11px;
        gap: 5px;
        margin-bottom: 9px;
    }
    input, select, textarea {
        min-height: 40px;
        border-radius: 11px;
        padding: 8px 10px;
        font-size: 13px;
    }
    button,
    .button-success,
    .button-blue,
    .form-cancel {
        min-height: 40px;
        border-radius: 11px;
        padding: 9px 11px;
        font-size: 13px;
    }
    .period-chip {
        width: 100%;
        align-items: flex-start;
        justify-content: flex-start;
        flex-wrap: wrap;
        margin: 0 0 12px;
        border-radius: 14px;
        padding: 8px 10px;
        font-size: 11px;
        line-height: 1.35;
    }
    .metrics {
        gap: 10px;
        margin-bottom: 12px;
    }
    .metric-card,
    .commission-metrics .metric-card {
        min-height: auto;
    }
    .metrics article,
    .panel {
        border-radius: 14px;
        padding: 14px;
    }
    .metrics > article > span {
        font-size: 12px;
    }
    .metrics > article > strong {
        margin-top: 7px;
        font-size: 22px;
    }
    .metric-chart,
    .metric-pie {
        margin-top: 12px;
        padding-top: 12px;
    }
    .metric-pie {
        grid-template-columns: 76px minmax(0, 1fr);
        gap: 10px;
    }
    .pie-chart {
        width: 76px;
    }
    .pie-legend p {
        grid-template-columns: 9px minmax(0, 1fr) auto;
        gap: 6px;
        font-size: 10px;
    }
    .panel-title {
        align-items: flex-start;
        gap: 8px;
        margin-bottom: 10px;
    }
    .panel-title {
        flex-wrap: wrap;
    }
    .panel-title h2,
    .panel h2 {
        font-size: 17px;
        line-height: 1.2;
    }
    .panel-title p {
        font-size: 11px;
        text-align: right;
    }
    table {
        min-width: 560px;
    }
    th, td {
        padding: 8px;
    }
    th {
        font-size: 10px;
    }
    td {
        font-size: 12px;
    }
    .action-row {
        gap: 6px;
    }
    .icon-action {
        width: 32px;
        height: 32px;
        min-width: 32px;
        border-radius: 9px;
    }
    .collapsible-panel summary {
        padding: 12px;
        gap: 10px;
    }
    .collapsible-panel summary strong {
        font-size: 14px;
    }
    .collapsible-panel summary em {
        font-size: 11px;
    }
    .collapsible-body {
        padding: 12px;
    }
    .panel-pie {
        padding: 12px;
    }
    .panel-pie .metric-pie {
        grid-template-columns: 84px minmax(0, 1fr);
    }
    .panel-pie .pie-chart {
        width: 84px;
    }
    .monthly-comparison {
        min-width: 780px;
    }
    .sidebar {
        width: min(82vw, 310px);
        padding: 18px 12px;
        gap: 16px;
    }
    .brand {
        min-height: 64px;
        grid-template-columns: 48px minmax(0, 1fr) 34px;
        padding: 8px;
    }
    .brand img {
        width: 48px;
        height: 42px;
    }
    .brand strong {
        font-size: 17px;
    }
    nav {
        gap: 6px;
    }
    nav a,
    .logout {
        min-height: 40px;
        padding: 9px 10px;
        border-radius: 10px;
        font-size: 13px;
    }
    .agenda-google-toolbar,
    .agenda-search-panel,
    .agenda-create-card {
        border-radius: 14px;
    }
    .agenda-google-main {
        overflow: hidden;
    }
    .agenda-create-card .collapsible-body {
        grid-template-columns: 1fr;
    }
    .agenda-date-row,
    .agenda-create-card label:has(textarea),
    .agenda-create-card .form-cancel-wide {
        grid-column: auto;
    }
    .agenda-google-app {
        gap: 12px;
    }
    .agenda-google-toolbar {
        display: grid;
        grid-template-columns: minmax(0, 1fr) auto auto;
        align-items: center;
        gap: 8px;
        padding: 12px;
    }
    .agenda-google-toolbar h2 {
        grid-column: 1;
        grid-row: 1;
        margin: 0 0 2px;
        font-size: 18px;
    }
    .agenda-google-toolbar > a {
        min-height: 34px;
        padding: 0 11px;
        font-size: 12px;
    }
    .agenda-google-toolbar > a:nth-of-type(1) {
        grid-column: 1;
        grid-row: 2;
    }
    .agenda-google-toolbar > a:nth-of-type(2) {
        grid-column: 2;
        grid-row: 2;
    }
    .agenda-google-toolbar > a:nth-of-type(3) {
        grid-column: 3;
        grid-row: 2;
    }
    .agenda-google-toolbar label:has(select) {
        width: auto;
    }
    .agenda-google-toolbar label[data-agenda-filter-field="professional"] {
        grid-column: 1 / -1;
        grid-row: 3;
    }
    .agenda-google-toolbar label[data-agenda-filter-field="client"] {
        grid-column: 1 / -1;
        grid-row: 4;
    }
    .agenda-google-toolbar label.agenda-toolbar-search {
        grid-column: 1 / 3;
        grid-row: 4;
        width: auto !important;
    }
    .agenda-google-toolbar .agenda-toolbar-submit {
        grid-column: 3;
        grid-row: 4;
        min-height: 36px;
        padding: 0 9px;
    }
    .agenda-google-toolbar .agenda-toolbar-clear {
        grid-column: 1 / -1;
        grid-row: 6;
        min-height: 34px;
    }
    .agenda-google-toolbar > a {
        display: none;
    }
    .agenda-google-toolbar > a.agenda-today-button {
        display: inline-flex;
        grid-column: 2;
        grid-row: 1;
        justify-self: end;
        min-height: 34px;
        padding: 0 10px;
    }
    .agenda-google-toolbar > a.agenda-toolbar-reset {
        display: inline-flex;
        grid-column: 3;
        grid-row: 2;
        justify-self: end;
        width: 34px;
        min-width: 34px;
        height: 34px;
        min-height: 34px;
        padding: 0;
    }
    .agenda-google-toolbar.filter-professional-open > a.agenda-toolbar-reset {
        grid-row: 4;
    }
    .agenda-google-toolbar.filter-client-open > a.agenda-toolbar-reset {
        grid-row: 5;
    }
    .agenda-google-toolbar h2 {
        grid-column: 1;
        grid-row: 1;
    }
    .agenda-google-toolbar label.agenda-view-switch {
        grid-column: 3;
        grid-row: 1;
        display: flex;
        width: 112px !important;
        min-width: 0;
        flex-direction: column;
        align-items: stretch;
        gap: 0;
        margin: 0;
        justify-self: end;
    }
    .agenda-google-toolbar label.agenda-view-switch > span {
        display: none;
    }
    .agenda-google-toolbar label.agenda-view-switch select {
        min-height: 34px;
        padding: 6px 8px;
        font-size: 11px;
    }
    .agenda-mobile-filter-actions {
        display: flex;
        grid-column: 1 / 3;
        grid-row: 2;
        justify-content: flex-end;
        margin-left: 0;
        gap: 10px;
        padding: 2px 0 4px;
    }
    .agenda-mobile-filter-toggle {
        display: grid;
        width: 38px;
        height: 34px;
        min-height: 34px;
        place-items: center;
        padding: 0;
        border: 1px solid var(--line);
        border-radius: 10px;
        background: var(--input);
        color: var(--muted);
    }
    .agenda-mobile-filter-toggle svg {
        width: 17px;
        height: 17px;
        fill: currentColor;
    }
    .agenda-mobile-filter-toggle[aria-expanded="true"] {
        border-color: color-mix(in srgb, var(--blue) 55%, var(--line));
        background: color-mix(in srgb, var(--blue) 16%, var(--input));
        color: var(--blue);
    }
    .agenda-floating-create {
        right: 18px;
        bottom: 22px;
        width: 56px;
        height: 56px;
        min-height: 56px;
    }
    .agenda-floating-create svg {
        width: 24px;
        height: 24px;
    }
    .agenda-mobile-create-toggle {
        border-color: color-mix(in srgb, var(--success) 55%, var(--line));
        background: color-mix(in srgb, var(--success) 14%, var(--input));
        color: var(--success);
    }
    .agenda-mobile-filter-toggle:hover,
    .agenda-mobile-filter-toggle:active,
    .agenda-mobile-filter-toggle:focus-visible,
    .agenda-mobile-filter-toggle[aria-expanded="true"] {
        background: #fff !important;
        border-color: #d8dce5;
        color: #1f2937 !important;
    }
    .agenda-google-toolbar > label[data-agenda-filter-field] {
        display: none;
    }
    .agenda-google-toolbar.filter-professional-open > label[data-agenda-filter-field="professional"],
    .agenda-google-toolbar.filter-client-open > label[data-agenda-filter-field="client"] {
        display: flex;
    }
    .agenda-google-toolbar .agenda-toolbar-submit {
        display: none;
    }
    .agenda-google-toolbar.filter-client-open .agenda-toolbar-submit {
        display: inline-flex;
    }
    .agenda-google-toolbar select,
    .agenda-google-toolbar input {
        width: 100%;
        min-width: 0;
    }
    .agenda-status-strip {
        justify-content: center;
        padding: 9px 12px;
        gap: 7px;
    }
    .agenda-status-strip span,
    .agenda-status-strip a {
        font-size: 11px;
    }
    .gcal-month-grid {
        display: none;
    }
    .agenda-create-top {
        display: none;
    }
    .agenda-create-top.mobile-create-open {
        display: block;
    }
    .agenda-create-modal-card {
        width: min(430px, calc(100vw - 22px));
        max-height: calc(100vh - 22px);
        overflow-y: auto;
        padding: 16px;
        border-radius: 16px;
    }
    .agenda-create-modal .agenda-create-card {
        border: 0;
        border-radius: 0;
        box-shadow: none;
        background: transparent;
        padding: 0;
    }
    .agenda-create-modal .agenda-create-card > summary {
        display: none;
    }
    .agenda-create-modal .agenda-create-card .collapsible-body {
        grid-template-columns: 1fr;
        padding: 0;
    }
    .agenda-create-modal .agenda-create-card label:has(textarea),
    .agenda-create-modal .agenda-create-card .form-cancel-wide,
    .agenda-create-modal .agenda-create-card button {
        grid-column: auto;
    }
    .agenda-create-modal .agenda-create-card .agenda-form-submit,
    .agenda-create-modal .agenda-create-card .form-cancel-wide {
        width: 100%;
        max-width: none;
        justify-self: stretch;
    }
    .agenda-mobile-sticky-head {
        position: sticky;
        top: 0;
        z-index: 20;
        display: block;
        background: var(--panel);
        box-shadow: 0 5px 12px color-mix(in srgb, var(--shadow-color, #101828) 14%, transparent);
    }
    .agenda-google-main {
        max-height: calc(100vh - 150px);
        overflow-y: auto;
    }
    .agenda-day-view {
        padding: 12px 8px 24px;
    }
    .agenda-day-view-head {
        align-items: flex-start;
        margin-bottom: 10px;
        padding: 0 4px 10px;
    }
    .agenda-day-view-head h3 {
        max-width: 230px;
        font-size: 17px;
        line-height: 1.2;
    }
    .agenda-day-view-head small {
        font-size: 9px;
    }
    .agenda-day-view-head .icon-action {
        width: 32px;
        height: 32px;
        min-height: 32px;
        font-size: 20px;
    }
    .agenda-day-week {
        margin-bottom: 10px;
        border-radius: 8px;
    }
    .agenda-day-week-day {
        min-height: 48px;
        gap: 3px;
        padding: 5px 2px;
    }
    .agenda-day-week-day small {
        font-size: 8px;
    }
    .agenda-day-week-day strong {
        font-size: 15px;
    }
    .agenda-day-timeline {
        min-height: 864px;
    }
    .agenda-day-hours {
        grid-template-rows: repeat(18, 48px);
    }
    .agenda-day-hour {
        grid-template-columns: 60px minmax(0, 1fr);
        min-height: 48px;
    }
    .agenda-day-hour time {
        padding: 8px 9px 0 5px;
        font-size: 10px;
    }
    .agenda-day-events {
        left: 60px;
    }
    .agenda-day-event {
        right: 8px;
        left: 7px;
        min-height: 42px;
    }
    .agenda-day-event .gcal-event-open {
        min-height: 42px;
        padding: 6px 8px;
        gap: 2px 6px;
    }
    .agenda-day-event .gcal-event-open b,
    .agenda-day-event .gcal-event-open span,
    .agenda-day-event .gcal-event-open em {
        font-size: 10px;
    }
    .agenda-day-view[data-agenda-day-view] {
        touch-action: pan-y;
    }
    .gcal-mobile-weekdays-fixed {
        position: static;
        display: grid;
        grid-template-columns: repeat(7, minmax(0, 1fr));
        padding: 8px 12px 7px;
        border-bottom: 1px solid var(--line);
        background: var(--panel);
    }
    .gcal-mobile-weekdays-fixed span {
        color: var(--muted);
        font-size: 9px;
        font-weight: 900;
        text-align: center;
    }
    .gcal-mobile-agenda {
        display: grid;
        gap: 20px;
        padding: 12px;
        background: color-mix(in srgb, var(--input) 88%, var(--panel));
    }
    .gcal-mobile-month {
        overflow: hidden;
    }
    .gcal-mobile-month h3 {
        margin: 2px 8px 8px;
        color: var(--ink);
        font-size: 21px;
        line-height: 1.15;
    }
    .gcal-mobile-month.selected-month h3 {
        color: var(--ink);
    }
    .gcal-mobile-weekdays,
    .gcal-mobile-month-grid {
        display: grid;
        grid-template-columns: repeat(7, minmax(0, 1fr));
    }
    .gcal-mobile-month .gcal-mobile-weekdays {
        display: none;
    }
    .gcal-mobile-weekdays {
        border-bottom: 1px solid var(--line);
    }
    .gcal-mobile-weekdays span {
        padding: 0 0 7px;
        color: var(--muted);
        font-size: 9px;
        font-weight: 900;
        text-align: center;
    }
    .gcal-mobile-month-grid {
        background: var(--line);
        gap: 1px;
    }
    .gcal-mobile-date {
        display: flex;
        min-width: 0;
        min-height: 67px;
        flex-direction: column;
        align-items: center;
        padding: 7px 2px 5px;
        background: color-mix(in srgb, var(--input) 92%, var(--panel));
    }
    .gcal-mobile-date.empty-date {
        background: color-mix(in srgb, var(--soft) 70%, var(--input));
    }
    .gcal-mobile-date > header {
        display: grid;
        justify-items: center;
        gap: 2px;
        min-height: 28px;
    }
    .gcal-mobile-date > header span {
        display: grid;
        place-items: center;
        width: 26px;
        height: 26px;
        border-radius: 50%;
        color: var(--ink);
        font-size: 14px;
        font-weight: 800;
    }
    .gcal-mobile-date.today > header span {
        background: #f59e0b;
        color: #fff;
    }
    .gcal-mobile-date > header em {
        display: none;
    }
    .gcal-mobile-date-events {
        display: flex;
        min-height: 15px;
        justify-content: center;
        align-items: center;
        gap: 3px;
        margin-top: 5px;
    }
    .gcal-mobile-date.has-agenda-events {
        cursor: pointer;
    }
    .gcal-mobile-date.has-agenda-events:active {
        background: color-mix(in srgb, var(--blue) 10%, var(--panel));
    }
    .gcal-mobile-date .gcal-event {
        width: 9px;
        height: 9px;
        min-height: 9px;
        border-radius: 50%;
        background: var(--event-color);
    }
    .gcal-mobile-date .gcal-event.completed,
    .gcal-mobile-date .gcal-event.available {
        background: #188038;
    }
    .gcal-mobile-date .gcal-event.blocked {
        background: #dc2626;
    }
    .gcal-mobile-date .gcal-event-open {
        width: 9px;
        height: 9px;
        min-height: 9px;
        padding: 0;
        border: 0;
        border-radius: 50%;
        background: var(--event-color);
    }
    .gcal-mobile-date .gcal-event.completed .gcal-event-open,
    .gcal-mobile-date .gcal-event.available .gcal-event-open {
        border: 0;
        background: #188038;
    }
    .gcal-mobile-date .gcal-event.blocked .gcal-event-open {
        background: #dc2626;
    }
    .gcal-mobile-date .gcal-event b,
    .gcal-mobile-date .gcal-event span,
    .gcal-mobile-date .gcal-event em {
        display: none;
    }
    .agenda-create-card summary {
        padding: 12px;
    }
    .agenda-create-card summary span {
        display: flex;
        min-width: 0;
        flex-wrap: wrap;
        align-items: baseline;
        gap: 4px;
    }
    .agenda-create-card summary strong {
        font-size: 14px;
    }
    .form-launch-card {
        min-height: 92px;
        padding: 18px;
    }
    .form-launch-card strong {
        font-size: 17px;
    }
    .client-form-modal-card,
    .service-form-modal-card,
    .professional-form-modal-card,
    .expense-form-modal-card,
    .commission-form-modal-card,
    .payment-form-modal-card,
    .access-form-modal-card {
        width: calc(100vw - 20px);
        max-height: calc(100vh - 20px);
        padding: 18px;
        border-radius: 16px;
    }
    .client-form-modal-card .modal-close,
    .service-form-modal-card .modal-close,
    .professional-form-modal-card .modal-close,
    .expense-form-modal-card .modal-close,
    .commission-form-modal-card .modal-close,
    .payment-form-modal-card .modal-close,
    .access-form-modal-card .modal-close {
        right: 14px;
        top: 14px;
    }
}

/* Ajustes finais para leitura e uso dos modais em telas pequenas. */
.brand strong {
    min-width: 0;
    overflow: hidden;
    color: #fff;
    font-size: 15px;
    line-height: 1;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.top-logout {
    display: none;
    place-items: center;
    width: 36px;
    height: 36px;
    min-width: 36px;
    border: 1px solid var(--line);
    border-radius: 999px;
    background: var(--panel);
    color: var(--ink);
}
.top-logout svg {
    width: 17px;
    height: 17px;
    fill: currentColor;
}
.top-logout:hover,
.top-logout:focus-visible {
    background: var(--soft);
    color: var(--ink);
}

@media (max-width: 920px) {
    .modal-backdrop {
        height: 100dvh;
        max-height: 100dvh;
        align-items: flex-start;
        overflow-y: auto;
        padding: max(12px, env(safe-area-inset-top)) 10px max(18px, env(safe-area-inset-bottom));
    }
    .modal {
        width: min(680px, calc(100vw - 20px));
        max-height: calc(100dvh - max(24px, env(safe-area-inset-top) + env(safe-area-inset-bottom)));
        margin: 0 auto;
        overflow-y: auto;
        overscroll-behavior: contain;
        -webkit-overflow-scrolling: touch;
    }
    .modal-head h2,
    .main .panel-title h2,
    .main .panel > h2,
    .main .collapsible-panel > summary strong,
    .form-launch-card strong {
        max-width: 100%;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }
    .modal-head h2 {
        font-size: clamp(21px, 6vw, 27px);
        line-height: 1.15;
    }
    .modal-head {
        margin-bottom: 14px;
        padding-right: 92px;
    }
    .modal-close {
        top: 12px;
        right: 12px;
        min-height: 38px;
        padding: 8px 11px;
    }
    .top-logout {
        display: grid;
    }
}

@media (max-width: 640px) {
    .top-actions {
        gap: 5px;
    }
    .top-logout {
        width: 34px;
        height: 34px;
        min-width: 34px;
    }
    .top-logout svg {
        width: 16px;
        height: 16px;
    }
    .brand strong {
        font-size: 14px;
    }
    .client-form-modal-card,
    .service-form-modal-card,
    .professional-form-modal-card,
    .expense-form-modal-card,
    .commission-form-modal-card,
    .payment-form-modal-card,
    .access-form-modal-card {
        padding: 16px;
    }
    .modal-head h2 {
        font-size: 24px;
    }
}

/* Desktop: reserve room for the complete brand name and the quick logout action. */
@media (min-width: 921px) {
    .sidebar {
        width: 286px;
    }
    .main {
        margin-left: 286px;
    }
    .brand strong {
        font-size: 14px;
        text-overflow: clip;
    }
    .top-logout {
        display: grid;
    }
}

/* Pendências de aprovação: destaque contínuo no contorno do próprio details. */
.main > .grid > details.approval-pending-panel,
.main > section > details.approval-pending-panel {
    border: 2px solid #f59e0b;
    background: color-mix(in srgb, #f59e0b 4%, var(--panel));
    box-shadow:
        0 0 0 2px color-mix(in srgb, #f59e0b 22%, transparent),
        var(--shadow);
}
.main > .grid > details.approval-pending-panel > summary,
.main > section > details.approval-pending-panel > summary {
    background: transparent;
}
.main > .grid > details.approval-pending-panel > .collapsible-body,
.main > section > details.approval-pending-panel > .collapsible-body {
    background: transparent;
}
.main > .grid > details.approval-pending-panel > .collapsible-body table tbody td,
.main > section > details.approval-pending-panel > .collapsible-body table tbody td {
    background: color-mix(in srgb, var(--panel) 94%, transparent);
}

@media (max-width: 420px) {
    .main {
        padding: 8px;
    }
    .topbar {
        padding: 12px;
    }
    .top-actions {
        gap: 6px;
    }
    .menu-toggle,
    .notification-button {
        width: 34px;
        height: 34px;
        min-height: 34px;
    }
    .notification-menu {
        width: 34px;
        height: 34px;
    }
    .theme-switch {
        width: 50px;
        height: 27px;
        min-height: 27px;
    }
    .theme-switch i {
        width: 19px;
        height: 19px;
    }
    :root[data-theme="dark"] .theme-switch i {
        transform: translateX(0);
    }
    :root[data-theme="light"] .theme-switch i {
        transform: translateX(23px);
    }
    .dashboard-filter {
        grid-template-columns: 1fr;
    }
    .row {
        grid-template-columns: 1fr;
    }
    .notification-popover {
        top: 76px;
        right: auto;
        left: 50%;
        width: min(360px, calc(100vw - 16px));
        transform: translateX(-50%);
    }
    .metrics article,
    .panel {
        padding: 12px;
    }
    .metric-pie,
    .panel-pie .metric-pie {
        grid-template-columns: 1fr;
    }
    .pie-chart,
    .panel-pie .pie-chart {
        width: 92px;
    }
    .pie-legend p {
        font-size: 11px;
    }
    table {
        min-width: 520px;
    }
    .monthly-comparison {
        min-width: 720px;
    }
    .agenda-detail-list {
        grid-template-columns: 1fr;
    }
    .agenda-detail-list dt {
        border-bottom: 0;
        padding-bottom: 4px;
    }
    .agenda-detail-list dd {
        padding-top: 4px;
    }
    .agenda-modal-actions {
        align-items: stretch;
        flex-direction: column;
    }
    .agenda-modal-navigation {
        justify-content: space-between;
    }
    .agenda-modal-navigation .icon-action {
        width: 42px;
        min-width: 42px;
        min-height: 38px;
    }
    .agenda-modal-actions .button-blue,
    .agenda-modal-actions .button-danger {
        width: 100%;
    }
    .impersonation-banner {
        align-items: flex-start;
        flex-direction: column;
    }
    .impersonation-banner a {
        width: 100%;
        text-align: center;
    }
}

/* Dashboard gerencial: composição visual orientada por dados, mantendo os componentes existentes. */
.dashboard-modern {
    display: grid;
    gap: 16px;
    color: var(--ink);
}

.dashboard-modern + .dashboard-legacy {
    display: none;
}

.dashboard-context {
    display: flex;
    align-items: end;
    justify-content: space-between;
    gap: 20px;
    padding: 2px 2px 0;
}

.dashboard-context p {
    margin: 8px 0 0;
    color: var(--muted);
    font-size: 14px;
}

.dashboard-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: var(--gold);
    font-size: 11px;
    font-weight: 800;
    letter-spacing: .12em;
    text-transform: uppercase;
}

.dashboard-eyebrow svg {
    width: 16px;
    height: 16px;
    fill: currentColor;
}

.dashboard-updated,
.dashboard-panel-note {
    color: var(--muted);
    font-size: 12px;
}

.dashboard-updated strong {
    color: var(--ink);
}

.dashboard-filter-modern {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 12px;
    margin: 0;
}

.dashboard-filter-modern label {
    position: relative;
    display: grid;
    grid-template-columns: 22px 1fr;
    grid-template-rows: auto 1fr;
    column-gap: 10px;
    align-items: center;
    width: auto;
    min-height: 62px;
    margin: 0;
    padding: 10px 14px;
    border: 1px solid var(--line);
    border-radius: 12px;
    background: color-mix(in srgb, var(--input) 86%, var(--panel));
    color: var(--muted);
    font-size: 12px;
    font-weight: 700;
}

.dashboard-filter-modern label:focus-within {
    border-color: var(--blue);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--blue) 20%, transparent);
}

.dashboard-filter-modern .dashboard-filter-icon {
    grid-row: 1 / span 2;
    color: var(--blue);
}

.dashboard-filter-modern .dashboard-filter-icon svg {
    width: 19px;
    height: 19px;
    fill: currentColor;
}

.dashboard-filter-modern select {
    min-height: 28px;
    margin: 0;
    padding: 0 26px 0 0;
    border: 0;
    background-color: transparent;
    color: var(--ink);
    font-size: 14px;
    font-weight: 700;
}

.dashboard-scope-line {
    display: inline-flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
    width: fit-content;
    padding: 8px 12px;
    border: 1px solid var(--line);
    border-radius: 999px;
    background: color-mix(in srgb, var(--panel) 88%, transparent);
    color: var(--muted);
    font-size: 12px;
}

.dashboard-scope-line strong {
    color: var(--ink);
}

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

.dashboard-metric-card {
    position: relative;
    min-height: 170px;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    padding: 18px 18px 16px 22px;
    border: 1px solid var(--line);
    border-radius: 13px;
    background: color-mix(in srgb, var(--panel) 92%, transparent);
    box-shadow: var(--shadow);
    transition: transform .16s ease, border-color .16s ease, box-shadow .16s ease;
}

.dashboard-metric-card::before {
    content: "";
    position: absolute;
    inset: 0 auto 0 0;
    width: 3px;
    background: var(--metric-color);
}

.dashboard-metric-card:hover {
    transform: translateY(-2px);
    border-color: color-mix(in srgb, var(--metric-color) 52%, var(--line));
    box-shadow: 0 14px 34px rgba(0, 0, 0, .16);
}

.dashboard-metric-card > span {
    color: var(--muted);
    font-size: 13px;
    font-weight: 600;
}

.dashboard-metric-card > strong {
    margin-top: 14px;
    color: var(--ink);
    font-size: 27px;
    font-variant-numeric: tabular-nums;
    line-height: 1.05;
}

.dashboard-metric-card > strong.is-negative {
    color: var(--danger);
}

.dashboard-metric-card > small {
    margin-top: 8px;
    color: var(--muted);
    font-size: 12px;
}

.dashboard-metric-icon {
    width: 42px;
    height: 42px;
    display: grid;
    place-items: center;
    margin-bottom: 12px;
    border-radius: 11px;
    background: color-mix(in srgb, var(--metric-color) 18%, transparent);
    color: var(--metric-color);
}

.dashboard-metric-icon svg {
    width: 22px;
    height: 22px;
    fill: currentColor;
}

.dashboard-metric-card.accent-blue { --metric-color: #2f6bff; }
.dashboard-metric-card.accent-purple { --metric-color: #9a4dff; }
.dashboard-metric-card.accent-green { --metric-color: #14c784; }
.dashboard-metric-card.accent-gold { --metric-color: #f5bd42; }

.metric-badge {
    margin-top: auto;
    padding-top: 12px;
    color: var(--success);
    font-size: 11px;
    font-weight: 800;
}

.dashboard-chart-grid {
    display: grid;
    grid-template-columns: minmax(0, 1.9fr) minmax(330px, 1fr);
    gap: 16px;
}

.dashboard-panel {
    min-width: 0;
    padding: 18px;
    border: 1px solid var(--line);
    border-radius: 14px;
    background: color-mix(in srgb, var(--panel) 93%, transparent);
    box-shadow: var(--shadow);
}

.dashboard-panel-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
    margin-bottom: 16px;
}

.dashboard-panel-head h2 {
    margin: 0;
    color: var(--ink);
    font-size: 17px;
}

.dashboard-panel-head p {
    margin: 5px 0 0;
    color: var(--muted);
    font-size: 12px;
}
.dashboard-summary-dropdown summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    cursor: pointer;
    list-style: none;
}
.dashboard-summary-dropdown summary::-webkit-details-marker {
    display: none;
}
.dashboard-summary-dropdown summary .dashboard-panel-head,
.dashboard-summary-dropdown summary .panel-title {
    flex: 1;
    min-width: 0;
    margin: 0;
}
.dashboard-summary-dropdown summary > b {
    display: inline-grid;
    place-items: center;
    width: 32px;
    min-width: 32px;
    height: 32px;
    border: 1px solid var(--line);
    border-radius: 999px;
    background: var(--input);
    color: var(--ink);
    font-size: 0;
    line-height: 1;
}
.dashboard-summary-dropdown summary > b::before {
    content: "+";
    font-size: 20px;
}
.dashboard-summary-dropdown[open] > summary {
    padding-bottom: 16px;
    border-bottom: 1px solid var(--line);
}
.dashboard-summary-dropdown[open] summary > b::before {
    content: "-";
}
.dashboard-summary-body {
    padding-top: 16px;
    overflow-x: auto;
}
.panel .dashboard-summary-dropdown {
    min-width: 0;
}

.dashboard-segmented {
    display: inline-flex;
    flex: 0 0 auto;
    padding: 3px;
    border: 1px solid var(--line);
    border-radius: 9px;
    background: var(--input);
}

.dashboard-segmented a {
    min-width: 58px;
    padding: 7px 9px;
    border-radius: 7px;
    color: var(--muted);
    font-size: 11px;
    font-weight: 800;
    text-align: center;
}

.dashboard-segmented a:hover,
.dashboard-segmented a:focus-visible {
    color: var(--ink);
    background: color-mix(in srgb, var(--blue) 12%, transparent);
}

.dashboard-segmented a.active {
    color: #fff;
    background: linear-gradient(135deg, #2f6bff, #1d4ed8);
}

.dashboard-daily-filter {
    display: flex;
    justify-content: flex-end;
    margin: -4px 0 14px;
}
.dashboard-daily-filter label {
    display: grid;
    gap: 5px;
    min-width: 190px;
    color: var(--muted);
    font-size: 11px;
    font-weight: 800;
}
.dashboard-daily-filter select {
    min-height: 38px;
}

.dashboard-line-chart {
    width: 100%;
    min-height: 250px;
}

.dashboard-line-chart svg {
    display: block;
    width: 100%;
    height: auto;
    overflow: visible;
}

.chart-grid-line {
    stroke: color-mix(in srgb, var(--line) 70%, transparent);
    stroke-width: 1;
}

.chart-axis-label,
.chart-x-label {
    fill: var(--muted);
    font-family: Inter, "Segoe UI", sans-serif;
    font-size: 10px;
}

.chart-area {
    fill: url(#dashboard-area-fill);
}

.chart-line {
    fill: none;
    stroke: #2f6bff;
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke-width: 3;
}

.chart-point {
    fill: var(--panel);
    stroke: #2f6bff;
    stroke-width: 2;
}

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

.dashboard-progress-grid h3 {
    margin: 0;
    color: var(--muted);
    font-size: 11px;
    letter-spacing: .08em;
    text-transform: uppercase;
}

.dashboard-progress-grid .metric-chart {
    margin-top: 13px;
}

.dashboard-progress-grid .metric-chart + .metric-chart {
    border-top: 0;
}

.dashboard-total {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-top: 18px;
    padding-top: 15px;
    border-top: 1px solid var(--line);
}

.dashboard-total span {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: var(--muted);
    font-size: 12px;
    font-weight: 700;
}

.dashboard-total svg {
    width: 17px;
    height: 17px;
    fill: var(--gold);
}

.dashboard-total strong {
    color: var(--gold);
    font-size: 22px;
    font-variant-numeric: tabular-nums;
}

.dashboard-summary-panel {
    overflow-x: auto;
}

.dashboard-summary-panel .monthly-comparison {
    margin: 0;
}

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

.dashboard-detail-panel {
    min-width: 0;
}

.dashboard-detail-panel table {
    width: 100%;
}

.dashboard-modern .monthly-comparison {
    min-width: 900px;
}

.dashboard-modern .monthly-comparison thead th {
    color: #fff;
    background: linear-gradient(135deg, #2f6bff, #1d4ed8);
}

.dashboard-modern .monthly-comparison tbody td {
    font-variant-numeric: tabular-nums;
}

.dashboard-modern .monthly-comparison tbody tr td:nth-child(3) {
    background: color-mix(in srgb, #9a4dff 11%, var(--panel));
}

.dashboard-modern .monthly-comparison tbody tr td:nth-child(4) {
    background: color-mix(in srgb, #14c784 11%, var(--panel));
}

.dashboard-modern .monthly-comparison tbody tr td:nth-child(5) {
    background: color-mix(in srgb, #18c7d9 10%, var(--panel));
}

.dashboard-modern .monthly-comparison tbody tr td:nth-child(6) {
    background: color-mix(in srgb, #ef476f 10%, var(--panel));
}

.dashboard-modern .monthly-comparison tbody tr td:nth-child(7) {
    background: color-mix(in srgb, #2f6bff 10%, var(--panel));
}

.dashboard-modern .monthly-comparison .total-row td,
.dashboard-modern .monthly-comparison .percent-row td,
.dashboard-modern .monthly-comparison .average-row td {
    color: #fff;
    background: #243249;
    font-weight: 800;
}

.dashboard-modern .monthly-comparison .total-row td:nth-child(3),
.dashboard-modern .monthly-comparison .total-row td:nth-child(4),
.dashboard-modern .monthly-comparison .total-row td:nth-child(5),
.dashboard-modern .monthly-comparison .total-row td:nth-child(6),
.dashboard-modern .monthly-comparison .total-row td:nth-child(7),
.dashboard-modern .monthly-comparison .percent-row td:nth-child(3),
.dashboard-modern .monthly-comparison .percent-row td:nth-child(4),
.dashboard-modern .monthly-comparison .percent-row td:nth-child(5),
.dashboard-modern .monthly-comparison .percent-row td:nth-child(6),
.dashboard-modern .monthly-comparison .percent-row td:nth-child(7),
.dashboard-modern .monthly-comparison .average-row td:nth-child(3),
.dashboard-modern .monthly-comparison .average-row td:nth-child(4),
.dashboard-modern .monthly-comparison .average-row td:nth-child(5),
.dashboard-modern .monthly-comparison .average-row td:nth-child(6),
.dashboard-modern .monthly-comparison .average-row td:nth-child(7) {
    background: #243249;
}

@media (max-width: 1180px) {
    .dashboard-metrics {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
    .dashboard-chart-grid {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 760px) {
    .dashboard-context {
        align-items: flex-start;
        flex-direction: column;
        gap: 8px;
    }
    .dashboard-filter-modern {
        grid-template-columns: 1fr;
    }
    .dashboard-metrics,
    .dashboard-detail-grid,
    .dashboard-progress-grid {
        grid-template-columns: 1fr;
    }
    .dashboard-metric-card {
        min-height: 150px;
    }
    .dashboard-panel {
        padding: 14px;
    }
    .dashboard-panel-head {
        flex-direction: column;
    }
    .dashboard-segmented {
        width: 100%;
    }
    .dashboard-segmented a {
        flex: 1;
    }
    .dashboard-line-chart {
        min-width: 640px;
    }
    .dashboard-revenue-panel {
        overflow-x: auto;
    }
}

/* Sistema visual compartilhado: o mesmo acabamento da Visao Geral em todos os menus. */
.main > .panel,
.main > .grid > .panel,
.main > .grid > details.panel,
.main > section > .panel,
.main > section > details.panel,
.main .form-list > details.panel,
.main .form-list > .panel,
.main .form-list > .grid > .panel,
.main .form-list > .grid > details.panel {
    background:
        linear-gradient(145deg, color-mix(in srgb, var(--panel) 96%, #ffffff 4%), var(--panel));
    border-color: color-mix(in srgb, var(--line) 88%, #ffffff 12%);
    border-radius: 16px;
    box-shadow: 0 16px 42px rgba(15, 23, 42, .10);
}

:root[data-theme="dark"] .main > .panel,
:root[data-theme="dark"] .main > .grid > .panel,
:root[data-theme="dark"] .main > .grid > details.panel,
:root[data-theme="dark"] .main > section > .panel,
:root[data-theme="dark"] .main > section > details.panel,
:root[data-theme="dark"] .main .form-list > details.panel,
:root[data-theme="dark"] .main .form-list > .panel,
:root[data-theme="dark"] .main .form-list > .grid > .panel,
:root[data-theme="dark"] .main .form-list > .grid > details.panel,
:root[data-theme="graphite"] .main > .panel,
:root[data-theme="graphite"] .main > .grid > .panel,
:root[data-theme="graphite"] .main > .grid > details.panel,
:root[data-theme="graphite"] .main > section > .panel,
:root[data-theme="graphite"] .main > section > details.panel,
:root[data-theme="graphite"] .main .form-list > details.panel,
:root[data-theme="graphite"] .main .form-list > .panel,
:root[data-theme="graphite"] .main .form-list > .grid > .panel,
:root[data-theme="graphite"] .main .form-list > .grid > details.panel {
    box-shadow: 0 18px 46px rgba(0, 0, 0, .20);
}

.main .panel-title {
    min-height: 42px;
    margin-bottom: 16px;
    padding-bottom: 12px;
    border-bottom: 1px solid color-mix(in srgb, var(--line) 86%, transparent);
}
.main .panel-title h2,
.main .panel > h2 {
    color: var(--ink);
    font-size: 19px;
    font-weight: 850;
    letter-spacing: -.01em;
}
.main .panel-title p {
    color: var(--muted);
    font-size: 12px;
    font-weight: 700;
}
.main .panel-title p::first-letter {
    text-transform: uppercase;
}

.main .metrics {
    gap: 16px;
    margin-bottom: 20px;
}
.main .metrics article {
    position: relative;
    min-height: 178px;
    overflow: hidden;
    padding: 18px;
    border-radius: 16px;
    background: linear-gradient(145deg, color-mix(in srgb, var(--panel) 96%, #ffffff 4%), var(--panel));
    border-color: color-mix(in srgb, var(--line) 88%, #ffffff 12%);
    box-shadow: 0 16px 42px rgba(15, 23, 42, .09);
}
.main .metrics article::after {
    content: "";
    position: absolute;
    inset: 0 0 auto;
    height: 3px;
    background: var(--vivid-blue);
}
.main .metrics article:nth-child(2)::after { background: var(--vivid-purple); }
.main .metrics article:nth-child(3)::after { background: var(--vivid-green); }
.main .metrics article:nth-child(4)::after { background: var(--gold); }
.main .metrics > article > span {
    font-size: 12px;
    font-weight: 750;
    letter-spacing: .01em;
}
.main .metrics > article > strong {
    margin-top: 9px;
    font-size: 26px;
    letter-spacing: -.02em;
}

.main .form,
.main .form-dropdown > .form {
    gap: 0;
}
.main .form label,
.main .dashboard-filter label {
    color: var(--ink);
    font-size: 11px;
    font-weight: 850;
    letter-spacing: .01em;
    text-transform: none;
}
.main .form input,
.main .form select,
.main .form textarea,
.main .dashboard-filter input,
.main .dashboard-filter select {
    min-height: 42px;
    border-radius: 11px;
    background: var(--input);
    border-color: color-mix(in srgb, var(--line) 92%, #ffffff 8%);
}
.main .form textarea {
    min-height: 92px;
}
.main .form > button,
.main .form > .button-success,
.main .form > .button-blue {
    min-height: 42px;
    border-radius: 11px;
    box-shadow: 0 8px 20px rgba(15, 23, 42, .10);
}

.main table {
    min-width: 680px;
    border: 1px solid color-mix(in srgb, var(--line) 80%, transparent);
    border-radius: 10px;
    border-spacing: 0;
    overflow: hidden;
}
.main table thead th {
    background: color-mix(in srgb, var(--primary-head) 82%, var(--table-head));
    color: #fff;
    border-bottom-color: color-mix(in srgb, var(--primary-head) 65%, var(--line));
    font-size: 10px;
    font-weight: 900;
    letter-spacing: .035em;
    padding: 12px 11px;
}
.main table tbody td {
    padding: 12px 11px;
    color: var(--ink);
    background: color-mix(in srgb, var(--panel) 94%, transparent);
    border-bottom-color: color-mix(in srgb, var(--line) 82%, transparent);
    font-size: 13px;
}
.main table tbody tr:last-child td {
    border-bottom: 0;
}
.main table tbody tr:hover td {
    background: color-mix(in srgb, var(--primary-head) 7%, var(--panel));
    filter: none;
}
.main table tfoot td,
.main table .table-total-header td {
    background: color-mix(in srgb, var(--primary-head) 18%, var(--table-head));
    color: var(--ink);
    border-bottom: 0;
    font-weight: 900;
}
.main .action-row {
    gap: 7px;
}
.main .icon-action {
    width: 32px;
    height: 32px;
    min-width: 32px;
    border-radius: 9px;
}

.main .collapsible-panel > summary {
    min-height: 58px;
    padding: 15px 18px;
}
.main .collapsible-panel > summary strong {
    font-size: 18px;
    letter-spacing: -.01em;
}
.main .collapsible-panel > summary b {
    background: color-mix(in srgb, var(--primary-head) 10%, transparent);
}
.main .collapsible-body {
    padding: 18px;
}

.main .form-list {
    gap: 16px;
}
.main .form-list > .grid {
    gap: 16px;
}
.main .period-chip,
.main .status-pill,
.main .attention-badge {
    font-weight: 850;
}

@media (max-width: 920px) {
    .main .panel,
    .main > .grid > .panel,
    .main > .grid > details.panel,
    .main > section > .panel,
    .main > section > details.panel {
        padding: 14px;
        border-radius: 14px;
    }
    .main .panel-title {
        align-items: flex-start;
        min-height: 0;
        gap: 7px;
        padding-bottom: 11px;
    }
    .main .panel-title h2,
    .main .panel > h2 {
        font-size: 17px;
    }
    .main .panel-title p {
        font-size: 11px;
    }
    .main .metrics article {
        min-height: 142px;
        padding: 15px;
    }
    .main .metrics > article > strong {
        font-size: 23px;
    }
    .main .collapsible-panel > summary {
        min-height: 52px;
        padding: 13px 14px;
    }
    .main .collapsible-body {
        padding: 14px;
    }
    .main table {
        min-width: 620px;
    }
}

/* Histórico de comissões agrupado por profissional. */
.commission-history-panel {
    min-width: 0;
}
.commission-history-filter {
    display: flex;
    align-items: end;
    gap: 12px;
    margin: 0 0 18px;
    padding: 12px;
    border: 1px solid var(--line);
    border-radius: 12px;
    background: color-mix(in srgb, var(--soft) 72%, transparent);
}
.commission-history-filter label {
    display: grid;
    gap: 6px;
    min-width: min(300px, 100%);
    color: var(--muted);
    font-size: 12px;
    font-weight: 700;
}
.commission-history-filter select {
    min-height: 42px;
}
.commission-filter-clear {
    min-height: 42px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0 16px;
}
.commission-groups {
    display: grid;
    gap: 12px;
}
.commission-group {
    overflow: hidden;
    border: 1px solid var(--line);
    border-radius: 14px;
    background: color-mix(in srgb, var(--panel) 84%, var(--soft));
}
.commission-group summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    min-height: 58px;
    padding: 11px 16px;
    cursor: pointer;
    list-style: none;
}
.commission-group summary::-webkit-details-marker {
    display: none;
}
.commission-group summary > span {
    display: grid;
    gap: 3px;
}
.commission-group summary strong {
    color: var(--ink);
    font-size: 15px;
}
.commission-group summary em {
    color: var(--muted);
    font-size: 11px;
    font-style: normal;
}
.commission-group summary > b::before {
    content: '+';
    display: grid;
    place-items: center;
    width: 28px;
    height: 28px;
    border: 1px solid var(--line);
    border-radius: 999px;
    color: var(--ink);
    font-size: 18px;
    line-height: 1;
}
.commission-group[open] summary > b::before {
    content: '−';
}
.commission-group-body {
    padding: 0 12px 12px;
}
.commission-group-body table {
    margin: 0;
}
.commission-group-body td strong {
    color: var(--blue);
}
.data-disclosure {
    overflow: hidden;
    padding: 0;
}
.data-disclosure > summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    min-height: 72px;
    padding: 16px 20px;
    cursor: pointer;
    list-style: none;
}
.data-disclosure > summary::-webkit-details-marker {
    display: none;
}
.data-disclosure > summary > span {
    display: grid;
    gap: 4px;
}
.data-disclosure > summary strong {
    color: var(--ink);
    font-size: 16px;
}
.data-disclosure > summary em {
    color: var(--muted);
    font-size: 12px;
    font-style: normal;
}
.data-disclosure > summary > b::before {
    content: '+';
    display: grid;
    place-items: center;
    width: 30px;
    height: 30px;
    border: 1px solid var(--line);
    border-radius: 999px;
    color: var(--ink);
    font-size: 19px;
    line-height: 1;
}
.data-disclosure[open] > summary > b::before {
    content: '−';
}
.data-disclosure .disclosure-body {
    padding: 0 16px 16px;
    overflow-x: auto;
}
.data-disclosure .disclosure-body table {
    margin: 0;
}
.table-scroll {
    max-width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}
.empty-state {
    margin: 0;
    padding: 20px;
    border: 1px dashed var(--line);
    border-radius: 12px;
    color: var(--muted);
    text-align: center;
}
@media (max-width: 920px) {
    .commission-history-filter {
        align-items: stretch;
        flex-direction: column;
    }
    .commission-history-filter label {
        min-width: 0;
    }
    .commission-filter-clear {
        width: 100%;
    }
    .commission-group summary {
        min-height: 52px;
        padding: 10px 12px;
    }
    .commission-group-body {
        overflow-x: auto;
    }
    .commission-group-body table {
        min-width: 560px;
    }
}

@media (max-width: 640px) {
    .agenda-detail-modal {
        padding: 10px;
    }
    .agenda-detail-modal .modal {
        width: min(100%, calc(100vw - 12px));
        max-height: calc(100vh - 12px);
        padding: 18px;
        border-radius: 16px;
    }
    .agenda-detail-modal .modal-head {
        margin-bottom: 10px;
        padding-right: 76px;
    }
    .agenda-detail-modal .modal-head p {
        margin-bottom: 3px;
        font-size: 11px;
    }
    .agenda-detail-modal .modal-head h2 {
        font-size: 28px;
        line-height: 1.1;
    }
    .agenda-detail-modal .modal-close {
        top: 14px;
        right: 14px;
        min-height: 38px;
        padding: 8px 11px;
        font-size: 14px;
    }
    .agenda-detail-modal .agenda-modal-navigation {
        gap: 6px;
        margin-bottom: 7px;
    }
    .agenda-detail-modal .agenda-modal-navigation .icon-action {
        width: 32px;
        min-width: 32px;
        min-height: 32px;
        font-size: 18px;
    }
    .agenda-detail-modal .agenda-modal-navigation span {
        min-width: 52px;
        font-size: 10px;
    }
    .agenda-detail-modal .agenda-detail-list {
        grid-template-columns: 100px minmax(0, 1fr);
        border-radius: 11px;
    }
    .agenda-detail-modal .agenda-detail-list dt,
    .agenda-detail-modal .agenda-detail-list dd {
        min-width: 0;
        padding: 10px 11px;
        border-bottom: 1px solid var(--line);
    }
    .agenda-detail-modal .agenda-detail-list dt {
        font-size: 10px;
        line-height: 1.15;
    }
    .agenda-detail-modal .agenda-detail-list dd {
        font-size: 14px;
        line-height: 1.3;
        overflow-wrap: anywhere;
    }
    .agenda-detail-modal .agenda-modal-actions {
        flex-direction: row;
        align-items: stretch;
        justify-content: flex-end;
        gap: 6px;
        margin-top: 12px;
    }
    .agenda-detail-modal .agenda-modal-actions form,
    .agenda-detail-modal .agenda-modal-actions .icon-action {
        flex: 0 0 auto;
        width: auto;
        min-width: 42px;
    }
    .agenda-detail-modal .agenda-modal-actions .button-blue,
    .agenda-detail-modal .agenda-modal-actions .button-danger {
        min-height: 40px;
        padding: 0 8px;
        border-radius: 9px;
        font-size: 12px;
        white-space: nowrap;
    }
    .agenda-detail-modal .agenda-modal-actions .icon-action {
        width: 42px;
        height: 42px;
        min-width: 42px;
        min-height: 42px;
        padding: 0;
    }
}

@media (max-width: 360px) {
    .agenda-detail-modal .agenda-detail-list {
        grid-template-columns: 88px minmax(0, 1fr);
    }
    .agenda-detail-modal .agenda-detail-list dd {
        font-size: 12px;
    }
    .agenda-detail-modal .agenda-modal-actions .button-blue,
    .agenda-detail-modal .agenda-modal-actions .button-danger {
        font-size: 11px;
    }
}

/* Mantem no mobile a mesma proporcao compacta do modal desktop. */
@media (max-width: 920px) {
    .agenda-create-modal .agenda-create-card .collapsible-body {
        gap: 8px;
        padding: 0 0 12px;
    }
    .agenda-create-modal-card .modal-head {
        margin-bottom: 10px;
    }
    .agenda-create-modal-card .modal-head h2 {
        font-size: 24px;
    }
    .agenda-create-modal .agenda-create-card label {
        gap: 3px;
        margin-bottom: 5px;
        font-size: 11px;
    }
    .agenda-create-modal .agenda-create-card input,
    .agenda-create-modal .agenda-create-card select,
    .agenda-create-modal .agenda-create-card textarea {
        padding: 7px 10px;
        border-radius: 10px;
    }
    .agenda-create-modal .agenda-create-card textarea {
        min-height: 42px;
        max-height: 54px;
    }
    .agenda-create-modal .agenda-create-card .agenda-all-day-check {
        padding: 6px 9px;
    }
    .agenda-create-modal .agenda-create-card .agenda-split-preview {
        margin: 0;
    }
    .agenda-create-modal .agenda-create-card .agenda-split-preview span {
        min-height: 56px;
        padding: 9px 10px;
    }
    .agenda-create-modal .agenda-create-card .agenda-form-submit,
    .agenda-create-modal .agenda-create-card .form-cancel-wide {
        min-height: 36px;
    }
}

/* Evita o zoom automatico do Safari/iPhone ao focar campos menores que 16px. */
@media (max-width: 640px) {
    input:not([type="hidden"]),
    select,
    textarea,
    .floating-field input,
    .login-card input {
        font-size: 16px !important;
    }
}

/* Filtros ativos ficam verdes; o estado ativo prevalece sobre hover e foco. */
.agenda-mobile-filter-toggle.is-active,
.agenda-mobile-filter-toggle.is-active:hover,
.agenda-mobile-filter-toggle.is-active:active,
.agenda-mobile-filter-toggle.is-active:focus-visible,
.agenda-mobile-filter-toggle.is-active[aria-expanded="true"] {
    background: var(--success) !important;
    border-color: var(--success) !important;
    color: #fff !important;
    box-shadow: 0 0 0 2px color-mix(in srgb, var(--success) 18%, transparent);
}

/* Resumo do menu de agendamentos: cards compactos, detalhes sob demanda. */
.appointments-summary-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    align-items: start;
}
.appointments-summary-grid > .collapsible-panel {
    min-width: 0;
    overflow: hidden;
}
.appointments-summary-grid > .collapsible-panel:not([open]) > summary {
    min-height: 116px;
    align-items: center;
}
.appointments-summary-grid > .collapsible-panel[open] {
    grid-column: 1 / -1;
}
.appointments-summary-grid > .collapsible-panel[open] > summary {
    min-height: 78px;
}
.appointments-summary-grid .collapsible-panel summary strong {
    line-height: 1.15;
}
.appointments-summary-grid .collapsible-panel summary em {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

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

@media (max-width: 640px) {
    .appointments-summary-grid {
        grid-template-columns: 1fr;
    }
    .appointments-summary-grid > .collapsible-panel:not([open]) > summary {
        min-height: 86px;
    }
}

/* Cards de resumo dos agendamentos, com detalhes exibidos em modal. */
.appointments-summary-grid > .appointment-summary-card {
    --appointment-accent: var(--blue);
    padding: 0;
    overflow: hidden;
    border-left: 3px solid var(--appointment-accent);
    background: linear-gradient(145deg, color-mix(in srgb, var(--panel) 96%, #ffffff 4%), var(--panel));
}
.appointments-summary-grid > .appointment-card-pending {
    --appointment-accent: #f59e0b;
}
.appointments-summary-grid > .appointment-card-scheduled {
    --appointment-accent: #2563eb;
}
.appointments-summary-grid > .appointment-card-summary {
    --appointment-accent: #8b5cf6;
}
.appointments-summary-grid > .appointment-card-recent {
    --appointment-accent: #10b981;
}
.appointments-summary-grid > .appointment-card-rejected {
    --appointment-accent: #ef4444;
}
.appointments-summary-grid > .appointment-card-pending.approval-pending-panel {
    border-color: color-mix(in srgb, var(--appointment-accent) 58%, var(--line));
    border-left-color: var(--appointment-accent);
    background: linear-gradient(145deg, color-mix(in srgb, var(--appointment-accent) 8%, var(--panel)), var(--panel));
    box-shadow: 0 16px 42px rgba(15, 23, 42, .10);
}
.appointments-summary-grid .appointment-summary-card > summary {
    min-height: 148px;
    padding: 20px 18px;
    gap: 12px;
}
.appointments-summary-grid .appointment-summary-content {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: center;
    gap: 12px;
    min-width: 0;
    flex: 1;
}
.appointments-summary-grid .appointment-card-icon {
    display: grid;
    place-items: center;
    width: 42px;
    height: 42px;
    min-width: 42px;
    border-radius: 11px;
    background: color-mix(in srgb, var(--appointment-accent) 18%, var(--input));
    color: var(--appointment-accent);
}
.appointments-summary-grid .appointment-card-icon svg {
    width: 22px;
    height: 22px;
    fill: currentColor;
}
.appointments-summary-grid .appointment-summary-copy {
    display: grid;
    gap: 5px;
    min-width: 0;
}
.appointments-summary-grid .appointment-summary-copy strong {
    overflow: hidden;
    color: var(--ink);
    font-size: 15px;
    line-height: 1.2;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.appointments-summary-grid .appointment-summary-copy em {
    color: var(--muted);
    font-size: 11px;
    font-weight: 800;
}
.appointments-summary-grid .appointment-summary-value {
    color: var(--ink);
    font-size: 30px;
    line-height: 1;
}
.appointments-summary-grid .appointment-summary-card > summary > b {
    flex: 0 0 auto;
    border-color: color-mix(in srgb, var(--appointment-accent) 42%, var(--line));
    color: var(--appointment-accent);
}
.appointments-summary-modal .modal {
    width: min(1180px, calc(100vw - 40px));
}
.appointments-summary-modal [data-appointment-card-body] {
    min-width: 0;
    overflow-x: auto;
}
.appointments-summary-modal .appointment-modal-subsection {
    margin-top: 22px;
    padding-top: 18px;
    border-top: 1px solid var(--line);
}
.appointments-summary-modal .appointment-modal-subsection h3 {
    margin: 0 0 12px;
    color: var(--ink);
    font-size: 15px;
}

@media (max-width: 640px) {
    .appointments-summary-grid .appointment-summary-card > summary {
        min-height: 104px;
        padding: 15px 13px;
    }
    .appointments-summary-grid .appointment-card-icon {
        width: 38px;
        height: 38px;
        min-width: 38px;
    }
    .appointments-summary-grid .appointment-summary-value {
        font-size: 26px;
    }
    .appointments-summary-grid .appointment-summary-copy strong {
        font-size: 14px;
    }
    .appointments-summary-modal .modal {
        width: min(100%, calc(100vw - 20px));
    }
}

/* Analytics da tela de agendamentos: filtros globais e leitura rápida dos volumes. */
.appointments-analytics {
    gap: 14px;
    margin-bottom: 18px;
}
.appointments-analytics .dashboard-context {
    padding-top: 0;
}
.appointments-analytics-charts {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px;
}
.appointment-chart-panel {
    min-width: 0;
    overflow: hidden;
}
.appointment-monthly-chart-panel {
    grid-column: 1 / -1;
}
.appointment-chart-legend {
    display: flex;
    flex-wrap: wrap;
    gap: 14px;
    margin: -4px 0 14px;
    color: var(--muted);
    font-size: 11px;
    font-weight: 800;
}
.appointment-chart-legend span {
    display: inline-flex;
    align-items: center;
    gap: 6px;
}
.appointment-chart-dot {
    width: 9px;
    height: 9px;
    border-radius: 50%;
}
.appointment-chart-dot.appointments,
.appointment-chart-track.appointments i {
    background: #2f6bff;
}
.appointment-chart-dot.revenue,
.appointment-chart-track.revenue i {
    background: #14c784;
}
.appointment-monthly-chart {
    display: grid;
    gap: 10px;
}
.appointment-month-row {
    display: grid;
    grid-template-columns: minmax(150px, 1fr) minmax(260px, 2.8fr);
    align-items: center;
    gap: 14px;
    padding: 8px 0;
    border-bottom: 1px solid color-mix(in srgb, var(--line) 72%, transparent);
}
.appointment-month-row:last-child {
    border-bottom: 0;
}
.appointment-month-label {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 10px;
    min-width: 0;
}
.appointment-month-label strong {
    color: var(--ink);
    font-size: 12px;
}
.appointment-month-label span {
    overflow: hidden;
    color: var(--muted);
    font-size: 11px;
    text-align: right;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.appointment-month-label .appointment-month-meta {
    display: inline-flex;
    align-items: center;
    justify-content: flex-end;
    gap: 6px;
    overflow: visible;
    flex: 0 0 auto;
}
.appointment-month-meta em {
    color: var(--muted);
    font-style: normal;
    white-space: nowrap;
}
.appointment-month-bars {
    display: grid;
    gap: 5px;
}
.appointment-chart-track {
    display: block;
    height: 8px;
    overflow: hidden;
    border-radius: 999px;
    background: color-mix(in srgb, var(--input) 88%, var(--panel));
}
.appointment-chart-track i {
    display: block;
    height: 100%;
    min-width: 2px;
    border-radius: inherit;
    transition: width .2s ease;
}
.appointment-chart-track.professional i {
    background: #9a4dff;
}
.appointment-chart-track.category i {
    background: #f5bd42;
}
.appointment-horizontal-chart {
    display: grid;
    gap: 14px;
}
.appointment-chart-row {
    display: grid;
    gap: 6px;
}
.appointment-chart-row-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    color: var(--ink);
    font-size: 12px;
}
.appointment-chart-row-head strong {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.appointment-chart-row-head b {
    color: var(--ink);
    font-variant-numeric: tabular-nums;
}
.appointment-analytics-count {
    min-height: 0;
    padding: 2px 5px;
    border: 0;
    border-bottom: 1px dashed color-mix(in srgb, var(--blue) 70%, transparent);
    border-radius: 4px;
    background: transparent !important;
    color: var(--blue);
    font: inherit;
    font-weight: 900;
    line-height: 1.2;
    cursor: pointer;
    appearance: none;
    box-shadow: none;
}
.appointment-analytics-count:hover,
.appointment-analytics-count:focus-visible,
.appointment-analytics-count.is-selected {
    border-bottom-color: var(--blue);
    background: color-mix(in srgb, var(--blue) 14%, transparent) !important;
    color: var(--blue);
    box-shadow: none;
}
.appointment-analytics-count:focus-visible {
    outline: 2px solid color-mix(in srgb, var(--blue) 60%, transparent);
    outline-offset: 2px;
}
.appointment-chart-total {
    flex: 0 0 auto;
    color: var(--muted);
    font-size: 11px;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}
.appointment-month-count {
    display: inline-block;
    width: auto;
    min-width: 0;
    min-height: 0;
    padding: 2px 4px;
    border: 0;
    border-bottom: 1px dashed color-mix(in srgb, var(--accent) 70%, transparent);
    border-radius: 4px;
    background: transparent !important;
    color: var(--blue);
    font: inherit;
    font-weight: 800;
    cursor: pointer;
    appearance: none;
    box-shadow: none;
}
.appointment-month-count:hover,
.appointment-month-count:focus-visible,
.appointment-month-count.is-selected {
    color: var(--blue);
    border-bottom-color: var(--blue);
    background: color-mix(in srgb, var(--blue) 14%, transparent) !important;
    box-shadow: none;
}
.appointment-month-count:focus-visible {
    outline: 2px solid color-mix(in srgb, var(--blue) 60%, transparent);
    outline-offset: 2px;
}
.appointment-month-count:disabled {
    border-bottom-color: transparent;
    color: var(--muted);
    cursor: default;
}
.appointment-month-modal-card {
    width: min(980px, calc(100vw - 28px));
}
.appointment-month-professional-chart {
    display: grid;
    gap: 12px;
    margin-bottom: 16px;
    padding: 14px;
    border: 1px solid var(--line);
    border-radius: 12px;
    background: color-mix(in srgb, var(--panel) 72%, var(--input));
}
.appointment-month-professional-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding-bottom: 10px;
    border-bottom: 1px solid var(--line);
}
.appointment-month-professional-head h3 {
    margin: 0;
    color: var(--ink);
    font-size: 14px;
}
.appointment-month-professional-head strong {
    color: var(--success);
    font-size: 13px;
    white-space: nowrap;
}
.appointment-month-professional-row {
    display: grid;
    gap: 6px;
}
.appointment-month-professional-row > div {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    color: var(--ink);
    font-size: 12px;
}
.appointment-month-professional-row > div strong {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.appointment-month-professional-row > div b {
    color: var(--ink);
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}
.appointment-month-professional-row > span {
    display: block;
    height: 7px;
    overflow: hidden;
    border-radius: 999px;
    background: color-mix(in srgb, var(--input) 88%, var(--panel));
}
.appointment-month-professional-row > span i {
    display: block;
    height: 100%;
    min-width: 3px;
    border-radius: inherit;
    background: #14c784;
}
.appointment-month-service-charts {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 16px;
}
.appointment-month-pie-card {
    display: grid;
    gap: 14px;
    min-width: 0;
    padding: 16px;
    border: 1px solid var(--line);
    border-radius: 12px;
    background: color-mix(in srgb, var(--panel) 72%, var(--input));
}
.appointment-month-pie-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding-bottom: 10px;
    border-bottom: 1px solid var(--line);
}
.appointment-month-pie-head h3 {
    margin: 0;
    color: var(--ink);
    font-size: 14px;
}
.appointment-month-pie-head strong {
    color: var(--success);
    font-size: 13px;
    white-space: nowrap;
}
.appointment-month-pie-content {
    display: grid;
    grid-template-columns: 132px minmax(0, 1fr);
    align-items: center;
    gap: 16px;
}
.appointment-month-pie {
    position: relative;
    display: grid;
    place-items: center;
    width: 132px;
    aspect-ratio: 1;
    border-radius: 50%;
    box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--line) 80%, transparent);
}
.appointment-month-pie::after {
    content: "";
    position: absolute;
    inset: 28px;
    border-radius: 50%;
    background: var(--panel);
    box-shadow: inset 0 0 0 1px var(--line);
}
.appointment-month-pie span {
    position: relative;
    z-index: 1;
    max-width: 74px;
    color: var(--ink);
    font-size: 11px;
    font-weight: 900;
    line-height: 1.2;
    text-align: center;
}
.appointment-month-pie-legend {
    display: grid;
    gap: 8px;
    max-height: 152px;
    margin: 0;
    padding: 0 4px 0 0;
    overflow-y: auto;
    list-style: none;
}
.appointment-month-pie-legend li {
    display: grid;
    grid-template-columns: 9px minmax(0, 1fr) auto;
    align-items: center;
    gap: 7px;
    min-width: 0;
    color: var(--muted);
    font-size: 11px;
}
.appointment-month-pie-legend li i {
    width: 9px;
    height: 9px;
    border-radius: 50%;
}
.appointment-month-pie-legend li span {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.appointment-month-pie-legend li strong {
    color: var(--ink);
    font-size: 11px;
    white-space: nowrap;
}
.appointment-month-pie-value {
    min-height: 0;
    padding: 0;
    border: 0;
    border-bottom: 1px dashed color-mix(in srgb, var(--accent) 70%, transparent);
    border-radius: 0;
    background: transparent;
    color: var(--ink);
    font: inherit;
    font-size: 11px;
    font-weight: 900;
    line-height: 1.2;
    white-space: nowrap;
    cursor: pointer;
    appearance: none;
    box-shadow: none;
}
.appointment-month-pie-value:hover,
.appointment-month-pie-value:focus-visible,
.appointment-month-pie-value.is-selected {
    border-bottom-color: var(--blue);
    color: var(--blue);
    background: color-mix(in srgb, var(--blue) 14%, transparent) !important;
    box-shadow: none;
}
.appointment-month-pie-value:focus-visible {
    outline: 2px solid color-mix(in srgb, var(--blue) 60%, transparent);
    outline-offset: 2px;
}
.appointment-month-service-detail {
    display: grid;
    gap: 12px;
    margin-top: 16px;
    padding: 16px;
    border: 1px solid color-mix(in srgb, var(--accent) 46%, var(--line));
    border-radius: 12px;
    background: color-mix(in srgb, var(--accent) 8%, var(--panel));
}
.appointment-month-service-detail-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}
.appointment-month-service-detail-head h3 {
    margin: 0;
    color: var(--ink);
    font-size: 14px;
}
.appointment-month-service-detail-head p {
    margin: 4px 0 0;
    color: var(--muted);
    font-size: 12px;
}
.appointment-month-service-detail-head > strong {
    color: var(--accent);
    font-size: 12px;
    text-align: right;
    white-space: nowrap;
}
.appointment-month-service-detail-table {
    overflow-x: auto;
    border: 1px solid var(--line);
    border-radius: 10px;
}
.appointment-month-service-detail-table table {
    min-width: 640px;
}
.appointment-month-service-detail-table th:last-child,
.appointment-month-service-detail-table td:last-child {
    text-align: right;
}
.appointment-month-service-detail-table tfoot td {
    background: var(--table-head, var(--input));
    color: var(--ink);
    font-weight: 900;
}
.appointment-month-pie-legend .appointment-month-pie-empty {
    display: block;
}
.appointment-summary-card .table-total-header td {
    background: var(--table-head, var(--input));
    color: var(--ink);
    font-weight: 800;
}

@media (max-width: 760px) {
    .appointments-analytics .dashboard-context {
        align-items: flex-start;
    }
    .appointments-analytics-charts {
        grid-template-columns: 1fr;
    }
    .appointment-monthly-chart-panel {
        grid-column: auto;
    }
    .appointment-month-row {
        grid-template-columns: 1fr;
        gap: 7px;
    }
    .appointment-month-label {
        justify-content: flex-start;
    }
    .appointment-month-label span {
        margin-left: auto;
    }
    .appointment-chart-total {
        font-size: 10px;
    }
    .appointment-month-modal-card {
        width: min(100%, calc(100vw - 18px));
    }
    .appointment-month-service-charts {
        grid-template-columns: 1fr;
    }
    .appointment-month-service-detail-head {
        align-items: flex-start;
        flex-direction: column;
    }
    .appointment-month-service-detail-head > strong {
        text-align: left;
    }
}