/* =========================================================================
   MiniCrm — BRAND SYSTEM v3 (2026)  ·  "Azure"
   A single, disciplined design system — one brand color, layered neutral
   surfaces, guaranteed contrast, tasteful elevation, restrained motion.

   PRINCIPLES
   - ONE brand color (azure). No competing purple/teal. Accent (amber) is
     reserved for "attention/warning" only — never decoration.
   - A clear elevation ladder:  canvas (bg) < surface < raised < overlay.
   - Mostly flat surfaces with crisp 1px borders + soft shadows (structure,
     not glow). Gradients are avoided so nothing reads as "random".
   - A dedicated dark navigation rail in BOTH themes (intentional, cohesive).
   - Forcibly neutralises page-level hardcoded colors (clienti teal buttons,
     navy list footers, etc.) so the whole product feels like one product.

   Loaded LAST in App.razor.  Revert = delete that <link> line.
   ========================================================================= */

/* =========================================================================
   1) TOKENS
   ========================================================================= */
html[data-theme="light"] {
    /* Elevation ladder */
    --bg: #F4F6FA;
    --bg2: #EDF1F7;
    --surface: #FFFFFF;
    --surface2: #F2F5FA;
    --raised: #FFFFFF;

    /* Ink */
    --text: #0F1B33;
    --muted: #5C6B85;
    --muted2: #8A97AD;
    --on-brand: #FFFFFF;

    /* Lines */
    --border: #E3E8F0;
    --border2: #EDF1F7;

    /* Brand — one azure family */
    --primary: #2563EB;
    --primaryHover: #1D4ED8;
    --primaryActive: #1A45C2;
    --primarySoft: rgba(37, 99, 235, .10);
    --primarySoft2: rgba(37, 99, 235, .16);

    /* Accent — attention only */
    --accent: #E08A12;
    --accentSoft: rgba(224, 138, 18, .12);

    /* Semantic */
    --success: #15935E;
    --warning: #B45309;
    --danger: #DC2626;
    --successSoft: rgba(21, 147, 94, .12);
    --warnSoft: rgba(180, 83, 9, .12);
    --dangerSoft: rgba(220, 38, 38, .10);

    /* Elevation shadows */
    --shadow-xs: 0 1px 2px rgba(15, 23, 42, .06);
    --shadow-sm: 0 1px 2px rgba(15, 23, 42, .06), 0 2px 6px rgba(15, 23, 42, .06);
    --shadow-md: 0 8px 20px rgba(15, 23, 42, .10);
    --shadow-lg: 0 20px 48px rgba(15, 23, 42, .16);
    --focus: 0 0 0 3px rgba(37, 99, 235, .22);

    /* Navigation rail (refined deep slate in both themes) */
    --rail-bg: #0F172A;
    --rail-bg2: #0B1120;
    --rail-text: #C3CCDC;
    --rail-muted: #8593AB;
    --rail-hover: rgba(255, 255, 255, .06);
    --rail-border: rgba(255, 255, 255, .07);

    /* Geometry & type */
    --radius-lg: 14px;
    --radius-md: 11px;
    --radius-sm: 9px;
    --font-sans: "Manrope", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
    --font-display: "Space Grotesk", "Manrope", system-ui, sans-serif;
}

html[data-theme="dark"] {
    --bg: #0B1120;
    --bg2: #070C18;
    --surface: #131B2E;
    --surface2: #1B2540;
    --raised: #1E2945;

    --text: #E6EAF3;
    --muted: #95A2BC;
    --muted2: #74829D;
    --on-brand: #FFFFFF;

    --border: rgba(255, 255, 255, .085);
    --border2: rgba(255, 255, 255, .05);

    --primary: #3B82F6;
    --primaryHover: #5B9CFF;
    --primaryActive: #2E6FE0;
    --primarySoft: rgba(59, 130, 246, .16);
    --primarySoft2: rgba(59, 130, 246, .24);

    --accent: #F6AD37;
    --accentSoft: rgba(246, 173, 55, .16);

    --success: #34D399;
    --warning: #FBBF24;
    --danger: #F87171;
    --successSoft: rgba(52, 211, 153, .14);
    --warnSoft: rgba(251, 191, 36, .14);
    --dangerSoft: rgba(248, 113, 113, .14);

    --shadow-xs: 0 2px 6px rgba(0, 0, 0, .35);
    --shadow-sm: 0 4px 14px rgba(0, 0, 0, .35);
    --shadow-md: 0 14px 34px rgba(0, 0, 0, .48);
    --shadow-lg: 0 26px 60px rgba(0, 0, 0, .58);
    --focus: 0 0 0 3px rgba(59, 130, 246, .30);

    --rail-bg: #0C1424;
    --rail-bg2: #0A111F;
    --rail-text: #B4C0D6;
    --rail-muted: #7E8CA6;
    --rail-hover: rgba(255, 255, 255, .07);
    --rail-border: rgba(255, 255, 255, .06);

    --radius-lg: 14px;
    --radius-md: 11px;
    --radius-sm: 9px;
    --font-sans: "Manrope", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
    --font-display: "Space Grotesk", "Manrope", system-ui, sans-serif;
}

/* Re-point the legacy alias layer so EVERYTHING inherits the new system */
html[data-theme="light"], html[data-theme="dark"] {
    --c-bg: var(--bg);
    --c-chrome: var(--surface);
    --c-input: var(--surface2);
    --c-input-bg: var(--surface2);
    --c-input-fg: var(--text);
    --c-row-bg: var(--surface);
    --c-row-fg: var(--text);
    --c-head-fg: var(--text);
    --c-text: var(--text);
    --c-muted: var(--muted);
    --c-line: var(--border);
    --c-btn: var(--primary);
    --c-btn-hover: var(--primaryHover);
    --c-accent: var(--primary);
    --df-muted: var(--muted);
    --shadow-1: var(--shadow-sm);
    --shadow-2: var(--shadow-md);
}

/* =========================================================================
   2) MOTION (restrained)
   ========================================================================= */
@keyframes br-fade-up { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: translateY(0); } }
@keyframes br-pop { from { opacity: 0; transform: scale(.97); } to { opacity: 1; transform: scale(1); } }
@media (prefers-reduced-motion: reduce) { * { animation: none !important; transition: none !important; } }

/* =========================================================================
   3) TYPOGRAPHY + CANVAS
   ========================================================================= */
html body {
    font-family: var(--font-sans);
    background: var(--bg);
    color: var(--text);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
    letter-spacing: .005em;
}
h1, h2, h3, h4, h5,
.page-title, .list-title, .kpi-value, .kpi-title,
.calendar-title, .tasks-title, .templates-head h5, .rl-modal-title {
    font-family: var(--font-display);
    letter-spacing: -.012em;
    color: var(--text);
}
h1, .page-title { font-weight: 700; font-size: clamp(1.6rem, 1.2rem + 1.4vw, 2.1rem); }
.page-sub, .list-meta, .calendar-sub { color: var(--muted); }

a { color: var(--primary); text-decoration: none; }
a:hover { color: var(--primaryHover); }
::selection { background: color-mix(in srgb, var(--primary) 26%, transparent); }
:focus-visible { outline: none; box-shadow: var(--focus); border-radius: 8px; }

/* Scrollbars */
* { scrollbar-width: thin; scrollbar-color: color-mix(in srgb, var(--muted) 42%, transparent) transparent; }
*::-webkit-scrollbar { width: 10px; height: 10px; }
*::-webkit-scrollbar-track { background: transparent; }
*::-webkit-scrollbar-thumb { background: color-mix(in srgb, var(--muted) 38%, transparent); border-radius: 999px; border: 2px solid transparent; background-clip: padding-box; }
*::-webkit-scrollbar-thumb:hover { background: color-mix(in srgb, var(--primary) 50%, transparent); background-clip: padding-box; }

/* =========================================================================
   4) CONTRAST SAFETY NET — anything on brand/dark stays legible
   ========================================================================= */
html[data-theme] .btn-primary,
html[data-theme] .btn.primary,
html[data-theme] button.primary,
html[data-theme] .sidebar .menu .item.active,
html[data-theme] .sidebar .menu .item.active *,
html[data-theme] .calendar-view-btn.active,
html[data-theme] .tasks-mode-btn.active,
html[data-theme] .badge.bg-primary {
    color: var(--on-brand) !important;
}

/* =========================================================================
   5) BUTTONS — solid azure primary, calm and consistent (kills teal/purple)
   ========================================================================= */
.btn {
    border-radius: var(--radius-sm);
    font-weight: 650;
    letter-spacing: .005em;
    transition: background-color .15s ease, border-color .15s ease, box-shadow .16s ease, transform .12s ease, color .15s ease;
}
.btn:active { transform: translateY(1px); }

html[data-theme] .btn-primary,
html[data-theme] .btn.primary,
html[data-theme] button.primary,
html[data-theme] .clienti-page .toolbar .btn.btn-primary,
html[data-theme] .entity-root .toolbar .btn.btn-primary {
    background: var(--primary) !important;
    background-image: none !important;
    border: 1px solid var(--primary) !important;
    color: var(--on-brand) !important;
    box-shadow: var(--shadow-xs);
}
html[data-theme] .btn-primary:hover,
html[data-theme] .btn.primary:hover,
html[data-theme] button.primary:hover,
html[data-theme] .clienti-page .toolbar .btn.btn-primary:hover,
html[data-theme] .entity-root .toolbar .btn.btn-primary:hover {
    background: var(--primaryHover) !important;
    border-color: var(--primaryHover) !important;
    transform: translateY(-1px);
    box-shadow: var(--shadow-sm);
}

html[data-theme] .btn-outline-secondary,
html[data-theme] .btn.ghost, html[data-theme] button.ghost {
    background: var(--surface) !important;
    border: 1px solid var(--border) !important;
    color: var(--text) !important;
}
html[data-theme] .btn-outline-secondary:hover,
html[data-theme] .btn.ghost:hover, html[data-theme] button.ghost:hover {
    background: var(--surface2) !important;
    border-color: color-mix(in srgb, var(--primary) 40%, var(--border)) !important;
}

html[data-theme] .btn-danger { background: var(--danger) !important; border-color: var(--danger) !important; color: #fff !important; }

/* =========================================================================
   6) INPUTS
   ========================================================================= */
html[data-theme] .form-control,
html[data-theme] .form-select,
html[data-theme] textarea.form-control,
html[data-theme] .field-input,
html[data-theme] .search-input input {
    border-radius: var(--radius-sm);
    border: 1px solid var(--border);
    background: var(--surface2);
    color: var(--text);
    transition: border-color .15s ease, box-shadow .15s ease, background-color .15s ease;
}
html[data-theme] .form-control:focus,
html[data-theme] .form-select:focus,
html[data-theme] textarea.form-control:focus,
html[data-theme] .field-input:focus {
    outline: none; border-color: var(--primary); box-shadow: var(--focus); background: var(--surface);
}
.form-control::placeholder, .field-input::placeholder { color: var(--muted2); opacity: 1; }

/* =========================================================================
   7) NAVIGATION RAIL (sidebar) — cohesive dark rail in both themes
   ========================================================================= */
html[data-theme] .sidebar {
    background: linear-gradient(180deg, var(--rail-bg) 0%, var(--rail-bg2) 100%);
    border-right: 1px solid var(--rail-border);
}
html[data-theme] .sidebar .menu .menu-section { color: var(--rail-muted); }
html[data-theme] .sidebar a,
html[data-theme] .sidebar .menu .item,
html[data-theme] .sidebar .menu .subitem { color: var(--rail-text); }
html[data-theme] .sidebar .menu .item {
    position: relative;
    border-radius: 10px;
    border: 1px solid transparent;
    transition: background-color .15s ease, color .15s ease, transform .12s ease;
}
html[data-theme] .sidebar .menu .item .ic { transition: transform .14s ease; opacity: .95; }
html[data-theme] .sidebar .menu .item:hover { background: var(--rail-hover); color: #fff; }
html[data-theme] .sidebar .menu .item:hover .ic { transform: scale(1.12); }
html[data-theme] .sidebar .menu .item.active {
    background: var(--primary);
    border-color: transparent;
    color: var(--on-brand);
    box-shadow: 0 6px 16px color-mix(in srgb, var(--primary) 45%, transparent);
}
html[data-theme] .sidebar .menu .item.active::before {
    content: ""; position: absolute; left: -10px; top: 22%; bottom: 22%;
    width: 3px; border-radius: 999px; background: #fff;
}
html[data-theme] .sidebar .menu .subitem:hover { background: var(--rail-hover); color: #fff; }
html[data-theme] .sidebar .menu .subitem.active { background: var(--primarySoft2); color: #fff; }

/* =========================================================================
   8) TOPBAR
   ========================================================================= */
html[data-theme] .topbar {
    background: var(--surface);
    border-bottom: 1px solid var(--border);
    box-shadow: var(--shadow-xs);
}
html[data-theme="dark"] .topbar { background: var(--surface); }
html[data-theme] .topnav-btn:hover,
html[data-theme] .top-search-toggle:hover, html[data-theme] .theme-toggle:hover, html[data-theme] .top-bell:hover {
    background: var(--surface2);
}
/* Setup button is a solid primary pill — keep white text readable on hover
   by darkening the brand colour instead of switching to a light surface. */
html[data-theme] .top-action:not(.outline):hover {
    background: var(--primaryHover);
    color: #fff;
}

/* =========================================================================
   9) CARDS / PANELS — one consistent surface treatment
   ========================================================================= */
html[data-theme] .card,
html[data-theme] .templates-section,
html[data-theme] .panel, html[data-theme] .surface-card,
html[data-theme] .list-card, html[data-theme] .toolbar-card, html[data-theme] .editor-card,
html[data-theme] .details-card, html[data-theme] .activity-card, html[data-theme] .event-card {
    background: var(--surface) !important;
    background-image: none !important;
    border: 1px solid var(--border) !important;
    border-radius: var(--radius-lg) !important;
    box-shadow: var(--shadow-sm) !important;
    color: var(--text) !important;
}

/* =========================================================================
   10) DASHBOARD KPI CARDS — calm, structured, brand top-edge
   ========================================================================= */
html[data-theme] .kpi {
    position: relative;
    background: var(--surface) !important;
    border: 1px solid var(--border) !important;
    border-radius: var(--radius-lg) !important;
    box-shadow: var(--shadow-sm) !important;
    overflow: hidden;
    transition: transform .15s ease, box-shadow .18s ease, border-color .18s ease;
    animation: br-fade-up .45s both;
}
html[data-theme] .kpi::before { content: ""; position: absolute; inset: 0 0 auto 0; height: 3px; background: var(--primary); }
html[data-theme] .kpis .kpi:nth-child(2) { animation-delay: .05s; }
html[data-theme] .kpis .kpi:nth-child(3) { animation-delay: .1s; }
html[data-theme] .kpi:hover { transform: translateY(-3px); box-shadow: var(--shadow-md); border-color: color-mix(in srgb, var(--primary) 32%, var(--border)); }
html[data-theme] .kpi-title { color: var(--muted) !important; text-transform: uppercase; letter-spacing: .07em; font-size: .74rem; font-weight: 700; }
html[data-theme] .kpi-value { color: var(--text) !important; font-weight: 700; }
html[data-theme] .kpi-sub { color: var(--muted2) !important; }

/* =========================================================================
   11) LIST VIEWS / ENTITY HOST — fix navy footers + low-contrast text
   ========================================================================= */
html[data-theme] .list-meta,
html[data-theme] .list-meta-footer,
html[data-theme] .list-pager,
html[data-theme] .list-scroll,
html[data-theme] .clienti-page .list-meta,
html[data-theme] .clienti-page .list-meta-footer,
html[data-theme] .entity-root .list-meta,
html[data-theme] .entity-root .list-meta-footer {
    background: var(--surface2) !important;
    background-image: none !important;
    color: var(--muted) !important;
    border-color: var(--border) !important;
}
html[data-theme] .list-meta *, html[data-theme] .list-meta-footer * { color: var(--muted) !important; }
html[data-theme] .page-num { color: var(--text) !important; }
html[data-theme] .list-pager .btn {
    background: var(--surface) !important;
    border: 1px solid var(--border) !important;
    color: var(--text) !important;
}
html[data-theme] .list-pager .btn:hover { background: var(--surface2) !important; border-color: color-mix(in srgb, var(--primary) 40%, var(--border)) !important; }

/* Tables */
.table { border-color: var(--border2); color: var(--text); }
.table > thead > tr > th, .table thead th {
    background: var(--surface2); color: var(--muted);
    font-weight: 700; font-size: .78rem; letter-spacing: .045em; text-transform: uppercase;
    border-bottom: 1px solid var(--border);
}
.table > tbody > tr { transition: background-color .13s ease, box-shadow .13s ease; }
.table.table-hover > tbody > tr:hover { background: var(--primarySoft); box-shadow: inset 3px 0 0 var(--primary); }
.table > tbody > tr > td { border-color: var(--border2); vertical-align: middle; }

/* =========================================================================
   12) SEGMENTED CONTROLS & TABS — one consistent pattern
   ========================================================================= */
html[data-theme] .calendar-view-switch, html[data-theme] .tasks-mode-tabs {
    background: var(--surface2) !important;
    border: 1px solid var(--border) !important;
    border-radius: 999px; padding: 3px;
}
html[data-theme] .calendar-view-btn, html[data-theme] .tasks-mode-btn {
    border: none !important; background: transparent !important; color: var(--muted) !important;
    border-radius: 999px; font-weight: 650;
    transition: color .15s ease, background-color .15s ease, box-shadow .15s ease;
}
html[data-theme] .calendar-view-btn.active, html[data-theme] .tasks-mode-btn.active {
    background: var(--primary) !important; color: var(--on-brand) !important; box-shadow: var(--shadow-xs);
    animation: br-pop .16s ease;
}

.nav-tabs { border-bottom-color: var(--border); }
.nav-tabs .nav-link { color: var(--muted); border: none; border-bottom: 2px solid transparent; border-radius: 0; font-weight: 650; }
.nav-tabs .nav-link:hover { color: var(--text); }
.nav-tabs .nav-link.active { color: var(--primary); background: transparent; border-bottom-color: var(--primary); }

html[data-theme] .workspace-tab-item.active { box-shadow: 0 -2px 0 var(--primary) inset, var(--shadow-xs); }

/* =========================================================================
   13) BADGES / CHIPS
   ========================================================================= */
.badge { border-radius: 999px; font-weight: 650; letter-spacing: .02em; padding: .36em .72em; }
html[data-theme] .calendar-chip, html[data-theme] .event-chip {
    background: var(--surface2); border: 1px solid var(--border2); color: var(--muted); border-radius: 999px; font-weight: 650;
}

/* =========================================================================
   14) MODALS
   ========================================================================= */
html[data-theme] .modal-content,
html[data-theme] .confirm-card, html[data-theme] .rl-modal,
html[data-theme] .calendar-modal, html[data-theme] .quick-modal, html[data-theme] .rt-modal {
    border-radius: var(--radius-lg) !important;
    border: 1px solid var(--border) !important;
    box-shadow: var(--shadow-lg) !important;
    background: var(--surface) !important;
    animation: br-pop .16s ease;
}
.modal-backdrop.show, .confirm-backdrop, .rl-overlay, .calendar-modal-backdrop, .rt-backdrop {
    background: color-mix(in srgb, #05080f 58%, transparent);
    backdrop-filter: blur(3px);
}

.progress-bar { background: var(--primary); }

/* =========================================================================
   17) LIVE-VALIDATED COMPONENT FIXES (v3.1)
   Verified against the running app. These beat the high-specificity scoped
   rules that hardcode off-palette colors (teal buttons, navy footers, orange
   downloads), unifying everything onto the single azure system.
   ========================================================================= */

/* List footer: kill the hardcoded navy gradient, restore contrast */
html[data-theme] .list-pane .list-card .list-meta.list-meta-footer,
html[data-theme] .list-card .list-meta.list-meta-footer {
    background: var(--surface2) !important;
    background-image: none !important;
    border-top: 1px solid var(--border) !important;
    color: var(--muted) !important;
    border-bottom-left-radius: var(--radius-lg) !important;
    border-bottom-right-radius: var(--radius-lg) !important;
}
html[data-theme] .list-card .list-meta-footer .list-count,
html[data-theme] .list-card .list-meta-footer .list-count *,
html[data-theme] .list-card .list-meta-footer .page-num { color: var(--text) !important; }
html[data-theme] .list-card .list-meta-footer .btn { background: var(--surface) !important; border: 1px solid var(--border) !important; color: var(--text) !important; }
html[data-theme] .list-card .list-meta-footer .btn:hover { background: var(--bg2) !important; }
html[data-theme] .list-card tbody tr:hover { background: var(--primarySoft) !important; }

/* Stray teal/green accent badges -> azure */
html[data-theme] .clienti-total-badge,
html[data-theme] [class*="total-badge"],
html[data-theme] [class*="count-badge"] {
    background: var(--primary) !important; color: #fff !important; border-color: transparent !important;
}

/* Secondary / outline buttons get a defined surface */
html[data-theme] .toolbar .btn.btn-outline-secondary,
html[data-theme] .btn.btn-outline-secondary.filter-toggle,
html[data-theme] .list-search .btn.btn-outline-secondary {
    background: var(--surface2) !important; border: 1px solid var(--border) !important; color: var(--text) !important;
}
html[data-theme] .toolbar .btn.btn-outline-secondary:hover,
html[data-theme] .btn.btn-outline-secondary.filter-toggle:hover {
    background: var(--bg2) !important; border-color: color-mix(in srgb, var(--primary) 40%, var(--border)) !important;
}

/* Dashboard calendar-row buttons -> azure primary + neutral secondary */
html[data-theme] .calendar-row-action {
    background: var(--primary) !important; border: 1px solid var(--primary) !important; color: #fff !important;
    border-radius: var(--radius-sm) !important; box-shadow: var(--shadow-xs);
}
html[data-theme] .calendar-row-action:hover { background: var(--primaryHover) !important; border-color: var(--primaryHover) !important; transform: translateY(-1px); }
html[data-theme] .calendar-row-action.calendar-row-action-secondary { background: var(--surface) !important; border: 1px solid var(--border) !important; color: var(--text) !important; }
html[data-theme] .calendar-row-action.calendar-row-action-secondary:hover { background: var(--surface2) !important; border-color: color-mix(in srgb, var(--primary) 40%, var(--border)) !important; }
html[data-theme] .calendar-row { border: 1px solid var(--border) !important; border-radius: var(--radius-md) !important; }

/* RelatedList action buttons -> unified azure (kills navy primary + orange downloads) */
html[data-theme] .rl-btn.primary,
html[data-theme] .rl-report-btn,
html[data-theme] .rl-contract-btn,
html[data-theme] .rl-btn.chip.primary,
html[data-theme] .rl-btn.chip.info,
html[data-theme] .rl-btn.chip.success,
html[data-theme] .rl-btn.chip.warning.rl-report-btn,
html[data-theme] .clienti-page .related-section .rl-btn.primary,
html[data-theme] .rl-modal .rl-btn.primary {
    background: var(--primary) !important; background-image: none !important;
    border: 1px solid var(--primary) !important; color: #fff !important; box-shadow: var(--shadow-xs) !important;
}
html[data-theme] .rl-btn.primary:hover,
html[data-theme] .rl-report-btn:hover,
html[data-theme] .rl-contract-btn:hover,
html[data-theme] .clienti-page .related-section .rl-btn.primary:hover { background: var(--primaryHover) !important; border-color: var(--primaryHover) !important; }
html[data-theme] .rl-btn.danger { background: var(--danger) !important; background-image: none !important; border: 1px solid var(--danger) !important; color: #fff !important; }

/* Buttons sitting ON the coloured rl-head bar (blue on clienti pages, navy
   elsewhere) were rendering button-colour-on-same-colour and looked almost
   transparent. Give the header bar its own high-contrast treatment. */
html[data-theme] .related-section .rl-head .rl-btn.primary,
html[data-theme] .clienti-page .related-section .rl-head .rl-btn.primary {
    background: #fff !important; background-image: none !important;
    border: 1px solid #fff !important; color: var(--primary) !important;
    box-shadow: 0 2px 6px rgba(2, 6, 23, .18) !important;
}
html[data-theme] .related-section .rl-head .rl-btn.primary:hover,
html[data-theme] .clienti-page .related-section .rl-head .rl-btn.primary:hover {
    background: #eef4ff !important; border-color: #eef4ff !important; color: var(--primaryHover) !important;
}
html[data-theme] .related-section .rl-head .rl-btn.ghost,
html[data-theme] .clienti-page .related-section .rl-head .rl-btn.ghost {
    background: rgba(255, 255, 255, .16) !important;
    border: 1px solid rgba(255, 255, 255, .55) !important;
    color: #fff !important;
}
html[data-theme] .related-section .rl-head .rl-btn.ghost:hover,
html[data-theme] .clienti-page .related-section .rl-head .rl-btn.ghost:hover {
    background: rgba(255, 255, 255, .26) !important; border-color: #fff !important;
}

/* Legacy "IULITEC" flag -> tasteful soft-amber chip (semantic, not loud) */
html[data-theme] .rl-legacy-chip:not(.rl-legacy-chip--placeholder) {
    background: var(--warnSoft) !important; background-image: none !important; color: var(--warning) !important;
    border: 1px solid color-mix(in srgb, var(--warning) 35%, transparent) !important; box-shadow: none !important;
}

/* =========================================================================
   18) NAVIGATION RAIL (.sidebar-rail) — beat the scoped (0,3,1) blue rule
   ========================================================================= */
html[data-theme] .sidebar.sidebar-rail {
    background: linear-gradient(180deg, var(--rail-bg) 0%, var(--rail-bg2) 100%) !important;
    border-right: 1px solid rgba(255, 255, 255, .06) !important;
}
html[data-theme] .rail-nav .rail-item {
    color: var(--rail-text) !important;
    border-radius: 12px !important;
    transition: background-color .15s ease, color .15s ease, transform .12s ease !important;
}
html[data-theme] .rail-nav .rail-item .rail-label { color: inherit !important; }
html[data-theme] .rail-nav .rail-item:hover { background: var(--rail-hover) !important; color: #fff !important; transform: translateY(-1px); }
html[data-theme] .rail-nav .rail-item.active,
html[data-theme] .rail-nav .rail-item.is-active,
html[data-theme] .rail-nav .rail-item.selected,
html[data-theme] .rail-nav .rail-item[aria-current] {
    background: var(--primary) !important;
    color: #fff !important;
    box-shadow: 0 6px 16px color-mix(in srgb, var(--primary) 45%, transparent) !important;
}
html[data-theme] .rail-nav .rail-item.active .rail-label,
html[data-theme] .rail-nav .rail-item[aria-current] .rail-label { color: #fff !important; }

/* =========================================================================
   19) SETUP PAGES — lighter, airier filter row + pill sub-tabs
   ========================================================================= */
html[data-theme] .filter-row { background: var(--surface) !important; }
html[data-theme] .filter-input {
    background: var(--surface2) !important;
    border: 1px solid transparent !important;
    border-radius: 8px !important;
    color: var(--text) !important;
    box-shadow: none !important;
    font-size: .82rem !important;
}
html[data-theme] .filter-input:focus { background: var(--surface) !important; border-color: var(--primary) !important; box-shadow: var(--focus) !important; }
html[data-theme] .filter-input::placeholder { color: var(--muted2) !important; }

html[data-theme] .users-subtab {
    background: var(--surface2) !important; border: 1px solid var(--border) !important;
    color: var(--muted) !important; border-radius: 999px !important; font-weight: 650 !important;
}
html[data-theme] .users-subtab:hover { color: var(--text) !important; }
html[data-theme] .users-subtab.active { background: var(--primary) !important; color: #fff !important; border-color: var(--primary) !important; }

/* =========================================================================
   20) LIST TABLES — airier (no column dividers / grey blocks) + clean
       icon action buttons. Verified live on the Setup Users list.
   ========================================================================= */
html[data-theme] .list-card table thead th,
html[data-theme] .list-card tr.filter-row > td,
html[data-theme] .list-card tr.filter-row > th,
html[data-theme] .list-card .filter-row > * {
    border-right: none !important;
    border-left: none !important;
    background: var(--surface) !important;
}
html[data-theme] .list-card table thead th {
    border-bottom: 1px solid var(--border) !important;
    color: var(--muted) !important;
    font-weight: 700 !important;
    text-transform: uppercase;
    letter-spacing: .04em;
    font-size: .76rem !important;
}
html[data-theme] .list-card tr.filter-row > * {
    border-bottom: 1px solid var(--border2) !important;
    padding-top: .25rem !important;
    padding-bottom: .4rem !important;
}
html[data-theme] .list-card tbody td { border-top: 1px solid var(--border2) !important; border-right: none !important; }
html[data-theme] .list-card .list-search, html[data-theme] .list-card .list-meta { background: var(--surface) !important; }

/* Clean icon action buttons (kill the grey MudBlazor boxes) */
html[data-theme] .list-card .mud-icon-button,
html[data-theme] .setup-page .setup-users-page.entity-api-users .mud-icon-button,
html[data-theme] .setup-page .entity-root.setup-users-page.entity-api-users .mud-icon-button,
html[data-theme] .entity-root.entity-api-users .action-cell .mud-icon-button {
    background: transparent !important;
    border: 1px solid transparent !important;
    color: var(--muted) !important;
    box-shadow: none !important;
}
html[data-theme] .list-card .mud-icon-button:hover,
html[data-theme] .setup-page .entity-root.setup-users-page.entity-api-users .mud-icon-button:hover,
html[data-theme] .entity-root.entity-api-users .action-cell .mud-icon-button:hover {
    background: var(--primarySoft) !important;
    color: var(--primary) !important;
}
html[data-theme] .entity-root.entity-api-users .action-cell .mud-icon-button:last-child:hover {
    background: var(--dangerSoft) !important;
    color: var(--danger) !important;
}

/* Premium row polish: hover, breathing room, round avatars, tidy icons */
html[data-theme] .list-card tbody tr { transition: background-color .14s ease; }
html[data-theme] .list-card tbody tr:hover { background: var(--primarySoft) !important; }
html[data-theme] .list-card tbody td { padding-top: .72rem !important; padding-bottom: .72rem !important; vertical-align: middle !important; }
html[data-theme] .list-card tbody td:first-child { padding-left: 1rem !important; }
html[data-theme] .list-card tbody td img {
    border-radius: 50% !important; width: 38px !important; height: 38px !important; object-fit: cover !important;
    border: 2px solid var(--surface) !important; box-shadow: 0 0 0 1px var(--border) !important; background: var(--surface2) !important;
}
html[data-theme] .list-card .action-cell { white-space: nowrap !important; }
html[data-theme] .list-card .mud-icon-button { width: 34px !important; height: 34px !important; min-width: 34px !important; border-radius: 9px !important; }
html[data-theme] .list-card table thead th { padding-top: .6rem !important; padding-bottom: .6rem !important; }
html[data-theme] .list-card .list-search { padding: .9rem 1rem .3rem !important; }

/* =========================================================================
   21) LIST TABLE — add brand life (blue header tint, azure avatar ring,
       coloured + larger icon action buttons). Overrides the neutral pass.
   ========================================================================= */
html[data-theme] .list-card table thead th {
    background: color-mix(in srgb, var(--primary) 7%, var(--surface)) !important;
    color: color-mix(in srgb, var(--primary) 55%, var(--text)) !important;
    border-bottom: 2px solid color-mix(in srgb, var(--primary) 30%, var(--border)) !important;
}
html[data-theme] .list-card .list-search,
html[data-theme] .list-card .list-meta,
html[data-theme] .list-card tr.filter-row > * { background: var(--surface) !important; }

html[data-theme] .list-card tbody td img {
    border: 2px solid var(--surface) !important;
    box-shadow: 0 0 0 2px var(--primary) !important;
}

/* Action buttons: visible azure chip (archive) + red chip (delete) */
html[data-theme] .list-card .action-cell .mud-icon-button {
    width: 38px !important; height: 38px !important; min-width: 38px !important;
    border-radius: 10px !important; margin: 0 3px !important;
    background: var(--primarySoft) !important; color: var(--primary) !important; border: 1px solid transparent !important;
    transition: background-color .15s ease, color .15s ease, transform .1s ease !important;
}
html[data-theme] .list-card .action-cell .mud-icon-button:hover { background: var(--primary) !important; color: #fff !important; transform: translateY(-1px); }
html[data-theme] .list-card .action-cell .mud-icon-button:last-child { background: var(--dangerSoft) !important; color: var(--danger) !important; }
html[data-theme] .list-card .action-cell .mud-icon-button:last-child:hover { background: var(--danger) !important; color: #fff !important; }
html[data-theme] .list-card .action-cell .mud-icon-button .mud-icon-button-label,
html[data-theme] .list-card .action-cell .mud-icon-button .mud-icon-button-label svg,
html[data-theme] .list-card .action-cell .mud-icon-button .mud-icon-root,
html[data-theme] .list-card .action-cell .mud-icon-button svg {
    font-size: 1.25rem !important; width: 20px !important; height: 20px !important; fill: currentColor !important;
}

/* =========================================================================
   22) MORE BRAND COLOR IN TABLES — zebra tint, azure hover + accent bar,
       bluer header, coloured key text. Cuts the "too much grey" feel.
   ========================================================================= */
/* Zebra striping with a faint azure tint */
html[data-theme] .list-card tbody tr:nth-child(odd) td { background: var(--surface) !important; }
html[data-theme] .list-card tbody tr:nth-child(even) td { background: color-mix(in srgb, var(--primary) 5%, var(--surface)) !important; }

/* Stronger azure hover + left accent bar */
html[data-theme] .list-card tbody tr:hover td { background: color-mix(in srgb, var(--primary) 13%, var(--surface)) !important; }
html[data-theme] .list-card tbody tr:hover td:first-child { box-shadow: inset 4px 0 0 var(--primary) !important; }

/* Clearly blue header band */
html[data-theme] .list-card table thead th {
    background: color-mix(in srgb, var(--primary) 13%, var(--surface)) !important;
    color: color-mix(in srgb, var(--primary) 72%, var(--text)) !important;
    border-bottom: 2px solid color-mix(in srgb, var(--primary) 45%, var(--border)) !important;
}

/* Users list: azure + semibold key identifier, link-blue email */
html[data-theme] .entity-api-users tbody td:nth-child(2) { color: var(--primary) !important; font-weight: 700 !important; }
html[data-theme] .entity-api-users tbody td:nth-child(6) { color: color-mix(in srgb, var(--primary) 75%, var(--text)) !important; }

/* Subtle azure hairline under the search band */
html[data-theme] .list-card .list-search { border-bottom: 1px solid color-mix(in srgb, var(--primary) 12%, var(--border)) !important; }

/* =========================================================================
   23) EVEN MORE COLOR (Users list) — white bands, azure pager, emoji column
       headers, coloured role, stronger zebra/header.
   ========================================================================= */
html[data-theme] .list-card .list-meta, html[data-theme] .list-card .list-search { background: var(--surface) !important; }
html[data-theme] .list-card .list-meta { border-bottom: 1px solid color-mix(in srgb, var(--primary) 12%, var(--border)) !important; }
html[data-theme] .list-card .list-count { color: var(--primary) !important; font-weight: 700 !important; }
html[data-theme] .list-card .list-pager .btn, html[data-theme] .list-card .list-pager button {
    background: var(--primarySoft) !important; color: var(--primary) !important;
    border: 1px solid color-mix(in srgb, var(--primary) 28%, transparent) !important; font-weight: 700 !important;
}
html[data-theme] .list-card .list-pager .btn:hover { background: var(--primary) !important; color: #fff !important; }
html[data-theme] .list-card .page-num { color: var(--primary) !important; }

/* Emoji icons on the Users column headers (label row only) */
html[data-theme] .entity-api-users thead tr:first-child th:nth-child(1)::before { content: "🖼 "; }
html[data-theme] .entity-api-users thead tr:first-child th:nth-child(2)::before { content: "👤 "; }
html[data-theme] .entity-api-users thead tr:first-child th:nth-child(3)::before { content: "🪪 "; }
html[data-theme] .entity-api-users thead tr:first-child th:nth-child(4)::before { content: "📞 "; }
html[data-theme] .entity-api-users thead tr:first-child th:nth-child(5)::before { content: "🛡 "; }
html[data-theme] .entity-api-users thead tr:first-child th:nth-child(6)::before { content: "✉ "; }
html[data-theme] .entity-api-users thead tr:first-child th:nth-child(7)::before { content: "⚙ "; }

/* Coloured role column + stronger zebra/header */
html[data-theme] .entity-api-users tbody tr td:nth-child(5) { color: var(--primary) !important; font-weight: 700 !important; }
html[data-theme] .list-card tbody tr:nth-child(even) td { background: color-mix(in srgb, var(--primary) 7%, var(--surface)) !important; }
html[data-theme] .list-card table thead th { background: color-mix(in srgb, var(--primary) 15%, var(--surface)) !important; }


/* =========================================================================
   24) VIBE PASS v4 — Dashboard KPIs, Client-Details related-list tables,
       Calendar day headers, unified Acțiuni dropdown chips/icons.
       Additive only; verified live (Chrome) on 2026-06.
   ========================================================================= */

/* --- 24a) Dashboard KPI cards: distinct accent bar + emoji + colored value */
html[data-theme] .kpis .kpi { position: relative; overflow: hidden; }
html[data-theme] .kpis .kpi::before {
    content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 5px;
}
html[data-theme] .kpis .kpi:nth-child(1)::before { background: #2563EB; }
html[data-theme] .kpis .kpi:nth-child(2)::before { background: #F59E0B; }
html[data-theme] .kpis .kpi:nth-child(3)::before { background: #10B981; }
html[data-theme] .kpis .kpi:nth-child(1) { background: color-mix(in srgb, #2563EB 4%, var(--surface)) !important; }
html[data-theme] .kpis .kpi:nth-child(2) { background: color-mix(in srgb, #F59E0B 5%, var(--surface)) !important; }
html[data-theme] .kpis .kpi:nth-child(3) { background: color-mix(in srgb, #10B981 5%, var(--surface)) !important; }
html[data-theme] .kpis .kpi .kpi-title { display: flex; align-items: center; gap: .45rem; }
html[data-theme] .kpis .kpi:nth-child(1) .kpi-title::before { content: "👥"; font-size: 1.05rem; }
html[data-theme] .kpis .kpi:nth-child(2) .kpi-title::before { content: "🔧"; font-size: 1.05rem; }
html[data-theme] .kpis .kpi:nth-child(3) .kpi-title::before { content: "💰"; font-size: 1.05rem; }
html[data-theme] .kpis .kpi:nth-child(1) .kpi-value { color: #2563EB !important; }
html[data-theme] .kpis .kpi:nth-child(2) .kpi-value { color: #D97706 !important; }
html[data-theme] .kpis .kpi:nth-child(3) .kpi-value { color: #059669 !important; }
/* Dashboard card headers: emoji accents */
html[data-theme] .card-calendar .calendar-head::before { content: "📅 "; }
html[data-theme] .card-tasks .tasks-head::before { content: "✅ "; }

/* --- 24b) Related-list tables (Client Details tabs): blue header + zebra --- */
html[data-theme] .related-section .list-card table.table thead th {
    background: color-mix(in srgb, var(--primary) 20%, var(--surface)) !important;
    color: color-mix(in srgb, var(--primary) 88%, var(--text)) !important;
    border-bottom: 2px solid color-mix(in srgb, var(--primary) 55%, var(--border)) !important;
    text-transform: uppercase; letter-spacing: .045em; font-weight: 700 !important;
    font-size: .74rem !important; padding-top: .6rem !important; padding-bottom: .6rem !important;
}
html[data-theme] .related-section .list-card table.table tbody tr.rl-row td {
    border-top: 1px solid var(--border2) !important; vertical-align: middle !important;
}
html[data-theme] .related-section .list-card table.table tbody tr.rl-row:nth-child(odd) td { background: var(--surface) !important; }
html[data-theme] .related-section .list-card table.table tbody tr.rl-row:nth-child(even) td { background: color-mix(in srgb, var(--primary) 6%, var(--surface)) !important; }
html[data-theme] .related-section .list-card table.table tbody tr.rl-row { transition: background-color .14s ease; }
html[data-theme] .related-section .list-card table.table tbody tr.rl-row:hover td { background: color-mix(in srgb, var(--primary) 14%, var(--surface)) !important; }
html[data-theme] .related-section .list-card table.table tbody tr.rl-row:hover td:first-child { box-shadow: inset 4px 0 0 var(--primary) !important; }

/* --- 24c) Unified Acțiuni cell + dropdown menu icon colors (new markup) --- */
html[data-theme] .rl-delgaz-chip {
    background: var(--primarySoft) !important; color: var(--primary) !important;
    border: 1px solid color-mix(in srgb, var(--primary) 25%, transparent) !important;
}
html[data-theme] .rl-contract-actions-cell { white-space: nowrap; }
html[data-theme] .rl-contract-actions-cell .rl-legacy-chip { margin-right: .35rem; vertical-align: middle; }
html[data-theme] .rl-actions-ic-reg  { background: color-mix(in srgb, #2563EB 16%, transparent) !important; color: #2563EB !important; }
html[data-theme] .rl-actions-ic-send { background: color-mix(in srgb, #10B981 16%, transparent) !important; color: #059669 !important; }
html[data-theme] .rl-actions-ic-pv   { background: color-mix(in srgb, #8B5CF6 16%, transparent) !important; color: #7C3AED !important; }
html[data-theme] .rl-actions-ic-gen  { background: color-mix(in srgb, #F59E0B 18%, transparent) !important; color: #D97706 !important; }

/* --- 24d) Calendar (Planificări): blue day-header band + bluer time gutter */
html[data-theme] .daycol .dayhdr {
    background: color-mix(in srgb, var(--primary) 12%, var(--surface)) !important;
    color: color-mix(in srgb, var(--primary) 85%, var(--text)) !important;
    font-weight: 700 !important;
    border-bottom: 2px solid color-mix(in srgb, var(--primary) 40%, var(--border)) !important;
}
html[data-theme] .timecol .hour { color: color-mix(in srgb, var(--primary) 55%, var(--muted)) !important; font-weight: 600 !important; }

/* =========================================================================
   25) CALENDAR (Planificări) LAYOUT FIX — confine vertical scroll to the
       grid so the sidebar/menu + header stay fixed, and align the time
       gutter with the day columns (kills the two "spill" gaps where the
       hour labels ran past the card background). Week & day multi-layout.
   ========================================================================= */
html[data-theme] .planificari-page .week-multi-layout {
    min-height: 360px;
    overflow: auto !important;
    align-items: stretch !important;
}
/* Time gutter scrolls WITH the hours (vertical) but stays pinned left
   during horizontal scroll; full content height so its card covers all hours. */
html[data-theme] .planificari-page .week-multi-layout .shared-timecol {
    position: sticky !important;
    left: 0 !important;
    top: auto !important;
    height: auto !important;
    min-height: 0 !important;
    z-index: 3;
}
/* User day-board fills its natural height (no fixed-height spill). The grid's
   align-items:stretch then keeps gutter + boards the same height. */
html[data-theme] .planificari-page .week-multi-layout .weekview.user-week {
    height: auto !important;
    min-height: 0 !important;
}
/* Outer layout owns the scroll, so the inner events column must not clip/scroll.
   Also transparent: theme.css paints .eventscol solid var(--surface), which otherwise
   sits on top of and hides the .week-daycol alternating column tint below it. */
html[data-theme] .planificari-page .week-multi-layout .eventscol {
    overflow: visible !important;
    background: transparent !important;
}

/* =========================================================================
   26) CALENDAR POLISH — merge the hours gutter into the grid (no gap, one
       continuous surface) + modern Google-Calendar look: rounded outer card,
       gradient time rail with 🕐, flat day columns divided by hairlines,
       continuous header band, smoother event cards. Works with §25 (scroll).
   ========================================================================= */
html[data-theme] .planificari-page .week-multi-layout {
    gap: 0 !important;
    background: transparent !important;
    border: 1px solid color-mix(in srgb, var(--primary) 18%, var(--border)) !important;
    border-radius: 16px !important;
    box-shadow: 0 12px 34px rgba(2,6,23,.07) !important;
}
/* Time gutter = left rail of the same card */
html[data-theme] .planificari-page .week-multi-layout .shared-timecol {
    background: linear-gradient(180deg, color-mix(in srgb, var(--primary) 9%, var(--surface)), var(--surface)) !important;
    border: none !important;
    border-right: 1px solid color-mix(in srgb, var(--primary) 16%, var(--border)) !important;
    border-radius: 16px 0 0 16px !important;
    box-shadow: none !important;
    padding-top: 0 !important;
}
html[data-theme] .planificari-page .week-multi-layout .shared-timecol .dayhdr.blank {
    visibility: visible !important;
    align-items: center !important;
    justify-content: center !important;
    color: var(--primary) !important;
    font-size: 1.05rem !important;
}
html[data-theme] .planificari-page .week-multi-layout .shared-timecol .dayhdr.blank::after { content: "🕐"; }
html[data-theme] .planificari-page .week-multi-layout .shared-timecol .hour {
    color: color-mix(in srgb, var(--primary) 62%, var(--muted)) !important;
    font-weight: 600 !important;
}
/* User board: blends into the surface (no separate card) */
html[data-theme] .planificari-page .week-multi-layout .weekview.user-week {
    background: transparent !important;
    border: none !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    padding: 0 !important;
}
html[data-theme] .planificari-page .week-multi-layout .week-user-head {
    color: var(--primary) !important;
    font-weight: 700 !important;
    letter-spacing: .01em;
}
/* Day columns: continuous grid with thin azure dividers */
html[data-theme] .planificari-page .week-multi-layout .week-grid { gap: 0 !important; }
html[data-theme] .planificari-page .week-multi-layout .week-daycol {
    background: transparent !important;
    border: none !important;
    border-left: 1px solid color-mix(in srgb, var(--primary) 9%, var(--border)) !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    padding: 0 !important;
    transition: background-color .15s ease;
}
html[data-theme] .planificari-page .week-multi-layout .week-grid .week-daycol:first-child { border-left: none !important; }
/* Alternate column tint so adjacent operators/days are easy to tell apart at a glance. */
html[data-theme] .planificari-page .week-multi-layout .week-daycol:nth-child(odd) {
    background: var(--surface) !important;
}
html[data-theme] .planificari-page .week-multi-layout .week-daycol:nth-child(even) {
    background: color-mix(in srgb, var(--primary) 6%, var(--surface)) !important;
}
html[data-theme] .planificari-page .week-multi-layout .week-daycol:hover { background: color-mix(in srgb, var(--primary) 10%, var(--surface)) !important; }
html[data-theme] .planificari-page .week-multi-layout .week-daycol .dayhdr {
    border-radius: 0 !important;
    margin: 0 !important;
    padding: .4rem .55rem !important;
}
/* Smoother event cards */
html[data-theme] .planificari-page .week-multi-layout .event {
    border-radius: 12px !important;
    box-shadow: 0 6px 16px rgba(2,6,23,.13) !important;
    border: 1px solid rgba(255,255,255,.55);
}

/* =========================================================================
   27) PLANIFICĂRI DURATIONS — Setup config panel + booking-modal category hint
   ========================================================================= */
html[data-theme] .plan-durations .pd-head h2 { font-weight: 800; letter-spacing: -.01em; margin-bottom: .25rem; }
html[data-theme] .plan-durations .pd-card {
    background: var(--surface) !important;
    border: 1px solid color-mix(in srgb, var(--primary) 16%, var(--border)) !important;
    border-radius: 14px; padding: 1rem 1.1rem; margin: 1rem 0;
    box-shadow: 0 6px 18px rgba(2,6,23,.05);
}
html[data-theme] .plan-durations .pd-row { display: flex; align-items: center; gap: .5rem; flex: 0 0 auto; }
html[data-theme] .plan-durations .pd-input { width: 68px; min-width: 0; text-align: center; font-weight: 700; }
html[data-theme] .plan-durations .pd-unit { color: var(--muted); font-weight: 600; flex: 0 0 auto; }
html[data-theme] .plan-durations .pd-grid {
    display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: .8rem; margin-top: .5rem;
}
html[data-theme] .plan-durations .pd-cat {
    display: flex; align-items: center; justify-content: space-between; gap: .6rem;
    min-width: 0;
    background: color-mix(in srgb, var(--primary) 5%, var(--surface));
    border: 1px solid color-mix(in srgb, var(--primary) 12%, var(--border));
    border-radius: 10px; padding: .5rem .7rem;
}
html[data-theme] .plan-durations .pd-cat-name { font-weight: 700; min-width: 0; overflow-wrap: anywhere; color: color-mix(in srgb, var(--primary) 80%, var(--text)); }
html[data-theme] .plan-durations .pd-help {
    margin-top: .6rem; font-size: .85rem; color: var(--muted);
    background: color-mix(in srgb, var(--primary) 6%, var(--surface));
    border-left: 3px solid color-mix(in srgb, var(--primary) 45%, var(--border));
    padding: .5rem .7rem; border-radius: 8px;
}
html[data-theme] .plan-durations .pd-actions { display: flex; align-items: center; gap: .8rem; margin-top: 1rem; }
html[data-theme] .plan-durations .pd-saved { color: var(--success, #059669); font-weight: 700; }

/* Booking-modal category hint */
html[data-theme] .plan-hint { margin-top: .4rem; font-size: .82rem; line-height: 1.35; border-radius: 8px; padding: .45rem .6rem; }
html[data-theme] .plan-hint.muted { color: var(--muted); background: color-mix(in srgb, var(--primary) 4%, var(--surface)); }
html[data-theme] .plan-hint.warn {
    color: #92591a; background: color-mix(in srgb, #F59E0B 12%, var(--surface));
    border: 1px solid color-mix(in srgb, #F59E0B 35%, transparent);
}

/* =========================================================================
   28) RELATED-LIST ROW ALIGNMENT — IULITEC/Delgaz chips moved to a leading
       status column at the START of the row, so the trailing "Acțiuni"
       dropdown buttons all line up instead of cascading / clipping.
   ========================================================================= */
/* Leading status column: shrink to content, never wrap */
html[data-theme] .related-section .list-card table.table th.rl-status-col,
html[data-theme] .related-section .list-card table.table td.rl-status-cell {
    width: 1%;
    white-space: nowrap;
    vertical-align: middle;
    padding-left: .9rem !important;
    padding-right: .5rem !important;
}
html[data-theme] .rl-status-cell .rl-legacy-chip { margin: 0 .25rem 0 0; vertical-align: middle; }

/* Acțiuni cell: now contains only the toggle — keep it tidy and consistently aligned */
html[data-theme] .related-section .list-card table.table td.rl-contract-actions-cell,
html[data-theme] .related-section .list-card table.table th.rl-contract-actions-col {
    white-space: nowrap;
    text-align: left;
}
html[data-theme] .rl-contract-actions-cell .rl-actions-dropdown { display: inline-flex; }

/* =========================================================================
   29) CUSTOM CONFIRM DIALOG — brand-styled replacement for native
       window.confirm (used by the "unsaved changes?" modal-close guard).
   ========================================================================= */
.mc-confirm-overlay {
    position: fixed; inset: 0; z-index: 100000;
    display: flex; align-items: center; justify-content: center;
    background: rgba(2, 6, 23, .46);
    -webkit-backdrop-filter: blur(2px); backdrop-filter: blur(2px);
    opacity: 0; transition: opacity .16s ease;
    padding: 1rem;
}
.mc-confirm-overlay.is-open { opacity: 1; }
.mc-confirm-card {
    width: min(430px, calc(100vw - 2rem));
    background: var(--surface, #fff);
    color: var(--text, #0f172a);
    border: 1px solid var(--border, #e3e8f0);
    border-radius: 16px;
    box-shadow: 0 24px 60px rgba(2, 6, 23, .35);
    padding: 1.5rem 1.4rem 1.2rem;
    text-align: center;
    transform: translateY(10px) scale(.97);
    transition: transform .17s cubic-bezier(.2, .8, .2, 1);
}
.mc-confirm-overlay.is-open .mc-confirm-card { transform: none; }
.mc-confirm-icon { font-size: 2.1rem; line-height: 1; }
.mc-confirm-title { font-weight: 800; font-size: 1.18rem; letter-spacing: -.01em; margin: .55rem 0 .35rem; color: var(--text, #0f172a); }
.mc-confirm-text { color: var(--muted, #64748b); font-size: .95rem; line-height: 1.5; }
.mc-confirm-actions { display: flex; gap: .6rem; justify-content: center; margin-top: 1.35rem; }
.mc-confirm-btn {
    border: 1px solid transparent; border-radius: 11px;
    padding: .62rem 1.15rem; font-weight: 700; font-size: .95rem; cursor: pointer;
    transition: background-color .14s ease, color .14s ease, transform .1s ease, filter .14s ease;
}
.mc-confirm-btn.ghost { background: var(--surface2, #f1f5f9); color: var(--text, #0f172a); border-color: var(--border, #e3e8f0); }
.mc-confirm-btn.ghost:hover { background: var(--border2, #e2e8f0); }
.mc-confirm-btn.danger { background: var(--danger, #dc2626); color: #fff; }
.mc-confirm-btn.danger:hover { filter: brightness(.95); transform: translateY(-1px); }
.mc-confirm-btn.primary { background: var(--primary, #2563EB); color: #fff; }
.mc-confirm-btn.primary:hover { filter: brightness(.95); transform: translateY(-1px); }
.mc-confirm-btn:focus-visible { outline: 2px solid var(--primary, #2563EB); outline-offset: 2px; }

/* =========================================================================
   30) CALENDAR DRAG-TO-RESCHEDULE — grab cursor, floating ghost, snapped
       drop indicator. Smooth + modern.
   ========================================================================= */
/* Events are draggable -> grab cursor; smooth position transitions on re-render */
html[data-theme] .planificari-page .week-multi-layout .event,
html[data-theme] .planificari-page .dayview .event {
    cursor: grab;
    transition: top .18s cubic-bezier(.2,.8,.2,1), height .18s cubic-bezier(.2,.8,.2,1),
                left .18s ease, box-shadow .15s ease, transform .12s ease;
    touch-action: none;
}
html[data-theme] body.pl-dragging,
html[data-theme] body.pl-dragging * { cursor: grabbing !important; }

/* The original event while a drag is in progress: faded placeholder */
html[data-theme] .planificari-page .event.pl-event-dragging {
    opacity: .28;
    filter: grayscale(.3);
    transition: none;
}

/* The floating ghost that follows the cursor */
html[data-theme] .pl-drag-ghost,
.pl-drag-ghost {
    border-radius: 12px !important;
    box-shadow: 0 18px 40px rgba(2,6,23,.34) !important;
    border: 1px solid rgba(255,255,255,.6) !important;
    transform: translate3d(0,0,0) scale(1.02);
    opacity: .96;
    transition: none !important;
}

/* The snapped drop target indicator inside a column */
.pl-drop-indicator {
    position: absolute;
    left: 3px; right: 3px;
    border-radius: 10px;
    background: color-mix(in srgb, var(--primary, #2563EB) 14%, transparent);
    border: 1.5px dashed var(--primary, #2563EB);
    pointer-events: none;
    z-index: 5;
    display: none;
}
.pl-drop-indicator .pl-drop-time {
    position: absolute;
    top: -10px; left: 8px;
    font-size: .72rem; font-weight: 800; letter-spacing: .01em;
    color: #fff;
    background: var(--primary, #2563EB);
    padding: .08rem .4rem;
    border-radius: 999px;
    white-space: nowrap;
    box-shadow: 0 4px 10px rgba(2,6,23,.25);
}

/* =========================================================================
   31) CALENDAR DRAG — extra surfaces (dashboard timeline + side gadget).
       Shares the engine in §30; adds grab cursors and the bucket highlight.
   ========================================================================= */
/* Dashboard "Calendarul Zilei" timeline event blocks are draggable */
html[data-theme] .calendar-grid .event-block {
    cursor: grab;
    transition: top .18s cubic-bezier(.2,.8,.2,1), height .18s cubic-bezier(.2,.8,.2,1),
                box-shadow .15s ease, transform .12s ease;
    touch-action: none;
}
html[data-theme] .calendar-grid .event-block.pl-event-dragging {
    opacity: .28;
    filter: grayscale(.3);
    transition: none;
}

/* Side-gadget calendar events are draggable */
html[data-theme] .wg-calendar-grid .wg-event {
    cursor: grab;
    touch-action: none;
}
html[data-theme] .wg-calendar-grid .wg-event.pl-event-dragging {
    opacity: .28;
    filter: grayscale(.3);
}

/* Bucket-mode drop target: the hour row currently under the cursor */
html[data-theme] .wg-hour-body.pl-bucket-target {
    background: color-mix(in srgb, var(--primary, #2563EB) 12%, transparent);
    box-shadow: inset 0 0 0 1.5px var(--primary, #2563EB);
    border-radius: 8px;
    transition: background .12s ease, box-shadow .12s ease;
}

/* Floating snapped-time pill that follows the cursor in bucket mode */
html[data-theme] .pl-bucket-time,
.pl-bucket-time {
    display: none;
    font-size: .72rem;
    font-weight: 800;
    letter-spacing: .01em;
    color: #fff;
    background: var(--primary, #2563EB);
    padding: .12rem .46rem;
    border-radius: 999px;
    white-space: nowrap;
    box-shadow: 0 6px 14px rgba(2,6,23,.3);
}

/* ===== §32 Side-gadget calendar cards — labeled, spaced, modern (icons + color + shadow) ===== */
html[data-theme] .wg-event.wg-event-abs{padding:8px 10px !important;border-radius:11px !important;border:1px solid color-mix(in srgb,var(--primary) 28%,var(--border)) !important;border-left:4px solid var(--primary) !important;background:color-mix(in srgb,var(--primary) 7%,var(--surface)) !important;box-shadow:0 2px 10px rgba(15,23,42,.10) !important;display:flex !important;flex-direction:column !important;gap:3px !important;overflow:hidden !important;transition:box-shadow .15s ease,transform .05s ease,border-color .15s ease !important}
html[data-theme] .wg-event.wg-event-abs:hover{box-shadow:0 6px 18px rgba(37,99,235,.24) !important;border-left-color:var(--primaryHover) !important;transform:translateY(-1px) !important}
html[data-theme] .wg-ev-time{font-weight:800 !important;font-size:10px !important;color:var(--primary) !important;letter-spacing:0 !important;margin-bottom:1px !important;white-space:nowrap !important;overflow:hidden !important;text-overflow:ellipsis !important;flex:0 0 auto !important}
html[data-theme] .wg-ev-field{display:flex !important;gap:5px !important;align-items:baseline !important;font-size:11.5px !important;line-height:1.35 !important;min-width:0 !important}
html[data-theme] .wg-ev-lbl{color:var(--muted) !important;font-weight:700 !important;font-size:10px !important;letter-spacing:.02em !important;flex:0 0 auto !important;white-space:nowrap !important}
/* Calendar cards show the icon only (no "Client"/"Tehnician" wording), so the
   trailing colon that paired with the removed label is gone too. */
html[data-theme] .wg-ev-lbl::after{content:"" !important}
html[data-theme] .wg-ev-val{color:var(--text) !important;font-weight:650 !important;white-space:nowrap !important;overflow:hidden !important;text-overflow:ellipsis !important;min-width:0 !important;flex:1 1 auto !important}
html[data-theme] .wg-ev-subject{margin-top:1px !important;font-size:11px !important;font-style:italic !important;color:var(--muted) !important;white-space:nowrap !important;overflow:hidden !important;text-overflow:ellipsis !important}

/* ===== §33c Address → Google Maps directions link on calendar cards ===== */
html[data-theme] a.wg-ev-map-link{text-decoration:none !important;cursor:pointer !important;border-bottom:1px dashed color-mix(in srgb, var(--primary) 55%, transparent) !important}
html[data-theme] a.wg-ev-map-link:hover{color:var(--primary) !important;border-bottom-color:var(--primary) !important}
html[data-theme] a.calendar-chip.wg-ev-map-link{text-decoration:none !important;cursor:pointer !important}
html[data-theme] a.calendar-chip.wg-ev-map-link:hover{background:color-mix(in srgb, var(--primary) 16%, var(--surface)) !important;border-color:var(--primary) !important}

/* ===== §33 Planificari + dashboard calendar cards: labeled/modern look matching the side gadget ===== */
html[data-theme] .wg-ev-card{
  padding:6px 9px !important;
  border-radius:11px !important;
  border:1px solid color-mix(in srgb, var(--primary) 24%, var(--border)) !important;
  border-left:4px solid var(--primary) !important;
  background:color-mix(in srgb, var(--primary) 7%, var(--surface)) !important;
  box-shadow:0 2px 9px rgba(15,23,42,.10) !important;
  display:flex !important;
  flex-direction:column !important;
  gap:2px !important;
  overflow:hidden !important;
  color:var(--text) !important;
  transition:box-shadow .15s ease, border-color .15s ease !important;
}
html[data-theme] .wg-ev-card:hover{
  box-shadow:0 6px 18px rgba(37,99,235,.24) !important;
  border-left-color:var(--primaryHover, var(--primary)) !important;
  z-index:40 !important;
}
/* neutralise legacy inner text classes if any linger inside a redesigned card */
html[data-theme] .wg-ev-card .event-title,
html[data-theme] .wg-ev-card .event-time,
html[data-theme] .wg-ev-card .event-chip{ all:unset; }

/* ===== §33a Dashboard-only: pack a card's fields onto one row, wrap only what doesn't fit.
   Planificari's own calendar keeps the column layout above (its columns are much narrower). ===== */
html[data-theme] .card-calendar .wg-ev-card{
  flex-direction: row !important;
  flex-wrap: wrap !important;
  align-items: baseline !important;
  column-gap: 10px !important;
  row-gap: 1px !important;
}
html[data-theme] .card-calendar .wg-ev-time,
html[data-theme] .card-calendar .wg-ev-field,
html[data-theme] .card-calendar .wg-ev-subject{
  flex: 0 1 auto !important;
  margin: 0 !important;
  max-width: 100% !important;
}
html[data-theme] .card-calendar .wg-ev-field{ gap: 4px !important; }

/* ===== §33b Unify the hour gutter across Planificari day + week views (match the blue week gutter) ===== */
html[data-theme] .planificari-page .timecol{
  background:color-mix(in srgb, var(--primary) 7%, var(--surface)) !important;
  border-radius:10px !important;
}
html[data-theme] .planificari-page .dayview-multi .timecol .hour,
html[data-theme] .planificari-page .week-multi-layout .shared-timecol .hour{
  color:color-mix(in srgb, var(--primary) 62%, var(--muted)) !important;
  font-weight:600 !important;
}

/* =========================================================================
   26b) DAY (Zi) VIEW — mirror §25+§26 so daily matches weekly exactly:
        rounded outer card, gradient time rail with 🕐, hairline user
        columns, transparent event surface, smooth event cards.
   ========================================================================= */
html[data-theme] .planificari-page .dayview-multi {
    gap: 0 !important;
    background: transparent !important;
    border: 1px solid color-mix(in srgb, var(--primary) 18%, var(--border)) !important;
    border-radius: 16px !important;
    box-shadow: 0 12px 34px rgba(2,6,23,.07) !important;
    min-height: 360px;
    overflow: auto !important;
    align-items: stretch !important;
}
/* Time gutter = left rail with a centred 🕐 */
html[data-theme] .planificari-page .dayview-multi .timecol {
    position: sticky !important;
    left: 0 !important;
    z-index: 3;
    background: linear-gradient(180deg, color-mix(in srgb, var(--primary) 9%, var(--surface)), var(--surface)) !important;
    border: none !important;
    border-right: 1px solid color-mix(in srgb, var(--primary) 16%, var(--border)) !important;
    border-radius: 16px 0 0 16px !important;
    box-shadow: none !important;
}
html[data-theme] .planificari-page .dayview-multi .timecol .dayhdr.blank {
    visibility: visible !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    color: var(--primary) !important;
    font-size: 1.05rem !important;
    background: transparent !important;
    border: none !important;
}
html[data-theme] .planificari-page .dayview-multi .timecol .dayhdr.blank::after { content: "🕐"; }
html[data-theme] .planificari-page .dayview-multi .timecol .hour {
    color: color-mix(in srgb, var(--primary) 62%, var(--muted)) !important;
    font-weight: 600 !important;
}
/* User columns: continuous grid, thin azure dividers, no boxy card */
html[data-theme] .planificari-page .dayview-multi .daycol {
    background: transparent !important;
    border: none !important;
    border-left: 1px solid color-mix(in srgb, var(--primary) 9%, var(--border)) !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    padding: 0 !important;
    transition: background-color .15s ease;
}
html[data-theme] .planificari-page .dayview-multi .daycol:nth-child(odd) {
    background: var(--surface) !important;
}
html[data-theme] .planificari-page .dayview-multi .daycol:nth-child(even) {
    background: color-mix(in srgb, var(--primary) 6%, var(--surface)) !important;
}
html[data-theme] .planificari-page .dayview-multi .daycol:hover {
    background: color-mix(in srgb, var(--primary) 10%, var(--surface)) !important;
}
/* Continuous header band on each user column */
html[data-theme] .planificari-page .dayview-multi .daycol .dayhdr {
    color: var(--primary) !important;
    font-weight: 700 !important;
    border-radius: 0 !important;
    margin: 0 !important;
    padding: .4rem .55rem !important;
    background: color-mix(in srgb, var(--primary) 8%, var(--surface)) !important;
    border-bottom: 1px solid color-mix(in srgb, var(--primary) 14%, var(--border)) !important;
}
/* Events surface blends in; the outer card owns the scroll */
html[data-theme] .planificari-page .dayview-multi .eventscol {
    overflow: visible !important;
    background: transparent !important;
    border: none !important;
    border-radius: 0 !important;
}
/* Smooth event cards, identical to weekly */
html[data-theme] .planificari-page .dayview-multi .event {
    border-radius: 12px !important;
    box-shadow: 0 6px 16px rgba(2,6,23,.13) !important;
    border: 1px solid rgba(255,255,255,.55);
}
/* first user column sits right against the gutter — no double divider */
html[data-theme] .planificari-page .dayview-multi .timecol + .daycol { border-left: none !important; }

/* =========================================================================
   26c) Remove the outer "card" frame from BOTH calendar views so the daily
        view stops reading as a white panel behind the events. Keeps the
        gutter rail, columns, grid and event cards; only drops the framing
        border/shadow/rounded-corners of the whole calendar container.
   ========================================================================= */
html[data-theme] .planificari-page .dayview.dayview-multi,
html[data-theme] .planificari-page .week-multi-layout {
    border: none !important;
    box-shadow: none !important;
    border-radius: 0 !important;
}
html[data-theme] .planificari-page .dayview.dayview-multi .timecol,
html[data-theme] .planificari-page .week-multi-layout .shared-timecol {
    border-radius: 0 !important;
}

/* =========================================================================
   32) GENERIC FORM RESTYLE — "record editor" register (DynamicForm)
   Applies to every Adaugă/Editează modal across the app (Adrese, Contracte,
   Centrale, Clienti, Setup entities, …) since they all render through
   DynamicForm's shared .df-section / .form-label / .form-control markup.
   Register: attribute rows grouped by section, separated by a hairline
   (not stacked white cards), bold micro-labels, precise focus ring. Stays
   on the existing azure token family — no second accent color introduced.
   ========================================================================= */
html[data-theme] .df-section {
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    padding: 0 !important;
    margin-bottom: 1.5rem !important;
}

html[data-theme] .df-section-head {
    border: none !important;
    border-bottom: 1px solid var(--border) !important;
    padding: 0 0 .55rem !important;
    margin-bottom: .85rem !important;
    background: transparent !important;
}

html[data-theme] .df-section-title {
    font-size: .72rem !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    letter-spacing: .06em !important;
    color: var(--muted) !important;
}

html[data-theme] .df-section-head.df-muted .df-section-title {
    color: var(--muted2) !important;
}

html[data-theme] .form-label {
    font-size: .8rem !important;
    font-weight: 600 !important;
    color: var(--text) !important;
    margin-bottom: .35rem !important;
    display: inline-flex !important;
    align-items: center !important;
}

html[data-theme] .form-control,
html[data-theme] .form-select,
html[data-theme] textarea.form-control {
    border-radius: 8px !important;
    border: 1px solid var(--border2) !important;
    background: var(--surface2) !important;
    padding: .5rem .7rem !important;
    font-size: .875rem !important;
    transition: border-color .12s ease, box-shadow .12s ease, background-color .12s ease !important;
}

html[data-theme] .form-control:hover,
html[data-theme] .form-select:hover {
    border-color: var(--muted2) !important;
}

html[data-theme] .form-control:focus,
html[data-theme] .form-select:focus,
html[data-theme] textarea.form-control:focus {
    outline: none !important;
    border-color: var(--primary) !important;
    box-shadow: 0 0 0 3px var(--primarySoft2) !important;
    background: var(--surface) !important;
}

/* Section rows breathe like attribute groups, not a dense grid wall */
html[data-theme] .df-section .row.g-2 {
    row-gap: .9rem !important;
}

/* Modal action buttons: consistent height with the inputs above them */
html[data-theme] .rl-modal-body .modal-actions-bar .btn,
html[data-theme] .modal-body .modal-actions-bar .btn {
    border-radius: 8px !important;
    padding: .5rem 1.1rem !important;
    font-size: .84rem !important;
    font-weight: 650 !important;
}