/* ═══════════════════════════════════════════════════════════════════════════
   MyTSp_Blazor – Dark Mode Theme
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── Variabile globale ──────────────────────────────────────────────────── */
:root {
    --bg-body:        #16191d;
    --bg-surface:     #1e2228;
    --bg-elevated:    #262b33;
    --bg-hover:       #2e3440;
    --border-color:   rgba(255, 255, 255, 0.09);
    --text-primary:   #dde1e9;
    --text-secondary: #9aa3b0;
    --text-muted:     #626c7a;
    --accent:         #4d9fec;
    --accent-hover:   #6db5f5;
    --accent-active:  #3a88d4;
    --danger:         #e85d5d;
    --success:        #3cc47a;
    --warning:        #f0a040;
}

/* ── Base ───────────────────────────────────────────────────────────────── */
html, body {
    font-family: 'Segoe UI', 'Helvetica Neue', Helvetica, sans-serif;
    font-size: 14px;
    line-height: 1.5;
    background-color: var(--bg-body);
    color: var(--text-primary);
    height: 100%;
    -webkit-font-smoothing: antialiased;
}

/* ── Links ──────────────────────────────────────────────────────────────── */
a, .btn-link {
    color: var(--accent);
    text-decoration: none;
}

a:hover, .btn-link:hover {
    color: var(--accent-hover);
    text-decoration: underline;
}

/* ── Butoane ────────────────────────────────────────────────────────────── */
.btn-primary {
    color: #fff;
    background-color: #1a5bb5;
    border-color: #1652a3;
}

.btn-primary:hover {
    background-color: #1e69cf;
    border-color: #1a5bb5;
}

.btn:focus, .btn:active:focus, .btn-link.nav-link:focus,
.form-control:focus, .form-check-input:focus {
    box-shadow: 0 0 0 0.1rem var(--bg-body), 0 0 0 0.25rem var(--accent);
}

/* ── Content general ────────────────────────────────────────────────────── */
.content {
    padding-top: 1.1rem;
}

/* ── Formulare ──────────────────────────────────────────────────────────── */
.form-control,
.form-select,
.form-check-input {
    background-color: var(--bg-elevated);
    border-color: var(--border-color);
    color: var(--text-primary);
}

.form-control:focus,
.form-select:focus {
    background-color: var(--bg-elevated);
    border-color: var(--accent);
    color: var(--text-primary);
}

.form-control::placeholder {
    color: var(--text-muted);
}

.form-label {
    color: var(--text-secondary);
    font-size: 0.85rem;
    margin-bottom: 0.3rem;
}

/* ── Tabele ─────────────────────────────────────────────────────────────── */
.table {
    --bs-table-bg: transparent;
    --bs-table-color: var(--text-primary);
    --bs-table-border-color: var(--border-color);
    --bs-table-striped-bg: var(--bg-elevated);
    --bs-table-striped-color: var(--text-primary);
    --bs-table-hover-bg: rgba(77, 159, 236, 0.08);
    --bs-table-hover-color: var(--text-primary);
    font-size: 0.855rem;
}

.table thead th {
    background-color: var(--bg-elevated);
    color: var(--text-secondary);
    font-weight: 600;
    font-size: 0.80rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    border-bottom: 1px solid rgba(255,255,255,0.12);
    padding: 0.5rem 0.75rem;
}

.table td, .table th {
    padding: 0.4rem 0.75rem;
    vertical-align: middle;
}

/* ── Cards ──────────────────────────────────────────────────────────────── */
.card {
    background-color: var(--bg-surface);
    border: 1px solid var(--border-color);
    border-radius: 6px;
}

.card-header {
    background-color: var(--bg-elevated);
    border-bottom: 1px solid var(--border-color);
    font-weight: 600;
    font-size: 0.875rem;
    padding: 0.55rem 1rem;
}

.card-body {
    padding: 0.85rem 1rem;
}

/* ── Modals ─────────────────────────────────────────────────────────────── */
.modal-content {
    background-color: var(--bg-surface);
    border: 1px solid var(--border-color);
}

.modal-header {
    background-color: var(--bg-elevated);
    border-bottom: 1px solid var(--border-color);
    padding: 0.65rem 1rem;
}

.modal-footer {
    background-color: var(--bg-elevated);
    border-top: 1px solid var(--border-color);
    padding: 0.55rem 1rem;
}

.modal-title {
    font-size: 0.95rem;
    font-weight: 600;
}

/* ── Dropdown (Bootstrap generic) ──────────────────────────────────────── */
.dropdown-menu {
    background-color: var(--bg-surface);
    border: 1px solid var(--border-color);
}

.dropdown-item {
    color: var(--text-primary);
}

.dropdown-item:hover, .dropdown-item:focus {
    background-color: var(--bg-hover);
    color: #fff;
}

.dropdown-divider {
    border-color: var(--border-color);
}

/* ── Badges ─────────────────────────────────────────────────────────────── */
.badge {
    font-size: 0.72rem;
    font-weight: 600;
}

/* ── Alerts ─────────────────────────────────────────────────────────────── */
.alert {
    font-size: 0.875rem;
}

/* ── Input groups ───────────────────────────────────────────────────────── */
.input-group-text {
    background-color: var(--bg-elevated);
    border-color: var(--border-color);
    color: var(--text-secondary);
}

/* ── List groups ────────────────────────────────────────────────────────── */
.list-group-item {
    background-color: var(--bg-surface);
    border-color: var(--border-color);
    color: var(--text-primary);
}

.list-group-item:hover {
    background-color: var(--bg-hover);
}

.list-group-item.active {
    background-color: var(--accent-active);
    border-color: var(--accent-active);
}

/* ── Paginare ───────────────────────────────────────────────────────────── */
.page-link {
    background-color: var(--bg-surface);
    border-color: var(--border-color);
    color: var(--accent);
    font-size: 0.855rem;
}

.page-link:hover {
    background-color: var(--bg-hover);
    color: var(--accent-hover);
    border-color: var(--border-color);
}

.page-item.active .page-link {
    background-color: var(--accent-active);
    border-color: var(--accent-active);
    color: #fff;
}

.page-item.disabled .page-link {
    background-color: var(--bg-surface);
    color: var(--text-muted);
}

/* ── Validare formulare ─────────────────────────────────────────────────── */
.valid.modified:not([type=checkbox]) {
    outline: 1px solid var(--success);
}

.invalid {
    outline: 1px solid var(--danger);
}

.validation-message {
    color: var(--danger);
    font-size: 0.82rem;
}

/* ── Scrollbar (Webkit) ─────────────────────────────────────────────────── */
::-webkit-scrollbar {
    width: 7px;
    height: 7px;
}

::-webkit-scrollbar-track {
    background: var(--bg-body);
}

::-webkit-scrollbar-thumb {
    background: #3a3f4a;
    border-radius: 4px;
}

::-webkit-scrollbar-thumb:hover {
    background: #4e5563;
}

/* ── Selecție text ──────────────────────────────────────────────────────── */
::selection {
    background: rgba(77, 159, 236, 0.35);
    color: #fff;
}

/* ── Blazor Error UI ────────────────────────────────────────────────────── */
#blazor-error-ui {
    background: #2b1a00;
    border-top: 1px solid #7a4500;
    bottom: 0;
    box-shadow: 0 -2px 8px rgba(0, 0, 0, 0.5);
    color: #ffb347;
    display: none;
    left: 0;
    padding: 0.6rem 1.25rem 0.7rem 1.25rem;
    position: fixed;
    width: 100%;
    z-index: 1000;
}

#blazor-error-ui .dismiss {
    cursor: pointer;
    position: absolute;
    right: 0.75rem;
    top: 0.5rem;
}

/* ── Blazor Error Boundary ──────────────────────────────────────────────── */
.blazor-error-boundary {
    background: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNTYiIGhlaWdodD0iNDkiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIG92ZXJmbG93PSJoaWRkZW4iPjxkZWZzPjxjbGlwUGF0aCBpZD0iY2xpcDAiPjxyZWN0IHg9IjIzNSIgeT0iNTEiIHdpZHRoPSI1NiIgaGVpZ2h0PSI0OSIvPjwvY2xpcFBhdGg+PC9kZWZzPjxnIGNsaXAtcGF0aD0idXJsKCNjbGlwMCkiIHRyYW5zZm9ybT0idHJhbnNsYXRlKC0yMzUgLTUxKSI+PHBhdGggZD0iTTI2My41MDYgNTFDMjY0LjcxNyA1MSAyNjUuODEzIDUxLjQ4MzcgMjY2LjYwNiA1Mi4yNjU4TDI2Ny4wNTIgNTIuNzk4NyAyNjcuNTM5IDUzLjYyMTJDMjY3LjkyNiA1NC4zOTM4IDI2OC4yNjMgNTUuMjY1IDI2OC41MTUgNTYuMTk5M0wyNjkuMTMxIDU4LjQ0OTMgMjY5Ljc3OCA1NS4xMjE4QzI2OS44OTYgNTQuNDk0OCAyNzAuMDY0IDUzLjg4MTQgMjcwLjI3OCA1My4yOTU4TDI3MC43NTMgNTIuMDAxNiAyNzEuNDU5IDUxLjYxMDlDMjcyLjA0OSA1MS4yMzEzIDI3Mi43NTQgNTEgMjczLjUwNiA1MUMyNzYuMDQgNTEgMjc4IDUyLjk1MTUgMjc4IDU1LjQ4NjNDMjc4IDU4LjAyMSAyNzYuMDQgNTkuOTcyNSAyNzMuNTA2IDU5Ljk3MjVMMjYzLjUwNiA1OS45NzI1QzI2MC45NzIgNTkuOTcyNSAyNTkgNTguMDIxIDI1OSA1NS40ODYzQzI1OSA1Mi45NTE1IDI2MC45NzIgNTEgMjYzLjUwNiA1MVoiIGZpbGw9IiNGRjU1MjMiIGZpbGwtcnVsZT0iZXZlbm9kZCIvPjwvZz48L3N2Zz4=) no-repeat 1rem/1.8rem, #5a1a1a;
    padding: 1rem 1rem 1rem 3.7rem;
    color: #ffcccc;
}

.blazor-error-boundary::after {
    content: "A apărut o eroare."
}

/* ── Loading progress ───────────────────────────────────────────────────── */
.loading-progress {
    position: relative;
    display: block;
    width: 8rem;
    height: 8rem;
    margin: 2rem auto;
}

.loading-progress circle {
    fill: none;
    stroke: #2e3440;
    stroke-width: 0.6rem;
    transform-origin: 50% 50%;
    transform: rotate(-90deg);
}

.loading-progress circle:last-child {
    stroke: var(--accent);
    stroke-dasharray: calc(3.141 * var(--blazor-load-percentage, 0%) * 0.8), 500%;
    transition: stroke-dasharray 0.05s ease-in-out;
}

.loading-progress-text {
    position: absolute;
    text-align: center;
    font-weight: 600;
    inset: calc(20vh + 1.25rem) 0 auto 0.2rem;
    color: var(--text-secondary);
}

.loading-progress-text:after {
    content: var(--blazor-load-percentage-text, "Loading");
}

/* ── Code ───────────────────────────────────────────────────────────────── */
code {
    color: #ff79c6;
    font-size: 0.875em;
}

pre {
    background-color: var(--bg-elevated);
    border: 1px solid var(--border-color);
    border-radius: 4px;
    padding: 0.75rem 1rem;
    font-size: 0.855rem;
    color: var(--text-primary);
}

/* ── Headings ───────────────────────────────────────────────────────────── */
h1, h2, h3, h4, h5, h6 {
    color: var(--text-primary);
    font-weight: 600;
}

h1 { font-size: 1.4rem; }
h2 { font-size: 1.2rem; }
h3 { font-size: 1.05rem; }

/* ── Separatoare ────────────────────────────────────────────────────────── */
hr {
    border-color: var(--border-color);
    opacity: 1;
}

/* ── Tooltips ───────────────────────────────────────────────────────────── */
.tooltip-inner {
    background-color: var(--bg-elevated);
    color: var(--text-primary);
    border: 1px solid var(--border-color);
    font-size: 0.82rem;
}

/* ── Impersonation banner ───────────────────────────────────────────────── */
.impersonation-banner {
    background-color: #b45309;          /* amber-700 */
    color: #fff;
    padding: 0.35rem 1rem;
    font-size: 0.85rem;
    display: flex;
    align-items: center;
    gap: 0.25rem;
    flex-wrap: wrap;
    position: sticky;
    top: 0;
    z-index: 1050;
    box-shadow: 0 2px 6px rgba(0,0,0,0.5);
}

.impersonation-banner strong {
    color: #fef3c7;                     /* amber-100 */
}

.impersonation-banner .text-opacity-75 {
    opacity: 0.8;
    font-size: 0.78rem;
}

/* ── Desktop – layout compact ───────────────────────────────────────────── */
@media (min-width: 992px) {
    html, body {
        font-size: 13.5px;
    }

    .container-fluid {
        padding-left: 1rem;
        padding-right: 1rem;
    }
}
/* ── Ale mele ───────────────────────────────────────────── */

.sch-grid-wrapper::-webkit-scrollbar {
    height: 10px;
}

.sch-grid-wrapper::-webkit-scrollbar-thumb {
    background: #c1c1c1;
    border-radius: 6px;
}

/* ── DevExpress Grid – focus color via CSS variables ────────────────────── */
/* DevExpress reads --dxbl-grid-focus-bg / --dxbl-grid-focus-color at       */
/* component level. Setarea la :root le propagă pe toate grid-urile.        */
:root {
    --dxbl-grid-focus-bg:    #1a5bb5;
    --dxbl-grid-focus-color: #ffffff;
}

/* ── DevExpress Grid – focused row override (fallback cu !important) ─────── */
/* dxbl-grid-focused-row este clasa confirmată pe <tr> la rândul focusat.   */
/* Specificitate ridicată + !important bate orice inline style.             */
html body .dxbl-grid .dxbl-grid-focused-row > td,
html body .dxbl-grid .dxbl-grid-focused-row > td.dxbl-grid-select-cell,
html body .dxbl-grid .dxbl-grid-focused-row td {
    background-color: #1a5bb5 !important;
    color: #ffffff !important;
}
html body .dxbl-grid .dxbl-grid-focused-row td * {
    color: #ffffff !important;
}

/* ═══════════════════════════════════════════════════════════════════════════
   Loading overlay — reutilizabil pe orice pagină. Mimics DxLoadingPanel
   (backdrop blur + cutie centrată cu spinner Bootstrap + text), dar e
   complet sub controlul nostru — putem combina activare Blazor (.is-loading)
   cu activare JS (.is-tab-switching pe DxTabs etc).

   USAGE:
     <div class="my-wrapper @(IsLoading ? "is-loading" : "")"
          style="position:relative">
         <div class="app-loading-overlay">
             <div class="app-loading-content">
                 <div class="spinner-border text-info" role="status"
                      style="width:2.5rem; height:2.5rem; border-width:.25em">
                 </div>
                 <div class="app-loading-text mt-3">Loading…</div>
             </div>
         </div>
         <!-- contenutul real -->
     </div>

   IMPORTANT: pointer-events stays none chiar şi când e vizibil — overlay-ul
   e pur vizual; cu pointer-events: auto ar intercepta mouseup-ul (la click
   pe tab, mousedown declanşează show, mouseup ar pică pe overlay → tab
   nu primeşte click).
   ═══════════════════════════════════════════════════════════════════════════ */
.app-loading-overlay {
    position: absolute;
    inset: 0;
    background: rgba(13, 17, 23, .55);
    backdrop-filter: blur(2px);
    -webkit-backdrop-filter: blur(2px);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1000;
    opacity: 0;
    pointer-events: none;
    transition: opacity .12s ease-out;
}

/* Două surse de activare — Blazor (.is-loading) sau JS (.is-tab-switching) */
.is-loading > .app-loading-overlay,
.is-tab-switching > .app-loading-overlay {
    opacity: 1;
}

.app-loading-content {
    text-align: center;
    color: #cfe1f5;
    background: rgba(20, 25, 32, .92);
    padding: 1.25rem 2rem;
    border-radius: .5rem;
    border: 1px solid rgba(77, 159, 236, .28);
    box-shadow: 0 6px 20px rgba(0, 0, 0, .35),
                0 0 24px rgba(77, 159, 236, .15);
    min-width: 200px;
}

.app-loading-text {
    font-size: .85rem;
    color: #cfe1f5;
    font-weight: 500;
}

/* ═══════════════════════════════════════════════════════════════════════════
   DxComboBox dropdown — variantă "tall" pentru filtrele Agency/Group/...
   Folosit prin DropDownBodyCssClass="sch-combo-dropdown".
   Dropdown-ul DevExpress e portalled în <body>, deci NU se atinge prin
   ::deep — regula trebuie să fie global pentru a-l afecta.

   Target: ~20 rânduri vizibile (la ~50px/row = 1000px).
   min(1000px, calc(100vh - 80px)) → nu depăşeşte niciodată viewport-ul.
   ═══════════════════════════════════════════════════════════════════════════ */
/* Target marker-ul + TOŢI descendenţii (scroll viewer, listbox etc.) +
   ancestor-ul .dxbl-dropdown care e cel ce primeşte în final dimensiunea.

   Limita de înălţime: 700px sau (viewport - 320px), oricare e mai mică.
   - 320px = aproximativ poziţia input-ului combo de sus + padding pentru margine
     (toolbar 130px + filter bar 60px + label 20px + buffer 110px).
   - 700px ≈ 24-25 rânduri la 28px/row în mod compact, sau 14 la 51px default.
   Asta ţine dropdown-ul în viewport pe orice rezoluţie. */
.sch-combo-dropdown,
.sch-combo-dropdown *,
.dxbl-dropdown:has(.sch-combo-dropdown),
/* ── Popup body padding utility ──────────────────────────────────────────
   DxPopup în 25.x nu foloseşte .modal-body Bootstrap; structura internă
   variază între versiuni. Folosirea unui wrapper div cu această clasă
   garantează padding consistent + scroll la nevoie în interiorul oricărui
   BodyTemplate. */

.mp-popup-body {
    padding: 1rem 1.25rem;
    max-height: 100%;
    overflow-y: auto;
    box-sizing: border-box;
}

.mp-popup-body-flex {
    /* variant pentru popup-urile mari (Edit / ViewGrid) — umple înălţimea */
    height: 100%;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

/* ── Edit popup — heights dinamice pentru griduri/pivot ───────────────────
   Variabile CSS care se schimbă în funcţie de starea Section Header
   (expanded / collapsed) → gridurile interne primesc înălţime mai mare
   când Header e colapsat.
   Definite global (nu razor-scoped) ca să fie disponibile pentru
   inline-style pe DxGrid (cu var()). */

.mp-edit-popup {
    --mp-list-grid-h: calc(86vh - 460px);
    --mp-pivot-h:     calc(86vh - 420px);
}

.mp-edit-popup.mp-edit-popup-collapsed {
    --mp-list-grid-h: calc(86vh - 240px);
    --mp-pivot-h:     calc(86vh - 200px);
}

/* ── DxTabs content panel — constrângere de înălţime ────────────────────
   În ScheduleStatisticsPage (clasa parent .ssp-tabs), DxTabs randerează
   un .dxbl-tabs-content-panel intern cu height:auto default → DxGrid
   intern (cu VirtualScrolling + max-height intern de 10000px) îl face să
   expandeze. Regula trebuie să fie globală (nu scoped razor.css) ca să
   prindă elementul DevExpress dincolo de scope-ul componentei. */
.ssp-tabs .dxbl-tabs-content-panel {
    height: calc(100vh - 200px) !important;
    max-height: calc(100vh - 200px) !important;
    overflow: hidden !important;
}

.dxbl-dropdown-dialog:has(.sch-combo-dropdown) {
    max-height: min(700px, calc(100vh - 320px)) !important;
}

/* Reducem padding-ul rândurilor — vedem mai multe rânduri la aceeaşi înălţime. */
.sch-combo-dropdown .dxbl-listbox-item,
.sch-combo-dropdown .dxbl-listbox > * {
    padding-top: .15rem !important;
    padding-bottom: .15rem !important;
    min-height: 0 !important;
    line-height: 1.3 !important;
}

/* ═══════════════════════════════════════════════════════════════════════════
   Navigation progress bar — bară 6px sus cu gradient cyan-blue luminos +
   glow puternic, animaţie sweep + puls. Stilul "obvious" — vizibil clar.
   Creată şi controlată prin JS (navigation-progress.js).
   Css global (nu scoped) pentru că elementul e ataşat la <body> de JS.
   ═══════════════════════════════════════════════════════════════════════════ */
.nav-progress-bar {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    height: 6px;
    z-index: 99999;
    pointer-events: none;
    /* Gradient sweep portocaliu — culori warm vibrante pe fundal întunecat */
    background: linear-gradient(
        90deg,
        rgba(255, 122, 0, 0)    0%,
        rgba(255, 140, 0, 0.9)  25%,
        #ffa726                 50%,
        rgba(255, 140, 0, 0.9)  75%,
        rgba(255, 122, 0, 0)    100%
    );
    background-size: 40% 100%;
    background-repeat: no-repeat;
    background-position: -40% 0;
    /* Glow triplu — strat interior intens galben-portocaliu, exterior larg */
    box-shadow:
        0 0  6px rgba(255, 167, 38, 0.95),
        0 0 18px rgba(255, 140, 0, 0.65),
        0 2px 24px rgba(255, 100, 0, 0.5);
    opacity: 0;
    transition: opacity .12s ease-out;
}

.nav-progress-bar.is-active {
    opacity: 1;
    animation: nav-progress 1.1s linear infinite,
               nav-progress-pulse 1.1s ease-in-out infinite;
}

/* Sweep-ul orizontal — banda luminoasă traversează ecranul */
@keyframes nav-progress {
    0%   { background-position: -40% 0; }
    100% { background-position: 140% 0; }
}

/* Puls subtil pe glow — îl face mai "viu" */
@keyframes nav-progress-pulse {
    0%, 100% {
        box-shadow:
            0 0  6px rgba(255, 167, 38, 0.95),
            0 0 18px rgba(255, 140, 0, 0.65),
            0 2px 24px rgba(255, 100, 0, 0.5);
    }
    50% {
        box-shadow:
            0 0 10px rgba(255, 200, 80, 1),
            0 0 28px rgba(255, 140, 0, 0.85),
            0 2px 36px rgba(255, 100, 0, 0.7);
    }
}