@charset "utf-8";

/* Pull in the toast styles via CSS @import — avoids needing a new
   <link> tag in the master (which would touch precompiled-DLL slots). */
@import url("../notify/Toast.css");

/* ──────────────────────────────────────────────────────────────
   APP LOGO + LOADING OVERLAY
   Logo is rendered as a CSS background-image so the path resolves
   relative to this CSS file (always at /THEME/), not the page —
   works correctly from pages in any subfolder.
────────────────────────────────────────────────────────────── */
.cp-app-logo {
    display: inline-block;
    width: 96px;
    height: 32px;
    background: url("../Images/logo.svg") no-repeat center / contain;
    flex-shrink: 0;
    user-select: none;
}

.cp-app-logo.is-mark-only {
    width: 32px;
    height: 32px;
    background-position: center top;
    background-size: 100% auto;
    clip-path: inset(0 0 22% 0);
    -webkit-clip-path: inset(0 0 22% 0);
}

.cp-loader {
    position: fixed;
    inset: 0;
    z-index: 9999;
    display: none;
    align-items: center;
    justify-content: center;
    background: color-mix(in srgb, var(--nb1) 78%, transparent);
    -webkit-backdrop-filter: blur(4px);
    backdrop-filter: blur(4px);
    opacity: 0;
    transition: opacity 200ms cubic-bezier(.33,0,.67,1);
    pointer-events: none;
}
.cp-loader.is-active {
    display: flex;
    opacity: 1;
    pointer-events: auto;
}
.cp-loader-stage {
    position: relative;
    width: 132px;
    height: 132px;
    display: flex;
    align-items: center;
    justify-content: center;
}
.cp-loader-logo {
    width: 84px;
    height: 63px;
    background: url("../Images/logo.svg") no-repeat center / contain;
    animation: cpLogoPulse 1.6s cubic-bezier(.33,0,.67,1) infinite;
    z-index: 2;
}
.cp-loader-ring {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    border-radius: 50%;
    border: 3px solid var(--ns2);
    border-top-color: var(--brand-fg);
    border-right-color: var(--brand-fg);
    box-sizing: border-box;
    z-index: 1;
    animation: cpRingSpin 1.1s linear infinite;
}
.cp-loader-label {
    position: absolute;
    bottom: -28px;
    left: 50%;
    transform: translateX(-50%);
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.4px;
    text-transform: uppercase;
    color: var(--nf3);
    white-space: nowrap;
}
@keyframes cpLogoPulse {
    0%, 100% { transform: scale(1);    opacity: 1; }
    50%      { transform: scale(0.92); opacity: 0.85; }
}
@keyframes cpRingSpin { to { transform: rotate(360deg); } }

@media (prefers-reduced-motion: reduce) {
    .cp-loader-logo { animation: none; }
    .cp-loader-ring { animation-duration: 4s; }
}

html,
body {
    background: var(--nb2);
    color: var(--nf1);
}

body,
input,
select,
textarea,
button {
    font-family: var(--fontFamilyBase);
}

.cp-card,
.content-section,
.patient-fluent .content-section,
.school-reception-fluent .cp-card,
.school-reception-fluent .content-section,
.personalize-shell .preview-shell,
.personalize-shell .mode-card,
.personalize-shell .accent-item {
    background: var(--surface-card);
    border-color: var(--ns2);
}

input[type="text"],
input[type="password"],
input[type="email"],
input[type="search"],
input[type="tel"],
input[type="number"],
input[type="date"],
input[type="time"],
input[type="datetime-local"],
select,
textarea,
.form-control,
.school-reception-fluent .sr-login-field-wrap input,
.school-reception-fluent .sr-login-field-wrap select,
.school-reception-fluent .sr-login-field-wrap .form-control,
.patient-fluent input[type="text"],
.patient-fluent input[type="password"],
.patient-fluent input[type="email"],
.patient-fluent input[type="number"],
.patient-fluent input[type="search"],
.patient-fluent input[type="tel"],
.patient-fluent select,
.patient-fluent textarea,
.patient-fluent .form-control {
    box-sizing: border-box !important;
    width: 100% !important;
    height: 32px !important;
    padding: 0 8px !important;
    background: var(--field-bg) !important;
    border: 1px solid var(--field-border) !important;
    border-radius: var(--r-sm) !important;
    color: var(--nf1) !important;
    font-family: inherit !important;
    font-size: 14px !important;
    line-height: 20px !important;
    vertical-align: middle !important;
    box-shadow: inset 0 0 0 1px var(--field-inset-highlight) !important;
    outline: none !important;
    -webkit-appearance: none;
    transition: border-color var(--durationFast) var(--curveEasyEase), box-shadow var(--durationFast) var(--curveEasyEase), background var(--durationFast) var(--curveEasyEase), color var(--durationFast) var(--curveEasyEase);
}

textarea,
.patient-fluent textarea {
    height: auto !important;
    min-height: 64px !important;
    padding: 8px !important;
    line-height: 20px !important;
    resize: vertical;
}

/* Inputs that sit inside a prefix-icon wrapper need extra left padding so
   the icon doesn't overlap the placeholder/value text. The global rule
   above forces 0 8px; these wrappers re-claim the left gutter. */
.field-wrap input,
.field-wrap select,
.cp-prefix-field input,
.cp-prefix-field select {
    padding-left: 34px !important;
}

/* Suffix slot (e.g. password eye toggle, calendar icon) */
.field-wrap.has-suffix input,
.cp-suffix-field input {
    padding-right: 34px !important;
}

/* ── Label-above-field wrapper (used by DOM-restructuring JS in controls) ── */
.sd-field {
    display: inline-flex;
    flex-direction: column;
    gap: 4px;
    vertical-align: top;
    padding: 4px 8px;
    box-sizing: border-box;
}
.sd-field > [class*="col-"] {
    width: 100% !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
    float: none;
}
.sd-field-label {
    display: block;
    font-size: 12px;
    font-weight: 600;
    color: var(--nf2);
    margin-bottom: 0;
}

label {
    display: block;
    font-size: 12px;
    font-weight: 400;
    line-height: 16px;
    color: var(--nf2);
    margin-bottom: 4px;
    text-transform: none;
    letter-spacing: 0;
}

input[type="text"]:hover,
input[type="password"]:hover,
input[type="email"]:hover,
input[type="search"]:hover,
input[type="tel"]:hover,
input[type="number"]:hover,
select:hover,
textarea:hover,
.form-control:hover {
    border-color: var(--field-border-hover) !important;
    background: var(--field-bg-hover) !important;
}

input[type="text"]::placeholder,
input[type="password"]::placeholder,
input[type="email"]::placeholder,
input[type="search"]::placeholder,
input[type="tel"]::placeholder,
input[type="number"]::placeholder,
textarea::placeholder,
.form-control::placeholder {
    color: var(--field-placeholder) !important;
    opacity: 1;
}

input[type="text"]:focus,
input[type="password"]:focus,
input[type="email"]:focus,
input[type="search"]:focus,
input[type="tel"]:focus,
input[type="number"]:focus,
select:focus,
textarea:focus,
.form-control:focus {
    background: var(--field-bg) !important;
    border-color: var(--field-border-focus) !important;
    box-shadow: 0 0 0 1px var(--field-focus-ring), inset 0 0 0 1px var(--field-inset-highlight) !important;
    outline: none !important;
}

input[readonly],
textarea[readonly],
select[readonly],
input[disabled],
textarea[disabled],
select[disabled],
.form-control[readonly],
.form-control[disabled] {
    background: var(--field-bg-readonly) !important;
    color: var(--nf2) !important;
    border-color: var(--ns1) !important;
    cursor: not-allowed;
}

/* Kill browser autofill yellow/blue overlay — paint the themed field bg
   underneath the autofill via a 1000px inner shadow trick. */
input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus,
input:-webkit-autofill:active,
textarea:-webkit-autofill,
select:-webkit-autofill {
    -webkit-box-shadow: 0 0 0 1000px var(--field-bg) inset !important;
    box-shadow: 0 0 0 1000px var(--field-bg) inset !important;
    -webkit-text-fill-color: var(--nf1) !important;
    caret-color: var(--nf1) !important;
    border: 1px solid var(--field-border) !important;
    transition: background-color 9999s ease-in-out 0s !important;
}

input:-webkit-autofill:focus {
    -webkit-box-shadow: 0 0 0 1000px var(--field-bg) inset, 0 0 0 1px var(--brand-80) !important;
    box-shadow: 0 0 0 1000px var(--field-bg) inset, 0 0 0 1px var(--brand-80) !important;
    border-color: var(--brand-fg) !important;
}

select,
.school-reception-fluent .sr-login-field-wrap select,
.patient-fluent select {
    padding-right: 42px !important;
    background-image:
        linear-gradient(45deg, transparent 50%, var(--nf3) 50%),
        linear-gradient(135deg, var(--nf3) 50%, transparent 50%) !important;
    background-position:
        calc(100% - 22px) 50%,
        calc(100% - 16px) 50% !important;
    background-size: 6px 6px, 6px 6px !important;
    background-repeat: no-repeat !important;
    appearance: none;
    -webkit-appearance: none;
}

/* ──────────────────────────────────────────────────────────────
   CUSTOM SELECT — Fluent 2 Combobox
   Built by buildCustomSelects() in ClinicProMaster.master so every
   <select> across the app renders identically to the Login dropdown.
────────────────────────────────────────────────────────────── */
.cs-wrap {
    position: relative;
    display: block;
    width: 100%;
}

select.cs-hidden { display: none !important; }

.cs-trigger {
    box-sizing: border-box;
    display: flex;
    align-items: center;
    width: 100%;
    height: 32px;
    padding: 0 8px;
    background: var(--field-bg);
    border: 1px solid var(--field-border);
    border-radius: var(--r-sm);
    color: var(--nf1);
    font-family: inherit;
    font-size: 14px;
    line-height: 20px;
    cursor: pointer;
    user-select: none;
    outline: none;
    transition: border-color var(--durationFast) var(--curveEasyEase),
                background var(--durationFast) var(--curveEasyEase),
                color var(--durationFast) var(--curveEasyEase);
}

.cs-trigger:hover  { background: var(--field-bg-hover); border-color: var(--field-border-hover); }
.cs-trigger:focus,
.cs-trigger.open   { border-color: var(--brand-fg); }

.cs-trigger-text {
    flex: 1 1 auto;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 14px;
}

.cs-trigger-text.is-placeholder { color: var(--field-placeholder); }

.cs-trigger-arrow {
    font-size: 10px;
    color: var(--nf3);
    margin-left: 8px;
    flex-shrink: 0;
    transition: transform 0.15s ease, color 0.15s ease;
}

.cs-trigger:hover .cs-trigger-arrow,
.cs-trigger.open  .cs-trigger-arrow { color: var(--brand-fg); }
.cs-trigger.open  .cs-trigger-arrow { transform: rotate(180deg); }

.cs-panel {
    display: none;
    position: absolute;
    top: calc(100% + 2px);
    left: 0; right: 0;
    background: var(--nb1);
    border: 1px solid var(--ns2);
    border-radius: var(--r-sm);
    box-shadow: var(--shadow16, 0 8px 16px var(--scrim-medium), 0 0 2px var(--scrim-light));
    z-index: 1300;
    overflow: hidden;
    padding: 4px 0;
    max-height: 280px;
    overflow-y: auto;
}

.cs-panel.open { display: block; }

.cs-option {
    box-sizing: border-box;
    display: flex;
    align-items: center;
    gap: 8px;
    height: 32px;
    padding: 0 12px;
    font-size: 14px;
    font-family: inherit;
    color: var(--nf1);
    cursor: pointer;
    transition: background 0.08s ease, color 0.08s ease;
}

.cs-option:hover    { background: var(--nb1-hover); }
.cs-option.selected { color: var(--brand-fg); font-weight: 600; }

.cs-option-check {
    font-size: 11px;
    width: 14px;
    flex-shrink: 0;
    opacity: 0;
    color: var(--brand-fg);
}

.cs-option.selected .cs-option-check { opacity: 1; }

:where(button:not(.nav-toggle):not(.theme-toggle):not(.eye-btn):not(.mobile-menu-btn):not(.support-fab):not(.support-close)),
:where(input[type="button"]),
:where(input[type="submit"]),
:where(.btn),
:where(.btn-signin),
:where(.sr-btn-primary),
:where(.sr-btn-secondary),
:where(.patient-quick-link),
:where(.patient-fluent .patient-icon-btn) {
    box-sizing: border-box !important;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    height: 32px !important;
    padding: 0 12px !important;
    border-radius: var(--r-sm) !important;
    border: 1px solid var(--btn-secondary-border) !important;
    background: var(--btn-secondary-bg) !important;
    background-image: none !important;
    color: var(--btn-secondary-fg) !important;
    font-family: inherit !important;
    font-size: 14px !important;
    font-weight: 600 !important;
    line-height: 20px !important;
    text-transform: none !important;
    letter-spacing: 0 !important;
    white-space: nowrap;
    cursor: pointer;
    text-decoration: none !important;
    text-shadow: none !important;
    transition: background var(--durationFast) var(--curveEasyEase), border-color var(--durationFast) var(--curveEasyEase), color var(--durationFast) var(--curveEasyEase), box-shadow var(--durationFast) var(--curveEasyEase);
    box-shadow: none !important;
}

:where(button:not(.nav-toggle):not(.theme-toggle):not(.eye-btn):not(.mobile-menu-btn):not(.support-fab):not(.support-close)):hover,
:where(input[type="button"]):hover,
:where(input[type="submit"]):hover,
:where(.btn):hover,
:where(.btn-signin):hover,
:where(.sr-btn-primary):hover,
:where(.sr-btn-secondary):hover,
:where(.patient-quick-link):hover,
:where(.patient-fluent .patient-icon-btn):hover {
    background: var(--btn-secondary-bg-hover) !important;
    background-image: none !important;
    border-color: color-mix(in srgb, var(--ns1) 60%, var(--brand-fg) 40%) !important;
    color: var(--btn-secondary-fg) !important;
    box-shadow: 0 1px 2px color-mix(in srgb, var(--nf1) 8%, transparent) !important;
}

:where(button:not(.nav-toggle):not(.theme-toggle):not(.eye-btn):not(.mobile-menu-btn):not(.support-fab):not(.support-close)):active,
:where(input[type="button"]):active,
:where(input[type="submit"]):active,
:where(.btn):active,
:where(.btn-signin):active,
:where(.sr-btn-primary):active,
:where(.sr-btn-secondary):active,
:where(.patient-quick-link):active,
:where(.patient-fluent .patient-icon-btn):active {
    background: var(--btn-secondary-bg-pressed) !important;
    background-image: none !important;
}

.btn-primary,
input[type="submit"].btn-primary,
input[type="submit"].btn-signin,
input[type="submit"].sr-btn-primary,
input[type="submit"].primary-action,
.sr-btn-primary,
.btn-signin,
.patient-fluent .primary-action,
.patient-fluent input.primary-action,
.patient-fluent button.primary-action,
.patient-fluent a.primary-action {
    background: var(--btn-primary-bg) !important;
    background-image: none !important;
    border-color: var(--btn-primary-border) !important;
    color: var(--btn-primary-fg) !important;
    box-shadow: 0 1px 2px color-mix(in srgb, var(--brand-fg) 28%, transparent),
                inset 0 1px 0 color-mix(in srgb, var(--nf-on-brand) 14%, transparent) !important;
}

.btn-primary:hover,
input[type="submit"].btn-primary:hover,
input[type="submit"].btn-signin:hover,
input[type="submit"].sr-btn-primary:hover,
input[type="submit"].primary-action:hover,
.sr-btn-primary:hover,
.btn-signin:hover,
.patient-fluent .primary-action:hover,
.patient-fluent input.primary-action:hover,
.patient-fluent button.primary-action:hover,
.patient-fluent a.primary-action:hover {
    background: var(--btn-primary-bg-hover) !important;
    border-color: var(--btn-primary-bg-hover) !important;
    color: var(--btn-primary-fg) !important;
    box-shadow: 0 2px 4px color-mix(in srgb, var(--brand-fg) 36%, transparent),
                inset 0 1px 0 color-mix(in srgb, var(--nf-on-brand) 16%, transparent) !important;
}

.btn-primary:active,
input[type="submit"].btn-primary:active,
input[type="submit"].btn-signin:active,
input[type="submit"].sr-btn-primary:active,
input[type="submit"].primary-action:active,
.sr-btn-primary:active,
.btn-signin:active,
.patient-fluent .primary-action:active,
.patient-fluent input.primary-action:active,
.patient-fluent button.primary-action:active,
.patient-fluent a.primary-action:active {
    background: var(--btn-primary-bg-pressed) !important;
    border-color: var(--btn-primary-bg-pressed) !important;
    color: var(--btn-primary-fg) !important;
    box-shadow: 0 0 0 1px color-mix(in srgb, var(--brand-fg) 30%, transparent),
                inset 0 1px 2px color-mix(in srgb, var(--nf1) 18%, transparent) !important;
}

.btn-default,
.btn-secondary,
.sr-btn-secondary {
    background: var(--btn-secondary-bg) !important;
    border-color: var(--btn-secondary-border) !important;
    color: var(--btn-secondary-fg) !important;
}

.btn-danger,
button.btn-danger,
input.btn-danger,
a.btn-danger {
    background: var(--danger) !important;
    border-color: var(--danger) !important;
    color: var(--nf-on-brand) !important;
}

.btn-danger:hover {
    background: var(--danger-hover) !important;
    border-color: var(--danger-hover) !important;
    color: var(--nf-on-brand) !important;
}

.btn-danger:active {
    background: var(--danger-hover) !important;
    border-color: var(--danger-hover) !important;
    color: var(--nf-on-brand) !important;
    filter: brightness(0.92);
}

button[disabled],
input[disabled][type="button"],
input[disabled][type="submit"],
.btn[disabled],
.btn.disabled,
.aspNetDisabled {
    background: var(--nb2) !important;
    border-color: var(--ns2) !important;
    color: var(--nf-disabled) !important;
    cursor: not-allowed !important;
    box-shadow: none !important;
    opacity: 0.7;
    text-shadow: none !important;
}

button[disabled]:hover,
input[disabled]:hover,
.btn[disabled]:hover,
.btn.disabled:hover {
    background: var(--nb2) !important;
    border-color: var(--ns2) !important;
    color: var(--nf-disabled) !important;
}

.school-reception-fluent .sr-search-toolbar,
.patient-fluent .patient-toolbar-row,
.patient-fluent .patient-merge-row,
.support-popup {
    background: var(--surface-toolbar) !important;
}

.school-reception-fluent .sr-search-toolbar-copy {
    background: var(--brand-bg-tint) !important;
}

.school-reception-fluent .sr-search-toolbar-title {
    color: var(--brand-90) !important;
}

.school-reception-fluent .sr-search-toolbar-text,
.school-reception-fluent .empty-state,
.patient-fluent .patient-muted-text {
    color: var(--nf2) !important;
}

.table,
.table-bordered,
.table-striped,
.rgMasterTable,
.dataTable {
    color: var(--nf1);
    border-color: var(--ns2);
}

.table > thead > tr > th,
.table-bordered > thead > tr > th,
.table-striped > thead > tr > th,
.rgMasterTable th,
.dataTable thead th {
    background: var(--surface-card-subtle) !important;
    color: var(--nf1) !important;
    border-color: var(--ns2) !important;
}

.table > tbody > tr > td,
.table-bordered > tbody > tr > td,
.table-striped > tbody > tr > td,
.rgMasterTable td,
.dataTable tbody td {
    background: var(--surface-card) !important;
    color: var(--nf1) !important;
    border-color: var(--ns2) !important;
}

.table-striped > tbody > tr:nth-of-type(odd) > td,
.dataTable tbody tr:nth-child(odd) td {
    background: var(--surface-card) !important;
}

.ajax__calendar_container {
    background: var(--surface-card) !important;
    border: 1px solid var(--ns2) !important;
    border-radius: var(--r-xl) !important;
    box-shadow: var(--shadow8) !important;
    color: var(--nf1) !important;
    padding: 8px !important;
    z-index: 2500 !important;
}

.ajax__calendar_header {
    margin-bottom: 6px !important;
}

.ajax__calendar_title,
.ajax__calendar_next,
.ajax__calendar_prev {
    color: var(--nf1) !important;
    font-weight: 600 !important;
}

.ajax__calendar_next,
.ajax__calendar_prev {
    border-radius: var(--r-sm);
}

.ajax__calendar_next:hover,
.ajax__calendar_prev:hover {
    background: var(--nb1-hover) !important;
}

.ajax__calendar_body,
.ajax__calendar_days,
.ajax__calendar_months,
.ajax__calendar_years {
    border: none !important;
}

.ajax__calendar_dayname {
    color: var(--nf3) !important;
    font-weight: 600 !important;
}

.ajax__calendar_day,
.ajax__calendar_month,
.ajax__calendar_year,
.ajax__calendar_hover .ajax__calendar_day,
.ajax__calendar_hover .ajax__calendar_month,
.ajax__calendar_hover .ajax__calendar_year {
    color: var(--nf1) !important;
    border-radius: var(--r-sm) !important;
}

.ajax__calendar_hover .ajax__calendar_day,
.ajax__calendar_hover .ajax__calendar_month,
.ajax__calendar_hover .ajax__calendar_year,
.ajax__calendar_day:hover,
.ajax__calendar_month:hover,
.ajax__calendar_year:hover {
    background: var(--nb1-hover) !important;
}

.ajax__calendar_active .ajax__calendar_day,
.ajax__calendar_active .ajax__calendar_month,
.ajax__calendar_active .ajax__calendar_year {
    background: var(--brand-80) !important;
    color: var(--nf-on-brand) !important;
}

.ajax__calendar_today .ajax__calendar_day {
    border: 1px solid var(--brand-80) !important;
}

.ajax__calendar_disabled .ajax__calendar_day,
.ajax__calendar_disabled .ajax__calendar_month,
.ajax__calendar_disabled .ajax__calendar_year {
    color: var(--nf-disabled) !important;
}

/* ════════════════════════════════════════════════════════════════════
   REUSABLE: action HyperLinks rendered as buttons
   --------------------------------------------------------------------
   ASP.NET HyperLinks render as plain anchors. This styles the CURATED set
   of "action" links (Print / Log / Prescription / Consent / Sticker /
   Report / Claim form, etc.) to look like secondary buttons — site-wide,
   on any page that loads the Fluent theme. Matched by id-suffix so the
   ASP.NET id prefix is ignored. Scoped to .page-content so master chrome
   links are untouched.

   To ADD a link: add a  .page-content a[id$="YourId"]  line to BOTH the
   base block and the :hover block. To REMOVE: delete its two lines.
   (No server-control changes — pure CSS.)

   Intentionally EXCLUDED (stay plain links): image-wrapping links
   (HLCardImg*, HLMalaffiNew, HLPatientSignature, HLNewPatient, HLAttachment)
   and navigation/data/grid links (HLInvoice*, HLAppHistory, HLStatement,
   HLPatientFile, HLPatientName, lab-result data links). NOTE: HLDetail
   (grid row drill-down) is INCLUDED as a button by request.
   ════════════════════════════════════════════════════════════════════ */
.page-content a[id$="HLPrint"],
.page-content a[id$="HLPrint0"],
.page-content a[id$="HLPrint2"],
.page-content a[id$="HLPrintInvoice"],
.page-content a[id$="HLPrintReceipt"],
.page-content a[id$="HlPrintResult"],
.page-content a[id$="HLRePrint"],
.page-content a[id$="HLPrintPatientLabel"],
.page-content a[id$="HLPatientLabel"],
.page-content a[id$="HLPrescription"],
.page-content a[id$="HLAllPrescription"],
.page-content a[id$="HLNotPrescription"],
.page-content a[id$="HLLog"],
.page-content a[id$="HLSendEmail"],
.page-content a[id$="HLConsent"],
.page-content a[id$="HLConsentForm"],
.page-content a[id$="HLConsnets"],
.page-content a[id$="HLDentalConsent"],
.page-content a[id$="HLGeneralConsent"],
.page-content a[id$="HLSurgicalConsent"],
.page-content a[id$="HLViewConsent"],
.page-content a[id$="HLCouplesConfidentiality"],
.page-content a[id$="HLPatientConfidentiality"],
.page-content a[id$="HLSticker"],
.page-content a[id$="HLSticker2"],
.page-content a[id$="HLStickerLab"],
.page-content a[id$="HLStickerZebra1"],
.page-content a[id$="HLStickerZebra2"],
.page-content a[id$="HLFileSticker"],
.page-content a[id$="HLReport"],
.page-content a[id$="HLErrorReport"],
.page-content a[id$="HLMedicalReport"],
.page-content a[id$="HLMedicalCertificate"],
.page-content a[id$="HLCashierReport"],
.page-content a[id$="HLPETCTReport"],
.page-content a[id$="HLResubmisionRpt"],
.page-content a[id$="HLDischargeSummary"],
.page-content a[id$="HLClaimForm"],
.page-content a[id$="HLClaimFormAXA"],
.page-content a[id$="HLClaimFormOman"],
.page-content a[id$="HLClaimFormOmanOP"],
.page-content a[id$="HLAdnic"],
.page-content a[id$="HLADNIC"],
.page-content a[id$="HLAdnicClaim"],
.page-content a[id$="HLAafiya"],
.page-content a[id$="HLAlBuhaira"],
.page-content a[id$="HLAlKhazna"],
.page-content a[id$="HLAlMadallah"],
.page-content a[id$="HLDamanAssessment"],
.page-content a[id$="HLDentalAssessment"],
.page-content a[id$="HLThiqaAssessment"],
.page-content a[id$="HLFMC"],
.page-content a[id$="HLINAYAH"],
.page-content a[id$="HLMaxCare"],
.page-content a[id$="HLMednet"],
.page-content a[id$="HLNAS"],
.page-content a[id$="HLNextCare"],
.page-content a[id$="HLNeuron"],
.page-content a[id$="HLPentacare"],
.page-content a[id$="HLSAICO"],
.page-content a[id$="HLThiqa"],
.page-content a[id$="HLTHIQA"],
.page-content a[id$="HLVidalHealth"],
.page-content a[id$="HLWhealt"],
.page-content a[id$="HLRiayati"],
.page-content a[id$="HlResubmission"],
.page-content a[id$="HLVitalSigns"],
.page-content a[id$="HLSpeechEvaluation"],
.page-content a[id$="HLPhysiotherapy"],
.page-content a[id$="HLDetail"] {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 6px !important;
    height: 34px !important;
    min-width: 88px !important;
    padding: 0 16px !important;
    margin: 2px 4px 2px 0 !important;
    background: var(--nb1) !important;
    border: 1px solid var(--ns1) !important;
    border-radius: var(--r-sm) !important;
    color: var(--nf1) !important;
    font-size: 14px !important;
    font-weight: 600 !important;
    text-transform: none !important;
    letter-spacing: 0 !important;
    text-decoration: none !important;
    white-space: nowrap !important;
    box-sizing: border-box !important;
    cursor: pointer !important;
    vertical-align: middle !important;
    transition: background .12s, border-color .12s !important;
}
.page-content a[id$="HLPrint"]:hover,
.page-content a[id$="HLPrint0"]:hover,
.page-content a[id$="HLPrint2"]:hover,
.page-content a[id$="HLPrintInvoice"]:hover,
.page-content a[id$="HLPrintReceipt"]:hover,
.page-content a[id$="HlPrintResult"]:hover,
.page-content a[id$="HLRePrint"]:hover,
.page-content a[id$="HLPrintPatientLabel"]:hover,
.page-content a[id$="HLPatientLabel"]:hover,
.page-content a[id$="HLPrescription"]:hover,
.page-content a[id$="HLAllPrescription"]:hover,
.page-content a[id$="HLNotPrescription"]:hover,
.page-content a[id$="HLLog"]:hover,
.page-content a[id$="HLSendEmail"]:hover,
.page-content a[id$="HLConsent"]:hover,
.page-content a[id$="HLConsentForm"]:hover,
.page-content a[id$="HLConsnets"]:hover,
.page-content a[id$="HLDentalConsent"]:hover,
.page-content a[id$="HLGeneralConsent"]:hover,
.page-content a[id$="HLSurgicalConsent"]:hover,
.page-content a[id$="HLViewConsent"]:hover,
.page-content a[id$="HLCouplesConfidentiality"]:hover,
.page-content a[id$="HLPatientConfidentiality"]:hover,
.page-content a[id$="HLSticker"]:hover,
.page-content a[id$="HLSticker2"]:hover,
.page-content a[id$="HLStickerLab"]:hover,
.page-content a[id$="HLStickerZebra1"]:hover,
.page-content a[id$="HLStickerZebra2"]:hover,
.page-content a[id$="HLFileSticker"]:hover,
.page-content a[id$="HLReport"]:hover,
.page-content a[id$="HLErrorReport"]:hover,
.page-content a[id$="HLMedicalReport"]:hover,
.page-content a[id$="HLMedicalCertificate"]:hover,
.page-content a[id$="HLCashierReport"]:hover,
.page-content a[id$="HLPETCTReport"]:hover,
.page-content a[id$="HLResubmisionRpt"]:hover,
.page-content a[id$="HLDischargeSummary"]:hover,
.page-content a[id$="HLClaimForm"]:hover,
.page-content a[id$="HLClaimFormAXA"]:hover,
.page-content a[id$="HLClaimFormOman"]:hover,
.page-content a[id$="HLClaimFormOmanOP"]:hover,
.page-content a[id$="HLAdnic"]:hover,
.page-content a[id$="HLADNIC"]:hover,
.page-content a[id$="HLAdnicClaim"]:hover,
.page-content a[id$="HLAafiya"]:hover,
.page-content a[id$="HLAlBuhaira"]:hover,
.page-content a[id$="HLAlKhazna"]:hover,
.page-content a[id$="HLAlMadallah"]:hover,
.page-content a[id$="HLDamanAssessment"]:hover,
.page-content a[id$="HLDentalAssessment"]:hover,
.page-content a[id$="HLThiqaAssessment"]:hover,
.page-content a[id$="HLFMC"]:hover,
.page-content a[id$="HLINAYAH"]:hover,
.page-content a[id$="HLMaxCare"]:hover,
.page-content a[id$="HLMednet"]:hover,
.page-content a[id$="HLNAS"]:hover,
.page-content a[id$="HLNextCare"]:hover,
.page-content a[id$="HLNeuron"]:hover,
.page-content a[id$="HLPentacare"]:hover,
.page-content a[id$="HLSAICO"]:hover,
.page-content a[id$="HLThiqa"]:hover,
.page-content a[id$="HLTHIQA"]:hover,
.page-content a[id$="HLVidalHealth"]:hover,
.page-content a[id$="HLWhealt"]:hover,
.page-content a[id$="HLRiayati"]:hover,
.page-content a[id$="HlResubmission"]:hover,
.page-content a[id$="HLVitalSigns"]:hover,
.page-content a[id$="HLSpeechEvaluation"]:hover,
.page-content a[id$="HLPhysiotherapy"]:hover,
.page-content a[id$="HLDetail"]:hover {
    background: var(--nb2) !important;
    border-color: var(--brand-fg) !important;
    color: var(--nf1) !important;
    text-decoration: none !important;
}
/* Safety net: if a curated link actually wraps an image (icon), keep it a
   plain image link rather than a button box. */
.page-content a[id$="HLPrint"]:has(img),
.page-content a[id$="HLLog"]:has(img),
.page-content a[id$="HLPrescription"]:has(img),
.page-content a[id$="HLReport"]:has(img),
.page-content a[id$="HLMedicalReport"]:has(img),
.page-content a[id$="HLSticker"]:has(img),
.page-content a[id$="HLConsentForm"]:has(img) {
    display: inline !important;
    height: auto !important;
    min-width: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    background: none !important;
}


/* ══════════════════════════════════════════════════════════════
   SHARED HIERARCHY LAYERS (loaded by every master via this file)
   ══════════════════════════════════════════════════════════════ */

/* Secondary button — quiet sibling of .btn-primary so classifyButtons
   can demote duplicate primaries on any master */
.btn-secondary {
    background: var(--btn-secondary-bg) !important;
    border: 1px solid var(--btn-secondary-border) !important;
    color: var(--btn-secondary-fg) !important;
}
.btn-secondary:hover { background: var(--btn-secondary-bg-hover) !important; color: var(--btn-secondary-fg) !important; }
.btn-secondary:active { background: var(--btn-secondary-bg-pressed) !important; }

/* Empty states — tagged by applyEmptyStates(): an application state,
   not a data row, in every appearance mode */
.cp-empty-state {
    text-align: center !important;
    padding: 28px 16px !important;
    font-size: 13px !important;
    color: var(--nf3) !important;
    background: transparent !important;
    border: none !important;
}
div.cp-empty-state, span.cp-empty-state, p.cp-empty-state {
    display: block;
    padding: 24px 16px !important;
}
.cp-empty-state::before {
    content: '\f016';
    font-family: FontAwesome;
    display: block;
    font-size: 22px;
    margin-bottom: 8px;
    color: var(--nf-disabled);
}

/* message strips holding nothing must show nothing */
.message-bar.cp-msg-empty { display: none !important; }

/* One visible, mode-aware focus treatment */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
[tabindex]:focus-visible {
    outline: 2px solid var(--brand-fg) !important;
    outline-offset: 1px !important;
}

/* ── HIGH CONTRAST ENFORCEMENT (applies under every master) ──
   HC must not inherit decorative theming: no shadows, hierarchy from
   solid borders + the fixed HC accent, selection as inverse blocks,
   thick yellow focus. */
html[data-high-contrast] * {
    box-shadow: none !important;
    text-shadow: none !important;
    backdrop-filter: none !important;
}
html[data-high-contrast] a:not(.btn):not(.btn-primary):not(.btn-danger):not(.btn-secondary) {
    text-decoration: underline !important;
}
html[data-high-contrast] a:focus-visible,
html[data-high-contrast] button:focus-visible,
html[data-high-contrast] input:focus-visible,
html[data-high-contrast] select:focus-visible,
html[data-high-contrast] [tabindex]:focus-visible {
    outline: 3px solid #ffff00 !important;
    outline-offset: 2px !important;
}

/* ══════════════════════════════════════════════════════════════
           SMART SEARCH — patient-context prompt
           Shown when a search result needs patient data (Invoice Detail,
           Visit Log, ...): asks for the Patient Code (ESIS No), resolves
           it via Services/GlobalSearch.ashx, then opens the page.
           ══════════════════════════════════════════════════════════════ */
        .gs-ctx-overlay {
            position: fixed; inset: 0; z-index: 2000;
            background: var(--scrim-heavy);
            display: flex; align-items: flex-start; justify-content: center;
            padding-top: 14vh;
        }
        .gs-ctx-modal {
            width: 420px; max-width: calc(100vw - 32px);
            background: var(--nb1);
            border: 1px solid var(--ns2);
            border-radius: var(--r-xl);
            box-shadow: var(--shadow16);
            padding: 18px 20px 16px;
        }
        .gs-ctx-title {
            font-size: 15px; font-weight: 600; color: var(--nf1);
            display: flex; align-items: center; gap: 8px;
            margin-bottom: 4px;
        }
        .gs-ctx-title i { color: var(--brand-fg); }
        .gs-ctx-hint { font-size: 12px; color: var(--nf2); line-height: 16px; margin-bottom: 12px; }
        .gs-ctx-input {
            width: 100%; height: 34px; padding: 0 10px;
            background: var(--field-bg); color: var(--nf1);
            border: 1px solid var(--field-border);
            border-radius: var(--r-sm);
            font-size: 14px; font-family: inherit;
            outline: none; box-sizing: border-box;
        }
        .gs-ctx-input:focus { border-color: var(--field-border-focus); }
        .gs-ctx-suggest { margin-top: 4px; }
        .gs-ctx-sug-item {
            display: flex; align-items: center; gap: 10px;
            padding: 6px 8px; border-radius: var(--r-sm);
            cursor: pointer; font-size: 13px; color: var(--nf1);
        }
        .gs-ctx-sug-item:hover { background: var(--hover-bg); }
        .gs-ctx-sug-code { font-weight: 600; color: var(--brand-fg); min-width: 70px; }
        .gs-ctx-sug-name { color: var(--nf2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
        .gs-ctx-status { min-height: 18px; font-size: 12px; color: var(--nf2); margin: 8px 0 4px; }
        .gs-ctx-status.is-err { color: var(--danger); }
        .gs-ctx-actions { display: flex; justify-content: flex-end; gap: 8px; margin-top: 6px; }
        .gs-ctx-actions button {
            height: 32px; padding: 0 16px;
            border-radius: var(--r-sm); font-size: 13px; font-weight: 600;
            font-family: inherit; cursor: pointer;
        }
        .gs-ctx-cancel {
            background: var(--btn-secondary-bg); color: var(--btn-secondary-fg);
            border: 1px solid var(--btn-secondary-border);
        }
        .gs-ctx-cancel:hover { background: var(--btn-secondary-bg-hover); }
        .gs-ctx-go {
            background: var(--btn-primary-bg); color: var(--btn-primary-fg);
            border: 1px solid var(--btn-primary-border);
        }
        .gs-ctx-go:hover { background: var(--btn-primary-bg-hover); }
        html[data-high-contrast] .gs-ctx-modal { background: #000; border: 1px solid #fff; }


/* ══════════════════════════════════════════════════════════════
   CHECKBOX / RADIO — theme override of css/forms.css
   The legacy skin drew gold (#ba9a3b) boxes positioned to the RIGHT
   of their labels. Rebuilt on the token system: box on the left,
   accent fill when checked, correct in light / dark / high contrast
   and with every accent color.
   ══════════════════════════════════════════════════════════════ */
.checkbox-style { padding-bottom: 0 !important; position: relative; }

.checkbox-style input[type="checkbox"] + label {
    padding: 2px 0 2px 26px !important;
    margin: 0 !important;
    position: relative;
    cursor: pointer;
    display: inline-block;
    vertical-align: middle;
    line-height: 18px !important;
    color: var(--nf1) !important;
    font-size: 13px;
}

.checkbox-style input[type="checkbox"] + label:before {
    content: '';
    background: var(--field-bg) !important;
    width: 18px !important; height: 18px !important;
    border: 1px solid var(--field-border) !important;
    line-height: 18px;
    position: absolute;
    left: 0 !important; right: auto !important;
    top: 50% !important;
    transform: translateY(-50%);
    border-radius: var(--r-sm) !important;
    box-shadow: none !important;
    transition: background 0.1s, border-color 0.1s;
}

.checkbox-style input[type="checkbox"] + label:hover:before {
    border-color: var(--field-border-hover) !important;
}

.checkbox-style input[type="checkbox"]:checked + label:before {
    background: var(--brand-80) !important;
    border: 1px solid var(--brand-80) !important;
}

.checkbox-style input[type="checkbox"]:checked + label:after {
    font-family: 'FontAwesome';
    content: "\f00c";
    display: inline-block;
    position: absolute;
    left: 3px !important; right: auto !important;
    top: 50% !important;
    transform: translateY(-50%);
    width: auto !important; height: auto !important;
    padding: 0 !important;
    font-size: 11px !important;
    color: var(--nf-on-brand) !important;
}

.checkbox-style input[type="checkbox"]:focus-visible + label:before {
    outline: 2px solid var(--brand-fg);
    outline-offset: 1px;
}

/* ── Radio — same language, round ── */
.radiobtn-style { padding-bottom: 0 !important; position: relative; }

.radiobtn-style input[type="radio"] + label {
    padding: 2px 0 2px 26px !important;
    margin: 0 6px 0 0 !important;
    position: relative;
    cursor: pointer;
    display: inline-block;
    vertical-align: middle;
    line-height: 18px !important;
    color: var(--nf1) !important;
    font-size: 13px;
}

.radiobtn-style input[type="radio"] + label:before {
    content: '';
    background: var(--field-bg) !important;
    width: 18px !important; height: 18px !important;
    border: 1px solid var(--field-border) !important;
    position: absolute;
    left: 0 !important; right: auto !important;
    top: 50% !important;
    transform: translateY(-50%);
    border-radius: var(--r-sm) !important;   /* ONE pattern: square like checkboxes */
    box-shadow: none !important;
    transition: background 0.1s, border-color 0.1s;
}

.radiobtn-style input[type="radio"] + label:hover:before {
    border-color: var(--field-border-hover) !important;
}

.radiobtn-style input[type="radio"]:checked + label:before {
    background: var(--brand-80) !important;
    border: 1px solid var(--brand-80) !important;
}

.radiobtn-style input[type="radio"]:checked + label:after {
    font-family: 'FontAwesome';
    content: "00c";
    display: inline-block;
    position: absolute;
    left: 3px !important; right: auto !important;
    top: 50% !important;
    transform: translateY(-50%);
    margin: 0 !important;
    width: auto !important; height: auto !important;
    font-size: 11px !important;
    color: var(--nf-on-brand) !important;
    background: transparent !important;
}

.radiobtn-style input[type="radio"]:focus-visible + label:before {
    outline: 2px solid var(--brand-fg);
    outline-offset: 1px;
}

/* plain (unwrapped) checkboxes AND radios: drawn natively with the SAME
   square pattern, so every toggle in the app looks identical.
   (.checkbox-style / .radiobtn-style wrappers hide their real input, so
   these rules only show on plain controls.) */
input[type="checkbox"]:not(.checkbox-style input),
input[type="radio"]:not(.radiobtn-style input) {
    -webkit-appearance: none;
    appearance: none;
    width: 18px; height: 18px;
    background: var(--field-bg);
    border: 1px solid var(--field-border);
    border-radius: var(--r-sm);
    vertical-align: middle;
    cursor: pointer;
    position: relative;
    margin: 0 5px 0 0;
    padding: 0;
    display: inline-block;
    transition: background 0.1s, border-color 0.1s;
    accent-color: var(--brand-80);
}
input[type="checkbox"]:not(.checkbox-style input):hover,
input[type="radio"]:not(.radiobtn-style input):hover {
    border-color: var(--field-border-hover);
}
input[type="checkbox"]:not(.checkbox-style input):checked,
input[type="radio"]:not(.radiobtn-style input):checked {
    background: var(--brand-80);
    border-color: var(--brand-80);
}
input[type="checkbox"]:not(.checkbox-style input):checked::after,
input[type="radio"]:not(.radiobtn-style input):checked::after {
    font-family: 'FontAwesome';
    content: "00c";
    position: absolute;
    left: 50%; top: 50%;
    transform: translate(-50%, -50%);
    font-size: 11px;
    line-height: 1;
    color: var(--nf-on-brand);
}
input[type="checkbox"]:not(.checkbox-style input):focus-visible,
input[type="radio"]:not(.radiobtn-style input):focus-visible {
    outline: 2px solid var(--brand-fg);
    outline-offset: 1px;
}

/* high contrast: solid inverse check */
html[data-high-contrast] .checkbox-style input[type="checkbox"]:checked + label:before {
    background: var(--sel-bg) !important;
    border-color: #ffffff !important;
}
html[data-high-contrast] .checkbox-style input[type="checkbox"]:checked + label:after {
    color: var(--sel-fg) !important;
}