/* ===== z_color_theme.css ===== */
[data-mantine-color-scheme='dark'] {
    --mantine-body-background-color: #343943;
    --mantine-color-text: #f1f3f5;
    --mantine-color-accent: #339af0;
    --mantine-color-border: #2c2e33;
}

[data-mantine-color-scheme='light'] {
    --mantine-body-background-color: #F6F7F9;
    --mantine-color-text: black;
    --mantine-color-accent: purple;
    --mantine-color-border: white;
}
  
body {
    background-color: var(--mantine-body-background-color);
    color: var(--mantine-color-text);
}
  
a, button {
    color: var(--mantine-color-accent); 
} 

.card-hover:hover {
    box-shadow: 0 4px 20px rgba(0, 123, 255, 0.4); /* blue glow */
    transform: translateY(-2px);
}

.glow-hover {
    display: inline-block;
    border-radius: 50%;
    box-shadow: 0 0 15px 6px rgba(0, 123, 255, 0.35);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.glow-hover:hover {
    transform: scale(1.05);
    box-shadow: 0 0 20px 8px rgba(0, 123, 255, 0.5);
}

.mantine-Select-dropdown {
    z-index: 9999 !important;
}


/* ===== stylesheet.css ===== */
/* –––––––––––––––––––––––––––––––––––––––––––––––––– 
Typography
–––––––––––––––––––––––––––––––––––––––––––––––––– */

/* Override all Mantine components */
.mantine-Text-root,
.mantine-Button-root, 
.mantine-Input-input,
.mantine-InputLabel-label,
.mantine-Select-input,
.mantine-Textarea-input,
* {
    font-family: 'Inter', sans-serif;
}

/* –––––––––––––––––––––––––––––––––––––––––––––––––– 
DMC Overrides
–––––––––––––––––––––––––––––––––––––––––––––––––– */
.mantine-Spoiler-control {
    font-size: 12px;
}

/* –––––––––––––––––––––––––––––––––––––––––––––––––– 
App Background
–––––––––––––––––––––––––––––––––––––––––––––––––– */

html, body {
    margin: 0;
    overflow-x: hidden;
}

[data-mantine-color-scheme='dark'] body {
    /* background-color: #1A1D21; */
    background-color: #24262b;
}

[data-mantine-color-scheme='light'] body {
    /* background-color: #F8F9FA; */
    background-color: #FFFFFf;
}
  
/* –––––––––––––––––––––––––––––––––––––––––––––––––– 
All Inputs
–––––––––––––––––––––––––––––––––––––––––––––––––– */

/* Dark mode */
[data-mantine-color-scheme='dark'] input,
[data-mantine-color-scheme='dark'] textarea,
[data-mantine-color-scheme='dark'] select {
    background: transparent;
}

[data-mantine-color-scheme='dark'] input::placeholder,
[data-mantine-color-scheme='dark'] textarea::placeholder {
  color: #adb5bd;
}

[data-mantine-color-scheme='dark'] .mantine-Input-input:focus {
    border: 1px solid #228be6;
    background-color: #24262b;
}

/* Timesheet: keep cell status color when row has focus (override focus rules that change it) */
[data-mantine-color-scheme='dark'] .timecard-row:focus-within .timesheet-cell-saved { background-color: #060606 !important; }
[data-mantine-color-scheme='dark'] .timecard-row:focus-within .timesheet-cell-submitted { background-color: #2C209B !important; }
[data-mantine-color-scheme='dark'] .timecard-row:focus-within .timesheet-cell-approved { background-color: #089638 !important; }
[data-mantine-color-scheme='dark'] .timecard-row:focus-within .timesheet-cell-rejected { background-color: #F43131 !important; }
[data-mantine-color-scheme='dark'] .timecard-row:focus-within .timesheet-cell-draft,
[data-mantine-color-scheme='dark'] .timecard-row:focus-within .timesheet-cell-zero { background-color: transparent !important; }

/* Light mode */
[data-mantine-color-scheme='light'] .mantine-Input-label {
    color: #000000; 
}
[data-mantine-color-scheme='light'] .mantine-Input-input {
    background-color: #FFFFFF;
    border: 1px solid rgb(222, 226, 230);
    color: #1E1E1E;
} 



/* –––––––––––––––––––––––––––––––––––––––––––––––––– 
Scrollbar
–––––––––––––––––––––––––––––––––––––––––––––––––– */

/* Thumb */
[data-mantine-color-scheme='dark'] ::-webkit-scrollbar-thumb {
    background: rgb(58 69 80 / 50%);
    border-radius: 6px;
}
[data-mantine-color-scheme='dark'] ::-webkit-scrollbar-thumb:hover {
    background: rgb(90 102 114 / 70%);
}
[data-mantine-color-scheme='light'] ::-webkit-scrollbar-thumb {
    background: rgb(202 204 206);
    border-radius: 6px;
}
[data-mantine-color-scheme='light'] ::-webkit-scrollbar-thumb:hover {
    background: rgb(166 170 175);
}

/* Width */
::-webkit-scrollbar {
    width: 7px;
}
  
/* Track */
::-webkit-scrollbar-track {
    background: transparent;
}



/* –––––––––––––––––––––––––––––––––––––––––––––––––– 
Estimating
–––––––––––––––––––––––––––––––––––––––––––––––––– */
.select-hover {
    transition: border-color 120ms ease, box-shadow 120ms ease;
  }
  
.select-hover:hover {
    border-color: #6aa0ff !important;
    box-shadow: 0 0 0 2px rgba(106,160,255,.25);
  }


/* ===== _login.css ===== */
.auth_user_login_button {
    transition: background-color 0.2s ease;
}
.auth_user_login_button:hover {
    background-color: #1C7ED6 !important; /* slightly darker blue */
}
/* ––––––––––––––––––––––––––––––––––––––––––––––––––
Login Page Modal
–––––––––––––––––––––––––––––––––––––––––––––––––– */
.auth_user_login_modal .mantine-Modal-modal {
    background-color: #1A1B1E;
    color: white;
}
/* ––––––––––––––––––––––––––––––––––––––––––––––––––
Email Input
–––––––––––––––––––––––––––––––––––––––––––––––––– */
.auth_user_email_input .mantine-TextInput-label {
    color: #D1D2D3;
}
.auth_user_email_input .mantine-Input-input {
    background-color: #222529;
    color: #fff;
    border: 1px solid #35373B;
}
.auth_user_email_input .mantine-Input-placeholder {
    color: #888;
}
.auth_user_email_input .mantine-Input-icon {
    color: #888;
}
.auth_user_email_input input:-webkit-autofill {
    background-color: #222529;
    -webkit-text-fill-color: #fff;
    transition: background-color 5000s ease-in-out 0s;
    caret-color: #fff;
}
.auth_user_email_input input:-webkit-autofill:focus {
    background-color: #222529;
    -webkit-text-fill-color: #fff;
    border: 1px solid #228BE6;
    caret-color: #fff;
}
/* ––––––––––––––––––––––––––––––––––––––––––––––––––
Password Input
–––––––––––––––––––––––––––––––––––––––––––––––––– */
.auth_user_password_input .mantine-PasswordInput-label {
    color: #D1D2D3;
    background: transparent;
}
.auth_user_password_input .mantine-TextInput-label {
    color: #D1D2D3;
}
.auth_user_password_input .mantine-Input-input input {
    background-color: #222529;
    color: #fff;
    border: none !important;
}
.auth_user_password_input .mantine-Input-input:focus {
    border: none;
}
.auth_user_password_input .mantine-Input-placeholder {
    color: #888;
}
.auth_user_password_input .mantine-Input-icon {
    color: #888;
}
.auth_user_password_input .mantine-Input-input:focus-within {
    border: 1px solid #228BE6;
}
/* Autofill styling */
.auth_user_password_input .mantine-Input-input input:-webkit-autofill {
    background-color: #222529;
    -webkit-text-fill-color: #fff;
    transition: background-color 5000s ease-in-out 0s;
    caret-color: #fff;
    border: none;
}
.auth_user_password_input .mantine-PasswordInput-visibilityToggle:hover {
    background-color: RGB(46, 51, 57, .8)
}
/* ––––––––––––––––––––––––––––––––––––––––––––––––––
Loading Overlay
–––––––––––––––––––––––––––––––––––––––––––––––––– */
.auth_user_login_overlay .mantine-LoadingOverlay-root > .mantine-LoadingOverlay-overlay {
    background-color: rgba(0, 0, 0, 0.6) !important;
}


/* ===== accordion.css ===== */
/* –––––––––––––––––––––––––––––––––––––––––––––––––– 
Accordion
–––––––––––––––––––––––––––––––––––––––––––––––––– */


/* –––––––––––––––––––––––––––––––––––––––––––––––––– 
Dark Mode
–––––––––––––––––––––––––––––––––––––––––––––––––– */
[data-mantine-color-scheme='dark'] .mantine-Accordion-item {
    background-color: transparent;
    border: 0.5px solid #3a3d44;    
}   
[data-mantine-color-scheme='dark'] .mantine-Accordion-item[data-active='true'] {
    background-color: #25262B;
}   
[data-mantine-color-scheme='dark'] .mantine-Accordion-control {
    color: #FFFFFF;
}
[data-mantine-color-scheme='dark'] .mantine-Accordion-control:hover {
    background-color: #2a2c32;
}
[data-mantine-color-scheme='dark'] .mantine-Accordion-content {
    color: #FFFFFF;
}


/* –––––––––––––––––––––––––––––––––––––––––––––––––– 
Light Mode
–––––––––––––––––––––––––––––––––––––––––––––––––– */
[data-mantine-color-scheme='light'] .mantine-Accordion-item {
    background-color: #FFFFFF;
    border: 1px solid rgb(222, 226, 230);
}   
[data-mantine-color-scheme='light'] .mantine-Accordion-item[data-active='true'] {
    background-color: #F8F9FA;
}   
[data-mantine-color-scheme='light'] .mantine-Accordion-control {
    color: #5F6B7C;
}
[data-mantine-color-scheme='light'] .mantine-Accordion-control:hover {
    background-color: #F8F9FA;
}
[data-mantine-color-scheme='light'] .mantine-Accordion-content {
    color: #3D3B3B;
} 


/* ===== alerts.css ===== */
.dmc_alert_home {
    background-color: #303339;
    cursor: pointer;
}

.dmc_alert_home:hover {
    background-color: #3a3d45;
} 



/* ===== approval_config.css ===== */
/* ----------------------------------------------------------------
Approval Workflow Config — token-backed surface for stash/approvals/config.py.
Tokens defined in stash/theme/shell_tokens.css (--p3-bg, --border-subtle, etc.).
---------------------------------------------------------------- */

/* Feature-scoped semantic accents (referenced from both CSS and Python via DashIconify color="var(--appr-*)") */
:root {
    --appr-green: #4ade80;
    --appr-amber: #fbbf24;
    --appr-red: #f87171;
    --appr-accent: #6eb3f7;
}

/* ===== Header action group (above tabs) ===== */
.appr-header-actions {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 8px;
    width: 100%;
    margin-bottom: 8px;
}

/* ===== Trigger tabs ===== */
.appr-trigger-tabs .mantine-Tabs-tab {
    padding: 8px 14px;
    font-size: 12.5px;
    font-weight: 500;
    border-radius: 6px;
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

.appr-trigger-tabs .mantine-Tabs-list {
    border-radius: 8px;
    padding: 5px;
    gap: 4px;
}

/* tab count badge */
.appr-tab-count {
    min-width: 22px;
    padding: 1px 7px;
    border-radius: 10px;
    font-size: 10px;
    font-weight: 700;
    line-height: 1.5;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

/* ===== Tab status accents (green = has rules, red = no rules) ===== */
.appr-tab--has-rules {
    position: relative;
}
.appr-tab--no-rules {
    position: relative;
}

/* ===== Section frame ===== */
.appr-section {
    border-radius: 8px;
    overflow: hidden;
    width: 100%;
}
.appr-section-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 16px;
}
.appr-section-head-left {
    display: flex;
    align-items: center;
    gap: 10px;
}
.appr-section-title {
    font-size: 13px;
    font-weight: 600;
    letter-spacing: -0.005em;
}
.appr-section-desc {
    font-size: 11.5px;
    font-weight: 400;
}
.appr-section-head-right {
    display: flex;
    gap: 8px;
    align-items: center;
}
.appr-section-body {
    padding: 14px 16px;
}

/* ===== Status pill ===== */
.appr-status-pill {
    font-size: 10px;
    font-weight: 700;
    padding: 3px 9px;
    border-radius: 10px;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    line-height: 1.4;
    display: inline-flex;
    align-items: center;
}

/* ===== Available dimensions chip row ===== */
.appr-dim-row {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}
.appr-dim-chip {
    font-size: 10.5px;
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    padding: 5px 10px;
    border-radius: 12px;
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

/* ===== Standard pipeline (inline step pills) ===== */
.appr-pipeline {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px;
    padding: 12px;
    border-radius: 6px;
}
.appr-pipeline-empty {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 18px;
    font-style: italic;
    border-radius: 6px;
    font-size: 12px;
}

.appr-step-pill {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    border-radius: 6px;
    padding: 6px 10px;
    font-size: 11.5px;
    white-space: nowrap;
    transition: border-color 0.15s, background-color 0.15s;
    cursor: pointer;
}
.appr-step-pill:hover {
    background-color: var(--accent-soft);
}
.appr-step-num {
    width: 18px;
    height: 18px;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 10px;
    font-weight: 700;
}
.appr-step-group {
    font-weight: 500;
}
.appr-step-assignee {
    font-size: 10.5px;
    margin-left: 2px;
}
.appr-step-assignee::before {
    content: "·";
    margin-right: 4px;
}

.appr-pipe-arrow {
    font-size: 14px;
    line-height: 1;
}

/* dashed add button (Add Step / Add Condition) */
.appr-add-btn {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    background: transparent;
    padding: 6px 10px;
    border-radius: 6px;
    font-size: 11.5px;
    font-weight: 400;
    text-transform: none;
    letter-spacing: normal;
    cursor: pointer;
    font-family: inherit;
    line-height: 1.4;
    transition: border-color 0.15s, color 0.15s, background-color 0.15s;
}
.appr-add-btn:hover {
    background-color: var(--accent-soft);
}
.appr-add-btn[disabled],
.appr-add-btn:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

/* ===== Special rules controls strip ===== */
.appr-rules-controls {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 12px;
    padding: 10px 12px;
    border-radius: 6px;
    font-size: 12px;
}
.appr-rules-controls-lhs {
    display: flex;
    align-items: center;
    gap: 10px;
}

/* ===== Special rules grid + card ===== */
.appr-rules-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(480px, 1fr));
    gap: 14px;
}
.appr-rule-card {
    border-radius: 8px;
    padding: 16px 18px;
    position: relative;
    transition: border-color 0.15s;
    display: flex;
    flex-direction: column;
    gap: 16px;
}
.appr-rule-card-head {
    display: flex;
    align-items: center;
    gap: 10px;
    padding-right: 96px;
    min-height: 28px;
}
/* strip wrapper chrome from the name TextInput */
.appr-rule-card-head .mantine-TextInput-wrapper {
    margin: 0;
    padding: 0;
}
.appr-rule-card-head .mantine-TextInput-root {
    margin: 0;
}
/* card body wrapper — vertical gap between conditions, divider, steps */
.appr-rule-body {
    display: flex;
    flex-direction: column;
    gap: 14px;
}
.appr-rule-priority {
    width: 26px;
    height: 26px;
    border-radius: 4px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
    font-weight: 700;
    flex-shrink: 0;
}
/* rule name input — applied via classNames={"input": "appr-rule-name-input"} */
.appr-rule-name-input {
    border: none !important;
    background: transparent !important;
    padding: 3px 0 !important;
    font-size: 14px !important;
    font-weight: 600 !important;
    border-bottom: 1px dashed transparent !important;
    border-radius: 0 !important;
    height: auto !important;
    min-height: 0 !important;
}
.appr-rule-name-input:hover,
.appr-rule-name-input:focus {
    border-bottom-color: var(--border-subtle) !important;
}
.appr-rule-card-actions {
    position: absolute;
    top: 14px;
    right: 14px;
    display: flex;
    gap: 1px;
    align-items: center;
}

.appr-rule-section {
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.appr-rule-eyebrow {
    font-size: 10.5px;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    font-weight: 600;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin-bottom: 2px;
}

.appr-conditions-row {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    align-items: center;
}
.appr-cond-chip {
    border-radius: 4px;
    padding: 5px 9px;
    font-size: 11.5px;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    line-height: 1.4;
}
.appr-cond-key {
    opacity: 0.7;
}
.appr-cond-op {
    font-family: ui-monospace, "SF Mono", Menlo, monospace;
    font-size: 10.5px;
}
.appr-cond-val {
    font-weight: 500;
}

.appr-rule-divider {
    height: 1px;
    margin: 0 -18px;
}

.appr-mini-pipeline {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 5px;
}
.appr-mini-step {
    border-radius: 4px;
    padding: 5px 9px;
    font-size: 11.5px;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    cursor: pointer;
    transition: border-color 0.15s, background-color 0.15s;
}
.appr-mini-step:hover {
    background-color: var(--accent-soft);
}
.appr-mini-num {
    width: 16px;
    height: 16px;
    border-radius: 50%;
    font-size: 10px;
    font-weight: 700;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.appr-empty-cta {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 28px 12px;
}

/* ===== Drawer body ===== */
.appr-edit-drawer .mantine-Drawer-content {
    display: flex;
    flex-direction: column;
}
.appr-edit-drawer .mantine-Drawer-body {
    padding: 18px 20px;
}
.appr-drawer-section {
    margin-bottom: 20px;
}
.appr-drawer-section:last-child {
    margin-bottom: 0;
}
.appr-drawer-eyebrow {
    font-size: 11px;
    font-weight: 600;
    margin-bottom: 6px;
    display: block;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}
.appr-drawer-help {
    font-size: 11.5px;
    margin-bottom: 10px;
}
.appr-drawer-builder {
    border-radius: 6px;
    padding: 10px;
    margin-bottom: 8px;
    display: flex;
    align-items: center;
    gap: 8px;
}

/* =================================================================
   Dark mode
   ================================================================= */
[data-mantine-color-scheme='dark'] .appr-section {
    background: var(--p3-bg);
    border: 1px solid var(--border-subtle);
}
[data-mantine-color-scheme='dark'] .appr-section-head {
    background: var(--shell-bg);
    border-bottom: 1px solid var(--border-subtle);
}
[data-mantine-color-scheme='dark'] .appr-section-title {
    color: var(--text-strong);
}
[data-mantine-color-scheme='dark'] .appr-section-desc {
    color: var(--text-dim);
}
[data-mantine-color-scheme='dark'] .appr-trigger-tabs .mantine-Tabs-list {
    background: var(--shell-bg);
    border: 1px solid var(--border-subtle);
}
[data-mantine-color-scheme='dark'] .appr-trigger-tabs .mantine-Tabs-tab {
    color: var(--text-base);
}
[data-mantine-color-scheme='dark'] .appr-trigger-tabs .mantine-Tabs-tab:hover {
    background: var(--p3-bg);
    color: var(--text-strong);
}
[data-mantine-color-scheme='dark'] .appr-trigger-tabs .mantine-Tabs-tab[data-active='true'] {
    background: var(--p3-bg);
    color: var(--accent-blue);
    box-shadow: inset 0 0 0 1px var(--border-subtle);
}
[data-mantine-color-scheme='dark'] .appr-tab-count {
    background: var(--accent-soft);
    color: var(--text-base);
}
[data-mantine-color-scheme='dark'] .appr-trigger-tabs .mantine-Tabs-tab[data-active='true'] .appr-tab-count {
    background: var(--accent-active);
    color: var(--accent-blue);
}

/* tab status accents */
[data-mantine-color-scheme='dark'] .appr-tab--has-rules.mantine-Tabs-tab {
    color: var(--appr-green);
}
[data-mantine-color-scheme='dark'] .appr-tab--has-rules.mantine-Tabs-tab[data-active='true'] {
    color: var(--appr-green);
    box-shadow: inset 0 0 0 1px rgba(74, 222, 128, 0.25);
}
[data-mantine-color-scheme='dark'] .appr-tab--has-rules .iconify {
    color: var(--appr-green) !important;
}
[data-mantine-color-scheme='dark'] .appr-tab--no-rules.mantine-Tabs-tab {
    color: var(--text-dim);
}
[data-mantine-color-scheme='dark'] .appr-tab--no-rules.mantine-Tabs-tab[data-active='true'] {
    color: var(--appr-red);
    box-shadow: inset 0 0 0 1px rgba(248, 113, 113, 0.20);
}
[data-mantine-color-scheme='dark'] .appr-tab--no-rules .iconify {
    color: var(--text-dim) !important;
}
[data-mantine-color-scheme='dark'] .appr-tab--no-rules.mantine-Tabs-tab[data-active='true'] .iconify {
    color: var(--appr-red) !important;
}

[data-mantine-color-scheme='dark'] .appr-status-pill--enabled {
    background: rgba(74, 222, 128, 0.14);
    color: #4ade80;
}
[data-mantine-color-scheme='dark'] .appr-status-pill--disabled {
    background: rgba(248, 113, 113, 0.14);
    color: #f87171;
}

[data-mantine-color-scheme='dark'] .appr-dim-chip {
    background: var(--shell-bg);
    border: 1px solid var(--border-subtle);
    color: var(--text-base);
}
[data-mantine-color-scheme='dark'] .appr-dim-chip .iconify {
    color: var(--accent-blue);
}

[data-mantine-color-scheme='dark'] .appr-pipeline,
[data-mantine-color-scheme='dark'] .appr-pipeline-empty {
    background: var(--shell-bg);
    border: 1px dashed var(--border-subtle);
    color: var(--text-dim);
}
[data-mantine-color-scheme='dark'] .appr-step-pill {
    background: var(--p3-bg);
    border: 1px solid var(--border-subtle);
    color: var(--text-strong);
}
[data-mantine-color-scheme='dark'] .appr-step-pill:hover {
    border-color: var(--accent-blue);
}
[data-mantine-color-scheme='dark'] .appr-step-num {
    background: var(--accent-soft);
    color: var(--accent-blue);
}
[data-mantine-color-scheme='dark'] .appr-step-assignee {
    color: var(--text-dim);
}
[data-mantine-color-scheme='dark'] .appr-pipe-arrow {
    color: var(--text-dim);
}
[data-mantine-color-scheme='dark'] .appr-add-btn {
    border: 1px dashed var(--border-subtle);
    color: var(--text-base);
}
[data-mantine-color-scheme='dark'] .appr-add-btn:hover {
    border-color: var(--accent-blue);
    color: var(--accent-blue);
}

[data-mantine-color-scheme='dark'] .appr-rules-controls {
    background: var(--shell-bg);
    border: 1px solid var(--border-subtle);
    color: var(--text-dim);
    font-size: 11.5px;
}
[data-mantine-color-scheme='dark'] .appr-rules-controls .iconify {
    color: var(--appr-amber);
}

[data-mantine-color-scheme='dark'] .appr-rule-card {
    background: var(--rail-bg);
    border: 1px solid var(--border-subtle);
}
[data-mantine-color-scheme='dark'] .appr-rule-card:hover {
    border-color: var(--border-accent);
}
[data-mantine-color-scheme='dark'] .appr-rule-card--configured {
    border-color: rgba(74, 222, 128, 0.28);
}
[data-mantine-color-scheme='dark'] .appr-rule-card--empty {
    border-style: dashed;
    background: rgba(0, 0, 0, 0.25);
}
[data-mantine-color-scheme='dark'] .appr-rule-priority {
    background: var(--accent-soft);
    color: var(--accent-blue);
}
[data-mantine-color-scheme='dark'] .appr-rule-name-input {
    color: var(--text-strong) !important;
}
[data-mantine-color-scheme='dark'] .appr-rule-eyebrow {
    color: var(--text-dim);
}
[data-mantine-color-scheme='dark'] .appr-cond-chip {
    background: var(--shell-bg);
    border: 1px solid var(--border-subtle);
    color: var(--text-strong);
}
[data-mantine-color-scheme='dark'] .appr-cond-key {
    color: var(--text-dim);
}
[data-mantine-color-scheme='dark'] .appr-cond-op {
    color: #fbbf24;
}
[data-mantine-color-scheme='dark'] .appr-rule-divider {
    background: var(--border-subtle);
}
[data-mantine-color-scheme='dark'] .appr-mini-step {
    background: var(--shell-bg);
    border: 1px solid var(--border-subtle);
    color: var(--text-strong);
}
[data-mantine-color-scheme='dark'] .appr-mini-step:hover {
    border-color: var(--accent-blue);
}
[data-mantine-color-scheme='dark'] .appr-mini-num {
    background: var(--accent-soft);
    color: var(--accent-blue);
}
[data-mantine-color-scheme='dark'] .appr-empty-cta {
    color: var(--text-dim);
}

[data-mantine-color-scheme='dark'] .appr-edit-drawer .mantine-Drawer-content {
    background: var(--p3-bg);
    border-left: 1px solid var(--border-subtle);
}
[data-mantine-color-scheme='dark'] .appr-edit-drawer .mantine-Drawer-header {
    background: var(--shell-bg);
    border-bottom: 1px solid var(--border-subtle);
    color: var(--text-strong);
}
[data-mantine-color-scheme='dark'] .appr-drawer-eyebrow {
    color: var(--text-base);
}
[data-mantine-color-scheme='dark'] .appr-drawer-help {
    color: var(--text-dim);
}
[data-mantine-color-scheme='dark'] .appr-drawer-builder {
    background: var(--shell-bg);
    border: 1px solid var(--border-subtle);
}

/* =================================================================
   Light mode
   ================================================================= */
[data-mantine-color-scheme='light'] .appr-section {
    background: #ffffff;
    border: 1px solid #e5e7eb;
}
[data-mantine-color-scheme='light'] .appr-section-head {
    background: #f6f7f9;
    border-bottom: 1px solid #e5e7eb;
}
[data-mantine-color-scheme='light'] .appr-section-title {
    color: #1f2937;
}
[data-mantine-color-scheme='light'] .appr-section-desc {
    color: #6b7280;
}
[data-mantine-color-scheme='light'] .appr-trigger-tabs .mantine-Tabs-list {
    background: #f1f3f5;
    border: 1px solid #e5e7eb;
}
[data-mantine-color-scheme='light'] .appr-trigger-tabs .mantine-Tabs-tab {
    color: #4b5563;
}
[data-mantine-color-scheme='light'] .appr-trigger-tabs .mantine-Tabs-tab:hover {
    background: #ffffff;
    color: #1f2937;
}
[data-mantine-color-scheme='light'] .appr-trigger-tabs .mantine-Tabs-tab[data-active='true'] {
    background: #ffffff;
    color: #1e5eff;
    box-shadow: inset 0 0 0 1px #c5d2e6;
}
[data-mantine-color-scheme='light'] .appr-tab-count {
    background: #e5e7eb;
    color: #4b5563;
}
[data-mantine-color-scheme='light'] .appr-trigger-tabs .mantine-Tabs-tab[data-active='true'] .appr-tab-count {
    background: #dbe6ff;
    color: #1e5eff;
}

/* tab status accents */
[data-mantine-color-scheme='light'] .appr-tab--has-rules.mantine-Tabs-tab {
    color: #166534;
}
[data-mantine-color-scheme='light'] .appr-tab--has-rules.mantine-Tabs-tab[data-active='true'] {
    color: #166534;
    box-shadow: inset 0 0 0 1px rgba(22, 101, 52, 0.25);
}
[data-mantine-color-scheme='light'] .appr-tab--has-rules .iconify {
    color: #166534 !important;
}
[data-mantine-color-scheme='light'] .appr-tab--no-rules.mantine-Tabs-tab {
    color: #6b7280;
}
[data-mantine-color-scheme='light'] .appr-tab--no-rules.mantine-Tabs-tab[data-active='true'] {
    color: #991b1b;
    box-shadow: inset 0 0 0 1px rgba(153, 27, 27, 0.18);
}
[data-mantine-color-scheme='light'] .appr-tab--no-rules .iconify {
    color: #6b7280 !important;
}
[data-mantine-color-scheme='light'] .appr-tab--no-rules.mantine-Tabs-tab[data-active='true'] .iconify {
    color: #991b1b !important;
}

[data-mantine-color-scheme='light'] .appr-status-pill--enabled {
    background: #dcfce7;
    color: #166534;
}
[data-mantine-color-scheme='light'] .appr-status-pill--disabled {
    background: #fee2e2;
    color: #991b1b;
}

[data-mantine-color-scheme='light'] .appr-dim-chip {
    background: #f1f3f5;
    border: 1px solid #d1d5db;
    color: #4b5563;
}
[data-mantine-color-scheme='light'] .appr-dim-chip .iconify {
    color: #1e5eff;
}

[data-mantine-color-scheme='light'] .appr-pipeline,
[data-mantine-color-scheme='light'] .appr-pipeline-empty {
    background: #f9fafb;
    border: 1px dashed #d1d5db;
    color: #6b7280;
}
[data-mantine-color-scheme='light'] .appr-step-pill {
    background: #ffffff;
    border: 1px solid #d1d5db;
    color: #1f2937;
}
[data-mantine-color-scheme='light'] .appr-step-pill:hover {
    border-color: #1e5eff;
    background: #f5f8ff;
}
[data-mantine-color-scheme='light'] .appr-step-num {
    background: #dbe6ff;
    color: #1e5eff;
}
[data-mantine-color-scheme='light'] .appr-step-assignee {
    color: #6b7280;
}
[data-mantine-color-scheme='light'] .appr-pipe-arrow {
    color: #9ca3af;
}
[data-mantine-color-scheme='light'] .appr-add-btn {
    border: 1px dashed #d1d5db;
    color: #4b5563;
}
[data-mantine-color-scheme='light'] .appr-add-btn:hover {
    border-color: #1e5eff;
    color: #1e5eff;
    background: #f5f8ff;
}

[data-mantine-color-scheme='light'] .appr-rules-controls {
    background: #f9fafb;
    border: 1px solid #e5e7eb;
    color: #6b7280;
    font-size: 11.5px;
}
[data-mantine-color-scheme='light'] .appr-rules-controls .iconify {
    color: #b45309;
}

[data-mantine-color-scheme='light'] .appr-rule-card {
    background: #ffffff;
    border: 1px solid #e5e7eb;
}
[data-mantine-color-scheme='light'] .appr-rule-card:hover {
    border-color: #c5d2e6;
}
[data-mantine-color-scheme='light'] .appr-rule-card--configured {
    border-color: #86efac;
}
[data-mantine-color-scheme='light'] .appr-rule-card--empty {
    border-style: dashed;
    background: #fafafa;
}
[data-mantine-color-scheme='light'] .appr-rule-priority {
    background: #dbe6ff;
    color: #1e5eff;
}
[data-mantine-color-scheme='light'] .appr-rule-name-input {
    color: #1f2937 !important;
}
[data-mantine-color-scheme='light'] .appr-rule-eyebrow {
    color: #6b7280;
}
[data-mantine-color-scheme='light'] .appr-cond-chip {
    background: #f1f3f5;
    border: 1px solid #d1d5db;
    color: #1f2937;
}
[data-mantine-color-scheme='light'] .appr-cond-key {
    color: #6b7280;
}
[data-mantine-color-scheme='light'] .appr-cond-op {
    color: #b45309;
}
[data-mantine-color-scheme='light'] .appr-rule-divider {
    background: #e5e7eb;
}
[data-mantine-color-scheme='light'] .appr-mini-step {
    background: #f1f3f5;
    border: 1px solid #d1d5db;
    color: #1f2937;
}
[data-mantine-color-scheme='light'] .appr-mini-step:hover {
    border-color: #1e5eff;
}
[data-mantine-color-scheme='light'] .appr-mini-num {
    background: #dbe6ff;
    color: #1e5eff;
}
[data-mantine-color-scheme='light'] .appr-empty-cta {
    color: #6b7280;
}

[data-mantine-color-scheme='light'] .appr-edit-drawer .mantine-Drawer-content {
    background: #ffffff;
    border-left: 1px solid #e5e7eb;
}
[data-mantine-color-scheme='light'] .appr-edit-drawer .mantine-Drawer-header {
    background: #f6f7f9;
    border-bottom: 1px solid #e5e7eb;
    color: #1f2937;
}
[data-mantine-color-scheme='light'] .appr-drawer-eyebrow {
    color: #4b5563;
}
[data-mantine-color-scheme='light'] .appr-drawer-help {
    color: #6b7280;
}
[data-mantine-color-scheme='light'] .appr-drawer-builder {
    background: #f9fafb;
    border: 1px solid #e5e7eb;
}

/* ===== Saved / unsaved notification (paper above tabs) ===== */
[data-mantine-color-scheme='dark'] .appr-saved-notif {
    background-color: rgba(74, 222, 128, 0.18);
    border-left: 3px solid var(--appr-green) !important;
}
[data-mantine-color-scheme='light'] .appr-saved-notif {
    background-color: #dcfce7;
    border-left: 3px solid #16a34a !important;
}

[data-mantine-color-scheme='dark'] .appr-unsaved-notif {
    background-color: rgba(248, 113, 113, 0.18);
    border-left: 3px solid var(--appr-red) !important;
}
[data-mantine-color-scheme='light'] .appr-unsaved-notif {
    background-color: #fee2e2;
    border-left: 3px solid #dc2626 !important;
}


/* ===== ar_builder.css ===== */
.custom-menu-button:hover {
    background-color: #16181c !important;
}

.custom-menu-button.active {
    color: #2579da !important;
    font-weight: 900 !important;
}


/* ===== artifact_panel.css ===== */
.artifact_panel_resizer {
    position: absolute;
    top: 0;
    left: 0;
    transform: translateX(-50%);
    height: 100%;
    width: 4px;
    background: #339af0;
    cursor: col-resize;
    transition: background-color 0.2s;
    z-index: 999;
}

.artifact_panel_resizer:hover {
    background: #ffffff;
}

.artifact_panel_resizer_handle {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 12px;
    height: 40px;
    background-color: #339af0;
    border-radius: 6px;
    opacity: 0.8;
    pointer-events: none;
}

/* Cue variant — Cue-gradient left border + gradient resizer */
.artifact_panel.artifact_panel--cue {
    border-left: 3px solid transparent;
    border-image: var(--cue-grad) 1;
    background: var(--topbar-bg);
}

/* Paint the Cue pane header with the Cue gradient and tame the default
   inline-styled border color (light gray ugly on dark bg). */
.artifact_panel--cue .mantine-Group-root[style*="borderBottom"] {
    background: var(--cue-grad-linear) !important;
    border-bottom: 1px solid rgba(0, 0, 0, 0.25) !important;
    padding: 10px 14px !important;
    box-shadow: 0 2px 12px var(--cue-glow);
    flex-wrap: nowrap !important;
    min-width: 0 !important;
}

.artifact_panel--cue .mantine-Group-root[style*="borderBottom"] > div:first-child {
    min-width: 0;
    flex: 1;
}

.artifact_panel--cue .artifact_panel_resizer {
    background: var(--cue-grad-linear);
}

.artifact_panel--cue .artifact_panel_resizer:hover {
    filter: brightness(1.15);
}

.artifact_panel--cue .artifact_panel_resizer_handle {
    background: var(--cue-grad-linear);
    box-shadow: 0 0 8px 2px var(--cue-glow);
}


.artifact_panel {
    position: fixed;
    top: 0;
    right: 0;
    height: 100vh;
    width: 1000px;   /* Also set in .artifact_panel_resizer  <right> value */
    overflow-y: auto;  /* Enable vertical scrolling */
    min-width: 300px;
    box-sizing: border-box;
    max-width: calc(100vw - 150px);
    background: rgb(4, 0, 15);
    border-left: 1px solid #e9ecef;
    display: flex;
    flex-direction: column;
    z-index: 1000;
    box-shadow: -2px 0 10px rgba(0, 0, 0, 0.1);
}
/* Maximized state — align with nav rail token (replaces legacy 9.3rem sidebar) */
.artifact_panel.maximized {
    left: var(--rail-w, 48px);
    right: 0;
    width: auto; /* fill between left and right; avoids over-constraint with width: calc(...) */
    max-width: none;
    z-index: 1001;
    box-shadow: -2px 0 10px rgba(0, 0, 0, 0.2);
}

.artifact_panel_hidden {
    display: none !important;
}

/* Button styles */
.artifact-btn-new-tab,
.artifact-btn-maximize,
.artifact-btn-close {
    transition: all 0.2s ease;
}

.artifact-btn-new-tab:hover,
.artifact-btn-maximize:hover,
.artifact-btn-close:hover {
    background-color: rgba(115, 116, 114, 0.1);
    transform: scale(1.1);
}

.artifact-btn-new-tab.hidden,
.artifact-btn-maximize.hidden {
    display: none !important;
}

/* Hide main panel and resizer when maximized */
.split-container.artifact-maximized .main-panel,
.split-container.artifact-maximized .artifact_panel_resizer {
    display: none;
}

/* Adjust main content when panel is open */
.main-panel.with-artifact {
    margin-right: 400px;
}

.artifact-panel-content {
    max-width: 100%; /* Ensure PDFs etc are full width */
    margin-left: 0;
    margin-right: 0;
}

.artifact-element {
    width: 100%;
    height: 100vh;
}


/* ===== badge.css ===== */
/* –––––––––––––––––––––––––––––––––––––––––––––––––– 
Badge 
–––––––––––––––––––––––––––––––––––––––––––––––––– */


.mantine-Badge-root {
    font-weight: 400;
} 


/* Dark Mode */
[data-mantine-color-scheme='dark'] .blue_light_badge {
    background-color: #253347;;
    color: #72AFFF;;
}
[data-mantine-color-scheme='dark'] .blue_dot_badge {
    background-color: #2E2E2E;
    color: #E0E0E0;
    border: none;
}
[data-mantine-color-scheme='dark'] .blue_outline_badge {
    background-color: transparent;
    border: 1px solid #509BFF;
    color: #509BFF;
}
[data-mantine-color-scheme='dark'] .blue_filled_badge {
    background-color: #1E5EFF;
    color: white;
}

/* ---------------------------------------------------------------------------------------------- */

/* Light Mode */

[data-mantine-color-scheme='light'] .blue_light_badge {
    background-color: #E3EEFF;
    color: #1E5EFF;
}
[data-mantine-color-scheme='light'] .blue_dot_badge {
    background-color: transparent;
    color: #1E1E1E;
    border: 1px solid #E0E0E0;
}
[data-mantine-color-scheme='light'] .blue_outline_badge {
    background-color: transparent;
    border: 1px solid #A5C9FF;
    color: #1E5EFF;
}

[data-mantine-color-scheme='light'] .blue_filled_badge {
    background-color: #3E82F7;
    color: white;
}


/* ===== bid_review.css ===== */
/* Bid review hover affordances */
.bid-review-kpi-row {
    transition: background-color 0.12s ease;
    border-radius: 4px;
  }
  [data-mantine-color-scheme='dark'] .bid-review-kpi-row:hover {
    background-color: rgba(255, 255, 255, 0.06) !important;
  }
  [data-mantine-color-scheme='light'] .bid-review-kpi-row:hover {
    background-color: rgba(0, 0, 0, 0.05) !important;
  }
  .bid-review-finance-tile {
    transition: background-color 0.12s ease, box-shadow 0.12s ease;
  }
  [data-mantine-color-scheme='dark'] .bid-review-finance-tile:hover {
    background-color: #222327 !important;
    box-shadow: inset 0 0 0 1px rgba(51, 154, 240, 0.25);
  }
  [data-mantine-color-scheme='light'] .bid-review-finance-tile:hover {
    background-color: #f1f3f5 !important;
    box-shadow: inset 0 0 0 1px rgba(51, 154, 240, 0.35);
  }


/* ===== boq_clickable_cell.css ===== */
/* Hover styles for BOQ clickable cells (Allocated, Project Stock when value > 0) */
.materials-boq-cell-clickable {
    cursor: pointer;
    /* border-radius: 4px; */
    border: 1px solid transparent;
    transition: background-color 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}
.materials-boq-cell-clickable:hover {
    background-color: #3b3b3b !important;
    border-color: #e8590c !important;
    z-index: 50;
}
.materials-boq-cell-clickable:hover * {
    color: #e8590c !important;
}


/* ===== button.css ===== */
/* –––––––––––––––––––––––––––––––––––––––––––––––––– 
Button
–––––––––––––––––––––––––––––––––––––––––––––––––– */


/* –––––––––––––––––––––––––––––––––––––––––––––––––– 
Dark Mode
–––––––––––––––––––––––––––––––––––––––––––––––––– */
/* [data-mantine-color-scheme='dark'] .mantine-Button-root {
    background-color: #1E60B1;
}   
[data-mantine-color-scheme='dark'] .mantine-Button-root:hover {
    background-color: #1B4D91;
}   
[data-mantine-color-scheme='dark'] .mantine-Button-root:active {
    background-color: #183D74;
} 
[data-mantine-color-scheme='dark'] .blue_subtle_button {
    background-color: transparent;
}   
[data-mantine-color-scheme='dark'] .blue_subtle_button:hover {
    background-color: #2C3E56;
}   
[data-mantine-color-scheme='dark'] .blue_light_button {
    background-color: rgba(25, 113, 194, 0.2);
}   
[data-mantine-color-scheme='dark'] .blue_light_button:hover {
    background-color: #35506F;
}
[data-mantine-color-scheme='dark'] .blue_outline_button {
    background-color: transparent;
}   
[data-mantine-color-scheme='dark'] .blue_outline_button:hover {
    background-color: rgba(59, 156, 255, 0.08);
}
[data-mantine-color-scheme='dark'] .blue_gradient_button {
    background: linear-gradient(45deg, #1E60B1 0%,  #224F8F 50%, #183D74 100%);
}    */
/* [data-mantine-color-scheme='dark'] .blue_gradient_button:hover {
    background-image: linear-gradient(135deg, #75FFD6 0%, #6663FF 100%);
}           */


/* –––––––––––––––––––––––––––––––––––––––––––––––––– 
Light Mode
–––––––––––––––––––––––––––––––––––––––––––––––––– */

/* [data-mantine-color-scheme='light'] .mantine-Button-root {
    background-color: #1E5EFF;
}   
[data-mantine-color-scheme='light'] .mantine-Button-root:hover {
    background-color: #174DE0;
}   
[data-mantine-color-scheme='light'] .mantine-Button-root:active {
    background-color: #1F438C;
} 
[data-mantine-color-scheme='light'] .blue_subtle_button {
    background-color: transparent;
    color: #1E5EFF;
}   
[data-mantine-color-scheme='light'] .blue_subtle_button:hover {
    background-color: rgba(30, 94, 255, 0.08);
    color: #174DE0;
}   
[data-mantine-color-scheme='light'] .blue_light_button {
    background-color: #E3EEFF;
    color: #1E5EFF;
}   
[data-mantine-color-scheme='light'] .blue_light_button:hover {
    background-color: #D1E3FF;
    color: #174DE0;
}
[data-mantine-color-scheme='light'] .blue_outline_button {
    background-color: transparent;
    border: 1px solid #1E5EFF;
    color: #1E5EFF;
}   
[data-mantine-color-scheme='light'] .blue_outline_button:hover {
    background-color: rgba(30, 94, 255, 0.08);
    border-color: #174DE0;
    color: #174DE0;
}
[data-mantine-color-scheme='light'] .blue_gradient_button {
    background-image: linear-gradient(135deg, #1E5EFF 0%, #174DE0 40%, #123EBE 100%);
    color: white;
}   
[data-mantine-color-scheme='light'] .blue_gradient_button:hover {
    background-image: linear-gradient(135deg, #174DE0 0%, #123EBE 50%, #0F2F9C 100%);
} */


/* ===== card.css ===== */
/* –––––––––––––––––––––––––––––––––––––––––––––––––– 
Card
–––––––––––––––––––––––––––––––––––––––––––––––––– */



/* –––––––––––––––––––––––––––––––––––––––––––––––––– 
Dark Mode
–––––––––––––––––––––––––––––––––––––––––––––––––– */

[data-mantine-color-scheme='dark'] .mantine-Card-root {
    color: #FFFFFF;
    background-color: #25262B;
    border: 1px solid #3a3d44;    
}


/* –––––––––––––––––––––––––––––––––––––––––––––––––– 
Light Mode
–––––––––––––––––––––––––––––––––––––––––––––––––– */

[data-mantine-color-scheme='light'] .mantine-Card-root {
    color: #3D3B3B;
    background-color: #FFFFFF;    
    border: 1px solid rgb(222, 226, 230);
}


/* ===== cards_entity.css ===== */





/* –––––––––––––––––––––––––––––––––––––––––––––––––– 
Card
–––––––––––––––––––––––––––––––––––––––––––––––––– */



/* –––––––––––––––––––––––––––––––––––––––––––––––––– 
Dark Mode
–––––––––––––––––––––––––––––––––––––––––––––––––– */

/* [data-mantine-color-scheme='dark'] .cards_entity {
    background: linear-gradient(135deg, rgb(76 96 192), rgb(40 56 130));
} */


/* –––––––––––––––––––––––––––––––––––––––––––––––––– 
Light Mode
–––––––––––––––––––––––––––––––––––––––––––––––––– */



/* ===== context_chat.css ===== */
.context_chat_send_button {
  transition: background-color 0.2s ease;
  background-color: transparent;
  color: blue;
}

.context_chat_send_button:hover {
  background-color: blue;
}

.context_chat_send_button:hover svg {
  color: white !important;
}


.context_chat_typing_indicator {
  font-style: italic;
  color: gray;
  font-size: 12px;
  margin-top: 4px;
  padding-left: 4px;
}

/* Mentions */
/* .context_chat_mention {
  color: rgb(0, 76, 255);
  font-weight: 600;
  text-shadow:
    -0.5px -0.5px 0 white,
     0.5px -0.5px 0 white,
    -0.5px  0.5px 0 white,
     0.5px  0.5px 0 white;
}

.context_chat_mention_option {
  padding: 6px 10px;
  cursor: pointer;
  background-color: #fff;
  border-bottom: 1px solid #eee;
  font-size: 14px;
}

.context_chat_mention_option:hover {
  background-color: #f0f0f0;
} */

.mention-dropdown {
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
}

.mention-option {
    transition: background-color 0.1s ease;
}

.mention-option:hover {
    background-color: #f8f9fa !important;
}

.mention-option.selected {
    background-color: #007bff !important;
    color: white !important;
}

/* Style for mentions in text */
.mention {
    /* background-color: #e3f2fd; */
    color: #2BCED6;
    padding: 2px 4px;
    border-radius: 3px;
    font-weight: 500;
}



/* ===== cue_standard.css ===== */
/* Cue theme — send button, conversation feed, bubbles, spinner.
   Layout rules for the chat body/typewriter/input now live exclusively in
   div_0_chat.css to avoid cascade conflicts. */

/* ---------- Send button ---------- */
[data-mantine-color-scheme='dark'] .cue-send-button:disabled {
    background-color: #343a40;
    cursor: pointer;
}
[data-mantine-color-scheme='dark'] .cue-send-button {
    background-color: white;
    cursor: pointer;
    transition: all 0.01s ease;
}
[data-mantine-color-scheme='dark'] .cue-send-button:disabled .cue-send-button-icon {
    color: #5d6976 !important;
}
[data-mantine-color-scheme='dark'] .cue-send-button:not(:disabled) .cue-send-button-icon {
    color: #343a40 !important;
}

[data-mantine-color-scheme='light'] .cue-send-button:disabled {
    background-color: #ececec;
    cursor: pointer;
}
[data-mantine-color-scheme='light'] .cue-send-button {
    background-color: #212529;
    cursor: pointer;
    transition: all 0.01s ease;
}
[data-mantine-color-scheme='light'] .cue-send-button:not(:disabled) .cue-send-button-icon {
    color: white !important;
}

.cue-send-button:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

/* ---------- Conversation feed ---------- */
.cue-conversation-feed {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 8px 12px;
}

.cue-chat-bubble {
    word-wrap: break-word;
    overflow-wrap: break-word;
}

.cue-conversation-feed > div {
    width: 100%;
    margin-bottom: 12px;
}

/* ---------- Message bubbles (theme-token driven) ---------- */
.cue-bubble-user {
    background-color: var(--cue-bubble-user-bg);
    color: var(--cue-bubble-user-fg);
    border-bottom-right-radius: 4px;
}

.cue-bubble-assistant {
    background-color: var(--cue-bubble-asst-bg);
    color: var(--cue-bubble-asst-fg);
    border: 1px solid var(--cue-bubble-asst-border);
    border-bottom-left-radius: 4px;
}

/* ---------- Galaxy spinner (uses Cue gradient tokens) ---------- */
.galaxy-spinner-overlay .mantine-LoadingOverlay-loader {
    background: var(--cue-grad-conic);
    border-radius: 50%;
    animation: galaxy-spin 1.5s linear infinite;
    width: 40px !important;
    height: 40px !important;
    border: 2px solid transparent;
    box-shadow: 0 0 15px 3px var(--cue-glow);
}

.galaxy-spinner-overlay .mantine-LoadingOverlay-loader > * {
    display: none;
}

@keyframes galaxy-spin {
    0%   { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

.cue-send-button.spinning {
    animation: galaxy-spin 0.8s linear infinite;
    background: var(--cue-grad-conic) !important;
}


/* ===== custom.css ===== */
/* Main body styling */
body {
    background-color: #1A1B1E !important;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
}

/* KPI Card hover effects */
.kpi-card:hover {
    border-color: #339AF0 !important;
    box-shadow: 0 2px 8px rgba(51, 154, 240, 0.12) !important;
}

/* Custom scrollbar */
::-webkit-scrollbar {
    width: 8px;
}

::-webkit-scrollbar-track {
    background: #2C2E33;
}

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

::-webkit-scrollbar-thumb:hover {
    background: #5C5F66;
}

/* Smooth animations */
* {
    transition: all 0.2s ease;
}

/* Text truncation utility classes */
.text-truncate {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.kpi-title {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}




/* BID REVIEW TASK BELOW */

/* Project Overview Section Improvements */
.project-overview-card {
    transition: all 0.3s ease;
}

.project-overview-card:hover {
    transform: translateY(-1px);
    box-shadow: 0 6px 25px rgba(51, 154, 240, 0.15) !important;
}

.overview-section {
    transition: all 0.2s ease;
    border-radius: 12px;
}

.overview-section:hover {
    transform: translateY(-1px);
    box-shadow: 0 4px 15px rgba(51, 154, 240, 0.1);
    border-color: rgba(51, 154, 240, 0.4) !important;
}

/* Soft blue background variations */
.soft-blue-bg-1 {
    background-color: rgba(51, 154, 240, 0.03) !important;
}

.soft-blue-bg-2 {
    background-color: rgba(51, 154, 240, 0.08) !important;
}

.soft-blue-bg-3 {
    background-color: rgba(51, 154, 240, 0.12) !important;
}


/* Enhanced typography for project overview */
.overview-title {
    color: #339AF0 !important;
    font-weight: 600 !important;
    letter-spacing: -0.025em;
}

.overview-label {
    color: #868E96 !important;
    font-weight: 500 !important;
    font-size: 0.75rem !important;
}

.overview-value {
    color: #FFFFFF !important;
    font-weight: 400 !important;
    font-size: 0.875rem !important;
}

/* Icon styling improvements */
.overview-icon {
    filter: drop-shadow(0 1px 2px rgba(51, 154, 240, 0.2));
}

/* Card border improvements */
.overview-card-border {
    border: 1px solid rgba(51, 154, 240, 0.2) !important;
    border-radius: 12px !important;
}

/* Hover state improvements */
.overview-card-border:hover {
    border-color: rgba(51, 154, 240, 0.4) !important;
    box-shadow: 0 4px 15px rgba(51, 154, 240, 0.1) !important;
}


/* ===== customers.css ===== */
.customers_accordion_button_mimic:hover {
    background-color: rgba(10, 109, 18, 0.7) !important;
}

.customers_accordion_button_mimic2:hover {
    background-color: rgba(220, 144, 2, 0.7) !important;
}


/* ===== date_picker.css ===== */
/* –––––––––––––––––––––––––––––––––––––––––––––––––– 
Date Picker
–––––––––––––––––––––––––––––––––––––––––––––––––– */


/* –––––––––––––––––––––––––––––––––––––––––––––––––– 
Dark Mode
–––––––––––––––––––––––––––––––––––––––––––––––––– */
[data-mantine-color-scheme='dark'] .mantine-DatePicker-label {
    color: #FFFFFF;
}


/* –––––––––––––––––––––––––––––––––––––––––––––––––– 
Light Mode
–––––––––––––––––––––––––––––––––––––––––––––––––– */

[data-mantine-color-scheme='light'] .mantine-DatePicker-label {
    color: #1E1E1E;
}
[data-mantine-color-scheme='light'] .mantine-DateRangePicker-label {
    color: #1E1E1E;
}
[data-mantine-color-scheme='light'] .mantine-ActionIcon-root {
    color: rgb(134, 142, 150);
}
[data-mantine-color-scheme='light'] .mantine-DatePicker-description {
    color: rgb(134, 142, 150);
}
[data-mantine-color-scheme='light'] .mantine-DateRangePicker-description {
    color: rgb(134, 142, 150);
}
[data-mantine-color-scheme='light'] .mantine-DatePicker-dropdown {
    background: white;
    border: 1px solid rgb(222, 226, 230);
}
[data-mantine-color-scheme='light'] .mantine-DatePicker-calendarHeaderLevel {
    color: #1E1E1E;
}
[data-mantine-color-scheme='light'] .mantine-DatePicker-calendarHeaderLevel:hover {
    background-color: rgb(248, 249, 250);
}
[data-mantine-color-scheme='light'] .mantine-DateRangePicker-calendarHeaderLevel {
    color: #1E1E1E;
}
[data-mantine-color-scheme='light'] .mantine-DateRangePicker-calendarHeaderLevel:hover {
    color: #1E1E1E;
    background-color: rgb(248, 249, 250);
}
[data-mantine-color-scheme='light'] .mantine-DatePicker-day:hover {
    background-color: rgb(248, 249, 250);
    border-radius: 4px;
}




/* ===== div_0_chat.css ===== */
/* ======================================================================
   Cue chat body — bottoms-up layout.

   Structure (all inside the artifact pane's Container > chat-root grid):

     .cue-chat-root (grid: 1fr / auto / auto)
       .cue-chat-body     (row 1 — fills; scrolls)
         .cue-chat-body-content   (empty state: centered)
           .cue-typewriter-container  (relative, 28px)
             .cue-typewriter-group    (absolute, stacked)
         .cue-conversation-feed       (conversation messages)
       .cue-input-row      (row 2 — textarea + send)
       (disclaimer region)  (row 3)

   This file intentionally does NOT rely on flex-height cascades. Heights
   come from explicit values or grid tracks.
   ==================================================================== */

/* Pane header "AI Insights" label (Mantine renders it inside the pane
   header's title slot). */
.cue-pane-title {
    display: flex;
    align-items: center;
    min-width: 0;
    flex: 1;
}

.cue-pane-title-label {
    font-size: 16px;
    font-weight: 700;
    color: var(--accent-blue);
    letter-spacing: 0.02em;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.35);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* --- Neutralize dmc.Container so chat_root can own its size. --------- */
.artifact_panel--cue .artifact-panel-content {
    display: block !important;
    padding: 0 !important;
    max-width: none !important;
    width: 100% !important;
    height: calc(100vh - 80px) !important;
    margin: 0 !important;
    overflow: hidden !important;
}

.cue-chat-root {
    /* Grid rows are already declared inline; these are visual tokens. */
    background: transparent;
}

/* --- Row 1: body (scrollable). -------------------------------------- */
.cue-chat-body {
    background: transparent;
    /* Fill the grid cell so the empty state's `flex: 1` has real space to
       expand into and the typewriter can vertically center. */
    height: 100%;
}

/* --- Empty state (centered typewriter). ----------------------------- */
.cue-chat-body-content {
    min-height: 180px;
    text-align: center;
}

/* Typewriter container holds all 100 absolute-positioned phrase groups. */
.cue-typewriter-container {
    /* position/width/height are set inline; keep presentation only here. */
    margin: 0 auto;
    max-width: 100%;
}

/* JS is the single source of truth. Every group is hidden by default; the
   rotator adds `.is-active` to exactly one group at a time. Before JS runs
   (one-frame window on mount) the typewriter strip is blank. */
.cue-typewriter-group {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    display: none;
    align-items: center;
    gap: 6px;
    white-space: nowrap;
}

.cue-typewriter-group.is-active {
    display: inline-flex;
}

.cue-typewriter-text {
    font-family: "Inter", "Segoe UI", system-ui, -apple-system, sans-serif;
    font-size: 14px;
    font-weight: 600;
    color: var(--text-strong);
    white-space: nowrap;
    display: inline-block;
    /* Hidden by default; revealed left-to-right by clip-path animation when
       the group becomes active. clip-path is used (rather than width) so the
       parent group keeps a stable layout box and the trailing cursor doesn't
       jump around as the text "types" in. */
    clip-path: inset(0 100% 0 0);
}

.cue-typewriter-group.is-active .cue-typewriter-text {
    animation: cue-tw-type var(--tw-type-ms, 1800ms) steps(60, end) forwards;
}

@keyframes cue-tw-type {
    from { clip-path: inset(0 100% 0 0); }
    to   { clip-path: inset(0 0     0 0); }
}

.cue-typewriter-cursor {
    display: inline-block;
    width: 6px;
    height: 16px;
    border-radius: 3px;
    background: var(--cue-grad-linear);
    animation: cue-tw-blink 1s infinite;
    vertical-align: middle;
}

@keyframes cue-tw-blink {
    0%, 50%   { opacity: 1; }
    51%, 100% { opacity: 0; }
}

/* --- Row 2: input row. ---------------------------------------------- */
.cue-input-row {
    background: transparent;
}

.cue-chat-input {
    width: 100%;
}

.cue-chat-input .mantine-Input-input {
    border: 1px solid var(--border-subtle);
    border-radius: 12px;
    background: rgba(255, 255, 255, 0.02);
    color: var(--text-strong);
    min-height: 64px;
    padding: 12px 48px 12px 14px;
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.cue-chat-input .mantine-Input-input::placeholder {
    color: var(--text-muted);
}

.cue-chat-input .mantine-Input-input:focus {
    border-color: transparent;
    box-shadow: 0 0 0 2px var(--cue-glow);
}

.cue-send-button-wrap {
    position: absolute;
    right: 8px;
    bottom: 8px;
}

/* --- Row 3: disclaimer. --------------------------------------------- */
.cue-chat-disclaimer {
    color: var(--text-muted);
    font-size: 10px;
    line-height: 1.3;
}

/* --- Typing indicator (bubble). ------------------------------------- */
.cue-typing-indicator {
    display: flex;
    gap: 4px;
    padding: 10px 14px;
    background: var(--cue-bubble-asst-bg);
    border: 1px solid var(--cue-bubble-asst-border);
    border-radius: 18px;
    border-bottom-left-radius: 4px;
    width: fit-content;
    margin: 4px 12px;
}

.cue-typing-indicator .dot {
    width: 8px;
    height: 8px;
    background: var(--accent-blue);
    border-radius: 50%;
    animation: cue-typing 1.4s infinite;
}

.cue-typing-indicator .dot:nth-child(2) { animation-delay: 0.2s; }
.cue-typing-indicator .dot:nth-child(3) { animation-delay: 0.4s; }

@keyframes cue-typing {
    0%, 60%, 100% { transform: translateY(0);    opacity: 0.5; }
    30%           { transform: translateY(-10px); opacity: 1;   }
}

/* --- Loading overlay (transparent by default). ---------------------- */
.galaxy-spinner-overlay,
.galaxy-spinner-overlay .mantine-LoadingOverlay-overlay {
    background-color: transparent !important;
}


/* ===== entity_grid.css ===== */
/* –––––––––––––––––––––––––––––––––––––––––––––––––– 
Entity Grid — ELR entity list
All shared table styling (hover, sort, headers, rows)
lives in table_v3.css. Add entity-specific overrides here only.
–––––––––––––––––––––––––––––––––––––––––––––––––– */


/* ===== entity_id_info.css ===== */
/* Method 1: Direct ActionIcon styling */
.entity-info-btn {
    transition: all 0.2s ease !important;
    transform-origin: center !important;
}

.entity-info-btn:hover {
    color: #24262b !important;
    background-color: transparent !important;
    transform: scale(1.15) translateY(-1px) !important;
    /* box-shadow: 0 4px 12px rgba(0, 0, 0, 0.5), 
                0 0 20px rgba(0, 150, 255, 0.3) !important; */
    z-index: 100 !important;
}

.entity-info-btn:active {
    transform: scale(1.05) translateY(-1px) !important;
    /* box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3) !important; */
}


/* ===== entity_tarc.css ===== */
.toggle-header-text {
    font-size: 11px;
    font-weight: 600;
    color: #3b82f6;
    margin: 0;
    padding: 0;
    line-height: 1;
}

.toggle-button {
    display: flex;
    align-items: center;
    background: transparent;
    border: none;
    cursor: pointer;
}


/* ===== est_2504.css ===== */
/* est_2504 Workhour Estimate — discipline groups & table styling
   Scoped to est_2504; loaded from c_shawgrp/theme (domain theme) */

.wh-scroll-area {
  overflow-y: auto;
}

.wh-scroll-paper,
[data-mantine-color-scheme='dark'] .wh-scroll-paper,
.wh-scroll-paper.mantine-Paper-root {
  border: none !important;
}

.wh-discipline-groups {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

/* Group header — sticky, no border, no background */
.wh-discipline-group-header {
  position: sticky;
  top: 0;
  z-index: 10;
  background: none !important;
  background-color: transparent !important;
  box-shadow: none !important;
  border: none !important;
  margin: 0;
}

.wh-discipline-group-header:hover,
.wh-discipline-group-header:focus {
  background: none !important;
  background-color: transparent !important;
  outline: none;
  border: none !important;
}

.wh-discipline-group,
.wh-discipline-group .mantine-Stack-root,
.wh-discipline-group .mantine-Group-root {
  border: none !important;
  box-shadow: none !important;
}

.wh-discipline-group .wh-discipline-table-wrapper {
  border: 1px solid #2d3238 !important;
}

.wh-discipline-group-header .mantine-Group-root {
  justify-content: flex-start !important;
}

.wh-discipline-table-wrapper {
  border-radius: 8px;
  overflow: hidden;
  border: 1px solid #2d3238;
  padding: 8px 12px 12px;
}

.wh-discipline-table-wrapper .wh-discipline-table {
  margin: 0;
  border-spacing: 0;
  border-collapse: collapse;
}

.wh-discipline-table-wrapper .wh-discipline-table thead tr:first-child th {
  border-top: none;
  padding-top: 6px;
  padding-bottom: 6px;
}

[data-mantine-color-scheme='light'] .wh-discipline-table-wrapper {
  border-color: #dee2e6;
}

.wh-discipline-table .wh-discipline-table-header th {
  position: sticky;
  top: 36px;
  z-index: 9;
  background: #2d3238 !important;
  border-bottom: 1px solid #3d4349;
  color: #9ca3af;
  font-weight: 500;
}

[data-mantine-color-scheme='light'] .wh-discipline-table .wh-discipline-table-header th {
  background: #e9ecef !important;
  border-bottom: 1px solid #dee2e6;
  color: #495057;
}


/* ===== file.css ===== */
.file-icon .iconify {
    color: white;
    opacity: 0.8;
    transition: color 0.2s ease;
}

.file-icon:hover .iconify {
    color: #1c7ed6 !important;
    opacity: 1;
}   

@keyframes slideInLeft {
    0% {
        transform: translateX(-100%);
        opacity: 0;
    }
    100% {
        transform: translateX(0);
        opacity: 1;
    }
}

.file-quickmessage {
    animation: slideInLeft 0.5s ease-out, 
}

.file-quickmessage-fadeout {
    animation: fadeOut 0.5s ease-out 1.0s forwards;
    transition: opacity 1.0s ease-out;
} 


@keyframes fadeOut {
    0% { opacity: 1; }
    100% { opacity: 0; }
}

/* File item hover effects */
.file-item-hover:hover {
    background-color: #3a3a3a !important;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
    transform: translateY(-1px);
}

/* Enhanced hover for action buttons */
.file-item-hover:hover button {
    transition: transform 0.2s ease;
}

/* New Version button hover effect */
.new-version-btn-hover:hover {
    background-color: #234152 !important;
    border-color: #0a69b5 !important;
}


.filestack-download-btn-hover:hover {
    background-color: #032643 !important;
}


/* ===== grid.css ===== */
/* –––––––––––––––––––––––––––––––––––––––––––––––––– 
Default Grid Theme
–––––––––––––––––––––––––––––––––––––––––––––––––– */

[data-mantine-color-scheme='dark'] .ag-theme-quartz-dark {
    --ag-background-color: #24262B;
    --ag-foreground-color: #F5F5F5;
    --ag-border-color: #24262B;
    --ag-secondary-border-color: color-mix(in srgb, transparent, var(--ag-foreground-color) 10%);
    --ag-header-background-color: #31333a;
    --ag-tooltip-background-color: color-mix(in srgb, #fff, #182230 96%);
    --ag-control-panel-background-color: color-mix(in srgb, #fff, #182230 93%);
    --ag-input-disabled-background-color: #68686e12;
    --ag-card-shadow: 0 1px 20px 1px black;
    --ag-input-border-color: var(--ag-border-color);
    --ag-input-disabled-border-color: rgba(255, 255, 255, 0.07);
    --ag-checkbox-unchecked-color: color-mix(in srgb, var(--ag-background-color), var(--ag-foreground-color) 40%);
    --ag-row-hover-color: rgba(45, 55, 72, .5);
    --ag-selected-row-background-color: var(--ag-row-hover-color);
    --ag-popup-shadow: 0 1px 6px rgba(0, 0, 0, 0.5);
    --ag-font-family: 'Inter', sans-serif;
    color-scheme: dark;
}   

/* Adjust compactness */
[data-mantine-color-scheme='dark'] .ag-theme-quartz-dark {
    --ag-grid-size: 5px;
    --ag-font-size: 11.5px;
    --ag-row-height: calc(var(--ag-font-size) + var(--ag-grid-size) * 7);
    --ag-list-item-height: 20px; 
    --ag-icon-size: 13px;
    --ag-widget-container-vertical-padding: calc(var(--ag-grid-size) * 2.5);
    --ag-widget-container-horizontal-padding: calc(var(--ag-grid-size) * 2.5);
    color-scheme: dark;
}   

/* User selections */
[data-mantine-color-scheme='dark'] .ag-theme-quartz-dark {
    --ag-selected-row-background-color: #1E60B1;
    /* --ag-borders-input */
    --ag-input-focus-box-shadow: none;
    /* --ag-input-focus-border-color */
    color-scheme: dark;
}   

/* Style Header on Filter */
[data-mantine-color-scheme='dark'] .ag-theme-quartz-dark .ag-header-cell.ag-header-cell-filtered {
    background-color: rgba(100, 150, 255, 0.07);
}
[data-mantine-color-scheme='dark'] .ag-theme-quartz-dark .ag-header-cell.ag-header-cell-filtered:hover {
    background-color: rgba(100, 150, 255, 0.07) !important;
}
[data-mantine-color-scheme='dark'] .ag-theme-quartz-dark .ag-header-cell-filtered .ag-icon-filter {
    color: #64aaff;
}
[data-mantine-color-scheme='dark'] #this_is_a_test_reset_filter_button.filter-active-button {
    background-color:#173e6e;
}


/* Dropdown border */
/* .ag-picker-field-wrapper {
    border-radius: 0px;
} */

/* 
.ag-ltr .ag-cell-focus:not(.ag-cell-range-selected):focus-within {
    border-color: red;
}

.ag-picker-field-wrapper.ag-picker-has-focus, .ag-picker-field-wrapper:focus-within {
    border-color: red;
} */ 


/* –––––––––––––––––––––––––––––––––––––––––––––––––– 
Default Light Theme
–––––––––––––––––––––––––––––––––––––––––––––––––– */

/* [data-mantine-color-scheme='light'] .ag-theme-quartz-dark {
    --ag-border-color: #FFFFFF;
    --ag-background-color: #FFFFFF;
    --ag-header-background-color: #FFFFFF;
}    */


/* –––––––––––––––––––––––––––––––––––––––––––––––––– 
Cell Styling
–––––––––––––––––––––––––––––––––––––––––––––––––– */
.grid-cell-red {
    border: 2px solid rgba(255, 0, 0, 0.6);
    border-radius: 4px;
    box-sizing: border-box; /* ensures the border doesn't collapse cell size */
  }


/* ===== grid_buttons.css ===== */
[data-mantine-color-scheme='dark'] .grid_subtle_button {
    background-color: transparent;
    color: #F5F5F5;
}   
[data-mantine-color-scheme='dark'] .grid_subtle_button:hover {
    background-color: #2C3E56;
    color: #F5F5F5;
}  







/* delete below */


[data-mantine-color-scheme='dark'] .grid_button_clear_filter {
    position: relative;
    color: rgba(255, 255, 255, 0.85);
    background-color: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 6px;
    padding: 6px 12px 6px 28px;
    font-size: 11px;
    font-weight: 700;
    text-align: center;
    text-decoration: none;
    line-height: 1rem;
    letter-spacing: 0.02em;
    font-style: normal;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 0.6rem;
    backdrop-filter: blur(4px);
    transition: all 0.2s ease;
}

[data-mantine-color-scheme='dark'] .grid_button_clear_filter::before {
    content: '🧪';  /* Unicode Siphon / Beaker icon */
    position: absolute;
    left: 8px;
    font-size: 14px;
    line-height: 1;
}

[data-mantine-color-scheme='dark'] .grid_button_clear_filter:hover {
    background-color: rgba(255, 255, 255, 0.1);
    border-color: rgba(255, 255, 255, 0.2);
    cursor: pointer;
}


/* ===== grid_entity_files.css ===== */
[data-mantine-color-scheme='dark'] .entity1e_doclst .ag-theme-quartz-dark {
    --ag-border-color: #24262B;
    --ag-background-color: #24262B;
    --ag-header-background-color: #24262B;
}   

[data-mantine-color-scheme='light'] .entity1e_doclst .ag-theme-quartz-dark {
    --ag-border-color: #FFFFFF;
    --ag-background-color: #FFFFFF;
    --ag-header-background-color: #FFFFFF;
}   

/* Remove pagination */
.entity1e_doclst .ag-paging-panel {
    display: none;
}


/* ===== home.css ===== */
/* –––––––––––––––––––––––––––––––––––––––––––––––––– 
Home Page 
–––––––––––––––––––––––––––––––––––––––––––––––––– */

.hover-gradient-card {
    background: radial-gradient(circle at center, #8e44ad, #2980b9);
    transition: background-position 0.1s ease;
    background-size: 200% 200%;
    background-repeat: no-repeat;
    cursor: pointer !important;
}
  
.hover-gradient-card:hover {
    background-image: radial-gradient(circle at var(--x, 50%) var(--y, 50%), #8e44ad, #2980b9);
    cursor: pointer !important;
}
  
.hover-gradient-card:hover::before {
    content: "";
    position: absolute;
}


/* image hover */
.hover-image-gradient-card {
    position: relative;
    overflow: hidden;
  }
  
.hover-image-gradient-card::before {
    content: "";
    position: absolute;
    inset: 0;
    background: radial-gradient(
      circle at var(--x, 50%) var(--y, 50%),
      rgba(52, 152, 219, 0.15),  /* softer blue */
      rgba(241, 196, 15, 0.1)    /* softer yellow */
    );
    opacity: 0;
    transition: opacity 0.2s ease, background-position 0.1s ease;
    pointer-events: none;
    z-index: 0;
}
  
.hover-image-gradient-card:hover::before {
    opacity: 1;
}

.hover-image-gradient-card > * {
    position: relative;
    z-index: 1;
}


.home_alerts_div {
    border-radius: 6px;
    padding: 14px;
}

/* –––––––––––––––––––––––––––––––––––––––––––––––––– 
Inbox header & row spacing (Step 3)
–––––––––––––––––––––––––––––––––––––––––––––––––– */
.home-inbox-section-hd {
    margin-bottom: 4px;
}

.home-inbox-section-title {
    font-size: 11px;
    font-family: monospace;
    font-weight: 600;
    letter-spacing: 0.14em;
    text-transform: uppercase;
}

.home_alerts_div .dmc_alert_home {
    margin-bottom: 6px !important;
    border-radius: 6px;
}

.home-inbox-empty {
    padding: 28px 12px;
    text-align: center;
    font-size: 12px;
    color: #3a5a7a;
    font-style: italic;
}


.home_blurred {
    filter: blur(8px);
    transition: filter 0.3s ease;
}

/* –––––––––––––––––––––––––––––––––––––––––––––––––– 
Greeting (Step 1)
–––––––––––––––––––––––––––––––––––––––––––––––––– */
.greeting-eyebrow {
    font-size: 10px;
    font-family: monospace;
    letter-spacing: 0.15em;
    text-transform: uppercase;
    margin-bottom: 4px;
    min-height: 14px;
}

.greeting-title {
    font-size: 22px;
    font-weight: 600;
    letter-spacing: 0.01em;
    margin-bottom: 2px;
}

.greeting-sub {
    font-size: 13px;
    line-height: 1.5;
}

/* –––––––––––––––––––––––––––––––––––––––––––––––––– 
Quick Access (Step 2)
–––––––––––––––––––––––––––––––––––––––––––––––––– */
.home-qa-section-hd {
    margin-bottom: 4px;
}

.home-qa-section-title {
    font-size: 11px;
    font-family: monospace;
    font-weight: 600;
    letter-spacing: 0.14em;
    text-transform: uppercase;
}

.home-qa-link {
    text-decoration: none;
    color: inherit;
    display: block;
}

.home-qa-item {
    border-radius: 5px;
    padding: 12px 12px 10px;
    cursor: pointer;
    display: flex;
    flex-direction: column;
    gap: 8px;
    position: relative;
    overflow: hidden;
    transition: border-color 0.15s, background 0.15s;
}

.home-qa-icon {
    width: 28px;
    height: 28px;
    border-radius: 4px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.home-qa-label {
    font-size: 13px;
    line-height: 1.3;
    font-weight: 500;
    transition: color 0.15s;
}

/* –––––––––––––––––––––––––––––––––––––––––––––––––– 
Dark Mode
–––––––––––––––––––––––––––––––––––––––––––––––––– */
[data-mantine-color-scheme='dark'] .home_alerts_div {
    border: 0.5px solid #1e3048;
    background: #161719;
}

[data-mantine-color-scheme='dark'] .home-inbox-section-title {
    color: #5a7a9a;
}

[data-mantine-color-scheme='dark'] .greeting-eyebrow {
    color: #4a6a8a;
}

[data-mantine-color-scheme='dark'] .greeting-title {
    color: #e8f0f8;
}

[data-mantine-color-scheme='dark'] .greeting-sub {
    color: #5a7a9a;
}

[data-mantine-color-scheme='dark'] .home-qa-section-title {
    color: #5a7a9a;
}

[data-mantine-color-scheme='dark'] .home-qa-item {
    background: #161719;
    border: 0.5px solid #1e3048;
}

[data-mantine-color-scheme='dark'] .home-qa-item:hover {
    background: #1a2438;
    border-color: #2e5f9a;
}

[data-mantine-color-scheme='dark'] .home-qa-icon {
    background: #1e2a3a;
    color: #3a5a7a;
}

[data-mantine-color-scheme='dark'] .home-qa-item:hover .home-qa-icon {
    color: #6eb3f7;
}

[data-mantine-color-scheme='dark'] .home-qa-label {
    color: #6a8aaa;
}

[data-mantine-color-scheme='dark'] .home-qa-item:hover .home-qa-label {
    color: #c8d8e8;
}


/* –––––––––––––––––––––––––––––––––––––––––––––––––– 
Light Mode
–––––––––––––––––––––––––––––––––––––––––––––––––– */

[data-mantine-color-scheme='light'] .home_alerts_div {
    border: 1px solid rgb(222, 226, 230);
    background: #ffffff;
}

[data-mantine-color-scheme='light'] .home-inbox-section-title {
    color: #6b7280;
}

[data-mantine-color-scheme='light'] .greeting-eyebrow {
    color: #6b7280;
}

[data-mantine-color-scheme='light'] .greeting-title {
    color: #1a1a2e;
}

[data-mantine-color-scheme='light'] .greeting-sub {
    color: #6b7280;
}

[data-mantine-color-scheme='light'] .home-qa-section-title {
    color: #6b7280;
}

[data-mantine-color-scheme='light'] .home-qa-item {
    background: #ffffff;
    border: 1px solid rgb(222, 226, 230);
}

[data-mantine-color-scheme='light'] .home-qa-item:hover {
    background: #f5f8fc;
    border-color: #b9d4ee;
}

[data-mantine-color-scheme='light'] .home-qa-icon {
    background: #f0f4f9;
    color: #6b7280;
}

[data-mantine-color-scheme='light'] .home-qa-item:hover .home-qa-icon {
    color: #2563eb;
}

[data-mantine-color-scheme='light'] .home-qa-label {
    color: #4b5563;
}

[data-mantine-color-scheme='light'] .home-qa-item:hover .home-qa-label {
    color: #1a1a2e;
}


/* ===== icon_button.css ===== */
.stash_icon_button_green:hover {
    background-color: rgba(10, 109, 18, 0.7) !important;
}
.stash_icon_button_orange:hover {
    background-color: rgba(238, 156, 4, 0.3) !important;
}
.stash_icon_button_blue:hover {
    background-color: rgba(43, 99, 154, 0.4) !important;
}
.stash_icon_button_light_blue:hover {
    background-color: rgba(73, 204, 248, 0.4) !important;
}
.stash_icon_button_red:hover {
    background-color: rgba(139, 19, 19, 0.7) !important;
}
.stash_icon_button_sand:hover {
    background-color: rgba(244, 164, 96, 0.7) !important;
}
.stash_icon_button_yellow:hover {
    background-color: rgba(227, 227, 25, 0.7) !important;
}
.stash_icon_button_lime:hover {
    background-color: rgba(78, 112, 41, 0.7) !important;
}
.stash_icon_button_gray:hover {
    background-color: rgba(107, 114, 128, 0.7) !important;
}
.stash_icon_button_teal:hover {
    background-color: rgba(8, 213, 182, 0.7) !important;
}
.stash_icon_button_purple:hover {
    background-color: rgba(213, 135, 213, 0.7) !important;
}


/* ===== knowledge_hub.css ===== */

/* Typewriter animations –––––––––––––––––––––––––––––––––––––––––––––––––– */
@keyframes typewriter-1 {
    0% {
        width: 0;
    }
    100% {
        width: 35ch;  /* Adjust for actual character count */
    }
}
@keyframes typewriter-2 {
    0% {
        width: 0;
    }
    100% {
        width: 42ch;  /* Adjust for actual character count */
    }
}
@keyframes typewriter-3 {
    0% {
        width: 0;
    }
    100% {
        width: 45ch;  /* Adjust for actual character count */
    }
}

/* Text Follow animations –––––––––––––––––––––––––––––––––––––––––––––––––– */
@keyframes followText {
    0% {
        opacity: 0;
    }
    5% {
        opacity: 1;
    }
    100% {
        opacity: 1;
    }
}

/* Cursor Blink and Fade animations –––––––––––––––––––––––––––––––––––––––––––––––––– */

@keyframes cursor-blink {
    0%, 50% { opacity: 1; }
    51%, 100% { opacity: 0.3; }
}

@keyframes fade-in {
    0% { opacity: 0; }
    100% { opacity: 1; }
}

@keyframes fade-out {
    0% { opacity: 1; }
    100% { opacity: 0; }
}


/* Infinite Loop  –––––––––––––––––––––––––––––––––––––––––––––––––– */
.typewriter-container {
    animation: restart-cycle 18s infinite; /* Infinite Loop Container */
}
@keyframes restart-cycle {
    0%, 100% { opacity: 1; }
}

/* Animation Sequence #1 –––––––––––––––––––––––––––––––––––––––––––––––––– */
.typewriter-text.animate-1 {
    animation: 
        fade-in 0.1s ease-in forwards,
        typewriter-1 3s steps(48, end) 0.1s forwards;
}
.typewriter-cursor.animate-1 {
    animation: 
        fade-in 0.1s ease-in forwards,
        followText 3s steps(48, end) 0.1s forwards,
        cursor-blink 0.8s infinite 3.1s;
}
.typewriter-text.animate-1.fade-out {
    animation: 
        fade-in 0.1s ease-in forwards,
        typewriter-1 3s steps(48, end) 0.1s forwards,
        fade-out 0.5s ease-out 5s forwards;
}
.typewriter-cursor.animate-1.fade-out {
    animation: 
        fade-in 0.1s ease-in forwards,
        followText 3s steps(48, end) 0.1s forwards,
        cursor-blink 0.8s infinite 3.1s,
        fade-out 0.5s ease-out 5s forwards;
}

/* Animation Sequence #2 –––––––––––––––––––––––––––––––––––––––––––––––––– */

.typewriter-text.animate-2 {
    animation: 
        fade-in 0.1s ease-in 6s forwards,
        typewriter-2 3s steps(52, end) 6.1s forwards;
}
.typewriter-cursor.animate-2 {
    animation: 
        fade-in 0.1s ease-in 6s forwards,
        followText 3s steps(52, end) 6.1s forwards,
        cursor-blink 0.8s infinite 9.1s;
}
.typewriter-text.animate-2.fade-out {
    animation: 
        fade-in 0.1s ease-in 6s forwards,
        typewriter-2 3s steps(52, end) 6.1s forwards,
        fade-out 0.5s ease-out 11s forwards;
}
.typewriter-cursor.animate-2.fade-out {
    animation: 
        fade-in 0.1s ease-in 6s forwards,
        followText 3s steps(52, end) 6.1s forwards,
        cursor-blink 0.8s infinite 9.1s,
        fade-out 0.5s ease-out 11s forwards;
}


/* Animation Sequence #3 –––––––––––––––––––––––––––––––––––––––––––––––––– */
.typewriter-text.animate-3 {
    animation: 
        fade-in 0.1s ease-in 12s forwards,
        typewriter-3 3s steps(45, end) 12.1s forwards;
}
.typewriter-cursor.animate-3 {
    animation: 
        fade-in 0.1s ease-in 12s forwards,
        followText 3s steps(45, end) 12.1s forwards,
        cursor-blink 0.8s infinite 15.1s;
}
.typewriter-text.animate-3.fade-out {
    animation: 
        fade-in 0.1s ease-in 12s forwards,
        typewriter-3 3s steps(45, end) 12.1s forwards,
        fade-out 0.5s ease-out 17s forwards;
}
.typewriter-cursor.animate-3.fade-out {
    animation: 
        fade-in 0.1s ease-in 12s forwards,
        followText 3s steps(45, end) 12.1s forwards,
        cursor-blink 0.8s infinite 15.1s,
        fade-out 0.5s ease-out 17s forwards;
}

/* Base Styles  –––––––––––––––––––––––––––––––––––––––––––––––––– */
.prompt-header {
    background: linear-gradient(45deg, rgb(25, 113, 194) 0%, purple 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    font-weight: 900;
    font-size: 30px;
    margin-bottom: 0px;
}
.typewriter-container {
    display: flex;
    align-items: center;
    gap: 0px; 
}
.typewriter-text {
    color: #9f7aea;
    font-family: system-ui, -apple-system, sans-serif;
    display: inline-block;
    overflow: hidden; /* Hides text that hasn't been "typed" yet */
    white-space: nowrap;
    font-size: 20px;
    border-right: 0px solid transparent;
    width: 0;
    /* position: absolute;  
    top: 170px;   */
}
.typewriter-cursor {
    opacity: 0; /* Hide by default */
} 


/* ===== launch_screen.css ===== */
.loading-container {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100vh;
    background: #1A1B1E;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    /* Above .app_container (no z-index) and #stash_rotate_overlay (99999) when shown */
    z-index: 100000;
    perspective: 1200px;
    padding-bottom: 180px;
}

/* The auth callback sets inline `display: block` to show the launch screen.
   Force flex layout (for proper centering) whenever it's not display:none. */
#stash_div_launch_screen[style*="display: block"],
#stash_div_launch_screen[style*="display: flex"] {
    display: flex !important;
}

.crane-container {
    position: relative;
    width: 240px;
    height: 240px;
    margin: 60px auto 36px auto;
    transform-style: preserve-3d;
    animation: container-rotate 8s linear infinite;
    display: flex;
    justify-content: center;
    align-items: center;
}

.crane-3d {
    position: absolute;
    top: 50%;
    left: 50%;
    transform-style: preserve-3d;
    transform: translate(-50%, -50%);
    animation: crane-float 4s ease-in-out infinite;
}

.crane-body {
    position: relative;
    width: 72px;
    height: 72px;
    transform-style: preserve-3d;
}

.body-front {
    position: absolute;
    width: 0;
    height: 0;
    border-left: 36px solid transparent;
    border-right: 36px solid transparent;
    border-bottom: 60px solid #1C7ED6;
    transform: translateZ(18px);
    filter: brightness(1.1);
}

.body-back {
    position: absolute;
    width: 0;
    height: 0;
    border-left: 36px solid transparent;
    border-right: 36px solid transparent;
    border-bottom: 60px solid #6c3483;
    transform: translateZ(-18px) rotateY(180deg);
    filter: brightness(0.8);
}

.body-left {
    position: absolute;
    width: 0;
    height: 0;
    border-top: 30px solid transparent;
    border-bottom: 30px solid transparent;
    border-right: 36px solid #1C7ED6;
    transform: rotateY(-90deg) translateZ(18px);
    filter: brightness(0.9);
}

.body-right {
    position: absolute;
    width: 0;
    height: 0;
    border-top: 30px solid transparent;
    border-bottom: 30px solid transparent;
    border-left: 36px solid #7d3c98;
    transform: rotateY(90deg) translateZ(18px);
    filter: brightness(0.9);
}

.wing-left {
    position: absolute;
    top: 12px;
    left: -48px;
    transform-style: preserve-3d;
    animation: wing-flap-left 3s ease-in-out infinite;
}

.wing-left-top {
    width: 0;
    height: 0;
    border-top: 30px solid #2980b9;
    border-right: 42px solid transparent;
    transform: translateZ(10px);
    filter: brightness(1.1);
}

.wing-left-bottom {
    width: 0;
    height: 0;
    border-top: 30px solid #1f4e79;
    border-right: 42px solid transparent;
    transform: translateZ(-10px);
    filter: brightness(0.8);
}

.wing-right {
    position: absolute;
    top: 12px;
    right: -48px;
    transform-style: preserve-3d;
    animation: wing-flap-right 3s ease-in-out infinite;
}

.wing-right-top {
    width: 0;
    height: 0;
    border-top: 30px solid #2980b9;
    border-left: 42px solid transparent;
    transform: translateZ(10px);
    filter: brightness(1.1);
}

.wing-right-bottom {
    width: 0;
    height: 0;
    border-top: 30px solid #1f4e79;
    border-left: 42px solid transparent;
    transform: translateZ(-10px);
    filter: brightness(0.8);
}

.crane-neck {
    position: absolute;
    top: -30px;
    left: 24px;
    width: 7px;
    height: 36px;
    background: linear-gradient(45deg, #8e44ad, #6c3483);
    transform: rotateZ(-25deg) rotateX(15deg);
    border-radius: 3.5px;
    transform-style: preserve-3d;
}

.crane-head {
    position: absolute;
    top: -10px;
    left: -2.5px;
    width: 12px;
    height: 14px;
    background: linear-gradient(45deg, #8e44ad, #6c3483);
    border-radius: 60% 40% 40% 60%;
    transform: rotateX(10deg);
}

.crane-beak {
    position: absolute;
    top: 2.5px;
    left: 10px;
    width: 0;
    height: 0;
    border-top: 4px solid transparent;
    border-bottom: 4px solid transparent;
    border-left: 10px solid #339af0;
}

.crane-tail {
    position: absolute;
    bottom: -30px;
    left: 30px;
    width: 0;
    height: 0;
    border-left: 12px solid transparent;
    border-right: 12px solid transparent;
    border-top: 24px solid #6c3483;
    transform: rotateZ(10deg) rotateX(-15deg);
    filter: brightness(0.9);
}

.fold-line {
    position: absolute;
    background: rgba(255,255,255,0.1);
    z-index: 10;
}

.fold-line-1 {
    top: 30px;
    left: 36px;
    width: 1px;
    height: 36px;
    transform: rotateZ(45deg);
}

.fold-line-2 {
    top: 30px;
    right: 36px;
    width: 1px;
    height: 36px;
    transform: rotateZ(-45deg);
}

@keyframes container-rotate {
    0% { transform: rotateY(0deg) rotateX(10deg); }
    25% { transform: rotateY(90deg) rotateX(15deg); }
    50% { transform: rotateY(180deg) rotateX(10deg); }
    75% { transform: rotateY(270deg) rotateX(5deg); }
    100% { transform: rotateY(360deg) rotateX(10deg); }
}

@keyframes crane-float {
    0%, 100% { 
        transform: translate(-50%, -50%) translateY(0px) rotateX(0deg) rotateZ(0deg);
    }
    25% { 
        transform: translate(-50%, -50%) translateY(-15px) rotateX(5deg) rotateZ(2deg);
    }
    50% { 
        transform: translate(-50%, -50%) translateY(-8px) rotateX(-2deg) rotateZ(0deg);
    }
    75% { 
        transform: translate(-50%, -50%) translateY(-20px) rotateX(3deg) rotateZ(-2deg);
    }
}

@keyframes wing-flap-left {
    0%, 100% { transform: rotateY(0deg) rotateZ(0deg); }
    50% { transform: rotateY(-15deg) rotateZ(-10deg); }
}

@keyframes wing-flap-right {
    0%, 100% { transform: rotateY(0deg) rotateZ(0deg); }
    50% { transform: rotateY(15deg) rotateZ(10deg); }
}

.paper-bits {
    position: absolute;
    width: 100%;
    height: 100%;
    pointer-events: none;
}

.paper-bit {
    position: absolute;
    width: 7px;
    height: 7px;
    transform-style: preserve-3d;
    animation: paper-float 5s linear infinite;
}

.paper-square {
    width: 7px;
    height: 7px;
    background: #339af0;
    transform: translateZ(0px);
}

.paper-square-back {
    position: absolute;
    top: 0;
    left: 0;
    width: 7px;
    height: 7px;
    background: #2980b9;
    transform: translateZ(-2.5px);
}

.paper-bit:nth-child(1) { left: 15%; animation-delay: -1s; }
.paper-bit:nth-child(1) .paper-square { background: #339af0; }
.paper-bit:nth-child(1) .paper-square-back { background: #2980b9; }

.paper-bit:nth-child(2) { left: 35%; animation-delay: -2.5s; }
.paper-bit:nth-child(2) .paper-square { background: #8e44ad; }
.paper-bit:nth-child(2) .paper-square-back { background: #6c3483; }

.paper-bit:nth-child(3) { left: 55%; animation-delay: -4s; }
.paper-bit:nth-child(3) .paper-square { background: #2980b9; }
.paper-bit:nth-child(3) .paper-square-back { background: #1f4e79; }

.paper-bit:nth-child(4) { left: 75%; animation-delay: -0.8s; }
.paper-bit:nth-child(4) .paper-square { background: #339af0; }
.paper-bit:nth-child(4) .paper-square-back { background: #2980b9; }

@keyframes paper-float {
    0% {
        transform: translateY(180px) rotateX(0deg) rotateY(0deg) rotateZ(0deg);
        opacity: 0;
    }
    10% {
        opacity: 1;
    }
    90% {
        opacity: 1;
    }
    100% {
        transform: translateY(-60px) rotateX(720deg) rotateY(360deg) rotateZ(180deg);
        opacity: 0;
    }
}

.loading-text {
    color: #ffffff;
    font-size: 29px;
    font-weight: 300;
    margin-bottom: 24px;
    animation: text-pulse 2s ease-in-out infinite;
    text-align: center;
}

.dots::after {
    content: '';
    animation: dots 1.5s steps(4, end) infinite;
}

@keyframes dots {
    0%, 20% { content: ''; }
    40% { content: '.'; }
    60% { content: '..'; }
    80%, 100% { content: '...'; }
}

@keyframes text-pulse {
    0%, 100% { opacity: 1; transform: translateY(0px); }
    50% { opacity: 0.7; transform: translateY(-2px); }
}

.progress-bar {
    width: 240px;
    height: 5px;
    background: rgba(255, 255, 255, 0.1);
    border-radius: 2.5px;
    overflow: hidden;
    margin: 24px auto 0 auto;
}

.progress-fill {
    height: 100%;
    background: linear-gradient(90deg, #2980b9, #8e44ad, #339af0);
    background-size: 200% 100%;
    animation: progress-fill 4s ease-in-out infinite, gradient-shift 2s ease-in-out infinite;
    border-radius: 2.5px;
}

@keyframes progress-fill {
    0% { width: 0%; }
    50% { width: 70%; }
    100% { width: 100%; }
}

@keyframes gradient-shift {
    0%, 100% { background-position: 0% 50%; }
    50% { background-position: 100% 50%; }
}

.zen-text {
    color: rgba(255, 255, 255, 0.7);
    font-size: 17px;
    font-style: italic;
    margin-top: 18px;
    opacity: 0.8;
    text-align: center;
}


/* ===== loading_overlay.css ===== */
/* –––––––––––––––––––––––––––––––––––––––––––––––––– 
Loading Overlay
–––––––––––––––––––––––––––––––––––––––––––––––––– */


/* –––––––––––––––––––––––––––––––––––––––––––––––––– 
Dark Mode
–––––––––––––––––––––––––––––––––––––––––––––––––– */





/* –––––––––––––––––––––––––––––––––––––––––––––––––– 
Light Mode
–––––––––––––––––––––––––––––––––––––––––––––––––– */



/* ===== main_div.css ===== */
/* –––––––––––––––––––––––––––––––––––––––––––––––––– 
Main shell layout: app_container = column flex (topbar + shell_body),
shell_body = row flex (rail + P2 + P3 + P4 + div_main).
–––––––––––––––––––––––––––––––––––––––––––––––––– */

.app_container {
    display: flex;
    flex-direction: column;
    /* Pin to viewport so Dash's siblings (e.g. _dash-global-error-container) cannot push the shell below the fold */
    position: fixed;
    inset: 0;
    overflow: hidden;
    background: var(--shell-bg);
}

.shell_body {
    display: flex;
    flex: 1;
    min-height: 0;
    overflow: hidden;
}

.div_main {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    background-color: var(--main-div-background-color);
    /* Reserve room for the fixed AI Insights rail on the right edge so page
       content doesn't slide beneath it, plus a small visible gap between
       page content and the rail. */
    padding-right: calc(var(--ai-rail-w, 20px) + var(--ai-rail-gap, 5px));
    /* div_main itself no longer scrolls; scrolling lives on .div_main_scroll so
       that .main-loader (absolute) can overlay the visible viewport without
       scrolling with the content. */
    overflow: hidden;
    position: relative;
}

.div_main_scroll {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    padding: 1rem;
    overflow: auto;
}

.entity1 {
    width: 100%;
    overflow: visible;
    padding-bottom: 100px;
}

/* taf2 (P4-region) sits as a sibling of entity1 inside .div_main_scroll. The
   Dash `hidden` prop renders the HTML hidden attribute (display: none) so we
   only need layout parity here — no visibility rules. taf2 is shown only on
   /m/s/taf/* routes (driven server-side by core_output_helper.entity_taf). */
.taf2 {
    width: 100%;
    overflow: visible;
    padding-bottom: 100px;
}

/* Entity1 flat sections. Only the section matching .entity1.section-<key> is visible;
the active section is driven by URL + P3 tab click (see shell/panels.py, shell/tabs.py). */
.e1-section { width: 100%; display: none; }
.entity1.section-entity  .e1-entity         { display: block; }
.entity1.section-actions .e1-action-content { display: block; }
.entity1.section-reports .e1-report-content { display: block; }
.entity1.section-library .e1-library        { display: block; }

/* –––––––––––––––––––––––––––––––––––––––––––––––––– 
Entity / TARC content area styles (unchanged from old shell)
–––––––––––––––––––––––––––––––––––––––––––––––––– */

.div_entity_container {
    width: 100%;
    height: 100%;
    padding: 12px;
    box-sizing: border-box;
    background: rgba(18, 24, 31, 0.85);
    backdrop-filter: blur(8px);
    border: 1px solid rgba(51, 154, 240, 0.2);
    border-radius: 8px;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.div_a_container .mantine-Accordion-chevron {
    display: none;
}

.div_entity {
    flex: 1;
    width: 100%;
    border-bottom: none !important;
    padding-bottom: 0 !important;
    margin-bottom: 0 !important;
}

.div_tarc {
    flex: 1;
    width: 100%;
    overflow: visible;
    background: rgba(18, 24, 31, 0.85);
    backdrop-filter: blur(8px);
    border: 1px solid rgba(51, 154, 240, 0.2);
    border-radius: 8px;
    padding: 12px;
    box-sizing: border-box;
}

.stash_div_entity_acc_control {
    padding-bottom: 4px !important;
    border-bottom: none !important;
}

.div_entity_accordion_item {
    border-bottom: none !important;
    margin-bottom: 0 !important;
    padding-bottom: 0 !important;
}


/* ===== main_loader.css ===== */

.loader-bar {
    position: fixed;
    top: var(--topbar-h);
    left: 0;
    height: 4px;
    width: 0%;
    background: linear-gradient(to right, #2f333f, #339af0 15%);
    /* Sits in the base shell layer — drawers, modals, popovers, and side
       panels (Mantine uses z-index 200+) should always overlay it. */
    z-index: 30;
    opacity: 1;
    transition: none;
}


.loader-bar.animating {
    animation: growBar 3s ease forwards;
}

@keyframes growBar {
    0%   { width: 0%;  }
    25%  { width: 30%; }
    50%  { width: 60%; }
    75%  { width: 85%; }
    95%  { width: 95%; }
    100% { width: 100%; }
}


/* –––––––––––––––––––––––––––––––––––––––––––––––––– 
Main content area overlay loader — shown on URL change while the server-side
route callback is running; hidden once entity1/static0 children update.
Anchored to .div_main (which has position: relative assigned in main_div.css).
–––––––––––––––––––––––––––––––––––––––––––––––––– */

.main-loader {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(14, 20, 32, 0.55);
    backdrop-filter: blur(1.5px);
    opacity: 0;
    pointer-events: none;
    transition: opacity .15s ease;
    z-index: 40;
}

.main-loader.active {
    opacity: 1;
    pointer-events: auto;
}

.ml-spinner {
    width: 28px;
    height: 28px;
    border: 2.5px solid rgba(110, 179, 247, 0.18);
    border-top-color: var(--accent-blue);
    border-radius: 50%;
    animation: ml-spin 0.8s linear infinite;
}

@keyframes ml-spin {
    to { transform: rotate(360deg); }
}


/* ===== mention.css ===== */
.mention-dropdown {
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
}

.mention-option {
    transition: background-color 0.1s ease;
}

.mention-option:hover {
    background-color: #007bff !important;
    color: white !important;
}
.mention-option.selected {
    background-color: #007bff !important;
    color: white !important;
}

/* Style for mentions in text */
.mention {
    color: #1976d2;
    padding: 2px 4px;
    border-radius: 3px;
    font-weight: 500;
}


/* ===== menu.css ===== */
/* –––––––––––––––––––––––––––––––––––––––––––––––––– 
Menu
–––––––––––––––––––––––––––––––––––––––––––––––––– */

.mantine-Menu-itemLabel {
    font-size: 11px !important;
}
.mantine-Menu-itemLabel:hover {
    font-size: 11px !important;
}


/* –––––––––––––––––––––––––––––––––––––––––––––––––– 
Dark Mode
–––––––––––––––––––––––––––––––––––––––––––––––––– */

[data-mantine-color-scheme='dark'] .mantine-Menu-dropdown {
    background: linear-gradient(160deg, #1A1D21, #20232A, #1C1F25);
    border: 1px solid #3a3d44;    
}

[data-mantine-color-scheme='dark'] .mantine-Menu-item {
    color: #FFFFFF;
}

[data-mantine-color-scheme='dark'] .mantine-Menu-item:hover {
    color: white;
    background-color:rgba(94, 120, 164, 0.7);
}


[data-mantine-color-scheme='dark'] .mantine-Menu-divider {
    border-top: 1px solid #3a3d44;
}


/* –––––––––––––––––––––––––––––––––––––––––––––––––– 
Sidebar Menu
–––––––––––––––––––––––––––––––––––––––––––––––––– */

[data-mantine-color-scheme='light'] .mantine-Menu-dropdown {
    background: #F8F9FA; 
    border: 1px solid #E8EAEE;  
}

[data-mantine-color-scheme='light'] .mantine-Menu-item {
    color: #5F6B7C;
}

[data-mantine-color-scheme='light'] .mantine-Menu-item:hover {
    color: #5F6B7C;
    background-color:#E8EAEE;
} 


/* ===== p4_approvals.css ===== */
/* P4 Approvals — KPI strip + workflow step list with inline action bar
   for the active approver. Tokens from shell_tokens.css; approvals-
   specific color vars declared here. Mirrors p4_audit.css structure. */


/* ── Dark scheme ────────────────────────────────────────────────────────── */

[data-mantine-color-scheme='dark'] {
    --appr-blue:           #58a6ff;
    --appr-green:          #3fb950;
    --appr-red:            #f85149;
    --appr-yellow:         #d29922;
    --appr-mut:            #6e7681;
    --appr-text-pri:       #e6edf3;
    --appr-text-sec:       #8b949e;
    --appr-bg-yourturn:    rgba(88, 166, 255, 0.04);
    --appr-bg-hover:       rgba(255, 255, 255, 0.04);
    --appr-bg-input:       #0d1117;
    --appr-border-step:    rgba(42, 53, 69, 0.45);
}


/* ── Light scheme ───────────────────────────────────────────────────────── */

[data-mantine-color-scheme='light'] {
    --appr-blue:           #0969da;
    --appr-green:          #1a7f37;
    --appr-red:            #cf222e;
    --appr-yellow:         #bf8700;
    --appr-mut:            #6e7781;
    --appr-text-pri:       #1f2328;
    --appr-text-sec:       #57606a;
    --appr-bg-yourturn:    rgba(9, 105, 218, 0.05);
    --appr-bg-hover:       rgba(0, 0, 0, 0.04);
    --appr-bg-input:       #ffffff;
    --appr-border-step:    rgba(208, 215, 222, 0.6);
}


/* ── Section container ──────────────────────────────────────────────────── */

.p4-approvals-sec {
    display: flex;
    flex-direction: column;
    overflow: hidden;
    margin: 0 -6px;
}


/* ── Header row (subtitle + +Approver button) ──────────────────────────── */

.appr-header-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 8px;
}

.appr-add-btn {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    background: var(--accent-soft);
    color: var(--accent-blue);
    border: 1px solid transparent;
    border-radius: 4px;
    padding: 2px 6px 2px 4px;
    font-size: 9px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.4px;
    cursor: pointer;
    transition: background 0.12s, border-color 0.12s;
}

.appr-add-btn:hover {
    background: var(--accent-active);
    border-color: var(--accent-blue);
}


/* ── KPI strip ─────────────────────────────────────────────────────────── */

.appr-kpi-strip {
    display: flex;
    border-top: 1px solid var(--border-subtle);
    border-bottom: 1px solid var(--border-subtle);
    margin-top: 6px;
}

.appr-kpi-cell {
    flex: 1;
    padding: 6px 0 7px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1px;
    border-right: 1px solid var(--border-subtle);
    border-top: 1px solid;
    border-bottom: 1px solid;
}

.appr-kpi-cell:last-child {
    border-right: none;
}

.appr-kpi-val {
    font-size: 16px;
    font-weight: 700;
    line-height: 1.1;
}

.appr-kpi-val--green { color: var(--appr-green); }
.appr-kpi-val--blue  { color: var(--appr-blue); }
.appr-kpi-val--gray  { color: var(--appr-mut); }
.appr-kpi-val--red   { color: var(--appr-red); }

.appr-kpi-lbl {
    font-size: 8.5px;
    text-transform: uppercase;
    letter-spacing: 0.4px;
    color: var(--text-dim);
    font-weight: 500;
}


/* ── Workflow list (scrollable) ────────────────────────────────────────── */

.appr-wf-list {
    flex: 1;
    overflow-y: auto;
    padding: 0;
    scrollbar-width: thin;
    scrollbar-color: var(--border-subtle) transparent;
}

.appr-wf-list::-webkit-scrollbar {
    width: 3px;
}

.appr-wf-list::-webkit-scrollbar-track {
    background: transparent;
}

.appr-wf-list::-webkit-scrollbar-thumb {
    background: var(--border-subtle);
    border-radius: 2px;
}


/* ── Step row ──────────────────────────────────────────────────────────── */

.appr-step {
    border-bottom: 1px solid var(--appr-border-step);
    transition: background 0.12s;
}

.appr-step.your-turn {
    border-bottom: 1px solid var(--appr-blue);
    background: var(--appr-bg-yourturn);
}

.appr-step.your-turn .appr-name {
    color: var(--appr-blue);
}

/* Approved / rejected: same gray bottom edge as pending / en_route */
.appr-step.appr-grp-approved,
.appr-step.appr-grp-rejected {
    border-bottom: 1px solid var(--appr-border-step);
}

/* Expanded terminal rows: hairline under the summary row before detail */
.appr-step.appr-open.appr-grp-approved .appr-control,
.appr-step.appr-open.appr-grp-rejected .appr-control {
    border-bottom: 1px solid var(--appr-border-step);
}

.appr-control {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 10px;
    cursor: pointer;
    transition: background 0.12s;
}

.appr-step:not(.appr-locked) .appr-control:hover {
    background: var(--appr-bg-hover);
}

.appr-step.appr-locked .appr-control {
    cursor: default;
}

.appr-step.appr-open .appr-control {
    background: var(--appr-bg-yourturn);
}


/* ── Status indicator (left side) ──────────────────────────────────────── */

.appr-ind {
    flex-shrink: 0;
    width: 14px;
    height: 14px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.appr-ind--dot {
    width: 14px;
    height: 14px;
    position: relative;
}

.appr-ind--dot::after {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 7px;
    height: 7px;
    border-radius: 50%;
}

.appr-dot--blue::after { background: var(--appr-blue); }
.appr-dot--gray::after { background: var(--appr-mut); }


/* ── Step body (name + status) ─────────────────────────────────────────── */

.appr-body {
    flex: 1;
    min-width: 0;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 6px;
}

.appr-name-col {
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 1px;
}

/* Block wrapper so the name line never shares a text line with .appr-trigger
   (two inline spans would flow horizontally and put the first trigger word
   beside the contact name). */
.appr-name-row {
    display: block;
    min-width: 0;
}

.appr-name {
    font-size: 11px;
    font-weight: 500;
    color: var(--text-strong);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.appr-trigger {
    font-size: 9px;
    color: var(--appr-text-sec);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    line-height: 1.2;
}

.appr-status {
    font-size: 9.5px;
    font-weight: 500;
    white-space: nowrap;
    flex-shrink: 0;
}

.appr-status--approved  { color: var(--appr-green); }
.appr-status--rejected  { color: var(--appr-red); }
.appr-status--requested { color: var(--appr-blue); }
.appr-status--pending,
.appr-status--en_route  {
    color: var(--text-dim);
    font-style: italic;
}


/* ── Expanded detail ───────────────────────────────────────────────────── */

.appr-detail {
    overflow: hidden;
    max-height: 0;
    transition: max-height 0.25s ease;
}

.appr-step.appr-open .appr-detail {
    max-height: 400px;
}

.appr-detail-inner {
    padding: 2px 10px 10px 32px;
}

.appr-step.your-turn .appr-detail-inner {
    padding: 2px 10px 10px 10px;
}

.appr-comment-text {
    font-size: 10.5px;
    color: var(--text-base);
    line-height: 1.45;
    margin-top: 2px;
}

.appr-no-comment {
    font-size: 10px;
    color: var(--text-dim);
    font-style: italic;
    margin-top: 2px;
}

.appr-step-ts {
    display: flex;
    justify-content: flex-end;
    margin-top: 5px;
    font-size: 9.5px;
    color: var(--accent-blue);
}


/* ── Action bar (Approve / Reject / Delegate + comment textarea) ──────── */

.appr-action-bar {
    margin-top: 6px;
    display: flex;
    flex-direction: column;
    gap: 5px;
}

.appr-comment-input {
    width: 100%;
    background: var(--appr-bg-input);
    border: 1px solid var(--border-subtle);
    border-radius: 4px;
    padding: 5px 8px;
    font-size: 10.5px;
    color: var(--text-strong);
    font-family: inherit;
    resize: none;
    outline: none;
    transition: border-color 0.15s;
    box-sizing: border-box;
}

.appr-comment-input:focus {
    border-color: var(--appr-blue);
}

.appr-comment-input::placeholder {
    color: var(--text-dim);
}

.appr-action-btns {
    display: flex;
    gap: 4px;
}

.appr-act-btn {
    flex: 1;
    height: 26px;
    border: 1px solid transparent;
    border-radius: 4px;
    font-size: 10px;
    font-weight: 600;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 4px;
    transition: background 0.12s, border-color 0.12s;
    font-family: inherit;
    padding: 0 4px;
}

.appr-act-btn--approve {
    background: rgba(63, 185, 80, 0.12);
    color: var(--appr-green);
    border-color: rgba(63, 185, 80, 0.25);
}

.appr-act-btn--approve:hover {
    background: rgba(63, 185, 80, 0.25);
}

.appr-act-btn--reject {
    background: rgba(248, 81, 73, 0.10);
    color: var(--appr-red);
    border-color: rgba(248, 81, 73, 0.20);
}

.appr-act-btn--reject:hover {
    background: rgba(248, 81, 73, 0.20);
}

.appr-act-btn--delegate {
    background: rgba(210, 153, 34, 0.10);
    color: var(--appr-yellow);
    border-color: rgba(210, 153, 34, 0.20);
}

.appr-act-btn--delegate:hover {
    background: rgba(210, 153, 34, 0.20);
}


/* ── Result sink (post-action banner replaces section) ─────────────────── */

.appr-result-sink:empty {
    display: none;
}

.appr-result-sink {
    padding: 12px 8px;
}


/* ===== p4_audit.css ===== */
/* P4 Audit Log — compact entry list with color-dot filter bar and accordion.
   Tokens from shell_tokens.css; audit-specific color vars declared here. */


/* ── Dark scheme ────────────────────────────────────────────────────────── */

[data-mantine-color-scheme='dark'] {
    --audit-blue:   #58a6ff;
    --audit-green:  #3fb950;
    --audit-red:    #f85149;
    --audit-white:  #8b949e;
    --audit-orange: #e3b341;
    --audit-bg-expanded: rgba(88, 166, 255, 0.04);
    --audit-border-entry: rgba(42, 53, 69, 0.45);
    --audit-name-std: #2BCED6;
    --audit-name-cue: #FC5CFF;
}


/* ── Light scheme ───────────────────────────────────────────────────────── */

[data-mantine-color-scheme='light'] {
    --audit-blue:   #0969da;
    --audit-green:  #1a7f37;
    --audit-red:    #cf222e;
    --audit-white:  #6e7781;
    --audit-orange: #bf8700;
    --audit-bg-expanded: rgba(9, 105, 218, 0.04);
    --audit-border-entry: rgba(208, 215, 222, 0.6);
    --audit-name-std: #0a7e8c;
    --audit-name-cue: #bf3abb;
}


/* ── Filter bar (color-dot buttons) ─────────────────────────────────────── */

.audit-filter-bar {
    display: flex;
    align-items: center;
    gap: 8px;
    padding-bottom: 12px;
    padding-top: 12px;
    border-bottom: 1px solid;
    border-top: 1px solid;
}

.audit-fbtn {
    cursor: pointer;
    transition: all 0.15s;
    user-select: none;
    border: none;
    outline: none;
    background: none;
    padding: 0;
}

.audit-fbtn--all {
    font-size: 10px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.4px;
    padding: 3px 10px;
    border-radius: 4px;
    background: var(--hover-white);
    color: var(--text-muted);
    margin-right: 2px;
}

.audit-fbtn--all:hover {
    background: var(--hover-white-soft);
    color: var(--text-strong);
}

.audit-fbtn--all.active {
    background: var(--accent-soft);
    color: var(--accent-blue);
}

.audit-fbtn--dot {
    width: 14px;
    height: 14px;
    min-width: 14px;
    min-height: 14px;
    flex-shrink: 0;
    border-radius: 50%;
    box-shadow: 0 0 0 2px transparent;
    transition: box-shadow 0.15s, transform 0.15s, opacity 0.15s;
    opacity: 0.65;
}

.audit-fbtn--dot:hover {
    opacity: 1;
    transform: scale(1.2);
}

.audit-fbtn--dot.active {
    opacity: 1;
    box-shadow: 0 0 0 2px var(--p4-bg), 0 0 0 4px currentColor;
}

.audit-fbtn--red    { background: var(--audit-red);    color: var(--audit-red); }
.audit-fbtn--green  { background: var(--audit-green);  color: var(--audit-green); }
.audit-fbtn--blue   { background: var(--audit-blue);   color: var(--audit-blue); }
.audit-fbtn--yellow { background: var(--audit-orange); color: var(--audit-orange); }
.audit-fbtn--gray   { background: var(--audit-white);  color: var(--audit-white); }


/* ── Accordion overrides ────────────────────────────────────────────────── */

.p4-audit-sec .mantine-Accordion-root {
    border: none;
}

.p4-audit-sec .mantine-Accordion-item {
    border: none;
    border-left: 2px solid transparent;
    border-radius: 0;
    transition: background 0.12s, border-color 0.12s;
}

.p4-audit-sec .mantine-Accordion-item + .mantine-Accordion-item {
    border-top: 1px solid var(--audit-border-entry);
}

.p4-audit-sec .mantine-Accordion-item[data-active] {
    background: var(--audit-bg-expanded);
    border-left-color: var(--accent-blue);
}

.p4-audit-sec .mantine-Accordion-control {
    padding: 3px 6px 0px 6px;
    min-height: unset;
}

.p4-audit-sec .mantine-Accordion-control:hover {
    background: var(--hover-white);
}

.p4-audit-sec .mantine-Accordion-item[data-active] .mantine-Accordion-control:hover {
    background: transparent;
}

.p4-audit-sec .mantine-Accordion-chevron {
    display: none !important;
    width: 0 !important;
    padding: 0 !important;
    margin: 0 !important;
    overflow: hidden !important;
}

.p4-audit-sec .mantine-Accordion-panel {
    padding: 0;
}

.p4-audit-sec .mantine-Accordion-content {
    padding: 0 8px 6px 20px;
}


/* ── Entry control row ──────────────────────────────────────────────────── */

.audit-control-inner {
    display: flex;
    align-items: flex-start;
    gap: 7px;
    width: 100%;
}

.audit-dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    flex-shrink: 0;
    margin-top: 5px;
}

.audit-dot--blue   { background: var(--audit-blue); }
.audit-dot--green  { background: var(--audit-green); }
.audit-dot--red    { background: var(--audit-red); }
.audit-dot--white  { background: var(--audit-white); }
.audit-dot--orange { background: var(--audit-orange); }

.audit-entry-body {
    flex: 1;
    min-width: 0;
}

.audit-top {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 4px;
}

.audit-type {
    font-size: 11px;
    font-weight: 500;
    color: var(--text-strong);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.audit-time {
    font-size: 9.5px;
    color: var(--text-dim);
    white-space: nowrap;
    flex-shrink: 0;
}

.audit-entry-sub {
    display: flex;
    align-items: center;
    gap: 4px;
    margin-top: 1px;
    font-size: 10px;
    min-width: 0;
}

.audit-name {
    font-weight: 500;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.audit-name.name-std {
    color: var(--audit-name-std);
}

.audit-name.name-cue {
    color: var(--audit-name-cue);
}

.audit-sep {
    color: var(--text-dim);
    flex-shrink: 0;
}


/* ── Expanded detail panel ──────────────────────────────────────────────── */

.audit-detail {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.audit-info-text {
    font-size: 9.5px;
    color: var(--text-muted);
    line-height: 1.45;
    text-transform: none;
}

.audit-lifecycle-pill {
    display: inline-flex;
    align-items: center;
    font-size: 9px;
    font-weight: 600;
    padding: 1px 6px;
    border-radius: 3px;
    width: fit-content;
}

.audit-pill--blue {
    background: rgba(88, 166, 255, 0.1);
    color: var(--audit-blue);
}

.audit-pill--green {
    background: rgba(63, 185, 80, 0.1);
    color: var(--audit-green);
}

.audit-pill--red {
    background: rgba(248, 81, 73, 0.1);
    color: var(--audit-red);
}

.audit-pill--white {
    background: rgba(139, 148, 158, 0.08);
    color: var(--text-muted);
}

.audit-pill--orange {
    background: rgba(227, 179, 65, 0.1);
    color: var(--audit-orange);
}

.audit-meta-time {
    font-size: 9.5px;
    color: var(--accent-blue);
    text-align: right;
    margin-top: 2px;
}


/* ── Filter visibility rules (color-based) ──────────────────────────────── */

.audit-list.filter-all .audit-entry {
    display: block;
}

.audit-list.filter-red .audit-entry:not(.audit-grp-red) {
    display: none;
}

.audit-list.filter-green .audit-entry:not(.audit-grp-green) {
    display: none;
}

.audit-list.filter-blue .audit-entry:not(.audit-grp-blue) {
    display: none;
}

.audit-list.filter-yellow .audit-entry:not(.audit-grp-yellow) {
    display: none;
}

.audit-list.filter-gray .audit-entry:not(.audit-grp-gray) {
    display: none;
}


/* ── Scrollable list ────────────────────────────────────────────────────── */

.p4-audit-sec {
    overflow-y: auto;
    scrollbar-width: thin;
    scrollbar-color: var(--border-subtle) transparent;
}

.p4-audit-sec::-webkit-scrollbar {
    width: 3px;
}

.p4-audit-sec::-webkit-scrollbar-track {
    background: transparent;
}

.p4-audit-sec::-webkit-scrollbar-thumb {
    background: var(--border-subtle);
    border-radius: 2px;
}


/* ===== p4_file_stack.css ===== */
/* P4 embedded file stack — narrow panel chrome (TAF Files tab).
   Scoped under .p4-files-sec; tokens from shell_tokens.css. */

.p4-files-sec .fs-main-container.p4-file-stack.p4-file-stack--narrow {
    min-width: 0;
    max-width: 100%;
}

/* ––– Header toolbar ––– */
[data-mantine-color-scheme='dark'] .p4-files-sec .p4-fs-header.mantine-Paper-root {
    background: var(--p3-bg);
    border-color: var(--border-subtle);
}

[data-mantine-color-scheme='light'] .p4-files-sec .p4-fs-header.mantine-Paper-root {
    background: #f1f3f5;
    border-color: #dee2e6;
}

[data-mantine-color-scheme='dark'] .p4-fs-title-text {
    color: var(--text-strong);
}

[data-mantine-color-scheme='light'] .p4-fs-title-text {
    color: #212529;
}

[data-mantine-color-scheme='dark'] .p4-fs-meta {
    color: var(--text-muted);
}

[data-mantine-color-scheme='light'] .p4-fs-meta {
    color: #495057;
}

.p4-fs-eyebrow {
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    font-family: ui-monospace, monospace;
}

[data-mantine-color-scheme='dark'] .p4-fs-eyebrow {
    color: var(--text-dim);
}

[data-mantine-color-scheme='light'] .p4-fs-eyebrow {
    color: #6c757d;
}

[data-mantine-color-scheme='dark'] .p4-fs-newfile-btn {
    background: var(--p3-bg) !important;
    border-style: solid !important;
    border-width: 1px !important;
    border-color: var(--border-accent) !important;
}

[data-mantine-color-scheme='light'] .p4-fs-newfile-btn {
    background: #fff !important;
    border-style: solid !important;
    border-width: 1px !important;
    border-color: #74c0fc !important;
}

.p4-fs-newfile-btn .iconify {
    color: var(--accent-blue);
}

.p4-files-sec .p4-fs-search.mantine-TextInput-root {
    flex: 1;
    min-width: 0;
}

[data-mantine-color-scheme='dark'] .p4-files-sec .p4-fs-search .mantine-TextInput-input {
    background: var(--p4-bg);
    border-color: var(--border-subtle);
    font-size: 11px;
    min-height: 28px;
}

[data-mantine-color-scheme='light'] .p4-files-sec .p4-fs-search .mantine-TextInput-input {
    background: #fff;
    border-color: #ced4da;
    font-size: 11px;
    min-height: 28px;
}

[data-mantine-color-scheme='dark'] .p4-files-sec .p4-fs-filter .mantine-Select-input {
    background: var(--p4-bg);
    border-color: var(--border-subtle);
    font-size: 11px;
    min-height: 28px;
}

[data-mantine-color-scheme='light'] .p4-files-sec .p4-fs-filter .mantine-Select-input {
    background: #fff;
    border-color: #ced4da;
    font-size: 11px;
    min-height: 28px;
}

.p4-fs-filter {
    min-width: 0;
    flex: 0 1 104px;
}

/* ––– File rows ––– */
[data-mantine-color-scheme='dark'] .p4-file-item.mantine-Paper-root {
    border: 1px solid var(--border-subtle) !important;
    background: var(--p4-bg) !important;
    border-radius: 4px;
    box-shadow: none !important;
    transition: background 0.15s ease, border-color 0.15s ease;
}

[data-mantine-color-scheme='light'] .p4-file-item.mantine-Paper-root {
    border: 1px solid #dee2e6 !important;
    background: #fff !important;
    border-radius: 4px;
    box-shadow: none !important;
    transition: background 0.15s ease, border-color 0.15s ease;
}

[data-mantine-color-scheme='dark'] .p4-file-item--alt.mantine-Paper-root {
    background: #151b29 !important;
}

[data-mantine-color-scheme='light'] .p4-file-item--alt.mantine-Paper-root {
    background: #f8f9fa !important;
}

.p4-file-item--pending.mantine-Paper-root {
    min-height: 40px;
}

/* Softer row hover in narrow P4 (overrides file.css .file-item-hover hex) */
[data-mantine-color-scheme='dark'] .p4-files-sec .p4-file-item.file-item-hover:hover {
    background: var(--hover-white-soft) !important;
    box-shadow: none;
    transform: none;
}

[data-mantine-color-scheme='light'] .p4-files-sec .p4-file-item.file-item-hover:hover {
    background: #e9ecef !important;
    box-shadow: none;
    transform: none;
}

[data-mantine-color-scheme='dark'] .p4-file-key {
    color: var(--accent-blue) !important;
}

[data-mantine-color-scheme='light'] .p4-file-key {
    color: #1864ab !important;
}

[data-mantine-color-scheme='dark'] .p4-file-item .p4-file-pending {
    color: var(--text-muted);
}

[data-mantine-color-scheme='light'] .p4-file-item .p4-file-pending {
    color: #868e96;
}

.p4-file-item .p4-file-filename {
    font-size: 11px;
}

[data-mantine-color-scheme='dark'] .p4-file-item .p4-file-filename {
    color: var(--text-strong);
}

[data-mantine-color-scheme='light'] .p4-file-item .p4-file-filename {
    color: #212529;
}

/* ––– New version / replace: de-emphasize dashed affordances in P4 ––– */
[data-mantine-color-scheme='dark'] .p4-files-sec .p4-narrow-version-btn.mantine-Button-root {
    border-style: solid !important;
    border-width: 1px !important;
    border-color: var(--border-subtle) !important;
    background: var(--p3-bg) !important;
    min-height: 28px;
    padding-left: 8px;
    padding-right: 8px;
}

[data-mantine-color-scheme='light'] .p4-files-sec .p4-narrow-version-btn.mantine-Button-root {
    border-style: solid !important;
    border-width: 1px !important;
    background: #fff !important;
    border-color: #ced4da !important;
    min-height: 28px;
    padding-left: 8px;
    padding-right: 8px;
}

.p4-files-sec .p4-narrow-version-btn .mantine-Button-label {
    gap: 4px;
}

[data-mantine-color-scheme='dark'] .p4-files-sec .p4-narrow-version-btn.new-version-btn-hover:hover {
    background: var(--hover-white-soft) !important;
    border-color: var(--border-accent) !important;
}

[data-mantine-color-scheme='light'] .p4-files-sec .p4-narrow-version-btn.new-version-btn-hover:hover {
    background: #e7f5ff !important;
    border-color: #74c0fc !important;
}


/* ===== p4_files.css ===== */
/* P4 Files (v2) — compact prototype-style entry list with single-open
   inline version detail. Tokens from shell_tokens.css; v2-specific
   color vars declared here. Mirrors p4_audit.css / p4_approvals.css
   structure. */


/* ── Dark scheme ────────────────────────────────────────────────────────── */

[data-mantine-color-scheme='dark'] {
    --p4f-blue:          #58a6ff;
    --p4f-green:         #3fb950;
    --p4f-red:           #f85149;
    --p4f-yellow:        #d29922;
    --p4f-mut:           #6e7681;
    --p4f-text-pri:      #e6edf3;
    --p4f-text-sec:      #8b949e;
    --p4f-bg-hover:      rgba(255, 255, 255, 0.04);
    --p4f-bg-expanded:   rgba(88, 166, 255, 0.04);
    --p4f-border-light:  rgba(42, 53, 69, 0.45);
    --p4f-input-bg:      #0d1117;
}


/* ── Light scheme ───────────────────────────────────────────────────────── */

[data-mantine-color-scheme='light'] {
    --p4f-blue:          #0969da;
    --p4f-green:         #1a7f37;
    --p4f-red:           #cf222e;
    --p4f-yellow:        #bf8700;
    --p4f-mut:           #6e7781;
    --p4f-text-pri:      #1f2328;
    --p4f-text-sec:      #57606a;
    --p4f-bg-hover:      rgba(0, 0, 0, 0.04);
    --p4f-bg-expanded:   rgba(9, 105, 218, 0.04);
    --p4f-border-light:  rgba(208, 215, 222, 0.6);
    --p4f-input-bg:      #ffffff;
}


/* ── Section container ──────────────────────────────────────────────────── */

.p4-files-sec {
    display: flex;
    flex-direction: column;
    overflow: hidden;
    margin: 0 -6px;
}


/* ── Header row (subtitle + key count) ──────────────────────────────────── */

.p4f-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 8px;
}

.p4f-count {
    font-size: 10px;
    color: var(--p4f-mut);
    background: var(--p4f-bg-hover);
    border-radius: 10px;
    padding: 1px 7px;
    font-weight: 500;
    line-height: 1.4;
}


/* ── Toolbar (add / search / download-all) ──────────────────────────────── */

.p4f-toolbar {
    display: flex;
    align-items: center;
    gap: 4px;
    padding: 6px 8px;
    border-top: 1px solid;
    border-bottom: 1px solid;
    margin-top: 6px;
}

.p4f-tool-btn {
    border: 1px solid var(--p4f-border-light) !important;
    border-radius: 4px !important;
    color: var(--p4f-text-sec) !important;
    transition: all 0.15s;
}

.p4f-tool-btn:hover {
    border-color: var(--p4f-blue) !important;
    color: var(--p4f-text-pri) !important;
}

.p4f-tool-btn--primary {
    background: rgba(88, 166, 255, 0.10) !important;
    border-color: rgba(88, 166, 255, 0.25) !important;
    color: var(--p4f-blue) !important;
}

.p4f-tool-btn--primary:hover {
    background: rgba(88, 166, 255, 0.20) !important;
    border-color: var(--p4f-blue) !important;
    color: var(--p4f-blue) !important;
}

.p4f-search {
    flex: 1;
    height: 26px;
    background: var(--p4f-input-bg);
    border: 1px solid var(--p4f-border-light);
    border-radius: 4px;
    padding: 0 8px;
    font-size: 11px;
    color: var(--p4f-text-pri);
    font-family: inherit;
    outline: none;
    min-width: 0;
    transition: border-color 0.15s;
}

.p4f-search:focus {
    border-color: var(--p4f-blue);
}

.p4f-search::placeholder {
    color: var(--p4f-mut);
}


/* ── File list (scrollable) ─────────────────────────────────────────────── */

.p4f-list {
    flex: 1;
    overflow-y: auto;
    padding: 2px 0;
    scrollbar-width: thin;
    scrollbar-color: var(--p4f-border-light) transparent;
}

.p4f-list::-webkit-scrollbar {
    width: 3px;
}

.p4f-list::-webkit-scrollbar-track {
    background: transparent;
}

.p4f-list::-webkit-scrollbar-thumb {
    background: var(--p4f-border-light);
    border-radius: 2px;
}


/* ── File entry (collapsed + expanded) ──────────────────────────────────── */

.p4f-entry {
    border-bottom: 1px solid var(--p4f-border-light);
}

.p4f-entry.p4f-open {
    border-bottom: 1px solid var(--p4f-blue);
}

.p4f-entry.p4f-open .p4f-row {
    border-top: 1px solid var(--p4f-blue);
    background: #161719;
}

.p4f-row {
    display: flex;
    align-items: center;
    gap: 7px;
    padding: 7px 10px;
    cursor: pointer;
    transition: background 0.12s;
    border-top: 1px solid transparent;
}

.p4f-row:hover {
    background: var(--p4f-bg-hover);
}


/* ── Type chip (left) ───────────────────────────────────────────────────── */

.p4f-type {
    width: 26px;
    height: 26px;
    border-radius: 4px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    font-size: 8.5px;
    font-weight: 700;
    letter-spacing: 0.3px;
    text-transform: uppercase;
}

.p4f-type-glyph {
    font-size: 14px;
    line-height: 1;
    letter-spacing: 0;
}

.p4f-type-upload-icon {
    display: none;
    color: var(--p4f-blue);
}

.p4f-upload-zone:hover .p4f-type .p4f-type-default {
    display: none;
}

.p4f-upload-zone:hover .p4f-type .p4f-type-upload-icon {
    display: inline-flex;
}

.p4f-upload-zone:hover .p4f-type {
    background: rgba(88, 166, 255, 0.12);
    color: var(--p4f-blue);
}

.p4f-type--upload-always .p4f-type-upload-icon {
    display: inline-flex;
}

.p4f-type--pdf  { background: rgba(248,  81,  73, 0.12); color: var(--p4f-red);    }
.p4f-type--xlsx { background: rgba( 63, 185,  80, 0.12); color: var(--p4f-green);  }
.p4f-type--dwg  { background: rgba( 88, 166, 255, 0.12); color: var(--p4f-blue);   }
.p4f-type--docx { background: rgba( 88, 166, 255, 0.12); color: var(--p4f-blue);   }
.p4f-type--img  { background: rgba(232,  79, 235, 0.12); color: #e84feb;            }
.p4f-type--zip  { background: rgba(255, 206,  70, 0.12); color: var(--p4f-yellow); }
.p4f-type--pending {
    background: rgba(210, 153,  34, 0.10);
    color: var(--p4f-yellow);
}


/* ── Body (file_key + meta) ─────────────────────────────────────────────── */

.p4f-body {
    flex: 1;
    min-width: 0;
}

.p4f-key {
    font-size: 11px;
    font-weight: 500;
    color: var(--p4f-text-pri);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.p4f-meta {
    font-size: 9.5px;
    color: var(--p4f-mut);
    margin-top: 1px;
}

.p4f-meta-pending {
    color: var(--p4f-yellow);
    font-weight: 500;
}


/* ── Upload zone (wraps type chip) ──────────────────────────────────────── */

.p4f-upload-zone {
    cursor: pointer;
    display: inline-flex;
    flex-shrink: 0;
}


/* ── Expanded detail (max-height transition) ────────────────────────────── */

.p4f-detail {
    overflow: hidden;
    max-height: 0;
    transition: max-height 0.25s ease;
}

.p4f-entry.p4f-open .p4f-detail {
    max-height: 600px;
}

.p4f-detail-inner {
    background: var(--p4f-bg-expanded);
    padding: 4px 0;
}


/* ── Row-level action bar (Add Control) ─────────────────────────────────── */

.p4f-row-actions {
    display: flex;
    justify-content: flex-end;
    padding: 4px 10px 2px;
    gap: 4px;
}


/* ── Version row ────────────────────────────────────────────────────────── */

.p4f-ver {
    padding: 6px 10px;
    background: #161719;
}

.p4f-ver + .p4f-ver {
    border-top: 1px solid var(--p4f-border-light);
}

.p4f-ver-top {
    display: flex;
    align-items: center;
    gap: 6px;
}

.p4f-ver-rev {
    font-size: 10px;
    font-weight: 500;
    color: var(--p4f-text-pri);
}

.p4f-ver-date {
    padding-top: 1px;
    font-size: 9px;
    color: var(--p4f-blue);
    flex-shrink: 0;
}

.p4f-ver-name {
    font-size: 8px;
    color: var(--p4f-text-sec);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    margin-top: 1px;
}

.p4f-ver-actions {
    display: flex;
    gap: 2px;
    margin-left: auto;
}

.p4f-va-btn {
    width: 18px !important;
    height: 17px !important;
    min-width: 18px !important;
    min-height: 17px !important;
    border-radius: 2px !important;
    border: 1px solid var(--p4f-border-light) !important;
    background: transparent !important;
    color: var(--p4f-text-sec) !important;
    transition: all 0.15s;
}

.p4f-va-btn svg {
    width: 11px !important;
    height: 11px !important;
}

.p4f-va-btn:hover {
    border-color: var(--p4f-blue) !important;
    color: var(--p4f-blue) !important;
}

.p4f-va-btn--doc-control:hover {
    color: var(--p4f-yellow) !important;
}


/* ── Button loading spinner ────────────────────────────────────────────── */

.p4f-btn-loading {
    pointer-events: none;
    position: relative;
}

.p4f-btn-loading svg {
    visibility: hidden;
}

.p4f-btn-loading::after {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    width: 12px;
    height: 12px;
    margin: -6px 0 0 -6px;
    border: 2px solid var(--p4f-blue);
    border-top-color: transparent;
    border-radius: 50%;
    animation: p4f-spin 0.6s linear infinite;
}

@keyframes p4f-spin {
    to { transform: rotate(360deg); }
}


/* ── Upload chip loading spinner ───────────────────────────────────────── */

.p4f-chip-loading {
    pointer-events: none;
    position: relative;
}

.p4f-chip-loading > * {
    visibility: hidden;
}

.p4f-chip-loading::after {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    width: 12px;
    height: 12px;
    margin: -6px 0 0 -6px;
    border: 2px solid var(--p4f-blue);
    border-top-color: transparent;
    border-radius: 50%;
    animation: p4f-spin 0.6s linear infinite;
}


/* ── Upload progress bar pulse (cloud saving phase) ───────────────────── */

@keyframes pulse-bar {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.4; }
}


/* ── File type badge spinner during upload ────────────────────────────── */

.p4f-type--uploading {
    position: relative;
}

.p4f-type-spinner {
    display: flex;
    align-items: center;
    justify-content: center;
}

.p4f-type-spinner::after {
    content: "";
    width: 14px;
    height: 14px;
    border: 2px solid rgba(255, 255, 255, 0.3);
    border-top-color: #fff;
    border-radius: 50%;
    animation: p4f-spin 0.6s linear infinite;
}


/* ===== p4_tasks.css ===== */
/* ––––––––––––––––––––––––––––––––––––––––––––––––––
P4 'tasks' tab — search/filter header + scrollable task list.
Rows use the same `.pitem` look as tools/actions/reports lists, with a
small colored status dot (red/blue/yellow/green/orange/gray) on the left.
The .p4-tasks-sec wrapper is a vertical flex column so the sticky header
sits above the rows; the parent .p4-body owns the scroll.
–––––––––––––––––––––––––––––––––––––––––––––––––– */

.p4-tasks-sec {
    display: flex;
    flex-direction: column;
    margin: -6px -6px 0;            /* bleed to panel edges */
}

.p4-tasks-list {
    display: flex;
    flex-direction: column;
    gap: 1px;
    /* No top padding: rows must stack under `.psec` like P3 `.pitem` lists
       (horizontal inset matches `.pbody` via left/right only). */
    padding: 0 6px 12px;
}

.p4-tasks-list.p4-tasks-empty {
    align-items: center;
    justify-content: center;
    color: var(--text-muted);
    font-size: 11px;
    padding: 28px 8px;
}

.p4-tasks-empty-msg {
    margin-top: 4px;
}

/* ––––– Row (mirrors .pitem in shell_panels.css) ––––– */

/* The wrapper Div carries data-* attrs (used by the clientside filter) and
   accepts display:none|block from the filter callback. */
.p4-task-rowwrap {
    display: block;
}

.pitem.p4-task-row {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 6px 8px;
    overflow: hidden;
}

.p4-task-row .p4-task-dot {
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 14px;
    height: 14px;
}

.p4-task-row .p4-task-name {
    flex: 1 1 auto;
    min-width: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    /* `.p4-tasks-sec` sits under `.p4-sec` (uppercase); task titles use source casing. */
    text-transform: none;
}

/* Locked rows (Completed / Pending / En Route): same look, no interaction. */
.pitem.p4-task-locked {
    cursor: default;
    opacity: 0.7;
}

.pitem.p4-task-locked:hover {
    background: transparent;
    color: var(--text-base);
}

/* ––––––––––––––––––––––––––––––––––––––––––––––––––
Main-area landing placeholder shown on /m/s/taf when no task is
selected (see stash/application/taf.py).
–––––––––––––––––––––––––––––––––––––––––––––––––– */

.taf-landing-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 100%;
    min-height: 280px;
    gap: 10px;
    color: var(--text-muted);
    font-size: 13px;
    padding: 32px 16px;
}

.taf-landing-empty .iconify {
    color: var(--text-dim);
    opacity: 0.85;
}

.taf-landing-empty-msg {
    color: var(--text-muted);
    font-weight: 500;
    letter-spacing: 0.01em;
}


/* ===== password_input.css ===== */
/* –––––––––––––––––––––––––––––––––––––––––––––––––– 
Text Input
–––––––––––––––––––––––––––––––––––––––––––––––––– */


/* –––––––––––––––––––––––––––––––––––––––––––––––––– 
Dark Mode
–––––––––––––––––––––––––––––––––––––––––––––––––– */

[data-mantine-color-scheme='dark'] .mantine-PasswordInput-label {
    color: #D1D2D3;
}



/* –––––––––––––––––––––––––––––––––––––––––––––––––– 
Light Mode
–––––––––––––––––––––––––––––––––––––––––––––––––– */

[data-mantine-color-scheme='light'] .mantine-PasswordInput-label {
    color: #3D3B3B;
}



/* ===== procurement.css ===== */
.procurement_send_rfq_button:hover {
    background-color: rgba(13, 6, 150, 0.7) !important;
}


/* ===== shell_ai_rail.css ===== */
/* AI Insights rail — slim fixed strip snapped to the right edge of the shell.
   The entire rail is the clickable trigger for the Cue artifact pane. On
   hover the strip paints with the Cue gradient. Hidden while the pane is
   open. */

:root {
    --ai-rail-w: 20px;
    --ai-rail-gap: 5px;
}

.ai-rail {
    position: fixed;
    top: var(--topbar-h);
    right: 0;
    bottom: 0;
    width: var(--ai-rail-w);
    /* Main-content band: below Mantine overlays (~200+); artifact pane uses 1000. */
    z-index: 35;
    padding: 0;
    margin: 0;
    border: none;
    border-left: 1px solid var(--border-subtle);
    background: var(--topbar-bg);
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
    transition: background 0.25s ease, border-color 0.25s ease,
        box-shadow 0.25s ease;
}

.ai-rail:hover,
.ai-rail:focus-visible {
    background: var(--cue-grad-linear);
    border-left-color: transparent;
    box-shadow: -4px 0 16px var(--cue-glow);
    outline: none;
}

/* Hide while the Cue pane is open. The toggle is driven by a class on
   <body> set by a clientside cb in the Cue compiler. */
body.ai-pane-open .ai-rail {
    display: none;
}


/* ===== shell_panels.css ===== */
/* P2/P3/P4 panels: expanded | collapsed (strip) | hidden states.
   Panels apply their background via the .p2, .p3, .p4 class (not inline). */

.panel {
    display: flex;
    flex-direction: row;
    flex-shrink: 0;
    overflow: hidden;
    transition: width .2s ease;
    border-right: 1px solid var(--border-subtle);
}

.panel.is-hidden {
    width: 0;
    border-right: none;
}

.panel.is-collapsed {
    width: var(--strip-w);
}

.panel.is-expanded {
    width: var(--exp-w);
}

.p2 { background: var(--p2-bg); --exp-w: var(--p2-exp-w); }
.p3 { background: var(--p3-bg); --exp-w: var(--p3-exp-w); }

/* Vertical-text strip (visible when collapsed) */
.pstrip {
    width: var(--strip-w);
    flex-shrink: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 8px 0;
    gap: 2px;
}

.panel.is-expanded .pstrip { display: none; }

.pvtab {
    writing-mode: vertical-rl;
    transform: rotate(180deg);
    font-size: 10px;
    color: var(--text-muted);
    padding: 9px 7px;
    cursor: pointer;
    border-radius: 4px;
    white-space: nowrap;
    letter-spacing: .03em;
    transition: background .1s, color .1s;
}

.pvtab:hover {
    background: var(--hover-white-soft);
    color: #8899bb;
}

.pvtab.active {
    background: var(--accent-soft);
    color: var(--accent-blue);
}

/* Expanded panel body */
.pfull {
    flex: 1;
    min-width: 0;
    display: none;
    flex-direction: column;
    overflow: hidden;
}

.panel.is-expanded .pfull { display: flex; }

.phead {
    padding: 10px 12px 7px;
    border-bottom: 1px solid var(--border-subtle);
    flex-shrink: 0;
}

.phead-row {
    display: flex;
    align-items: center;
    gap: 6px;
}

.phead-title {
    font-size: 13px;
    font-weight: 600;
    color: var(--text-strong);
    white-space: nowrap;
    flex: 1;
}

.hide-btn {
    background: none;
    border: none;
    color: #2e4a6a;
    cursor: pointer;
    padding: 4px;
    border-radius: 4px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: color .12s, background .12s;
    flex-shrink: 0;
}

.hide-btn:hover {
    color: var(--accent-blue);
    background: rgba(74, 130, 220, 0.1);
}

.hide-btn svg {
    width: 14px;
    height: 14px;
}

.pbody {
    flex: 1;
    padding: 6px;
    overflow-y: auto;
    scrollbar-width: thin;
    scrollbar-color: var(--border-subtle) transparent;
}

/* P3 body sections. Only the section matching .pbody.p3-<key> is visible;
key is driven by URL + P3 tab click (see shell/panels.py, shell/tabs.py). */
.pbody .p3-sec { display: none; }
.pbody.p3-actions .p3-actions-sec { display: block; }
.pbody.p3-reports .p3-reports-sec { display: block; }

/* P4 body sections. Visibility driven by URL default + p4 tab click. */
.p4-body .p4-sec { display: none; }
.p4-body.p4-tasks     .p4-tasks-sec     { display: block; }
.p4-body.p4-tools     .p4-tools-sec     { display: block; }
.p4-body.p4-files     .p4-files-sec     { display: block; }
.p4-body.p4-approvals .p4-approvals-sec { display: block; }
.p4-body.p4-audit     .p4-audit-sec     { display: block; }

/* P4 embedded file list: layout + row density live in
   theme/components/p4_file_stack.css (flattened to assets on compile). */
.p4-files-sec .fs-main-container.p4-file-stack {
    min-width: 0;
    max-width: 100%;
}
.p4-files-sec .p4-file-item {
    min-height: 0;
}

.psec-empty {
    padding: 12px 8px;
    color: var(--text-dim);
    font-size: 11px;
}

.pitem {
    display: block;
    padding: 6px 8px;
    border-radius: 4px;
    font-size: 12px;
    color: var(--text-base);
    cursor: pointer;
    white-space: nowrap;
    transition: background .1s, color .1s;
    text-decoration: none;
}

.pitem:hover {
    background: var(--hover-white-soft);
    color: var(--text-strong);
}

.pitem.active {
    background: var(--accent-soft);
    color: var(--accent-blue);
}

/* Icon tab bar (P3/P4) */
.ptabs {
    display: flex;
    gap: 2px;
    padding: 5px 6px;
    border-bottom: 1px solid var(--border-subtle);
    flex-shrink: 0;
    justify-content: space-around;
}

.ptab {
    width: 28px;
    height: 28px;
    border-radius: 5px;
    cursor: pointer;
    color: var(--text-muted);
    transition: background .1s, color .1s;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    flex-shrink: 0;
}

.ptab svg {
    width: 14px;
    height: 14px;
}

.ptab:hover {
    background: var(--hover-white);
    color: #8899bb;
}

.ptab.active {
    background: var(--accent-soft);
    color: var(--accent-blue);
}

.ptab-tip {
    position: absolute;
    bottom: calc(100% + 5px);
    left: 50%;
    transform: translateX(-50%);
    background: var(--topbar-bg);
    color: var(--text-strong);
    font-size: 10px;
    padding: 3px 8px;
    border-radius: 3px;
    white-space: nowrap;
    pointer-events: none;
    opacity: 0;
    transition: opacity .1s;
    z-index: 999;
    border: .5px solid #2e4060;
}

.ptab:hover .ptab-tip { opacity: 1; }

.psec {
    font-size: 9px;
    color: var(--text-dim);
    letter-spacing: .12em;
    text-transform: uppercase;
    padding: 0px;
    padding-bottom: 12px;
    display: flex;
    align-items: center;
    gap: 5px;
}

.psec svg {
    width: 11px;
    height: 11px;
}

/* Library items (P3 library tab) */
.lib-sec {
    font-size: 9px;
    color: var(--text-dim);
    letter-spacing: .12em;
    text-transform: uppercase;
    padding: 8px 6px 4px;
}

.lib-item {
    padding: 5px 8px;
    border-radius: 4px;
    display: flex;
    align-items: center;
    gap: 8px;
    cursor: pointer;
    transition: background .1s;
}

.lib-item:hover { background: var(--hover-white-soft); }

.lib-item svg {
    width: 12px;
    height: 12px;
    flex-shrink: 0;
}

.lib-name {
    font-size: 12px;
    color: var(--text-base);
    flex: 1;
}

.lib-ext {
    font-size: 9px;
    color: var(--text-dim);
    text-transform: uppercase;
}

/* P4 — entity-scoped panel with accent border */
.p4 {
    overflow: hidden;
    transition: width .2s ease;
    flex-shrink: 0;
    display: flex;
    flex-direction: row;
    border-right: 1px solid var(--border-subtle);
}

.p4.hidden {
    width: 0;
    border-right: none;
}

.p4.collapsed { width: var(--strip-w); }
.p4.expanded  { width: var(--p4-exp-w); }

.p4-strip {
    width: var(--strip-w);
    flex-shrink: 0;
    background: var(--p3-bg);
    border-left: 2px solid var(--border-accent);
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 8px 0;
    gap: 2px;
}

.p4.expanded .p4-strip { display: none; }

.p4-vtab {
    writing-mode: vertical-rl;
    transform: rotate(180deg);
    font-size: 10px;
    color: var(--text-muted);
    padding: 9px 7px;
    cursor: pointer;
    border-radius: 4px;
    white-space: nowrap;
    letter-spacing: .03em;
    transition: background .1s, color .1s;
}

.p4-vtab:hover {
    background: var(--hover-white-soft);
    color: #8899bb;
}

.p4-vtab.active {
    background: var(--accent-soft);
    color: var(--accent-blue);
}

.p4-inner {
    flex: 1;
    min-width: 0;
    display: none;
    flex-direction: column;
    overflow: hidden;
    background: var(--p4-bg);
    border-left: 2px solid var(--border-accent);
    position: relative;
}

.p4.expanded .p4-inner { display: flex; }

.p4-accent-bar {
    height: 1px;
    background: linear-gradient(90deg, var(--border-accent), transparent);
    flex-shrink: 0;
}

.p4-head {
    padding: 10px 12px 7px;
    border-bottom: 1px solid var(--border-subtle);
    flex-shrink: 0;
}

.p4-head-row {
    display: flex;
    align-items: center;
    gap: 6px;
}

.p4-head-title {
    font-size: 12px;
    font-weight: 600;
    color: var(--text-strong);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    flex: 1;
}

.p4-tabs {
    display: flex;
    gap: 2px;
    padding: 5px 6px;
    border-bottom: 1px solid var(--border-subtle);
    flex-shrink: 0;
    justify-content: space-around;
}

.p4-tab {
    width: 28px;
    height: 28px;
    border-radius: 5px;
    cursor: pointer;
    color: var(--text-muted);
    transition: background .1s, color .1s;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    flex-shrink: 0;
}

.p4-tab svg {
    width: 14px;
    height: 14px;
}

.p4-tab:hover {
    background: var(--hover-white);
    color: #8899bb;
}

.p4-tab.active {
    background: var(--accent-soft);
    color: var(--accent-blue);
}

.p4-tab-tip {
    position: absolute;
    bottom: calc(100% + 5px);
    left: 50%;
    transform: translateX(-50%);
    background: var(--topbar-bg);
    color: var(--text-strong);
    font-size: 10px;
    padding: 3px 8px;
    border-radius: 3px;
    white-space: nowrap;
    pointer-events: none;
    opacity: 0;
    transition: opacity .1s;
    z-index: 999;
    border: .5px solid #2e4060;
}

.p4-tab:hover .p4-tab-tip { opacity: 1; }

.p4-body {
    flex: 1;
    padding: 6px;
    overflow-y: auto;
    scrollbar-width: thin;
    scrollbar-color: var(--border-subtle) transparent;
}

/* P4 panel-level loading overlay — shown on URL change while the server
   renders P4 sections, hidden once p4_body.children updates. */
.p4-loader {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(34, 35, 38, 0.75);
    opacity: 0;
    pointer-events: none;
    transition: opacity .15s ease;
    z-index: 5;
}

.p4-loader.active {
    opacity: 1;
    pointer-events: auto;
}

.p4-loader-spinner {
    width: 20px;
    height: 20px;
    border: 2px solid rgba(110, 179, 247, 0.18);
    border-top-color: var(--accent-blue);
    border-radius: 50%;
    animation: p4-spin 0.8s linear infinite;
}

@keyframes p4-spin {
    to { transform: rotate(360deg); }
}

.p4-sec {
    font-size: 9px;
    color: var(--text-dim);
    letter-spacing: .12em;
    text-transform: uppercase;
    padding: 8px 6px 4px;
}

.p4-item {
    padding: 5px 8px;
    border-radius: 4px;
    font-size: 12px;
    color: var(--text-base);
    cursor: pointer;
    white-space: nowrap;
    transition: background .1s, color .1s;
    display: flex;
    align-items: center;
    gap: 7px;
}

.p4-item:hover {
    background: var(--hover-white-soft);
    color: var(--text-strong);
}

.p4-item svg {
    width: 12px;
    height: 12px;
    flex-shrink: 0;
    opacity: .7;
}


/* ===== shell_rail.css ===== */
/* Rail (P1) — 48px icon bar with tooltips, badges, bottom section. */

.rail {
    width: var(--rail-w);
    background: var(--rail-bg);
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 8px 0;
    gap: 2px;
    flex-shrink: 0;
    overflow: visible;
}

.ri {
    width: 36px;
    height: 36px;
    border-radius: 6px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    position: relative;
    transition: background .12s;
    flex-shrink: 0;
    color: var(--text-muted);
}

.ri:hover {
    background: var(--hover-white);
    color: #8899bb;
}

.ri.active {
    background: var(--accent-active);
    color: var(--accent-blue);
}

/* Vertical blue accent inside the hit target — inset draws even when ancestors use overflow:hidden */
.ri.active.ri-accent {
    box-shadow: inset 3px 0 0 0 var(--accent-blue);
}

.ri svg {
    width: 16px;
    height: 16px;
    transition: transform 0.12s ease;
}

.ri.active svg {
    transform: scale(1.07);
}

.ri-badge {
    position: absolute;
    top: 4px;
    right: 4px;
    width: 14px;
    height: 14px;
    border-radius: 50%;
    background: #e24b4a;
    font-size: 9px;
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 600;
}

.ri-tip {
    position: absolute;
    left: 44px;
    top: 50%;
    transform: translateY(-50%);
    background: var(--topbar-bg);
    color: var(--text-strong);
    font-size: 11px;
    padding: 4px 10px;
    border-radius: 4px;
    white-space: nowrap;
    pointer-events: none;
    opacity: 0;
    transition: opacity .1s;
    z-index: 999;
    border: .5px solid #2e4060;
    box-shadow: 2px 2px 8px rgba(0, 0, 0, .4);
}

.ri:hover .ri-tip {
    opacity: 1;
}

.rail-sep {
    width: 24px;
    height: .5px;
    background: var(--border-subtle);
    margin: 4px 0;
    flex-shrink: 0;
}

.rail-bot {
    margin-top: auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
}

.avatar {
    width: 26px;
    height: 26px;
    border-radius: 50%;
    background: #185fa5;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 10px;
    color: #b5d4f4;
    font-weight: 600;
}


/* ===== shell_responsive.css ===== */
/* Responsive overlay for iPad portrait — prompts the user to rotate to landscape.
   The overlay element is always in the DOM but only displayed below 1024px width in portrait.
   Pinned with position: fixed so it cannot consume layout height inside .app_container. */

#stash_rotate_overlay {
    display: none !important;
    position: fixed;
    inset: 0;
    z-index: 99999;
}

/* Rotate-device overlay disabled globally: portrait is supported. */


/* ===== shell_tokens.css ===== */
/* Nav shell design tokens. Single source of truth for panel widths and colors. */

:root {
    --rail-w: 48px;
    --p2-exp-w: 140px;
    --p3-exp-w: 180px;
    --p4-exp-w: 260px;
    --strip-w: 32px;
    --topbar-h: 40px;

    /* Neutral blackish shell + blue accents (aligned with body #24262b) */
    --shell-bg: #24262b;
    --rail-bg: #1a1b1f;
    --p2-bg: #222326;
    --p3-bg: #25262c;
    --p4-bg: #222326;
    --topbar-bg: #161719;

    --border-subtle: #35373d;
    --border-accent: #4a8fd9;
    --text-muted: #8b9099;
    --text-dim: #6f757e;
    --text-base: #aeb4bf;
    --text-strong: #e8eaed;
    --accent-blue: #6eb3f7;
    --accent-active: rgba(110, 179, 247, 0.22);
    --accent-soft: rgba(110, 179, 247, 0.14);

    --main-div-background-color: #24262b;
    --hover-white: rgba(255, 255, 255, 0.08);
    --hover-white-soft: rgba(255, 255, 255, 0.06);

    /* Cue chat tokens — single source of truth for AI/Cue styling */
    --cue-grad: radial-gradient(circle at 5% 5%, #75FFEE, #A771FF, #FC5CFF);
    --cue-grad-linear: linear-gradient(135deg, #75FFEE, #A771FF, #FC5CFF);
    --cue-grad-conic: conic-gradient(from 0deg, #75FFEE, #A771FF, #FC5CFF, #75FFEE);
    --cue-glow: rgba(207, 139, 243, 0.45);
    --cue-bubble-user-bg: var(--accent-blue);
    --cue-bubble-user-fg: #ffffff;
    --cue-bubble-asst-bg: rgba(255, 255, 255, 0.04);
    --cue-bubble-asst-fg: var(--text-strong);
    --cue-bubble-asst-border: var(--border-subtle);
}


/* ===== shell_topbar.css ===== */
/* Topbar — breadcrumb + expandable detail (entity metadata + lifecycle stepper). */

.topbar {
    position: relative;
    background: var(--topbar-bg);
    border-bottom: 1px solid var(--border-subtle);
    flex-shrink: 0;
    overflow: hidden;
    transition: height .25s ease;
}

.topbar.collapsed { height: var(--topbar-h); }
.topbar.expanded  { height: auto; }

.topbar-bar {
    height: var(--topbar-h);
    display: flex;
    align-items: center;
    gap: 0;
    padding: 0 12px;
}

.tb-bc {
    font-size: 12px;
    color: var(--text-muted);
    /* Inline flex so gap applies reliably between module / › / submodule (levels 1–2).
       Keep gap in line with › margins elsewhere (.bc-entity-toggle / .bc-tool-label = 5px). */
    display: inline-flex;
    align-items: center;
    flex-wrap: nowrap;
    gap: 5px;
}

.tb-bc > span:not(.tb-bc-sep) {
    color: var(--text-strong);
}

/* Chevron only — spacing comes from .tb-bc gap (matches rhythm of › elsewhere). */
.tb-bc-sep {
    display: inline-block;
    flex-shrink: 0;
    color: var(--text-muted);
    padding: 0;
    font-weight: normal;
    user-select: none;
}

/* Permanent entity toggle sits beside the breadcrumb in the topbar-bar.
   Visible only when populated; clicking it toggles the expanded detail area.
   Uses inline layout (not flex) so the chevron/label/id all sit on the same
   text baseline reliably across browsers — and so margins on .bc-entity-id
   actually create the space between description and ID badge. */
.bc-entity-toggle {
    font-size: 12px;
    color: var(--accent-blue);
    cursor: pointer;
    margin-left: 0;
    white-space: nowrap;
}
.bc-entity-toggle:empty { display: none; }
.bc-entity-toggle::before {
    content: "\203A";
    color: var(--text-muted);
    margin: 0 5px;
    text-decoration: none;
    display: inline-block;
}

/* Hover underlines the description only — not the chevron, not the ID badge. */
.bc-entity-toggle:hover .bc-entity-label { text-decoration: underline; }
.bc-entity-label { color: var(--accent-blue); }

/* Subtle, secondary ID tag. Sans-serif keeps zeros readable (no slashed-zero
   glyphs); slightly smaller + muted so it reads as metadata. */
.bc-entity-id {
    margin-left: 8px;
    padding: 1px 6px;
    font-family: "Inter", "Segoe UI", system-ui, -apple-system, sans-serif;
    font-size: 11px;
    font-weight: 500;
    color: var(--text-muted);
    background: rgba(110, 179, 247, 0.06);
    border: 1px solid rgba(110, 179, 247, 0.16);
    border-radius: 3px;
    letter-spacing: 0;
    vertical-align: 1px;
    text-decoration: none;
}
.bc-entity-toggle:hover .bc-entity-id {
    text-decoration: none;
    color: var(--text-strong);
    border-color: rgba(110, 179, 247, 0.28);
}

/* Level-4: selected tool (atc button_label) or task name — inert, not a link. */
.bc-tool-label {
    font-size: 12px;
    color: var(--text-strong);
    margin-left: 0;
    white-space: nowrap;
    cursor: default;
}
.bc-tool-label:empty { display: none; }
.bc-tool-label::before {
    content: "\203A";
    color: var(--text-muted);
    margin: 0 5px;
    text-decoration: none;
    display: inline-block;
}

.bc-link {
    color: var(--accent-blue);
    cursor: pointer;
}

.bc-link:hover { text-decoration: underline; }

/* Close button floats inside the expanded detail area (top-right).
   Inset clears the fixed AI rail (--ai-rail-w + --ai-rail-gap from shell_ai_rail.css),
   same reserve as .div_main — avoids overlap with the strip + edge breathing room. */
.topbar-close {
    position: absolute;
    top: calc(var(--topbar-h) + 8px);
    right: calc(var(--ai-rail-w, 20px) + var(--ai-rail-gap, 5px) + 10px);
    background: none;
    border: none;
    color: var(--text-dim);
    cursor: pointer;
    font-size: 14px;
    line-height: 1;
    padding: 2px 6px;
    display: none;
    z-index: 2;
}

.topbar-close:hover { color: #8899bb; }

.topbar.expanded .topbar-close { display: block; }

.topbar-detail {
    /* Right was 16px; double on the right so detail grid + close clear the AI rail. */
    padding: 14px 32px 16px 16px;
    border-top: .5px solid #1a2235;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 10px 28px;
}

.td-field {
    display: flex;
    flex-direction: column;
    gap: 3px;
}

.td-label {
    font-size: 9px;
    color: var(--text-dim);
    letter-spacing: .1em;
    text-transform: uppercase;
}

.td-val {
    font-size: 12px;
    color: var(--text-strong);
}

/* Lifecycle stepper — absorbed from taf_header_drawer. */
.td-lifecycle {
    grid-column: 1 / -1;
    margin-top: 4px;
}

.lc-label {
    font-size: 9px;
    color: var(--text-dim);
    letter-spacing: .1em;
    text-transform: uppercase;
    margin-bottom: 8px;
}

.lc-steps {
    display: flex;
    align-items: center;
}

.lc-step {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    flex-shrink: 0;
}

.lc-dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    border: 1.5px solid var(--border-subtle);
    background: var(--topbar-bg);
}

.lc-dot.done {
    background: #3dd68c;
    border-color: #3dd68c;
}

.lc-dot.current {
    background: var(--accent-blue);
    border-color: var(--accent-blue);
    box-shadow: 0 0 6px rgba(110, 179, 247, .5);
}

.lc-step-lbl {
    font-size: 9px;
    color: var(--text-dim);
    white-space: nowrap;
}

.lc-step.done    .lc-step-lbl { color: #3dd68c; }
.lc-step.current .lc-step-lbl { color: var(--accent-blue); }

.lc-line {
    flex: 1;
    height: 1.5px;
    background: var(--border-subtle);
    margin-bottom: 14px;
}

.lc-line.done { background: #3dd68c; }


/* ===== slider.css ===== */
.no-tooltip-slider .mantine-Slider-tooltip {
    display: none !important;
}


/* ===== spoiler.css ===== */
/* –––––––––––––––––––––––––––––––––––––––––––––––––– 
Spoiler
–––––––––––––––––––––––––––––––––––––––––––––––––– */

.mantine-Spoiler-root {
    font-size: 11px;
}

/* –––––––––––––––––––––––––––––––––––––––––––––––––– 
Dark Mode
–––––––––––––––––––––––––––––––––––––––––––––––––– */

[data-mantine-color-scheme='dark']  .mantine-Spoiler-root {
    color: #B3B3B3;
}

/* –––––––––––––––––––––––––––––––––––––––––––––––––– 
Light Mode
–––––––––––––––––––––––––––––––––––––––––––––––––– */

[data-mantine-color-scheme='light'] .mantine-Spoiler-root {
    color: #5F6B7C;
}


/* ===== stepper.css ===== */
/* –––––––––––––––––––––––––––––––––––––––––––––––––– 
Stepper
–––––––––––––––––––––––––––––––––––––––––––––––––– */


/* –––––––––––––––––––––––––––––––––––––––––––––––––– 
Dark Mode
–––––––––––––––––––––––––––––––––––––––––––––––––– */
/* [data-mantine-color-scheme='dark'] .mantine-Stepper-stepLabel {
    color: white;
}   
[data-mantine-color-scheme='dark'] .mantine-Stepper-stepIcon {
    color: white;
    background-color: #2a2c32;
}   
[data-mantine-color-scheme='dark'] .mantine-Stepper-stepCompletedIcon {
    background-color: rgb(34, 139, 230);
}  */




/* –––––––––––––––––––––––––––––––––––––––––––––––––– 
Light Mode
–––––––––––––––––––––––––––––––––––––––––––––––––– */


/* ===== table_v3.css ===== */
/* –––––––––––––––––––––––––––––––––––––––––––––––––– 
Table v3 - Entity Grid & shared table component
Clean, professional design
–––––––––––––––––––––––––––––––––––––––––––––––––– */

/* Search bar: borderless default, hover, blue border when focused */
.table-v3-search .mantine-TextInput-input {
  border: none !important;
  background-color: var(--shell-bg) !important;
  border-radius: 6px;
  transition: background-color 0.15s ease, box-shadow 0.15s ease;
}
.table-v3-search .mantine-TextInput-input:hover {
  background-color: var(--hover-white) !important;
}
.table-v3-search .mantine-TextInput-wrapper:focus-within .mantine-TextInput-input {
  border: none !important;
  box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.35) !important;
  outline: none !important;
}
[data-mantine-color-scheme='light'] .table-v3-search .mantine-TextInput-input {
  background-color: #e9ecef !important;
}
[data-mantine-color-scheme='light'] .table-v3-search .mantine-TextInput-input:hover {
  background-color: #dee2e6 !important;
}
[data-mantine-color-scheme='light'] .table-v3-search .mantine-TextInput-wrapper:focus-within .mantine-TextInput-input {
  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.25) !important;
}

/* Table container */
.table-v3-container {
  border-radius: 8px;
  border: none;
  overflow: visible;
  background: transparent;
  padding: 1px;
}

/* Table inner radius */
.table-v3 {
  border-radius: 8px;
}
.table-v3 thead {
  overflow: visible;
}
.table-v3 .table-v3-header-row th {
  overflow: visible;
}

/* Header cell: text only in flow (icon positioned absolutely) */
.table-v3 .table-v3-header-cell-inner {
  position: relative;
  min-width: 0;
  overflow: visible;
}
.table-v3 .table-v3-header-text {
  display: block;
  width: 100%;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  text-align: center !important;
}
/* Override Mantine Text default alignment */
.table-v3 .table-v3-header-text .mantine-Text-root {
  text-align: center !important;
}

/* Sort icon: floats above header (space provided by paddingTop on table wrapper) */
.table-v3-sort-icon {
  position: absolute;
  left: 50%;
  top: -18px;
  transform: translateX(-50%);
  z-index: 100;
  pointer-events: none;
}
.table-v3-sort-icon .sort-indicator {
  opacity: 0;
  transition: opacity 0.15s ease;
  display: inline-flex;
  align-items: center;
  background: var(--shell-bg);
  border-radius: 50%;
  padding: 3px;
  color: rgba(255, 255, 255, 0.9);
}
.sortable-header:hover .table-v3-sort-icon .sort-indicator {
  opacity: 1;
}
.table-v3-sort-icon .sort-indicator svg {
  color: inherit;
}
[data-mantine-color-scheme='light'] .table-v3-sort-icon .sort-indicator {
  background: #dee2e6;
  color: rgba(0, 0, 0, 0.75);
}

/* Header row: compact height, refined background */
.table-v3 .table-v3-header-row th {
  padding: 4px 10px;
  line-height: 1.3;
  background: var(--topbar-bg);
  border-bottom: 1px solid var(--border-subtle);
  border-top: none;
  text-align: center;
}
[data-mantine-color-scheme='light'] .table-v3 .table-v3-header-row th {
  background: #eef1f4;
  border-bottom: 1px solid #dee2e6;
}

/* Data rows: subtle borders. First column left-aligned, all others center-aligned */
.table-v3 .table-v3-cell-first,
.table-v3 .table-v3-cell-first * {
  text-align: left !important;
}
.table-v3 .table-v3-cell-center,
.table-v3 .table-v3-cell-center * {
  text-align: center !important;
}
.table-v3 .table-v3-data-row {
  border-bottom: 1px solid var(--border-subtle);
}
.table-v3 .table-v3-data-row:last-child {
  border-bottom: none;
}
[data-mantine-color-scheme='light'] .table-v3 .table-v3-data-row {
  border-bottom: 1px solid #e9ecef;
}
[data-mantine-color-scheme='light'] .table-v3 .table-v3-data-row:last-child {
  border-bottom: none;
}

/* Row hover - blueish tint for clean, prominent highlight */
.table-v3 .hover-row {
  transition: background-color 0.15s ease;
}
[data-mantine-color-scheme='dark'] .table-v3 .hover-row:hover {
  background-color: rgba(110, 168, 254, 0.12);
}
[data-mantine-color-scheme='light'] .table-v3 .hover-row:hover {
  background-color: rgba(34, 139, 230, 0.12);
}

/* Sortable header hover */
[data-mantine-color-scheme='dark'] .table-v3 .sortable-header:hover {
  background-color: rgba(255, 255, 255, 0.05) !important;
  transition: background-color 0.12s ease;
}
[data-mantine-color-scheme='light'] .table-v3 .sortable-header:hover {
  background-color: rgba(0, 0, 0, 0.04) !important;
  transition: background-color 0.12s ease;
}

/* Entity ID column: copy icon on hover, match sort icon color (tabler:copy) */
.table-v3 .table-v3-entity-id-cell:hover .table-v3-copy-id {
  opacity: 1 !important;
}
.table-v3 .table-v3-copy-id {
  transition: opacity 0.15s ease;
}
.table-v3 .table-v3-copy-icon {
  color: rgba(255, 255, 255, 0.9);
}
[data-mantine-color-scheme='light'] .table-v3 .table-v3-copy-icon {
  color: rgba(0, 0, 0, 0.75);
}

/* First column link (entity name/description): blue, left-aligned, no icon, no cell background */
.table-v3 .table-v3-description-link {
  text-align: left;
  background: transparent;
  display: block;
  min-width: 0;
  overflow: hidden;
}
.table-v3 .table-v3-description-link:hover {
  text-decoration: underline !important;
  background: transparent;
}
[data-mantine-color-scheme='dark'] .table-v3 .table-v3-description-link,
[data-mantine-color-scheme='dark'] .table-v3 .table-v3-description-link .mantine-Text-root {
  color: var(--accent-blue);
}
[data-mantine-color-scheme='light'] .table-v3 .table-v3-description-link,
[data-mantine-color-scheme='light'] .table-v3 .table-v3-description-link .mantine-Text-root {
  color: #228be6;
}

/* Empty state: clean, centered */
.table-v3-empty-td {
  border-bottom: none;
  vertical-align: middle;
  padding: 0 !important;
}
.table-v3-empty-cell {
  min-height: 380px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 48px 32px;
  text-align: center;
  background: var(--hover-white-soft);
  border-radius: 8px;
  margin: 24px 24px 32px;
}
[data-mantine-color-scheme='light'] .table-v3-empty-cell {
  background: rgba(233, 236, 239, 0.4);
}
.table-v3-empty-message {
  color: var(--text-muted) !important;
  font-weight: 500;
  letter-spacing: 0.01em;
}
[data-mantine-color-scheme='light'] .table-v3-empty-message {
  color: #6b7280 !important;
}
.table-v3-empty-subtitle {
  color: #868e96 !important;
  font-weight: 400;
}
[data-mantine-color-scheme='light'] .table-v3-empty-subtitle {
  color: #868e96 !important;
}
.table-v3-empty-icon {
  color: var(--text-muted) !important;
  margin-bottom: 12px;
}
[data-mantine-color-scheme='light'] .table-v3-empty-icon {
  color: #6b7280 !important;
}

/* Empty state stretch: fill full width and height, centered content */
.table-v3-container.table-v3-empty-stretch {
  width: 100%;
  margin-top: -10px;
}
.table-v3-container.table-v3-empty-stretch .mantine-Stack-root {
  width: 100%;
}
.table-v3-container.table-v3-empty-stretch .mantine-ScrollArea-root {
  width: 100%;
}
.table-v3-empty-stretch {
  width: 100% !important;
  min-width: 100%;
  table-layout: fixed;
}
.table-v3-empty-stretch tbody {
  display: block;
  width: 100%;
}
.table-v3-empty-stretch tbody tr {
  display: block;
  width: 100%;
}
.table-v3-empty-stretch .table-v3-empty-td {
  display: block;
  width: 100%;
  border-bottom: none;
}
.table-v3-empty-stretch .table-v3-empty-cell {
  min-height: 400px;
  width: 100%;
  margin: 0;
  padding: 32px;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  background: var(--hover-white-soft);
}
[data-mantine-color-scheme='light'] .table-v3-empty-stretch .table-v3-empty-cell {
  background: rgba(233, 236, 239, 0.45);
}

/* Pagination: compact rounded-rect page buttons */
.table-v3-container .table-v3-page-btn {
  min-width: 22px !important;
  height: 22px !important;
  padding: 0 4px !important;
  border-radius: 4px !important;
  font-size: 11px !important;
  font-weight: 500 !important;
}


/* ===== tabs.css ===== */
/* –––––––––––––––––––––––––––––––––––––––––––––––––– 
Tabs
–––––––––––––––––––––––––––––––––––––––––––––––––– */


/* –––––––––––––––––––––––––––––––––––––––––––––––––– 
Dark Mode
–––––––––––––––––––––––––––––––––––––––––––––––––– */


/* [data-mantine-color-scheme='dark'] .mantine-Tabs-root .mantine-Tabs-panel {
    color: #ffffff;
}
[data-mantine-color-scheme='dark'] .mantine-Tabs-tab {
    color: #FFFFFF;
    background-color: transparent;
}
[data-mantine-color-scheme='dark'] .mantine-Tabs-tab:hover {
    color: #FFFFFF;
    background-color: rgba(59, 91, 219, 0.2);
    border-bottom: 1px solid #35373B;        
}
[data-mantine-color-scheme='dark']  .mantine-Tabs-panel {
    color: #FFFFFF;
}
[data-mantine-color-scheme='dark'] .mantine-Tabs-tab[data-active] {
    border-bottom: 2px solid #0D99FF;
    color: #fff;
}
[data-mantine-color-scheme='dark'] .mantine-Tabs-tabsList {
    border-bottom: 1px solid #35373B;    
} */

/* –––––––––––––––––––––––––––––––––––––––––––––––––– 
Light Mode
–––––––––––––––––––––––––––––––––––––––––––––––––– */

/* [data-mantine-color-scheme='light'] .mantine-Tabs-root .mantine-Tabs-panel {
    color: #5F6B7C;
}
[data-mantine-color-scheme='light'] .mantine-Tabs-tab {
    color: #5F6B7C;
    background-color: transparent;
}
[data-mantine-color-scheme='light'] .mantine-Tabs-tab:hover {
    color: #5F6B7C;
    background-color: #E8EAEE;
    border-bottom: 2px solid rgb(222, 226, 230);        
}
[data-mantine-color-scheme='light']  .mantine-Tabs-panel {
    color: #5F6B7C;
}
[data-mantine-color-scheme='light'] .mantine-Tabs-tab[data-active] {
    border-bottom: 2px solid #225EB0;
    color: #5F6B7C;
}
[data-mantine-color-scheme='light'] .mantine-Tabs-tabsList {
    border-bottom: 2px solid rgb(222, 226, 230);    
}  */


/* ===== tabs_entity.css ===== */
/* –––––––––––––––––––––––––––––––––––––––––––––––––– 
Tabs Grouping
–––––––––––––––––––––––––––––––––––––––––––––––––– */

.tabs_entity_group {
  border-radius: 10px;
  padding: 5px;
}

[data-mantine-color-scheme='light'] .tabs_entity_group {
  background-color: #FFFFFF;
} 


/* Tab Panel Container */
.mantine-Tabs-panel {
  padding: 1rem;
  /* background-color:  #2a2c32;   */
  /* border-radius: 8px;
  border: 1px solid #3a3d44; */
  color: #e0e0e0;  /* Light text for contrast */
  /* box-shadow: 0 0 8px rgba(0, 0, 0, 0.3);
  margin-top: 0.5rem; */
}

/* Optional: If you want tab panel content to be scrollable */
.mantine-Tabs-panel > div {
  max-height: calc(100vh - 100px);
  overflow-y: auto;
  padding-right: 6px;
}



/* –––––––––––––––––––––––––––––––––––––––––––––––––– 
Dark Mode
–––––––––––––––––––––––––––––––––––––––––––––––––– */
[data-mantine-color-scheme='dark'] .tabs_entity_pills .mantine-Tabs-root .mantine-Tabs-panel {
  color: #ffffff;
}
[data-mantine-color-scheme='dark'] .tabs_entity_pills .tabs_entity_group .mantine-Tabs-tab {
  color: #B9BABD;
  background-color: transparent;
}
[data-mantine-color-scheme='dark'] .tabs_entity_pills .tabs_entity_group .mantine-Tabs-tab:hover {
  color: #FFFFFF;
  background-color: rgba(55, 65, 81, 0.5);
}
[data-mantine-color-scheme='dark'] .tabs_entity_pills .tabs_entity_group .mantine-Tabs-tab[data-active] {
  background: linear-gradient(135deg, rgb(70 166 255 / 70%) 0%, rgb(102 99 255 / 70%) 100%);
  color: #fff;
}


/* –––––––––––––––––––––––––––––––––––––––––––––––––– 
Light Mode
–––––––––––––––––––––––––––––––––––––––––––––––––– */



/* ===== tabs_home.css ===== */

/* –––––––––––––––––––––––––––––––––––––––––––––––––– 
Home Page — Tab Pills
–––––––––––––––––––––––––––––––––––––––––––––––––– */
.home_tabs .mantine-Tabs-tab {
    padding: 4px 10px;
    border-radius: 4px;
    border: 0.5px solid transparent;
    background: transparent;
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 12px;
    line-height: 1;
    transition: background .15s, border-color .15s, color .15s;
    outline: none;
}
.home_tabs .mantine-Tabs-tabsList {
    gap: 6px;
    border-bottom: none;
}
.home_tabslist .mantine-Tabs-tabsList {
    border-bottom: none;
}
.home_tabs_panel {
    background: none;
    border: none;
    box-shadow: none;
    padding: 0px;
    margin-top: 10px;
}

/* Icon visibility control — legacy (icons removed from tabs, rules kept inert) */
.home_tabs .mantine-Tabs-tab .tab-icon-outline {
    display: inline-block;
}
.home_tabs .mantine-Tabs-tab .tab-icon-solid {
    display: none;
}

/* Pill dot + count helpers */
.home-fpill-dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    flex-shrink: 0;
    display: inline-block;
}
.home-fpill-count {
    font-size: 12px;
    font-family: monospace;
    padding: 2px 8px;
    border-radius: 5px;
    margin-left: 2px;
    font-weight: 600;
}
.count-red   { background: rgba(226, 75, 74, .15);  color: #e24b4a; }
.count-green { background: rgba(61, 214, 140, .12); color: #3dd68c; }
.count-blue  { background: rgba(74, 158, 221, .12); color: #6eb3f7; }

/* –––––––––––––––––––––––––––––––––––––––––––––––––– 
Dark Mode
–––––––––––––––––––––––––––––––––––––––––––––––––– */
[data-mantine-color-scheme='dark'] .home_tabs > .mantine-Tabs-list .mantine-Tabs-tab {
    color: #4a6a8a;
    border-color: #1e3048;
    background: transparent;
}
[data-mantine-color-scheme='dark'] .home_tabs > .mantine-Tabs-list .mantine-Tabs-tab:hover {
    color: #8899bb;
    border-color: #2e5f9a;
    background: transparent;
}
[data-mantine-color-scheme='dark'] .home_tabs > .mantine-Tabs-list .mantine-Tabs-tab[data-active] {
    color: #c8d8e8;
    border-color: #2e5f9a;
    background: rgba(74, 130, 220, 0.12);
}

/* Legacy icon toggle — kept for any lingering consumers */
[data-mantine-color-scheme='dark'] .home_tabs > .mantine-Tabs-list .mantine-Tabs-tab[data-active] .tab-icon-outline {
    display: none;
}
[data-mantine-color-scheme='dark'] .home_tabs > .mantine-Tabs-list .mantine-Tabs-tab[data-active] .tab-icon-solid {
    display: inline-block;
}

/* –––––––––––––––––––––––––––––––––––––––––––––––––– 
Light Mode
–––––––––––––––––––––––––––––––––––––––––––––––––– */
[data-mantine-color-scheme='light'] .home_tabs > .mantine-Tabs-list .mantine-Tabs-tab {
    color: #6b7280;
    border-color: rgb(222, 226, 230);
    background: transparent;
}
[data-mantine-color-scheme='light'] .home_tabs > .mantine-Tabs-list .mantine-Tabs-tab:hover {
    color: #1f2937;
    border-color: #b9d4ee;
    background: transparent;
}
[data-mantine-color-scheme='light'] .home_tabs > .mantine-Tabs-list .mantine-Tabs-tab[data-active] {
    color: #1a1a2e;
    border-color: #2563eb;
    background: rgba(37, 99, 235, 0.08);
}

/* Legacy icon toggle — kept for any lingering consumers */
.home_tabs > .mantine-Tabs-list .mantine-Tabs-tab[data-active] .tab-icon-outline {
    display: none;
}
.home_tabs > .mantine-Tabs-list .mantine-Tabs-tab[data-active] .tab-icon-solid {
    display: inline-block;
}

/* –––––––––––––––––––––––––––––––––––––––––––––––––– 
Task page tabs (unchanged — different page)
–––––––––––––––––––––––––––––––––––––––––––––––––– */
.task_tabslist .mantine-Tabs-tab[data-active] {
    background: linear-gradient(135deg, rgb(70 166 255 / 70%) 0%, rgb(102 99 255 / 70%) 100%) !important;
    border-bottom: 2px solid rgb(96 165 250) !important;
    color: white;
    border-radius: 5px 5px 0 0 !important;
}

.task_tabslist .mantine-Tabs-tab[data-active]:hover {
    background: linear-gradient(135deg, rgb(59 130 246 / 95%) 0%, rgb(37 99 235 / 95%) 100%) !important;
    border-bottom: 2px solid rgb(59 130 246) !important;
    border-radius: 5px 5px 0 0 !important;
}

.task_tabslist .mantine-Tabs-tab:hover {
    background: rgba(96, 165, 250, 0.15) !important;
    border-bottom: 2px solid rgba(96, 165, 250, 0.6) !important;
    border-radius: 5px 5px 0 0 !important;
}


/* ===== tabs_taf_v3.css ===== */
/* Tab panel show/hide logic */
.taf-tab-panel {
    display: none;
}

.taf-tab-panel.active {
    display: flex;
    width: 100%;
}

/* Button styling */
[data-mantine-color-scheme='dark'] .tabs_taf .stash_taf_tab_button_class {
    color: #9CA3AF;
    background-color: transparent;
}

[data-mantine-color-scheme='dark'] .tabs_taf .stash_taf_tab_button_class:hover {
    color: #E5E7EB;
    background-color: rgba(55, 65, 81, 0.5);
}

[data-mantine-color-scheme='dark'] .tabs_taf .stash_taf_tab_button_class.active {
    background-color: #374151;
    color: #FFFFFF;
    border-radius: 10px;
}

/* SVG icon states */
[data-mantine-color-scheme='dark'] .tabs_taf .stash_taf_tab_button_class.active svg,
[data-mantine-color-scheme='dark'] .tabs_taf .stash_taf_tab_button_class:hover svg {
    opacity: 1;
}

/* Button wrapper active state (in case the active class goes on the wrapper div) */
.stash_taf_tab_button_class.active {
    background-color: #374151;
    color: #FFFFFF;
    border-radius: 10px;
}

.stash_taf_tab_button_class:hover {
    background-color: rgba(55, 65, 81, 0.5);
    color: #E5E7EB;
    border-radius: 10px;
    
}

/* Default button state (fallback) */
.stash_taf_tab_button_class {
    color: #9CA3AF;
    background-color: transparent;
}


/* ===== tarc_div.css ===== */
.tarc2_tabs_div{
    display: flex;
    align-items: center;
    justify-content: space-between;
    border-radius: 10px;
}

/* –––––––––––––––––––––––––––––––––––––––––––––––––– 
Dark Mode
–––––––––––––––––––––––––––––––––––––––––––––––––– */

/* [data-mantine-color-scheme='dark'] {
    --tarc2-tabs-div-bg: #2E343C;
} */
  
[data-mantine-color-scheme='dark'] .tarc2_tabs_div {
    background-color: var(--tarc2-tabs-div-bg);
}
  
/* –––––––––––––––––––––––––––––––––––––––––––––––––– 
Light Mode
–––––––––––––––––––––––––––––––––––––––––––––––––– */

[data-mantine-color-scheme='light'] {
    --tarc2-tabs-div-bg: #FFFFFF;
}
  
[data-mantine-color-scheme='light'] .tarc2_tabs_div {
    background-color: var(--tarc2-tabs-div-bg);
}
  


/* ===== task_stepper.css ===== */
/* Stepper hover effects for clickable circles */
div[id*='btn_task_wf_stepper']:hover {
    transform: scale(1.1);
    box-shadow: 0 4px 8px rgba(0,0,0,0.3) !important;
}

/* Animation for completion */
@keyframes fillGreen {
    0% {
        background-color: var(--mantine-color-dark-4);
    }
    100% {
        background-color: #40c057;
        border-color: #40c057;
    }
}

/* Apply animation to completing circle */
.completing-animation {
    animation: fillGreen 0.5s ease-in-out forwards;
}

/* Pulse effect for active clickable Mark Complete */
div[id*='"is_complete":true']:not(:hover) {
    animation: pulse 2s infinite;
}

@keyframes pulse {
    0% {
        box-shadow: 0 2px 4px rgba(0,0,0,0.2);
    }
    50% {
        box-shadow: 0 2px 8px rgba(0,0,0,0.4);
    }
    100% {
        box-shadow: 0 2px 4px rgba(0,0,0,0.2);
    }
}

/* Transition for lines when step changes */
.stepper-line {
    transition: background-color 0.3s ease;
}


/* mark complete loading animation */
.mark-complete-circle.loading {
    position: relative;
    pointer-events: none;
    opacity: 0.7;
}

.mark-complete-circle.loading::after {
    content: "";
    position: absolute;
    width: 20px;
    height: 20px;
    top: 50%;
    left: 50%;
    margin-left: -10px;
    margin-top: -10px;
    border: 2px solid transparent;
    border-top-color: white;
    border-radius: 50%;
    animation: spinner 0.6s linear infinite;
}

@keyframes spinner {
    to { transform: rotate(360deg); }
}


/* ===== task_tabs.css ===== */
/* Remove ALL borders from Mantine TabsList components */
/* .mantine-Tabs-list,
.taf_task_tabslist,
div[class*="mantine-Tabs-list"] {
    border: none !important;
    border-bottom: none !important;
} */

/* Remove border from parent container */
.taf_task_tabs .mantine-Tabs-list {
    border-bottom: #374151 !important;
}

/* Style for individual tab buttons */
.taf_task_tabslist .mantine-Tabs-tab,
.taf_task_tabslist button[role="tab"] {
    background-color: transparent !important;
    /* border: none !important; */
    border-bottom: #374151 !important;
    color: #ffffff !important;
    font-weight: normal !important;
    transition: background-color 0.2s ease !important;
}

/* Hover state for non-active tabs */
.taf_task_tabslist .mantine-Tabs-tab:hover:not([aria-selected="true"]),
.taf_task_tabslist button[role="tab"]:hover:not([aria-selected="true"]) {
    background-color: #374151 !important;
}

/* Active tab styling */
.taf_task_tabslist .mantine-Tabs-tab[aria-selected="true"],
.taf_task_tabslist button[role="tab"][aria-selected="true"] {
    color: #228be6 !important;
    font-weight: bold !important;
    border: none !important;
    border-bottom: #228be6 !important;
}

/* Remove the active tab indicator line */
.taf_task_tabslist .mantine-Tabs-tab::before,
.taf_task_tabslist .mantine-Tabs-tab::after {
    display: none !important;
}

/* Remove any potential border/outline on focus */
.taf_task_tabslist .mantine-Tabs-tab:focus-visible {
    outline: none !important;
    box-shadow: none !important;
}

/* Nuclear option - remove border from any element with these class combinations */
.m_576c9d4.m_89d33d6d {
    border-bottom: none !important;
}


/* ===== text_input.css ===== */
/* –––––––––––––––––––––––––––––––––––––––––––––––––– 
Text Input
–––––––––––––––––––––––––––––––––––––––––––––––––– */


/* –––––––––––––––––––––––––––––––––––––––––––––––––– 
Dark Mode
–––––––––––––––––––––––––––––––––––––––––––––––––– */

[data-mantine-color-scheme='dark'] .mantine-TextInput-label {
    color: #D1D2D3;
}



/* –––––––––––––––––––––––––––––––––––––––––––––––––– 
Light Mode
–––––––––––––––––––––––––––––––––––––––––––––––––– */

[data-mantine-color-scheme='light'] .mantine-TextInput-label {
    color: #3D3B3B;
}


/* ===== title.css ===== */
/* –––––––––––––––––––––––––––––––––––––––––––––––––– 
Header (dmc.Title)
–––––––––––––––––––––––––––––––––––––––––––––––––– */
.header {
    font-weight: 600;
}

/* –––––––––––––––––––––––––––––––––––––––––––––––––– 
Dark Mode
–––––––––––––––––––––––––––––––––––––––––––––––––– */
[data-mantine-color-scheme='dark'] .mantine-Title-root {
    color: #FFFFFF;
}


/* –––––––––––––––––––––––––––––––––––––––––––––––––– 
Light Mode
–––––––––––––––––––––––––––––––––––––––––––––––––– */
[data-mantine-color-scheme='light'] .mantine-Title-root {
    color: #3D3B3B;
}


/* ===== workplan.css ===== */
/* action buttons - hover ///////////////////////////////////////  */

.button_saved:hover {
    background-color: #e3f2fd !important;
}

.button_submitted:hover {
    background-color: #fff3e0 !important;
}
/* activities panel ///////////////////////////////////////  */
.activities-panel-expanded {
    overflow: visible !important;
    position: relative !important;
}

.activities-panel-collapsed {
    overflow: hidden !important;
    position: relative !important;
}

.activities-panel-collapsed .activities-header,
.activities-panel-collapsed .activity-card,
.activities-panel-collapsed [id$="_header_content"] {
    opacity: 0 !important;
    pointer-events: none !important;
}

.panel-toggle-btn {
    z-index: 9000 !important;
}

.panel-toggle-btn:hover {
    background-color: rgba(75, 85, 101, 1) !important;
    width: 16px !important;
    height: 100% !important;
}

/* Ensure smooth transitions */
.activities-panel-expanded,
.activities-panel-collapsed {
    transition: width 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
}

/* activities checkbox ///////////////////////////////////////  */
/* Target the actual Mantine checkbox root element */
.activity_checkbox .mantine-Checkbox-root {
    display: flex !important;
    align-items: center !important;
    gap: 2px !important;
}

/* Target the checkbox input and label wrapper */
.activity_checkbox .mantine-Checkbox-body {
    display: flex !important;
    align-items: center !important;
    gap: 2px !important;
}

/* Ensure the label text aligns properly */
.activity_checkbox .mantine-Checkbox-label {
    display: flex !important;
    align-items: center !important;
    line-height: 1.2 !important;
    font-size: 12px !important;
    font-weight: 500 !important;
}


/* hours input /////////////////////////////////////// */ 
.hours_input input:disabled {
    color: white !important;
}
.hours_input input:focus {
    background-color: #181a1f !important;
    border: 1px solid #2196f3;
    border-right: 1px solid #2196f3 !important;
    border-bottom: 1px solid #2196f3 !important;
}

/* [data-mantine-color-scheme='dark'] .hours_input input,
[data-mantine-color-scheme='dark'] .hours_input input:focus {
    background-color: inherit !important;
} */

/* activities panel ///////////////////////////////////////  */
#tmw000_activities_panel .mantine-Stack-root {
  gap: 5px !important;
}

/* KPI This Week Hours Button ///////////////////////////// */
.btn_time_weekly_summary:hover {
    background-color: #2196F3 !important;
    cursor: pointer;
}

/* Time Sheet Button Workplan /////////////////////////////////////// */
.time_sheet_btn_workplan:hover {
    border: 1px solid #2196F3 !important;
    border-top: 1px solid #2196F3 !important;
    border-left: none !important;
    background-color: #24262b !important;
    cursor: pointer;
}