/* =================================================================
   clopr-skin.css — Clopr Dental's own visual signature on top of the
   shared shell: an ink rail, deep-teal heroes marked with the tooth
   loops, soft mint icon wells, coral reserved for "new / attention".
   Loaded after nav-shell / dark-content / modals so it wins on order;
   page-level <style> blocks are beaten by specificity (.dash …).
   ================================================================= */

/* ---- Ink rail ---- */
.nav-rail {
    background:
        radial-gradient(120px 160px at 50% 0%, rgba(25, 195, 201, .22), transparent 70%),
        linear-gradient(180deg, #0a4a52 0%, #073b42 55%, #052b31 100%);
    border-color: transparent;
    box-shadow: 0 10px 28px -12px rgba(5, 43, 49, .55);
}
.nav-rail-logo { background: rgba(255, 255, 255, .08); }
.nav-rail-logo .nrl-on-light { display: none !important; }
.nav-rail-logo .nrl-on-dark  { display: block !important; }
.nav-rail-btn { color: rgba(226, 244, 242, .62); }
.nav-rail-btn:hover { background: rgba(255, 255, 255, .08); color: #fff; }
.nav-rail-btn.active { background: rgba(25, 195, 201, .20); color: #fff; box-shadow: inset 0 0 0 1px rgba(127, 227, 224, .28); }
.nav-rail-btn.active::before { background: var(--brand-aqua); inset-inline-start: -10px; }
.nav-rail-btn .nrb-badge { background: var(--brand-coral); border-color: #073b42; }
.nav-rail-tool { background: rgba(255, 255, 255, .08); color: rgba(226, 244, 242, .72); }
.nav-rail-tool:hover { background: rgba(25, 195, 201, .22); color: #fff; }
:root[data-theme="dark"] .nav-rail { background: linear-gradient(180deg, #0c3a40 0%, #0a2c30 60%, #082225 100%); box-shadow: inset 0 0 0 1px #1f3a3d; }
@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) .nav-rail { background: linear-gradient(180deg, #0c3a40 0%, #0a2c30 60%, #082225 100%); box-shadow: inset 0 0 0 1px #1f3a3d; }
}

/* ---- Heroes: deep teal with the two-loop line art ---- */
.emr-hero,
.dash .dash-welcome {
    background:
        url("../images/brand/clopr-dental-hero-art.svg") no-repeat,
        radial-gradient(420px 220px at 12% 0%, rgba(25, 195, 201, .32), transparent 70%),
        linear-gradient(120deg, #052b31 0%, #073b42 45%, #0b7a85 100%);
    background-size: 320px 320px, auto, auto;
    background-position: left -30px top -96px, 0 0, 0 0;
    border-radius: 22px;
    box-shadow: 0 16px 36px -18px rgba(5, 43, 49, .6);
}
[dir="ltr"] .emr-hero,
[dir="ltr"] .dash .dash-welcome { background-position: right -30px top -96px, 0 0, 0 0; }
.emr-hero h1, .dash .dash-welcome h1 { letter-spacing: -.01em; }
.emr-hero-icon,
.dash .dash-me { border-radius: 50%; background: rgba(255, 255, 255, .12); box-shadow: inset 0 0 0 1px rgba(159, 230, 220, .45); }

/* ---- Icon wells: soft mint instead of solid squares ---- */
.emr-stat-icon { border-radius: 50%; background: var(--brand-soft); color: var(--brand-teal); }
.dash .dw-ic, .dash .dw-ic.navy, .dash .dw-ic.blue, .dash .dw-ic.sky,
.dash .dw-h .hi { border-radius: 50%; background: var(--brand-soft); color: var(--brand-teal); }
.dash .dw-who .av { background: var(--brand-soft); color: var(--brand-teal); }
.dash .dw-count, .dash .dw-row.unread .dw-row-m b::after { background: var(--brand-coral); }
:root[data-theme="dark"] .emr-stat-icon,
:root[data-theme="dark"] .dash .dw-ic, :root[data-theme="dark"] .dash .dw-h .hi,
:root[data-theme="dark"] .dash .dw-who .av { background: rgba(25, 195, 201, .14); color: #5fd3d3; }
@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) .emr-stat-icon,
    :root:not([data-theme="light"]) .dash .dw-ic, :root:not([data-theme="light"]) .dash .dw-h .hi,
    :root:not([data-theme="light"]) .dash .dw-who .av { background: rgba(25, 195, 201, .14); color: #5fd3d3; }
}

/* ---- Surfaces: rounder, hairline-bordered, lighter shadows ---- */
.emr-card, .emr-stat, .dash .dw { border-radius: 18px; }
.emr-stat { box-shadow: 0 1px 2px rgba(9, 36, 39, .04); }
.emr-card-header { background: transparent; }
.dash .dw-tile { border-radius: 16px; background: #f7fcfb; }
:root[data-theme="dark"] .dash .dw-tile { background: transparent; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .dash .dw-tile { background: transparent; } }

/* ---- Primary actions ---- */
.btn-primary { --bs-btn-bg: #0b7a85; --bs-btn-border-color: #0b7a85; --bs-btn-hover-bg: #073b42; --bs-btn-hover-border-color: #073b42; --bs-btn-active-bg: #052b31; --bs-btn-active-border-color: #052b31; --bs-btn-disabled-bg: #0b7a85; --bs-btn-disabled-border-color: #0b7a85; }
.btn-outline-primary { --bs-btn-color: #0b7a85; --bs-btn-border-color: #0b7a85; --bs-btn-hover-bg: #0b7a85; --bs-btn-hover-border-color: #0b7a85; --bs-btn-active-bg: #073b42; --bs-btn-active-border-color: #073b42; }

/* ---- Subscription notice (trial countdown / payment due) ---- */
.saas-banner { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; padding: 10px 16px; border-radius: 14px;
    background: linear-gradient(90deg, #fff1ec, #ffe6df); border: 1px solid #ffcdbf; color: #8a2f1b; font-size: .86rem; font-weight: 600; }
.saas-banner i { color: #ff7a5c; }
.saas-banner a { margin-inline-start: auto; background: #ff7a5c; color: #fff; text-decoration: none; padding: 6px 14px; border-radius: 999px; font-weight: 700; }
:root[data-theme="dark"] .saas-banner { background: #3a211b; border-color: #5a3127; color: #ffcfc2; }

/* ---- Shared fixes ------------------------------------------------------------
   Disabled primary buttons stay visible (Bootstrap's .btn:disabled swaps in a transparent
   background, leaving white text on white). KPI tiles and modal labels follow the dark
   palette (emr-theme.css / modals.css pin light colours). */
.btn.emr-btn-primary:disabled, .btn.emr-btn-primary.disabled { background: var(--emr-primary); border-color: var(--emr-primary); color: #fff; opacity: .55; }
:root.theme-dark .emr-stat { background: var(--nv-surface); border-color: var(--nv-border); }
:root.theme-dark .modal .modal-body .form-label, :root.theme-dark .modal .modal-body label.small { color: var(--nv-text-soft); }

/* ---- Platform announcement banners (parts/nav_shell.php, inc/SAAS_Announce.php) ---- */
#saasAnnBar { display: grid; gap: 8px; }
.saas-ann { display: flex; align-items: center; gap: 10px; padding: 9px 14px; border-radius: 12px; font-size: .85rem; font-weight: 500; border: 1px solid; }
.saas-ann b { font-weight: 700; }
.saas-ann i { flex: 0 0 auto; }
.saas-ann a { color: inherit; font-weight: 700; text-decoration: underline; }
.saas-ann .saas-ann-x { margin-inline-start: auto; background: none; border: 0; font-size: 1.2rem; line-height: 1; color: inherit; opacity: .6; cursor: pointer; }
.saas-ann .saas-ann-x:hover { opacity: 1; }
.saas-ann.sev-info { background: #eff6ff; border-color: #bfdbfe; color: #1e40af; }
.saas-ann.sev-success { background: #ecfdf5; border-color: #a7f3d0; color: #065f46; }
.saas-ann.sev-warning { background: #fffbeb; border-color: #fde68a; color: #92400e; }
.saas-ann.sev-critical { background: #fef2f2; border-color: #fecaca; color: #991b1b; }
:root[data-theme="dark"] .saas-ann.sev-info { background: #11233f; border-color: #1e3a5f; color: #bfdbfe; }
:root[data-theme="dark"] .saas-ann.sev-success { background: #0f2a22; border-color: #1f4d3d; color: #a7f3d0; }
:root[data-theme="dark"] .saas-ann.sev-warning { background: #2e2410; border-color: #4d3c17; color: #fde68a; }
:root[data-theme="dark"] .saas-ann.sev-critical { background: #2a1214; border-color: #5a2328; color: #fecaca; }