/* TomoServ UI
   Tokens -> base -> layout -> components -> pages -> responsive */

:root {
    --ts-accent: #168c6b;
    --ts-primary: var(--ts-accent);
    --ts-primary-strong: color-mix(in srgb, var(--ts-accent) 82%, #000);
    --ts-primary-soft: color-mix(in srgb, var(--ts-accent) 11%, #fff);
    --ts-teal: #0e9f8a;
    --ts-teal-soft: #e7f8f4;
    --ts-orange: #e67828;
    --ts-orange-soft: #fff2e8;
    --ts-danger: #dc3545;
    --ts-danger-soft: #fff0f1;
    --ts-warning: #b56a00;
    --ts-warning-soft: #fff7df;
    --ts-success: #198754;
    --ts-success-soft: #eaf8f1;
    --ts-ink: #17233c;
    --ts-muted: #344054;
    --ts-border: #e3e8f0;
    --ts-surface: #ffffff;
    --ts-surface-subtle: #f8faf9;
    --ts-canvas: #f5f7fb;
    --ts-sidebar: #111d35;
    --ts-radius-sm: .625rem;
    --ts-radius: .875rem;
    --ts-radius-lg: 1.25rem;
    --ts-shadow-sm: 0 1px 2px rgba(16, 35, 67, .04), 0 5px 18px rgba(16, 35, 67, .05);
    --ts-shadow: 0 16px 40px rgba(16, 35, 67, .10);
    --ts-sidebar-width: 264px;
    --ts-sidebar-collapsed: 88px;
    --ts-topbar-height: 72px;
    --ts-horizontal-height: 58px;
}

html[data-accent="green"] { --ts-accent: #168c6b; }
html[data-accent="blue"] { --ts-accent: #2864dc; }
html[data-accent="violet"] { --ts-accent: #7451c9; }
html[data-accent="coral"] { --ts-accent: #c65345; }

html[data-theme="dark"] {
    --ts-ink: #f3f7f5;
    --ts-muted: #c4cec9;
    --ts-border: #31443e;
    --ts-surface: #17231f;
    --ts-surface-subtle: #1d2c27;
    --ts-canvas: #0e1714;
    --ts-sidebar: #0a1512;
    --ts-shadow-sm: 0 1px 2px rgba(0, 0, 0, .18), 0 8px 22px rgba(0, 0, 0, .16);
    --ts-shadow: 0 18px 45px rgba(0, 0, 0, .35);
}

html[data-theme="dark"] {
    scrollbar-color: color-mix(in srgb, var(--ts-primary) 58%, #6f7f77) var(--ts-canvas);
}

html[data-theme="dark"] *::-webkit-scrollbar-track {
    background: color-mix(in srgb, var(--ts-canvas) 82%, #000);
}

html[data-theme="dark"] *::-webkit-scrollbar-thumb {
    border-color: color-mix(in srgb, var(--ts-canvas) 82%, #000);
    background: color-mix(in srgb, var(--ts-primary) 58%, #6f7f77);
}

html[data-theme="dark"] *::-webkit-scrollbar-thumb:hover {
    background: color-mix(in srgb, var(--ts-primary) 74%, #9ca9a2);
}

* {
    box-sizing: border-box;
}

html {
    min-width: 320px;
    scrollbar-color: color-mix(in srgb, var(--ts-primary) 48%, #9aa7b5) var(--ts-canvas);
    scrollbar-width: thin;
}

body {
    color: var(--ts-ink);
    background: var(--ts-canvas);
    font-family: Inter, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    font-size: .9375rem;
    -webkit-font-smoothing: antialiased;
}

*::-webkit-scrollbar {
    width: .72rem;
    height: .72rem;
}

*::-webkit-scrollbar-track {
    background: color-mix(in srgb, var(--ts-canvas) 86%, #fff);
}

*::-webkit-scrollbar-thumb {
    min-height: 2.5rem;
    border: 3px solid color-mix(in srgb, var(--ts-canvas) 86%, #fff);
    border-radius: 999px;
    background: color-mix(in srgb, var(--ts-primary) 48%, #9aa7b5);
}

*::-webkit-scrollbar-thumb:hover {
    background: color-mix(in srgb, var(--ts-primary) 68%, #69778a);
}

*::-webkit-scrollbar-corner {
    background: color-mix(in srgb, var(--ts-canvas) 86%, #fff);
}

html.page-navigating body::before {
    position: fixed;
    z-index: 3000;
    top: 0;
    left: 0;
    width: 72%;
    height: 3px;
    content: "";
    background: #fff;
    box-shadow: 0 0 10px rgba(255, 255, 255, .65);
    animation: page-progress .7s ease-out both;
}

.system-loading-overlay,
.sweet-confirm-backdrop {
    position: fixed;
    z-index: 4000;
    inset: 0;
    display: grid;
    place-items: center;
    padding: 1rem;
    background: rgba(12, 20, 34, .58);
    backdrop-filter: blur(5px);
    opacity: 0;
    pointer-events: none;
    transition: opacity .16s ease;
}

html.is-system-loading .system-loading-overlay,
.sweet-confirm-backdrop {
    opacity: 1;
    pointer-events: auto;
}

.system-loading-overlay[aria-hidden="true"] {
    opacity: 0;
    pointer-events: none;
}

.system-loading-overlay {
    background: rgba(12, 20, 34, .82);
}

.system-loading-box,
.sweet-confirm {
    width: min(360px, calc(100vw - 2rem));
    padding: 1.4rem;
    display: grid;
    justify-items: center;
    gap: .65rem;
    border: 1px solid color-mix(in srgb, var(--ts-primary) 22%, var(--ts-border));
    border-radius: 1rem;
    color: var(--ts-ink);
    background: var(--ts-surface);
    box-shadow: var(--ts-shadow);
    text-align: center;
}

.system-loading-box strong,
.sweet-confirm h2 {
    margin: 0;
    color: var(--ts-ink);
    font-size: 1rem;
    font-weight: 800;
}

.system-loading-box .system-loading-description,
.sweet-confirm p {
    margin: 0;
    color: var(--ts-muted);
    font-size: .82rem;
}

.system-loader {
    position: relative;
    display: inline-block;
    flex-shrink: 0;
    width: 3.5rem;
    height: 4.5rem;
    color: var(--ts-primary);
    animation: system-symbol-breathe 3.2s ease-in-out infinite;
}

.system-loader::after {
    content: "";
    position: absolute;
    inset: 0;
    background: currentColor;
    -webkit-mask: url('../images/tomoserv-symbol.svg') center / contain no-repeat;
    mask: url('../images/tomoserv-symbol.svg') center / contain no-repeat;
    mask-mode: alpha;
}

.system-loader::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 1;
    background: linear-gradient(180deg, transparent 35%, color-mix(in srgb, currentColor 28%, #fff) 50%, transparent 65%) 0 100% / 100% 300% no-repeat;
    -webkit-mask: url('../images/tomoserv-symbol.svg') center / contain no-repeat;
    mask: url('../images/tomoserv-symbol.svg') center / contain no-repeat;
    mask-mode: alpha;
    animation: system-symbol-scan 3.2s cubic-bezier(.4, 0, .2, 1) infinite;
}

.system-loading-box {
    width: min(320px, calc(100vw - 2rem));
    padding: 2rem 1.5rem;
    gap: .5rem;
    border: 0;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
    color: #fff;
    transform: translateY(8px) scale(.98);
    transition: transform .2s ease;
}

.system-loading-box strong {
    color: #fff;
}

.system-loading-box .system-loading-description {
    color: #e0e6ee;
}

html.is-system-loading .system-loading-box {
    transform: translateY(0) scale(1);
}

.system-loading-emblem {
    position: relative;
    isolation: isolate;
    display: grid;
    place-items: center;
    width: 6rem;
    height: 6rem;
    margin-bottom: .75rem;
    border: 0;
    border-radius: 50%;
    color: color-mix(in srgb, var(--ts-primary) 65%, #fff);
    background: transparent;
}

.system-loading-emblem::before,
.system-loading-emblem::after {
    content: "";
    position: absolute;
    pointer-events: none;
    border-radius: inherit;
}

.system-loading-emblem::before {
    inset: -5px;
    border: 1px solid color-mix(in srgb, currentColor 35%, transparent);
    animation: system-emblem-halo 3.2s ease-out infinite;
}

.system-loading-emblem::after {
    inset: 5px;
    z-index: -1;
    border: 1px solid transparent;
    border-top-color: color-mix(in srgb, currentColor 30%, transparent);
    border-bottom-color: color-mix(in srgb, currentColor 12%, transparent);
    border-radius: 50%;
    animation: system-loader-spin 6.4s linear infinite;
}

.system-loading-emblem .system-loader {
    width: 3.5rem;
    height: 4.75rem;
    color: inherit;
}

/* Hidden overlays must not keep their decorative animations running. */
.system-loading-overlay[aria-hidden="true"] .system-loading-emblem::before,
.system-loading-overlay[aria-hidden="true"] .system-loading-emblem::after,
.system-loading-overlay[aria-hidden="true"] .system-loader,
.system-loading-overlay[aria-hidden="true"] .system-loader::before,
.system-loading-overlay[aria-hidden="true"] .system-loader::after {
    animation-play-state: paused;
}

.btn .system-loader,
.download-is-preparing .system-loader {
    width: 1rem;
    height: 1rem;
    color: currentColor;
    background: none;
    animation: none;
}

.btn .system-loader::before,
.download-is-preparing .system-loader::before {
    inset: 0;
    height: auto;
    background: none;
    -webkit-mask: none;
    mask: none;
    border: solid color-mix(in srgb, currentColor 25%, transparent);
    border-width: 1.5px;
    border-top-color: currentColor;
    border-radius: 50%;
    animation: system-loader-spin 1s linear infinite;
}

.btn .system-loader::after,
.download-is-preparing .system-loader::after {
    display: none;
}

.inline-loading {
    min-height: 8rem;
    display: grid;
    place-items: center;
    align-content: center;
    gap: .7rem;
    color: var(--ts-muted);
    text-align: center;
}

.inline-loading strong {
    color: var(--ts-ink);
    font-size: .9rem;
}

@keyframes system-loader-spin {
    to { transform: rotate(360deg); }
}

@keyframes system-symbol-breathe {
    0%, 100% { transform: translateY(1px) scale(.98); }
    50% { transform: translateY(-1px) scale(1); }
}

@keyframes system-symbol-scan {
    0%, 10% { background-position: 0 100%; opacity: 0; }
    20% { opacity: .85; }
    70% { opacity: .85; }
    85%, 100% { background-position: 0 0; opacity: 0; }
}

@keyframes system-emblem-halo {
    0% { transform: scale(.96); opacity: 0; }
    25% { opacity: .5; }
    85%, 100% { transform: scale(1.16); opacity: 0; }
}

@media (prefers-reduced-motion: reduce) {
    .system-loader,
    .system-loader::before,
    .system-loading-emblem::before,
    .system-loading-emblem::after {
        animation: none !important;
    }

    .system-loader::before,
    .system-loading-emblem::before,
    .system-loading-emblem::after {
        opacity: 0;
    }

    .btn .system-loader::before {
        opacity: 1;
    }
}

.sweet-confirm-icon {
    width: 3.25rem;
    height: 3.25rem;
    display: grid;
    place-items: center;
    border-radius: 50%;
    color: var(--ts-primary);
    background: var(--ts-primary-soft);
}

.sweet-confirm-actions {
    margin-top: .35rem;
    display: flex;
    justify-content: center;
    gap: .5rem;
}

.sweet-toast-region {
    position: fixed;
    z-index: 4100;
    top: 1rem;
    right: 1.25rem;
    width: min(25rem, calc(100vw - 2.5rem));
    display: grid;
    gap: .75rem;
    pointer-events: none;
}

.sweet-toast {
    min-height: 4.25rem;
    padding: .9rem .9rem .9rem 1rem;
    display: grid;
    grid-template-columns: auto 1fr auto;
    gap: .75rem;
    align-items: start;
    border: 1px solid color-mix(in srgb, var(--ts-primary) 18%, var(--ts-border));
    border-radius: 1rem;
    color: var(--ts-ink);
    background: var(--ts-surface);
    box-shadow: var(--ts-shadow);
    pointer-events: auto;
    animation: sweet-toast-in .22s ease-out both;
}

.sweet-toast.is-hiding {
    animation: sweet-toast-out .18s ease-in both;
}

.sweet-toast-icon {
    width: 2.45rem;
    height: 2.45rem;
    display: grid;
    place-items: center;
    border-radius: 50%;
}

.sweet-toast-success .sweet-toast-icon {
    color: var(--ts-success);
    background: var(--ts-success-soft);
}

.sweet-toast-danger .sweet-toast-icon {
    color: var(--ts-danger);
    background: var(--ts-danger-soft);
}

.sweet-toast-warning .sweet-toast-icon {
    color: var(--ts-warning);
    background: var(--ts-warning-soft);
}

.sweet-toast-info .sweet-toast-icon {
    color: var(--ts-primary);
    background: var(--ts-primary-soft);
}

.sweet-toast-content {
    min-width: 0;
    display: grid;
    gap: .18rem;
}

.sweet-toast-content strong {
    color: var(--ts-ink);
    font-size: .9rem;
    font-weight: 800;
    line-height: 1.25;
}

.sweet-toast-content span {
    overflow-wrap: anywhere;
    color: var(--ts-muted);
    font-size: .82rem;
    line-height: 1.35;
}

.sweet-toast-close {
    width: 2rem;
    height: 2rem;
    display: grid;
    place-items: center;
    border: 0;
    border-radius: .65rem;
    color: var(--ts-muted);
    background: transparent;
    cursor: pointer;
}

.sweet-toast-close:hover,
.sweet-toast-close:focus-visible {
    color: var(--ts-ink);
    background: var(--ts-surface-subtle);
}

@keyframes sweet-toast-in {
    from {
        opacity: 0;
        transform: translate3d(.8rem, -.35rem, 0) scale(.98);
    }
    to {
        opacity: 1;
        transform: translate3d(0, 0, 0) scale(1);
    }
}

@keyframes sweet-toast-out {
    to {
        opacity: 0;
        transform: translate3d(.8rem, -.35rem, 0) scale(.98);
    }
}

@keyframes page-progress {
    from { width: 8%; opacity: .7; }
    to { width: 82%; opacity: 1; }
}

button,
input,
select,
textarea {
    font: inherit;
}

a {
    color: var(--ts-primary);
    text-underline-offset: .18em;
}

:focus-visible {
    outline: 3px solid color-mix(in srgb, var(--ts-primary) 32%, transparent);
    outline-offset: 2px;
}

.skip-link {
    position: fixed;
    z-index: 2000;
    top: .75rem;
    left: .75rem;
    padding: .65rem 1rem;
    border-radius: .5rem;
    color: #fff;
    background: var(--ts-primary);
    transform: translateY(-160%);
}

.skip-link:focus {
    transform: translateY(0);
}

.ui-icon {
    flex: 0 0 auto;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.8;
    stroke-linecap: round;
    stroke-linejoin: round;
    vertical-align: -.15em;
}

.ui-icon-sprite {
    position: absolute;
    width: 0;
    height: 0;
    overflow: hidden;
}

.ui-icon use,
.ui-icon-sprite symbol {
    fill: none;
    stroke: currentColor;
    stroke-width: 1.8;
    stroke-linecap: round;
    stroke-linejoin: round;
}

/* Shell */

.app-shell {
    min-height: 100vh;
    display: grid;
    grid-template-columns: var(--ts-sidebar-width) minmax(0, 1fr);
    grid-template-rows: var(--ts-topbar-height) minmax(0, 1fr);
    transition: grid-template-columns .18s ease;
}

.app-navigation {
    position: sticky;
    z-index: 1035;
    top: 0;
    grid-column: 1;
    grid-row: 1 / 3;
    min-width: 0;
    height: 100vh;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    color: #dbe4f4;
    background:
        radial-gradient(circle at 10% 10%, color-mix(in srgb, var(--ts-primary) 27%, transparent), transparent 16rem),
        var(--ts-sidebar);
}

.app-topbar {
    position: sticky;
    z-index: 1020;
    top: 0;
    grid-column: 2;
    grid-row: 1;
    min-width: 0;
    height: var(--ts-topbar-height);
    padding: 0 clamp(1rem, 2.2vw, 2rem);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    color: #fff;
    border-bottom: 1px solid color-mix(in srgb, var(--ts-primary) 75%, #000);
    background: var(--ts-primary);
}

.app-content {
    grid-column: 2;
    grid-row: 2;
    min-width: 0;
    width: 100%;
    max-width: 1680px;
    margin-inline: auto;
    padding: clamp(1.25rem, 2.5vw, 2rem);
}

/* Workspace tabs */

.workspace-tabs {
    margin-bottom: .75rem;
    min-height: 2.45rem;
    overflow-x: auto;
    opacity: 0;
    scrollbar-width: thin;
    animation: workspace-tabs-fallback .01s .15s forwards;
}

html.workspace-tabs-ready .workspace-tabs {
    opacity: 1;
    animation: none;
}

@keyframes workspace-tabs-fallback {
    to { opacity: 1; }
}

.workspace-tabs-list {
    min-width: max-content;
    display: flex;
    align-items: flex-end;
    gap: .3rem;
}

.workspace-tab {
    min-height: 2.45rem;
    display: inline-flex;
    align-items: stretch;
    border: 1px solid var(--ts-border);
    border-radius: .65rem .65rem 0 0;
    color: var(--ts-muted);
    background: var(--ts-surface-subtle);
}

.workspace-tab a {
    padding: .55rem .75rem;
    display: inline-flex;
    align-items: center;
    gap: .42rem;
    color: inherit;
    font-size: .78rem;
    font-weight: 750;
    text-decoration: none;
    white-space: nowrap;
}

.workspace-tab button {
    width: 1.9rem;
    padding: 0;
    border: 0;
    border-left: 1px solid transparent;
    border-radius: 0 .65rem 0 0;
    color: var(--ts-muted);
    background: transparent;
    font-size: 1.1rem;
}

.workspace-tab:hover {
    color: var(--ts-ink);
    background: var(--ts-surface);
}

.workspace-tab button:hover {
    color: var(--ts-danger);
    background: var(--ts-danger-soft);
}

.workspace-tab.active {
    position: relative;
    color: var(--ts-primary);
    border-color: color-mix(in srgb, var(--ts-primary) 35%, var(--ts-border));
    background: var(--ts-surface);
}

.workspace-tab.active::after {
    position: absolute;
    right: .65rem;
    bottom: -1px;
    left: .65rem;
    height: 2px;
    border-radius: 999px;
    content: "";
    background: var(--ts-primary);
}

/* Brand */

.app-brand {
    min-width: 0;
    display: inline-flex;
    align-items: center;
    gap: .7rem;
    color: inherit;
    text-decoration: none;
}

.brand-copy {
    min-width: 0;
    display: flex;
    align-items: baseline;
    gap: .4rem;
    white-space: nowrap;
}

.brand-copy strong {
    font-size: 1.08rem;
    letter-spacing: .015em;
}

.brand-copy small {
    color: #91a0b9;
    font-size: .7rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .1em;
}

/* Navigation */

.navigation-brand {
    height: var(--ts-topbar-height);
    padding: 0 1.15rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .75rem;
    border-bottom: 1px solid rgba(255, 255, 255, .08);
}

.icon-button {
    width: 2.5rem;
    height: 2.5rem;
    padding: 0;
    display: inline-grid;
    place-items: center;
    border: 1px solid var(--ts-border);
    border-radius: .75rem;
    color: var(--ts-muted);
    background: var(--ts-surface);
    transition: color .15s ease, border-color .15s ease, background .15s ease;
}

.icon-button:hover {
    color: var(--ts-primary);
    border-color: #c8d4ef;
    background: var(--ts-primary-soft);
}

.navigation-collapse {
    width: 2rem;
    height: 2rem;
    color: #aab7ca;
    border-color: rgba(255, 255, 255, .1);
    background: rgba(255, 255, 255, .06);
}

.navigation-collapse:hover {
    color: #fff;
    border-color: rgba(255, 255, 255, .18);
    background: rgba(255, 255, 255, .12);
}

.navigation-collapse .ui-icon {
    transform: rotate(180deg);
    transition: transform .18s ease;
}

.navigation-menu {
    min-height: 0;
    padding: 1.2rem .8rem;
    overflow-y: auto;
}

.navigation-label {
    margin: 0 0 .55rem;
    padding: 0 .75rem;
    color: #7988a3;
    font-size: .68rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: .11em;
}

.navigation-list,
.navigation-submenu {
    margin: 0;
    padding: 0;
    list-style: none;
}

.navigation-item {
    margin-bottom: .25rem;
}

.navigation-link {
    position: relative;
    min-height: 2.75rem;
    padding: .66rem .75rem;
    display: flex;
    align-items: center;
    gap: .8rem;
    border: 0;
    border-radius: .7rem;
    color: #afbdd0;
    text-decoration: none;
    cursor: pointer;
    list-style: none;
    transition: color .15s ease, background .15s ease;
}

.navigation-link::-webkit-details-marker {
    display: none;
}

.navigation-link:hover {
    color: #fff;
    background: rgba(255, 255, 255, .06);
}

.navigation-link.active {
    color: #fff;
    background: linear-gradient(90deg, var(--ts-primary), var(--ts-primary-strong));
    box-shadow: 0 8px 24px color-mix(in srgb, var(--ts-primary) 30%, transparent);
}

.navigation-link > span:not(.navigation-arrow) {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.navigation-arrow {
    margin-left: auto;
    display: inline-flex;
    transition: transform .16s ease;
}

details[open] > summary .navigation-arrow {
    transform: rotate(90deg);
}

.navigation-submenu {
    margin: .25rem 0 .45rem 1.25rem;
    padding-left: 1.25rem;
    border-left: 1px solid rgba(255, 255, 255, .11);
}

.navigation-submenu a {
    padding: .55rem .35rem;
    display: flex;
    align-items: center;
    gap: .45rem;
    color: #92a2ba;
    font-size: .86rem;
    text-decoration: none;
}

.navigation-submenu a:hover {
    color: #fff;
}

.navigation-mega {
    margin: .35rem 0 .65rem 1.25rem;
    padding-left: 1.25rem;
    display: grid;
    gap: .9rem;
    border-left: 1px solid rgba(255, 255, 255, .11);
}

.navigation-mega-group h3 {
    margin: 0 0 .4rem;
    display: flex;
    align-items: center;
    gap: .35rem;
    color: #fff;
    font-size: .72rem;
    font-weight: 850;
    text-transform: uppercase;
}

.navigation-mega-group ul {
    margin: 0;
    padding: 0;
    display: grid;
    gap: .2rem;
    list-style: none;
}

.navigation-mega-group a {
    padding: .48rem .35rem;
    display: flex;
    align-items: center;
    gap: .45rem;
    color: #92a2ba;
    font-size: .82rem;
    text-decoration: none;
}

.navigation-mega-group a:hover {
    color: #fff;
}

.navigation-help {
    margin: auto .8rem 1rem;
    padding: .85rem;
    display: flex;
    align-items: center;
    gap: .7rem;
    border: 1px solid rgba(255, 255, 255, .08);
    border-radius: .8rem;
    background: rgba(255, 255, 255, .05);
}

.help-icon {
    width: 2rem;
    height: 2rem;
    flex: 0 0 2rem;
    display: grid;
    place-items: center;
    border-radius: 50%;
    color: #fff;
    background: rgba(83, 132, 239, .7);
    font-weight: 800;
}

.navigation-help strong,
.navigation-help a {
    display: block;
    white-space: nowrap;
}

.navigation-help strong {
    color: #fff;
    font-size: .78rem;
}

.navigation-help a {
    margin-top: .15rem;
    color: #9eacc1;
    font-size: .72rem;
    text-decoration: none;
}

.navigation-backdrop {
    display: none;
}

/* Topbar */

.topbar-start,
.topbar-actions {
    min-width: 0;
    display: flex;
    align-items: center;
    gap: .75rem;
}

.topbar-actions {
    flex: 0 0 auto;
    flex-wrap: nowrap;
    align-self: stretch;
    justify-content: flex-end;
}

.app-topbar .icon-button {
    color: #fff;
    border-color: rgba(255, 255, 255, .22);
    background: rgba(255, 255, 255, .1);
}

.app-topbar .icon-button:hover {
    color: #fff;
    border-color: rgba(255, 255, 255, .38);
    background: rgba(255, 255, 255, .18);
}

.app-topbar .app-brand {
    color: #fff;
}

.topbar-start {
    flex: 1 1 auto;
}

.mobile-menu-button,
.topbar-brand {
    display: none;
}

.global-search {
    width: 0;
    min-width: 0;
    height: 2.7rem;
    padding: 0;
    display: flex;
    align-items: center;
    gap: .65rem;
    overflow: hidden;
    border: 1px solid transparent;
    border-radius: .75rem;
    color: rgba(255, 255, 255, .86);
    background: rgba(255, 255, 255, .14);
    opacity: 0;
    pointer-events: none;
    transition: width .18s ease, padding .18s ease, border-color .15s ease,
        background .15s ease, box-shadow .15s ease, opacity .15s ease;
}

html.global-search-open .global-search {
    width: min(420px, 34vw);
    padding: 0 .65rem 0 .85rem;
    opacity: 1;
    pointer-events: auto;
}

.global-search:focus-within {
    border-color: rgba(255, 255, 255, .55);
    background: rgba(255, 255, 255, .2);
    box-shadow: 0 0 0 3px rgba(255, 255, 255, .12);
}

.global-search input {
    min-width: 0;
    flex: 1;
    border: 0;
    outline: 0;
    color: #fff;
    background: transparent;
}

.global-search input::placeholder {
    color: rgba(255, 255, 255, .76);
}

.global-search-close {
    width: 1.7rem;
    height: 1.7rem;
    padding: 0;
    display: grid;
    place-items: center;
    flex: 0 0 1.7rem;
    border: 0;
    border-radius: 50%;
    color: #fff;
    background: rgba(255, 255, 255, .16);
    font-size: 1.2rem;
    line-height: 1;
}

.global-search-close:hover {
    background: rgba(255, 255, 255, .25);
}

.layout-switcher {
    padding: .2rem;
    display: flex;
    border: 1px solid var(--ts-border);
    border-radius: .75rem;
    background: var(--ts-surface-subtle);
}

.layout-switcher button {
    min-height: 2rem;
    padding: .35rem .6rem;
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    border: 0;
    border-radius: .55rem;
    color: var(--ts-muted);
    background: transparent;
    font-size: .76rem;
    font-weight: 700;
}

.layout-switcher button[aria-pressed="true"] {
    color: var(--ts-primary);
    background: var(--ts-surface);
    box-shadow: 0 1px 4px rgba(16, 35, 67, .1);
}

.notification-button {
    position: relative;
}

.notification-dot {
    position: absolute;
    top: -.25rem;
    right: -.25rem;
    min-width: 1.1rem;
    height: 1.1rem;
    padding-inline: .2rem;
    display: grid;
    place-items: center;
    border: 2px solid #fff;
    border-radius: 999px;
    color: #fff;
    background: var(--ts-danger);
    font-size: .58rem;
    font-weight: 800;
}

.user-menu {
    height: 2.5rem;
    min-width: 0;
    max-width: 12.5rem;
    padding: .2rem .45rem .2rem .2rem;
    display: flex;
    align-items: center;
    gap: .6rem;
    border: 1px solid rgba(255, 255, 255, .22);
    border-radius: .8rem;
    color: #fff;
    background: rgba(255, 255, 255, .1);
    text-align: left;
    white-space: nowrap;
    transition: border-color .15s ease, background .15s ease;
}

.user-menu:hover,
.user-menu[aria-expanded="true"] {
    border-color: rgba(255, 255, 255, .38);
    background: rgba(255, 255, 255, .18);
}

.user-avatar {
    width: 2.1rem;
    height: 2.1rem;
    flex: 0 0 2.1rem;
    display: grid;
    place-items: center;
    border-radius: .72rem;
    color: var(--ts-primary-strong);
    background: rgba(255, 255, 255, .9);
    font-size: .75rem;
    font-weight: 800;
}

.user-copy {
    min-width: 0;
    display: flex;
    flex-direction: column;
}

.user-copy strong,
.user-copy small {
    max-width: 10rem;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.user-copy strong {
    font-size: .78rem;
}

.user-copy small {
    color: rgba(255, 255, 255, .74);
    font-size: .64rem;
}

.user-chevron {
    display: inline-flex;
    transform: rotate(90deg);
}

.topbar-account {
    position: relative;
}

.app-topbar .topbar-account .dropdown-menu {
    z-index: 1060;
    min-width: 12rem;
    margin-top: .6rem !important;
    padding: .45rem;
    border: 1px solid var(--ts-border);
    border-radius: .8rem;
    box-shadow: var(--ts-shadow);
}

.app-topbar .topbar-account .dropdown-item {
    padding: .55rem .7rem;
    border-radius: .55rem;
    font-size: .86rem;
}

.app-topbar .topbar-account .dropdown-divider {
    margin: .35rem 0;
}

/* Navigation states */

html[data-layout="vertical"][data-navigation="collapsed"] .app-shell {
    grid-template-columns: var(--ts-sidebar-collapsed) minmax(0, 1fr);
}

html[data-layout="vertical"][data-navigation="collapsed"] .navigation-brand {
    justify-content: center;
    padding-inline: .75rem;
}

html[data-layout="vertical"][data-navigation="collapsed"] .brand-copy,
html[data-layout="vertical"][data-navigation="collapsed"] .navigation-label,
html[data-layout="vertical"][data-navigation="collapsed"] .navigation-link > span,
html[data-layout="vertical"][data-navigation="collapsed"] .navigation-help > div {
    display: none;
}

html[data-layout="vertical"][data-navigation="collapsed"] .navigation-collapse {
    position: absolute;
    top: 4.75rem;
    right: 50%;
    transform: translateX(50%);
    border-color: var(--ts-border);
    color: var(--ts-primary);
    background: #fff;
}

html[data-layout="vertical"][data-navigation="collapsed"] .navigation-menu {
    padding-top: 3.25rem;
}

html[data-layout="vertical"][data-navigation="collapsed"] .navigation-collapse .ui-icon {
    transform: none;
}

html[data-layout="vertical"][data-navigation="collapsed"] .navigation-link {
    justify-content: center;
}

html[data-layout="vertical"][data-navigation="collapsed"] .navigation-submenu {
    display: none;
}

html[data-layout="vertical"][data-navigation="collapsed"] .navigation-help {
    justify-content: center;
}

/* Horizontal desktop navigation */

html[data-layout="horizontal"] .app-shell {
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: var(--ts-topbar-height) var(--ts-horizontal-height) minmax(0, 1fr);
}

html[data-layout="horizontal"] .app-topbar {
    grid-column: 1;
    grid-row: 1;
}

html[data-layout="horizontal"] .topbar-brand {
    display: block;
    margin-right: 1rem;
}

html[data-layout="horizontal"] .app-navigation {
    grid-column: 1;
    grid-row: 2;
    width: 100%;
    height: var(--ts-horizontal-height);
    overflow: visible;
    color: #fff;
    background: var(--ts-primary);
    border-bottom: 1px solid color-mix(in srgb, var(--ts-primary) 85%, #000);
}

html[data-layout="horizontal"] .navigation-brand,
html[data-layout="horizontal"] .navigation-help,
html[data-layout="horizontal"] .navigation-label {
    display: none;
}

html[data-layout="horizontal"] .navigation-menu {
    width: 100%;
    max-width: none;
    margin-inline: auto;
    padding: .45rem 1rem;
    overflow: visible;
}

html[data-layout="horizontal"] .navigation-list {
    display: flex;
    align-items: center;
    gap: .28rem;
}

html[data-layout="horizontal"] .navigation-item {
    position: relative;
    margin: 0;
}

html[data-layout="horizontal"] .navigation-link {
    min-height: 2.45rem;
    padding: .52rem .7rem;
    color: #fff;
    border-radius: .45rem;
    font-size: .84rem;
    font-weight: 650;
    white-space: nowrap;
}

html[data-layout="horizontal"] .navigation-link:hover {
    color: #fff;
    background: rgba(0, 0, 0, .12);
}

html[data-layout="horizontal"] .navigation-link.active {
    color: #fff;
    background: color-mix(in srgb, var(--ts-primary) 78%, #000);
    box-shadow: none;
}

html[data-layout="horizontal"] .navigation-submenu {
    position: absolute;
    top: calc(100% + .4rem);
    left: 0;
    z-index: 1040;
    width: 15rem;
    margin: 0;
    padding: .5rem;
    border: 1px solid var(--ts-border);
    border-radius: .75rem;
    background: #fff;
    box-shadow: var(--ts-shadow);
}

html[data-layout="horizontal"] .navigation-mega {
    position: fixed;
    z-index: 1040;
    top: calc(var(--ts-topbar-height) + var(--ts-horizontal-height));
    right: 0;
    left: 0;
    min-height: 17.5rem;
    margin: 0;
    padding: 1.3rem 1.5rem 1.25rem;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 1.9rem;
    border: 0;
    color: #fff;
    background: var(--ts-primary);
    box-shadow: 0 18px 26px rgba(16, 35, 67, .12);
}

html[data-layout="horizontal"] .navigation-mega-group h3 {
    min-height: 2.2rem;
    margin-bottom: .7rem;
    padding-bottom: .75rem;
    border-bottom: 1px solid rgba(255, 255, 255, .32);
    color: #fff;
    font-size: .82rem;
    line-height: 1.25;
}

html[data-layout="horizontal"] .navigation-mega-group a {
    padding: .42rem .15rem;
    color: #fff;
    font-size: .84rem;
    font-weight: 500;
}

html[data-layout="horizontal"] .navigation-mega-group a:hover {
    color: #fff;
    text-decoration: underline;
    text-underline-offset: .18em;
}

html[data-layout="horizontal"] .navigation-submenu a {
    padding: .6rem .7rem;
    display: flex;
    align-items: center;
    gap: .45rem;
    border-radius: .5rem;
    color: var(--ts-muted);
}

html[data-layout="horizontal"] .navigation-submenu a:hover {
    color: var(--ts-primary);
    background: var(--ts-primary-soft);
}

html[data-layout="horizontal"] .app-content {
    grid-column: 1;
    grid-row: 3;
    max-width: none;
    padding: 1rem;
}

@media (min-width: 992px) {
    /* Compact desktop shell: retain the three familiar navigation levels. */
    html[data-layout="horizontal"] {
        --ts-topbar-height: 48px;
        --ts-horizontal-height: 44px;
    }

    html[data-layout="horizontal"] .app-topbar {
        z-index: 1055;
        padding-inline: 1rem;
    }

    html[data-layout="horizontal"] .topbar-actions {
        gap: .5rem;
    }

    html[data-layout="horizontal"] .navigation-menu {
        padding-block: 2px;
    }

    html[data-layout="horizontal"] .navigation-link {
        min-height: 40px;
        padding-block: .4rem;
    }

    html[data-layout="horizontal"] .app-content {
        padding-top: .5rem;
    }

    html[data-layout="horizontal"] .workspace-tabs {
        min-height: 36px;
        margin-bottom: .5rem;
    }

    html[data-layout="horizontal"] .workspace-tab {
        min-height: 36px;
    }

    html[data-layout="horizontal"] .workspace-tab a {
        padding-block: .4rem;
    }
}

/* Page primitives */

.page-header {
    margin-bottom: 1.4rem;
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 1rem;
}

.page-title {
    margin: .2rem 0 0;
    color: var(--ts-ink);
    font-size: clamp(1.45rem, 2.6vw, 2rem);
    font-weight: 750;
    letter-spacing: -.035em;
}

.page-description {
    margin: .4rem 0 0;
    color: var(--ts-muted);
    font-size: .9rem;
}

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

.breadcrumb {
    --bs-breadcrumb-divider-color: #a3adbd;
    --bs-breadcrumb-item-active-color: var(--ts-muted);
    margin: 0;
    font-size: .75rem;
}

.breadcrumb a {
    color: var(--ts-muted);
    text-decoration: none;
}

.breadcrumb a:hover {
    color: var(--ts-primary);
}

.btn {
    --bs-btn-border-radius: .65rem;
    --bs-btn-font-weight: 700;
    --bs-btn-padding-y: .58rem;
    --bs-btn-padding-x: .9rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .45rem;
    font-size: .82rem;
}

.btn-primary {
    --bs-btn-bg: var(--ts-primary);
    --bs-btn-border-color: var(--ts-primary);
    --bs-btn-hover-bg: var(--ts-primary-strong);
    --bs-btn-hover-border-color: var(--ts-primary-strong);
    --bs-btn-active-bg: var(--ts-primary-strong);
}

.btn-light {
    --bs-btn-bg: #fff;
    --bs-btn-border-color: var(--ts-border);
    --bs-btn-color: var(--ts-ink);
    --bs-btn-hover-bg: #f8f9fc;
    --bs-btn-hover-border-color: #cfd6e2;
}

.ts-card {
    min-width: 0;
    border: 1px solid var(--ts-border);
    border-radius: var(--ts-radius);
    background: var(--ts-surface);
    box-shadow: var(--ts-shadow-sm);
}

.ts-card-header {
    min-height: 3.8rem;
    padding: .9rem 1.1rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    border-bottom: 1px solid var(--ts-border);
}

.ts-card-header h2,
.ts-card-header h3 {
    margin: 0;
    color: var(--ts-ink);
    font-size: .95rem;
    font-weight: 750;
}

.ts-card-header p {
    margin: .2rem 0 0;
    color: var(--ts-muted);
    font-size: .75rem;
}

.ts-card-body {
    padding: 1.1rem;
}

.ts-badge {
    padding: .32rem .55rem;
    display: inline-flex;
    align-items: center;
    gap: .3rem;
    border-radius: 999px;
    font-size: .68rem;
    font-weight: 800;
    white-space: nowrap;
}

.ts-badge-primary { color: var(--ts-primary); background: var(--ts-primary-soft); }
.ts-badge-success { color: var(--ts-success); background: var(--ts-success-soft); }
.ts-badge-warning { color: var(--ts-warning); background: var(--ts-warning-soft); }
.ts-badge-danger { color: var(--ts-danger); background: var(--ts-danger-soft); }
.ts-badge-neutral { color: #59667a; background: #edf0f5; }

.ts-alert {
    padding: .85rem 1rem;
    display: flex;
    align-items: flex-start;
    gap: .65rem;
    border: 1px solid;
    border-radius: .75rem;
    font-size: .84rem;
}

.ts-alert strong {
    display: block;
    margin-bottom: .12rem;
}

.ts-alert-success { color: #12633e; border-color: #b8e5ce; background: var(--ts-success-soft); }
.ts-alert-danger { color: #8f2630; border-color: #f1c4c8; background: var(--ts-danger-soft); }
.ts-alert-warning { color: #80500e; border-color: #ead7a1; background: var(--ts-warning-soft); }
.ts-alert-info { color: #244eaa; border-color: #c8d5f3; background: var(--ts-primary-soft); }

.form-label {
    margin-bottom: .38rem;
    color: var(--ts-ink);
    font-size: .78rem;
    font-weight: 750;
}

.form-control,
.form-select {
    min-height: 2.75rem;
    border-color: #d8dee8;
    border-radius: .65rem;
    color: var(--ts-ink);
    font-size: .87rem;
}

.form-control:focus,
.form-select:focus {
    border-color: #8ca7e7;
    box-shadow: 0 0 0 .2rem rgba(36, 87, 214, .11);
}

.form-text {
    color: var(--ts-muted);
    font-size: .72rem;
}

.required-mark {
    color: var(--ts-danger);
}

.table-responsive {
    scrollbar-width: thin;
}

.ts-table {
    min-width: 680px;
    margin: 0;
    vertical-align: middle;
}

.ts-table > :not(caption) > * > * {
    padding: .85rem 1rem;
    border-bottom-color: #edf0f4;
}

.ts-table thead th {
    color: var(--ts-ink);
    background: var(--ts-surface-subtle);
    font-size: .68rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: .06em;
    white-space: nowrap;
}

.ts-table tbody td {
    color: var(--ts-ink);
    font-size: .82rem;
}

.table-identity {
    display: flex;
    align-items: center;
    gap: .65rem;
}

.table-avatar {
    width: 2rem;
    height: 2rem;
    flex: 0 0 2rem;
    display: grid;
    place-items: center;
    border-radius: .58rem;
    color: #1e50bb;
    background: #e4ebfc;
    font-size: .65rem;
    font-weight: 800;
}

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

.table-identity strong {
    color: var(--ts-ink);
    font-size: .82rem;
}

.table-identity small {
    margin-top: .08rem;
    color: var(--ts-muted);
    font-size: .7rem;
}

.pagination {
    --bs-pagination-color: var(--ts-muted);
    --bs-pagination-border-color: var(--ts-border);
    --bs-pagination-hover-color: var(--ts-primary);
    --bs-pagination-hover-bg: var(--ts-primary-soft);
    --bs-pagination-active-bg: var(--ts-primary);
    --bs-pagination-active-border-color: var(--ts-primary);
    gap: .25rem;
}

.page-link {
    min-width: 2.2rem;
    border-radius: .55rem !important;
    text-align: center;
}

.empty-state {
    padding: 2.25rem 1.25rem;
    text-align: center;
}

.empty-state-icon {
    width: 3.5rem;
    height: 3.5rem;
    margin: 0 auto .9rem;
    display: grid;
    place-items: center;
    border-radius: 1rem;
    color: var(--ts-primary);
    background: var(--ts-primary-soft);
}

.empty-state h3 {
    margin: 0 0 .35rem;
    font-size: 1rem;
}

.empty-state p {
    max-width: 30rem;
    margin: 0 auto .9rem;
    color: var(--ts-muted);
    font-size: .8rem;
}

.skeleton {
    position: relative;
    overflow: hidden;
    border-radius: .35rem;
    color: transparent !important;
    background: #edf0f4;
}

.skeleton::after {
    position: absolute;
    inset: 0;
    content: "";
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .72), transparent);
    transform: translateX(-100%);
    animation: skeleton-shine 1.4s infinite;
}

@keyframes skeleton-shine {
    to { transform: translateX(100%); }
}

@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        scroll-behavior: auto !important;
        animation-duration: .01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: .01ms !important;
    }
}

/* Dashboard */

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

.stat-card {
    position: relative;
    min-height: 8.7rem;
    padding: 1rem;
    overflow: hidden;
}

.stat-card::after {
    position: absolute;
    right: -2rem;
    bottom: -3rem;
    width: 9rem;
    height: 9rem;
    border-radius: 50%;
    content: "";
    background: var(--stat-soft);
}

.stat-card-top,
.stat-card-bottom {
    position: relative;
    z-index: 1;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .5rem;
}

.stat-icon {
    width: 2.65rem;
    height: 2.65rem;
    display: grid;
    place-items: center;
    border-radius: .8rem;
    color: var(--stat-color);
    background: var(--stat-soft);
}

.stat-trend {
    color: var(--ts-success);
    font-size: .68rem;
    font-weight: 800;
}

.stat-label {
    margin: 1rem 0 .15rem;
    color: var(--ts-muted);
    font-size: .76rem;
}

.stat-value {
    color: var(--ts-ink);
    font-size: 1.55rem;
    font-weight: 800;
    letter-spacing: -.04em;
}

.stat-meta {
    margin-top: .15rem;
    color: #909bad;
    font-size: .68rem;
}

.dashboard-grid {
    display: grid;
    grid-template-columns: minmax(0, 1.65fr) minmax(280px, .75fr);
    gap: 1rem;
}

.dashboard-main,
.dashboard-side {
    min-width: 0;
    display: grid;
    align-content: start;
    gap: 1rem;
}

.chart-wrap {
    position: relative;
    min-height: 290px;
}

.chart-legend {
    display: flex;
    flex-wrap: wrap;
    gap: .85rem;
}

.chart-legend span {
    display: inline-flex;
    align-items: center;
    gap: .35rem;
    color: var(--ts-muted);
    font-size: .7rem;
}

.legend-dot {
    width: .45rem;
    height: .45rem;
    border-radius: 50%;
}

.activity-chart {
    width: 100%;
    height: 260px;
    display: block;
}

.chart-grid-line {
    stroke: #edf0f5;
    stroke-width: 1;
}

.chart-label {
    fill: var(--ts-muted);
    font-size: 10px;
}

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

.chart-line {
    fill: none;
    stroke: var(--ts-primary);
    stroke-width: 3;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.chart-point {
    fill: #fff;
    stroke: var(--ts-primary);
    stroke-width: 3;
}

.appointment-list {
    display: grid;
    gap: .75rem;
}

.appointment-item {
    padding: .8rem;
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: center;
    gap: .7rem;
    border: 1px solid #edf0f4;
    border-radius: .75rem;
}

.appointment-time {
    min-width: 3.4rem;
    color: var(--ts-primary);
    font-size: .76rem;
    font-weight: 800;
}

.appointment-info {
    min-width: 0;
}

.appointment-info strong,
.appointment-info small {
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.appointment-info strong {
    font-size: .8rem;
}

.appointment-info small {
    margin-top: .15rem;
    color: var(--ts-muted);
    font-size: .69rem;
}

.quick-actions {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: .65rem;
}

.quick-action {
    min-height: 5.8rem;
    padding: .75rem;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    border: 1px solid var(--ts-border);
    border-radius: .75rem;
    color: var(--ts-ink);
    background: #fff;
    text-decoration: none;
    transition: border-color .15s ease, transform .15s ease, box-shadow .15s ease;
}

.quick-action:hover {
    color: var(--ts-primary);
    border-color: #b9c8eb;
    box-shadow: var(--ts-shadow-sm);
    transform: translateY(-1px);
}

.quick-action .ui-icon {
    color: var(--ts-primary);
}

.quick-action strong {
    font-size: .75rem;
}

/* Component catalog */

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

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

.component-demo {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: .65rem;
}

/* Auth */

.auth-body {
    min-height: 100vh;
    background: var(--ts-canvas);
}

.auth-shell {
    min-height: 100vh;
    display: grid;
    grid-template-columns: minmax(320px, .9fr) minmax(480px, 1.1fr);
}

.auth-panel {
    padding: clamp(1.5rem, 5vw, 4rem);
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--ts-surface);
}

.auth-form-wrap {
    width: min(100%, 400px);
}

.auth-form-wrap .app-brand {
    margin-bottom: clamp(2.5rem, 7vh, 5rem);
    color: var(--ts-ink);
}

.auth-heading {
    margin-bottom: 1.8rem;
}

.auth-heading h1 {
    margin: 0 0 .55rem;
    font-size: clamp(1.75rem, 4vw, 2.25rem);
    font-weight: 800;
    letter-spacing: -.04em;
}

.auth-heading p {
    margin: 0;
    color: var(--ts-muted);
}

.auth-submit {
    min-height: 3rem;
}

.auth-aside {
    position: relative;
    padding: clamp(2rem, 6vw, 5rem);
    display: flex;
    align-items: flex-end;
    overflow: hidden;
    color: #fff;
    background:
        radial-gradient(circle at 75% 20%, rgba(78, 212, 186, .42), transparent 20rem),
        linear-gradient(145deg, #122b61, #1c4fb4 56%, #167e83);
}

.auth-aside::before,
.auth-aside::after {
    position: absolute;
    border: 1px solid rgba(255, 255, 255, .12);
    border-radius: 50%;
    content: "";
}

.auth-aside::before {
    top: -12rem;
    right: -7rem;
    width: 34rem;
    height: 34rem;
}

.auth-aside::after {
    top: -4rem;
    right: 2rem;
    width: 18rem;
    height: 18rem;
}

.auth-message {
    position: relative;
    z-index: 1;
    max-width: 36rem;
}

.auth-message-badge {
    margin-bottom: 1rem;
    padding: .45rem .7rem;
    display: inline-flex;
    border: 1px solid rgba(255, 255, 255, .22);
    border-radius: 999px;
    background: rgba(255, 255, 255, .1);
    font-size: .72rem;
    font-weight: 800;
}

.auth-message h2 {
    margin: 0 0 1rem;
    font-size: clamp(2rem, 4.5vw, 4rem);
    font-weight: 800;
    letter-spacing: -.05em;
}

.auth-message p {
    max-width: 30rem;
    margin: 0;
    color: rgba(255, 255, 255, .75);
    font-size: 1rem;
    line-height: 1.7;
}

/* Responsive */

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

}

@media (max-width: 991.98px) {
    .app-shell,
    html[data-layout="horizontal"] .app-shell,
    html[data-layout="vertical"][data-navigation="collapsed"] .app-shell {
        grid-template-columns: minmax(0, 1fr);
        grid-template-rows: var(--ts-topbar-height) minmax(0, 1fr);
    }

    .app-topbar,
    html[data-layout="horizontal"] .app-topbar {
        grid-column: 1;
        grid-row: 1;
    }

    .app-content,
    html[data-layout="horizontal"] .app-content {
        grid-column: 1;
        grid-row: 2;
    }

    .app-navigation,
    html[data-layout="horizontal"] .app-navigation {
        position: fixed;
        inset: 0 auto 0 0;
        z-index: 1050;
        width: min(86vw, 290px);
        height: 100vh;
        display: flex;
        color: #dbe4f4;
        background:
            radial-gradient(circle at 10% 10%, rgba(64, 113, 229, .24), transparent 16rem),
            var(--ts-sidebar);
        border: 0;
        box-shadow: var(--ts-shadow);
        transform: translateX(-105%);
        transition: transform .2s ease;
    }

    html.navigation-open .app-navigation {
        transform: translateX(0);
    }

    html[data-layout="horizontal"] .navigation-brand,
    html[data-layout="horizontal"] .navigation-help,
    html[data-layout="horizontal"] .navigation-label {
        display: flex;
    }

    html[data-layout="horizontal"] .navigation-menu {
        padding: 1.2rem .8rem;
        overflow-y: auto;
    }

    html[data-layout="horizontal"] .navigation-list {
        display: block;
    }

    html[data-layout="horizontal"] .navigation-item {
        margin-bottom: .25rem;
    }

    html[data-layout="horizontal"] .navigation-link {
        min-height: 2.75rem;
        padding: .66rem .75rem;
        color: #afbdd0;
    }

    html[data-layout="horizontal"] .navigation-link:hover {
        color: #fff;
        background: rgba(255, 255, 255, .06);
    }

    html[data-layout="horizontal"] .navigation-link.active {
        color: #fff;
        background: linear-gradient(90deg, rgba(54, 112, 238, .95), rgba(49, 99, 210, .82));
    }

    html[data-layout="horizontal"] .navigation-submenu {
        position: static;
        width: auto;
        margin: .25rem 0 .45rem 1.25rem;
        padding: 0 0 0 1.25rem;
        border: 0;
        border-left: 1px solid rgba(255, 255, 255, .11);
        border-radius: 0;
        background: transparent;
        box-shadow: none;
    }

    html[data-layout="horizontal"] .navigation-submenu a {
        color: #92a2ba;
    }

    html[data-layout="horizontal"] .navigation-submenu a:hover {
        color: #fff;
        background: transparent;
    }

    html[data-layout="horizontal"] .navigation-mega {
        position: static;
        min-height: 0;
        margin: .35rem 0 .65rem 1.25rem;
        padding: 0 0 0 1.25rem;
        display: grid;
        grid-template-columns: minmax(0, 1fr);
        gap: .9rem;
        border-left: 1px solid rgba(255, 255, 255, .11);
        background: transparent;
        box-shadow: none;
    }

    html[data-layout="horizontal"] .navigation-mega-group h3 {
        min-height: 0;
        margin: 0 0 .35rem;
        padding: 0;
        border: 0;
        color: #fff;
        font-size: .72rem;
    }

    html[data-layout="horizontal"] .navigation-mega-group a {
        color: #92a2ba;
    }

    html[data-layout="horizontal"] .navigation-mega-group a:hover {
        color: #fff;
        text-decoration: none;
    }

    .navigation-collapse {
        display: none;
    }

    .navigation-backdrop {
        position: fixed;
        inset: 0;
        z-index: 1045;
        display: block;
        border: 0;
        background: rgba(8, 17, 31, .48);
        opacity: 0;
        pointer-events: none;
        transition: opacity .2s ease;
    }

    html.navigation-open .navigation-backdrop {
        opacity: 1;
        pointer-events: auto;
    }

    .mobile-menu-button,
    .topbar-brand {
        display: inline-grid;
    }

    .topbar-brand {
        display: block;
    }

    .topbar-brand .brand-copy small {
        display: none;
    }

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

    .auth-shell {
        grid-template-columns: minmax(0, 1fr);
    }

    .auth-aside {
        display: none;
    }
}

@media (max-width: 767.98px) {
    .app-topbar {
        padding-inline: .75rem;
    }

    .topbar-brand .brand-copy {
        display: none;
    }

    .user-copy,
    .user-chevron {
        display: none;
    }

    .page-header {
        align-items: stretch;
        flex-direction: column;
    }

    .page-actions .btn {
        flex: 1 1 auto;
    }

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

@media (max-width: 575.98px) {
    .app-content {
        padding: 1rem .75rem 1.5rem;
    }

    html.global-search-open .global-search {
        position: absolute;
        z-index: 2;
        right: .75rem;
        left: .75rem;
        width: auto;
        padding-inline: .85rem;
        background: #fff;
        box-shadow: var(--ts-shadow);
    }

    .global-search input {
        color: inherit;
    }

    .stats-grid {
        grid-template-columns: minmax(0, 1fr);
        gap: .75rem;
    }

    .stat-card {
        min-height: 7.8rem;
    }

    .quick-actions {
        grid-template-columns: minmax(0, 1fr);
    }

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

/* Appearance preferences */

.appearance-panel {
    --bs-offcanvas-width: min(400px, 92vw);
    color: var(--ts-ink);
    background: var(--ts-surface);
}

.appearance-panel .offcanvas-header {
    padding: 1.25rem;
    border-bottom: 1px solid var(--ts-border);
}

.appearance-description,
.appearance-section > p,
.appearance-note {
    color: var(--ts-muted);
}

.appearance-section {
    margin: 0 0 1.75rem;
    padding: 0;
    border: 0;
}

.appearance-section legend {
    margin-bottom: .7rem;
    color: var(--ts-ink);
    font-size: .82rem;
    font-weight: 800;
}

.appearance-section > p {
    margin: -.35rem 0 .8rem;
    font-size: .75rem;
}

.theme-options {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: .55rem;
}

.theme-options button {
    min-height: 5rem;
    padding: .7rem;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    gap: .45rem;
    border: 1px solid var(--ts-border);
    border-radius: .75rem;
    color: var(--ts-muted);
    background: var(--ts-surface-subtle);
    font-size: .72rem;
    font-weight: 750;
}

.theme-options button[aria-pressed="true"] {
    color: var(--ts-primary);
    border-color: var(--ts-primary);
    background: var(--ts-primary-soft);
    box-shadow: 0 0 0 2px color-mix(in srgb, var(--ts-primary) 14%, transparent);
}

.accent-options {
    display: flex;
    align-items: center;
    gap: .75rem;
}

.accent-swatch {
    width: 2.5rem;
    height: 2.5rem;
    padding: 0;
    border: 3px solid var(--ts-surface);
    border-radius: 50%;
    box-shadow: 0 0 0 1px var(--ts-border);
}

.accent-swatch[aria-pressed="true"] {
    box-shadow: 0 0 0 2px var(--ts-surface), 0 0 0 4px currentColor;
}

.accent-green { color: #168c6b; background: #168c6b; }
.accent-blue { color: #2864dc; background: #2864dc; }
.accent-violet { color: #7451c9; background: #7451c9; }
.accent-coral { color: #c65345; background: #c65345; }

.appearance-layout-switcher {
    width: 100%;
}

.appearance-layout-switcher button {
    flex: 1 1 0;
    justify-content: center;
}

.appearance-preview {
    position: relative;
    height: 11rem;
    margin: .5rem 0 1rem;
    overflow: hidden;
    border: 1px solid var(--ts-border);
    border-radius: .9rem;
    background: var(--ts-canvas);
}

.preview-topbar,
.preview-sidebar,
.preview-content {
    position: absolute;
    display: block;
}

.preview-topbar {
    top: 0;
    right: 0;
    left: 23%;
    height: 22%;
    background: var(--ts-primary);
}

.preview-sidebar {
    inset: 0 auto 0 0;
    width: 23%;
    background: var(--ts-sidebar);
}

.preview-content {
    inset: 33% 8% 12% 31%;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: .45rem;
}

.preview-content i {
    border: 1px solid var(--ts-border);
    border-radius: .45rem;
    background: var(--ts-surface);
}

.appearance-note {
    margin: 0;
    font-size: .72rem;
    line-height: 1.6;
}

/* Dark theme */

html[data-theme="dark"] body,
html[data-theme="dark"] .admin-body {
    color: var(--ts-ink);
    background: var(--ts-canvas);
}

html[data-theme="dark"] .ts-card,
html[data-theme="dark"] .quick-action,
html[data-theme="dark"] .modal-content,
html[data-theme="dark"] .dropdown-menu {
    color: var(--ts-ink);
    background: var(--ts-surface);
}

html[data-theme="dark"] .ts-card-header,
html[data-theme="dark"] .appointment-item,
html[data-theme="dark"] .quick-action,
html[data-theme="dark"] .modal-header,
html[data-theme="dark"] .modal-footer {
    border-color: var(--ts-border);
}

html[data-theme="dark"] .form-control,
html[data-theme="dark"] .form-select {
    color: var(--ts-ink);
    border-color: var(--ts-border);
    background-color: var(--ts-surface-subtle);
}

html[data-theme="dark"] .form-control::placeholder {
    color: #9cacA5;
}

html[data-theme="dark"] .btn-light {
    --bs-btn-bg: var(--ts-surface-subtle);
    --bs-btn-border-color: var(--ts-border);
    --bs-btn-color: var(--ts-ink);
    --bs-btn-hover-bg: #263a34;
    --bs-btn-hover-border-color: #455e56;
    --bs-btn-hover-color: #fff;
}

html[data-theme="dark"] .ts-table {
    --bs-table-bg: transparent;
    --bs-table-color: var(--ts-ink);
    --bs-table-border-color: var(--ts-border);
}

html[data-theme="dark"] .ts-table thead th {
    color: var(--ts-ink);
    background: var(--ts-surface-subtle);
}

html[data-theme="dark"] .ts-table > :not(caption) > * > * {
    border-bottom-color: var(--ts-border);
}

html[data-theme="dark"] .table-avatar,
html[data-theme="dark"] .user-avatar {
    color: #d9fff3;
    background: color-mix(in srgb, var(--ts-primary) 38%, #20332d);
}

html[data-theme="dark"] .skeleton {
    background: #2a3a35;
}

html[data-theme="dark"] .chart-grid-line {
    stroke: var(--ts-border);
}

html[data-theme="dark"] .navigation-submenu {
    color: var(--ts-ink);
    border-color: var(--ts-border);
    background: var(--ts-surface);
}

html[data-theme="dark"][data-layout="horizontal"] .app-navigation,
html[data-theme="dark"][data-layout="horizontal"] .navigation-mega {
    color: #fff;
    border-color: color-mix(in srgb, var(--ts-primary) 85%, #000);
    background: var(--ts-primary);
}

html[data-theme="dark"] .auth-form-wrap .app-brand {
    color: var(--ts-ink);
}

html[data-theme="dark"] .text-secondary {
    color: var(--ts-muted) !important;
}

html[data-theme="dark"] .page-link {
    color: var(--ts-ink);
    border-color: var(--ts-border);
    background: var(--ts-surface);
}

html[data-theme="dark"] .page-item.active .page-link {
    color: #fff;
    background: var(--ts-primary);
}

html[data-theme="dark"] .btn-close {
    filter: invert(1) grayscale(1);
}

html[data-theme="light"] .page-description,
html[data-theme="light"] .ts-card-header p,
html[data-theme="light"] .form-text,
html[data-theme="light"] .table-identity small,
html[data-theme="light"] .appointment-info small,
html[data-theme="light"] .stat-label,
html[data-theme="light"] .stat-meta {
    color: #344054;
}

/* Laudário worklist */

.worklist-card {
    overflow: hidden;
}

.worklist-toolbar {
    padding: 1rem;
    display: flex;
    align-items: flex-end;
    gap: 1rem;
    border-bottom: 1px solid var(--ts-border);
}

.worklist-toolbar-main {
    min-width: 0;
    flex: 1 1 auto;
    display: grid;
    grid-template-columns: minmax(230px, 1.2fr) auto minmax(260px, .9fr);
    align-items: end;
    gap: .75rem;
}

.worklist-toolbar-actions {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: .5rem;
}

.worklist-filter-group {
    min-width: 0;
}

.filter-label {
    margin-bottom: .4rem;
    display: block;
    color: var(--ts-ink);
    font-size: .76rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: .05em;
}

.filter-chips {
    display: flex;
    align-items: center;
    flex-wrap: nowrap;
    gap: .35rem;
    max-width: 100%;
    overflow-x: auto;
    overscroll-behavior-inline: contain;
    scrollbar-width: none;
}

.filter-chips::-webkit-scrollbar {
    display: none;
}

.filter-chips button,
.filter-chips a {
    min-height: 2.25rem;
    padding: .4rem .65rem;
    display: inline-flex;
    flex: 0 0 auto;
    align-items: center;
    gap: .25rem;
    border: 1px solid color-mix(in srgb, var(--ts-primary) 45%, var(--ts-border));
    border-radius: 999px;
    color: var(--ts-primary);
    background: var(--ts-surface);
    font-size: .78rem;
    font-weight: 750;
    text-decoration: none;
    white-space: nowrap;
}

.filter-chips button:hover,
.filter-chips a:hover {
    color: var(--ts-primary);
    border-color: color-mix(in srgb, var(--ts-primary) 45%, var(--ts-border));
}

.filter-chips button.active,
.filter-chips a.active,
.filter-chips button[aria-current="page"],
.filter-chips a[aria-current="page"] {
    color: #fff;
    border-color: var(--ts-primary);
    background: var(--ts-primary);
}

.deadline-not-applicable {
    color: var(--ts-muted);
    font-weight: 750;
}

.advanced-filter-modal {
    color: var(--ts-ink);
    background: var(--ts-surface);
}

.advanced-filter-modal .modal-header p {
    margin-top: .2rem;
    color: var(--ts-muted);
    font-size: .82rem;
}

.advanced-filter-modal .modal-body {
    display: grid;
    gap: 1rem;
    background: var(--ts-page);
}

.advanced-filter-section {
    padding: 1rem;
    border: 1px solid var(--ts-border);
    border-radius: .8rem;
    background: var(--ts-surface);
}

.advanced-filter-section h3 {
    margin: 0 0 .85rem;
    color: var(--ts-ink);
    font-size: .88rem;
    font-weight: 800;
}

.advanced-filter-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: .85rem 1rem;
}

.advanced-filter-grid.period-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
}

.advanced-filter-modal .modal-footer {
    background: var(--ts-surface);
}

.worklist-search {
    height: 2.65rem;
    padding: 0 .28rem 0 .8rem;
    display: flex;
    align-items: center;
    gap: .42rem;
    border: 1px solid var(--ts-border);
    border-radius: .65rem;
    color: var(--ts-muted);
    background: var(--ts-surface-subtle);
}

.worklist-search:focus-within {
    color: var(--ts-primary);
    border-color: var(--ts-primary);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--ts-primary) 12%, transparent);
}

.worklist-search input {
    min-width: 0;
    width: 100%;
    border: 0;
    outline: 0;
    color: var(--ts-ink);
    background: transparent;
    font-size: .86rem;
}

.worklist-search input::placeholder {
    color: var(--ts-muted);
}

.search-clear-button,
.search-submit-button {
    width: 2.05rem;
    height: 2.05rem;
    flex: 0 0 2.05rem;
    display: inline-grid;
    place-items: center;
    border: 0;
    border-radius: .5rem;
    color: var(--ts-muted);
    background: transparent;
}

.search-clear-button {
    font-size: 1.15rem;
    line-height: 1;
}

.search-submit-button {
    color: #fff;
    background: var(--ts-primary);
}

.search-clear-button:hover {
    color: var(--ts-danger);
    background: var(--ts-danger-soft);
}

.search-submit-button:hover {
    background: var(--ts-primary-strong);
}

.worklist-summary {
    padding: .75rem 1rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    border-bottom: 1px solid var(--ts-border);
    background: var(--ts-surface-subtle);
}

.worklist-summary strong,
.worklist-summary span {
    display: block;
}

.worklist-summary strong {
    color: var(--ts-ink);
    font-size: .84rem;
}

.worklist-summary > div > span {
    margin-top: .12rem;
    color: var(--ts-muted);
    font-size: .74rem;
}

.worklist-legend {
    display: flex;
    align-items: center;
    gap: .8rem;
}

.worklist-legend span {
    display: inline-flex;
    align-items: center;
    gap: .35rem;
    color: var(--ts-muted);
    font-size: .72rem;
}

.legend-status {
    width: .5rem;
    height: .5rem;
    border-radius: 50%;
}

.legend-status.urgent { background: var(--ts-danger); }
.legend-status.waiting { background: #d58a13; }
.legend-status.ready { background: var(--ts-success); }

.worklist-scroll {
    min-height: 0;
    overflow-x: auto;
    overflow-y: hidden;
    scrollbar-width: thin;
}

.worklist-table {
    min-width: 1400px;
    margin: 0;
    color: var(--ts-ink);
    vertical-align: middle;
}

.worklist-table > :not(caption) > * > * {
    padding: .9rem .78rem;
    border-right: 1px solid var(--ts-border);
    border-bottom: 1px solid var(--ts-border);
    background: var(--ts-surface);
}

.worklist-table thead th {
    position: sticky;
    z-index: 3;
    top: 0;
    color: var(--ts-ink);
    background: var(--ts-surface-subtle);
    box-shadow: inset 0 -1px var(--ts-border);
    font-size: .73rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: .035em;
    white-space: nowrap;
}

.worklist-table tbody tr:hover > td {
    background: color-mix(in srgb, var(--ts-primary) 5%, var(--ts-surface));
}

.worklist-table tbody tr.is-selected > td {
    background: color-mix(in srgb, var(--ts-primary) 10%, var(--ts-surface));
}

.worklist-table td {
    font-size: .84rem;
}

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

.worklist-table td strong {
    color: var(--ts-ink);
    font-size: .84rem;
}

.worklist-table td small {
    margin-top: .2rem;
    color: var(--ts-muted);
    font-size: .73rem;
}

.worklist-record {
    color: var(--ts-primary);
    font-size: .84rem;
    font-weight: 800;
    text-decoration: none;
}

.worklist-record:hover {
    text-decoration: underline;
}

.modality-badge {
    min-width: 2.75rem;
    padding: .28rem .45rem;
    display: inline-flex;
    justify-content: center;
    border-radius: .45rem;
    color: var(--ts-primary-strong);
    background: var(--ts-primary-soft);
    font-size: .7rem;
    font-weight: 850;
    letter-spacing: .04em;
}

.insurance-label {
    color: var(--ts-success) !important;
    font-weight: 800;
    text-transform: uppercase;
}

.worklist-doctor {
    color: var(--ts-ink);
    font-size: .82rem;
    white-space: nowrap;
}

.status-details {
    margin-top: .4rem;
    display: grid;
    gap: .12rem;
}

.status-details span {
    position: relative;
    padding-left: .8rem;
    color: var(--ts-muted);
    font-size: .68rem;
    white-space: nowrap;
}

.status-details span::before {
    position: absolute;
    top: .34em;
    left: 0;
    width: .42rem;
    height: .42rem;
    border-radius: 50%;
    content: "";
}

.status-details .is-ok::before { background: var(--ts-success); }
.status-details .is-pending::before { background: #d58a13; }

.check-column {
    width: 2.75rem;
    text-align: center;
}

.audio-column {
    width: 3rem;
    text-align: center;
}

.audio-toggle {
    position: relative;
    width: 2rem;
    height: 2rem;
    padding: 0;
    display: inline-grid;
    place-items: center;
    border: 1px solid transparent;
    border-radius: .5rem;
    color: var(--ts-primary);
    background: transparent;
}

.audio-toggle:hover,
.audio-toggle:focus-visible {
    border-color: color-mix(in srgb, var(--ts-primary) 22%, var(--ts-border));
    background: var(--ts-primary-soft);
}

.audio-toggle[data-audio-state="0"] {
    color: var(--ts-muted);
}

.audio-toggle.is-saving {
    opacity: .62;
    pointer-events: none;
}

.modern-tooltip {
    position: fixed;
    z-index: 5000;
    width: max-content;
    max-width: calc(100vw - 1rem);
    padding: .48rem .65rem;
    border: 1px solid color-mix(in srgb, var(--ts-primary) 18%, var(--ts-border));
    border-radius: .55rem;
    color: #fff;
    background: rgba(23, 35, 60, .96);
    box-shadow: var(--ts-shadow-sm);
    font-size: .72rem;
    font-weight: 750;
    line-height: 1.25;
    white-space: nowrap;
    opacity: 0;
    pointer-events: none;
    transform: translateY(-.2rem);
    transition: opacity .12s ease, transform .12s ease;
}

.modern-tooltip::after {
    position: absolute;
    bottom: -.34rem;
    left: var(--tooltip-arrow-left, 50%);
    width: .62rem;
    height: .62rem;
    border-right: 1px solid color-mix(in srgb, var(--ts-primary) 18%, var(--ts-border));
    border-bottom: 1px solid color-mix(in srgb, var(--ts-primary) 18%, var(--ts-border));
    content: "";
    background: rgba(23, 35, 60, .96);
    transform: translateX(-50%) rotate(45deg);
}

.modern-tooltip.is-visible {
    opacity: 1;
    transform: translateY(-.45rem);
}

.actions-column {
    position: sticky;
    z-index: 2;
    right: 0;
    width: 16rem;
    border-right: 0 !important;
    box-shadow: -10px 0 18px rgba(16, 35, 67, .04);
}

.worklist-table thead .actions-column {
    z-index: 4;
}

.row-actions {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: .22rem;
}

.row-actions form {
    display: contents;
}

.row-actions button,
.row-actions a {
    width: 2rem;
    height: 2rem;
    padding: 0;
    display: inline-grid;
    place-items: center;
    border: 1px solid transparent;
    border-radius: .5rem;
    color: var(--ts-primary);
    background: transparent;
    text-decoration: none;
}

.row-actions button:hover,
.row-actions a:hover {
    border-color: color-mix(in srgb, var(--ts-primary) 20%, var(--ts-border));
    background: var(--ts-primary-soft);
}

.row-actions .row-action-danger {
    color: var(--bs-danger);
}

.row-actions .row-action-danger:hover,
.row-actions .row-action-danger:focus-visible {
    border-color: color-mix(in srgb, var(--bs-danger) 24%, var(--ts-border));
    background: color-mix(in srgb, var(--bs-danger) 10%, transparent);
}

.row-actions button:disabled,
.row-actions button[aria-disabled="true"] {
    color: #9aa5b4;
    cursor: not-allowed;
    opacity: .55;
}

.worklist-footer {
    padding: .8rem 1rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    border-top: 1px solid var(--ts-border);
}

.worklist-footer > span {
    color: var(--ts-muted);
    font-size: .78rem;
}

/* Appointment worklist */

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

.page-kicker {
    color: var(--ts-primary);
    font-size: .74rem;
    font-weight: 850;
    text-transform: uppercase;
}

.appointment-card {
    overflow: hidden;
}

.appointment-toolbar {
    padding: .85rem 1rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .85rem;
    border-bottom: 1px solid var(--ts-border);
}

.appointment-search {
    min-width: 0;
    flex: 1 1 auto;
    display: flex;
    align-items: center;
    gap: .5rem;
}

.appointment-search-field {
    min-width: 16rem;
    max-width: 34rem;
    height: 2.55rem;
    flex: 1 1 28rem;
    padding: 0 .5rem 0 .8rem;
    display: flex;
    align-items: center;
    gap: .55rem;
    border: 1px solid var(--ts-border);
    border-radius: .75rem;
    color: var(--ts-muted);
    background: var(--ts-surface);
}

.appointment-search-field:focus-within {
    border-color: color-mix(in srgb, var(--ts-primary) 38%, var(--ts-border));
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--ts-primary) 13%, transparent);
}

.appointment-search-field input {
    min-width: 0;
    flex: 1;
    border: 0;
    outline: 0;
    color: var(--ts-ink);
    background: transparent;
}

.appointment-toolbar-actions {
    display: flex;
    align-items: center;
    gap: .5rem;
}

.appointment-summary {
    padding: .85rem 1rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .75rem;
    border-bottom: 1px solid var(--ts-border);
    background: var(--ts-surface-subtle);
}

.appointment-summary strong,
.appointment-summary span {
    display: block;
}

.appointment-summary strong {
    color: var(--ts-ink);
    font-size: .9rem;
}

.appointment-summary span {
    color: var(--ts-muted);
    font-size: .78rem;
}

.appointment-summary-pills {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    flex-wrap: wrap;
    gap: .45rem;
}

.appointment-summary-pills span {
    padding: .28rem .5rem;
    border: 1px solid var(--ts-border);
    border-radius: 999px;
    background: var(--ts-surface);
    font-weight: 750;
}

.appointment-table-wrap {
    max-height: calc(100vh - 21rem);
    min-height: 18rem;
    overflow: auto;
}

.appointment-table {
    min-width: 1020px;
}

.appointment-table thead th {
    position: sticky;
    z-index: 3;
    top: 0;
    background: var(--ts-surface);
}

.appointment-table tbody tr:nth-child(odd) > td {
    background: color-mix(in srgb, var(--ts-canvas) 62%, var(--ts-surface));
}

.appointment-table tbody tr:hover > td {
    background: color-mix(in srgb, var(--ts-primary) 6%, var(--ts-surface));
}

.appointment-patient,
.appointment-date {
    display: block;
    color: var(--ts-ink);
    font-weight: 760;
}

.appointment-table small {
    display: block;
    margin-top: .12rem;
    color: var(--ts-muted);
}

.appointment-actions-column {
    width: 5.7rem;
    text-align: right;
}

.appointment-footer {
    border-top: 1px solid var(--ts-border);
}

.appointment-toolbar-main {
    grid-template-columns: minmax(190px, auto) minmax(280px, 1fr);
}

.appointment-worklist-table {
    min-width: 1120px;
}

.appointment-worklist-table .actions-column {
    width: 6rem;
}

/* Appointment form */
.appointment-form-page {
    display: grid;
    gap: 1rem;
}

.exam-worklist-table { min-width: 680px; }
.exam-worklist-table th:first-child, .exam-worklist-table td:first-child { width: 58%; }
.exam-form-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1rem; }
.exam-rich-text { min-height: 11rem; resize: vertical; }
.exam-audit-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1rem; margin: 0; }
.exam-audit-grid dt { color: var(--ts-muted); font-size: .75rem; font-weight: 700; text-transform: uppercase; }
.exam-audit-grid dd { margin: .25rem 0 0; }
@media (max-width: 991.98px) { .exam-form-grid, .exam-audit-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 575.98px) { .exam-form-grid, .exam-audit-grid { grid-template-columns: 1fr; } }

.exam-category-table { min-width: 560px; }
.exam-category-main-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(280px, .9fr); gap: 1.25rem; align-items: end; }
.exam-category-agenda-grid { display: grid; grid-template-columns: minmax(160px, .35fr) minmax(280px, 1fr); gap: 1rem; }
.exam-category-agenda-grid .full-width { grid-column: 1 / -1; }
.exam-category-alert { min-height: 12rem; resize: vertical; }
@media (max-width: 767.98px) { .exam-category-main-grid, .exam-category-agenda-grid { grid-template-columns: 1fr; } .exam-category-agenda-grid .full-width { grid-column: auto; } }

.patient-table { min-width: 1060px; }
.patient-main-grid { display: grid; grid-template-columns: .55fr 1.6fr .9fr; gap: 1rem; align-items: end; }
.patient-contact-grid { display: grid; grid-template-columns: 1.4fr .8fr .9fr .8fr; gap: 1rem; align-items: end; }
.insurance-main-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1rem; align-items: end; }
.insurance-block-grid { display: grid; grid-template-columns: minmax(16rem, 1fr) 2fr; gap: 1rem; align-items: end; }
.insurance-toggle .form-check { min-height: 2.4rem; display: flex; align-items: center; gap: .65rem; margin: 0; }
.patient-address-grid { display: grid; grid-template-columns: .65fr 1.2fr .55fr 1fr; gap: 1rem; }
.patient-other-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1rem; }
.patient-code, .patient-whatsapp-status { display: grid; gap: .4rem; align-content: end; min-height: 3.75rem; }
.patient-code span, .patient-whatsapp-status span { font-size: .78rem; font-weight: 700; }
.patient-code strong { font-size: 1.15rem; }
.patient-whatsapp-status strong { color: var(--ts-muted); font-size: .82rem; font-weight: 500; }
@media (max-width: 1199.98px) { .patient-main-grid, .patient-contact-grid, .patient-address-grid, .insurance-main-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 575.98px) { .patient-main-grid, .patient-contact-grid, .patient-address-grid, .patient-other-grid, .insurance-main-grid, .insurance-block-grid { grid-template-columns: 1fr; } }

.appointment-form-actionbar {
    margin-bottom: 0;
}

.appointment-section {
    overflow: visible;
}

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

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

.patient-grid {
    align-items: end;
    grid-template-columns: minmax(220px, 1fr) auto minmax(220px, 1fr) auto minmax(220px, 1fr) auto;
}

.schedule-grid {
    align-items: end;
    grid-template-columns: minmax(180px, 1fr) minmax(160px, 1fr) minmax(220px, 1.4fr) minmax(260px, 1.2fr);
}

.form-field {
    display: grid;
    gap: .4rem;
}

.form-field > span,
.appointment-radio-group legend {
    color: var(--ts-ink);
    font-size: .82rem;
    font-weight: 800;
    margin: 0;
}

.form-field b {
    color: var(--ts-danger);
}

.form-field.compact {
    min-width: 130px;
}

.form-field.wide {
    min-width: 220px;
}

.appointment-inline-action {
    align-items: end;
    display: flex;
}

.appointment-inline-action .btn {
    min-height: 2.6rem;
    white-space: nowrap;
}

.appointment-radio-group {
    border: 0;
    padding: 0;
}

.appointment-radio-group label {
    align-items: center;
    color: var(--ts-muted);
    display: inline-flex;
    font-size: .9rem;
    font-weight: 700;
    gap: .35rem;
    margin-right: .75rem;
}

.appointment-empty-exams {
    border: 1px dashed var(--ts-border);
    border-radius: .75rem;
    color: var(--ts-muted);
    font-weight: 700;
    padding: 1rem;
    text-align: center;
}

.appointment-exam-add {
    margin-bottom: 1rem;
}

.appointment-exam-row {
    align-items: end;
    display: grid;
    gap: .75rem;
    grid-template-columns: minmax(120px, .7fr) minmax(220px, 1.5fr) minmax(220px, 1.2fr) minmax(220px, 1.2fr) minmax(120px, .7fr) auto;
}

.appointment-exam-row .btn {
    min-height: 2.6rem;
    white-space: nowrap;
}

.appointment-exams-table {
    min-width: 1320px;
}

.appointment-exams-table form {
    margin: 0;
}

.appointment-exams-table td {
    vertical-align: middle;
}

.appointment-table-input {
    min-height: 2.25rem;
    padding: .45rem .6rem;
    font-size: .84rem;
}

.appointment-table-input[readonly],
.appointment-exam-row .form-control[readonly] {
    color: var(--ts-muted);
    background: var(--ts-surface-subtle);
    cursor: default;
}

.appointment-value-input {
    text-align: right;
}

.appointment-exam-actions {
    display: flex;
    align-items: center;
    gap: .4rem;
}

.appointment-exam-actions form {
    display: inline-flex;
}

.table-action {
    width: 2rem;
    height: 2rem;
    display: inline-grid;
    place-items: center;
    border: 1px solid var(--ts-border);
    border-radius: .6rem;
    color: var(--ts-primary);
    background: var(--ts-surface);
    cursor: pointer;
    transition: color .15s ease, border-color .15s ease, background .15s ease;
}

.table-action:hover,
.table-action:focus-visible {
    color: var(--ts-primary-strong);
    border-color: color-mix(in srgb, var(--ts-primary) 35%, var(--ts-border));
    background: var(--ts-primary-soft);
}

.table-action.danger {
    color: var(--ts-danger);
}

.table-action.danger:hover,
.table-action.danger:focus-visible {
    border-color: color-mix(in srgb, var(--ts-danger) 35%, var(--ts-border));
    background: var(--ts-danger-soft);
}

.appointment-required-note {
    color: var(--ts-danger);
    font-size: .82rem;
    font-weight: 800;
    margin: .8rem 0 0;
}

html[data-theme="dark"] .worklist-table,
html[data-theme="dark"] .appointment-table {
    --bs-table-bg: transparent;
    --bs-table-color: var(--ts-ink);
    --bs-table-border-color: var(--ts-border);
}

html[data-theme="dark"] .actions-column {
    box-shadow: -10px 0 18px rgba(0, 0, 0, .14);
}

@media (max-width: 1199.98px) {
    .worklist-toolbar {
        align-items: stretch;
        flex-direction: column;
    }

    .appointment-toolbar {
        align-items: stretch;
        flex-direction: column;
    }

    .worklist-toolbar-main {
        grid-template-columns: minmax(0, 1fr) minmax(0, auto);
    }

    .worklist-search {
        grid-column: 1 / -1;
    }
}

@media (max-width: 767.98px) {
    .worklist-toolbar-main {
        grid-template-columns: minmax(0, 1fr);
    }

    .worklist-search {
        grid-column: auto;
    }

    .appointment-search {
        align-items: stretch;
        flex-wrap: wrap;
    }

    .appointment-search-field {
        min-width: 100%;
        max-width: none;
        flex-basis: 100%;
        order: 3;
    }

    .worklist-toolbar-actions {
        grid-column: auto;
        justify-content: stretch;
    }

    .worklist-toolbar-actions .btn {
        flex: 1;
    }

    .patient-grid,
    .schedule-grid,
    .appointment-exam-row {
        grid-template-columns: minmax(0, 1fr);
    }

    .appointment-inline-action {
        align-items: stretch;
    }

    .appointment-inline-action .btn,
    .appointment-exam-row .btn {
        justify-content: center;
        width: 100%;
    }

    .worklist-summary,
    .appointment-summary,
    .worklist-footer {
        align-items: flex-start;
        flex-direction: column;
    }

    .appointment-summary-pills {
        justify-content: flex-start;
    }

    .worklist-legend {
        flex-wrap: wrap;
    }

    .advanced-filter-grid,
    .advanced-filter-grid.period-grid {
        grid-template-columns: minmax(0, 1fr);
    }

    .actions-column {
        position: static;
        box-shadow: none;
    }
}

@media (max-width: 575.98px) {
    .app-topbar .global-search:focus-within {
        color: var(--ts-ink);
        background: var(--ts-surface);
    }

    .app-topbar .global-search:focus-within input {
        color: var(--ts-ink);
    }

    .app-topbar .global-search:focus-within input::placeholder {
        color: var(--ts-muted);
    }

    .app-topbar .global-search:focus-within .global-search-close {
        color: var(--ts-muted);
        background: var(--ts-surface-subtle);
    }
}

/* Searchable select */

.searchable-select {
    position: relative;
}

.searchable-select-trigger {
    width: 100%;
    min-height: 2.75rem;
    padding: .55rem .75rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .75rem;
    border: 1px solid #d8dee8;
    border-radius: .65rem;
    color: var(--ts-ink);
    background: var(--ts-surface);
    font-size: .87rem;
    text-align: left;
}

.searchable-select-trigger[aria-expanded="true"] {
    border-color: var(--ts-primary);
    box-shadow: 0 0 0 .2rem color-mix(in srgb, var(--ts-primary) 11%, transparent);
}

.searchable-select-trigger .ui-icon {
    transform: rotate(90deg);
}

.searchable-select-menu {
    position: absolute;
    z-index: 1060;
    top: calc(100% + .35rem);
    right: 0;
    left: 0;
    padding: .45rem;
    border: 1px solid var(--ts-border);
    border-radius: .75rem;
    background: var(--ts-surface);
    box-shadow: var(--ts-shadow);
}

.searchable-select-search {
    height: 2.4rem;
    padding: 0 .65rem;
    display: flex;
    align-items: center;
    gap: .5rem;
    border: 1px solid var(--ts-border);
    border-radius: .55rem;
    color: var(--ts-muted);
    background: var(--ts-surface-subtle);
}

.searchable-select-search:focus-within {
    color: var(--ts-primary);
    border-color: var(--ts-primary);
}

.searchable-select-search input {
    min-width: 0;
    width: 100%;
    border: 0;
    outline: 0;
    color: var(--ts-ink);
    background: transparent;
    font-size: .82rem;
}

.searchable-select-options {
    max-height: 16rem;
    margin-top: .4rem;
    overflow-y: auto;
    scrollbar-width: thin;
}

.searchable-select-options > button {
    width: 100%;
    padding: .58rem .65rem;
    display: block;
    border: 0;
    border-radius: .5rem;
    color: var(--ts-ink);
    background: transparent;
    font-size: .8rem;
    text-align: left;
}

.searchable-select-options > button:hover,
.searchable-select-options > button:focus,
.searchable-select-options > button[aria-selected="true"] {
    color: var(--ts-primary);
    background: var(--ts-primary-soft);
}

.searchable-select-empty {
    margin: 0;
    padding: 1rem .65rem;
    color: var(--ts-muted);
    font-size: .78rem;
    text-align: center;
}

html[data-theme="dark"] .searchable-select-trigger {
    border-color: var(--ts-border);
    background: var(--ts-surface-subtle);
}

.autocomplete-field {
    position: relative;
}

.autocomplete-field .form-control {
    width: 100%;
}

.autocomplete-menu {
    position: absolute;
    z-index: 1061;
    top: calc(100% + .35rem);
    right: 0;
    left: 0;
    max-height: 14rem;
    padding: .35rem;
    overflow-y: auto;
    border: 1px solid var(--ts-border);
    border-radius: .75rem;
    background: var(--ts-surface);
    box-shadow: var(--ts-shadow);
}

.autocomplete-menu button {
    width: 100%;
    padding: .58rem .65rem;
    display: block;
    border: 0;
    border-radius: .5rem;
    color: var(--ts-ink);
    background: transparent;
    font-size: .8rem;
    text-align: left;
}

.autocomplete-menu button:hover,
.autocomplete-menu button:focus {
    color: var(--ts-primary);
    background: var(--ts-primary-soft);
}

.autocomplete-status {
    color: var(--ts-muted);
    font-size: .8rem;
    font-weight: 700;
    padding: .65rem .7rem;
}

/* Text report editor */

.report-editor-page {
    min-width: 0;
}

.report-actionbar {
    margin-bottom: .75rem;
    padding: .65rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .75rem;
    border: 1px solid var(--ts-border);
    border-radius: var(--ts-radius);
    background: var(--ts-surface);
    box-shadow: var(--ts-shadow-sm);
}

.report-actionbar-context,
.report-actionbar-actions {
    display: flex;
    align-items: center;
    gap: .45rem;
}

.report-actionbar-context {
    min-width: max-content;
}

.report-actionbar-context strong {
    color: var(--ts-ink);
    font-size: .8rem;
}

.report-actionbar-actions {
    min-width: 0;
    justify-content: flex-end;
    flex-wrap: wrap;
}

.report-actionbar-actions .btn {
    min-height: 2.35rem;
    padding: .45rem .7rem;
    font-size: .75rem;
}

.report-patient-summary {
    margin-bottom: .75rem;
    padding: .85rem 1rem;
}

.report-summary-grid {
    margin: 0;
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: .8rem 1.25rem;
}

.report-summary-grid > div {
    min-width: 0;
}

.report-summary-grid dt,
.summary-input label {
    margin-bottom: .2rem;
    display: block;
    color: var(--ts-muted);
    font-size: .68rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: .04em;
}

.report-summary-grid dd {
    margin: 0;
    overflow: hidden;
    color: var(--ts-ink);
    font-size: .8rem;
    font-weight: 400;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.summary-input .form-control {
    min-height: 2.2rem;
    height: 2.2rem;
}

.report-editor-layout {
    min-width: 0;
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(310px, 350px);
    align-items: start;
    gap: .75rem;
}

.report-document-panel {
    min-width: 0;
    overflow: hidden;
}

.report-title-field {
    padding: .7rem;
    border-bottom: 1px solid var(--ts-border);
}

.report-title-field input {
    width: 100%;
    min-height: 2.45rem;
    padding: .45rem .7rem;
    border: 1px solid var(--ts-border);
    border-radius: .55rem;
    outline: 0;
    color: var(--ts-ink);
    background: var(--ts-surface-subtle);
    font-size: .86rem;
    font-weight: 750;
}

.report-title-field input:focus {
    border-color: var(--ts-primary);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--ts-primary) 11%, transparent);
}

.rich-editor-toolbar {
    padding: .45rem .6rem;
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: .35rem;
    border-bottom: 1px solid var(--ts-border);
    background: var(--ts-surface-subtle);
}

.editor-tool-group {
    display: inline-flex;
    align-items: center;
    border: 1px solid var(--ts-border);
    border-radius: .5rem;
    overflow: hidden;
}

.editor-tool-group button {
    width: 2.15rem;
    height: 2.15rem;
    padding: 0;
    display: inline-grid;
    place-items: center;
    border: 0;
    border-right: 1px solid var(--ts-border);
    color: var(--ts-ink);
    background: var(--ts-surface);
    font-size: .9rem;
}

.editor-tool-group button:last-child {
    border-right: 0;
}

.editor-tool-group button:hover,
.editor-tool-group button:focus {
    color: var(--ts-primary);
    background: var(--ts-primary-soft);
}

.editor-block-format select {
    height: 2.15rem;
    padding: 0 1.9rem 0 .65rem;
    border: 1px solid var(--ts-border);
    border-radius: .5rem;
    color: var(--ts-ink);
    background-color: var(--ts-surface);
    font-size: .76rem;
}

.rich-editor-content {
    min-height: clamp(420px, 53vh, 650px);
    padding: 1.5rem clamp(1rem, 4vw, 3.5rem);
    overflow-wrap: anywhere;
    outline: 0;
    color: var(--ts-ink);
    background: var(--ts-surface);
    font-family: Georgia, "Times New Roman", serif;
    font-size: 1rem;
    line-height: 1.7;
}

.rich-editor-content:focus {
    box-shadow: inset 0 0 0 2px color-mix(in srgb, var(--ts-primary) 30%, transparent);
}

.rich-editor-content p {
    margin: 0 0 .65rem;
}

/* Match the legacy report typography without changing the other rich text fields. */
.report-document-panel .rich-editor-content {
    padding: 1px 16px;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 16px;
    line-height: 1.4;
}

.report-document-panel .rich-editor-content p {
    margin: 1em 0;
}

.rich-editor-content img {
    max-width: 100%;
    height: auto;
}

.rich-editor-footer {
    padding: .45rem .75rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    border-top: 1px solid var(--ts-border);
    color: var(--ts-muted);
    background: var(--ts-surface-subtle);
    font-size: .68rem;
}

.reusable-rich-editor-content { min-height: 18rem; max-height: 38rem; overflow-y: auto; }
.custom-mask-main-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
.custom-mask-exams { min-height: 18rem; }

@media (max-width: 767.98px) {
    .custom-mask-main-grid { grid-template-columns: 1fr; }
    .reusable-rich-editor-content { min-height: 15rem; }
}

.report-editor-sidebar {
    min-width: 0;
    display: grid;
    gap: .75rem;
}

.report-settings {
    overflow: visible;
}

.previous-exams {
    overflow: hidden;
}

.previous-exams-list {
    display: grid;
}

.previous-exam-item {
    padding: .75rem;
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: center;
    gap: .7rem;
    border-bottom: 1px solid var(--ts-border);
}

.previous-exam-item:last-child {
    border-bottom: 0;
}

.previous-exam-item time {
    color: var(--ts-muted);
    font-size: .7rem;
    white-space: nowrap;
}

.previous-exam-item strong,
.previous-exam-item small {
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.previous-exam-item strong {
    color: var(--ts-ink);
    font-size: .75rem;
}

.previous-exam-item small {
    margin-top: .15rem;
    color: var(--ts-success);
    font-size: .68rem;
    font-weight: 800;
}

.previous-exam-item .icon-button {
    width: 2.1rem;
    height: 2.1rem;
}

@media (max-width: 1199.98px) {
    .report-actionbar {
        align-items: flex-start;
        flex-direction: column;
    }

    .report-actionbar-actions {
        width: 100%;
        justify-content: flex-start;
    }

    .report-editor-layout {
        grid-template-columns: minmax(0, 1fr) 300px;
    }
}

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

    .report-editor-layout {
        grid-template-columns: minmax(0, 1fr);
    }
}

@media (max-width: 575.98px) {
    .report-actionbar-actions {
        flex-wrap: nowrap;
        overflow-x: auto;
        padding-bottom: .25rem;
    }

    .report-actionbar-actions .btn,
    .report-actionbar-actions .dropdown {
        flex: 0 0 auto;
    }

    .report-summary-grid {
        grid-template-columns: minmax(0, 1fr);
    }

    .rich-editor-content {
        min-height: 460px;
        padding: 1rem;
    }
}
/* Security administration */
.security-form-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:1rem}.security-span-full{grid-column:1/-1}.permission-matrix{display:grid;gap:1rem}.permission-matrix fieldset{border:1px solid var(--bs-border-color);border-radius:.75rem;padding:1rem}.permission-matrix legend{float:none;width:auto;padding:0 .4rem;margin:0;font-size:.85rem;font-weight:700;color:var(--bs-secondary-color)}.permission-row{display:grid;grid-template-columns:minmax(180px,1fr) repeat(3,minmax(120px,.6fr));gap:.75rem;align-items:center;padding:.65rem 0;border-bottom:1px solid var(--bs-border-color)}.permission-row:last-child{border-bottom:0}.permission-row label{margin:0}.permission-row label>span{display:block;font-size:.78rem;color:var(--bs-secondary-color);margin-bottom:.2rem}@media(max-width:767.98px){.security-form-grid{grid-template-columns:1fr}.security-span-full{grid-column:auto}.permission-row{grid-template-columns:1fr}.permission-row>strong{margin-bottom:.25rem}}
/* Modern security management */
.security-admin-page{--security-green:#0b7755;--security-soft:color-mix(in srgb,var(--security-green) 9%,var(--bs-body-bg));max-width:1500px;margin-inline:auto}.security-hero-card{display:flex;align-items:center;gap:1rem;padding:1.3rem 1.5rem;margin-bottom:1rem;border:1px solid color-mix(in srgb,var(--security-green) 20%,var(--bs-border-color));border-radius:1rem;background:linear-gradient(120deg,var(--security-soft),var(--bs-body-bg));box-shadow:0 10px 30px rgba(14,68,52,.06)}.security-hero-card h1{font-size:1.25rem;margin:.12rem 0}.security-hero-card p,.security-hero-card>div>span{margin:0;color:var(--bs-secondary-color);font-size:.84rem}.security-user-avatar{width:52px;height:52px;flex:0 0 52px;display:grid;place-items:center;border-radius:16px;background:var(--security-green);color:#fff;font-size:1.25rem;font-weight:800;box-shadow:0 8px 20px rgba(11,119,85,.2)}.security-user-avatar.is-group{background:linear-gradient(135deg,#0b7755,#12a371)}.security-status-dot{margin-left:auto;padding:.4rem .7rem;border-radius:999px;background:var(--security-soft);font-size:.76rem;font-weight:700;color:var(--security-green)}.security-status-dot.is-inativo,.security-status-dot.is-bloqueado{background:var(--bs-secondary-bg);color:var(--bs-secondary-color)}.security-layout{display:grid;grid-template-columns:minmax(0,1fr) 350px;gap:1rem;align-items:start}.security-main-column{min-width:0}.security-side-column{min-width:0}.sticky-security-card{position:sticky;top:1rem}.section-kicker{display:block;margin-bottom:.2rem;color:var(--security-green);font-size:.7rem;font-weight:800;letter-spacing:.08em;text-transform:uppercase}.security-link-grid{display:grid;gap:1rem}.filterable-checklist{border:1px solid var(--bs-border-color);border-radius:.85rem;background:var(--bs-body-bg);overflow:hidden}.filterable-checklist-header{display:flex;justify-content:space-between;gap:.75rem;align-items:start;padding:.85rem 1rem}.filterable-checklist-header strong,.filterable-checklist-header small{display:block}.filterable-checklist-header small{margin-top:.15rem;color:var(--bs-secondary-color);font-size:.76rem}.selection-count{white-space:nowrap;padding:.25rem .5rem;border-radius:999px;background:var(--security-soft);color:var(--security-green);font-size:.72rem;font-weight:700}.checklist-search{display:flex;align-items:center;gap:.5rem;margin:0 .75rem .5rem;padding:.55rem .7rem;border:1px solid var(--bs-border-color);border-radius:.65rem;background:var(--bs-tertiary-bg)}.checklist-search:focus-within{border-color:var(--security-green);box-shadow:0 0 0 3px color-mix(in srgb,var(--security-green) 15%,transparent)}.checklist-search input{min-width:0;flex:1;border:0;outline:0;background:transparent;color:var(--bs-body-color)}.checklist-search button{border:0;background:transparent;color:var(--bs-secondary-color);font-size:1.1rem}.checklist-actions,.permission-bulk-actions{display:flex;gap:.5rem;padding:0 .8rem .55rem}.checklist-actions button,.permission-bulk-actions button{border:0;background:transparent;color:var(--security-green);font-size:.73rem;font-weight:700;padding:0}.checklist-options{max-height:290px;overflow:auto;padding:.25rem .55rem .65rem;scrollbar-width:thin}.modern-check-card{position:relative;display:flex;align-items:center;gap:.7rem;padding:.65rem .7rem;margin:.2rem 0;border:1px solid transparent;border-radius:.7rem;cursor:pointer;transition:.15s ease}.modern-check-card:hover{background:var(--security-soft)}.modern-check-card:has(input:checked){border-color:color-mix(in srgb,var(--security-green) 25%,transparent);background:var(--security-soft)}.modern-check-card input{position:absolute;opacity:0;pointer-events:none}.modern-check-indicator{width:21px;height:21px;display:grid;place-items:center;flex:0 0 21px;border:1.5px solid var(--bs-border-color);border-radius:7px;background:var(--bs-body-bg);color:transparent}.modern-check-card input:focus-visible+.modern-check-indicator{outline:3px solid color-mix(in srgb,var(--security-green) 25%,transparent);outline-offset:2px}.modern-check-card input:checked+.modern-check-indicator{border-color:var(--security-green);background:var(--security-green);color:#fff}.modern-check-copy{min-width:0}.modern-check-copy strong,.modern-check-copy small{display:block}.modern-check-copy strong{font-size:.84rem}.modern-check-copy small{color:var(--bs-secondary-color);font-size:.72rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.checklist-empty{text-align:center;padding:1.2rem;color:var(--bs-secondary-color);font-size:.82rem}.permission-filterbar{display:grid;grid-template-columns:minmax(220px,1fr) 220px auto;gap:.75rem;align-items:center;margin-bottom:.6rem}.permission-filterbar label{display:flex;align-items:center;gap:.5rem;border:1px solid var(--bs-border-color);border-radius:.7rem;padding:.55rem .7rem;background:var(--bs-tertiary-bg)}.permission-filterbar label:focus-within{border-color:var(--security-green);box-shadow:0 0 0 3px color-mix(in srgb,var(--security-green) 15%,transparent)}.permission-filterbar input{width:100%;border:0;outline:0;background:transparent;color:var(--bs-body-color)}.permission-filterbar>span{font-size:.76rem;color:var(--bs-secondary-color);white-space:nowrap}.permission-modern-list{display:grid;gap:.45rem}.permission-modern-row{display:grid;grid-template-columns:minmax(190px,1fr) minmax(360px,1.4fr);gap:1rem;align-items:center;padding:.8rem 1rem;border:1px solid var(--bs-border-color);border-radius:.8rem;background:var(--bs-body-bg);transition:.15s ease}.permission-modern-row:hover{border-color:color-mix(in srgb,var(--security-green) 25%,var(--bs-border-color));box-shadow:0 5px 18px rgba(14,68,52,.05)}.permission-routine span,.permission-routine strong{display:block}.permission-routine span{font-size:.68rem;text-transform:uppercase;letter-spacing:.06em;color:var(--security-green);font-weight:800}.permission-routine strong{font-size:.87rem;margin-top:.12rem}.permission-actions,.permission-checks{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:.5rem}.permission-actions label>span{display:block;margin-bottom:.2rem;font-size:.68rem;color:var(--bs-secondary-color)}.permission-effect:has(option[value="PERMITIR"]:checked){border-color:#1b9b68;color:#167a54}.permission-effect:has(option[value="NEGAR"]:checked){border-color:#dc5b62;color:#b43d45}.modern-check-card.compact{margin:0;padding:.45rem .55rem;background:var(--bs-tertiary-bg)}.modern-check-card.compact .modern-check-copy strong{font-size:.76rem}.reset-invalid,.reset-success{text-align:center}.reset-invalid>div,.reset-success>div{width:64px;height:64px;display:grid;place-items:center;margin:0 auto 1rem;border-radius:20px;background:color-mix(in srgb,#0b7755 12%,transparent);color:#0b7755}.reset-invalid h2,.reset-success h1{font-size:1.5rem}.reset-invalid p,.reset-success p{color:var(--bs-secondary-color);line-height:1.6;margin-bottom:1.5rem}@media(max-width:1100px){.security-layout{grid-template-columns:1fr}.sticky-security-card{position:static}.checklist-options{max-height:240px}}@media(max-width:767.98px){.security-hero-card{align-items:flex-start;padding:1rem}.security-status-dot{display:none}.permission-filterbar{grid-template-columns:1fr}.permission-modern-row{grid-template-columns:1fr}.permission-actions,.permission-checks{grid-template-columns:1fr}.report-actionbar-actions form{width:100%}.report-actionbar-actions form .btn{width:100%}}
.appointment-form-page.security-admin-page{max-width:none;margin-inline:0}
.report-actionbar-context{display:none}
.report-actionbar-actions{margin-left:auto}
.account-password-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1rem}@media(max-width:767.98px){.account-password-grid{grid-template-columns:1fr}}

/* Medical dashboard */
.medical-dashboard-grid{display:grid;grid-template-columns:minmax(0,1.65fr) minmax(280px,.75fr);gap:1rem;margin-bottom:1rem}
.medical-dashboard-lower{align-items:start;margin-bottom:0}
.medical-chart-scroll{min-width:0;overflow-x:auto;outline:none}
.medical-chart-scroll:focus-visible{border-radius:.65rem;box-shadow:0 0 0 3px color-mix(in srgb,var(--ts-primary) 20%,transparent)}
.medical-bar-chart{display:block;width:100%;min-width:680px;height:240px}
.medical-chart-bar{fill:var(--ts-primary);opacity:.88;transition:opacity .15s ease,transform .15s ease;transform-box:fill-box;transform-origin:center bottom}
.medical-chart-column:hover .medical-chart-bar{opacity:1;transform:scaleY(1.025)}
.medical-chart-value{fill:var(--ts-ink);font-size:10px;font-weight:800}
.medical-chart-note{margin:.35rem 0 0;color:var(--ts-muted);font-size:.68rem}
.medical-category-list{display:grid;gap:1rem}
.medical-category-item>div:first-child{display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;gap:.55rem;margin-bottom:.38rem}
.medical-category-item strong{display:grid;min-width:2.4rem;height:1.7rem;padding:0 .45rem;place-items:center;border-radius:.5rem;color:var(--ts-primary);background:var(--ts-primary-soft);font-size:.66rem}
.medical-category-item span{overflow:hidden;color:var(--ts-muted);font-size:.72rem;text-overflow:ellipsis;white-space:nowrap}
.medical-category-item b{font-size:.75rem}
.medical-progress{height:.38rem;overflow:hidden;border-radius:99px;background:var(--ts-surface-subtle)}
.medical-progress i{display:block;height:100%;border-radius:inherit;background:linear-gradient(90deg,var(--ts-primary),color-mix(in srgb,var(--ts-primary) 62%,#70d6b7))}
.medical-priority-list{display:grid}
.medical-priority-item{display:grid;grid-template-columns:auto minmax(0,1fr) auto auto;align-items:center;gap:.75rem;padding:.8rem 1rem;border-top:1px solid var(--ts-border)}
.medical-priority-item:first-child{border-top:0}
.medical-modality{display:grid;min-width:2.8rem;height:2rem;padding:0 .45rem;place-items:center;border-radius:.55rem;color:var(--ts-primary);background:var(--ts-primary-soft);font-size:.68rem;font-weight:800}
.medical-priority-copy{min-width:0}
.medical-priority-copy strong,.medical-priority-copy small{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.medical-priority-copy strong{font-size:.78rem}.medical-priority-copy small{margin-top:.12rem;color:var(--ts-muted);font-size:.67rem}
.medical-empty{min-height:9rem;display:grid;place-items:center;align-content:center;gap:.55rem;color:var(--ts-muted);text-align:center}
.medical-empty span{display:grid;width:3rem;height:3rem;place-items:center;border-radius:.85rem;color:var(--ts-primary);background:var(--ts-primary-soft)}
.medical-empty p{margin:0;font-size:.75rem}
.medical-quick-actions{grid-template-columns:1fr}
@media(max-width:991.98px){.medical-dashboard-grid{grid-template-columns:1fr}.medical-categories-card{order:2}}
@media(max-width:767.98px){.medical-priority-item{grid-template-columns:auto minmax(0,1fr) auto}.medical-priority-item>.ts-badge{grid-column:2}.medical-priority-item>.btn{grid-column:3;grid-row:1/3}.medical-chart-note{line-height:1.45}}
@media(max-width:420px){.medical-priority-item{gap:.55rem;padding:.75rem}.medical-priority-item>.ts-badge{justify-self:start}.medical-stats .stat-card{min-height:7.4rem}}

/* OIT keeps the legacy grouping and field order within the shared admin theme. */
.oit-tabs { margin-bottom: 1rem; flex-wrap: nowrap; overflow-x: auto; }
.oit-tabs .nav-link { white-space: nowrap; color: var(--ts-ink); }
.oit-grid { display: grid; gap: 1rem; align-items: start; }
.oit-two { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.oit-three { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.oit-section { margin-bottom: 1rem; min-width: 0; }
.oit-section > h2 { font-size: .875rem; font-weight: 700; padding: .85rem 1rem; margin: 0; border-bottom: 1px solid var(--ts-border); }
.oit-section-body, .oit-section > .oit-grid { padding: 1rem; }
.oit-field { min-width: 0; margin: 0 0 1.5rem; }
.oit-field:last-child { margin-bottom: 0; }
.oit-field legend { font-size: .85rem; font-weight: 600; margin-bottom: .5rem; float: none; width: auto; }
.oit-field input[type=text] { max-width: 22rem; }
.oit-choices { display: flex; flex-wrap: wrap; gap: .5rem .8rem; }
.oit-choice { display: inline-flex; gap: .35rem; align-items: center; min-height: 1.7rem; cursor: pointer; font-size: .85rem; }
.oit-choice .form-check-input { margin: 0; flex-shrink: 0; }
.oit-shapes { display: grid; grid-template-columns: repeat(2, max-content); }
.oit-profusion { display: grid; grid-template-columns: repeat(3, max-content); }
.oit-help { margin: 1.5rem 0 0; font-size: .8rem; }
@media (max-width: 767px) { .oit-three, .oit-two { grid-template-columns: minmax(0, 1fr); } .oit-section-body .oit-two { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

.oit-tabs .nav-link.active { color: var(--ts-primary-strong); background: var(--ts-surface); border-color: var(--ts-border) var(--ts-border) var(--ts-surface); font-weight: 700; }
.oit-tabs .nav-link:focus-visible { outline: 2px solid var(--ts-primary); outline-offset: -2px; }

@media (min-width: 768px) {
    .oit-editor .report-summary-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
    .oit-editor .report-summary-grid > div { grid-column: auto; }
    .oit-editor .report-summary-grid > div:nth-child(1) { order: 1; }
    .oit-editor .report-summary-grid > div:nth-child(2) { order: 2; }
    .oit-editor .report-summary-grid > div:nth-child(7) { order: 3; }
    .oit-editor .report-summary-grid > div:nth-child(8) { order: 4; }
    .oit-editor .report-summary-grid > div:nth-child(3) { order: 5; }
    .oit-editor .report-summary-grid > div:nth-child(4) { order: 6; }
    .oit-editor .report-summary-grid > div:nth-child(5) { order: 7; }
    .oit-editor .report-summary-grid > div:nth-child(6) { order: 8; }
}
.worklist-download-selection {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    flex-wrap: wrap;
    gap: .5rem 1rem;
    padding: .75rem 1rem;
    border-top: 1px solid var(--ts-border);
}
.worklist-download-selection .btn {
    white-space: normal;
    text-align: left;
}
.row-actions a.download-is-preparing {
    width: auto;
    display: inline-flex;
    align-items: center;
    gap: .35rem;
    padding-inline: .5rem;
    white-space: nowrap;
}