/* UI Polish V2: shared presentation layer, loaded after module styles. */
:root {
    --acerca-primary: #7A3CFF;
    --acerca-secondary: #00B4FF;
    --surface: #FFFFFF;
    --border: #E5E7EB;
    --radius: 16px;
    --shadow: 0 3px 16px #11111105;
    --text-muted: #626B7A;
    --text: #111111;
    --canvas: #F6F7FB;
    --success-bg: #EAF7F0;
    --success-text: #17613B;
    --warning-bg: #FFF4DC;
    --warning-text: #805000;
    --danger-bg: #FFF0F0;
    --danger-text: #A82B36;
    --info-bg: #EDF6FF;
    --info-text: #235880;
    --violet: var(--acerca-primary);
    --blue: var(--acerca-secondary);
    --charcoal: var(--text);
    --muted: var(--text-muted);
    --line: var(--border);
    --card: var(--surface);
}
body { color: var(--text); }
a, button, input, select, textarea, summary { -webkit-tap-highlight-color: transparent; }
button, .btn, .side-link, input, select, textarea, summary { transition: background-color .15s, border-color .15s, box-shadow .15s, color .15s; }
:focus-visible { outline: 3px solid var(--acerca-primary) !important; outline-offset: 3px; }
.sr-only, .quick-state .switch-label { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.skip-link { position: fixed; top: -100px; left: 16px; z-index: 100; padding: 12px 20px; background: var(--surface); border-radius: 12px; }
.skip-link:focus { top: 12px; }
.sidebar { width: 236px; padding: 20px 12px; scrollbar-width: thin; scrollbar-color: #4A465B transparent; }
.sidebar-brand { margin: 0 10px 22px; padding: 9px 14px; flex-shrink: 0; }
.sidebar-brand img { width: 148px; }
.side-nav { gap: 3px; }
.side-link { min-height: 42px; gap: 10px; border-radius: 12px; }
.side-link.active { background: #332652; box-shadow: none; color: #fff; }
.side-link.active svg { color: #C8ADFF; }
.sidebar-bottom { margin-top: 20px; }
.sidebar .account-name { color: #CBD5E1; }
.app-main { margin-left: 236px; }
.topbar { min-height: 78px; height: auto; padding-block: 16px; }
.topbar h1 { font-size: 23px; }
.user-avatar { width: 38px; height: 38px; background: #F2EBFF; }
.content { padding-top: 26px; }
.content > * { min-width: 0; }
.card, .panel, .record-card, .stat-card, .empty-state { border-radius: var(--radius); border-color: var(--border); box-shadow: var(--shadow); }
.card, .panel { padding: 24px; margin-bottom: 22px; }
.card.table-wrap { padding: 0; }
.card > .section-heading:first-child, .section-heading:first-child { margin-top: 0; }
.section-heading { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.section-heading p { flex-basis: 100%; }
.section-heading h2 { margin-bottom: 0; }
.card h2, .page-intro h2 { letter-spacing: -.025em; }
.grid { gap: 8px 22px; }
.grid > *, .record-top > div, .ops-client-head > div { min-width: 0; }
.card p, .record-title, .ops-client-head h3, .attention-row { overflow-wrap: anywhere; }
/* All form buttons receive a base, including older markup without type. */
.content button, .login-panel button, .btn, .button {
    display: inline-flex; align-items: center; justify-content: center; gap: 8px;
    min-height: 42px; padding: 10px 17px; border: 1px solid transparent;
    border-radius: 999px; background: var(--acerca-primary); color: #fff;
    font-size: 13px; line-height: 1.3; font-weight: 700; text-decoration: none;
    box-shadow: none; white-space: normal; text-align: center;
}
.content button:hover, .btn:hover, .button:hover, .login-panel button:hover { transform: none; filter: none; background: #6930DF; }
.btn-secondary, .button.secondary, .button.light, .content .copy-button { background: var(--surface) !important; color: #343745 !important; border: 1px solid var(--border) !important; box-shadow: none !important; }
.btn-secondary:hover, .button.secondary:hover, .button.light:hover, .content .copy-button:hover { background: #F3F4F8 !important; border-color: #C6C9D4 !important; }
.btn-ghost { background: transparent !important; color: #6231CA !important; box-shadow: none !important; }
.btn-ghost:hover { background: #F3EDFF !important; }
.btn-danger { background: var(--danger-bg) !important; color: var(--danger-text) !important; border-color: #F2D0D4 !important; box-shadow: none !important; }
.btn-danger:hover { background: #FBE1E4 !important; }
.btn-success { background: var(--success-bg) !important; color: var(--success-text) !important; border-color: #BEE5CF !important; }
.btn-success:hover { background: #D8EEDF !important; }
.content button:disabled, .btn:disabled, .btn[aria-disabled=true], .login-panel button:disabled { opacity: .48; cursor: not-allowed; transform: none; }
.btn svg, button svg { flex-shrink: 0; }
.table-actions .btn, .table-actions button, .btn-sm { min-height: 38px; padding: 8px 12px; font-size: 12px; }
.actions form { margin: 0; }
label { font-size: 12px; font-weight: 650; color: #414759; margin: 14px 0 7px; }
input:not([type=checkbox]):not([type=radio]):not([type=hidden]), select, textarea {
    min-width: 0; max-width: 100%; min-height: 44px; border-radius: 12px;
    padding: 10px 13px; border: 1px solid var(--border); background-color: var(--surface);
    color: var(--text); font-size: 14px; font-weight: 400; line-height: 1.45;
}
input::placeholder, textarea::placeholder { color: #7D8492; }
select { appearance: none; padding-right: 36px; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23626B7A' stroke-width='1.8'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 12px center; }
input:focus, select:focus, textarea:focus { border-color: var(--acerca-primary) !important; box-shadow: 0 0 0 3px #7A3CFF12; }
input:disabled, select:disabled, textarea:disabled { background-color: #F1F2F6 !important; color: var(--text-muted) !important; cursor: not-allowed; }
textarea { min-height: 108px; }
input[type=color] { width: 100%; height: 44px; }
input[type=file]::file-selector-button { border: 0; border-radius: 8px; padding: 7px 10px; color: #6231CA; background: #F3EDFF; margin-right: 10px; cursor: pointer; }
input[type=checkbox]:not([role=switch]) { width: 18px; height: 18px; vertical-align: middle; }
.agenda-assignments label { padding: 10px; border-radius: 10px; background: var(--canvas); }
.error { color: var(--danger-text); font-size: 12px; }
small, .muted, .ops-meta { color: var(--text-muted); }
.form-actions { gap: 10px; padding-top: 20px; margin-top: 24px; }
/* Native checkbox, styled as a switch. Off still submits 0 via its hidden input. */
.switch-field { margin: 10px 0; }
.switch-control { position: relative; display: inline-flex; align-items: center; gap: 11px; min-height: 44px; margin: 0; cursor: pointer; }
.switch-control input { position: absolute; left: 0; top: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; }
.switch-track { position: relative; flex: 0 0 42px; width: 42px; height: 24px; border-radius: 999px; border: 1px solid #A6ADBA; background: #B4BAC5; pointer-events: none; transition: background .15s; }
.switch-track::after { content: ''; position: absolute; left: 3px; top: 3px; width: 16px; height: 16px; border-radius: 50%; background: #fff; box-shadow: 0 1px 3px #11111120; transition: transform .15s; }
.switch-control input:checked ~ .switch-track { background: var(--acerca-primary); border-color: var(--acerca-primary); }
.switch-control input:checked ~ .switch-track::after { transform: translateX(18px); }
.switch-control input:focus-visible ~ .switch-track { outline: 3px solid var(--acerca-primary); outline-offset: 3px; }
.switch-control input:disabled ~ span { opacity: .5; }
.switch-control input:disabled { cursor: not-allowed; }
.switch-copy { display: grid; gap: 2px; pointer-events: none; }
.switch-label { font-size: 13px; color: #343745; }
.switch-state { font-size: 12px; color: var(--text-muted); font-weight: 500; }
.switch-on, .switch-control input:checked ~ .switch-copy .switch-off { display: none; }
.switch-control input:checked ~ .switch-copy .switch-on { display: inline; }
.quick-state .switch-field { margin: 0; }
.quick-state .switch-control { gap: 8px; }
/* Filters preserve GET parameters and work without JavaScript. */
.filter-panel { padding: 16px 20px; }
.filter-panel > summary { display: flex; align-items: center; gap: 12px; list-style: none; cursor: pointer; min-height: 32px; font-size: 13px; font-weight: 700; color: #414759; }
.filter-panel > summary::-webkit-details-marker, .action-menu > summary::-webkit-details-marker { display: none; }
.filter-panel > summary > span:first-child { display: inline-flex; align-items: center; gap: 8px; }
.filter-hint { margin-left: auto; font-size: 11px; color: var(--text-muted); font-weight: 500; }
.filter-panel[open] > summary > svg { transform: rotate(90deg); }
.filter-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); align-items: end; gap: 12px; margin-top: 16px; }
.filter-grid > *, .filter-grid label { min-width: 0; margin: 0; }
.filter-grid label { margin-bottom: 5px; }
.filter-grid > label { margin-bottom: 0; }
.filter-grid input, .filter-grid select { margin-top: 5px; }
.filter-grid > div > input, .filter-grid > div > select { margin-top: 0; }
.filter-actions { grid-column: 1 / -1; }
.filter-grid > button { align-self: end; }
/* A disclosure of ordinary links/buttons: native Tab, Enter and Space semantics. */
.action-menu { position: relative; }
.action-menu > summary { display: grid; place-items: center; width: 40px; height: 40px; border: 1px solid var(--border); border-radius: 50%; list-style: none; cursor: pointer; color: #50576A; background: var(--surface); }
.action-menu[open] > summary { background: #F3EDFF; border-color: #D9C7FF; color: #6231CA; }
.action-menu-content { position: absolute; right: 0; top: 46px; z-index: 45; width: 220px; max-width: calc(100vw - 24px); padding: 7px; background: var(--surface); border: 1px solid var(--border); border-radius: 14px; box-shadow: 0 12px 35px #11111118; }
.action-menu-content a, .content .action-menu-content button { display: flex; align-items: center; gap: 10px; width: 100%; min-height: 40px; padding: 10px 12px; text-align: left; justify-content: flex-start; color: #343745; background: transparent; border: 0; border-radius: 9px; box-shadow: none; font-size: 13px; text-decoration: none; font-weight: 550; }
.action-menu-content a:hover, .content .action-menu-content button:hover { background: #F3EDFF; }
.action-menu-content form, .card .action-menu form { width: 100%; margin: 0; }
.action-menu-content hr { border: 0; border-top: 1px solid var(--border); margin: 6px; }
.table-wrap { scrollbar-width: thin; }
th { background: #FAFAFC; font-size: 10px; padding-block: 13px; }
td { padding-block: 17px; }
.smart-links-table table { min-width: 720px; table-layout: fixed; }
.smart-links-table th:nth-child(1) { width: 25%; }
.smart-links-table th:nth-child(2) { width: 20%; }
.smart-links-table th:nth-child(3) { width: 18%; }
.smart-links-table th:nth-child(4) { width: 17%; }
.smart-links-table th:nth-child(5) { width: 20%; }
.smart-links-table td { overflow-wrap: anywhere; }
.smart-links-table .table-secondary { font-size: 12px; }
.smart-code { display: inline-block; background: #F3EDFF; color: #6231CA; border-radius: 7px; padding: 3px 7px; font-size: 11px; font-weight: 750; margin-bottom: 6px; text-decoration: none; }
.visit-breakdown { display: flex; gap: 8px; font-size: 11px; color: var(--text-muted); margin-top: 4px; }
.table-actions { flex-wrap: wrap; }
.smart-links-table .table-actions { flex-wrap: nowrap; }
.record-actions .action-menu { margin-left: auto; }
.record-card .quick-state { flex-shrink: 0; }
.record-card .record-title { font-size: 16px; }
.record-stats { background: var(--canvas); border: 0; border-radius: 12px; padding: 12px 14px; margin-block: 16px; justify-content: space-between; }
.stats-grid { gap: 14px; margin-bottom: 22px; }
.stat-card { padding: 18px; gap: 10px; position: relative; }
.stat-icon { width: 32px; height: 32px; border-radius: 10px; background: #F3EDFF; color: #6930DF; }
.stat-icon svg { width: 18px; height: 18px; }
.stat-card-accent .stat-icon { background: var(--acerca-primary); }
.stat-value { font-size: 27px; font-variant-numeric: tabular-nums; }
.billing-stats { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.billing-stats .stat-card { gap: 8px; }
.billing-stats .stat-icon { position: absolute; right: 16px; top: 16px; }
.billing-stats .stat-label { padding-right: 36px; min-height: 32px; }
.ops-balance, .balance-fact { background: #F5F0FF; border-radius: 12px; padding: 12px; }
.balance-fact dd { color: #6030BD; font-size: 20px; }
.ops-client-facts { align-items: start; }
.ops-client-head h3 a { color: var(--text); text-decoration: none; }
.ops-client-head h3 a:hover { color: #6231CA; }
.ops-client-head { align-items: center; flex-wrap: wrap; }
.ops-client-head h3 { font-size: 17px; }
.ops-clients .card { display: flex; flex-direction: column; }
.ops-clients .card > .btn:last-child { align-self: start; margin-top: auto; }
.ops-alerts > a { background: #FAF8FF; border-color: #EDE5FA; border-radius: 14px; }
.ops-alerts > a:hover { background: #F1E9FF; }
.ops-alerts strong { color: #6231CA; font-size: 25px; }
.ops-alerts span { font-size: 13px; }
.ops-state-grid { gap: 0; margin-bottom: 4px; }
.ops-state-grid > a, .ops-state-grid > div { padding: 16px; border-radius: 12px; }
.ops-state-grid > a:hover { background: var(--canvas); }
.ops-state-grid strong { font-size: 24px; }
.ops-search label { margin-top: 0; }
.ops-search > div { margin-top: 8px; }
.agenda-day { background: #F0F1F7; border: 1px solid var(--border); }
.agenda-day h2 { display: flex; justify-content: space-between; }
.agenda-add { display: inline-flex; align-items: center; min-height: 44px; }
.agenda-hour-form .switch-field { flex: 1; min-width: 130px; }
.badge { font-size: 11px; font-weight: 650; padding: 5px 10px; line-height: 1.5; }
.badge:not([class*="badge-"]):not([class*="charge-"]):not([class*="health-"]):not([class*="subscription-"]) { background: #F0EDF8; color: #574B71; }
.badge-active, .subscription-active, .badge-appointment-confirmed, .health-healthy, .charge-paid { background: var(--success-bg); color: var(--success-text); }
.subscription-trial, .subscription-scheduled, .badge-soon, .badge-lead-new { background: #F1EAFE; color: #6834BD; }
.subscription-past_due, .badge-appointment-pending, .health-attention, .charge-pending, .charge-partial { background: var(--warning-bg); color: var(--warning-text); }
.subscription-expired, .subscription-suspended, .health-expired, .health-suspended, .charge-overdue, .badge-appointment-no_show { background: var(--danger-bg); color: var(--danger-text); }
.badge-appointment-completed, .badge-lead-contacted { background: var(--info-bg); color: var(--info-text); }
.badge-inactive, .subscription-cancelled, .subscription-missing, .health-inactive, .charge-cancelled, .badge-appointment-cancelled, .badge-lead-closed { background: #EFF1F5; color: #596273; }
.alert { display: flex; align-items: flex-start; gap: 12px; padding: 15px 18px; margin-bottom: 20px; border-radius: 12px; border: 1px solid transparent; font-size: 13px; }
.alert > svg { flex-shrink: 0; margin-top: 1px; }
.alert p { margin: 0; }
.alert ul { margin: 0; padding-left: 18px; }
.alert-success { background: var(--success-bg); color: var(--success-text); border-color: #C8E8D6; }
.alert-error { background: var(--danger-bg); color: var(--danger-text); border-color: #F1CCD1; }
.alert-warning { background: var(--warning-bg); color: var(--warning-text); border-color: #EED9AB; }
.alert-info, .notice { background: var(--info-bg); color: var(--info-text); border-color: #D5E5F5; }
.notice[role=alert] { background: var(--danger-bg); color: var(--danger-text); border-color: #F1CCD1; }
.copy-feedback { position: fixed; bottom: 24px; left: 50%; transform: translateX(-50%); z-index: 80; max-width: calc(100vw - 32px); width: max-content; padding: 12px 18px; border-radius: 12px; background: #252033; color: #fff; font-size: 13px; box-shadow: 0 8px 24px #11111122; }
.copy-feedback:empty { display: none; }
.empty-state { padding: 36px 22px; }
.card .empty-state { border: 0; box-shadow: none; background: transparent; margin: 0; }
.empty-icon { width: 48px; height: 48px; border-radius: 14px; }
.empty-state h3 { font-size: 16px; }
.item-card { background: #FAFAFD; box-shadow: none; border-color: #EDEDF3; }
.tenant-context { background: #F3EDFF; border-color: #E3D7FC; }
@media (max-width: 1200px) {
    .filter-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .smart-links-table.desktop-table { display: none; }
    .smart-link-cards.mobile-cards { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 800px) {
    .app-main { margin-left: 0; }
    .sidebar { width: 260px; padding-top: 20px; }
    .topbar { min-height: 68px; padding: 12px 18px; }
    .topbar h1 { font-size: 20px; }
    .content { padding: 20px 18px calc(110px + env(safe-area-inset-bottom)); }
    .card, .panel { padding: 20px; }
    .bottom-nav { height: calc(68px + env(safe-area-inset-bottom)); padding-bottom: calc(5px + env(safe-area-inset-bottom)); }
    .bottom-nav a, .bottom-nav button { border-radius: 12px; min-height: 48px; }
    .bottom-nav .active { background: #F3EDFF; color: #6231CA; }
    .copy-feedback { bottom: calc(82px + env(safe-area-inset-bottom)); }
    .table-actions .btn, .table-actions button, .action-menu > summary { min-height: 44px; }
    .action-menu > summary { width: 44px; }
    .action-menu-content a, .content .action-menu-content button { min-height: 44px; }
    .billing-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 600px) {
    .content { padding-inline: 14px; }
    .card, .panel { padding: 18px; }
    .filter-panel { padding: 12px 16px; }
    .filter-panel > summary { min-height: 40px; }
    .filter-grid, .smart-link-cards.mobile-cards { grid-template-columns: 1fr; }
    .filter-actions, .filter-grid > .actions, .filter-grid > .ops-actions { display: flex; }
    .filter-grid .actions > *, .filter-grid .ops-actions > * { flex: 1; }
    .filter-grid > button, .filter-grid > .btn { width: 100%; }
    .filter-hint { font-size: 10px; }
    .content button, .btn, .button { min-height: 44px; }
    .stat-card { padding: 14px; }
    .stat-value { font-size: 22px; }
    .billing-stats .stat-icon { position: static; }
    .billing-stats .stat-label { padding: 0; min-height: 36px; }
    .ops-client-head { flex-direction: row; align-items: flex-start; gap: 10px; }
    .ops-client-facts { gap: 14px; }
    .ops-search > div { flex-direction: row; }
    .ops-search button { padding-inline: 13px; }
    .agenda-hour-form { grid-template-columns: 1fr; }
    .page-heading { flex-wrap: wrap; }
    .page-intro .table-actions { width: 100%; }
    .page-intro .table-actions > .btn { width: auto; flex: 1; }
    .form-actions > * { flex: 1; }
    .form-actions form { flex-basis: 100%; }
}
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { scroll-behavior: auto !important; transition: none !important; }
}
@media (forced-colors: active) {
    .switch-track { background: Canvas; border-color: ButtonText; }
    .switch-track::after { background: ButtonText; }
    .switch-control input:checked ~ .switch-track { background: Highlight; }
    .switch-control input:checked ~ .switch-track::after { background: HighlightText; }
}
