/*
 * Cliniweb premiumUI
 * Shared visual foundation for premium Cliniweb screens.
 *
 * Source of truth:
 *   - index.php / index.css for structural baseline
 *   - appointment_book.css for canonical premium finish
 *   - consult.php / consult.css as a reference adaptation
 *
 * Load order:
 *   base/shared CSS -> premiumUI.css -> screen-specific CSS
 */

/* ==========================================================================
   1. Font
   ========================================================================== */

@font-face {
    font-family: "Cliniweb Appointment Sans";
    src: url("font/OpenSans-VariableFont_wdth,wght.ttf") format("truetype");
    font-style: normal;
    font-weight: 300 800;
    font-display: swap;
}

/* ==========================================================================
   2. Canonical design tokens
   ========================================================================== */

:root {
    --premium-canvas: #f5f5f1;
    --premium-surface: #ffffff;

    --premium-ink: #233932;
    --premium-muted: #69756f;

    --premium-line: #e5e9e3;
    --premium-line-strong: #dde3db;
    --premium-soft: #f3f6f1;
    --premium-soft-2: #fbfcf9;

    --premium-accent: #245b4b;
    --premium-accent-dark: #194637;
    --premium-accent-soft: #eaf1eb;

    --premium-success: #42633b;
    --premium-success-soft: #eaf2e8;

    --premium-warning: #836d42;
    --premium-warning-soft: #f5eddf;

    --premium-danger: #9b3e39;
    --premium-danger-soft: #fff2f1;

    --premium-info: #4a657e;
    --premium-info-soft: #eaf0f4;

    --premium-radius-xs: 4px;
    --premium-radius-sm: 6px;
    --premium-radius-md: 8px;
    --premium-radius-lg: 13px;

    --premium-shadow-main:
        0 3px 5px rgba(39, 59, 36, .025),
        0 18px 40px -32px rgba(31, 56, 32, .20);

    --premium-shadow-action:
        0 2px 3px rgba(28, 57, 43, .10),
        inset 0 1px 0 rgba(255, 255, 255, .08);

    --premium-focus-border: #96b49c;
    --premium-focus-ring: 0 0 0 3px rgba(54, 98, 57, .08);

    --premium-page-width: 1460px;
    --premium-page-gutter: 64px;
}

/* ==========================================================================
   3. Premium scope / legacy Cliniweb variable bridge
   ========================================================================== */

.mg-premium {
    --mg-ink: var(--premium-ink);
    --mg-muted: var(--premium-muted);
    --mg-line: var(--premium-line);
    --mg-blue: var(--premium-accent);
    --mg-teal: var(--premium-accent);
    --mg-soft: var(--premium-soft);
    --mg-red: var(--premium-danger);

    /* Bridge legacy cw-panel/cw-button/cw-action tokens (clinical.css) onto
       the premium palette so screens keep working without redeclaring these
       per file. A screen-specific accent (e.g. --orders-accent) still wins
       when the screen's own stylesheet sets --cw-accent after this file. */
    --cw-bg: var(--premium-canvas);
    --cw-panel: var(--premium-surface);
    --cw-ink: var(--premium-ink);
    --cw-muted: var(--premium-muted);
    --cw-line: var(--premium-line);
    --cw-soft: var(--premium-soft);
    --cw-accent: var(--premium-accent);
    --cw-good: var(--premium-success);
    --cw-warn: var(--premium-warning);
    --cw-danger: var(--premium-danger);

    background: var(--premium-canvas);
    color: var(--premium-ink);
    font-family:
        "Cliniweb Appointment Sans",
        -apple-system,
        BlinkMacSystemFont,
        "Segoe UI",
        sans-serif;
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
}

.mg-premium,
.mg-premium * {
    box-sizing: border-box;
}

/* ==========================================================================
   4. Shared application chrome
   ========================================================================== */

.mg-premium .mg-appbar {
    background: rgba(255, 255, 252, .96);
    border-bottom: 1px solid var(--premium-line);
    box-shadow: none;
}

.mg-premium .mg-app-link {
    color: #66716b;
    font-size: .82rem;
    font-weight: 500;
}

.mg-premium .mg-app-link:hover,
.mg-premium .mg-app-link[aria-current="page"],
.mg-premium .mg-app-link.is-active {
    color: var(--premium-accent);
}

.mg-premium .mg-app-brand {
    color: var(--premium-ink);
    font-weight: 650;
    letter-spacing: -.03em;
}

/* Shared patient/context rail should inherit premium tokens rather than
   legacy blue/teal defaults. Keep structural layout in the owning stylesheet. */
.mg-premium .mg-patient-summary,
.mg-premium .mg-patient-rail {
    color: var(--premium-ink);
}

.mg-premium .mg-patient-summary a,
.mg-premium .mg-patient-rail a {
    color: inherit;
}

/* ==========================================================================
   4b. Shared cw_patient_page() toolbar heading
   --------------------------------------------------------------------------
   Every screen built on cw_patient_page() (procedures, prescription, script,
   invoice_summary, orders, sick_note, ...) renders the same toolbar markup:
   <span> kicker, <h1> heading, <p> service-date subtitle. Style it once here
   so the kicker/heading type scale matches the hand-built headers on
   consult.php and icd.php. Screens keep only genuine layout differences
   (e.g. script-workspace's inline action row) in their own stylesheet.
   ========================================================================== */

.mg-premium .cw-clinical-toolbar > div:first-child > span {
    color: var(--premium-muted);
    font-size: .65rem;
    font-weight: 600;
    letter-spacing: .14em;
    text-transform: uppercase;
}

.mg-premium .cw-clinical-toolbar h1 {
    margin: 7px 0 5px;
    color: var(--premium-ink);
    font-size: clamp(1.55rem, 2.2vw, 2.15rem);
    font-weight: 550;
    letter-spacing: -.04em;
    line-height: 1.2;
}

.mg-premium .cw-clinical-toolbar p,
.mg-premium .cw-clinical-toolbar .cw-subtle {
    color: var(--premium-muted);
    font-size: .78rem;
}

/* ==========================================================================
   4c. Shared legacy cw-panel / cw-button / cw-action refinements
   --------------------------------------------------------------------------
   clinical.css's base treatment (8px radius, flat shadow, unvarnished hover)
   predates premiumUI. These bring it to the canonical finish without every
   screen restating the same radius/shadow/hover values.
   ========================================================================== */

.mg-premium .cw-panel {
    border-radius: var(--premium-radius-lg);
    box-shadow: var(--premium-shadow-main);
}

.mg-premium .cw-panel > h2 {
    font-weight: 600;
    letter-spacing: -.02em;
}

.mg-premium .cw-empty {
    border-color: var(--premium-line);
    background: var(--premium-soft-2);
}

.mg-premium .cw-button,
.mg-premium .cw-action {
    border-radius: var(--premium-radius-md);
    font-weight: 550;
}

.mg-premium .cw-button-primary {
    box-shadow: var(--premium-shadow-action);
}

.mg-premium .cw-button-primary:hover {
    background: var(--premium-accent-dark);
    border-color: var(--premium-accent-dark);
    color: #fff;
}

/* ==========================================================================
   5. Page foundation
   ========================================================================== */

.pui-page {
    width: min(var(--premium-page-width), calc(100% - var(--premium-page-gutter)));
    margin: 0 auto;
    padding: 30px 0 48px;
    color: var(--premium-ink);
}

.pui-page a {
    color: inherit;
}

.pui-stack {
    display: grid;
    gap: 24px;
}

/* ==========================================================================
   6. Typography
   ========================================================================== */

.pui-kicker {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    color: var(--premium-muted);
    font-size: .65rem;
    font-weight: 600;
    letter-spacing: .14em;
    text-transform: uppercase;
}

.pui-kicker i,
.pui-kicker .icon {
    color: var(--premium-accent);
}

.pui-title {
    margin: 7px 0 5px;
    color: var(--premium-ink);
    font-size: clamp(1.55rem, 2.2vw, 2.15rem);
    font-weight: 550;
    line-height: 1.2;
    letter-spacing: -.04em;
}

.pui-subtitle,
.pui-muted {
    color: var(--premium-muted);
}

.pui-subtitle {
    margin: 0;
    font-size: .78rem;
    line-height: 1.5;
}

.pui-section-title {
    margin: 0;
    color: var(--premium-ink);
    font-size: 1.05rem;
    font-weight: 600;
    line-height: 1.25;
    letter-spacing: -.025em;
}

.pui-section-copy {
    margin: 4px 0 0;
    color: var(--premium-muted);
    font-size: .76rem;
    line-height: 1.5;
}

.pui-meta {
    color: var(--premium-muted);
    font-size: .7rem;
    line-height: 1.45;
}

/* ==========================================================================
   7. Surfaces
   ========================================================================== */

.pui-surface {
    background: var(--premium-surface);
    border: 1px solid #e2e7df;
    border-radius: var(--premium-radius-lg);
    box-shadow: var(--premium-shadow-main);
}

.pui-surface-subtle {
    background: var(--premium-soft-2);
    border: 1px solid #e8ece3;
    border-radius: var(--premium-radius-md);
}

.pui-section-flat {
    border-bottom: 1px solid var(--premium-line);
}

.pui-divider {
    height: 1px;
    border: 0;
    background: var(--premium-line);
}

/* ==========================================================================
   8. Buttons / actions
   ========================================================================== */

.pui-button {
    min-height: 40px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    border: 1px solid var(--premium-line-strong);
    border-radius: var(--premium-radius-md);
    padding: 0 13px;
    background: #fff;
    color: #506652;
    font: inherit;
    font-size: .79rem;
    font-weight: 550;
    line-height: 1;
    text-decoration: none;
    cursor: pointer;
    transition:
        border-color .15s ease,
        background-color .15s ease,
        color .15s ease,
        box-shadow .15s ease,
        transform .15s ease;
}

.pui-button:hover:not(:disabled) {
    border-color: #b9cdbd;
    background: var(--premium-soft);
    color: var(--premium-accent);
}

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

.pui-button-primary {
    border-color: var(--premium-accent);
    background: var(--premium-accent);
    color: #fff;
    font-weight: 600;
    box-shadow: var(--premium-shadow-action);
}

.pui-button-primary:hover:not(:disabled) {
    border-color: var(--premium-accent-dark);
    background: var(--premium-accent-dark);
    color: #fff;
}

.pui-button-danger {
    border-color: #e9d6d1;
    background: #fff;
    color: var(--premium-danger);
}

.pui-button-danger:hover:not(:disabled) {
    border-color: #debcb6;
    background: var(--premium-danger-soft);
    color: var(--premium-danger);
}

.pui-button-quiet {
    border-color: transparent;
    background: transparent;
    box-shadow: none;
}

.pui-button-quiet:hover:not(:disabled) {
    border-color: #dce5d7;
    background: #f1f5ec;
}

.pui-button:disabled,
.pui-icon-button:disabled {
    opacity: .5;
    cursor: not-allowed;
    transform: none;
}

.pui-icon-button {
    width: 36px;
    height: 36px;
    display: inline-grid;
    place-items: center;
    border: 1px solid var(--premium-line-strong);
    border-radius: var(--premium-radius-md);
    background: #fff;
    color: var(--premium-muted);
    cursor: pointer;
}

.pui-icon-button:hover:not(:disabled) {
    border-color: #b9cdbd;
    background: var(--premium-soft);
    color: var(--premium-accent);
}

/* ==========================================================================
   9. Forms
   ========================================================================== */

.pui-input,
.pui-select,
.pui-textarea {
    width: 100%;
    border: 1px solid #e2e7df;
    border-radius: 7px;
    background: var(--premium-soft-2);
    color: var(--premium-ink);
    font: inherit;
    font-size: .82rem;
    transition:
        border-color .15s ease,
        background-color .15s ease,
        box-shadow .15s ease;
}

.pui-input,
.pui-select {
    min-height: 40px;
    padding: 0 11px;
}

.pui-textarea {
    min-height: 120px;
    padding: 12px 14px;
    line-height: 1.55;
    resize: vertical;
}

.pui-input::placeholder,
.pui-textarea::placeholder {
    color: #778371;
    opacity: 1;
}

.pui-input:focus,
.pui-select:focus,
.pui-textarea:focus {
    border-color: var(--premium-focus-border);
    background: #fff;
    box-shadow: var(--premium-focus-ring);
    outline: 0;
}

.pui-field-label {
    display: block;
    margin-bottom: 6px;
    color: var(--premium-muted);
    font-size: .72rem;
    font-weight: 550;
}

/* ==========================================================================
   10. Tabs
   ========================================================================== */

.pui-tabs {
    display: flex;
    align-items: flex-end;
    gap: 18px;
    border-bottom: 1px solid var(--premium-line);
}

.pui-tab {
    min-height: 40px;
    display: inline-flex;
    align-items: center;
    gap: 7px;
    border: 0;
    border-bottom: 2px solid transparent;
    border-radius: 0;
    padding: 8px 2px;
    background: transparent;
    color: #647162;
    font: inherit;
    font-size: .75rem;
    font-weight: 500;
    cursor: pointer;
}

.pui-tab:hover {
    color: var(--premium-accent);
}

.pui-tab[aria-selected="true"],
.pui-tab.is-active {
    border-bottom-color: var(--premium-accent);
    color: var(--premium-accent);
    font-weight: 650;
}

/* ==========================================================================
   11. Status / badges
   ========================================================================== */

.pui-status {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    border-radius: 5px;
    padding: 2px 7px;
    background: #f0f2ed;
    color: #687160;
    font-size: .68rem;
    font-weight: 550;
    line-height: 1.55;
}

.pui-status-success {
    background: var(--premium-success-soft);
    color: var(--premium-success);
}

.pui-status-warning {
    background: var(--premium-warning-soft);
    color: var(--premium-warning);
}

.pui-status-danger {
    background: var(--premium-danger-soft);
    color: var(--premium-danger);
}

.pui-status-info {
    background: var(--premium-info-soft);
    color: var(--premium-info);
}

.pui-count {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 20px;
    border-radius: 5px;
    padding: 2px 6px;
    background: #edf1e7;
    color: #66775c;
    font-size: .65rem;
    font-weight: 600;
}

/* ==========================================================================
   12. Alerts
   ========================================================================== */

.pui-alert {
    border: 1px solid #e0d5bf;
    border-left: 3px solid #c99236;
    border-radius: 7px;
    padding: 10px 12px;
    background: #faf5eb;
    color: #725d34;
    font-size: .78rem;
    line-height: 1.5;
}

.pui-alert-danger {
    border-color: #ead4d0;
    border-left-color: var(--premium-danger);
    background: #fff4f2;
    color: var(--premium-danger);
}

/* ==========================================================================
   13. Dialogs
   ========================================================================== */

.pui-dialog {
    border: 1px solid #e2e7df;
    border-radius: 12px;
    background: #fff;
    color: var(--premium-ink);
    box-shadow: 0 18px 45px -18px rgba(31, 56, 32, .30);
}

/* ==========================================================================
   14. Shared focus behaviour
   ========================================================================== */

.mg-premium :is(
    a,
    button,
    input,
    select,
    textarea,
    summary,
    [tabindex]
):focus-visible {
    outline: 2px solid #547b42;
    outline-offset: 2px;
}

/* Pill-shaped search fields draw their own focus-within highlight on the
   wrapper, so the input's own square focus-visible outline is redundant
   and clashes with the rounded border. */
.mg-premium :is(
    .icd-search-field,
    .proc-search-field,
    .script-search-field,
    .ap-patient-filter,
    .mg-patient-topsearch,
    .mg-patient-function-field,
    .ac-table-search-field,
    .settings-search,
    .settings-contact-search,
    .email-log-search,
    .dv-filter-search
) input:is(:focus, :focus-visible) {
    outline: 0;
    box-shadow: none;
}

/* The pathology search input carries its own ring (.pui-input:focus). */
.mg-premium .path-search-field input:focus-visible {
    outline: 0;
}

/* ==========================================================================
   15. Selection / hover helpers
   ========================================================================== */

.pui-row {
    transition: background-color .15s ease;
}

.pui-row:hover {
    background: #fafcf7;
}

.pui-selected {
    background: #edf3e9;
    color: #365231;
}

/* ==========================================================================
   16. Accessibility helpers
   ========================================================================== */

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

/* ==========================================================================
   17. Responsive foundation
   ========================================================================== */

@media (max-width: 1100px) {
    .pui-page {
        width: calc(100% - 44px);
        padding-top: 24px;
    }
}

@media (max-width: 980px) {
    .pui-page {
        width: calc(100% - 36px);
        padding: 22px 0 36px;
    }

    .pui-stack {
        gap: 18px;
    }
}

@media (max-width: 600px) {
    .pui-page {
        width: calc(100% - 28px);
        padding: 18px 0 32px;
    }

    .pui-title {
        font-size: 1.55rem;
    }

    .pui-button {
        min-height: 41px;
    }
}

/* ==========================================================================
   18. Migration aliases
   --------------------------------------------------------------------------
   These aliases intentionally cover only safe shared visual primitives.
   Screen-specific layout stays in the screen stylesheet.
   ========================================================================== */

.mg-premium :is(
    .consult-button,
    .consult-icon-button,
    .consult-link-button
) {
    border-color: var(--premium-line-strong);
    border-radius: var(--premium-radius-md);
    font-weight: 550;
}

.mg-premium :is(
    .consult-button-primary
) {
    border-color: var(--premium-accent);
    background: var(--premium-accent);
    color: #fff;
    font-weight: 600;
    box-shadow: var(--premium-shadow-action);
}

.mg-premium :is(
    .consult-button-primary
):hover:not(:disabled) {
    border-color: var(--premium-accent-dark);
    background: var(--premium-accent-dark);
    color: #fff;
}


/* ========================================================================== 
   19. Shared section composition
   --------------------------------------------------------------------------
   Reusable layout primitives distilled from the Appointment Book premium
   finish. These are intentionally structural and screen-agnostic.
   ========================================================================== */

.pui-section-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 18px;
}

.pui-section-head > :first-child {
    min-width: 0;
}

/* ========================================================================== 
   20. Shared form scope
   --------------------------------------------------------------------------
   Use on a screen/workflow root when legacy markup does not yet place pui-input
   / pui-select classes on every control. Hidden/checkbox/radio/button inputs are
   intentionally excluded.
   ========================================================================== */

.pui-form-scope :is(
    input[type="text"],
    input[type="search"],
    input[type="number"],
    input[type="date"],
    input[type="time"],
    input[type="datetime-local"],
    input[type="month"],
    input[type="week"],
    input[type="email"],
    input[type="tel"],
    input[type="url"],
    input[type="password"],
    select,
    textarea
) {
    width: 100%;
    min-height: 40px;
    border: 1px solid #e2e7df;
    border-radius: 7px;
    padding: 0 11px;
    background: var(--premium-soft-2);
    color: var(--premium-ink);
    font: inherit;
    font-size: .82rem;
    transition:
        border-color .15s ease,
        background-color .15s ease,
        box-shadow .15s ease;
}

.pui-form-scope textarea {
    min-height: 120px;
    padding: 12px 14px;
    line-height: 1.55;
    resize: vertical;
}

.pui-form-scope :is(input, textarea)::placeholder {
    color: #778371;
    opacity: 1;
}

.pui-form-scope :is(
    input[type="text"],
    input[type="search"],
    input[type="number"],
    input[type="date"],
    input[type="time"],
    input[type="datetime-local"],
    input[type="month"],
    input[type="week"],
    input[type="email"],
    input[type="tel"],
    input[type="url"],
    input[type="password"],
    select,
    textarea
):focus {
    border-color: var(--premium-focus-border);
    background: #fff;
    box-shadow: var(--premium-focus-ring);
    outline: 0;
}

/* ========================================================================== 
   21. Shared data table
   ========================================================================== */

.pui-table-wrap {
    width: 100%;
    overflow-x: auto;
    border: 1px solid var(--premium-line);
    border-radius: var(--premium-radius-md);
    background: var(--premium-surface);
}

.pui-table {
    width: 100%;
    border-collapse: collapse;
    color: var(--premium-ink);
    font-size: .78rem;
}

.pui-table th {
    padding: 9px 10px;
    background: #fafbf8;
    color: #657069;
    font-size: .66rem;
    font-weight: 650;
    letter-spacing: .035em;
    text-align: left;
    text-transform: uppercase;
    white-space: nowrap;
}

.pui-table td {
    padding: 9px 10px;
    border-top: 1px solid #edf0eb;
    vertical-align: middle;
}

.pui-table tbody tr {
    transition: background-color .12s ease;
}

.pui-table tbody tr:hover {
    background: #fafcf8;
}

/* ========================================================================== 
   22. Shared progressive disclosure
   ========================================================================== */

.pui-disclosure {
    border-top: 1px solid var(--premium-line);
    padding-top: 12px;
}

.pui-disclosure > summary {
    width: max-content;
    max-width: 100%;
    color: #56685b;
    font-size: .75rem;
    font-weight: 600;
    cursor: pointer;
}

.pui-disclosure[open] > summary {
    color: var(--premium-accent);
}

@media (max-width: 680px) {
    .pui-section-head {
        align-items: stretch;
        flex-direction: column;
    }
}
/*
 * IMPORTANT
 *
 * Do not add screen-specific layout rules here just because several screens
 * happen to look similar.
 *
 * premiumUI.css owns the shared visual language.
 * The owning screen stylesheet owns workflow and layout.
 */


/* ========================================================================== 
   23. Shared date-context picker
   --------------------------------------------------------------------------
   Quiet date context for service dates, appointment dates, report dates, etc.
   clinicalShell.php uses this beneath the page title; puiDatePicker.js owns the
   reusable modal and URL/form date-change behaviour.
   ========================================================================== */

.pui-date-context {
    display: inline-flex;
    align-items: center;
    margin: 0;
}

.cw-service-date-line {
    margin: 0;
}

.pui-date-context-trigger {
    display: inline-flex;
    align-items: baseline;
    gap: 6px;
    border: 0;
    border-radius: 0;
    padding: 0;
    background: transparent;
    color: var(--premium-muted);
    font: inherit;
    line-height: 1.45;
    cursor: pointer;
    text-align: left;
}

.pui-date-context-label,
.pui-date-context-value {
    font-size: .78rem;
}

.pui-date-context-label {
    color: var(--premium-muted);
    font-weight: 400;
    white-space: nowrap;
}

.pui-date-context-value {
    color: var(--premium-muted);
    font-weight: 500;
    letter-spacing: -.01em;
    text-decoration: underline;
    text-decoration-color: transparent;
    text-underline-offset: 3px;
    transition: color .15s ease, text-decoration-color .15s ease;
    white-space: nowrap;
}

.pui-date-context-trigger:hover .pui-date-context-value,
.pui-date-context-trigger:focus-visible .pui-date-context-value {
    color: var(--premium-accent);
    text-decoration-color: currentColor;
}

.pui-date-context-trigger:focus-visible {
    outline: 2px solid #547b42;
    outline-offset: 3px;
}

.pui-date-modal {
    position: fixed;
    inset: 0;
    z-index: 700;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
    background: rgba(27, 45, 37, .34);
}

.pui-date-modal[hidden] {
    display: none !important;
}

.pui-date-modal-panel {
    width: min(390px, 100%);
    border: 1px solid #e2e7df;
    border-radius: 12px;
    padding: 18px;
    background: #fff;
    color: var(--premium-ink);
    box-shadow: 0 18px 45px -18px rgba(31, 56, 32, .30);
}

.pui-date-modal-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
    margin-bottom: 18px;
}

.pui-date-modal-kicker {
    display: block;
    margin-bottom: 4px;
    color: var(--premium-muted);
    font-size: .64rem;
    font-weight: 600;
    letter-spacing: .12em;
    text-transform: uppercase;
}

.pui-date-modal-head h2 {
    margin: 0;
    color: var(--premium-ink);
    font-size: 1rem;
    font-weight: 600;
    letter-spacing: -.025em;
    line-height: 1.25;
}

.pui-date-modal-close {
    flex: 0 0 auto;
    font-size: 1.05rem;
    line-height: 1;
}

.pui-date-modal-field {
    display: grid;
    gap: 6px;
}

.pui-date-modal-field > span {
    color: var(--premium-muted);
    font-size: .7rem;
    font-weight: 550;
}

.pui-date-modal-actions {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-top: 18px;
    padding-top: 14px;
    border-top: 1px solid var(--premium-line);
}

.pui-date-modal-actions-right {
    display: flex;
    align-items: center;
    gap: 8px;
}

html.pui-modal-open,
html.pui-modal-open body {
    overflow: hidden;
}

@media (max-width: 600px) {
    .pui-date-context-trigger {
        max-width: 100%;
        flex-wrap: wrap;
    }

    .pui-date-modal {
        align-items: flex-end;
        padding: 12px;
    }

    .pui-date-modal-panel {
        width: 100%;
        border-radius: 12px;
    }
}