/*
    Global styles of the web front end. Colors come from the DevExpress Fluent design tokens (--dxds-*), so light/dark
    mode and the accent palettes picked in the account menu apply to the application's own elements too.
    View-specific styles live next to their components (*.razor.css).
*/

:root {
    --app-surface: var(--dxds-color-surface-neutral-default-rest, #fff);
    --app-surface-subdued: var(--dxds-color-surface-neutral-subdued-rest, #f5f5f5);
    --app-surface-hover: var(--dxds-color-surface-neutral-default-hovered, #f0f0f0);
    --app-surface-selected: var(--dxds-color-surface-neutral-default-selected, #e6e6e6);
    --app-text: var(--dxds-color-content-neutral-default-rest, #242424);
    --app-text-muted: var(--dxds-color-content-neutral-subdued-rest, #616161);
    --app-border: var(--dxds-color-border-neutral-default-rest, #d1d1d1);
    --app-separator: color-mix(in srgb, var(--app-border) 70%, transparent);
    --app-accent: var(--dxds-color-content-primary-default-rest, #0f6cbd);
    --app-accent-surface: var(--dxds-color-surface-primary-default-rest, #0f6cbd);
    --app-accent-subdued: var(--dxds-color-surface-primary-subdued-rest, #ebf3fc);
    --app-on-accent: #fff;
    --app-danger: var(--dxds-color-content-danger-default-rest, #c50f1f);
    --app-danger-surface: var(--dxds-color-surface-danger-subdued-rest, #fdf3f4);
    --app-success: var(--dxds-color-content-success-default-rest, #107c10);
    --app-warning: var(--dxds-color-content-warning-default-rest, #bc4b09);
    --app-highlight: #ffd54f;
    --app-radius: 6px;
    --app-font: var(--dxds-font-family-segoe-ui, "Segoe UI"), system-ui, -apple-system, sans-serif;
    --app-tooth-completed: #3c925c;
    --app-tooth-planned: #e23642;
    /* DentistaSync wordmark: navy "Dentista", cyan-to-blue "Sync" (sampled from the logo). */
    --brand-ink: #0b2559;
    --brand-sync-start: #12c2dc;
    --brand-sync-end: #0a6fd4;
    color-scheme: light;
}

[data-theme="dark"] {
    --app-tooth-completed: #53ba7a;
    --app-tooth-planned: #fc6d77;
    --brand-ink: #eaf1fb;
    --brand-sync-start: #3fdcef;
    --brand-sync-end: #4ea4ff;
    color-scheme: dark;
}

/* ---------- Base ---------- */

html, body {
    height: 100%;
    margin: 0;
}

body {
    font-family: var(--app-font);
    font-size: 14px;
    color: var(--app-text);
    background: var(--app-surface-subdued);
}

*, *::before, *::after {
    box-sizing: border-box;
}

h1, h2, h3 {
    margin: 0;
    font-weight: 600;
}

h1:focus {
    outline: none;
}

a {
    color: var(--app-accent);
}

code {
    font-size: 12px;
}

.muted {
    color: var(--app-text-muted);
}

.small {
    font-size: 12px;
}

.section-caption {
    font-size: 11px;
    font-weight: 600;
    letter-spacing: .04em;
    text-transform: uppercase;
    color: var(--app-text-muted);
}

.search-match {
    background: var(--app-highlight);
    color: #000;
    border-radius: 2px;
}

.visually-hidden {
    position: absolute !important;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
}

/* ---------- Icons: single-color SVGs drawn in the current text color (follow the theme) ---------- */

.app-icon {
    display: inline-block;
    flex-shrink: 0;
    width: 16px;
    height: 16px;
    vertical-align: middle;
    background-color: currentColor;
    -webkit-mask: var(--app-icon) center / contain no-repeat;
    mask: var(--app-icon) center / contain no-repeat;
}

.icon-add { --app-icon: url("../images/add.svg"); }
.icon-add-patient { --app-icon: url("../images/AddPatient.svg"); }
.icon-edit { --app-icon: url("../images/Edit.svg"); }
.icon-edit-patient { --app-icon: url("../images/EditPatient.svg"); }
.icon-delete { --app-icon: url("../images/Delete.svg"); }
.icon-delete-note { --app-icon: url("../images/DeleteNote.svg"); }
.icon-calendar { --app-icon: url("../images/calendar.svg"); }
.icon-treatment-calendar { --app-icon: url("../images/TreatmentCalendar.svg"); }
.icon-patients { --app-icon: url("../images/Patients.svg"); }
.icon-analytics { --app-icon: url("../images/Chart.svg"); }
.icon-employees { --app-icon: url("../images/people.svg"); }
.icon-lock { --app-icon: url("../images/Lock.svg"); }
.icon-login { --app-icon: url("../images/Login.svg"); }
.icon-dark-theme { --app-icon: url("../images/DarkTheme.svg"); }
.icon-form { --app-icon: url("../images/FormIcon.svg"); }

.icon-group-diagnosis { --app-icon: url("../images/Diagnosis.svg"); }
.icon-group-hygiene { --app-icon: url("../images/Hygiene.svg"); }
.icon-group-whitening { --app-icon: url("../images/Whitening.svg"); }
.icon-group-orthodontics { --app-icon: url("../images/Orthodontics.svg"); }
.icon-group-implantation { --app-icon: url("../images/Implantation.svg"); }
.icon-group-restoration { --app-icon: url("../images/Restoration.svg"); }
.icon-group-rootcanal { --app-icon: url("../images/RootCanal.svg"); }
.icon-group-prosthetics { --app-icon: url("../images/Prosthetics.svg"); }
.icon-group-surgery { --app-icon: url("../images/Surgery.svg"); }

.icon-refresh { --app-icon: url("../icons/refresh.svg"); }
.icon-phone { --app-icon: url("../icons/phone.svg"); }
.icon-menu { --app-icon: url("../icons/menu.svg"); }
.icon-chevron-left { --app-icon: url("../icons/chevron-left.svg"); }
.icon-chevron-right { --app-icon: url("../icons/chevron-right.svg"); }
.icon-chevron-down { --app-icon: url("../icons/chevron-down.svg"); }
.icon-check { --app-icon: url("../icons/check.svg"); }
.icon-close { --app-icon: url("../icons/close.svg"); }
.icon-plus { --app-icon: url("../icons/plus.svg"); }
.icon-search { --app-icon: url("../icons/search.svg"); }
.icon-navigation-pane { --app-icon: url("../icons/navigation-pane.svg"); }
.icon-user { --app-icon: url("../icons/user.svg"); }
.icon-print { --app-icon: url("../icons/print.svg"); }
.icon-today { --app-icon: url("../icons/today.svg"); }
.icon-view-day { --app-icon: url("../icons/view-day.svg"); }
.icon-view-work-week { --app-icon: url("../icons/view-work-week.svg"); }
.icon-view-week { --app-icon: url("../icons/view-week.svg"); }
.icon-view-month { --app-icon: url("../icons/view-month.svg"); }
.icon-view-timeline { --app-icon: url("../icons/view-timeline.svg"); }
.icon-document { --app-icon: url("../icons/document.svg"); }
.icon-upload { --app-icon: url("../icons/upload.svg"); }
.icon-invoice { --app-icon: url("../icons/invoice.svg"); }
.icon-key { --app-icon: url("../icons/key.svg"); }
.icon-info { --app-icon: url("../icons/info.svg"); }
.icon-tooth { --app-icon: url("../icons/tooth.svg"); }
.icon-plan { --app-icon: url("../icons/plan.svg"); }
.icon-move-back { --app-icon: url("../icons/move-back.svg"); }

.icon-sun { --app-icon: url("../icons/sun.svg"); }
.icon-moon { --app-icon: url("../icons/moon.svg"); }
.icon-sign-out { --app-icon: url("../icons/sign-out.svg"); }
.icon-palette { --app-icon: url("../icons/palette.svg"); }
.icon-branch { --app-icon: url("../icons/branch.svg"); }
.icon-settings { --app-icon: url("../icons/settings.svg"); }
.icon-shield { --app-icon: url("../icons/shield.svg"); }
.icon-tag { --app-icon: url("../icons/tag.svg"); }
.icon-briefcase { --app-icon: url("../icons/briefcase.svg"); }
.icon-list { --app-icon: url("../icons/list.svg"); }
.icon-unlock { --app-icon: url("../icons/unlock.svg"); }
.icon-user-plus { --app-icon: url("../icons/user-plus.svg"); }
.icon-mail { --app-icon: url("../icons/mail.svg"); }

/* Tinted page actions (as the desktop ribbon's colored glyphs). */
.page-toolbar .icon-add-patient, .page-toolbar .icon-edit, .page-toolbar .icon-edit-patient { color: var(--app-accent); }
.page-action-danger .app-icon { color: var(--app-danger); }

/* ---------- Shell ---------- */

.shell {
    display: grid;
    /* minmax(0, 1fr): wide content (the pivot table) scrolls inside its view instead of widening the page. */
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: auto minmax(0, 1fr);
    height: 100vh;
}

/* Application header: navigation toggle, brand, theme switch and account menu. */

.app-header {
    position: relative;
    z-index: 2;
    display: flex;
    align-items: center;
    gap: 6px;
    height: 56px;
    padding-right: 12px;
    background: var(--app-surface);
    border-bottom: 1px solid var(--app-separator);
    box-shadow: 0 1px 4px rgba(0, 0, 0, .04);
}

.header-icon-button {
    display: inline-flex;
    flex-shrink: 0;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: transparent;
    color: var(--app-text);
    cursor: pointer;
}

.header-icon-button:hover {
    background: var(--app-surface-hover);
}

.header-icon-button:focus-visible {
    outline: 2px solid var(--app-accent);
    outline-offset: 1px;
}

.header-icon-button .app-icon {
    width: 20px;
    height: 20px;
}

/* Centered over the navigation rail. */
.app-header-toggle {
    margin-left: 19px;
}

.app-header-spacer {
    flex: 1;
}

/* Brand: the tooth mark and the "DentistaSync" wordmark (set in text so it follows the theme). */

.brand {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    margin-left: 10px;
    padding: 4px 8px 4px 4px;
    border-radius: var(--app-radius);
    text-decoration: none;
}

.brand:focus-visible {
    outline: 2px solid var(--app-accent);
}

.brand-mark {
    width: 34px;
    height: 34px;
}

.brand-name {
    color: var(--brand-ink);
    font-size: 21px;
    font-weight: 800;
    letter-spacing: -.02em;
    line-height: 1;
    white-space: nowrap;
}

.brand-name-accent {
    background: linear-gradient(90deg, var(--brand-sync-start), var(--brand-sync-end));
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}

/* Account menu: the signed-in user's button and its flyout. */

.account-button {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    height: 40px;
    margin-left: 4px;
    padding: 0 10px 0 5px;
    border: 1px solid transparent;
    border-radius: 999px;
    background: transparent;
    color: var(--app-text);
    font: inherit;
    cursor: pointer;
}

.account-button:hover, .account-button[aria-expanded="true"] {
    background: var(--app-surface-hover);
    border-color: var(--app-separator);
}

.account-button:focus-visible {
    outline: 2px solid var(--app-accent);
    outline-offset: 1px;
}

.account-button-name {
    max-width: 180px;
    overflow: hidden;
    font-size: 13px;
    font-weight: 600;
    white-space: nowrap;
    text-overflow: ellipsis;
}

.account-button .icon-chevron-down {
    width: 14px;
    height: 14px;
    color: var(--app-text-muted);
}

.account-panel {
    display: flex;
    flex-direction: column;
    padding: 8px;
}

.account-identity {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 6px;
    padding: 8px 8px 14px;
    border-bottom: 1px solid var(--app-separator);
}

.account-identity-text {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}

.account-identity-text strong {
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}

/* Menu items are DxButtons laid out as full-width rows. */
.account-item.dxbl-btn {
    justify-content: flex-start;
    width: 100%;
    gap: 12px;
}

.account-section-caption .app-icon {
    width: 18px;
    height: 18px;
    color: var(--app-text-muted);
}

.account-section {
    margin: 6px 0;
    padding: 12px 10px 14px;
    border-top: 1px solid var(--app-separator);
    border-bottom: 1px solid var(--app-separator);
}

.account-section-caption {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 12px;
    font-size: 14px;
    font-weight: 400;
}

/* Accent colors: a DevExpress color palette, indented under its caption. */
.accent-palette {
    margin-left: 30px;
}

/* Branch choice: the business over the branch the employee works at (next to the brand). */

.branch-button {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    max-width: 320px;
    height: 40px;
    margin-left: 12px;
    padding: 0 10px;
    border: 1px solid var(--app-separator);
    border-radius: var(--app-radius);
    background: transparent;
    color: var(--app-text);
    font: inherit;
}

.branch-button:hover, .branch-button[aria-expanded="true"] {
    background: var(--app-surface-hover);
}

.branch-button:focus-visible {
    outline: 2px solid var(--app-accent);
    outline-offset: 1px;
}

.branch-button-single, .branch-button-single:hover {
    border-color: transparent;
    background: transparent;
    cursor: default;
}

.branch-button .icon-branch {
    width: 18px;
    height: 18px;
    color: var(--app-accent);
}

.branch-button .icon-chevron-down {
    width: 14px;
    height: 14px;
    color: var(--app-text-muted);
}

.branch-button-text {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    min-width: 0;
    line-height: 1.2;
}

.branch-button-business, .branch-button-name {
    max-width: 240px;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}

.branch-button-business {
    color: var(--app-text-muted);
    font-size: 11px;
}

.branch-button-name {
    font-size: 13px;
    font-weight: 600;
}

.branch-panel {
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding: 8px;
}

.branch-panel-caption {
    margin: 4px 10px 8px;
    color: var(--app-text-muted);
    font-size: 12px;
    font-weight: 600;
    letter-spacing: .04em;
    text-transform: uppercase;
}

.branch-option {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    width: 100%;
    padding: 8px 10px;
    border: 0;
    border-radius: var(--app-radius);
    background: transparent;
    color: var(--app-text);
    font: inherit;
    text-align: left;
    cursor: pointer;
}

.branch-option:hover {
    background: var(--app-surface-hover);
}

.branch-option:focus-visible {
    outline: 2px solid var(--app-accent);
    outline-offset: -2px;
}

.branch-option.current {
    color: var(--app-accent);
}

.branch-option-text {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}

.branch-option .icon-check {
    width: 16px;
    height: 16px;
}

@media (max-width: 720px) {
    .account-button-name, .app-header .brand-name {
        display: none;
    }
    .branch-button-business {
        display: none;
    }
}

.shell-body {
    display: flex;
    min-height: 0;
}

.shell-content {
    position: relative;
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    overflow: auto;
    padding: 12px 16px 16px;
}

/* Navigation rail (as in the original demo): icon over caption, the active module filled with the accent color. */

.nav-pane {
    display: flex;
    flex-direction: column;
    width: 78px;
    flex-shrink: 0;
    background: var(--app-surface);
    border-right: 1px solid var(--app-separator);
    overflow-y: auto;
    overflow-x: hidden;
}

.nav-pane.minimized {
    width: 56px;
}

.nav-items {
    margin: 0;
    padding: 0;
    list-style: none;
}

.nav-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 5px;
    padding: 11px 4px 9px;
    color: var(--app-text);
    font-size: 12px;
    line-height: 1.2;
    text-align: center;
    text-decoration: none;
}

.nav-item:hover {
    background: var(--app-surface-hover);
}

.nav-item.active {
    background: var(--app-accent-surface);
    color: var(--app-on-accent);
}

.nav-icon {
    width: 24px;
    height: 24px;
}

.nav-pane.minimized .nav-item {
    padding: 13px 0;
}

.nav-pane.minimized .nav-text {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
}

/* "My Profile" is pinned at the bottom, below a separator. */
.nav-profile {
    margin-top: auto;
    border-top: 1px solid var(--app-separator);
}

.nav-profile.active .nav-avatar {
    box-shadow: 0 0 0 2px var(--app-on-accent);
}

/* Page header: the page title (breadcrumb) and its status on the left, the page's actions on the right. */

.page-header {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px 16px;
    min-height: 44px;
    margin-bottom: 12px;
}

.page-heading {
    display: flex;
    flex: 0 1 auto;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px 14px;
    min-width: 0;
}

/* The pages separate their facts with runs of spaces ("PATIENTS: 120   SHOWN: 20"). */
.page-status {
    padding: 3px 10px;
    border: 1px solid var(--app-separator);
    border-radius: 999px;
    background: var(--app-surface);
    color: var(--app-text-muted);
    font-size: 11px;
    font-weight: 600;
    letter-spacing: .03em;
    white-space: pre;
}

/* The toolbar takes the rest of the row (its items are right-aligned) so it only collapses when space runs out. */
.page-toolbar {
    flex: 1 1 240px;
    min-width: 0;
    background: transparent;
}

/* ---------- Common widgets ---------- */

/* Link-style DxButtons: accent text, underlined on hover only (on a focused grid row they take the row's text color). */
.dxbl-btn.dxbl-btn-link {
    color: var(--app-accent);
    text-decoration: none;
}

.dxbl-btn.dxbl-btn-link:hover {
    text-decoration: underline;
}

.dxbl-grid-focused-row .dxbl-btn.dxbl-btn-link {
    color: inherit;
}

/* Inline links inside grid cells and panels (phone numbers, visit dates, documents) sit on the text line. */
.phone-link.dxbl-btn,
.document-open.dxbl-btn,
.section-link.dxbl-btn {
    min-height: 0;
    padding: 0;
    justify-content: flex-start;
}

/* Rail entries fill the rail's width: the focus ring is drawn inside, in white on the active (accent) entry. */
.nav-item:focus-visible {
    outline: 2px solid var(--app-accent);
    outline-offset: -3px;
}

.nav-item.active:focus-visible {
    outline-color: var(--app-on-accent);
}

.primary-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 36px;
    padding: 0 16px;
    border: 0;
    border-radius: var(--app-radius);
    background: var(--app-accent-surface);
    color: var(--app-on-accent);
    font: inherit;
    font-weight: 600;
    text-decoration: none;
    cursor: pointer;
}

.primary-button:hover:not(:disabled) {
    filter: brightness(1.08);
}

.primary-button:focus-visible,
.secondary-button:focus-visible {
    outline: 2px solid var(--app-accent);
    outline-offset: 2px;
}

/* Waiting for something (the sign-in's captcha): visibly unavailable, still readable. */
.primary-button:disabled {
    opacity: .55;
    cursor: not-allowed;
}

.card {
    background: var(--app-surface);
    border: 1px solid var(--app-separator);
    border-radius: 8px;
}

.empty-state {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 48px 16px;
    text-align: center;
    color: var(--app-text-muted);
}

.empty-state h1 {
    color: var(--app-text);
    font-size: 20px;
}

.empty-state-icon {
    width: 40px;
    height: 40px;
}

.loading-indicator {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 32px;
    color: var(--app-text-muted);
}

/* Breadcrumb / page title (in the page header) */

.breadcrumbs {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px;
    min-width: 0;
}

.breadcrumb-link {
    color: var(--app-text-muted);
    font-size: 15px;
    font-weight: 600;
    text-decoration: none;
}

.breadcrumb-link:hover {
    color: var(--app-accent);
    text-decoration: underline;
}

.breadcrumb-current {
    font-size: 20px;
    font-weight: 600;
    line-height: 1.3;
}

.breadcrumb-separator {
    width: 14px;
    height: 14px;
    color: var(--app-text-muted);
}

/* Avatars */

.avatar {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    border-radius: 50%;
    object-fit: cover;
    color: #fff;
    font-weight: 600;
    line-height: 1;
    user-select: none;
}

/* Payment status pill */

.status-pill {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 2px 10px;
    border-radius: 999px;
    font-size: 11.5px;
    font-weight: 600;
    white-space: nowrap;
    color: var(--app-warning);
    background: color-mix(in srgb, currentColor 12%, transparent);
}

.status-dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: currentColor;
}

.status-pill.status-success { color: var(--app-success); }
.status-pill.status-warning { color: #c8691f; }
.status-pill.status-neutral { color: var(--app-text-muted); }
.status-pill.status-danger { color: var(--app-danger); }
.status-pill.status-accent { color: var(--app-accent); }

/* On the accent background of a focused grid row the status colors would be unreadable. */
.dxbl-grid-focused-row .status-pill { color: inherit; }

/* Dialogs */

.app-dialog .dxbl-modal-body {
    padding-top: 12px;
}

.dialog-footer {
    display: flex;
    align-items: center;
    gap: 8px;
    width: 100%;
}

.dialog-footer-spacer {
    flex: 1;
}

/* ---------- Account pages (static) ---------- */

.account-page {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 24px;
    padding: 24px;
    background: radial-gradient(circle at 20% 10%, var(--app-accent-subdued), transparent 60%), var(--app-surface-subdued);
}

.account-brand {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
}

.account-brand-mark {
    width: 72px;
    height: 72px;
}

.account-brand-name {
    font-size: 30px;
}

.account-brand-tagline {
    color: var(--app-text-muted);
}

.account-card {
    width: min(420px, 100%);
    padding: 24px;
    background: var(--app-surface);
    border: 1px solid var(--app-separator);
    border-radius: 10px;
    box-shadow: 0 8px 28px rgba(0, 0, 0, .08);
}

.account-card h1 {
    font-size: 20px;
    margin-bottom: 8px;
}

.login-header {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 16px;
}

.login-header p {
    margin: 2px 0 0;
}

.login-header h1:last-child {
    margin-bottom: 0;
}

.login-icon {
    width: 40px;
    height: 40px;
    color: var(--app-accent);
}

.login-form {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.form-label {
    margin-top: 6px;
    font-weight: 600;
}

.form-input {
    height: 34px;
    padding: 0 10px;
    border: 1px solid var(--app-border);
    border-radius: 4px;
    background: var(--app-surface);
    color: var(--app-text);
    font: inherit;
}

.form-input:focus {
    outline: 2px solid var(--app-accent);
    outline-offset: -1px;
}

.form-check {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 6px 0 4px;
}

.form-error {
    color: var(--app-danger);
}

/* An outcome the page reports before its form ("Your password was changed"). */
.form-status {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    margin-bottom: 12px;
    color: var(--app-success);
}

.form-status .app-icon {
    margin-top: 2px;
}

.login-form .primary-button {
    margin-top: 10px;
}

/* A secondary way on under an account form ("Forgot your password?", "Back to Log In"). */
.account-back-link {
    align-self: center;
    /* The padding makes a 44px tall target for touch; the text keeps its 12px distance from the button. */
    padding: 12px 8px;
    margin-bottom: -12px;
    text-underline-offset: 2px;
}

/* A step whose form is done ("Check Your Email"): its explanation, then the way on. */
.account-message {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.account-message p {
    margin: 0;
}

/* Sign-in, first step: the captcha keeps its room while it loads, so the button does not jump. */
.login-captcha {
    min-height: 65px;
    margin-top: 12px;
}

.login-notice {
    margin: 0 0 4px;
    padding: 8px 10px;
    border-radius: var(--app-radius);
    background: var(--app-accent-subdued);
    color: var(--app-text);
}

/* Sign-in, second step: who is signing in, with the way back to the first step. */
.login-identity {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 4px;
    padding: 8px 12px;
    border: 1px solid var(--app-border);
    border-radius: var(--app-radius);
    background: var(--app-surface-subdued);
}

.login-identity .app-icon {
    color: var(--app-text-muted);
}

.login-identity-name {
    flex: 1;
    min-width: 0;
    overflow: hidden;
    font-weight: 600;
    white-space: nowrap;
    text-overflow: ellipsis;
}

.login-identity-change {
    font-weight: 600;
    text-underline-offset: 3px;
}

.login-identity-change:focus-visible {
    outline: 2px solid var(--app-accent);
    outline-offset: 2px;
    border-radius: 2px;
}

/* Phones: room for the captcha, which needs 300px. */
@media (max-width: 400px) {
    .account-page {
        padding: 16px 12px;
    }

    .account-card {
        padding: 16px;
    }
}

/* "Find Your Clinic": the clinic's address with the platform's domain after it. */
.clinic-address {
    display: flex;
    align-items: center;
    gap: 6px;
}

.clinic-address .form-input {
    flex: 1;
    min-width: 0;
}

.clinic-address-domain {
    color: var(--app-text-muted);
    white-space: nowrap;
}

.login-link-button {
    justify-content: center;
    margin-top: 8px;
    text-decoration: none;
}

.secondary-button {
    display: inline-flex;
    align-items: center;
    min-height: 36px;
    padding: 0 16px;
    border: 1px solid var(--app-border);
    border-radius: var(--app-radius);
    background: var(--app-surface);
    color: var(--app-text);
    font: inherit;
    font-weight: 600;
    cursor: pointer;
}

.secondary-button:hover {
    border-color: var(--app-accent);
    color: var(--app-accent);
}

/* ---------- List screens (Patients, Employees) ---------- */

.list-toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 10px;
}

.list-search {
    width: 320px;
    flex-shrink: 0;
}

/* Quick filters: DxTabs whose captions carry the matching patient count. */
.quick-filters.dxbl-tabs {
    flex: 0 1 auto;
    min-width: 0;
}

.quick-filter-count {
    margin-left: 6px;
    min-width: 22px;
    padding: 1px 7px;
    border-radius: 9px;
    background: color-mix(in srgb, var(--app-text-muted) 18%, transparent);
    font-size: 11px;
    font-weight: 600;
    text-align: center;
}

.list-body {
    flex: 1;
    min-height: 0;
    display: flex;
    gap: 12px;
}

/*
    Splitters (DxSplitter: Patients list | details, patient card form | timeline). Each pane holds one card that fills
    it; the thin separator is the only gap between them, with DevExpress's grip and collapse button.
*/
.app-splitter.dxbl-splitter {
    flex: 1;
    min-height: 0;
    gap: 0;
    height: auto;
    border: 0;
    background: transparent;
}

.app-splitter > .dxbl-splitter-separator {
    background: transparent;
}

.app-splitter > .dxbl-splitter-separator:hover,
.app-splitter > .dxbl-splitter-separator:focus-visible {
    background: color-mix(in srgb, var(--app-accent) 12%, transparent);
}

/* DevExpress pads pane content by 12px; the cards already have their own padding, so the panes do not. */
.app-splitter .dxbl-splitter-pane-content.app-splitter-pane {
    display: flex;
    min-width: 0;
    min-height: 0;
    padding: 0;
    overflow: hidden;
}

.app-splitter-pane > * {
    flex: 1;
    min-width: 0;
}

.list-grid {
    flex: 1;
    min-width: 0;
    display: flex;
    overflow: hidden;
}

.list-grid > .dxbl-grid {
    flex: 1;
    border: 0;
}

.patient-cell {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    min-width: 0;
}

.patient-cell strong {
    overflow: hidden;
    text-overflow: ellipsis;
}

.visit-date {
    display: inline-flex;
    flex-direction: column;
    line-height: 1.25;
}

.visit-date small {
    font-size: 11px;
    color: var(--app-text-muted);
}

.visit-date-empty {
    color: var(--app-text-muted);
}

/* ---------- Dialog forms ---------- */

.dialog-form {
    display: flex;
    flex-direction: column;
}

.field-label {
    display: block;
    margin: 10px 0 4px;
    font-weight: 600;
}

.field-label .required {
    margin-left: 3px;
    color: var(--app-danger);
}

/* ValidationMessage output is rendered by a child component, so this rule cannot be scoped to a form's .razor.css. */
.field-error {
    display: block;
    min-height: 0;
    font-size: 12px;
    color: var(--app-danger);
}

.dialog-form-actions {
    margin-top: 18px;
}

.field-row {
    display: flex;
    gap: 12px;
}

.field-row > .field {
    flex: 1;
    min-width: 0;
}

.tab-body {
    padding: 4px 2px 8px;
}

.procedure-totals {
    margin-top: 6px;
    text-align: right;
}

.invoice-groups {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
}

.invoice-group {
    margin: 0;
    padding: 6px 12px 10px;
    border: 1px solid var(--app-separator);
    border-radius: var(--app-radius);
}

.invoice-group legend {
    padding: 0 4px;
    font-weight: 600;
}

.invoice-group dl {
    display: grid;
    grid-template-columns: 90px 1fr;
    gap: 4px 8px;
    margin: 0;
}

.invoice-group dt {
    color: var(--app-text-muted);
}

.invoice-group dd {
    margin: 0;
    font-weight: 600;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.grand-total input {
    font-weight: 600;
}

.report-dialog .dxbl-modal-body {
    padding: 0;
}

.report-viewer {
    height: 100%;
}

.prompt-text {
    margin: 0;
}

/* ---------- Patient card ---------- */

.patient-card {
    flex: 1;
    min-height: 0;
    display: flex;
    flex-direction: column;
}

/*
    The card's tabs take the rest of the page and give the active tab a definite height, so its splitter, chart and
    notes fill it (and scroll inside) instead of growing the page.
*/
.patient-card > .card-tabs {
    display: flex;
    flex: 1;
    flex-direction: column;
    min-height: 0;
}

.card-tabs > .dxbl-tabs-content-panel {
    flex: 1;
    min-height: 0;
}

.card-tabs > .dxbl-tabs-content-panel > .dxbl-tabs-content.dxbl-active {
    display: flex;
    flex-direction: column;
    min-width: 0;
    min-height: 0;
}

.tab-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 18px;
    height: 18px;
    margin-left: 6px;
    padding: 0 5px;
    border-radius: 9px;
    background: var(--app-danger);
    color: #fff;
    font-size: 11px;
    font-weight: 600;
}

/* ---------- Analytics ---------- */

.pivot-view {
    margin-top: 10px;
    padding: 8px;
    height: calc(100vh - 230px);
    min-height: 360px;
}

.pivot-view .invoice-pivot {
    height: 100%;
}

/* ---------- Administration ---------- */

/* The sections of the administration area, as tabs under the page header. */
.admin-tabs {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    margin-bottom: 12px;
    border-bottom: 1px solid var(--app-separator);
}

.admin-tab {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-bottom: -1px;
    padding: 8px 14px;
    border-bottom: 2px solid transparent;
    color: var(--app-text-muted);
    font-weight: 600;
    text-decoration: none;
    white-space: nowrap;
}

.admin-tab:hover {
    color: var(--app-text);
}

.admin-tab.active {
    border-bottom-color: var(--app-accent);
    color: var(--app-accent);
}

.admin-tab:focus-visible {
    outline: 2px solid var(--app-accent);
    outline-offset: -2px;
}

.admin-row-icon {
    width: 18px;
    height: 18px;
    color: var(--app-accent);
}

.dxbl-grid-focused-row .admin-row-icon,
.dxbl-grid-focused-row .muted {
    color: inherit;
}

.admin-page {
    flex: 1;
    min-height: 0;
    overflow: auto;
    padding: 16px 24px 20px;
}

.admin-form {
    max-width: 1100px;
}

.admin-form .form-actions {
    display: flex;
    justify-content: flex-end;
    margin-top: 14px;
}

.business-address {
    display: flex;
    align-items: center;
    gap: 8px;
    min-height: 34px;
}

.business-address .app-icon {
    color: var(--app-accent);
}

/* Lists of check boxes (roles, branches, permissions): one per line, with a muted explanation under it. */
.check-group {
    margin: 8px 0 0;
    padding: 0;
    border: 0;
}

.check-item {
    display: flex;
    flex-direction: column;
    gap: 1px;
    padding: 5px 0;
}

.check-item small {
    margin-left: 26px;
}

.access-fields {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 4px 20px;
    margin-top: 6px;
}

.access-active {
    margin-top: 12px;
}

.password-field {
    display: flex;
    gap: 6px;
}

.password-field .dxbl-text-edit {
    flex: 1;
    font-family: ui-monospace, Consolas, monospace;
}

.field-row > .field-narrow {
    flex: 0 0 110px;
}

/* Price list: the procedure's group color, and a branch's own price next to it. */
.price-group-dot {
    width: 10px;
    height: 10px;
    flex-shrink: 0;
    border-radius: 50%;
}

.branch-price-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    min-height: 40px;
}

.branch-price-edit {
    width: 160px;
    text-align: right;
}

@media (max-width: 720px) {
    .access-fields {
        grid-template-columns: 1fr;
    }
}