/* public/assets/tizz-bridge.css
   Brings the screens built before tizz-ui.css (sign-in, manual sync, mapping
   rules, calendar, account, billing, legal) onto the same look, without
   rewriting their markup. Loaded LAST by the base layouts, on <body class="tzb">.

   How it works:
   1. The older stylesheets are driven by custom properties (--clr-*, --tz-*,
      --adm-*, --admin-*). Section 1 points every one of them at the --ui-*
      tokens from tizz-ui.css, so light and dark both follow one palette.
   2. Sections 2+ restate the handful of components whose old rules hardcode
      colours, radii or shadows.

   New screens should extend templates/app/_shell.html.twig and use .ui-*
   classes instead of adding rules here. */

/* ── 1. Old variables → shared tokens ── */
html body.tzb,
html body.tzb[data-theme="light"],
html body.tzb[data-theme="dark"] {
    --clr-accent: var(--ui-primary) !important;
    --clr-accent-hover: var(--ui-primary-hover) !important;
    --clr-border: var(--ui-line) !important;
    --clr-bg-soft: var(--ui-surface-2) !important;
    --clr-bg-body: var(--ui-surface) !important;
    --clr-bg-card: var(--ui-surface) !important;
    --clr-bg-muted: var(--ui-surface-2) !important;
    --clr-bg-elevated: var(--ui-surface) !important;
    --clr-input-bg: var(--ui-surface) !important;
    --clr-text: var(--ui-text) !important;
    --clr-text-muted: var(--ui-muted) !important;

    --tz-bg: var(--ui-bg) !important;
    --tz-heroBg: var(--ui-bg) !important;
    --tz-surface: var(--ui-surface) !important;
    --tz-panel: var(--ui-surface) !important;
    --tz-card-bg: var(--ui-surface) !important;
    --tz-card-hover: var(--ui-surface-2) !important;
    --tz-input: var(--ui-surface) !important;
    --tz-input-bg: var(--ui-surface) !important;
    --tz-fg: var(--ui-text) !important;
    --tz-muted: var(--ui-subtle) !important;
    --tz-hairline: var(--ui-line) !important;
    --tz-line: var(--ui-line) !important;
    --tz-hover: var(--ui-surface-2) !important;
    --tz-accent: var(--ui-primary) !important;
    --tz-ac: var(--ui-primary) !important;
    --tz-ac-ink: #fff !important;

    --surface-1: var(--ui-surface) !important;
    --surface-2: var(--ui-surface-2) !important;
    --stroke-strong: var(--ui-line) !important;
    --muted: var(--ui-subtle) !important;
    --sidebar-top: var(--ui-line) !important;

    --radius: 4px !important;
    --radius-lg: 6px !important;
    --radius-xl: 6px !important;
    --shadow: none !important;
    --shadow-md: none !important;
    --shadow-lg: none !important;

    --admin-border: var(--ui-line) !important;
    --admin-border-color: var(--ui-line) !important;
    --admin-muted: var(--ui-subtle) !important;
    --admin-radius: 6px !important;
    --admin-bg: var(--ui-surface) !important;
    --admin-fg: var(--ui-text) !important;
    --admin-fg-muted: var(--ui-muted) !important;

    --adm-font: var(--ui-sans) !important;
    --adm-bg: var(--ui-surface) !important;
    --adm-bg-soft: var(--ui-surface-2) !important;
    --adm-fg: var(--ui-text) !important;
    --adm-fg-muted: var(--ui-muted) !important;
    --adm-input: var(--ui-surface) !important;
    --adm-border-color: var(--ui-line-strong) !important;
    --adm-radius: 4px !important;
    --adm-ring: var(--ui-primary) !important;
    --adm-ring-soft: var(--ui-primary-tint) !important;
    --adm-success: var(--ui-ok) !important;
    --adm-warning: var(--ui-warn) !important;
    --adm-danger: var(--ui-bad) !important;
}

/* ── 2. Page ── */
html:root:root:has(> body.tzb) { background: var(--ui-bg) !important; background-color: var(--ui-bg) !important; }
html:root:root body.tzb {
    margin: 0; height: auto !important; min-height: 100vh; display: flex; flex-direction: column;
    font-family: var(--ui-sans) !important;
    font-size: 15px;
    line-height: 1.5;
    color: var(--ui-text) !important;
    background: var(--ui-bg) !important;
    -webkit-font-smoothing: antialiased;
}
:root:root body.tzb h1, :root:root body.tzb h2, :root:root body.tzb h3, :root:root body.tzb h4, :root:root body.tzb h5, :root:root body.tzb h6,
:root:root body.tzb button, :root:root body.tzb input, :root:root body.tzb select, :root:root body.tzb textarea, :root:root body.tzb .btn {
    font-family: var(--ui-sans) !important;
}
:root:root body.tzb h1, :root:root body.tzb h2, :root:root body.tzb h3 { letter-spacing: -.015em; font-weight: 600; color: var(--ui-text); }
:root:root body.tzb code, :root:root body.tzb pre, :root:root body.tzb kbd { font-family: var(--ui-mono); }
:root:root body.tzb a { color: var(--ui-link); }
:root:root body.tzb main a:not([class]) { text-decoration: underline; text-underline-offset: 2px; }
:root:root body.tzb :focus-visible { outline: 2px solid var(--ui-primary); outline-offset: 2px; }
:root:root body.tzb .text-muted, :root:root body.tzb .tz-muted, :root:root body.tzb .small.text-muted { color: var(--ui-subtle) !important; }

/* header and footer come from tizz-ui.css; keep old page rules off them */
:root:root body.tzb .ui-top a { text-decoration: none; }
:root:root body.tzb .ui-top .ui-brand { color: var(--ui-on-ink-strong); }
:root:root body.tzb select.ui-top-select { min-height: 32px; background-color: transparent !important; color: var(--ui-on-ink) !important; border: 1px solid var(--ui-ink-line) !important; font-size: 13px !important; padding: 0 28px 0 10px; }
:root:root body.tzb .ui-menu > summary { color: var(--ui-on-ink-strong); }
:root:root body.tzb .ui-nav a, :root:root body.tzb .ui-top-right > a, :root:root body.tzb .ui-top a.ui-brand-app { color: var(--ui-on-ink); }
:root:root body.tzb .ui-nav a:hover, :root:root body.tzb .ui-nav a[aria-current="page"], :root:root body.tzb .ui-top-right > a:hover { color: var(--ui-on-ink-strong); }
:root:root body.tzb .ui-top-right .ui-menu-panel a { color: var(--ui-text); }
:root:root body.tzb .ui-foot { width: 100%; margin-top: auto; }
:root:root body.tzb .ui-foot a { color: var(--ui-subtle); text-decoration: none; }
:root:root body.tzb .ui-foot a:hover { color: var(--ui-text); text-decoration: underline; }
:root:root body.tzb .tzb-flashes { width: 100%; max-width: 1200px; margin: 20px auto 0; padding: 0 24px; }
:root:root body.tzb main.page-main, :root:root body.tzb main.tz-main { flex: 1 0 auto; width: 100%; }

/* ── 3. Buttons ── */
:root:root body.tzb .btn, :root:root body.tzb .tz-btn, :root:root body.tzb .admin-btn, :root:root body.tzb button.btn, :root:root body.tzb a.btn {
    display: inline-flex; align-items: center; justify-content: center; gap: 8px;
    min-height: 40px; height: auto; padding: 0 16px;
    border-radius: 4px !important; border: 1px solid var(--ui-line-strong) !important;
    background: var(--ui-surface) !important; color: var(--ui-text) !important;
    font-size: 14px !important; font-weight: 600 !important; line-height: 1.2; text-decoration: none !important;
    box-shadow: none !important; background-image: none !important; cursor: pointer;
    transition: background-color .12s, border-color .12s;
}
:root:root body.tzb .btn:hover, :root:root body.tzb .tz-btn:hover, :root:root body.tzb .admin-btn:hover { border-color: var(--ui-text) !important; box-shadow: none !important; transform: none !important; }
:root:root body.tzb .btn-sm, :root:root body.tzb .btn.btn-sm { min-height: 32px; padding: 0 12px; font-size: 13px !important; }
:root:root body.tzb .btn-lg { min-height: 48px; padding: 0 22px; font-size: 15px !important; }

:root:root body.tzb .btn-primary, :root:root body.tzb .tz-btn-primary, :root:root body.tzb .btn-success, :root:root body.tzb .admin-btn-primary,
:root:root body.tzb .admin-btn.primary, :root:root body.tzb button[type="submit"].btn:not(.btn-secondary):not(.btn-outline-secondary):not(.btn-danger):not(.btn-outline-primary):not(.btn-link):not(.btn-outline-danger) {
    background: var(--ui-primary) !important; border-color: var(--ui-primary) !important; color: #fff !important;
}
:root:root body.tzb .btn-primary:hover, :root:root body.tzb .tz-btn-primary:hover, :root:root body.tzb .btn-success:hover, :root:root body.tzb .admin-btn-primary:hover,
:root:root body.tzb button[type="submit"].btn:not(.btn-secondary):not(.btn-outline-secondary):not(.btn-danger):not(.btn-outline-primary):not(.btn-link):not(.btn-outline-danger):hover {
    background: var(--ui-primary-hover) !important; border-color: var(--ui-primary-hover) !important;
}
:root:root body.tzb .btn-secondary, :root:root body.tzb .btn-outline-secondary, :root:root body.tzb .btn-outline-primary, :root:root body.tzb .btn-light, :root:root body.tzb .tz-btn-ghost {
    background: var(--ui-surface) !important; border-color: var(--ui-line-strong) !important; color: var(--ui-text) !important;
}
:root:root body.tzb .btn-danger, :root:root body.tzb .admin-btn-danger {
    background: var(--ui-surface) !important; border-color: var(--ui-line-strong) !important; color: var(--ui-bad) !important;
}
:root:root body.tzb .btn-outline-danger { background: var(--ui-surface) !important; border-color: var(--ui-bad-line) !important; color: var(--ui-bad) !important; }
:root:root body.tzb .btn-link { background: transparent !important; border-color: transparent !important; color: var(--ui-link) !important; padding: 0 8px; }
:root:root body.tzb .btn[disabled], :root:root body.tzb .btn.disabled, :root:root body.tzb button[disabled] { opacity: .5; cursor: not-allowed; }

/* ── 4. Fields ── */
:root:root body.tzb input[type="text"], :root:root body.tzb input[type="email"], :root:root body.tzb input[type="password"], :root:root body.tzb input[type="number"],
:root:root body.tzb input[type="date"], :root:root body.tzb input[type="time"], :root:root body.tzb input[type="search"], :root:root body.tzb input[type="url"], :root:root body.tzb input[type="tel"],
:root:root body.tzb select, :root:root body.tzb textarea, :root:root body.tzb .form-control, :root:root body.tzb .form-select, :root:root body.tzb .tz-input, :root:root body.tzb .flatpickr-input {
    min-height: 40px; border-radius: 4px !important;
    border: 1px solid var(--ui-line-strong) !important;
    background-color: var(--ui-surface) !important; color: var(--ui-text) !important;
    font-size: 14px !important; box-shadow: none !important;
}
:root:root body.tzb textarea { min-height: 72px; }
:root:root body.tzb input:focus, :root:root body.tzb select:focus, :root:root body.tzb textarea:focus, :root:root body.tzb .tz-input:focus, :root:root body.tzb .form-control:focus {
    border-color: var(--ui-primary) !important; box-shadow: 0 0 0 2px var(--ui-primary-tint) !important; outline: none;
}
:root:root body.tzb input[type="checkbox"], :root:root body.tzb input[type="radio"] { accent-color: var(--ui-primary); }
:root:root body.tzb label, :root:root body.tzb .form-label, :root:root body.tzb .tz-label { font-size: 13px; font-weight: 600; color: var(--ui-text); }
:root:root body.tzb .field-help, :root:root body.tzb .form-text, :root:root body.tzb .help-text { font-size: 13px; color: var(--ui-subtle) !important; font-weight: 400; }
:root:root body.tzb ::placeholder { color: var(--ui-subtle); opacity: 1; }

/* ── 5. Surfaces: cards, panels, modals ── */
:root:root body.tzb .card, :root:root body.tzb .tz-auth-card, :root:root body.tzb .config-section, :root:root body.tzb .info-box, :root:root body.tzb .help-card,
:root:root body.tzb .modal-card, :root:root body.tzb .admin-card, :root:root body.tzb .billing-card, :root:root body.tzb .sync-account-box, :root:root body.tzb .settings-card,
:root:root body.tzb .empty-state, :root:root body.tzb .results-pane, :root:root body.tzb .panel {
    background: var(--ui-surface) !important;
    border: 1px solid var(--ui-line) !important;
    border-radius: 6px !important;
    box-shadow: none !important;
    color: var(--ui-text);
}
:root:root body.tzb .modal-card { border-color: var(--ui-line-strong) !important; box-shadow: 0 16px 48px rgba(11,18,32,.28) !important; }
:root:root body.tzb .modal-backdrop { background: rgba(11,18,32,.55) !important; }
:root:root body.tzb hr { border: 0; border-top: 1px solid var(--ui-line); }

/* ── 6. Tables ── */
:root:root body.tzb table { border-collapse: collapse; font-size: 14px; color: var(--ui-text); }
:root:root body.tzb table th {
    font-family: var(--ui-mono); font-size: 11px; font-weight: 500; letter-spacing: .06em; text-transform: uppercase;
    color: var(--ui-subtle) !important; background: var(--ui-surface-2) !important;
    border-bottom: 1px solid var(--ui-line-strong) !important; text-align: left;
}
:root:root body.tzb table td { border-color: var(--ui-line) !important; }
:root:root body.tzb table td.num, :root:root body.tzb table th.num, :root:root body.tzb .num { font-family: var(--ui-mono); font-variant-numeric: tabular-nums; }

/* ── 7. Messages and badges ── */
:root:root body.tzb .alert, :root:root body.tzb .tz-alert, :root:root body.tzb .admin-alert, :root:root body.tzb .flash {
    border: 1px solid var(--ui-line) !important; border-left: 3px solid var(--ui-primary) !important;
    border-radius: 4px !important; background: var(--ui-surface) !important; color: var(--ui-text) !important;
    font-size: 14px; font-weight: 400; box-shadow: none !important;
}
:root:root body.tzb .alert-success, :root:root body.tzb .tz-alert-success, :root:root body.tzb .admin-alert.success { border-left-color: var(--ui-ok) !important; }
:root:root body.tzb .alert-warning, :root:root body.tzb .tz-alert-warning, :root:root body.tzb .admin-alert.warning { border-left-color: var(--ui-warn-mark) !important; }
:root:root body.tzb .alert-danger, :root:root body.tzb .alert-error, :root:root body.tzb .tz-alert-error, :root:root body.tzb .admin-alert.error { border-left-color: var(--ui-bad) !important; }
:root:root body.tzb .badge, :root:root body.tzb .pill, :root:root body.tzb .tag {
    border-radius: 3px !important; font-size: 12px; font-weight: 600; padding: 2px 8px;
    background: var(--ui-surface-2); color: var(--ui-muted); border: 1px solid var(--ui-line);
}

/* ── 8. Sign-in pages (base_security) ── */
:root:root body.tzb.tzb-auth main.tz-main { display: flex; align-items: flex-start; justify-content: center; padding: 56px 24px; }
:root:root body.tzb .tz-auth-wrap { width: 100%; display: flex; justify-content: center; padding: 0; margin: 0; }
:root:root body.tzb .tz-auth-card { width: min(460px, 100%); padding: 32px !important; margin: 0 !important; }
:root:root body.tzb .tz-auth-title { font-size: 24px !important; font-weight: 600 !important; letter-spacing: -.02em; margin-bottom: 20px; font-family: var(--ui-sans) !important; }
:root:root body.tzb .tz-auth-meta { font-size: 14px; color: var(--ui-muted); }
:root:root body.tzb .tz-auth-card .tz-btn, :root:root body.tzb .tz-auth-card button[type="submit"] { min-height: 44px; width: 100%; }
:root:root body.tzb .tz-field { margin-bottom: 14px; }
:root:root body.tzb .tz-link { color: var(--ui-link) !important; text-decoration: underline; text-underline-offset: 2px; }
:root:root body.tzb .tzb-or { display: flex; align-items: center; gap: 12px; margin: 20px 0; color: var(--ui-subtle); font-size: 12px; font-family: var(--ui-mono); text-transform: uppercase; letter-spacing: .06em; }
:root:root body.tzb .tzb-or::before, :root:root body.tzb .tzb-or::after { content: ''; flex: 1; border-top: 1px solid var(--ui-line); }
:root:root body.tzb a.tzb-ms {
    display: flex; align-items: center; justify-content: center; gap: 10px; min-height: 44px; width: 100%;
    border: 1px solid var(--ui-line-strong); border-radius: 4px; background: var(--ui-surface); color: var(--ui-text) !important;
    font-size: 14px; font-weight: 600; text-decoration: none;
}
:root:root body.tzb a.tzb-ms:hover { border-color: var(--ui-text); }
:root:root body.tzb .tzb-providers { display: flex; flex-direction: column; gap: 8px; }

/* ── 9. Account area (admin layout) ── */
:root:root body.tzb .admin-wrap { max-width: 1200px; width: 100%; margin: 0 auto; padding: 32px 24px 72px; gap: 40px; background: transparent !important; border: 0 !important; border-radius: 0 !important; box-shadow: none !important; }
:root:root body.tzb .admin-nav { background: transparent !important; border: 0 !important; padding: 0 !important; }
:root:root body.tzb .admin-nav-title { font-family: var(--ui-mono); font-size: 11px; letter-spacing: .06em; text-transform: uppercase; color: var(--ui-subtle) !important; font-weight: 500; margin-bottom: 8px; }
:root:root body.tzb .admin-link {
    display: flex; align-items: center; min-height: 38px; padding: 0 12px; border-radius: 4px !important;
    color: var(--ui-muted) !important; text-decoration: none !important; font-size: 14px; border-left: 2px solid transparent; background: transparent !important;
}
:root:root body.tzb .admin-link:hover { color: var(--ui-text) !important; background: var(--ui-surface) !important; }
:root:root body.tzb .admin-link.is-active { color: var(--ui-text) !important; background: var(--ui-surface) !important; border-left-color: var(--ui-primary); font-weight: 600; border-radius: 0 4px 4px 0 !important; }
:root:root body.tzb .admin-content { background: transparent !important; border: 0 !important; padding: 0 !important; box-shadow: none !important; }
:root:root body.tzb .admin-h1, :root:root body.tzb .page-title { font-size: 28px !important; font-weight: 600 !important; letter-spacing: -.02em; line-height: 1.15; color: var(--ui-text) !important; }
:root:root body.tzb .section-title { font-size: 17px !important; font-weight: 600 !important; color: var(--ui-text) !important; }
:root:root body.tzb .kv .k, :root:root body.tzb .info-label, :root:root body.tzb .billing-kv-label, :root:root body.tzb .event-detail-label { color: var(--ui-subtle) !important; font-size: 13px; font-weight: 400; }
:root:root body.tzb .billing-usage-number { font-family: var(--ui-mono); font-variant-numeric: tabular-nums; color: var(--ui-text) !important; font-weight: 500; }
:root:root body.tzb .billing-usage-item { border: 1px solid var(--ui-line) !important; border-radius: 4px !important; background: var(--ui-surface) !important; box-shadow: none !important; }

/* ── 10. Legal and help documents ── */
:root:root body.tzb.tzb-doc main.tz-main { padding: 40px 24px 72px; }
:root:root body.tzb .legal-page { max-width: 760px; margin: 0 auto; background: var(--ui-surface); border: 1px solid var(--ui-line); border-radius: 6px; padding: 40px; }
:root:root body.tzb .legal-page h1 { font-size: 28px; margin-bottom: 16px; }
:root:root body.tzb .legal-page h2 { font-size: 18px; margin: 28px 0 8px; }
:root:root body.tzb .legal-page p, :root:root body.tzb .legal-page li { color: var(--ui-muted); font-size: 15px; line-height: 1.65; }

/* ── 11. Loading states ── */
:root:root body.tzb .spinner { border-color: var(--ui-line) !important; border-top-color: var(--ui-primary) !important; }
:root:root body.tzb .wait-text, :root:root body.tzb .panel-loading { color: var(--ui-subtle) !important; }


/* ── 12. Plans (subscription/packages) ── */
:root:root body.tzb .packages-page { max-width: none; padding: 0; }
:root:root body.tzb .packages-back-link { display: inline-flex; min-height: 32px; align-items: center; color: var(--ui-link) !important; font-size: 13px; text-decoration: none; background: none !important; border: 0 !important; padding: 0 !important; }
:root:root body.tzb .packages-header { text-align: left; margin: 8px 0 24px; }
:root:root body.tzb .packages-header h1 { font-size: 28px !important; font-weight: 600 !important; letter-spacing: -.02em; text-align: left; margin: 0 0 8px; }
:root:root body.tzb .packages-header p { color: var(--ui-muted) !important; text-align: left; font-size: 15px; margin: 0; }
:root:root body.tzb .packages-grid { display: grid !important; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)) !important; gap: 16px !important; align-items: stretch; max-width: none !important; }
:root:root body.tzb .package-card { display: flex; flex-direction: column; background: var(--ui-surface) !important; border: 1px solid var(--ui-line) !important; border-radius: 6px !important; box-shadow: none !important; padding: 24px !important; transform: none !important; color: var(--ui-text) !important; }
:root:root body.tzb .package-card:hover { transform: none !important; box-shadow: none !important; border-color: var(--ui-line-strong) !important; }
:root:root body.tzb .package-card.package-popular { border-color: var(--ui-primary) !important; box-shadow: inset 0 3px 0 var(--ui-primary) !important; }
:root:root body.tzb .package-header { text-align: left !important; padding: 0 0 16px !important; margin: 0 0 16px !important; border-bottom: 1px solid var(--ui-line) !important; }
:root:root body.tzb .package-name { font-size: 17px !important; font-weight: 600 !important; margin: 0 0 8px !important; color: var(--ui-text) !important; }
:root:root body.tzb .package-price { display: flex; align-items: baseline; gap: 6px; justify-content: flex-start !important; }
:root:root body.tzb .price-amount { font-family: var(--ui-mono) !important; font-variant-numeric: tabular-nums; font-size: 28px !important; font-weight: 500 !important; color: var(--ui-text) !important; background: none !important; -webkit-text-fill-color: currentColor !important; }
:root:root body.tzb .package-price-period { color: var(--ui-subtle) !important; font-size: 13px !important; }
:root:root body.tzb .package-badge, :root:root body.tzb .package-current-badge { display: inline-flex; margin-top: 10px; padding: 2px 9px; border-radius: 3px !important; font-size: 12px !important; font-weight: 600; background: var(--ui-primary-tint) !important; color: var(--ui-link) !important; border: 1px solid var(--ui-primary-line) !important; position: static !important; transform: none !important; }
:root:root body.tzb .package-features { flex: 1; }
:root:root body.tzb .package-features h4 { font-family: var(--ui-mono) !important; font-size: 11px !important; letter-spacing: .06em; text-transform: uppercase; color: var(--ui-subtle) !important; font-weight: 500 !important; margin: 0 0 8px !important; }
:root:root body.tzb .package-features ul { list-style: none; padding: 0; margin: 0 0 20px; }
:root:root body.tzb .package-features li { padding: 8px 0 8px 22px !important; border-bottom: 1px solid var(--ui-line); font-size: 14px; color: var(--ui-text) !important; position: relative; }
:root:root body.tzb .package-features li::before { content: '' !important; position: absolute; left: 2px; top: 15px; width: 10px; height: 5px; border-left: 2px solid var(--ui-ok); border-bottom: 2px solid var(--ui-ok); transform: rotate(-45deg); background: none !important; }
:root:root body.tzb a.package-btn, :root:root body.tzb .package-btn { display: flex; align-items: center; justify-content: center; min-height: 44px; padding: 0 16px; border-radius: 4px !important; font-size: 14px !important; font-weight: 600 !important; text-decoration: none !important; box-shadow: none !important; transform: none !important; background: var(--ui-surface) !important; color: var(--ui-text) !important; border: 1px solid var(--ui-line-strong) !important; }
:root:root body.tzb a.package-btn-primary, :root:root body.tzb .package-btn-primary { background: var(--ui-primary) !important; border-color: var(--ui-primary) !important; color: #fff !important; }
:root:root body.tzb a.package-btn-primary:hover { background: var(--ui-primary-hover) !important; }
:root:root body.tzb .package-current-indicator { border: 1px solid var(--ui-line) !important; border-radius: 4px !important; background: var(--ui-surface-2) !important; padding: 12px !important; text-align: left !important; }
:root:root body.tzb .package-current-text { color: var(--ui-muted) !important; font-size: 13px; margin: 6px 0 0; }
:root:root body.tzb .team-size-selector { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; margin-bottom: 20px; padding: 0 !important; background: none !important; border: 0 !important; }
:root:root body.tzb .packages-footer { margin-top: 24px; color: var(--ui-subtle) !important; font-size: 13px; text-align: left !important; border-top: 1px solid var(--ui-line); padding-top: 16px; }
:root:root body.tzb .admin-burger { display: none !important; }
:root:root body.tzb .admin-wrap { display: grid !important; grid-template-columns: 220px minmax(0, 1fr) !important; align-items: start; }
:root:root body.tzb .admin-wrap .admin-nav { position: static !important; width: auto !important; transform: none !important; height: auto !important; }
:root:root body.tzb .admin-nav nav { display: flex; flex-direction: column; gap: 2px; }
@media (max-width: 860px) {
    :root:root body.tzb .admin-wrap { grid-template-columns: 1fr !important; gap: 20px; }
    :root:root body.tzb .admin-nav nav { flex-direction: row; flex-wrap: wrap; }
    :root:root body.tzb .admin-nav-title { display: none; }
}

@media (max-width: 640px) {
    :root:root body.tzb .admin-wrap { padding: 24px 16px 56px; }
    :root:root body.tzb .legal-page { padding: 24px 20px; }
    :root:root body.tzb .tzb-flashes { padding: 0 16px; }
}

/* ── 13. Manual sync and Models pages ── */
:root:root body.tzb .sync-flex { max-width: 1200px; width: 100%; margin: 0 auto; padding: 32px 24px 72px; gap: 24px; align-items: flex-start; }
:root:root body.tzb .sync-form { background: var(--ui-surface) !important; border: 1px solid var(--ui-line) !important; border-radius: 6px !important; box-shadow: none !important; padding: 20px !important; flex: 0 0 340px; max-width: 340px; }
:root:root body.tzb .sync-form .form-block { background: none !important; border: 0 !important; padding: 0 !important; border-radius: 0 !important; }
:root:root body.tzb .sync-form .form-row { display: flex; align-items: center; gap: 10px; min-height: 36px; }
:root:root body.tzb .sync-form .form-row label { font-weight: 400; font-size: 14px; }
:root:root body.tzb .sync-form .tz-help { color: var(--ui-subtle); font-size: 13px; font-weight: 400; margin: 2px 0 8px; }
:root:root body.tzb .sync-form #runBtn { width: 100%; min-height: 44px; margin: 0; }
:root:root body.tzb .calendar-selector { border: 1px solid var(--ui-line) !important; border-radius: 4px !important; background: var(--ui-surface) !important; overflow: hidden; }
:root:root body.tzb .calendar-item { display: flex; align-items: center; gap: 10px; min-height: 40px; padding: 0 12px; border-bottom: 1px solid var(--ui-line); border-radius: 0 !important; background: var(--ui-surface) !important; font-weight: 400; cursor: pointer; }
:root:root body.tzb .calendar-item:last-child { border-bottom: 0; }
:root:root body.tzb .calendar-item.is-selected { background: var(--ui-primary-tint) !important; color: var(--ui-text) !important; }
:root:root body.tzb .calendar-item .calendar-checkmark { color: var(--ui-primary); margin-left: auto; }
:root:root body.tzb .sync-results, :root:root body.tzb .results-pane { background: transparent !important; border: 0 !important; padding: 0 !important; }
:root:root body.tzb .sync-accounts-display { background: var(--ui-surface) !important; border: 1px solid var(--ui-line) !important; border-radius: 6px !important; padding: 16px !important; margin: 0 0 16px !important; box-shadow: none !important; }
:root:root body.tzb .sync-account-box { border-radius: 4px !important; background: var(--ui-surface-2) !important; }
:root:root body.tzb .sync-account-label { font-family: var(--ui-mono); font-size: 11px; letter-spacing: .06em; text-transform: uppercase; color: var(--ui-subtle) !important; }
:root:root body.tzb .sync-account-provider { font-weight: 600; color: var(--ui-text) !important; }
:root:root body.tzb .sync-account-email { font-family: var(--ui-mono); font-size: 12px; color: var(--ui-muted) !important; }
:root:root body.tzb .sync-accounts-note { color: var(--ui-subtle) !important; font-size: 13px; }
:root:root body.tzb .results-pane table, :root:root body.tzb .zoho-sim-table { background: var(--ui-surface); border: 1px solid var(--ui-line); }
:root:root body.tzb .results-pane td, :root:root body.tzb .zoho-sim-table td { padding: 10px 14px; border-bottom: 1px solid var(--ui-line); }
:root:root body.tzb .results-pane th, :root:root body.tzb .zoho-sim-table th { padding: 10px 14px; }
:root:root body.tzb .results-pane tbody tr:nth-child(even) { background: transparent !important; }
:root:root body.tzb .zoho-sim-table .num, :root:root body.tzb .results-pane td:nth-child(4) { font-family: var(--ui-mono); font-variant-numeric: tabular-nums; text-align: right; }
:root:root body.tzb .zoho-sim-table tfoot .day-total { color: var(--ui-text) !important; }
:root:root body.tzb .confirm-card { border-radius: 6px !important; border: 1px solid var(--ui-line-strong) !important; background: var(--ui-surface) !important; color: var(--ui-text) !important; }
:root:root body.tzb .flatpickr-calendar { border: 1px solid var(--ui-line) !important; border-radius: 4px !important; box-shadow: none !important; background: var(--ui-surface) !important; font-family: var(--ui-sans); width: 100%; max-width: 300px; }
:root:root body.tzb .flatpickr-calendar .flatpickr-day { border-radius: 3px; color: var(--ui-text); font-family: var(--ui-mono); font-size: 12px; }
:root:root body.tzb .flatpickr-calendar .flatpickr-day.selected, :root:root body.tzb .flatpickr-calendar .flatpickr-day.startRange, :root:root body.tzb .flatpickr-calendar .flatpickr-day.endRange { background: var(--ui-primary) !important; border-color: var(--ui-primary) !important; color: #fff !important; }
:root:root body.tzb .flatpickr-calendar .flatpickr-day.inRange { background: var(--ui-primary-tint) !important; border-color: var(--ui-primary-tint) !important; box-shadow: none !important; }
:root:root body.tzb .flatpickr-calendar .flatpickr-day.prevMonthDay, :root:root body.tzb .flatpickr-calendar .flatpickr-day.nextMonthDay { color: var(--ui-subtle); }
:root:root body.tzb .flatpickr-months .flatpickr-month, :root:root body.tzb .flatpickr-current-month, :root:root body.tzb span.flatpickr-weekday { color: var(--ui-text) !important; fill: var(--ui-text) !important; }
:root:root body.tzb .tzb-pagehead { max-width: 1200px; width: 100%; margin: 0 auto; padding: 32px 24px 0; }
/* Full-width pages (Manual sync): the middle part spans the window, with the same 24px side gutter. */
:root:root body.tzb.tzb-wide .tzb-pagehead, :root:root body.tzb.tzb-wide .sync-flex, :root:root body.tzb.tzb-wide .tzb-flashes { max-width: none; }
:root:root body.tzb .tzb-pagehead h1 { font-size: 28px; line-height: 1.15; letter-spacing: -.02em; margin: 0; }
:root:root body.tzb .tzb-pagehead p { color: var(--ui-muted); margin: 8px 0 0; max-width: 680px; }
:root:root body.tzb .tzb-pagehead + .sync-flex { padding-top: 24px; }
@media (max-width: 860px) {
    :root:root body.tzb .sync-flex { flex-direction: column; padding: 24px 16px 56px; }
    :root:root body.tzb .sync-form { flex: 1 1 auto; max-width: none; width: 100%; }
}

/* ── 14. Calendar view: keep its event colours, take surfaces from the tokens ── */
:root:root body.tzb {
    --cal-bg-primary: var(--ui-surface) !important;
    --cal-bg-secondary: var(--ui-surface-2) !important;
    --cal-bg-elevated: var(--ui-surface) !important;
    --cal-border: var(--ui-line) !important;
    --cal-text-primary: var(--ui-text) !important;
    --cal-text-secondary: var(--ui-subtle) !important;
    --cal-header-bg: var(--ui-surface) !important;
    --cal-header-text: var(--ui-text) !important;
    --cal-today-bg: var(--ui-primary) !important;
    --cal-selected-week-bg: var(--ui-primary-tint) !important;
}
:root:root body.tzb .calendar-toolbar h2, :root:root body.tzb .calendar-toolbar .toolbar-title { white-space: nowrap; font-size: 17px; }
:root:root body.tzb .event-toggle-label { white-space: nowrap; font-size: 13px; }

/* ── 15. Profile page controls ── */
:root:root body.tzb .toggle-2fa-btn, :root:root body.tzb .tz-btn-small { display: inline-flex; align-items: center; min-height: 34px; padding: 0 12px; border-radius: 4px !important; font-size: 13px !important; font-weight: 600; box-shadow: none !important; text-decoration: none !important; border: 1px solid var(--ui-line-strong) !important; background: var(--ui-surface) !important; color: var(--ui-text) !important; }
:root:root body.tzb .toggle-2fa-btn.toggle-2fa-disabled, :root:root body.tzb a.tz-btn-primary.tz-btn-small { background: var(--ui-primary) !important; border-color: var(--ui-primary) !important; color: #fff !important; }
:root:root body.tzb .edit-btn { background: none !important; border: 0 !important; color: var(--ui-subtle) !important; min-width: 28px; min-height: 28px; box-shadow: none !important; }
:root:root body.tzb .account-compact .config-section, :root:root body.tzb .account-compact section { margin-bottom: 16px; }

/* ── 16. Fixes found in review ── */
:root:root body.tzb input[type="checkbox"], :root:root body.tzb input[type="radio"] { width: 18px; height: 18px; min-height: 0; flex-shrink: 0; vertical-align: -3px; }
:root:root body.tzb .tz-link { margin: 0 !important; padding: 0 !important; }
:root:root body.tzb header.admin-h1 { font-size: inherit !important; font-weight: inherit !important; margin: 0 0 24px; padding: 0; }
:root:root body.tzb header.admin-h1 h1, :root:root body.tzb header.admin-h1 .page-title { margin: 0 !important; padding: 0 !important; text-align: left; }
:root:root body.tzb header.admin-h1 p { font-size: 15px !important; font-weight: 400 !important; color: var(--ui-muted) !important; margin: 8px 0 0 !important; letter-spacing: 0; }
:root:root body.tzb .account-compact { background: transparent !important; --border: var(--ui-line) !important; --muted: var(--ui-subtle) !important; --radius: 6px !important; }
:root:root body.tzb .account-compact .admin-section { background: var(--ui-surface) !important; border: 1px solid var(--ui-line) !important; border-radius: 6px !important; box-shadow: none !important; margin-bottom: 16px; }
:root:root body.tzb .account-compact .admin-section h2, :root:root body.tzb .account-compact .section-title { font-size: 17px !important; font-weight: 600 !important; }
:root:root body.tzb .account-compact .tag { border-radius: 3px !important; }
:root:root body.tzb .account-compact .edit-btn { min-width: 36px; min-height: 36px; }
:root:root body.tzb .simulation-btn { background: var(--ui-surface) !important; color: var(--ui-text) !important; border: 1px solid var(--ui-line-strong) !important; border-radius: 4px !important; white-space: nowrap; font-weight: 600; box-shadow: none !important; }
:root:root body.tzb .simulation-btn.active { background: var(--ui-primary) !important; border-color: var(--ui-primary) !important; color: #fff !important; }
:root:root body.tzb .table-scroll-wrapper:has(> .zoho-sim:empty) { display: none; }
:root:root body.tzb .table-scroll-wrapper { border: 0 !important; margin: 0 !important; }
:root:root body.tzb .sync-results, :root:root body.tzb .results-pane { margin: 0 !important; max-width: none !important; }
:root:root body.tzb .sync-results > * { margin-left: 0 !important; margin-right: 0 !important; }
:root:root body.tzb [class*="tz-agreement"]:not(input):not(a), :root:root body.tzb .tz-agreements { border-radius: 4px !important; }
:root:root body.tzb .config-compact, :root:root body.tzb .settings-compact { --radius: 6px !important; }
:root:root body.tzb .config-compact .config-section { border-radius: 6px !important; box-shadow: none !important; }
:root:root body.tzb .config-compact .page-title { text-align: left !important; }
:root:root body.tzb .centered-page { padding: 32px 24px 72px; min-height: 0; }
@media (max-width: 860px) {
    :root:root body.tzb .tzb-pagehead { padding: 24px 16px 0; }
    :root:root body.tzb .centered-page { padding: 24px 16px 56px; }
}