/* ================================================================
   MEDILINK
   Modern soft medical theme layer for Radzen Material 3

   Important:
   - Keep Radzen material3-base.css / material3-dark-base.css unchanged.
   - Load this file after the Radzen theme stylesheet.
   ================================================================ */


/* ================================================================
   BLAZOR ERROR UI
   ================================================================ */

#blazor-error-ui {
    background: #fff7e8;
    border-top: 1px solid #ead8b6;
    bottom: 0;
    box-shadow: 0 -6px 24px rgba(38, 53, 54, 0.08);
    color: #5c4a29;
    display: none;
    left: 0;
    padding: 0.8rem 3rem 0.8rem 1.25rem;
    position: fixed;
    width: 100%;
    z-index: 1000;
}

    #blazor-error-ui .dismiss {
        cursor: pointer;
        position: absolute;
        right: 0.9rem;
        top: 0.65rem;
    }


/* ================================================================
   MEDILINK DESIGN TOKENS
   ================================================================ */

:root {
    font-size: var(--rz-root-font-size);
    --medilink-primary: #3F7F7A;
    --medilink-primary-hover: #356D69;
    --medilink-primary-pressed: #2D5D59;
    --medilink-primary-soft: #E7F1F0;
    --medilink-primary-softer: #F2F8F7;
    --medilink-page: #F6F8F8;
    --medilink-surface: #FFFFFF;
    --medilink-surface-soft: #F1F5F4;
    --medilink-sidebar: #F3F7F6;
    --medilink-border: #DCE5E4;
    --medilink-border-strong: #C9D7D5;
    --medilink-text: #263536;
    --medilink-text-secondary: #667576;
    --medilink-text-muted: #83908F;
    --medilink-success: #4F8A67;
    --medilink-success-soft: #E8F2EC;
    --medilink-info: #5F86A6;
    --medilink-info-soft: #EBF2F7;
    --medilink-warning: #B78744;
    --medilink-warning-soft: #F8F0E4;
    --medilink-danger: #B85C5C;
    --medilink-danger-soft: #F8EAEA;
    --medilink-radius-sm: 8px;
    --medilink-radius: 12px;
    --medilink-radius-lg: 16px;
    --medilink-shadow-xs: 0 1px 2px rgba(38, 53, 54, 0.025), 0 1px 4px rgba(38, 53, 54, 0.025);
    --medilink-shadow-sm: 0 2px 10px rgba(38, 53, 54, 0.045);
    --medilink-shadow-dialog: 0 18px 55px rgba(25, 43, 43, 0.15);
    /* ------------------------------------------------------------
       Radzen semantic palette
       ------------------------------------------------------------ */

    --rz-primary: #3F7F7A;
    --rz-primary-light: #A9CBC8;
    --rz-primary-lighter: rgba(63, 127, 122, 0.12);
    --rz-primary-dark: #356D69;
    --rz-primary-darker: #2D5D59;
    --rz-on-primary: #FFFFFF;
    --rz-on-primary-light: #263536;
    --rz-on-primary-lighter: #356D69;
    --rz-on-primary-dark: #FFFFFF;
    --rz-on-primary-darker: #FFFFFF;
    --rz-secondary: #667576;
    --rz-secondary-light: #C8D1D0;
    --rz-secondary-lighter: rgba(102, 117, 118, 0.10);
    --rz-secondary-dark: #526061;
    --rz-secondary-darker: #3B4748;
    --rz-info: #5F86A6;
    --rz-info-light: #C6D8E6;
    --rz-info-lighter: rgba(95, 134, 166, 0.12);
    --rz-info-dark: #4F718E;
    --rz-info-darker: #3D5A73;
    --rz-success: #4F8A67;
    --rz-success-light: #BDD7C7;
    --rz-success-lighter: rgba(79, 138, 103, 0.12);
    --rz-success-dark: #427657;
    --rz-success-darker: #345F46;
    --rz-warning: #B78744;
    --rz-warning-light: #E4CDAA;
    --rz-warning-lighter: rgba(183, 135, 68, 0.12);
    --rz-warning-dark: #946D37;
    --rz-warning-darker: #75572D;
    --rz-danger: #B85C5C;
    --rz-danger-light: #E3B8B8;
    --rz-danger-lighter: rgba(184, 92, 92, 0.12);
    --rz-danger-dark: #984B4B;
    --rz-danger-darker: #793B3B;
    --rz-link-color: #3F7F7A;
    --rz-link-hover-color: #356D69;
    --rz-border-radius: 0.625rem;
}


/* ================================================================
   GENERAL
   ================================================================ */

html,
body {
    min-height: 100%;
}

body {
    background: var(--medilink-page);
    color: var(--medilink-text);
    font-family: var(--rz-text-font-family);
    font-size: var(--rz-body-font-size);
    line-height: var(--rz-body-line-height);
}

a {
    color: var(--medilink-primary);
}

    a:hover,
    a:focus {
        color: var(--medilink-primary-hover);
    }

::selection {
    background: rgba(63, 127, 122, 0.20);
}


/* ================================================================
   LAYOUT
   ================================================================ */

.medilink-layout,
.rz-layout.medilink-layout {
    background: var(--medilink-page);
}

.medilink-body,
.rz-body.medilink-body {
    --rz-body-padding: 0;
    background: radial-gradient( circle at 100% 0, rgba(63, 127, 122, 0.035), transparent 28rem ), var(--medilink-page);
}

.medilink-content {
    margin-inline: auto !important;
    padding: clamp(1rem, 2.4vw, 2rem) clamp(1rem, 2.5vw, 2.25rem) 2.5rem !important;
    width: 100%;
}


/* ================================================================
   HEADER
   ================================================================ */

.medilink-header,
.rz-header.medilink-header {
    min-height: 68px;
    padding: 0 1rem;
    background: rgba(255, 255, 255, 0.96);
    border-bottom: 1px solid var(--medilink-border);
    box-shadow: 0 1px 8px rgba(38, 53, 54, 0.035);
    color: var(--medilink-text);
    backdrop-filter: blur(12px);
}

.medilink-header-row {
    min-height: 68px;
}

.medilink-sidebar-toggle,
.medilink-header .rz-sidebar-toggle {
    width: 42px;
    height: 42px;
    border-radius: 11px;
    color: var(--medilink-text-secondary);
    transition: background-color 150ms ease, color 150ms ease;
}

    .medilink-sidebar-toggle:hover,
    .medilink-header .rz-sidebar-toggle:hover {
        background: var(--medilink-primary-soft);
        color: var(--medilink-primary);
    }

.medilink-header-brand {
    display: flex;
    flex-direction: column;
    line-height: 1.15;
}

.medilink-header-brand-name {
    color: var(--medilink-text);
    font-size: 1rem;
    font-weight: 700;
    letter-spacing: -0.015em;
}

.medilink-header-brand-subtitle {
    margin-top: 0.18rem;
    color: var(--medilink-text-muted);
    font-size: 0.72rem;
    font-weight: 500;
}

.medilink-header-actions {
    min-width: 0;
}

.medilink-theme-toggle {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 42px;
    height: 42px;
    border: 1px solid transparent;
    border-radius: 11px;
}

    .medilink-theme-toggle:hover {
        background: var(--medilink-surface-soft);
        border-color: var(--medilink-border);
    }

.medilink-profile-trigger {
    display: flex;
    align-items: center;
    gap: 0.65rem;
    min-width: 0;
    padding: 0.28rem 0.5rem 0.28rem 0.3rem;
    border-radius: 12px;
}

    .medilink-profile-trigger:hover {
        background: var(--medilink-surface-soft);
    }

.medilink-profile-avatar {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    flex: 0 0 36px;
    border-radius: 10px;
    background: var(--medilink-primary-soft);
    color: var(--medilink-primary);
}

    .medilink-profile-avatar .rzi {
        font-size: 1.15rem;
    }

.medilink-profile-copy {
    display: flex;
    flex-direction: column;
    min-width: 0;
    line-height: 1.15;
    text-align: left;
}

.medilink-profile-name {
    max-width: 220px;
    overflow: hidden;
    color: var(--medilink-text);
    font-size: 0.84rem;
    font-weight: 650;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.medilink-profile-clinic {
    max-width: 220px;
    margin-top: 0.18rem;
    overflow: hidden;
    color: var(--medilink-text-muted);
    font-size: 0.7rem;
    font-weight: 500;
    text-overflow: ellipsis;
    white-space: nowrap;
}


/* ================================================================
   SIDEBAR
   ================================================================ */

.medilink-sidebar,
.rz-sidebar.medilink-sidebar {
    background: var(--medilink-sidebar);
    border-inline-end: 1px solid var(--medilink-border);
    color: var(--medilink-text);
}

.medilink-sidebar-content {
    display: flex;
    flex-direction: column;
    min-height: 100%;
    padding: 1.1rem 0.8rem 1rem;
}

.medilink-sidebar-brand {
    display: flex;
    align-items: center;
    gap: 0.8rem;
    padding: 0.4rem 0.55rem 1rem;
}

.medilink-logo-shell {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 62px;
    height: 62px;
    flex: 0 0 62px;
    border: 1px solid var(--medilink-border);
    border-radius: 16px;
    background: var(--medilink-surface);
    box-shadow: var(--medilink-shadow-xs);
}

.medilink-clinic-logo {
    width: 50px !important;
    height: 50px !important;
    object-fit: contain;
}

.medilink-sidebar-brand-copy {
    min-width: 0;
}

.medilink-sidebar-title {
    margin: 0 !important;
    color: var(--medilink-text) !important;
    font-weight: 750;
    letter-spacing: -0.025em;
}

.medilink-sidebar-clinic {
    display: block;
    max-width: 145px;
    margin-top: 0.2rem !important;
    overflow: hidden;
    color: var(--medilink-text-muted) !important;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.medilink-menu-label {
    padding: 0.75rem 0.85rem 0.4rem;
    color: var(--medilink-text-muted);
    font-size: 0.66rem;
    font-weight: 750;
    letter-spacing: 0.11em;
}

.medilink-panel-menu,
.medilink-panel-menu.rz-panel-menu {
    background: transparent;
    border: 0;
}

    .medilink-panel-menu .rz-navigation-item {
        margin-bottom: 0.2rem;
    }

    .medilink-panel-menu .rz-navigation-item-link {
        min-height: 44px;
        gap: 0.7rem;
        padding: 0.65rem 0.85rem;
        border-radius: 11px;
        background: transparent;
        color: var(--medilink-text-secondary);
        font-weight: 550;
        transition: background-color 150ms ease, color 150ms ease, transform 150ms ease;
    }

        .medilink-panel-menu .rz-navigation-item-link:hover {
            background: rgba(63, 127, 122, 0.075);
            color: var(--medilink-primary-hover);
        }

    .medilink-panel-menu .rz-navigation-item-wrapper-active >
    .rz-navigation-item-link,
    .medilink-panel-menu .rz-navigation-item-wrapper-active
    .rz-navigation-item-link {
        background: var(--medilink-primary-soft);
        color: var(--medilink-primary-hover);
        font-weight: 650;
    }

    .medilink-panel-menu .rz-navigation-item-icon {
        color: currentColor;
        font-size: 1.25rem;
    }

.medilink-sidebar-spacer {
    flex: 1;
    min-height: 1.5rem;
}

.medilink-sidebar-footer {
    padding: 1rem 0.5rem 0.2rem;
    border-top: 1px solid var(--medilink-border);
}

.medilink-sidebar-version,
.medilink-sidebar-copyright {
    margin: 0 !important;
    color: var(--medilink-text-muted) !important;
}

.medilink-sidebar-copyright {
    margin-top: 0.15rem !important;
}


/* ================================================================
   TYPOGRAPHY
   ================================================================ */

h1,
h2,
h3,
h4,
h5,
h6,
.rz-text-h1,
.rz-text-h2,
.rz-text-h3,
.rz-text-h4,
.rz-text-h5,
.rz-text-h6 {
    color: var(--medilink-text);
    letter-spacing: -0.02em;
}

.rz-text-secondary-color {
    color: var(--medilink-text-secondary) !important;
}


/* ================================================================
   CARDS
   ================================================================ */

.rz-card {
    border-radius: var(--medilink-radius-lg);
}

    .rz-card.rz-variant-flat,
    .rz-card.rz-variant-filled {
        background: var(--medilink-surface);
        border: 1px solid var(--medilink-border);
        box-shadow: var(--medilink-shadow-sm);
    }

    .rz-card.rz-variant-outlined {
        border: 1px solid var(--medilink-border);
        background: transparent;
    }


/* ================================================================
   BUTTONS
   ================================================================ */

.rz-button {
    border-radius: 10px;
    font-weight: 600;
    letter-spacing: 0;
    box-shadow: none;
    transition: background-color 150ms ease, border-color 150ms ease, color 150ms ease, transform 100ms ease, box-shadow 150ms ease;
}

    .rz-button:not(.rz-state-disabled):active {
        transform: translateY(1px);
    }

    .rz-button.rz-button-md {
        min-height: 40px;
    }

    .rz-button.rz-primary {
        box-shadow: 0 2px 6px rgba(63, 127, 122, 0.14);
    }

        .rz-button.rz-primary:hover:not(.rz-state-disabled) {
            background: var(--medilink-primary-hover);
        }

    .rz-button.rz-light {
        background: var(--medilink-surface);
        border: 1px solid var(--medilink-border);
        color: var(--medilink-text-secondary);
    }

        .rz-button.rz-light:hover:not(.rz-state-disabled) {
            background: var(--medilink-surface-soft);
            border-color: var(--medilink-border-strong);
            color: var(--medilink-primary-hover);
        }


/* ================================================================
   INPUTS / FORM FIELDS
   ================================================================ */

.rz-form-field {
    --rz-form-field-border-radius: 10px;
}

.rz-textbox,
.rz-textarea,
.rz-dropdown,
.rz-multiselect,
.rz-numeric,
.rz-datepicker > .rz-inputtext,
.rz-form-field-content {
    border-color: var(--medilink-border-strong);
    border-radius: 10px;
    background: var(--medilink-surface);
    box-shadow: none;
}

    .rz-textbox:hover:not(.rz-state-disabled),
    .rz-textarea:hover:not(.rz-state-disabled),
    .rz-dropdown:hover:not(.rz-state-disabled),
    .rz-multiselect:hover:not(.rz-state-disabled),
    .rz-numeric:hover:not(.rz-state-disabled),
    .rz-datepicker:hover > .rz-inputtext {
        border-color: #ABC4C1;
    }

    .rz-textbox:focus,
    .rz-textarea:focus,
    .rz-dropdown:focus-within,
    .rz-multiselect:focus-within,
    .rz-numeric:focus-within,
    .rz-datepicker:focus-within > .rz-inputtext,
    .rz-form-field-content:focus-within {
        border-color: var(--medilink-primary) !important;
        box-shadow: 0 0 0 3px rgba(63, 127, 122, 0.10) !important;
    }

.rz-inputtext::placeholder,
.rz-placeholder {
    color: var(--medilink-text-muted);
}

.rz-dropdown-panel,
.rz-multiselect-panel,
.rz-datepicker-popup {
    border: 1px solid var(--medilink-border);
    border-radius: 12px;
    background: var(--medilink-surface);
    box-shadow: 0 12px 34px rgba(38, 53, 54, 0.12);
}

.rz-dropdown-item:hover,
.rz-multiselect-item:hover {
    background: var(--medilink-primary-softer);
}

.rz-dropdown-item.rz-state-highlight,
.rz-multiselect-item.rz-state-highlight {
    background: var(--medilink-primary-soft);
    color: var(--medilink-primary-hover);
}


/* ================================================================
   DIALOGS
   ================================================================ */

.rz-dialog {
    overflow: hidden;
    border: 1px solid var(--medilink-border);
    border-radius: 18px;
    background: var(--medilink-surface);
    box-shadow: var(--medilink-shadow-dialog);
}

.rz-dialog-titlebar {
    padding: 1rem 1.25rem;
    border-bottom: 1px solid var(--medilink-border);
    background: var(--medilink-surface);
}

.rz-dialog-title {
    color: var(--medilink-text);
    font-weight: 700;
    letter-spacing: -0.015em;
}

.rz-dialog-content {
    background: var(--medilink-page);
}

.rz-dialog-mask {
    background: rgba(26, 42, 42, 0.26);
    backdrop-filter: blur(2px);
}


/* ================================================================
   DATA GRID
   ================================================================ */

.rz-data-grid,
.rz-datatable {
    overflow: hidden;
    border: 1px solid var(--medilink-border);
    border-radius: 14px;
    background: var(--medilink-surface);
    box-shadow: var(--medilink-shadow-xs);
}

.rz-grid-table thead th,
.rz-datatable-thead th {
    background: var(--medilink-surface-soft);
    border-color: var(--medilink-border);
}

    .rz-grid-table thead th .rz-column-title {
        color: var(--medilink-text-secondary);
        font-size: 0.78rem;
        font-weight: 700;
        letter-spacing: 0.025em;
    }

.rz-grid-table tbody td {
    border-color: #E9EEEE;
}

.rz-grid-table tbody tr {
    background: var(--medilink-surface);
    transition: background-color 120ms ease;
}

    .rz-grid-table tbody tr:hover > td {
        background: var(--medilink-primary-softer);
    }

    .rz-grid-table tbody tr.rz-state-highlight > td {
        background: var(--medilink-primary-soft);
    }

.rz-pager {
    border-top: 1px solid var(--medilink-border);
    background: var(--medilink-surface);
}

.rz-pager-element {
    border-radius: 8px;
}

    .rz-pager-element.rz-state-active {
        background: var(--medilink-primary-soft);
        color: var(--medilink-primary-hover);
    }


/* ================================================================
   SCHEDULER
   ================================================================ */

.rz-scheduler {
    border: 1px solid var(--medilink-border);
    border-radius: 14px;
    background: var(--medilink-surface);
    box-shadow: var(--medilink-shadow-xs);
}

.rz-scheduler-nav {
    padding: 0.65rem 0.75rem;
    border-bottom: 1px solid var(--medilink-border);
    background: var(--medilink-surface);
}

    .rz-scheduler-nav .rz-button {
        border-radius: 9px;
    }

.rz-view-header {
    background: var(--medilink-surface-soft);
    color: var(--medilink-text-secondary);
    font-weight: 650;
}

.rz-slot,
.rz-slot-header,
.rz-view-header {
    border-color: #E4EBEA !important;
}

.rz-slot-title,
.rz-slot-header {
    color: var(--medilink-text-muted);
}

.rz-scheduler .rz-event {
    border: 0;
    border-radius: 8px;
    background: var(--medilink-primary);
    box-shadow: 0 2px 6px rgba(63, 127, 122, 0.14);
}

    .rz-scheduler .rz-event:hover {
        background: var(--medilink-primary-hover);
    }


/* ================================================================
   ALERTS / BADGES
   ================================================================ */

.rz-alert {
    border-radius: 11px;
    box-shadow: none;
}

    .rz-alert.rz-info {
        background: var(--medilink-info-soft);
    }

    .rz-alert.rz-success {
        background: var(--medilink-success-soft);
    }

    .rz-alert.rz-warning {
        background: var(--medilink-warning-soft);
    }

    .rz-alert.rz-danger {
        background: var(--medilink-danger-soft);
    }

.rz-badge {
    border-radius: 999px;
    font-weight: 650;
}


/* ================================================================
   HTML EDITOR
   ================================================================ */

.rz-html-editor {
    overflow: hidden;
    border: 1px solid var(--medilink-border);
    border-radius: 12px;
    background: var(--medilink-surface);
}

.rz-html-editor-toolbar {
    border-bottom: 1px solid var(--medilink-border);
    background: var(--medilink-surface-soft);
}


/* ================================================================
   TIMELINE
   ================================================================ */

.rz-timeline-point {
    color: var(--medilink-primary);
}

.rz-timeline-line {
    background: var(--medilink-border);
}


/* ================================================================
   PROFILE MENU / POPUPS
   ================================================================ */

.rz-profile-menu .rz-navigation-menu,
.rz-menu:not(.rz-profile-menu) {
    overflow: hidden;
    border: 1px solid var(--medilink-border);
    border-radius: 12px;
    background: var(--medilink-surface);
    box-shadow: 0 12px 34px rgba(38, 53, 54, 0.12);
}

ul.rz-profile-menu.medilink-profile-menu {
    overflow: visible;
}

.medilink-profile-menu .rz-navigation-menu {
    min-width: 180px;
    z-index: 1000;
}


/* ================================================================
   LOADING
   ================================================================ */

.loading-progress {
    position: relative;
    display: block;
    width: 8rem;
    height: 8rem;
    margin: 20vh auto 1rem auto;
}

    .loading-progress circle {
        fill: none;
        stroke: var(--medilink-border);
        stroke-width: 0.6rem;
        transform-origin: 50% 50%;
        transform: rotate(-90deg);
    }

        .loading-progress circle:last-child {
            stroke: var(--medilink-primary);
            stroke-dasharray: calc( 3.141 * var(--blazor-load-percentage, 0%) * 0.8 ), 500%;
            transition: stroke-dasharray 0.05s ease-in-out;
        }

.loading-progress-text {
    position: absolute;
    inset: calc(20vh + 3.25rem) 0 auto 0.2rem;
    color: var(--medilink-text-secondary);
    font-weight: 650;
    text-align: center;
}

    .loading-progress-text:after {
        content: var(--blazor-load-percentage-text, "Loading");
    }


/* ================================================================
   BLAZOR ERROR BOUNDARY
   ================================================================ */

.blazor-error-boundary {
    padding: 1rem 1rem 1rem 3.7rem;
    border-radius: 12px;
    background: var(--medilink-danger);
    color: white;
}

    .blazor-error-boundary::after {
        content: "Došlo je do greške.";
    }


/* ================================================================
   DARK THEME SUPPORT

   Radzen AppearanceToggle normally swaps the theme stylesheet.
   The selector below covers generated Radzen links whose href
   contains "dark". The additional attribute/class selectors are
   harmless fallbacks for projects that mark dark mode on html/body.
   ================================================================ */

html:has(link[href*="dark"]),
html[data-theme="dark"],
body[data-theme="dark"],
.dark-theme {
    --medilink-primary: #78AAA6;
    --medilink-primary-hover: #8ABAB6;
    --medilink-primary-pressed: #689A96;
    --medilink-primary-soft: rgba(120, 170, 166, 0.15);
    --medilink-primary-softer: rgba(120, 170, 166, 0.075);
    --medilink-page: #151C1C;
    --medilink-surface: #1D2626;
    --medilink-surface-soft: #242E2E;
    --medilink-sidebar: #192222;
    --medilink-border: #304040;
    --medilink-border-strong: #405252;
    --medilink-text: #E8EEEE;
    --medilink-text-secondary: #B7C3C2;
    --medilink-text-muted: #8F9D9C;
    --medilink-success-soft: rgba(79, 138, 103, 0.16);
    --medilink-info-soft: rgba(95, 134, 166, 0.16);
    --medilink-warning-soft: rgba(183, 135, 68, 0.16);
    --medilink-danger-soft: rgba(184, 92, 92, 0.16);
    --rz-primary: #78AAA6;
    --rz-primary-light: #A6C8C5;
    --rz-primary-lighter: rgba(120, 170, 166, 0.16);
    --rz-primary-dark: #689995;
    --rz-primary-darker: #598884;
    --rz-link-color: #8ABAB6;
    --rz-link-hover-color: #A3CBC8;
}

    html:has(link[href*="dark"]) .medilink-header,
    html[data-theme="dark"] .medilink-header,
    body[data-theme="dark"] .medilink-header,
    .dark-theme .medilink-header {
        background: rgba(29, 38, 38, 0.96);
    }

    html:has(link[href*="dark"]) .rz-dialog-mask,
    html[data-theme="dark"] .rz-dialog-mask,
    body[data-theme="dark"] .rz-dialog-mask,
    .dark-theme .rz-dialog-mask {
        background: rgba(0, 0, 0, 0.46);
    }


/* ================================================================
   RESPONSIVE
   ================================================================ */

@media (max-width: 900px) {

    .medilink-header-brand-subtitle {
        display: none;
    }

    .medilink-profile-clinic {
        display: none;
    }

    .medilink-profile-name {
        max-width: 145px;
    }

    .medilink-content {
        padding: 1rem 1rem 1.75rem !important;
    }
}


@media (max-width: 620px) {

    .medilink-header-brand {
        display: none;
    }

    .medilink-profile-copy {
        display: none;
    }

    .medilink-profile-trigger {
        padding-right: 0.3rem;
    }

    .medilink-header,
    .rz-header.medilink-header {
        padding-inline: 0.5rem;
    }

    .rz-card {
        border-radius: 12px;
    }

    .rz-dialog {
        border-radius: 14px;
    }
}


/* ================================================================
   PRINT SAFETY
   ================================================================ */

@media print {

    .medilink-header,
    .medilink-sidebar {
        box-shadow: none !important;
    }
}

/* ================================================================
   MEDILINK SOFT CALENDAR UI
   Reference-inspired refinement:
   - airy neutral canvas
   - floating white surfaces
   - pastel lavender / blue accents
   - soft glass dialog overlay
   - calendar-first visual language

   These rules intentionally sit AFTER the base MediLink theme.
   ================================================================ */

:root {
    --medilink-page: #F2F3F5;
    --medilink-surface: #FFFFFF;
    --medilink-surface-soft: #F7F8FA;
    --medilink-sidebar: #F8F8F9;
    --medilink-border: #E6E7EB;
    --medilink-border-strong: #D8DADF;
    --medilink-text: #2E3035;
    --medilink-text-secondary: #73767E;
    --medilink-text-muted: #9A9DA5;
    --medilink-primary: #5F8F8B;
    --medilink-primary-hover: #507C78;
    --medilink-primary-pressed: #456D69;
    --medilink-primary-soft: #E8F1F0;
    --medilink-primary-softer: #F3F8F7;
    --medilink-lavender: #DDE3F9;
    --medilink-lavender-soft: #F0F2FC;
    --medilink-blue-soft: #E8F0FB;
    --medilink-peach: #EFAF76;
    --medilink-peach-soft: #FAEEE3;
    --medilink-green-soft: #E7F0E3;
    --medilink-radius-sm: 10px;
    --medilink-radius: 14px;
    --medilink-radius-lg: 20px;
    --medilink-shadow-xs: 0 1px 2px rgba(25, 29, 38, 0.018), 0 4px 12px rgba(25, 29, 38, 0.025);
    --medilink-shadow-sm: 0 10px 30px rgba(28, 31, 39, 0.055);
    --medilink-shadow-dialog: 0 30px 80px rgba(40, 42, 55, 0.18);
    --rz-primary: #5F8F8B;
    --rz-primary-light: #B8D0CD;
    --rz-primary-lighter: rgba(95, 143, 139, 0.12);
    --rz-primary-dark: #507C78;
    --rz-primary-darker: #456D69;
    --rz-secondary: #73767E;
    --rz-secondary-light: #D2D4D9;
    --rz-secondary-lighter: rgba(115, 118, 126, 0.09);
    --rz-info: #738DC1;
    --rz-info-light: #CBD6EF;
    --rz-info-lighter: rgba(115, 141, 193, 0.12);
    --rz-success: #6F9664;
    --rz-success-light: #CADBC5;
    --rz-success-lighter: rgba(111, 150, 100, 0.12);
    --rz-warning: #C68A55;
    --rz-warning-light: #ECD2BB;
    --rz-warning-lighter: rgba(198, 138, 85, 0.12);
    --rz-danger: #B86C6C;
    --rz-danger-light: #E7C3C3;
    --rz-danger-lighter: rgba(184, 108, 108, 0.12);
    --rz-border-radius: 0.75rem;
}


/* ---------------------------------------------------------------
   WORKSPACE / APP CANVAS
   --------------------------------------------------------------- */

body {
    background: radial-gradient( circle at 20% 0%, rgba(221, 227, 249, 0.42), transparent 26rem ), radial-gradient( circle at 100% 12%, rgba(232, 241, 240, 0.62), transparent 30rem ), var(--medilink-page);
}

.medilink-layout,
.rz-layout.medilink-layout {
    background: transparent;
}

.medilink-body,
.rz-body.medilink-body {
    background: transparent;
}

.medilink-content {
    max-width: 1600px !important;
    padding: clamp(1.1rem, 2vw, 1.8rem) clamp(1rem, 2.3vw, 2rem) 2.5rem !important;
}


/* ---------------------------------------------------------------
   HEADER - light, calm, almost invisible
   --------------------------------------------------------------- */

.medilink-header,
.rz-header.medilink-header {
    min-height: 72px;
    padding-inline: 1rem;
    background: rgba(250, 250, 251, 0.88);
    border-bottom: 1px solid rgba(222, 224, 229, 0.82);
    box-shadow: none;
    backdrop-filter: blur(18px);
}

.medilink-header-row {
    min-height: 72px;
}

.medilink-header-brand-name {
    font-size: 1.02rem;
    font-weight: 720;
}

.medilink-header-brand-subtitle {
    color: #9A9DA5;
    font-size: 0.70rem;
}

.medilink-sidebar-toggle,
.medilink-header .rz-sidebar-toggle,
.medilink-theme-toggle {
    border-radius: 12px;
}

    .medilink-sidebar-toggle:hover,
    .medilink-header .rz-sidebar-toggle:hover,
    .medilink-theme-toggle:hover {
        background: rgba(255, 255, 255, 0.95);
        border-color: var(--medilink-border);
        box-shadow: 0 5px 15px rgba(28, 31, 39, 0.05);
    }

.medilink-profile-trigger {
    border: 1px solid transparent;
    border-radius: 13px;
}

    .medilink-profile-trigger:hover {
        background: rgba(255, 255, 255, 0.94);
        border-color: var(--medilink-border);
        box-shadow: 0 5px 15px rgba(28, 31, 39, 0.05);
    }

.medilink-profile-avatar {
    border: 1px solid #D8E4E2;
    border-radius: 11px;
    background: linear-gradient( 145deg, #EDF5F4, #E4EEED );
}


/* ---------------------------------------------------------------
   SIDEBAR - like the reference: flat, quiet, structured
   --------------------------------------------------------------- */

.medilink-sidebar,
.rz-sidebar.medilink-sidebar {
    background: rgba(248, 248, 249, 0.94);
    border-inline-end: 1px solid #E4E5E8;
    backdrop-filter: blur(16px);
}

.medilink-sidebar-content {
    padding: 1rem 0.7rem 1rem;
}

.medilink-sidebar-brand {
    gap: 0.72rem;
    padding: 0.35rem 0.5rem 1rem;
}

.medilink-logo-shell {
    width: 56px;
    height: 56px;
    flex-basis: 56px;
    border-color: #E3E4E7;
    border-radius: 15px;
    background: linear-gradient( 145deg, #FFFFFF, #F5F6F7 );
    box-shadow: 0 7px 18px rgba(28, 31, 39, 0.05);
}

.medilink-clinic-logo {
    width: 44px !important;
    height: 44px !important;
}

.medilink-sidebar-title {
    font-size: 1.02rem !important;
}

.medilink-menu-label {
    padding: 0.8rem 0.78rem 0.45rem;
    font-size: 0.62rem;
    letter-spacing: 0.13em;
}

.medilink-panel-menu .rz-navigation-item {
    margin-bottom: 0.15rem;
}

.medilink-panel-menu .rz-navigation-item-link {
    min-height: 42px;
    padding: 0.6rem 0.78rem;
    border-radius: 10px;
    color: #74777D;
    font-size: 0.88rem;
}

    .medilink-panel-menu .rz-navigation-item-link:hover {
        background: rgba(255, 255, 255, 0.92);
        color: #4E6664;
    }

.medilink-panel-menu .rz-navigation-item-wrapper-active >
.rz-navigation-item-link,
.medilink-panel-menu .rz-navigation-item-wrapper-active
.rz-navigation-item-link {
    background: #FFFFFF;
    color: #456D69;
    box-shadow: 0 7px 18px rgba(28, 31, 39, 0.055);
}

    .medilink-panel-menu .rz-navigation-item-wrapper-active
    .rz-navigation-item-link::after {
        content: "";
        position: absolute;
        inset-block: 9px;
        inset-inline-start: 0;
        width: 3px;
        border-radius: 99px;
        background: #6E9B97;
    }


/* ---------------------------------------------------------------
   CARDS - soft floating white panels
   --------------------------------------------------------------- */

.rz-card {
    border-radius: 20px;
}

    .rz-card.rz-variant-flat,
    .rz-card.rz-variant-filled {
        background: linear-gradient( 180deg, rgba(255, 255, 255, 0.99), rgba(252, 252, 253, 0.99) );
        border: 1px solid #E8E9EC;
        box-shadow: 0 10px 30px rgba(29, 31, 39, 0.045);
    }

        .rz-card.rz-variant-flat:hover {
            border-color: #E0E2E6;
        }


/* ---------------------------------------------------------------
   BUTTONS - compact, rounded, no heavy Material look
   --------------------------------------------------------------- */

.rz-button {
    min-height: 40px;
    border-radius: 11px;
    font-weight: 600;
    box-shadow: none !important;
}

    .rz-button.rz-primary {
        background: linear-gradient( 180deg, #669995, #5C8B87 );
        border-color: #5C8B87;
        color: white;
    }

        .rz-button.rz-primary:hover:not(.rz-state-disabled) {
            background: linear-gradient( 180deg, #5C8C88, #517C78 );
        }

    .rz-button.rz-light {
        background: #FFFFFF;
        border: 1px solid #E0E2E6;
        color: #666A71;
    }

        .rz-button.rz-light:hover:not(.rz-state-disabled) {
            background: #F8F9FA;
            border-color: #D5D7DC;
            color: #4F555C;
        }


/* ---------------------------------------------------------------
   INPUTS - reference-style bordered fields
   --------------------------------------------------------------- */

.rz-textbox,
.rz-textarea,
.rz-dropdown,
.rz-multiselect,
.rz-numeric,
.rz-datepicker > .rz-inputtext,
.rz-form-field-content {
    min-height: 44px;
    border: 1px solid #DFE1E5;
    border-radius: 11px;
    background: #FFFFFF;
}

.rz-form-field {
    --rz-form-field-border-radius: 11px;
}

.rz-form-field-label {
    color: #85888F;
    font-size: 0.76rem;
    font-weight: 560;
}

.rz-textbox:hover:not(.rz-state-disabled),
.rz-textarea:hover:not(.rz-state-disabled),
.rz-dropdown:hover:not(.rz-state-disabled),
.rz-multiselect:hover:not(.rz-state-disabled),
.rz-numeric:hover:not(.rz-state-disabled),
.rz-datepicker:hover > .rz-inputtext {
    border-color: #CFD3D8;
}

.rz-textbox:focus,
.rz-textarea:focus,
.rz-dropdown:focus-within,
.rz-multiselect:focus-within,
.rz-numeric:focus-within,
.rz-datepicker:focus-within > .rz-inputtext,
.rz-form-field-content:focus-within {
    border-color: #8DAFAB !important;
    box-shadow: 0 0 0 3px rgba(95, 143, 139, 0.095) !important;
}

.rz-dropdown-panel,
.rz-multiselect-panel,
.rz-datepicker-popup {
    border: 1px solid #E3E4E8;
    border-radius: 14px;
    box-shadow: 0 18px 50px rgba(34, 36, 45, 0.12);
}


/* ---------------------------------------------------------------
   DIALOG - closest element to the supplied reference
   --------------------------------------------------------------- */

.rz-dialog-mask {
    background: rgba(235, 236, 239, 0.72);
    backdrop-filter: blur(7px) saturate(0.9);
}

.rz-dialog {
    overflow: hidden;
    border: 1px solid rgba(221, 222, 228, 0.95);
    border-radius: 22px;
    background: #FFFFFF;
    box-shadow: 0 34px 90px rgba(33, 35, 44, 0.21);
}

.rz-dialog-titlebar {
    position: relative;
    min-height: 88px;
    padding: 1.35rem 1.45rem 1rem;
    border-bottom: 1px solid rgba(225, 226, 231, 0.76);
    background: radial-gradient( circle at 18% 0%, rgba(193, 211, 251, 0.64), transparent 18rem ), radial-gradient( circle at 82% 0%, rgba(223, 207, 247, 0.72), transparent 20rem ), linear-gradient( 135deg, #EEF3FF 0%, #F3F0FD 52%, #FAFAFC 100% );
}

    .rz-dialog-titlebar::after {
        content: "";
        position: absolute;
        inset: 0;
        pointer-events: none;
        opacity: 0.35;
        background: linear-gradient( 32deg, transparent 0 44%, rgba(122, 141, 190, 0.13) 45% 46%, transparent 47% 100% ), linear-gradient( 150deg, transparent 0 56%, rgba(133, 111, 185, 0.10) 57% 58%, transparent 59% 100% );
    }

    .rz-dialog-title,
    .rz-dialog-titlebar > * {
        position: relative;
        z-index: 1;
    }

.rz-dialog-title {
    color: #343741;
    font-size: 1.06rem;
    font-weight: 720;
    letter-spacing: -0.018em;
}

.rz-dialog-titlebar-close {
    border-radius: 10px;
    background: rgba(255, 255, 255, 0.44);
}

    .rz-dialog-titlebar-close:hover {
        background: rgba(255, 255, 255, 0.72);
    }

.rz-dialog-content {
    padding: 1.35rem 1.45rem 1.5rem;
    background: #FFFFFF;
}


/* ---------------------------------------------------------------
   TABS - compact reference-style tabs
   --------------------------------------------------------------- */

.rz-tabview-nav {
    gap: 0.25rem;
    padding: 0.18rem;
    border: 1px solid #E4E5E9;
    border-radius: 11px;
    background: #F7F8FA;
}

    .rz-tabview-nav li {
        border-radius: 9px;
    }

        .rz-tabview-nav li a {
            border-radius: 9px;
            color: #7A7D84;
        }

        .rz-tabview-nav li.rz-tabview-selected {
            background: #FFFFFF;
            box-shadow: 0 3px 10px rgba(28, 31, 39, 0.06);
        }

            .rz-tabview-nav li.rz-tabview-selected a {
                color: #3B3E45;
            }

        .rz-tabview-nav li::after {
            display: none;
        }


/* ---------------------------------------------------------------
   SCHEDULER - airy week calendar like reference
   --------------------------------------------------------------- */

.rz-scheduler {
    overflow: hidden;
    border: 1px solid #E7E8EB;
    border-radius: 18px;
    background: #FFFFFF;
    box-shadow: 0 10px 30px rgba(29, 31, 39, 0.035);
}

.rz-scheduler-nav {
    min-height: 56px;
    padding: 0.65rem 0.8rem;
    border-bottom: 1px solid #ECEDEF;
    background: #FFFFFF;
}

    .rz-scheduler-nav .rz-button {
        min-height: 34px;
        border-radius: 9px;
        background: #F7F8F9;
        border: 1px solid #ECEDEF;
        color: #7A7D83;
    }

        .rz-scheduler-nav .rz-button:hover {
            background: #FFFFFF !important;
            border-color: #DFE1E5;
            color: #4F555C;
        }

        .rz-scheduler-nav .rz-button.rz-state-active,
        .rz-scheduler-nav .rz-button.rz-primary {
            background: #FFFFFF;
            border-color: #DDDFF0;
            color: #5C6488;
            box-shadow: 0 3px 10px rgba(55, 59, 78, 0.06) !important;
        }

.rz-view-header {
    min-height: 46px;
    background: #FBFBFC;
    border-color: #ECEDEF !important;
    color: #777A81;
    font-size: 0.76rem;
    font-weight: 650;
}

.rz-slot,
.rz-slot-header,
.rz-view-header {
    border-color: #ECEDEF !important;
}

.rz-slot-header,
.rz-slot-title {
    color: #A0A3AA;
    font-size: 0.70rem;
}

.rz-scheduler .rz-event {
    border: 1px solid rgba(151, 172, 216, 0.34);
    border-radius: 9px;
    background: linear-gradient( 180deg, #E7EEF9, #DEE8F6 );
    color: #52627A;
    box-shadow: 0 5px 14px rgba(75, 95, 130, 0.08);
}

    .rz-scheduler .rz-event:hover {
        border-color: #B8C9E8;
        background: linear-gradient( 180deg, #E1EAF8, #D8E4F5 );
        color: #455A75;
    }


/* Past/current/next slot inline colors from SchedulerSlotRender
   remain authoritative because they are inline styles. */


/* ---------------------------------------------------------------
   TIMELINE / SMALL APPOINTMENT CARDS
   --------------------------------------------------------------- */

.rz-timeline-point {
    color: #7D9D9A;
}

.rz-timeline-line {
    background: #E7E8EB;
}


/* ---------------------------------------------------------------
   DATA GRID - near-borderless list
   --------------------------------------------------------------- */

.rz-data-grid,
.rz-datatable {
    border: 1px solid #E7E8EB;
    border-radius: 17px;
    background: #FFFFFF;
    box-shadow: 0 10px 30px rgba(29, 31, 39, 0.035);
}

.rz-grid-table thead th,
.rz-datatable-thead th {
    background: #F9F9FA;
    border-color: #ECEDEF;
}

    .rz-grid-table thead th .rz-column-title {
        color: #777A81;
        font-size: 0.73rem;
        font-weight: 680;
    }

.rz-grid-table tbody td {
    border-color: #F0F0F2;
}

.rz-grid-table tbody tr:hover > td {
    background: #FAFAFB;
}

.rz-grid-table tbody tr.rz-state-highlight > td {
    background: #F1F5F5;
}

.rz-pager {
    border-top: 1px solid #ECEDEF;
    background: #FFFFFF;
}


/* ---------------------------------------------------------------
   ALERTS / BADGES
   --------------------------------------------------------------- */

.rz-alert {
    border-radius: 12px;
}

.rz-badge {
    min-height: 24px;
    padding-inline: 0.65rem;
    border-radius: 999px;
    font-size: 0.70rem;
    font-weight: 650;
}

    .rz-badge.rz-info {
        background: #E8EEF9;
        color: #65779B;
    }

    .rz-badge.rz-success {
        background: #E7F0E3;
        color: #66815E;
    }

    .rz-badge.rz-secondary {
        background: #F0F0F2;
        color: #85888F;
    }


/* ---------------------------------------------------------------
   HTML EDITOR
   --------------------------------------------------------------- */

.rz-html-editor {
    border-color: #E3E4E8;
    border-radius: 14px;
}

.rz-html-editor-toolbar {
    background: #F8F8FA;
    border-bottom-color: #E8E9EC;
}


/* ---------------------------------------------------------------
   DARK MODE - keep same soft geometry, darker surfaces
   --------------------------------------------------------------- */

html:has(link[href*="dark"]),
html[data-theme="dark"],
body[data-theme="dark"],
.dark-theme {
    --medilink-page: #17181B;
    --medilink-surface: #202125;
    --medilink-surface-soft: #27282D;
    --medilink-sidebar: #1D1E22;
    --medilink-border: #303137;
    --medilink-border-strong: #3A3C43;
    --medilink-text: #ECEDEF;
    --medilink-text-secondary: #B8BAC1;
    --medilink-text-muted: #8C8F97;
    --medilink-primary: #88ACA9;
    --medilink-primary-hover: #9ABAB7;
    --medilink-primary-soft: rgba(136, 172, 169, 0.15);
    --medilink-primary-softer: rgba(136, 172, 169, 0.075);
}

    html:has(link[href*="dark"]) .rz-dialog,
    html[data-theme="dark"] .rz-dialog,
    body[data-theme="dark"] .rz-dialog,
    .dark-theme .rz-dialog {
        background: #202125;
        border-color: #34353B;
    }

    html:has(link[href*="dark"]) .rz-dialog-titlebar,
    html[data-theme="dark"] .rz-dialog-titlebar,
    body[data-theme="dark"] .rz-dialog-titlebar,
    .dark-theme .rz-dialog-titlebar {
        background: radial-gradient( circle at 18% 0%, rgba(82, 104, 154, 0.35), transparent 18rem ), radial-gradient( circle at 82% 0%, rgba(104, 83, 143, 0.34), transparent 20rem ), #25262B;
    }

    html:has(link[href*="dark"]) .rz-dialog-content,
    html[data-theme="dark"] .rz-dialog-content,
    body[data-theme="dark"] .rz-dialog-content,
    .dark-theme .rz-dialog-content {
        background: #202125;
    }

    html:has(link[href*="dark"]) .rz-dialog-mask,
    html[data-theme="dark"] .rz-dialog-mask,
    body[data-theme="dark"] .rz-dialog-mask,
    .dark-theme .rz-dialog-mask {
        background: rgba(15, 16, 19, 0.72);
    }

/* ================================================================
   SMALL UI FIXES
   ================================================================ */

/* HTML editor: always keep the typing surface white for readability. */
.rz-html-editor-content {
    background: #FFFFFF !important;
    color: #2E3035 !important;
}

/* Keep the source view readable as well. */
.rz-html-editor-source.rz-textarea {
    background: #FFFFFF !important;
    color: #2E3035 !important;
}

/* Badge text/icons should be vertically and horizontally centered. */
.rz-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    vertical-align: middle;
    line-height: 1;
}