/* Bootstrap re-pointed at the nocturne.css tokens, so its components follow both themes.
   Loads after nocturne.css and after Bootstrap. */

html, body {
    font-family: var(--font-body);
    /* background-color, not the `background` shorthand: this file loads after
       nocturne.css, and the shorthand would reset background-image. */
    background-color: var(--color-bg);
    color: var(--color-text);
}

a, .btn-link {
    color: var(--color-accent);
    text-decoration: none;
}

a:hover, .btn-link:hover {
    color: var(--color-link-hover);
}

.btn-primary {
    color: var(--color-on-accent);
    background-color: var(--color-accent);
    border: 1px solid var(--color-accent);
    border-radius: var(--radius-md);
}

.btn-primary:hover {
    color: var(--color-on-accent);
    background-color: color-mix(in srgb, var(--color-accent) 88%, #000);
    border-color: color-mix(in srgb, var(--color-accent) 88%, #000);
}

.btn-primary:active {
    background-color: color-mix(in srgb, var(--color-accent) 78%, #000);
}

.btn:focus, .btn:active:focus, .btn-link.nav-link:focus, .form-control:focus, .form-check-input:focus {
    box-shadow: none;
    outline: 2px solid var(--color-accent);
    outline-offset: 2px;
}

.btn-outline-primary {
    border-color: var(--color-accent);
    color: var(--color-accent);
}

/* Buttons: consistent height/line-height across sizes. */
.btn {
    box-sizing: border-box;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    line-height: 1.4;
    padding: 0.65rem 1.1rem;
    font-size: 0.95rem;
    border-radius: var(--radius-md);
}

.btn-lg {
    padding: 0.85rem 1.4rem;
    font-size: 1.05rem;
}

.btn-sm {
    padding: 0.5rem 0.9rem;
    font-size: 0.875rem;
    border-radius: var(--radius-sm);
}

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

.form-control,
.form-select {
    background-color: var(--color-surface);
    border: 1px solid var(--color-divider);
    color: var(--color-text);
}

.form-control:focus,
.form-select:focus {
    background-color: var(--color-surface);
    color: var(--color-text);
    border-color: var(--color-accent);
    box-shadow: none;
}

/* Bootstrap paints disabled/read-only fields with its own light grey, which glares in
   the dark theme (the Manage page's Username field). */
.form-control:disabled,
.form-control[readonly] {
    background-color: color-mix(in srgb, var(--color-text) 6%, var(--color-surface));
    color: color-mix(in srgb, var(--color-text) 70%, transparent);
}

.form-control::placeholder {
    color: color-mix(in srgb, var(--color-text) 40%, transparent);
}

.form-select option {
    background-color: var(--color-surface);
    color: var(--color-text);
}

.form-control-plaintext {
    color: var(--color-text);
}

.form-label {
    color: var(--color-text);
    font-weight: 500;
    margin-bottom: 0.3rem;
}

.form-text {
    color: color-mix(in srgb, var(--color-text) 60%, transparent);
}

.form-floating > label {
    color: color-mix(in srgb, var(--color-text) 55%, transparent);
}

/* Bootstrap slides a chip of its own body colour (light grey when disabled) under a
   floated label; on our surfaces it shows as a pale patch in the dark theme. */
.form-floating > .form-control ~ label::after {
    background-color: transparent !important;
}

.form-floating > .form-control-plaintext::placeholder, .form-floating > .form-control::placeholder {
    color: color-mix(in srgb, var(--color-text) 40%, transparent);
    text-align: end;
}

.form-floating > .form-control-plaintext:focus::placeholder, .form-floating > .form-control:focus::placeholder {
    text-align: start;
}

.form-check-input {
    border-color: var(--color-divider);
    background-color: var(--color-surface);
}

.form-check-input:checked {
    background-color: var(--color-accent);
    border-color: var(--color-accent);
}

/* Blazor forms: ValidationMessage renders .validation-message, ValidationSummary a
   ul.validation-errors, and inputs carry .valid/.invalid (+ .modified once touched). */
.text-danger,
.validation-message {
    color: var(--color-danger) !important;
}

.validation-message {
    display: block;
    font-size: 12px;
    margin-top: 4px;
}

ul.validation-errors {
    margin: 0;
    padding-left: 1.1rem;
    font-size: 13px;
}

ul.validation-errors:empty {
    display: none;
}

.invalid {
    border-color: var(--color-danger) !important;
}

/* Bootstrap hard-codes .text-muted to a near-black rgba(33,37,41,.75), which drops to
   a 1.14:1 contrast ratio on the dark surface — effectively invisible. Re-point it at
   the palette so it stays readable in both themes. */
.text-muted {
    color: color-mix(in srgb, var(--color-text) 62%, transparent) !important;
}

/* ---- alerts, cards ---- */

.alert-danger {
    background: color-mix(in srgb, var(--color-danger) 14%, transparent);
    border: 1px solid color-mix(in srgb, var(--color-danger) 38%, transparent);
    color: color-mix(in srgb, var(--color-danger) 70%, var(--color-text));
}

.alert-success {
    background: color-mix(in srgb, var(--color-accent) 15%, transparent);
    border: 1px solid color-mix(in srgb, var(--color-accent) 40%, transparent);
    color: var(--color-text);
}

.alert-info {
    background: color-mix(in srgb, var(--color-accent) 12%, transparent);
    border: 1px solid color-mix(in srgb, var(--color-accent) 35%, transparent);
    color: var(--color-text);
}

/* Something to check, not an error: amber over the theme's surface (Bootstrap's pale yellow
   glares in the dark theme). */
.alert-warning {
    background: color-mix(in srgb, #d99a1e 14%, var(--color-surface));
    border: 1px solid color-mix(in srgb, #d99a1e 45%, transparent);
    color: var(--color-text);
}

.card {
    background: var(--color-surface);
    border: 1px solid var(--color-divider);
    color: var(--color-text);
}

.card-title {
    color: var(--color-text);
}

hr {
    border-color: var(--color-divider);
    opacity: 1;
}

/* ---- Manage account nav (ManageNavMenu renders nav-pills) ---- */

.nav-pills {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 0.25rem;
    padding: 0;
}

.nav-pills .nav-item {
    width: 100%;
}

.nav-pills .nav-link {
    box-sizing: border-box;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    width: 100%;
    color: color-mix(in srgb, var(--color-text) 75%, transparent);
    background: transparent;
    border-radius: var(--radius-sm);
    padding: 0.85rem 1.1rem;
    line-height: 1.4;
    font-size: 1rem;
    font-weight: 500;
    text-align: left;
    transition: background 0.15s ease, color 0.15s ease;
}

.nav-pills .nav-link:hover {
    background: color-mix(in srgb, var(--color-accent) 10%, var(--color-surface));
    color: var(--color-text);
}

.nav-pills .nav-link.active {
    background: color-mix(in srgb, var(--color-accent) 14%, var(--color-surface));
    color: var(--color-accent);
    font-weight: 600;
    border-left: 0.2rem solid var(--color-accent);
    padding-left: calc(1.1rem - 0.2rem);
}

.nav-pills .nav-link:focus-visible {
    outline: 2px solid var(--color-accent);
    outline-offset: 2px;
}

.visually-hidden-label {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

/* ---- settings pages (Pages/Settings/*): a column of cards, each with a form grid ---- */
.settings-section {
    background: var(--color-surface);
    border: 1px solid var(--color-divider);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-sm);
    padding: 1.5rem;
    margin-bottom: 1.5rem;
    max-width: 960px;
}

.settings-section h2 {
    margin-bottom: 0.5rem;
}

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

.settings-grid .span-2 {
    grid-column: span 2;
}

@media (max-width: 720px) {
    .settings-grid {
        grid-template-columns: minmax(0, 1fr);
    }

    .settings-grid .span-2 {
        grid-column: auto;
    }
}

/* Tables: Bootstrap paints every cell with its body colour (white), which glares in the dark
   theme and hides nocturne's row rules; the cells go transparent over the token colours. */
.table {
    --bs-table-bg: transparent;
    --bs-table-color: var(--color-text);
    --bs-table-border-color: transparent;
    color: var(--color-text);
}

.table > :not(caption) > * > * {
    vertical-align: middle;
}

/* A table wider than a phone scrolls inside its card instead of widening the page. */
.table-scroll {
    position: relative; /* keeps absolutely placed children (the visually hidden labels) inside the scroll box */
    overflow-x: auto;
    margin: 0.75rem 0 1rem;
}

.table-scroll > .table {
    margin: 0;
}

/* A calendar colour (cabinets, doctors) as a dot before a name. */
.swatch {
    display: inline-block;
    width: 0.8rem;
    height: 0.8rem;
    margin-right: 0.45rem;
    border-radius: 50%;
    vertical-align: -0.05rem;
    box-shadow: 0 0 0 1px color-mix(in srgb, var(--color-text) 20%, transparent);
}

/* The development invitation link (InvitationNotice) is long and unbreakable. */
.invitation-dev a {
    word-break: break-all;
}

/* Appointment statuses (calendar, appointment dialog, patient profile): a symbol and a label
   always come with the colour (AppointmentText.Icon), never the colour alone. */
.status-pill {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    padding: 2px 10px;
    border-radius: 999px;
    font-size: 12px;
    font-weight: 600;
    background: color-mix(in srgb, var(--status) 16%, var(--color-surface));
    color: color-mix(in srgb, var(--status) 75%, var(--color-text));
    border: 1px solid color-mix(in srgb, var(--status) 40%, transparent);
    white-space: nowrap;
}

.status-scheduled { --status: #2f6fd6; }
.status-confirmed { --status: #1d7a4f; }
.status-arrived { --status: #a16207; }
.status-intreatment { --status: #7c3aed; }
.status-completed { --status: #4b5563; }
.status-cancelled { --status: #c0392b; }
.status-noshow { --status: #be185d; }

/* Tabs across a section's pages (Setări clinică, Personal — the Shared/*Tabs components):
   NavLink renders the anchors, so global. On a phone they wrap: a row that scrolls would hide
   the last tabs. */
.section-tabs {
    display: flex;
    flex-wrap: wrap;
    column-gap: 0.25rem;
    margin: 0 0 1.25rem;
    border-bottom: 1px solid var(--color-divider);
    max-width: 960px;
}

.section-tab {
    padding: 0.5rem 0.75rem;
    border-bottom: 2px solid transparent;
    color: color-mix(in srgb, var(--color-text) 70%, transparent);
    font-weight: 600;
    font-size: 14px;
    white-space: nowrap;
}

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

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

/* Tabs inside one of those pages (the catalogue's views): pills, so they read as a second level. */
.sub-tabs {
    display: flex;
    flex-wrap: wrap;
    gap: 0.35rem;
    margin: 0 0 1rem;
}

.sub-tab {
    padding: 0.25rem 0.8rem;
    border: 1px solid var(--color-divider);
    border-radius: 999px;
    color: color-mix(in srgb, var(--color-text) 75%, transparent);
    font-weight: 600;
    font-size: 13px;
}

.sub-tab:hover {
    color: var(--color-text);
    border-color: color-mix(in srgb, var(--color-accent) 50%, var(--color-divider));
}

.sub-tab.active {
    color: var(--color-accent);
    border-color: var(--color-accent);
    background: color-mix(in srgb, var(--color-accent) 10%, transparent);
}

/* Money in tables: aligned on the right (headers too — hence .table), never wrapped. */
.money,
.table .money {
    text-align: right;
    white-space: nowrap;
    font-variant-numeric: tabular-nums;
}

/* Printing (the treatment plan's print page): only the page's own content goes on paper. */
@media print {
    .sidebar,
    .top-row,
    .no-print,
    #blazor-error-ui {
        display: none !important;
    }

    html,
    body,
    .page,
    main,
    main > article,
    .content {
        display: block !important;
        margin: 0 !important;
        padding: 0 !important;
        background: #fff !important;
        color: #111 !important;
    }
}