/* ═══════════════════════════════════════════
   Environment Selector
   ═══════════════════════════════════════════ */
#env-screen {
    display: flex; align-items: center; justify-content: center;
    height: 100vh; width: 100%;
}
#env-screen.hidden { display: none; }

.card {
    background: var(--bg-secondary); border-radius: 8px; padding: 32px;
    width: 400px; max-width: 90vw;
    box-shadow: 0 4px 24px rgba(0,0,0,0.4);
}
.brand { text-align: center; margin-bottom: 24px; }
.brand h1 { font-size: 22px; font-weight: 700; color: var(--brand); }
.brand p { font-size: 13px; color: var(--text-muted); margin-top: 4px; }

.env-label { display: block; font-size: 13px; font-weight: 600; margin-bottom: 6px; color: var(--text-primary); }
.env-select {
    width: 100%; padding: 10px 12px; background: var(--bg-tertiary); color: var(--text-primary);
    border: 1px solid var(--border-color); border-radius: 4px; font-size: 14px;
}
.env-open-btn {
    width: 100%; padding: 12px; margin-top: 20px;
    background: var(--brand); color: #fff; border: none; border-radius: 4px;
    font-size: 14px; font-weight: 600; cursor: pointer;
}
.env-open-btn:hover { background: var(--brand-hover); }
.env-open-btn:disabled { opacity: 0.5; cursor: not-allowed; }

/* ═══════════════════════════════════════════
   Auth Bar (bottom of shell)
   ═══════════════════════════════════════════ */
#auth-bar {
    display: none; height: 40px; min-height: 40px;
    background: var(--bg-secondary);
    border-top: 1px solid var(--border-color);
    align-items: center; justify-content: center;
    gap: 10px; font-size: 13px; color: var(--text-muted);
}
#auth-bar.visible { display: flex; }
#auth-btn {
    padding: 5px 14px; background: var(--brand); color: #fff; border: none;
    border-radius: 4px; cursor: pointer; font-size: 12px; font-weight: 600;
}
#auth-btn:hover { background: var(--brand-hover); }

/* ═══════════════════════════════════════════
   Auth Section (env selector fallback)
   ═══════════════════════════════════════════ */
.auth-section {
    display: none; margin-top: 20px; text-align: center;
    padding-top: 16px; border-top: 1px solid var(--border-color);
}
.auth-section.visible { display: block; }
.auth-section p { font-size: 12px; color: var(--text-muted); margin-bottom: 8px; }
.auth-section-btn {
    padding: 8px 20px; background: transparent; color: var(--brand);
    border: 1px solid var(--brand); border-radius: 4px; cursor: pointer;
    font-size: 12px; font-weight: 600;
}
.auth-section-btn:hover { background: var(--brand); color: #fff; }

/* ═══════════════════════════════════════════
   Syncfusion Grid — Color Overrides Only
   ═══════════════════════════════════════════ */
.e-grid caption { display: none !important; }
.e-grid {
    background: var(--bg-secondary) !important;
    color: var(--text-primary) !important;
    border-color: var(--border-color) !important;
}
.e-grid .e-gridheader {
    background: var(--bg-tertiary) !important;
}
.e-grid .e-headercell {
    background: var(--bg-tertiary) !important;
    color: var(--text-primary) !important;
    border-color: var(--border-color) !important;
}
.e-grid .e-detailheadercell,
.e-grid .e-detailrowcollapse,
.e-grid .e-detailrowexpand,
.e-grid td.e-detailindentcell,
.e-grid .e-detailindentcell,
.e-grid .e-grouptopleftcell,
.e-grid .e-lastgrouptopleftcell,
.e-grid .e-indentcell,
.e-grid .e-headercelldiv.e-emptycell {
    background: var(--bg-tertiary) !important;
    border-color: var(--border-color) !important;
}
.e-grid .e-rowcell {
    background: var(--bg-secondary) !important;
    color: var(--text-primary) !important;
    border-color: var(--border-color) !important;
}
.e-grid .e-row:hover .e-rowcell {
    background: var(--bg-hover) !important;
}
.e-grid .e-row.e-altrow .e-rowcell {
    background: var(--bg-alt-row) !important;
}
.e-grid .e-row.e-altrow:hover .e-rowcell {
    background: var(--bg-hover) !important;
}
.e-grid .e-pager {
    background: var(--bg-secondary) !important;
    color: var(--text-primary) !important;
    border-color: var(--border-color) !important;
}
.e-grid .e-sortfilter .e-icons {
    color: var(--text-muted) !important;
}
/* Grid selection — brand tint globally */
.e-grid .e-row.e-altrow td.e-rowcell.e-selectionbackground,
.e-grid .e-row.e-altrow td.e-rowcell.e-active,
.e-grid .e-row td.e-rowcell.e-selectionbackground,
.e-grid .e-row td.e-rowcell.e-active {
    background: rgba(100, 109, 244, 0.15) !important;
    color: var(--text-primary) !important;
}
.e-grid td.e-dragborder {
    border: none !important;
    box-shadow: inset 0 2px 0 0 var(--brand) !important;
}
.e-cloneproperties.e-dragclone,
.e-cloneproperties.e-dragclone .e-rowcell,
.e-cloneproperties.e-dragclone td {
    border: none !important;
    box-shadow: none !important;
    background: var(--bg-secondary) !important;
}
.e-cloneproperties.e-dragclone td.e-dragborder,
.e-cloneproperties.e-dragclone .e-dragborder {
    border: none !important;
    box-shadow: none !important;
}
/* general: top edge of the marked cell */
.e-grid td.e-dragborder {
    border: none !important;
    box-shadow: inset 0 -2px 0 0 var(--brand) !important;
}
.e-grid .e-lastrow-dragborder,
.e-grid .e-lastrow-dragborder td {
    background: var(--brand) !important;
    border-color: var(--brand) !important;
}
.e-grid .e-firstrow-dragborder,
.e-grid .e-firstrow-dragborder td {
    background: var(--brand) !important;
    border-color: var(--brand) !important;
}
/* Focused/active cell outline → brand instead of Material purple */
.e-grid .e-rowcell.e-focus,
.e-grid .e-rowcell.e-focused,
.e-grid td.e-focused {
    box-shadow: inset 0 0 0 1px var(--brand) !important;
}
/* Don't let the row-action button react during drag/selection */
.e-cloneproperties.e-dragclone .t4pm-row-actions-btn,
.e-grid tr.e-grabbed .t4pm-row-actions-btn {
    color: var(--text-muted) !important;
    background: transparent !important;
}
.e-grid .e-gridcontent,
.e-grid .e-gridcontent .e-content,
.e-grid .e-table {
    background: var(--bg-secondary) !important;
}
/* ═══════════════════════════════════════════
   Syncfusion Toolbar — Colors Only
   ═══════════════════════════════════════════ */
.e-grid .e-toolbar {
    background: var(--bg-tertiary) !important;
    border-color: var(--border-color) !important;
}
.e-grid .e-toolbar .e-toolbar-items {
    background: var(--bg-tertiary) !important;
}
.e-grid .e-toolbar .e-tbar-btn {
    background: var(--bg-secondary) !important;
    color: var(--text-primary) !important;
    border-color: var(--border-color) !important;
}
.e-grid .e-toolbar .e-tbar-btn:hover {
    background: var(--bg-hover) !important;
}
.e-grid .e-toolbar .e-tbar-btn .e-icons {
    color: var(--text-primary) !important;
}
.e-grid .e-toolbar .e-input-group {
    background: var(--bg-secondary) !important;
    border-color: var(--border-color) !important;
}
.e-grid .e-toolbar .e-input-group input {
    color: var(--text-primary) !important;
}
.e-grid .e-toolbar .e-input-group input::placeholder {
    color: var(--text-muted) !important;
}
/* ═══════════════════════════════════════════
   Syncfusion Grid Row Drag/Drop Cell
   Color overrides only
   ═══════════════════════════════════════════ */
.e-grid .e-rowdragheader {
    background-color: var(--bg-tertiary) !important;
    border-color: var(--border-color) !important;
}
.e-grid .e-rowdragdropcell {
    background: var(--bg-secondary) !Important;
    color: var(--text-muted) !important;
    border-color: var(--border-color) !important;
}

.e-grid .e-row:hover .e-rowdragdropcell {
    background: var(--bg-hover) !important;
    color: var(--text-primary) !important;
}

.e-grid .e-row.e-altrow .e-rowdragdropcell {
    background: var(--bg-alt-row) !important;
    color: var(--text-muted) !important;
}

.e-grid .e-row.e-altrow:hover .e-rowdragdropcell {
    background: var(--bg-hover) !important;
    color: var(--text-primary) !important;
}

/* Selected/active row drag cell should follow the same row styling,
   not Syncfusion's default drag-cell surface color. */
.e-grid .e-row .e-rowdragdropcell.e-selectionbackground,
.e-grid .e-row .e-rowdragdropcell.e-active {
    background: var(--bg-secondary) !important;
    color: var(--text-muted) !important;
    border-color: var(--border-color) !important;
}
.e-grid .e-row.e-altrow .e-rowdragdropcell.e-selectionbackground,
.e-grid .e-row.e-altrow .e-rowdragdropcell.e-active {
    background: var(--bg-alt-row) !important;
    color: var(--text-muted) !important;
    border-color: var(--border-color) !important;
}

.e-grid .e-row:hover .e-rowdragdropcell.e-selectionbackground,
.e-grid .e-row:hover .e-rowdragdropcell.e-active,
.e-grid .e-row.e-altrow:hover .e-rowdragdropcell.e-selectionbackground,
.e-grid .e-row.e-altrow:hover .e-rowdragdropcell.e-active {
    background: var(--bg-hover) !important;
    color: var(--text-primary) !important;
}

/* Drag glyph */
.e-grid .e-rowdragdropcell .e-rowcelldrag,
.e-grid .e-rowdragdropcell .e-icon-rowdragicon,
.e-grid .e-rowdragdropcell .e-rowcelldrag::before,
.e-grid .e-rowdragdropcell .e-icon-rowdragicon::before {
    color: var(--text-muted) !important;
}
.e-grid .e-row:hover .e-rowdragdropcell .e-rowcelldrag,
.e-grid .e-row:hover .e-rowdragdropcell .e-icon-rowdragicon,
.e-grid .e-row:hover .e-rowdragdropcell .e-rowcelldrag::before,
.e-grid .e-row:hover .e-rowdragdropcell .e-icon-rowdragicon::before {
    color: var(--text-primary) !important;
}
/* ═══════════════════════════════════════════
   Syncfusion Group Bar — Colors Only
   ═══════════════════════════════════════════ */
.e-grid .e-groupdroparea {
    background: var(--bg-tertiary) !important;
    color: var(--text-muted) !important;
    border-color: var(--border-color) !important;
}
.e-grid .e-groupheadercell {
    background: var(--bg-secondary) !important;
    color: var(--text-primary) !important;
}

/* ═══════════════════════════════════════════
   Syncfusion Dialogs (Column Chooser, Filter)
   Colors only — NO position overrides
   ═══════════════════════════════════════════ */
.e-ccdlg,
.e-ccdlg .e-dlg-content,
.e-ccdlg .e-dlg-header-content {
    background: var(--bg-secondary) !important;
    color: var(--text-primary) !important;
    border-color: var(--border-color) !important;
}
.e-ccdlg .e-dlg-header {
    color: var(--text-primary) !important;
}
.e-ccdlg ul {
    list-style: none !important;
    padding-left: 0 !important;
}
.e-ccdlg li {
    list-style: none !important;
}
.e-ccdlg .e-cc-searchdiv .e-input-group {
    background: var(--bg-tertiary) !important;
    border-color: var(--border-color) !important;
}
.e-ccdlg .e-cc-searchdiv input {
    color: var(--text-primary) !important;
    background: transparent !important;
}
.e-ccdlg .e-footer-content {
    background: var(--bg-secondary) !important;
    border-color: var(--border-color) !important;
}
.e-ccdlg .e-footer-content .e-btn {
    background: var(--brand) !important;
    color: #fff !important;
}
.e-ccdlg .e-footer-content .e-btn:hover {
    background: var(--brand-hover) !important;
}
.e-ccdlg .e-footer-content .e-flat {
    background: var(--bg-tertiary) !important;
    color: var(--text-primary) !important;
}
.e-ccdlg .e-checkbox-wrapper .e-frame {
    border-color: var(--border-color) !important;
    background: var(--bg-tertiary) !important;
}
.e-ccdlg .e-checkbox-wrapper .e-check {
    background: var(--brand) !important;
    border-color: var(--brand) !important;
}

.e-filter-popup,
.e-filter-popup .e-dlg-content {
    background: var(--bg-secondary) !important;
    color: var(--text-primary) !important;
    border-color: var(--border-color) !important;
}
.e-filter-popup .e-footer-content .e-btn {
    background: var(--brand) !important;
    color: #fff !important;
}
.e-filter-popup .e-footer-content .e-flat {
    background: var(--bg-tertiary) !important;
    color: var(--text-primary) !important;
}
.e-checkboxfilter {
    background: var(--bg-secondary) !important;
    color: var(--text-primary) !important;
}
.e-checkboxfilter .e-checkbox-wrapper .e-frame {
    border-color: var(--border-color) !important;
    background: var(--bg-tertiary) !important;
}
.e-checkboxfilter .e-checkbox-wrapper .e-check {
    background: var(--brand) !important;
    border-color: var(--brand) !important;
}

/* ═══════════════════════════════════════════
   Guided Setup — recoverable states (no-access /
   inactive / consent-required messaging in #env-content)
   ═══════════════════════════════════════════ */
.recoverable {
    text-align: center;
}
.recoverable h3 {
    font-size: 16px;
    font-weight: 700;
    color: var(--text-primary);
    margin: 0 0 10px 0;
}
.recoverable p {
    font-size: 13px;
    color: var(--text-muted);
    line-height: 1.5;
    margin: 0 0 20px 0;
}
.recoverable .empty-actions {
    display: flex;
    flex-direction: column;
    gap: 10px;
}
/* Force HeatMap transparent background — target the SVG background rect */
.e-heatmap {
    background: transparent !important;
    background-color: transparent !important;
}
.e-heatmap svg {
    background: transparent !important;
}
.e-heatmap svg > rect:first-child {
    fill: transparent !important;
}

/* ═══════════════════════════════════════════
   Open Button (inside grid rows)
   ═══════════════════════════════════════════ */
.open-btn {
    padding: 4px 14px; background: var(--brand); color: #fff; border: none;
    border-radius: 3px; cursor: pointer; font-size: 12px; font-weight: 600;
}
.open-btn:hover { background: var(--brand-hover); }

/* ═══════════════════════════════════════════
   Loading spinners and busy info
   ═══════════════════════════════════════════ */

.spinner {
    width: 32px; height: 32px;
    border: 3px solid var(--bg-tertiary);
    border-top: 3px solid var(--brand);
    border-radius: 50%;
    animation: spin 0.8s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }

.spinner-small {
    display: inline-block; width: 28px; height: 28px;
    border: 3px solid var(--bg-tertiary);
    border-top: 3px solid var(--brand);
    border-radius: 50%;
    animation: spin 0.8s linear infinite;
}
.t4pm-busy-msg{
    display:inline-flex;
    align-items:center;
    gap:8px;
    font-size:12px;
    font-weight:600;
    color:var(--brand-dark,#4a52d6);
}
.t4pm-busy-msg.hidden{
    display:none;
}
.t4pm-busy-msg.t4pm-busy-done{
    color:var(--accent-green-dark,#2f8f5b);
}
.t4pm-spinner {
    display: inline-block;
    width: 13px; height: 13px;
    border: 2px solid var(--bg-tertiary);
    border-top: 2px solid var(--brand);
    border-radius: 50%;
    animation: t4pm-spin 0.8s linear infinite;
    vertical-align: middle;
}
.t4pm-busy-msg.t4pm-busy-done .t4pm-spinner{
    border-color:var(--accent-green-soft,#e6f7ee);
    border-top-color:var(--accent-green-dark,#2f8f5b);
}
@keyframes t4pm-spin { to { transform: rotate(360deg); } }
/* ═══════════════════════════════════════════
   Generic layout utilities
   ═══════════════════════════════════════════ */
.spacer{
    flex:1;
}
.hint{
    margin-top:4px;
    font-size:11.5px;
    color:var(--text-muted);
    line-height:1.45;
}

/* text selection */
::selection {
    background: var(--brand) !important;
    color: #fff !important;
}

/* ── Bot FAB ── */
.bot-fab {
    position: fixed;
    bottom: 24px; right: 24px;
    width: 72px; height: 72px;
    background: transparent;
    border: none;
    padding: 0;
    cursor: pointer;
    z-index: 900;
    display: none;
    transition: transform 0.2s;
    /* Uncomment below for a circular background behind the icon:
    border-radius: 50%;
    overflow: hidden;
    background: #646DF4;
    box-shadow: 0 4px 12px rgba(0,0,0,0.3);
    */
}
.bot-fab img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    filter: drop-shadow(0 4px 10px rgba(0,0,0,0.35));
}
/*.bot-fab:hover { transform: scale(1.1); box-shadow: 0 6px 16px rgba(0,0,0,0.4); }*/
.bot-fab:hover { transform: scale(1.1); }
.bot-fab.hidden { display: none !important; }
/* ── Bot Panel ── */
.bot-panel-icon {
    width: 32px;
    height: 32px;
    vertical-align: middle;
    margin-right: 4px;
}

.bot-panel {
    display: none;
    position: fixed;
    bottom: 0; right: 0;
    width: 400px; height: 100vh;
    background: var(--bg-primary);
    border-left: 1px solid var(--border);
    box-shadow: -4px 0 24px rgba(0,0,0,0.25);
    z-index: 1000;
    flex-direction: column;
}
.bot-panel.active { display: flex; }
.bot-panel-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 12px 16px;
    background: #646DF4;
    color: #fff;
    font-weight: 600;
    font-size: 14px;
    border-top-left-radius: 16px;
}
.bot-panel-header button {
    background: none; border: none;
    color: #fff; font-size: 20px; cursor: pointer;
}
#bot-webchat { flex: 1; overflow: hidden; }
/* ── Custom Orchera typing indicator ── */
.t4pm-typing {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 8px 16px;
    background: transparent;
}

.t4pm-typing-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    animation: t4pm-bounce 1.4s ease-in-out infinite both;
}

.t4pm-typing-dot:nth-child(1) {
    background-color: #646DF4;
    animation-delay: -0.32s;
}

.t4pm-typing-dot:nth-child(2) {
    background-color: #78D6A0;
    animation-delay: -0.16s;
}

.t4pm-typing-dot:nth-child(3) {
    background-color: #F2D265;
    animation-delay: 0s;
}

@keyframes t4pm-bounce {
    0%, 80%, 100% {
        transform: scale(0.6);
        opacity: 0.4;
    }
    40% {
        transform: scale(1);
        opacity: 1;
    }
}

/* ── Tab Strip ── */
.t4pm-tabstrip {
    display: flex;
    gap: 0;
    padding: 0 20px;
    background: var(--bg-secondary);
    border-bottom: 1px solid var(--border);
    overflow-x: auto;
    flex-shrink: 0;
}

.t4pm-tab {
    padding: 10px 20px;
    background: none;
    border: none;
    border-bottom: 3px solid transparent;
    color: var(--text-muted);
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    white-space: nowrap;
    transition: color 0.2s, border-color 0.2s;
}

.t4pm-tab:hover {
    color: var(--text-primary);
    background: var(--bg-tertiary);
}

.t4pm-tab.active {
    color: var(--text-primary);
    border-bottom-color: #646DF4;
}

/* ── Power BI Embed ── */
iframe[src*="powerbi"],
div[id^="pbi-embed-"] {
    border: none !important;
}

div[id^="pbi-embed-"] iframe {
    border: none !important;
}

/* -- shimmer fades -- */
.t4pm-fade-in {
    animation: t4pm-fadeIn 0.3s ease-in;
}

@keyframes t4pm-fadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}


/* ═══════════════════════════════════════════
   Status / Error Text
   ═══════════════════════════════════════════ */
.status-msg { text-align: center; margin-top: 16px; font-size: 13px; color: var(--text-muted); }
.error-msg { color: #ff6b6b; font-size: 13px; text-align: center; margin-top: 12px; }
/* ═══════════════════════════════════════════
   Form Engine (config-driven renderer)
   ═══════════════════════════════════════════ */

#form-host { height: 100%; padding: 12px; overflow: hidden; }

/* host-level states (loading / error) — reuse .spinner, .status-msg, .error-msg */
#form-host .t4pm-host-state {
    height: 100%; display: flex; flex-direction: column;
    align-items: center; justify-content: center; gap: 12px;
}

/* form shell */
#form-host .t4pm-form { display: flex; flex-direction: column; height: 100%; }
#form-host .t4pm-title { margin: 0 0 4px; font-size: 18px; color: var(--text-primary); }
#form-host .t4pm-banner {
    background: var(--bg-secondary); border: 1px solid var(--warning);
    color: var(--text-primary); border-radius: 4px; padding: 6px 10px;
    font-size: 13px; margin: 4px 0 8px;
}
#form-host .t4pm-body { flex: 1 1 auto; overflow-y: auto; padding: 8px 4px; }

/* responsive grid — column count driven by the renderer via --t4pm-cols */
#form-host .t4pm-grid {
    display: grid; gap: 12px 16px;
    grid-template-columns: repeat(var(--t4pm-cols, 1), minmax(0, 1fr));
}
#form-host .t4pm-cell-full { grid-column: 1 / -1; }
@media (max-width: 640px) {
    #form-host .t4pm-grid { grid-template-columns: 1fr; }
}

/* sections */
#form-host .t4pm-section {
    border: 1px solid var(--border-color); border-radius: 6px;
    margin: 0 0 12px; padding: 6px 12px 10px;
}
#form-host .t4pm-legend {
    font-weight: 600; cursor: pointer; user-select: none;
    padding: 4px 0; color: var(--text-primary);
}
#form-host .t4pm-section.t4pm-collapsed .t4pm-section-body { display: none; }

/* fields */
#form-host .t4pm-label { display: block; margin: 0 0 4px; font-size: 13px; color: var(--text-muted); }
#form-host .t4pm-req { color: var(--error); }
#form-host .t4pm-error { display: block; margin-top: 4px; min-height: 14px; font-size: 12px; color: var(--error); }
#form-host .t4pm-hidden { display: none; }
#form-host .t4pm-has-error .t4pm-control { outline: 1px solid var(--error); border-radius: 4px; }

/* async option-source loading cue */
#form-host .t4pm-field.t4pm-loading .t4pm-label::after {
    content: " · loading…"; color: var(--warning); font-size: 11px; font-style: italic;
}

/* sticky footer (Save / Cancel) */
#form-host .t4pm-footer {
    position: sticky; bottom: 0; display: flex; justify-content: flex-end; gap: 8px;
    padding: 10px 4px; background: var(--bg-primary); border-top: 1px solid var(--border-color);
}
#form-host .t4pm-form-error { color: var(--error); font-size: 13px; padding: 4px; text-align: right; }
/* Grid view container — match the spacing top-level grids get inline */
.view-content {
    padding: 20px;
    overflow: auto;
}
.view-title-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 16px;
}
.view-title-bar h2 {
    font-size: 18px;
    font-weight: 600;
    color: var(--text-primary);
    margin: 0;
}
/* ============================================================
   Timesheet toolbar (ts-edit.html)
   Layout: [buttons left] [period total center] [chip right]
   ============================================================ */

#toolbar {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 8px 16px;
    background: var(--bg-secondary, #2d2d2d);
    border-bottom: 1px solid var(--border, #444);
}

#toolbar .button-container {
    display: flex;
    gap: 8px;
    flex-shrink: 0;
}

#toolbar #totalContainer {
    flex: 1;
    display: flex;
    justify-content: center;
    font-size: 14px;
    font-weight: 600;
    color: var(--text-primary, #e0e0e0);
}

#toolbar #periodTotal {
    text-align: center;
}

#toolbar #unsaved-changes-message {
    font-size: 12px;
    padding: 4px 12px;
    border-radius: 4px;
    flex-shrink: 0;
}

#toolbar #chip-container {
    margin-left: auto;
    flex-shrink: 0;
}

#toolbar .chip-pointer-disabled {
    pointer-events: none;
}
/* toast themes */
.e-toast-container .e-toast.e-toast-success {
    background-color: #78D6A0 !important;
    color: #1a1a1a !important;
}
/* ═══════════════════════════════════════════
   Syncfusion Dialogs — base theme (global)
   Matches .e-ccdlg treatment. Colors only.
   ═══════════════════════════════════════════ */
.e-dialog,
.e-dialog .e-dlg-content,
.e-dialog .e-dlg-header-content,
.e-dialog .e-footer-content {
    background: var(--bg-secondary) !important;
    color: var(--text-primary) !important;
    border-color: var(--border-color) !important;
}

.e-dialog .e-dlg-header,
.e-dialog .e-dlg-header .e-title,
.e-dialog .e-dlg-header-content .e-dlg-header {
    color: var(--text-primary) !important;
    font-weight: 700 !important;
}

.e-dialog .e-dlg-header-content {
    border-bottom: 1px solid var(--border-color) !important;
}

.e-dialog .e-footer-content {
    border-top: 1px solid var(--border-color) !important;
}

/* Close (X) icon */
.e-dialog .e-dlg-header-content .e-dlg-closeicon-btn .e-icons {
    color: var(--text-muted) !important;
}
.e-dialog .e-dlg-header-content .e-dlg-closeicon-btn:hover .e-icons {
    color: var(--text-primary) !important;
}

/* Footer buttons: primary = brand, secondary = flat/dark */
.e-dialog .e-footer-content .e-btn.e-primary {
    background: var(--brand) !important;
    border-color: var(--brand) !important;
    color: #fff !important;
}
.e-dialog .e-footer-content .e-btn.e-primary:hover:not(.e-disabled) {
    background: var(--brand-hover) !important;
    border-color: var(--brand-hover) !important;
}
.e-dialog .e-footer-content .e-btn:not(.e-primary) {
    background: var(--bg-tertiary) !important;
    color: var(--text-primary) !important;
    border-color: var(--border-color) !important;
}
.e-dialog .e-footer-content .e-btn:not(.e-primary):hover {
    background: var(--bg-hover) !important;
}

/* Modal overlay */
.e-dlg-overlay {
    background: rgba(0, 0, 0, 0.5) !important;
}
/* ============================================================
   Timesheet toolbar buttons -- match the app brand purple
   ============================================================ */

#toolbar .e-btn.e-primary {
    background: var(--brand, #646DF4);
    border-color: var(--brand, #646DF4);
    color: #fff;
}

#toolbar .e-btn.e-primary:hover:not(.e-disabled) {
    background: #7079F5;
    border-color: #7079F5;
    color: #fff;
}

#toolbar .e-btn.e-primary:active:not(.e-disabled),
#toolbar .e-btn.e-primary:focus:not(.e-disabled) {
    background: #5058E5;
    border-color: #5058E5;
    color: #fff;
    box-shadow: 0 0 0 2px rgba(100, 109, 244, 0.3);
}

#toolbar .e-btn.e-primary.e-disabled,
#toolbar .e-btn.e-primary[disabled] {
    background: rgba(100, 109, 244, 0.35);
    border-color: rgba(100, 109, 244, 0.35);
    color: rgba(255, 255, 255, 0.6);
    cursor: not-allowed;
}

/* Icon inside the button matches text color */
#toolbar .e-btn.e-primary .e-btn-icon {
    color: #fff;
}

/* ---- Danger Action CSS ---- */
.e-btn.t4pm-confirm-danger.e-primary {
    background: #c62828 !important;
    border-color: #c62828 !important;
    color: #fff !important;
}

.e-btn.t4pm-confirm-danger.e-primary:hover:not(.e-disabled) {
    background: #b71c1c !important;
    border-color: #b71c1c !important;
    color: #fff !important;
}

/*---- Inline Validation CSS ----  */
.t4pm-inline-validation {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    margin-top: 8px;
    padding: 10px 12px;
    border-radius: 6px;
    background: rgba(220, 53, 69, .12);
    border: 1px solid rgba(220, 53, 69, .25);
    color: var(--error, #ff6b6b);
    font-size: 12px;
}
.t4pm-inline-validation .e-icons {
    margin-top: 2px;
}
/* ============================================================
   Timesheet grid pager -- match brand purple
   ============================================================ */

/* Active/current page number */
#timesheet-host .e-grid .e-pager .e-currentitem,
#timesheet-host .e-grid .e-pager .e-currentitem:hover,
#timesheet-host .e-grid .e-pager .e-numericitem.e-currentitem.e-active {
    background: var(--brand, #646DF4) !important;
    border-color: var(--brand, #646DF4) !important;
    color: #fff !important;
}

/* Other numeric page buttons on hover */
#timesheet-host .e-grid .e-pager .e-numericitem:hover:not(.e-currentitem):not(.e-disable) {
    background: rgba(100, 109, 244, 0.15) !important;
    color: var(--brand, #646DF4) !important;
}

/* Prev/Next/First/Last icon buttons on hover */
#timesheet-host .e-grid .e-pager .e-icons:hover:not(.e-disable) {
    color: var(--brand, #646DF4) !important;
}
/* ============================================================
   Status badges -- used in list grids (timesheets, etc.)
   ============================================================ */

.t4pm-status-badge {
    display: inline-block;
    padding: 3px 12px;
    border-radius: 12px;
    font-size: 12px;
    font-weight: 600;
    text-transform: capitalize;
    letter-spacing: 0.3px;
    line-height: 1.4;
    white-space: nowrap;
}

/* Open -- blue */
.t4pm-status-open {
    background: rgba(58, 130, 246, 0.18);
    color: #6BA4FF;
    border: 1px solid rgba(58, 130, 246, 0.35);
}

/* Submitted -- yellow */
.t4pm-status-submitted {
    background: rgba(242, 210, 101, 0.18);
    color: #F2D265;
    border: 1px solid rgba(242, 210, 101, 0.4);
}

/* Approved -- green */
.t4pm-status-approved {
    background: rgba(76, 175, 80, 0.18);
    color: #78D6A0;
    border: 1px solid rgba(76, 175, 80, 0.4);
}

/* Closed -- gray */
.t4pm-status-closed {
    background: rgba(160, 160, 170, 0.18);
    color: #B0B0BA;
    border: 1px solid rgba(160, 160, 170, 0.35);
}

/* Fallback for any unknown status value */
.t4pm-status-default {
    background: rgba(160, 160, 170, 0.12);
    color: #A0A0AA;
    border: 1px solid rgba(160, 160, 170, 0.25);
}

/* Override Syncfusion's Material 3 primary-container so pager matches brand */
.e-pager,
.e-grid .e-pager {
    --color-sf-primary-container: 100, 109, 244;
}
/* ── Row action kebab ───────────────────────────────────────────────────────
   Matches the app row-action look (js-app/row-actions.js):
   transparent, no border, hover → brand. Admin pages use a plain <button>
   + ContextMenu but must LOOK identical to the app kebab.
   Glyph: put "⋯" (U+22EF) directly inside the button. No inner span.
   ---------------------------------------------------------------------------- */
.t4pm-kebab,
.t4pm-kebab.e-dropdown-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 4px 8px;
    border: none;
    background: transparent;
    box-shadow: none;
    color: var(--text-primary);
    cursor: pointer;
    font-size: 16px;
    line-height: 1;
}
.t4pm-kebab:hover,
.t4pm-kebab.e-dropdown-btn:hover {
    color: var(--brand);
    background: transparent;
    border: none;
    box-shadow: none;
}
/* Row-action / DropDownButton popup menu — themed surface */
.e-dropdown-popup {
    background: var(--bg-secondary) !important;
    border: 1px solid var(--border-color) !important;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.4) !important;
}
.e-dropdown-popup ul .e-item {
    background: transparent !important;
    color: var(--text-primary) !important;
}
.e-dropdown-popup ul .e-item:hover,
.e-dropdown-popup ul .e-item.e-focused,
.e-dropdown-popup ul .e-item.e-selected {
    background: var(--bg-hover) !important;
    color: var(--brand-hover) !important;
}
.e-dropdown-popup ul .e-item .e-menu-icon {
    color: var(--text-muted) !important;
}

.t4pm-mini-danger {
    border: none;
    background: transparent;
    color: var(--error, #ff6b6b);
    cursor: pointer;
    border-radius: 4px;
    padding: 3px 8px;
}


/* ── Type / status badge (pill) ─────────────────────────────────────────────
   Variants: brand, success, warning, default.
   ---------------------------------------------------------------------------- */
.t4pm-admin-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 20px;
    padding: 2px 8px;
    border-radius: 999px;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: .3px;
    line-height: 1;
    white-space: nowrap;
    vertical-align: middle;
}
.t4pm-admin-badge.info {
    background: rgba(100, 109, 244, .18);
    color: var(--brand);
    border: 1px solid rgba(100, 109, 244, .35);
}
.t4pm-admin-badge.success {
    background: rgba(120, 214, 160, .16);
    color: #78D6A0;
    border: 1px solid rgba(120, 214, 160, .35);
}
.t4pm-admin-badge.warning {
    background: rgba(242, 210, 101, .16);
    color: #F2D265;
    border: 1px solid rgba(242, 210, 101, .35);
}
.t4pm-admin-badge.default {
    background: rgba(160, 160, 170, .16);
    color: #A0A0AA;
    border: 1px solid rgba(160, 160, 170, .28);
}
.t4pm-admin-badge.danger { 
  background: rgba(220, 53, 69, 0.12); 
  color: #DC3545; 
  border: 1px solid rgba(220, 53, 69, 0.25); 
}

/* ── Required / boolean cell marks ──────────────────────────────────────────*/
.t4pm-check {
    color: #78D6A0;
    font-weight: 700;
}
.t4pm-dash {
    color: var(--text-muted);
}
.e-grid td.e-rowcell .t4pm-admin-badge {
    padding-top: 1px;
    padding-bottom: 1px;
    line-height: 14px;
    vertical-align: middle;
}

/* ── Note banner (warn / info) ──────────────────────────────────────────────
   Visual style only. Pages own their own margins/placement.
   ---------------------------------------------------------------------------- */
.t4pm-note {
    display: flex;
    gap: 8px;
    align-items: flex-start;
    padding: 10px 13px;
    border-radius: 8px;
    font-size: 12px;
    line-height: 1.45;
}
.t4pm-note.warn {
    background: rgba(242, 210, 101, .12);
    border: 1px solid rgba(242, 210, 101, .25);
    color: var(--text-primary);
}
.t4pm-note.info {
    background: rgba(100, 109, 244, .12);
    border: 1px solid rgba(100, 109, 244, .25);
    color: var(--text-primary);
}


/* ── Form field label ───────────────────────────────────────────────────────*/
.t4pm-field-label {
    display: block;
    margin-bottom: 6px;
    font-size: 12px;
    font-weight: 700;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: .4px;
}


/* ── Empty state ────────────────────────────────────────────────────────────*/
.t4pm-empty {
    padding: 12px 16px;
    font-size: 12.5px;
    color: var(--text-muted);
}

/* ═══════════════════════════════════════════
   Syncfusion Switch — brand purple
   ═══════════════════════════════════════════ */
.e-switch-wrapper,
.e-switch-wrapper.e-wrapper {
    --color-sf-primary: 100, 109, 244;
    --color-sf-primary-container: 100, 109, 244;
    --color-sf-on-primary: 255, 255, 255;
    --color-sf-on-primary-container: 255, 255, 255;
}

/* belt-and-braces for the track + thumb when on */
.e-switch-wrapper .e-switch-inner.e-switch-active {
    background-color: var(--brand) !important;
    border-color: var(--brand) !important;
}
.e-switch-wrapper .e-switch-handle.e-switch-active {
    background-color: #fff !important;
}
.e-switch-wrapper:hover .e-switch-inner.e-switch-active {
    background-color: var(--brand-hover) !important;
}

/* ═══════════════════════════════════════════
   Syncfusion CheckBox — brand purple, globally
   ═══════════════════════════════════════════ */
.e-checkbox-wrapper .e-frame {
    border-color: var(--border-color) !important;
    background: var(--bg-tertiary) !important;
}
.e-checkbox-wrapper .e-frame.e-check {
    background: var(--brand) !important;
    border-color: var(--brand) !important;
    color: #fff !important;
}
.e-checkbox-wrapper:hover .e-frame.e-check {
    background: var(--brand-hover) !important;
    border-color: var(--brand-hover) !important;
}
.e-checkbox-wrapper .e-ripple-container .e-ripple-element {
    background-color: rgba(100, 109, 244, 0.25) !important;
}
.toggle-wrap { gap: 10px; }
/* ═══════════════════════════════════════════
   Syncfusion Tab — brand purple
   ═══════════════════════════════════════════ */
.e-tab .e-tab-header {
    background: var(--bg-tertiary) !important;
    border-bottom: 1px solid var(--border-color) !important;
}
.e-tab .e-tab-header .e-toolbar-item .e-tab-wrap {
    color: var(--text-muted) !important;
}
.e-tab .e-tab-header .e-toolbar-item.e-active .e-tab-wrap,
.e-tab .e-tab-header .e-toolbar-item.e-active .e-tab-text {
    color: var(--brand) !important;
}
.e-tab .e-tab-header .e-toolbar-item:hover .e-tab-wrap {
    color: var(--text-primary) !important;
}
.e-tab .e-tab-header .e-indicator {
    background: var(--brand) !important;
}
.e-tab .e-content {
    background: var(--bg-secondary) !important;
    color: var(--text-primary) !important;
}
.e-tab .e-tab-header .e-toolbar-items .e-indicator,
.e-tab .e-tab-header .e-indicator {
    background: var(--brand) !important;
}
.e-tab .e-tab-header .e-toolbar-item.e-active .e-text-wrap::before {
    border-bottom-color: var(--brand) !important;
    border-left-color: var(--brand) !important;
    border-right-color: var(--brand) !important;
    border-top-color: var(--brand) !important;
}
/* ═══════════════════════════════════════════
   Admin page layout skeleton — shared across
   Lists, Lookups, Core Tables, Integrate.
   Promoted 2026-08-22
   ═══════════════════════════════════════════ */
.t4pm-page-intro {
    flex: 0 0 auto;
    max-width: 920px;
    font-size: 13px;
    line-height: 1.45;
    color: var(--text-muted);
}
.t4pm-lists-toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    flex: 0 0 auto;
}
.t4pm-lists-toolbar-left,
.t4pm-lists-toolbar-right {
    display: flex;
    align-items: center;
    gap: 8px;
}
.busy-msg,
.dirty-msg {
    font-size: 12px;
    font-weight: 600;
    color: var(--warning, #F2D265);
    display: none;
}
.busy-msg:not(.hidden),
.dirty-msg.show {
    display: inline;
}
.save-prog {
    display: none;
    align-items: center;
    gap: 8px;
    font-size: 12px;
    color: var(--brand);
}
.save-prog.show {
    display: flex;
}
.save-prog .spinner-small {
    width: 16px;
    height: 16px;
    border-width: 2px;
}
.t4pm-lists-toolbar-right .e-btn.e-disabled,
.t4pm-lists-toolbar-right .e-btn:disabled,
.t4pm-lists-toolbar-right .e-btn[disabled] {
    pointer-events: none !important;
    cursor: not-allowed !important;
    opacity: 0.55;
}
.t4pm-lists-toolbar-right .e-btn.e-primary.e-disabled,
.t4pm-lists-toolbar-right .e-btn.e-primary:disabled,
.t4pm-lists-toolbar-right .e-btn.e-primary[disabled] {
    background: rgba(100, 109, 244, 0.28) !important;
    border-color: rgba(100, 109, 244, 0.28) !important;
    color: rgba(255, 255, 255, 0.62) !important;
}
.t4pm-lists-toolbar-right .e-btn.e-primary.e-disabled:hover,
.t4pm-lists-toolbar-right .e-btn.e-primary:disabled:hover,
.t4pm-lists-toolbar-right .e-btn.e-primary[disabled]:hover {
    background: rgba(100, 109, 244, 0.28) !important;
    border-color: rgba(100, 109, 244, 0.28) !important;
    color: rgba(255, 255, 255, 0.62) !important;
}
.t4pm-lists-toolbar-right .e-btn.e-primary.e-disabled .e-btn-icon,
.t4pm-lists-toolbar-right .e-btn.e-primary:disabled .e-btn-icon,
.t4pm-lists-toolbar-right .e-btn.e-primary[disabled] .e-btn-icon {
    color: rgba(255, 255, 255, 0.62) !important;
}
.t4pm-lists-layout {
    flex: 1 1 auto;
    min-height: 0;
    display: grid;
    grid-template-columns: minmax(260px, 320px) minmax(0, 1fr);
    gap: 12px;
}
.t4pm-lists-panel {
    min-height: 0;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    background: var(--bg-secondary);
    color: var(--text-primary);
    border: 1px solid var(--border-color);
    border-radius: 8px;
}
.t4pm-panel-head {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 12px;
    border-bottom: 1px solid var(--border-color);
    background: var(--bg-tertiary);
}
.t4pm-panel-title {
    font-size: 14px;
    font-weight: 700;
}
.t4pm-panel-sub {
    font-size: 11px;
    color: var(--text-muted);
    margin-top: 2px;
}
.spacer {
    flex: 1;
}
.t4pm-list-scroll {
    flex: 1 1 auto;
    min-height: 0;
    overflow: auto;
    padding: 6px;
}
.t4pm-list-row {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 9px 8px;
    border-radius: 6px;
    border: 1px solid transparent;
    cursor: pointer;
}
.t4pm-list-row:hover {
    background: var(--bg-hover);
}
.t4pm-list-row.active {
    background: var(--bg-tertiary);
    border-color: var(--border-color);
}
.row-main {
    flex: 1;
    min-width: 0;
}
.row-title {
    font-size: 13px;
    font-weight: 600;
    color: var(--text-primary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.row-sub {
    font-size: 11px;
    color: var(--text-muted);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    margin-top: 2px;
}
.t4pm-detail-panel {
    display: flex;
    flex-direction: column;
    min-height: 0;
}
.t4pm-detail-head {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 12px;
    border-bottom: 1px solid var(--border-color);
    background: var(--bg-secondary);
}
.t4pm-details-text {
    display: block;
    max-width: 100%;
    white-space: normal;
    overflow-wrap: anywhere;
    word-break: normal;
    color: var(--text-muted);
    font-size: 11.5px;
    line-height: 1.35;
}
.selected-name {
    font-size: 15px;
    font-weight: 700;
}
.selected-meta {
    font-size: 11px;
    color: var(--text-muted);
    margin-top: 2px;
}
.detail-main {
    min-width: 0;
}
.detail-chips {
    display: flex;
    align-items: center;
    gap: 6px;
}
.active-label {
    font-size: 12px;
    color: var(--text-muted);
}
.summary-line {
    padding: 7px 12px;
    font-size: 12px;
    color: var(--text-muted);
    border-bottom: 1px solid var(--border-color);
    background: var(--bg-tertiary);
}
.fields-bar {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 0 12px 10px;
}
.drag-hint,
.t4pm-muted {
    font-size: 11.5px;
    color: var(--text-muted);
}
.grid-host {
    padding: 0 12px 12px;
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
}
.header-divider {
    width: 1px;
    height: 20px;
    background: var(--border-color);
    margin: 0 4px;
}
.t4pm-list-sidebar {
    display: flex;
    flex-direction: column;
    height: 100%;
    background: var(--bg-secondary);
    color: var(--text-primary);
    border-left: 1px solid var(--border-color);
}
.sp-head {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 14px 16px;
    border-bottom: 1px solid var(--border-color);
    background: var(--bg-tertiary);
}
.sp-title {
    font-size: 16px;
    font-weight: 700;
}
.sp-sub {
    font-size: 11.5px;
    color: var(--text-muted);
    margin-top: 2px;
}
.sp-close {
    border: none;
    background: transparent;
    color: var(--text-muted);
    font-size: 18px;
    cursor: pointer;
    padding: 2px 8px;
}
.sp-body {
    flex: 1 1 auto;
    min-height: 0;
    overflow: auto;
    padding: 14px 16px;
}
.sp-foot {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 16px;
    border-top: 1px solid var(--border-color);
    background: var(--bg-tertiary);
}
.field {
    margin-bottom: 14px;
}
.hint {
    margin-top: 4px;
    font-size: 11.5px;
    color: var(--text-muted);
    line-height: 1.45;
}
.hidden {
    display: none !important;
}
.mode-panel {
    display: none;
}
.mode-panel.show {
    display: block;
}
.row2 {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
}
.cp-head {
    display: flex;
    align-items: center;
    margin-bottom: 12px;
}
.cp-title {
    font-size: 13.5px;
    font-weight: 700;
    color: var(--brand);
}
.cp-head a {
    font-size: 12px;
    font-weight: 700;
    color: var(--brand);
    text-decoration: none;
    cursor: pointer;
}
.stack {
    display: flex;
    flex-direction: column;
    gap: 10px;
    font-size: 12.5px;
    color: var(--text-muted);
}
.addval-row {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-top: 10px;
}
.grow {
    flex: 1;
}
.sp-note {
    margin-bottom: 12px;
}
@media (max-width: 900px) {
    .t4pm-lists-layout {
        grid-template-columns: 1fr;
    }
    .t4pm-register-panel {
        min-height: 180px;
    }
    .t4pm-detail-panel {
        min-height: 480px;
    }
}
/* ═══════════════════════════════════════════
   Syncfusion Inputs/Dropdowns — brand purple focus line
   ═══════════════════════════════════════════ */
.e-ddl.e-popup .e-list-item.e-active,
.e-ddl.e-popup .e-list-item.e-item-focus {
    background: rgba(100, 109, 244, 0.15) !important;
    color: var(--brand) !important;
}
.e-input-group.e-control-wrapper.e-input-focus::before,
.e-input-group.e-control-wrapper.e-input-focus::after,
.e-input-group.e-input-focus::before,
.e-input-group.e-input-focus::after {
    background: var(--brand) !important;
}
/* --------------------
   character counter 
---------------------*/
.t4pm-char-counter {
            font-size: 11px;
            color: var(--text-muted);
            text-align: right;
            margin-top: 2px;
        }
.t4pm-char-counter.t4pm-counter-warn {
    color: var(--error, #ff6b6b);
    font-weight: 600;
}
/* ═══════════════════════════════════════════
   Primary buttons — brand purple app-wide
   (components.css already does this scoped to #toolbar)
   ═══════════════════════════════════════════ */
.e-btn.e-primary {
    background: var(--brand);
    border-color: var(--brand);
    color: #fff;
}
.e-btn.e-primary:hover:not(.e-disabled) {
    background: var(--brand-hover);
    border-color: var(--brand-hover);
}
.e-btn.e-primary.e-disabled,
.e-btn.e-primary[disabled] {
    background: rgba(100, 109, 244, 0.35);
    border-color: rgba(100, 109, 244, 0.35);
    color: rgba(255, 255, 255, 0.6);
}
/* Button focus state  */
.e-btn.e-primary:focus,
.e-btn.e-primary.e-focus {
    background-color: var(--brand-hover) !important;
    border-color: var(--brand-hover) !important;
    box-shadow: 0 0 0 2px rgba(100, 109, 244, 0.35) !important;
}

.e-btn:focus,
.e-btn.e-focus {
    box-shadow: 0 0 0 2px rgba(100, 109, 244, 0.35) !important;
}

/* Ripple — brand-tinted globally */
.e-ripple-element {
    background-color: rgba(100, 109, 244, 0.25) !important;
}
/* ═══════════════════════════════════════════
   Scrollbars — themed
   ═══════════════════════════════════════════ */
* {
    scrollbar-width: thin;
    scrollbar-color: var(--bg-tertiary) transparent;
}
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb {
    background: var(--bg-tertiary);
    border-radius: 5px;
    border: 2px solid transparent;
    background-clip: content-box;
}
::-webkit-scrollbar-thumb:hover { background: var(--bg-hover); background-clip: content-box; }
::-webkit-scrollbar-corner { background: transparent; }

/* ============================================================
   Grid loading shimmer — stack of Syncfusion Skeleton rows
   Reusable across admin/list grids during async fetch gaps.
   ============================================================ */
.t4pm-grid-shimmer {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 4px 0;
}

/* ============================================================
   MDA Iframe Host — shared shell for record.html / index.html
   (Promoted 2026-09-25 from duplicated inline <style> blocks that
   had drifted between the two pages — colors, hint-text, and
   error-text were inconsistent. All selectors below are ID-scoped
   (#mda-iframe, #loading-msg, #fallback-bar and its children), so
   they only apply on pages that actually contain those elements.
   ============================================================ */
#mda-iframe {
    width: 100%; height: 100%;
    border: none; display: block;
}
#loading-msg {
    position: fixed; bottom: 24px; left: 50%;
    transform: translateX(-50%);
    font-size: 13px;
    color: var(--text-muted, #888);
    z-index: 50;
}
#fallback-bar {
    display: none;
    position: fixed; bottom: 0; left: 0;
    width: 100%;
    background: var(--bg-secondary, #2d2d2d);
    border-top: 1px solid var(--border-color, #444);
    padding: 14px 24px;
    z-index: 100;
    align-items: center; justify-content: center; gap: 16px;
}
#fallback-bar.active { display: flex; }
#fallback-bar p {
    font-size: 14px; margin: 0;
    color: var(--text-secondary, #ccc);
}
#fallback-bar .hint-text {
    font-size: 12px; margin: 0;
    color: var(--text-muted, #999);
}
#fallback-bar .signin-btn {
    padding: 8px 24px;
    background: var(--brand, #646DF4); color: #fff;
    border: none; border-radius: 4px;
    font-size: 13px; font-weight: 600;
    cursor: pointer;
}
#fallback-bar .signin-btn:hover { background: var(--brand-hover, #535be0); }
#fallback-bar .dismiss-btn {
    padding: 8px 16px;
    background: transparent;
    color: var(--text-muted, #888);
    border: 1px solid var(--border-color, #555);
    border-radius: 4px;
    font-size: 13px;
    cursor: pointer;
}
#fallback-bar .error-text {
    font-size: 12px;
    color: var(--error, #ff6b6b);
    display: none;
}
#native-host {
    display: none;
    height: 100%;
    overflow: auto;
    padding: 16px 20px;
    box-sizing: border-box;
    background: var(--bg-primary);
}
/* ═══════════════════════════════════════════
   Registration wizard
   Built on the admin layout skeleton above (.t4pm-lists-layout, .t4pm-lists-panel, .t4pm-list-row,
   .sp-body, .sp-foot, .sp-title, .sp-sub, .field, .t4pm-details-text). Only what that skeleton does
   not already have is defined here. Colours come from the theme variables.
   ═══════════════════════════════════════════ */
.t4pm-wiz-page {
    display: flex;
    flex-direction: column;
    gap: 12px;
    padding: 0 128px;
}
/* Panels are sized by their content, like the mockup, instead of stretching to the window. */
.t4pm-wiz-page .t4pm-lists-layout {
    flex: 0 0 auto;
    align-items: start;
}
.t4pm-wiz-page .t4pm-wiz-panel {
    min-height: 480px;
}

/* Step rail: it shows progress, it is not a menu. */
.t4pm-wiz-rail .t4pm-list-row {
    pointer-events: none;
}
.t4pm-wiz-rail .t4pm-list-row .row-title {
    font-weight: 500;
    color: var(--text-muted);
}
.t4pm-wiz-rail .t4pm-list-row.done .row-title,
.t4pm-wiz-rail .t4pm-list-row.active .row-title {
    color: var(--text-primary);
}
.t4pm-wiz-rail .t4pm-list-row.active .row-title {
    font-weight: 700;
}

/* Round, solid step marker. Extends the existing .t4pm-admin-badge. */
.t4pm-admin-badge.round {
    box-sizing: border-box;
    width: 22px;
    min-width: 22px;
    height: 22px;
    min-height: 22px;
    padding: 0;
    font-size: 11px;
}
.t4pm-admin-badge.solid.info {
    background: var(--brand);
    border-color: var(--brand);
    color: #fff;
}
:root.contrast .t4pm-admin-badge.solid.info {
    color: #000;
}
.t4pm-admin-badge.solid.success {
    background: #78D6A0;
    border-color: #78D6A0;
    color: #0f2a1a;
}

/* Checklist: a name and its detail, rows separated by a thin line. */
.t4pm-wiz-list .field {
    margin-bottom: 0;
    padding: 10px 0;
    border-bottom: 1px solid var(--border-color);
}
.t4pm-wiz-list .field:last-child {
    border-bottom: none;
}/* ═══════════════════════════════════════════
   Registration wizard: Entra Admin Consent step
   Append below the "Registration wizard" block. Same rules as before: theme variables only,
   and only what the existing classes do not already cover.
   ═══════════════════════════════════════════ */
/* A larger status badge. Extends the existing .t4pm-admin-badge (info / success / warning / danger). */
.t4pm-admin-badge.lg {
    min-height: 28px;
    padding: 5px 12px;
    font-size: 12px;
}

/* Small gap between a control and the note under it. */
.t4pm-wiz-hint {
    margin-top: 6px;
}

.t4pm-wiz-divider {
    border-top: 1px solid var(--border-color);
    margin: 18px 0;
}

/* Choose-one cards. */
.t4pm-wiz-choices {
    display: flex;
    gap: 14px;
    margin: 14px 0 18px 0;
}
.t4pm-wiz-choice {
    flex: 1;
    padding: 14px 16px;
    border: 1px solid var(--border-color);
    border-radius: 10px;
    cursor: pointer;
}
.t4pm-wiz-choice:hover {
    border-color: var(--brand);
}
.t4pm-wiz-choice.selected {
    border-color: var(--brand);
    background: rgba(100, 109, 244, .12);
}

/* A link you can copy: the text in a box, the button beside it. */
.t4pm-wiz-linkrow {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    margin-top: 10px;
}
.t4pm-wiz-linkbox {
    flex: 1;
    min-width: 0;
    padding: 8px 10px;
    border: 1px solid var(--border-color);
    border-radius: 6px;
    background: var(--bg-tertiary);
    color: var(--text-muted);
    font-size: 11.5px;
    line-height: 1.4;
    overflow-wrap: anywhere;
    user-select: all;
}
/*Dashbaord Specific CSS */
.t4pm-health-row-grid.e-grid {
border: none;
}
.t4pm-health-row-grid .e-gridheader {
border: none;
}
.t4pm-placeholder-card {
    border: 2px dashed var(--bg-tertiary, #444);
    background: transparent;
    box-shadow: none;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
}
.t4pm-placeholder-card .e-card-content {
    color: var(--text-muted);
    font-size: 12px;
    text-align: center;
}
/* ═══════════════════════════════════════════
   Registration wizard: Install step
   Append below the "Service Account step" block. Theme variables only.
   ═══════════════════════════════════════════ */
/* The progress bar. A native <progress> is used so the fill needs no inline style: the page sets its value. */
.t4pm-wiz-progress {
    display: block;
    width: 100%;
    height: 10px;
    margin: 10px 0 0 0;
    border: none;
    border-radius: 999px;
    overflow: hidden;
    -webkit-appearance: none;
    appearance: none;
    accent-color: var(--brand);
    background: var(--bg-tertiary);
}
.t4pm-wiz-progress::-webkit-progress-bar {
    background: var(--bg-tertiary);
}
.t4pm-wiz-progress::-webkit-progress-value {
    background: var(--brand);
    border-radius: 999px;
}
.t4pm-wiz-progress::-moz-progress-bar {
    background: var(--brand);
    border-radius: 999px;
}

/* The percentage on the left, what it is doing on the right. */
.t4pm-wiz-proglabel {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    margin: 8px 0 18px 0;
    font-size: 11.5px;
    color: var(--text-muted);
}

/* Space between the step lines and the Start Installation / Try again / Check again button (the mockup used 16px). */
.t4pm-wiz-actions {
    margin-top: 16px;
}

/* One line of the install: a round marker and what it is doing. The marker is the rail's .t4pm-admin-badge.round. */
.t4pm-wiz-substep {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 9px 0;
    font-size: 12.5px;
}
.t4pm-wiz-substep.muted {
    color: var(--text-muted);
}
/* ═══════════════════════════════════════════
   Registration wizard: Done step
   Append below the last "Registration wizard" block in components.css. Theme variables only, and only what the
   existing classes do not already cover. The green is the same one the success badge and the finished step markers use.
   ═══════════════════════════════════════════ */
/* The whole finished screen, centred in the panel (the host hides the heading and footer for this step). */
.t4pm-wiz-done {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 420px;
    padding: 20px;
    text-align: center;
}
/* The big check. */
.t4pm-wiz-done-check {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 60px;
    height: 60px;
    margin-bottom: 14px;
    border-radius: 50%;
    border: 2px solid #78D6A0;
    background: rgba(120, 214, 160, .16);
    color: #78D6A0;
    font-size: 28px;
}
.t4pm-wiz-done-title {
    margin: 0 0 6px 0;
    font-size: 18px;
    font-weight: 700;
    color: var(--text-primary);
}
.t4pm-wiz-done-text {
    max-width: 400px;
    margin: 0;
    font-size: 13px;
    line-height: 1.6;
    color: var(--text-muted);
}