/* ════════════════════════════════════════════════════════════════════
   Prime Practice — Premium Theme Overlay (Phase I, 2026-05-23)
   ════════════════════════════════════════════════════════════════════
   Sits ON TOP of v34-themes.js (which sets --theme-* CSS variables for
   6 themes: premium, ocean, sunset, forest, royal, mono). This overlay
   uses those vars so the premium effects automatically pick up the
   active theme's colors.

   Affects: KPI cards, welcome banner, sidebar, filter bar, modals,
   tables, form controls, primary buttons.

   Does NOT touch:
     • Login form (frozen — user's explicit constraint)
     • app-mobile.js's custom mobile dashboard widget
     • app-patch-v*.js custom UI (each patch owns its own styles)

   Rollback: set ENABLE_PREMIUM_OVERLAY=false in build-deploy.js and
   redeploy. Source files in public-mt/ are untouched.
   ════════════════════════════════════════════════════════════════════ */

/* ─────────────────────────────────────────────────────────────────────
   Base — refined typography + smoother global feel
   ───────────────────────────────────────────────────────────────────── */
body {
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
    letter-spacing: -0.005em;
}

.merriweather {
    letter-spacing: -0.02em;
}

/* ─────────────────────────────────────────────────────────────────────
   Welcome banner — adds gradient backdrop + larger typography
   ───────────────────────────────────────────────────────────────────── */
#viewDashboard > .d-none.d-md-flex {
    position: relative;
    padding: 22px 28px;
    margin-bottom: 1.5rem !important;
    border-radius: 16px;
    background:
        radial-gradient(ellipse at top right, var(--theme-soft, rgba(212,175,55,0.08)) 0%, transparent 60%),
        linear-gradient(135deg, #ffffff 0%, var(--theme-soft, #fdf6e3) 100%);
    box-shadow:
        0 1px 3px rgba(0, 0, 0, 0.03),
        0 6px 24px rgba(11, 36, 71, 0.06);
    border: 1px solid rgba(11, 36, 71, 0.06);
    overflow: hidden;
}

#viewDashboard > .d-none.d-md-flex::before {
    content: "";
    position: absolute;
    inset: 0;
    background:
        radial-gradient(circle at 5% 20%, var(--theme-accent, #d4af37) 0%, transparent 8%);
    opacity: 0.05;
    pointer-events: none;
}

#viewDashboard > .d-none.d-md-flex h3 {
    font-size: 1.85rem !important;
    font-weight: 700;
    letter-spacing: -0.025em;
}

#dashFirmName {
    background: var(--theme-gradient, linear-gradient(90deg, var(--theme-primary), var(--theme-accent)));
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent !important;
    font-weight: 800;
}

/* ─────────────────────────────────────────────────────────────────────
   Filter card — refined glass-ish look
   ───────────────────────────────────────────────────────────────────── */
#viewDashboard > .card.mb-4.shadow-sm {
    border-radius: 14px !important;
    border: 1px solid rgba(11, 36, 71, 0.08) !important;
    box-shadow:
        0 1px 2px rgba(11, 36, 71, 0.04),
        0 4px 16px rgba(11, 36, 71, 0.05) !important;
    background: rgba(255, 255, 255, 0.96);
    backdrop-filter: saturate(140%);
}

#viewDashboard > .card.mb-4.shadow-sm .form-select,
#viewDashboard > .card.mb-4.shadow-sm .form-control {
    border-radius: 9px;
    border-color: rgba(11, 36, 71, 0.12);
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

#viewDashboard > .card.mb-4.shadow-sm .form-select:focus,
#viewDashboard > .card.mb-4.shadow-sm .form-control:focus {
    border-color: var(--theme-accent, #d4af37);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--theme-accent, #d4af37) 18%, transparent);
}

/* ─────────────────────────────────────────────────────────────────────
   KPI Cards — Primary row (Billed / Received / Pending / Pending Tasks)
   Premium look: gradient top strip + soft glass background + hover lift
   ───────────────────────────────────────────────────────────────────── */
.dash-card {
    position: relative;
    border-radius: 16px !important;
    border: 1px solid rgba(11, 36, 71, 0.06) !important;
    background:
        linear-gradient(135deg, #ffffff 0%, rgba(255, 255, 255, 0.85) 100%) !important;
    backdrop-filter: blur(8px);
    box-shadow:
        0 1px 2px rgba(11, 36, 71, 0.03),
        0 8px 24px rgba(11, 36, 71, 0.06) !important;
    transition: transform 0.22s cubic-bezier(0.4, 0, 0.2, 1),
                box-shadow 0.22s cubic-bezier(0.4, 0, 0.2, 1);
    overflow: hidden;
    padding: 1.25rem !important;
}

/* Remove the original border-start since we replace with top strip */
.dash-card.border-start {
    border-left: 1px solid rgba(11, 36, 71, 0.06) !important;
}

/* Premium gradient top strip per card color */
.dash-card::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 4px;
    border-radius: 16px 16px 0 0;
    pointer-events: none;
}

.dash-card.border-primary::before {
    background: linear-gradient(90deg, #0d6efd 0%, #6ea8fe 100%);
}
.dash-card.border-success::before {
    background: linear-gradient(90deg, #198754 0%, #75b798 100%);
}
.dash-card.border-danger::before {
    background: linear-gradient(90deg, #dc3545 0%, #ea868f 100%);
}
.dash-card.border-warning::before {
    background: linear-gradient(90deg, #ffc107 0%, #ffda6a 100%);
}

/* Subtle inner glow on top-right */
.dash-card::after {
    content: "";
    position: absolute;
    top: -40px;
    right: -40px;
    width: 160px;
    height: 160px;
    border-radius: 50%;
    pointer-events: none;
    opacity: 0.06;
}
.dash-card.border-primary::after { background: radial-gradient(circle, #0d6efd 0%, transparent 70%); }
.dash-card.border-success::after { background: radial-gradient(circle, #198754 0%, transparent 70%); }
.dash-card.border-danger::after  { background: radial-gradient(circle, #dc3545 0%, transparent 70%); }
.dash-card.border-warning::after { background: radial-gradient(circle, #ffc107 0%, transparent 70%); }

.dash-card:hover {
    transform: translateY(-3px);
    box-shadow:
        0 4px 10px rgba(11, 36, 71, 0.06),
        0 16px 40px rgba(11, 36, 71, 0.12) !important;
}

.dash-card h6 {
    font-size: 0.72rem !important;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    opacity: 0.7;
    margin-bottom: 0.6rem !important;
}

.dash-card h2 {
    font-size: 1.85rem !important;
    font-weight: 700 !important;
    letter-spacing: -0.025em;
    line-height: 1.1;
}

.dash-card .small.text-muted {
    margin-top: 0.5rem !important;
    font-size: 0.7rem !important;
    opacity: 0.65;
}

/* ─────────────────────────────────────────────────────────────────────
   KPI Cards — Secondary row (Overdue, Due Today, Completed, Clients)
   These have inline border-left styles — premium them similarly
   ───────────────────────────────────────────────────────────────────── */
#viewDashboard > .row.mb-3.d-none.d-md-flex > .col-md-3 > .card {
    position: relative;
    border-radius: 14px !important;
    border: 1px solid rgba(11, 36, 71, 0.06) !important;
    border-left: 1px solid rgba(11, 36, 71, 0.06) !important;
    background:
        linear-gradient(135deg, #ffffff 0%, rgba(252, 252, 254, 0.9) 100%) !important;
    box-shadow:
        0 1px 2px rgba(11, 36, 71, 0.03),
        0 6px 18px rgba(11, 36, 71, 0.05) !important;
    transition: transform 0.22s cubic-bezier(0.4, 0, 0.2, 1),
                box-shadow 0.22s cubic-bezier(0.4, 0, 0.2, 1);
    overflow: hidden;
    padding: 1rem !important;
}

#viewDashboard > .row.mb-3.d-none.d-md-flex > .col-md-3 > .card::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    width: 3px;
    background: currentColor;
    opacity: 0.85;
}

#viewDashboard > .row.mb-3.d-none.d-md-flex > .col-md-3 > .card:hover {
    transform: translateY(-2px);
    box-shadow:
        0 4px 10px rgba(11, 36, 71, 0.06),
        0 12px 30px rgba(11, 36, 71, 0.1) !important;
}

#viewDashboard > .row.mb-3.d-none.d-md-flex > .col-md-3 > .card h6 {
    letter-spacing: 0.06em;
    opacity: 0.7;
}

#viewDashboard > .row.mb-3.d-none.d-md-flex > .col-md-3 > .card h3 {
    font-weight: 700 !important;
    letter-spacing: -0.025em;
}

/* ─────────────────────────────────────────────────────────────────────
   Staff Performance widget — premium card
   ───────────────────────────────────────────────────────────────────── */
#dashStaffPerfCard {
    border-radius: 14px !important;
    border: 1px solid rgba(11, 36, 71, 0.06) !important;
    box-shadow:
        0 1px 2px rgba(11, 36, 71, 0.03),
        0 6px 22px rgba(11, 36, 71, 0.05) !important;
    overflow: hidden;
}

#dashStaffPerfCard .card-header {
    background: linear-gradient(135deg, var(--theme-soft, #fdf6e3) 0%, transparent 100%);
    border-bottom: 1px solid rgba(11, 36, 71, 0.06);
}

#dashStaffPerfCard table {
    margin-bottom: 0;
}

#dashStaffPerfCard tbody tr {
    transition: background-color 0.15s ease;
}

#dashStaffPerfCard tbody tr:hover {
    background-color: var(--theme-soft, rgba(212, 175, 55, 0.05)) !important;
}

/* ─────────────────────────────────────────────────────────────────────
   Compliance + Notices section (Phase D3, injected by app-patch-dashboard.js)
   ───────────────────────────────────────────────────────────────────── */
#ppDashExtras > .col-md-6 > .card {
    border-radius: 14px !important;
    border: 1px solid rgba(11, 36, 71, 0.06) !important;
    box-shadow:
        0 1px 2px rgba(11, 36, 71, 0.03),
        0 6px 18px rgba(11, 36, 71, 0.05) !important;
    transition: transform 0.22s ease, box-shadow 0.22s ease;
}

#ppDashExtras > .col-md-6 > a > .card:hover {
    transform: translateY(-2px);
    box-shadow:
        0 4px 10px rgba(11, 36, 71, 0.06),
        0 12px 30px rgba(11, 36, 71, 0.1) !important;
}

/* ─────────────────────────────────────────────────────────────────────
   Subscription badge (Phase D2, injected by app-patch-dashboard.js)
   ───────────────────────────────────────────────────────────────────── */
#ppSubBadge {
    backdrop-filter: blur(6px);
    box-shadow:
        0 2px 4px rgba(0, 0, 0, 0.06),
        0 6px 18px rgba(0, 0, 0, 0.08) !important;
    transition: transform 0.18s ease, box-shadow 0.18s ease;
}

#ppSubBadge:hover {
    transform: scale(1.04);
}

/* ─────────────────────────────────────────────────────────────────────
   Sidebar / nav — premium active state with glow
   ───────────────────────────────────────────────────────────────────── */
.sidebar .nav-link,
nav .nav-link {
    border-radius: 10px;
    padding: 0.55rem 0.85rem;
    margin: 2px 0;
    transition: all 0.18s ease;
    position: relative;
}

.sidebar .nav-link:hover,
nav .nav-link:hover {
    background-color: var(--theme-soft, rgba(212, 175, 55, 0.08));
    transform: translateX(2px);
}

.sidebar .nav-link.active,
nav .nav-link.active {
    background: var(--theme-gradient, linear-gradient(135deg, var(--theme-primary), var(--theme-accent))) !important;
    color: #ffffff !important;
    box-shadow:
        0 2px 4px rgba(0, 0, 0, 0.06),
        0 6px 18px color-mix(in srgb, var(--theme-accent, #d4af37) 35%, transparent);
    font-weight: 600;
}

.sidebar .nav-link.active::before,
nav .nav-link.active::before {
    content: "";
    position: absolute;
    left: -8px;
    top: 50%;
    transform: translateY(-50%);
    width: 3px;
    height: 60%;
    background: var(--theme-accent, #d4af37);
    border-radius: 0 3px 3px 0;
}

/* ─────────────────────────────────────────────────────────────────────
   Tables — refined zebra + smoother hover
   ───────────────────────────────────────────────────────────────────── */
.table {
    --bs-table-bg: transparent;
    border-color: rgba(11, 36, 71, 0.06);
}

.table thead.table-light th,
.table thead th {
    background: linear-gradient(180deg, rgba(11, 36, 71, 0.04) 0%, rgba(11, 36, 71, 0.02) 100%) !important;
    border-bottom: 1px solid rgba(11, 36, 71, 0.08) !important;
    font-weight: 700;
    letter-spacing: 0.02em;
    text-transform: uppercase;
    font-size: 0.7rem;
    color: var(--theme-text, #0a0e27);
    padding: 0.7rem 0.75rem;
}

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

.table-hover tbody tr:hover {
    --bs-table-hover-bg: var(--theme-soft, rgba(212, 175, 55, 0.06));
}

.table tbody td {
    border-color: rgba(11, 36, 71, 0.05);
    padding: 0.65rem 0.75rem;
}

/* ─────────────────────────────────────────────────────────────────────
   Form controls — premium focus rings
   ───────────────────────────────────────────────────────────────────── */
.form-control,
.form-select {
    border-radius: 9px;
    border-color: rgba(11, 36, 71, 0.14);
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.form-control:focus,
.form-select:focus {
    border-color: var(--theme-accent, #d4af37);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--theme-accent, #d4af37) 18%, transparent);
}

.input-group-text {
    border-color: rgba(11, 36, 71, 0.14);
    background-color: rgba(11, 36, 71, 0.02);
}

/* ─────────────────────────────────────────────────────────────────────
   Buttons — refined branded buttons
   ───────────────────────────────────────────────────────────────────── */
.btn {
    border-radius: 9px;
    font-weight: 600;
    letter-spacing: 0.01em;
    transition: transform 0.12s ease, box-shadow 0.18s ease, background-color 0.15s ease;
}

.btn-primary {
    background: var(--theme-gradient, linear-gradient(135deg, var(--theme-primary), var(--theme-accent))) !important;
    border: none;
    box-shadow:
        0 1px 2px rgba(0, 0, 0, 0.08),
        0 4px 12px color-mix(in srgb, var(--theme-accent, #d4af37) 25%, transparent);
}

.btn-primary:hover {
    transform: translateY(-1px);
    box-shadow:
        0 2px 4px rgba(0, 0, 0, 0.1),
        0 8px 20px color-mix(in srgb, var(--theme-accent, #d4af37) 40%, transparent);
}

.btn-primary:active {
    transform: translateY(0);
}

.btn-outline-primary,
.btn-outline-success,
.btn-outline-danger,
.btn-outline-warning {
    border-width: 1.5px;
    font-weight: 600;
}

.btn-outline-success:hover {
    background-color: #198754;
    border-color: #198754;
    transform: translateY(-1px);
}

.btn-outline-danger:hover {
    background-color: #dc3545;
    border-color: #dc3545;
    transform: translateY(-1px);
}

/* ─────────────────────────────────────────────────────────────────────
   Modals — refined shadows + rounded corners + SCROLLABLE BODY
   (#1 fix 2026-05-23: Update Firm Profile + other tall modals had
    no scrollbar when content exceeded viewport — fields like
    Registered Address were cut off below the fold.)
   ───────────────────────────────────────────────────────────────────── */
.modal-dialog {
    max-height: calc(100vh - 24px);
    margin-top: 12px !important;
    margin-bottom: 12px !important;
}

.modal-content {
    border-radius: 18px !important;
    border: 1px solid rgba(11, 36, 71, 0.08);
    box-shadow:
        0 4px 12px rgba(11, 36, 71, 0.08),
        0 24px 60px rgba(11, 36, 71, 0.18) !important;
    /* Force scrollability: flex layout so header/footer stay fixed
       and body scrolls. Works for both Bootstrap modals AND any
       custom modal that has a header div + content div structure. */
    max-height: calc(100vh - 24px);
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.modal-content > .modal-header,
.modal-content > .modal-footer {
    flex-shrink: 0;
}

.modal-content > .modal-body,
.modal-content > form,
.modal-content > div:not(.modal-header):not(.modal-footer) {
    overflow-y: auto;
    flex: 1 1 auto;
    min-height: 0;
}

/* Custom-styled modal scrollbar (matches theme) */
.modal-content > .modal-body::-webkit-scrollbar,
.modal-content > form::-webkit-scrollbar,
.modal-content > div::-webkit-scrollbar {
    width: 8px;
}
.modal-content > .modal-body::-webkit-scrollbar-thumb,
.modal-content > form::-webkit-scrollbar-thumb,
.modal-content > div::-webkit-scrollbar-thumb {
    background: color-mix(in srgb, var(--theme-primary, #0a0e27) 25%, transparent);
    border-radius: 4px;
}
.modal-content > .modal-body::-webkit-scrollbar-thumb:hover,
.modal-content > form::-webkit-scrollbar-thumb:hover,
.modal-content > div::-webkit-scrollbar-thumb:hover {
    background: color-mix(in srgb, var(--theme-primary, #0a0e27) 45%, transparent);
}

.modal-header {
    border-bottom: 1px solid rgba(11, 36, 71, 0.06);
    background: linear-gradient(135deg, var(--theme-soft, #fdf6e3) 0%, transparent 100%);
    padding: 1.1rem 1.4rem;
}

.modal-title {
    font-weight: 700;
    letter-spacing: -0.015em;
}

.modal-footer {
    border-top: 1px solid rgba(11, 36, 71, 0.06);
    background-color: rgba(11, 36, 71, 0.015);
}

/* ─────────────────────────────────────────────────────────────────────
   Badges
   ───────────────────────────────────────────────────────────────────── */
.badge {
    font-weight: 600;
    letter-spacing: 0.02em;
    padding: 0.4em 0.7em;
    border-radius: 6px;
}

/* ─────────────────────────────────────────────────────────────────────
   Top header / app bar — refined glass effect (if exists)
   ───────────────────────────────────────────────────────────────────── */
.app-header,
.top-header,
header[role="banner"] {
    background: rgba(255, 255, 255, 0.86) !important;
    backdrop-filter: blur(12px) saturate(140%);
    border-bottom: 1px solid rgba(11, 36, 71, 0.06);
    box-shadow: 0 1px 4px rgba(11, 36, 71, 0.04);
}

/* ─────────────────────────────────────────────────────────────────────
   Page title areas
   ───────────────────────────────────────────────────────────────────── */
.view-panel h3.merriweather,
.view-panel h2.merriweather {
    letter-spacing: -0.025em;
    font-weight: 700;
}

/* ─────────────────────────────────────────────────────────────────────
   Cards (generic — anywhere else)
   Less aggressive than dashboard cards so we don't over-restyle modals
   ───────────────────────────────────────────────────────────────────── */
.card:not(.dash-card):not(.modal-content):not(#ppSubLockout *):not(.auth-card *) {
    border-radius: 12px;
    border-color: rgba(11, 36, 71, 0.07);
}

/* ─────────────────────────────────────────────────────────────────────
   Scrollbar (already set by Phase H but refine for premium themes)
   ───────────────────────────────────────────────────────────────────── */
::-webkit-scrollbar-thumb {
    background: color-mix(in srgb, var(--theme-primary, #0a0e27) 30%, transparent);
}

::-webkit-scrollbar-thumb:hover {
    background: color-mix(in srgb, var(--theme-primary, #0a0e27) 50%, transparent);
}

/* ─────────────────────────────────────────────────────────────────────
   Dropdown menus
   ───────────────────────────────────────────────────────────────────── */
.dropdown-menu {
    border-radius: 12px;
    border: 1px solid rgba(11, 36, 71, 0.08);
    box-shadow:
        0 4px 10px rgba(11, 36, 71, 0.05),
        0 12px 36px rgba(11, 36, 71, 0.1);
    padding: 0.4rem;
}

.dropdown-item {
    border-radius: 7px;
    padding: 0.45rem 0.8rem;
    transition: background-color 0.12s ease;
}

.dropdown-item:hover {
    background-color: var(--theme-soft, rgba(212, 175, 55, 0.08));
}

/* ─────────────────────────────────────────────────────────────────────
   Theme picker button (v34) — refine the floating diamond button
   ───────────────────────────────────────────────────────────────────── */
#v34ThemePicker,
[id^="v34Theme"] button {
    transition: transform 0.18s ease, box-shadow 0.18s ease;
}

#v34ThemePicker:hover {
    transform: scale(1.05);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.18) !important;
}

/* ─────────────────────────────────────────────────────────────────────
   #6 — Coming Soon blink badge (Compliance Hub card)
   ───────────────────────────────────────────────────────────────────── */
@keyframes ppComingSoonBlink {
    0%, 100% { opacity: 1; transform: scale(1); }
    50%      { opacity: 0.55; transform: scale(0.96); }
}

.pp-coming-soon-badge {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 5px 12px;
    background: linear-gradient(135deg, #fd7e14 0%, #ffc107 100%);
    color: #1f2937;
    border-radius: 999px;
    font-size: 0.7rem;
    font-weight: 800;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    box-shadow: 0 2px 6px rgba(253, 126, 20, 0.4);
    animation: ppComingSoonBlink 1.6s ease-in-out infinite;
    white-space: nowrap;
}

.pp-coming-soon-badge::before {
    content: "⏳";
    font-size: 0.85rem;
    animation: ppComingSoonBlink 1.6s ease-in-out infinite reverse;
}

/* When a card carries the coming-soon state, mute the click + hover */
.pp-card-coming-soon {
    cursor: default !important;
    pointer-events: none;
}
.pp-card-coming-soon:hover {
    transform: none !important;
}

/* ─────────────────────────────────────────────────────────────────────
   #7 — Notice auto-scroll (when more than 1 active notice)
   ───────────────────────────────────────────────────────────────────── */
@keyframes ppNoticeScroll {
    0%      { transform: translateY(0); }
    100%    { transform: translateY(-50%); }
}

.pp-notice-scroller {
    height: 120px;
    overflow: hidden;
    position: relative;
    mask-image: linear-gradient(180deg, transparent 0%, #000 12%, #000 88%, transparent 100%);
    -webkit-mask-image: linear-gradient(180deg, transparent 0%, #000 12%, #000 88%, transparent 100%);
}

.pp-notice-scroll-track {
    animation: ppNoticeScroll 14s linear infinite;
    will-change: transform;
}

/* Pause scrolling when user hovers — gives time to read */
.pp-notice-scroller:hover .pp-notice-scroll-track {
    animation-play-state: paused;
}

/* Single notice = no scroll, no mask */
.pp-notice-single {
    max-height: 110px;
    overflow-y: auto;
}

/* ════════════════════════════════════════════════════════════════════
   END Premium overlay
   ════════════════════════════════════════════════════════════════════ */