/* ═══════════════════════════════════════════════════════════
   atlas-components.css — Atlas Design System: Components
   Canonical, token-based building blocks. Module color is a
   theming variable, not a class-per-color.
   ═══════════════════════════════════════════════════════════ */

    .ds-page {
        padding-top: var(--ds-space-2);
        padding-bottom: var(--ds-space-2);
        padding-left: var(--ds-space-2);
        padding-right: var(--ds-space-2);
        max-width: 100%;
        box-sizing: border-box;
    }

    .ds-section {
        padding-top: var(--ds-space-3);
    }

    .ds-header {
        font-size: var(--ds-font-size-lg);
        font-weight: var(--ds-font-weight-bold);
        line-height: 1.3;
    }

    .ds-header-group {
        display: flex;
        flex-direction: column;
        align-items: flex-start;
    }

    .ds-label {
        font-size: var(--ds-font-size-sm);
        font-weight: var(--ds-font-weight-semibold);
        color: #334155;
        margin-bottom: 0.35rem;
        display: block;
        letter-spacing: 0.01em;
    }

    .ds-label--muted {
        color: #64748b;
        font-size: var(--ds-font-size-xxs);
    }


    /* Form Controls */
    .ds-input,
    .ds-textarea,
    .ds-select {
        width: 100%;
        padding: 0.5rem 0.75rem;
        border: 1px solid #cbd5e1;
        border-radius: 6px;
        font-size: var(--ds-font-size-sm);
        background: #fafafa;
        color: #1e293b;
        font-family: inherit;
        transition: border-color 0.2s, box-shadow 0.2s;
    }

        .ds-input:focus,
        .ds-textarea:focus,
        .ds-select:focus {
            border-color: var(--ds-color-accent, #2563eb);
            box-shadow: 0 0 0 2px rgba(37,99,235,0.12);
            outline: none;
        }

        .ds-input[readonly],
        .ds-textarea[readonly] {
            background: #f1f5f9;
            color: #64748b;
            cursor: default;
        }

/*
Customize the btn btn-sm tag*/

/* Form Validation */
.validation-message {
    color: #dc3545;
    font-size: var(--ds-font-size-xs);
    margin-top: 0.25rem;
    display: block;
}

.field-error {
    display: block;
    font-size: var(--ds-font-size-xs);
    color: #dc3545;
    margin-top: 0.25rem;
}

/* Error banner */
.form-error-banner {
    display: flex;
    align-items: center;
    padding: 0.625rem 0.875rem;
    background: var(--atlas-color-danger-bg, #fde2e4);
    border: 1px solid #f5c2c7;
    border-left: 4px solid var(--atlas-color-danger, #dc3545);
    border-radius: 7px;
    color: #842029;
    font-size: 0.875rem;
}

/* Success banner */
.form-success-banner {
    display: flex;
    align-items: center;
    padding: 0.625rem 0.875rem;
    background: var(--atlas-color-success-bg, #d1f2e1);
    border: 1px solid #a3d9b8;
    border-left: 4px solid var(--atlas-color-success, #198754);
    border-radius: 7px;
    color: #0f5132;
    font-size: 0.875rem;
}

/* Generic banner panel with action content, e.g. success call-to-action banners */
.atlas-banner {
    padding: 0.875rem 1rem;
    border-radius: 8px;
    font-size: 0.875rem;
}

.atlas-banner-success {
    background: var(--atlas-color-success-bg, #d1f2e1);
    border: 1px solid #a3d9b8;
    border-left: 4px solid var(--atlas-color-success, #198754);
    color: #0f5132;
}

/* ── Favorites Chips ───────────────────────────────────────────────── */
.home-favorites-chips {
    display: flex;
    flex-wrap: wrap;
    gap: var(--ds-space-2, 0.5rem);
    padding: var(--ds-space-1, 0.25rem) 0;
}

.home-favorite-chip {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.35rem 0.85rem;
    border-radius: var(--ds-radius-pill, 999px);
    background-color: var(--ds-color-surface-raised, #f0f4f8);
    color: var(--ds-color-text-primary, #1a1a2e);
    font-size: var(--ds-font-size-sm, 0.875rem);
    font-weight: var(--ds-font-weight-medium, 500);
    text-decoration: none;
    border: 1px solid var(--ds-color-border, #dee2e6);
    transition: background-color var(--ds-transition-fast, 150ms ease), border-color var(--ds-transition-fast, 150ms ease), color var(--ds-transition-fast, 150ms ease);
    white-space: nowrap;
}

    .home-favorite-chip:hover {
        background-color: var(--ds-color-primary, #1f4e79);
        border-color: var(--ds-color-primary, #1f4e79);
        color: #fff;
    }

    .home-favorite-chip .bi {
        font-size: 0.75rem;
        opacity: 0.8;
        color: #f4b942; /* star gold — consistent in both hover states */
    }

/* Dark mode */
[data-bs-theme="dark"] .home-favorite-chip {
    background-color: var(--ds-color-surface-raised, #1e2a38);
    color: var(--ds-color-text-primary, #e8edf2);
    border-color: var(--ds-color-border, #2e3d4f);
}

    [data-bs-theme="dark"] .home-favorite-chip:hover {
        background-color: var(--ds-color-primary, #1f4e79);
        border-color: var(--ds-color-primary, #1f4e79);
        color: #fff;
    }

/* Responsive — full width chips on very small screens */
@media (max-width: 400px) {
    .home-favorites-chips {
        flex-direction: column;
    }

    .home-favorite-chip {
        width: 100%;
    }
}


/* Make disabled outline-secondary buttons have a white background and muted text/border */
.btn-outline-secondary:disabled,
.btn-outline-secondary[disabled] {
    background-color: #fff !important;
    color: #b0b8c1 !important; /* Use a muted gray for disabled text */
    border-color: #cfd8e3 !important;
    opacity: 1; /* Prevent Bootstrap's default opacity reduction */
    cursor: not-allowed;
}


.btn.btn-sm {
    font-size: var(--ds-font-size-sm);
    padding: 0.2rem 0.6rem;
    white-space: nowrap;
}

.btn-remove-file {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.5rem;
    height: 1.5rem;
    padding: 0;
    margin-left: auto;
    background: none;
    border: 1px solid transparent;
    border-radius: 4px;
    color: #aaa;
    font-size: 0.625rem;
    cursor: pointer;
    transition: color 0.15s, background 0.15s, border-color 0.15s;
}

    .btn-remove-file:hover {
        color: #c62828;
        background: #fef2f2;
        border-color: #fca5a5;
    }

.btn-back-inline {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.75rem;
    height: 1.75rem;
    padding: 0;
    border: 1px solid #b8cfea;
    border-radius: 6px;
    background: #eef4fb;
    color: var(--ds-coloratlas-blue);
    font-size: 0.75rem;
    cursor: pointer;
    transition: background 0.15s, color 0.15s, border-color 0.15s, box-shadow 0.15s;
    flex-shrink: 0;
}

    .btn-back-inline:hover {
        background: #dbeafe;
        color: #2563eb;
        border-color: var(--atlas-blue);
        box-shadow: 0 1px 4px rgba(74, 144, 217, 0.25);
    }

/* ── Bootstrap Icons in small table buttons — match Tabler icon optical size ── */
.btn.btn-sm .bi {
    font-size: 0.875rem;
    line-height: 1;
    vertical-align: -0.125em;
}

/* KPI Cards */
.kpi-cards {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 0.75rem;
    margin-bottom: 1rem;
}

.kpi-card {
    background: aliceblue;
    border: 1px solid #e8ecf1;
    border-radius: 10px;
    padding: 0.5rem .5rem;
    box-shadow: 0 1px 3px rgba(0,0,0,0.06);
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

.kpi-card-value {
    font-size: var(--ds-font-size-sm);
    font-weight: var(--ds-font-weight-bold);
    color: #1a1a2e;
    line-height: 1;
}

.kpi-card-label {
    font-size: var(--ds-font-size-xxs);
    font-weight: var(--ds-font-weight-semibold);
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: #8a96a3;
    margin-top: 0.35rem;
}


/* Filter Bar Layout */
.filter-panel {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    gap: 0.5rem;
    margin-bottom: 1rem;
    background: #fff;
    border: 1px solid #e0e0e0;
    border-radius: 8px;
    padding: .75rem;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.06);
}

.filter-group {
    min-width: 120px;
    flex: 1 1 140px;
    display: flex;
    flex-direction: column;
    padding-right:.2rem;
}

.filter-group--search {
    flex: 2 1 240px;
    min-width: 240px;
    max-width: 400px;
}

    .filter-group label {
        font-size: 0.625rem;
        font-weight: 600;
        color: #555;
        margin-bottom: 0.3rem;
        text-transform: uppercase;
        letter-spacing: 0.4px;
    }

    .filter-group select,
    .filter-group input {
        padding: 0.45rem 0.65rem;
        border: 1px solid #ccc;
        border-radius: 6px;
        font-size: 0.75rem;
        background: #fafafa;
        transition: border-color 0.2s, box-shadow 0.2s;
    }

        .filter-group select:focus,
        .filter-group input:focus {
            outline: none;
            border-color: var(--ds-color-atlas-blue);
            box-shadow: 0 0 0 3px rgba(74, 144, 217, 0.15);
        }

.filter-actions {
    display: flex;
    gap: 0.5rem;
    align-items: flex-end;
}

.record-count {
    font-size: 0.6875rem;
    color: #888;
    text-align: right;
}



/*move the search bar to it's own row on tablets/phones, but keep other filter groups on the same row if possible*/
@media (max-width: 1023px) {
    .filter-group--search {
        flex-basis: 100%;
        max-width: 100%;
        min-width: 0;
        margin-bottom: 0.5rem;
    }
}

/* Touch-friendly filter inputs (iPhone / touch devices) */
@media (pointer: coarse) {
    .filter-group select,
    .filter-group input {
        /* 16px prevents iOS Safari from auto-zooming the page on focus */
        font-size: 16px;
        padding: 0.55rem 0.7rem;
        min-height: 44px;
    }

    .filter-actions .atlas-btn {
        min-height: 44px;
    }
}

/* iPhone-friendly filter groups / quick search layout */
@media (max-width: 600px) {
    .atlas-quick-search {
        flex-direction: column;
        align-items: stretch;
        gap: 0.75rem;
        padding: 0.9rem;
    }

    .filter-group,
    .filter-group--search {
        flex: 1 1 100%;
        min-width: 0;
        max-width: 100%;
        width: 100%;
        padding-right: 0;
    }

        .filter-group label {
            font-size: 0.8125rem;
            margin-bottom: 0.35rem;
        }

        .filter-group select,
        .filter-group input {
            width: 100%;
        }

        .filter-group .field-label-row {
            align-items: center;
        }

        .filter-group .week-nav-group {
            gap: 0.25rem;
        }

        .filter-group .week-nav-link {
            width: 2.25rem;
            height: 2.25rem;
            display: inline-flex;
            align-items: center;
            justify-content: center;
        }

            .filter-group .week-nav-link .week-nav-icon {
                width: 16px;
                height: 16px;
            }

    .filter-actions {
        width: 100%;
    }

        .filter-actions .atlas-btn {
            width: 100%;
            justify-content: center;
            min-height: 44px;
            font-size: 1rem;
        }

    .record-count {
        text-align: center;
        font-size: 0.8125rem;
        order: 3;
    }
}


/* ── Header Card — Blue Header Variant ───────────────── */

.td-header-card.td-header-card--has-header {
    padding: 0;
    overflow: hidden;
}

.td-header-card-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
    padding: 0.6rem 1.25rem;
    width: 100%;
    box-sizing: border-box;
    background: linear-gradient(135deg, #3f6aa6 0%, #4f7fbf 60%, #5f94d9 100%);
}

    .td-header-card-bar .td-header-title h2 {
        color: #fff;
    }

        .td-header-card-bar .td-header-title h2 i {
            color: rgba(255, 255, 255, 0.85);
        }

    .td-header-card-bar [class*="pill"] {
        border: 1px solid rgba(255, 255, 255, 0.35);
    }

.td-header-card-body {
    padding: 1rem 1.25rem;
}

/* Pill vertical align bottom for table cell */
.align-bottom {
    display: inline-flex;
    align-items: flex-end;
    height: 100%;
    vertical-align: bottom;
}

/* ── Lookup Field (reusable modal picker) ─────────────── */
.lookup-field {
    width: 100%;
}

.lookup-input {
    display: flex;
    align-items: center;
    border: 1px solid #ccc;
    border-radius: 6px;
    background: #fafafa;
    cursor: pointer;
    transition: border-color 0.2s, box-shadow 0.2s;
    overflow: hidden;
}

    .lookup-input:hover {
        border-color: #aaa;
    }

    .lookup-input:focus-within {
        border-color: var(--ds-color-atlas-blue);
        box-shadow: 0 0 0 3px rgba(74, 144, 217, 0.15);
    }

.lookup-input-text {
    flex: 1;
    border: none;
    background: transparent;
    padding: 0.45rem 0.65rem;
    font-size: 0.75rem;
    color: #333;
    cursor: pointer;
    outline: none;
    min-width: 0;
}

    .lookup-input-text::placeholder {
        color: #999;
    }

.lookup-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2rem;
    height: 100%;
    min-height: 2rem;
    padding: 0;
    border: none;
    background: none;
    cursor: pointer;
    color: #888;
    font-size: 0.6875rem;
    flex-shrink: 0;
    transition: color 0.12s, background 0.12s;
}

    .lookup-btn:hover {
        color: #333;
        background: #eee;
    }

.lookup-btn-browse {
    border-left: 1px solid #e0e0e0;
    color: var(--ds-color-atlas-blue);
}

    .lookup-btn-browse:hover {
        background: #eef4fb;
        color: #357abd;
    }

.lookup-btn btn-sm btn-outline-secondary:hover {
    color: #c62828;
    background: #fef2f2;
}

.lookup-backdrop {
    position: fixed;
    inset: 0;
    z-index: 1040;
    background: rgba(0, 0, 0, 0.45);
    animation: fadeIn 0.12s ease-out;
}

.lookup-modal {
    position: fixed;
    z-index: 1041;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 94%;
    max-width: 520px;
    max-height: 80vh;
    background: #fff;
    border-radius: 12px;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.25);
    display: flex;
    flex-direction: column;
    overflow: hidden;
    animation: scaleIn 0.15s ease-out;
}

.lookup-modal-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.75rem 1rem;
    background: linear-gradient(135deg, #3f6aa6 0%, #4f7fbf 60%, #5f94d9 100%);
    color: #fff;
    flex-shrink: 0;
}

    .lookup-modal-header h4 {
        margin: 0;
        font-size: 0.875rem;
        font-weight: 700;
        display: flex;
        align-items: center;
        gap: 0.4rem;
        color: #fff;
    }

        .lookup-modal-header h4 i {
            font-size: 0.875rem;
            margin: 0;
        }

.lookup-search-bar {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.625rem 1rem;
    border-bottom: 1px solid #e8ecf1;
    background: #f8fafe;
    flex-shrink: 0;
}

.lookup-search-icon {
    color: #8a96a3;
    font-size: 0.875rem;
    flex-shrink: 0;
    margin: 0;
}

.lookup-search-input {
    flex: 1;
    border: none;
    background: transparent;
    font-size: 0.8125rem;
    color: #333;
    outline: none;
    min-width: 0;
}

    .lookup-search-input::placeholder {
        color: #aaa;
    }

.lookup-results {
    flex: 1;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
}

.lookup-result-count {
    padding: 0.35rem 1rem;
    font-size: 0.625rem;
    font-weight: 600;
    color: #8a96a3;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    background: #f5f7fa;
    border-bottom: 1px solid #eee;
    flex-shrink: 0;
}

.lookup-item {
    display: flex;
    flex-direction: column;
    gap: 0.1rem;
    padding: 0.65rem 1rem;
    cursor: pointer;
    border-bottom: 1px solid #f5f5f5;
    transition: background 0.1s;
    position: relative;
}

    .lookup-item:last-child {
        border-bottom: none;
    }

    .lookup-item:hover {
        background: #f0f6ff;
    }

    .lookup-item:active {
        background: #dbeafe;
    }

    .lookup-item.lookup-item-selected {
        background: #eff6ff;
        border-left: 3px solid var(--ds-color-atlas-blue);
    }

.lookup-item-primary {
    font-size: 0.8125rem;
    font-weight: 600;
    color: #1a1a2e;
}

.lookup-item-detail {
    flex: 1;
    min-width: 0;
}

.lookup-item-detail-row {
    font-size: 0.6125rem;
    font-weight: 600;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
}

.lookup-item-detail-right {
    margin-left: auto;
    font-size: 0.6875rem;
    font-weight: 700;
    color: #111;
    white-space: nowrap;
    text-align: right;
}

/* ── Lookup Filter Bar & UOM Toggles ─────────────────── */

.lookup-filter-bar {
    padding: 0.375rem 0.75rem;
    border-bottom: 1px solid #f0f2f5;
    background: #fafbfc;
}

.lookup-uom-toggles {
    display: flex;
    flex-wrap: wrap;
    gap: 0.3rem;
    align-items: center;
}

.uom-toggle {
    border: 1px solid #e0e4ea;
    background: #fff;
    padding: 0.2rem 0.55rem;
    font-size: 0.625rem;
    font-weight: 600;
    color: #6b7280;
    border-radius: 4px;
    cursor: pointer;
    transition: background 0.15s, color 0.15s, border-color 0.15s;
    line-height: 1.4;
}

    .uom-toggle:hover {
        background: #f5f7fa;
        border-color: #cbd5e0;
    }

    .uom-toggle.active {
        background: var(--ds-color-atlas-blue, #2563eb);
        color: #fff;
        border-color: var(--ds-color-atlas-blue, #2563eb);
    }

        .uom-toggle.active:hover {
            background: var(--ds-color-atlas-blue, #2563eb);
        }

.uom-toggle-clear {
    color: #dc3545;
    border-color: #f5c2c7;
}

    .uom-toggle-clear:hover {
        background: #fff5f5;
        border-color: #dc3545;
    }


.h4-label {
    font-family: inherit;
    font-size: var(--ds-font-size-sm);
    font-weight: var( --ds-font-weight-semibold);
    line-height: 1.2;
}




/* Responsive 25/75 split for attachments and status panels */
.attachments-status-layout {
    display: flex;
    gap: 1.5rem;
    align-items: flex-start;
}

.attachments-panel {
    flex: 0 0 50%;
    min-width: 260px;
    max-width: 420px;
}

.status-panel {
    flex: 1 1 50%;
    min-width: 0;
}

@media (max-width: 1400px) {
    .attachments-panel {
        flex-basis: 50%;
        max-width: 480px;
    }

    .status-panel {
        flex-basis: 50%;
    }
}

@media (max-width: 1024px) {
    .attachments-status-layout {
        flex-direction: column;
    }

    .attachments-panel,
    .status-panel {
        flex: 1 1 100%;
        max-width: 100%;
    }
}





/* ── Edit Grid ────────────────────────────────────────── */

.td-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
    row-gap: .25rem;
}



.td-grid-full {
    display: grid;
    grid-template-columns: 1fr;
}

.td-grid-2col {
    display: grid;
    grid-template-columns: 1fr 1fr;
}
@media (max-width: 700px) {
    .td-grid-2col {
        grid-template-columns: 1fr;
    }
}

.td-grid-3col {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
}
@media (max-width: 932px) {
    .td-grid-3col {
        grid-template-columns: 1fr 1fr;
    }
}
@media (max-width: 700px) {
    .td-grid-3col {
        grid-template-columns: 1fr;
    }
}

.td-grid-4col {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr 1fr;
}
@media (max-width: 1024px) {
    .td-grid-4col {
        grid-template-columns: 1fr 1fr 1fr;
    }
}
@media (max-width: 932px) {
    .td-grid-4col {
        grid-template-columns: 1fr 1fr;
    }
}
/* Phone: 1 column */
@media (max-width: 700px) {
    .td-grid-4col {
        grid-template-columns: 1fr;
    }
}

.td-grid-6col {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr;
}
@media (max-width: 1024px) {
    .td-grid-6col {
        grid-template-columns: 1fr 1fr 1fr;
    }
}
@media (max-width: 932px) {
    .td-grid-6col {
        grid-template-columns: 1fr 1fr;
    }
}
@media (max-width: 700px) {
    .td-grid-6col {
        grid-template-columns: 1fr;
    }
}

.td-grid-gap {
    row-gap: .25rem;
    column-gap: .25rem;
}






.td-item {
    display: flex;
    flex-direction: column;
    gap: 0.2rem;
}

.td-label {
    font-size: 0.5625rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: #8a96a3;
}

.td-value {
    font-size: 0.8125rem;
    font-weight: 500;
    color: #1a1a2e;
}

.td-item .form-select {
    padding: 0.3rem 0.5rem;
    font-size: 0.75rem;
    border-radius: 6px;
    border: 1px solid #dce1e8;
    max-width: 220px;
}
/* ── Header Card ──────────────────────────────────────── */

.td-header-card {
    background: #fff;
    border: 1px solid #e8ecf1;
    border-radius: 10px;
    padding: 1rem 1.25rem;
    margin-bottom: 1rem;
}

.td-header-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    margin-bottom: 0.875rem;
    padding-bottom: 0.75rem;
    border-bottom: 1px solid #f0f2f5;
}

.td-header-title {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex-wrap: wrap;
}

    .td-header-title h2 {
        font-size: 1rem;
        font-weight: 700;
        color: #1a1a2e;
        margin: 0;
        display: flex;
        align-items: center;
        gap: 0.4rem;
    }

        .td-header-title h2 i {
            color: var(--atlas-blue);
            font-size: 1.125rem;
            margin: 0;
        }

.td-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    color: #b0b8c4;
    font-size: 0.75rem;
}

    .td-empty i {
        font-size: 1.25rem;
        margin: 0;
    }


/* ── Modal ──────────────────────────────────────── */

.td-modal-backdrop {
    position: fixed;
    inset: 0;
    z-index: 1040;
    background: rgba(0, 0, 0, 0.45);
    display: flex;
    align-items: center;
    justify-content: center;
    animation: fadeIn 0.15s ease-out;
}

.td-modal {
    background: #fff;
    border-radius: 12px;
    width: 95%;
    max-width: 480px;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.2);
    animation: fadeInUp 0.2s ease-out;
    overflow: hidden;
}

.td-modal-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: .25rem 1rem;
    background: linear-gradient(135deg, #3f6aa6 0%, #4f7fbf 60%, #5f94d9 100%);
    color: #fff;
}

    .td-modal-header h4 {
        margin: 0;
        font-size: 1rem;
        font-weight: 700;
        color: #fff;
        display: flex;
        align-items: center;
        gap: 0.5rem;
    }

        .td-modal-header h4 i {
            margin: 0;
            font-size: 1rem;
        }

.td-modal-close {
    background: none;
    border: none;
    color: rgba(255, 255, 255, 0.8);
    font-size: 1rem;
    cursor: pointer;
    padding: 0.35rem;
    border-radius: 4px;
    transition: color 0.12s, background 0.12s;
}

    .td-modal-close:hover {
        color: #fff;
        background: rgba(255, 255, 255, 0.15);
    }

.td-modal-body {
    padding: 1.75rem 1.5rem;
    font-size: 1rem;
    line-height: 1.5;
    color: #374151;
}

    .td-modal-body textarea {
        resize: vertical;
        min-height: 100px;
    }

.td-modal-footer {
    display: flex;
    justify-content: flex-end;
    gap: 0.75rem;
}

/* Footers rendered as a direct child of .td-modal (e.g. confirmation/delete
   modals) sit outside .td-modal-body and so need their own bottom padding to
   match modals whose footer is nested inside .td-modal-body (e.g. edit modals). */
.td-modal > .td-modal-footer {
    padding: 0 1.5rem 1.75rem;
}

    .td-modal-footer .atlas-btn {
        min-width: 100px;
        padding: 0.6rem 1.25rem;
        font-size: 0.9375rem;
        text-align: center;
        justify-content: center;
    }

/* iPhone-friendly modal sizing/touch targets */
@media (max-width: 600px) {
    .td-modal-backdrop {
        align-items: flex-end;
        padding: 0;
    }

    .td-modal,
    .td-modal-sm,
    .td-modal-lg {
        width: 100%;
        max-width: 100%;
        border-radius: 16px 16px 0 0;
        max-height: 92vh;
    }

    .td-modal-header {
/*        padding: 1rem 1.1rem;
        padding-top: calc(1rem + env(safe-area-inset-top, 0px));*/
    }

        .td-modal-header h4 {
            font-size: 1.0625rem;
        }

    .td-modal-close {
        font-size: 1.1rem;
        padding: 0.4rem;
        min-width: 2.5rem;
        min-height: 2.5rem;
        display: inline-flex;
        align-items: center;
        justify-content: center;
    }

    .td-modal-body {
        padding: 1.1rem;
        font-size: 1rem;
    }

    .td-modal-footer {
        flex-direction: column-reverse;
        gap: 0.6rem;
        padding: 1rem 1.1rem;
        padding-bottom: calc(1rem + env(safe-area-inset-bottom, 0px));
    }

        .td-modal-footer .atlas-btn {
            width: 100%;
            justify-content: center;
            min-height: 3rem;
            font-size: 1rem;
        }
}

/* ── Modal size variations ─────────────────────────────── */
.td-modal-sm {
    max-width: 420px;
}

.td-modal-lg {
    background: #fff;
    border-radius: 12px;
    width: 95%;
    max-width: 720px;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.2);
    animation: fadeInUp 0.2s ease-out;
    overflow: hidden;
    max-height: 90vh;
    display: flex;
    flex-direction: column;
}

    .td-modal-lg > form {
        display: flex;
        flex-direction: column;
        flex: 1 1 auto;
        overflow: hidden;
        min-height: 0;
    }

    .td-modal-lg .td-modal-body {
        overflow-y: auto;
        flex: 1 1 auto;
        min-height: 0;
    }

    .td-modal-lg .edit-section-title {
        font-size: 0.6875rem;
        font-weight: 700;
        text-transform: uppercase;
        letter-spacing: 0.04em;
        color: #2c5282;
        background: #eef4fb;
        border: 1px solid #d4e2f0;
        border-radius: 6px;
        padding: 0.45rem 0.75rem;
        margin-bottom: 0.75rem;
        display: flex;
        align-items: center;
        gap: 0.35rem;
    }

        .td-modal-lg .edit-section-title:not(:first-child) {
            margin-top: 1.25rem;
        }

        .td-modal-lg .edit-section-title i {
            font-size: 0.75rem;
            color: var(--atlas-blue);
            margin: 0;
        }

    /* ── Form Grid ────────────────────────────────────────── */
    .td-modal-lg .edit-form-grid {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 0.65rem 0.75rem;
    }

    .td-modal-lg .edit-form-grid-3 {
        display: grid;
        grid-template-columns: 1fr 1fr 1fr;
        gap: 0.65rem 0.75rem;
    }

    .td-modal-lg .edit-form-full {
        grid-column: 1 / -1;
    }

.detail-field-fullwidth {
    grid-column: 1 / -1;
}

/*text Alignment*/
.text-right {
    text-align: right;
}

.text-center {
    text-align: center;
}


.detail-panel-buttons {
    margin-top: 1rem;
}



.field-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 0.5rem .75rem;
}
    .field-grid.cols-3 {
        grid-template-columns: repeat(3, 1fr);
    }
    .field-grid.cols-4 {
        grid-template-columns: repeat(4, 1fr);
    }
    .field-grid.cols-6 {
        grid-template-columns: repeat(6, 1fr);
    }
    .field-grid.cols-8 {
        grid-template-columns: repeat(8, 1fr);
    }

.field-group {
    display: flex;
    flex-direction: column;
}

/* Keep the native calendar/clock picker icons visible and clickable. */
input[type="date"]::-webkit-calendar-picker-indicator,
input[type="time"]::-webkit-calendar-picker-indicator {
    cursor: pointer;
}

input[type="date"],
input[type="time"] {
    cursor: pointer;
}

    .field-group label {
        font-size: 0.6875rem;
        font-weight: 600;
        color: #444;
        text-transform: uppercase;
        letter-spacing: 0.04em;
        margin-bottom: 0.35rem;
    }


    .field-group select,
    .field-group input[type="text"],
    .field-group input[type="number"],
    .field-group input[type="email"],
    .field-group input[type="date"],
    .field-group textarea {
        padding: 0.45rem 0.65rem;
        border: 1px solid #ccc;
        border-radius: 6px;
        font-size: 0.75rem;
        background: #fafafa;
        transition: border-color 0.2s, box-shadow 0.2s;
        width: 100%;
        box-sizing: border-box;
    }

    .field-group select {
        -webkit-appearance: none;
        appearance: none;
        background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%23666' d='M6 8.825a.5.5 0 0 1-.354-.146l-3.5-3.5a.5.5 0 1 1 .708-.708L6 7.618l3.146-3.147a.5.5 0 1 1 .708.708l-3.5 3.5A.5.5 0 0 1 6 8.825z'/%3E%3C/svg%3E");
        background-repeat: no-repeat;
        background-position: right 0.65rem center;
        padding-right: 2rem;
    }

        .field-group select:focus,
        .field-group input:focus,
        .field-group textarea:focus {
            outline: none;
            border-color: var(--atlas-blue);
            box-shadow: 0 0 0 3px rgba(74, 144, 217, 0.15);
        }

        .field-group select:disabled,
        .field-group input:disabled,
        .field-group textarea:disabled {
            background: #f0f0f0;
            color: #888;
            cursor: not-allowed;
        }

    .field-group textarea {
        resize: vertical;
        min-height: 5rem;
    }

    /* ── Select/Input consistent height (iPad fix) ──────── */
    .field-group select,
    .field-group .form-input {
        min-height: 2.125rem;
    }

        /* ── Site dropdown — prevent text wrapping ───────────── */
        .field-group select#site {
            min-width: 14rem;
        }



.form-input-static {
    padding: 0.45rem 0.65rem;
    background: #f4f5f7;
    font-size: var(--ds-font-size-sm);
    color: #555;
    border-radius: 4px;
    min-height: 2.25rem;
    display: flex;
    align-items: center;
}

.error-message {
    font-size: 0.75rem;
    padding: 0.4rem 0.75rem;
    margin-top: 0.75rem;
    color: #dc2626;
    background: #fef2f2;
    border: 1px solid #fecaca;
    border-radius: 4px;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.field-required {
    color: var(--ds-error, #dc2626);
    font-weight: 600;
}

.icon-right-space {
    margin-right: var(--ds-space-1);
}

.required-mark {
    color: #e53935;
    margin-left: 2px;
}

.success-message {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 0.75rem;
    background: #f0fdf4;
    border: 1px solid #bbf7d0;
    border-radius: 6px;
    font-size: 0.8125rem;
    color: #15803d;
    margin-bottom: 0.75rem;
}



.field-full {
    grid-column: 1 / -1;
}

.icon-disabled,
.icon-disabled i {
    color: #bdbdbd !important;
    opacity: 0.6;
    pointer-events: none;
    cursor: not-allowed;
}


/* Stack form-actions content vertically when an alert is present */
.form-actions {
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    flex-wrap: wrap;
    gap: 0.75rem;
    padding-top: .75rem;
    position: relative;
}

    .form-actions .alert {
        width: 100%;
        margin-bottom: 1rem;
        order: -1; /* ensures alert is always first in flex row */
    }

@media (max-width: 575.98px) {
    .form-actions {
        padding-bottom: calc(0.75rem + env(safe-area-inset-bottom, 0px));
    }
}


.field-tag {
    display: inline-block;
    padding: 0.1rem 0.4rem;
    border-radius: 4px;
    font-size: 0.5625rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    vertical-align: middle;
    margin-left: 0.35rem;
    background: #e8f5e9;
    color: #2e7d32;
}


/* Forms */
.form-page {
    padding: 1rem 1.5rem 2rem;
    max-width: 1200px;
    margin: 0 auto;
    animation: fadeInUp 0.3s ease-out;
}

.form-panel {
    margin-bottom: 1rem;
}

    .form-panel .detail-panel-header h4 {
        display: flex;
        align-items: center;
        font-size: var(--ds-font-size-sm);
        gap: 0.5rem;
    }

/*    .form-panel .detail-panel-header.detail-panel-gradient-blue h4 {
        font-size: var(--ds-font-size-sm);
        color: #fff;
    }

    .form-panel .detail-panel-header.detail-panel-gradient-blue i {
        font-size: var(--ds-font-size-sm);
        color: #fff;
    }*/

    .form-panel .detail-panel-header i {
        font-size: var(--ds-font-size-sm);
        color: var(--ds-color-atlas-blue);
    }

/* ── Detail Panels ────────────────────────────────────── */

.detail-layout {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
    max-width: 960px;
}

.detail-panel {
    background: #fff;
    border: 1px solid #e0e0e0;
    border-radius: 8px;
    overflow: hidden;
    margin-bottom: 1rem;
}

/* Responsive row for detail panels: side-by-side on desktop, stacked on <=1024px */
.detail-panel-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1rem;
    margin-bottom: 1rem;
}

@media (max-width: 932px) {
    .detail-panel-row {
        grid-template-columns: 1fr;
    }
}

.detail-panel-header {
    display: flex;
    align-items: center;
/*    justify-content: space-between;*/
    padding-left: .75rem; 
    padding-right: .75rem;
    min-height: 1.8rem;
    background: #f8f9fa;
    border-bottom: 1px solid #e0e0e0;
    font-size: var(--ds-font-size-md);
}

    .detail-panel-header h4,
    .detail-panel-header i {
        margin-top: 0;
        margin-bottom: 0;
        padding-top: 0;
        padding-bottom: 0;
        line-height: 1.2; /* Ensures icon/text alignment */
    }

/*    .detail-panel-header.detail-panel-gradient-blue {
        background: linear-gradient(135deg, #3f6aa6 0%, #4f7fbf 60%, #5f94d9 100%);
        color: #fff;
        border-bottom: none;
    }*/

.header-actions {
    display: flex;
    gap: 0.5rem; /* Space between buttons */
    align-items: center;
}

.detail-panel-body {
   padding:0.5rem .5rem;
}

.detail-grid {
    display: grid;
/*    grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));*/
    row-gap: 0.25rem;
}

.detail-field {
    padding: 0.25rem 0;
}

.detail-buttons {
    padding-top: .5rem;
    margin-left: auto;
    display: flex;
    gap: 0.5rem;
}

.detail-field label {
    display: block;
    font-size: 0.625rem;
    font-weight: 600;
    color: #666;
    text-transform: uppercase;
    letter-spacing: 0.03em;
}

.detail-field span,
.detail-field input,
.detail-field select {
    font-size: 0.75rem;
}

.detail-field.full-width {
    margin-top: 1rem;
}

/* iPhone/phone-friendly detail card text sizing (used by GameListing cards,
   AddCrew, and other detail-panel/detail-grid based mobile card views) */
@media (max-width: 700px) {
    .detail-field label {
        font-size: 0.9rem;
    }

    .detail-field span,
    .detail-field input,
    .detail-field select {
        font-size: 1rem;
    }

    .detail-panel-body {
        padding: 0.75rem 1rem;
    }

    .detail-grid {
        row-gap: 0.6rem;
    }

    .detail-field .atlas-status {
        font-size: 0.85rem;
        padding: 0.3rem 0.8rem;
    }
}

.description-block {
    background: #f8f9fa;
    border: 1px solid #e9ecef;
    border-radius: 6px;
    padding: 1rem;
    font-size: 0.75rem;
    white-space: pre-wrap;
    line-height: 1.6;
}

.detail-actions {
    display: flex;
    gap: 0.5rem;
    margin-top: 1.25rem;
    padding-top: 1rem;
    border-top: 1px solid #e9ecef;
}

.detail-footer {
    padding-top: 0.5rem;
}

.detail-address-meta {
    font-size: var(--ds-font-size-md);
    color: #8a96a3;
    margin-bottom: 0.75rem;
    display: flex;
    align-items: center;
    gap: 0.375rem;
}

/* ── Tab Bar ──────────────────────────────────────────── */

.tab-bar {
    display: flex;
    gap: 0;
    margin-bottom: .5rem;
}

.tab-button {
    padding-left: 1.5rem;
    background: none;
    border: none;
    border-bottom: 3px solid transparent;
    font-size: 0.75rem;
    font-weight: 600;
    color: #888;
    cursor: pointer;
    transition: color 0.2s, border-color 0.2s;
    display: flex;
    align-items: center;
    gap: 0.4rem;
}

    .tab-button:hover {
        color: #333;
    }

    .tab-button.active {
        color: var(--atlas-blue);
        border-bottom-color: var(--ds-color-atlas-blue);
    }


.tab-count {
    background: #e0e6ed;
    color: #333;
    border-radius: 1em;
    padding: 0 0.6em;
    font-size: var(--ds-font-size-xs);
    margin-left: 0.4em;
    min-width: 1.5em;
    display: inline-block;
    text-align: center;
}

/* Button Toggle */

.button-toggle {
    display: inline-flex;
    border: 1px solid #d0d5dd;
    border-radius: 6px;
    overflow: hidden;
}

    .button-toggle .toggle-btn {
        font-size: 0.6875rem;
        padding: 0.35rem 0.75rem;
        border: none;
        background: #fff;
        color: #667085;
        cursor: pointer;
        display: inline-flex;
        align-items: center;
        gap: 0.3rem;
        font-weight: 500;
        transition: background 0.15s, color 0.15s;
        white-space: nowrap;
    }

        .button-toggle .toggle-btn:not(:last-child) {
            border-right: 1px solid #d0d5dd;
        }

        .button-toggle .toggle-btn.active {
            background: var(--ds-color-atlas-blue);
            color: #fff;
            font-weight: 600;
        }

        .button-toggle .toggle-btn:hover:not(.active) {
            background: #f5f5f5;
        }

        .button-toggle .toggle-btn:disabled {
            opacity: 0.4;
            cursor: default;
        }

@media (max-width: 576px) {
    .home-section-tab-bar {
        width: 100%;
    }

    .home-section-toggle {
        display: flex;
        width: 100%;
    }

        .home-section-toggle .toggle-btn {
            flex: 1 1 0;
            white-space: normal;
            text-align: center;
            justify-content: center;
            font-size: 0.8rem;
            padding: 0.6rem 0.5rem;
            min-height: 2.6rem;
            line-height: 1.2;
        }
}



/* ── Upload Dropzone ──────────────────────────────────── */
.uploading-indicator {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-top: 0.4rem;
    font-size: var(--ds-font-size-sm);
    color: #2563eb;
}

.upload-area {
    margin-top: 1rem;
}

.upload-dropzone {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    border: 2px dashed #c8d6e5;
    border-radius: 10px;
    background: #f8fafe;
    cursor: pointer;
    transition: border-color 0.2s, background 0.2s;
    width: 100%;
}

    .upload-dropzone:hover {
        border-color: var(--atlas-blue);
        background: #eef4fb;
    }

    .upload-dropzone i {
        font-size: 1.75rem;
        color: var(--atlas-blue);
    }

    .upload-dropzone span {
        font-size: 0.8125rem;
        font-weight: 600;
        color: #333;
    }

    .upload-dropzone small {
        font-size: 0.6875rem;
        color: #888;
    }


/* ── Attachments ──────────────────────────────────────── */

.attachment-list {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.attachment-item {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.6rem 0.75rem;
    background: #f8f9fa;
    border: 1px solid #e9ecef;
    border-radius: 6px;
}

    .attachment-item i {
        font-size: 1.125rem;
        color: #0078d4;
    }

.attachment-info {
    display: flex;
    flex-direction: column;
}

.attachment-name {
    font-weight: 500;
    font-size: 0.75rem;
}

.attachment-meta {
    font-size: 0.625rem;
    color: #888;
}

/* ── Notifications ──────────────────────────────── */

.alert {
    width: 100%;
    box-sizing: border-box;
    margin-bottom: 1rem;
    margin-left: 0;
    margin-right: 0;
    border-radius: 4px;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.alert-success {
    background: #e6f9ed;
    color: #207544;
    border: 1px solid #b6e2c6;
}

.toast {
    position: fixed;
    bottom: 1.5rem;
    right: 1.5rem;
    color: #fff;
    padding: 0.75rem 1.25rem;
    border-radius: 8px;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: var(--ds-font-size-md);
    font-size: var(--ds-font-weight-semibold);
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.2);
    animation: fadeInUp 0.3s ease-out;
    cursor: pointer;
    z-index: 9999;
}

.toast-success {
    background: #2e7d32;
}

.toast--danger {
    background: #c62828;
}

.toast--info {
    background: #1565c0;
}

.toast--warning {
    background: #d97706;
}

/* Tab buttons */
.module-tab-buttons {
    display: flex;
    flex-wrap: wrap;
    gap: 0.375rem;
    margin-bottom: 0.25rem;
}

.module-tab-button {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0.4rem 0.9rem;
    border: 1px solid #dde1e6;
    border-radius: 20px;
    background: #fff;
    color: #555;
    font-size: 0.75rem;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.15s ease;
}

    .module-tab-button:hover {
        border-color: var(--ds-color-brand-red);
        color: var(--ds-color-brand-red);
    }

    .module-tab-button.active {
        background: var(--ds-color-brand-red);
        border-color: var(--ds-color-brand-red);
        color: #fff;
    }

/* Pills */
[class*="pill"] {
    display: inline-block;
    padding: 0.2rem 0.65rem!important;
    border-radius: 999px;
    font-size: 0.6875rem;
    font-weight: 600;
    white-space: nowrap!important;
    line-height: 1.4;
}

.pill {
    display: inline-block;
    padding: 0.15rem 0.55rem;
    border-radius: 10px;
    font-size: 0.65rem;
    font-weight: 600;
    letter-spacing: 0.02em;
}

.pill-red {
    background: #e53935;
    color: #fff!important;
}

.pill-yellow {
    background: #f9a825;
    color: #fff !important;
}

.pill-green {
    background: #2e7d32;
    color: #fff !important;
}

.pill-blue {
    background: #1565c0;
    color: #fff !important;
}

.pill-black {
    background: #1a1a2e;
    color: #fff !important;
}

.pill-gray {
    background: #8a96a3;
    color: #fff !important;
}

.pill-orange {
    background: #c66228;
    color: #fff !important;
}

/* ── Page Breadcrumb Header ──────────────────────────── */

.page-breadcrumb-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-top: 0.25rem;
    margin-bottom: 0.25rem;
    gap: 1rem;
}

.page-breadcrumb-title-group {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.page-breadcrumb-title {
    font-size: .85rem;
    font-weight: 700;
    color: #1e293b;
    letter-spacing: -0.01em;
    line-height: 1.3;
    margin: 0;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

    .page-breadcrumb-title::before {
        content: "";
        display: inline-block;
        width: 4px;
        height: 1.1em;
        background: linear-gradient(180deg, var(--ds-color-atlas-blue) 0%, #2c5282 100%);
        border-radius: 2px;
        flex-shrink: 0;
    }

.page-breadcrumb-trail {
    display: flex;
    align-items: center;
    flex-shrink: 0;
}

    .page-breadcrumb-trail .breadcrumb {
        margin: 0;
        padding: 0;
        background: none;
    }

.page-breadcrumb-title:focus {
    outline: none;
}

.breadcrumb,
.breadcrumb-item,
.breadcrumb-item a {
    font-size: 0.875rem;
}

/* Touch-friendly breadcrumb links/back button (iPhone / touch devices) */
@media (pointer: coarse) {
    .page-breadcrumb-trail .breadcrumb-item a {
        padding: 0.5rem 0.25rem;
        margin: -0.5rem -0.25rem;
        -webkit-tap-highlight-color: transparent;
        touch-action: manipulation;
    }

    .btn-back-inline {
        width: 44px;
        height: 44px;
    }
}




    .home-empty {
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 0.5rem;
        padding: 1.5rem 0;
        color: #8a96a3;
        font-size: 0.75rem;
    }

    .home-error {
        display: flex;
        align-items: center;
        gap: 0.5rem;
        padding: 0.5rem 0.75rem;
        background: #fef2f2;
        border: 1px solid #fecaca;
        border-radius: 6px;
        color: #dc2626;
        font-size: 0.75rem;
    }

        .home-error i {
            margin: 0;
            font-size: 0.875rem;
        }
    /* ── Home: Widget Row ──────── */

    .home-widget-row-3 {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        gap: 0.75rem;
        align-items: start;
    }

    .home-widget-row-2 {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        gap: 0.75rem;
        align-items: start;
    }

    .home-widget {
        background: #fff;
        border: 1px solid #e8ecf1;
        border-radius: 10px;
        overflow: hidden;
        transition: box-shadow 0.15s ease;
    }

        .home-widget:hover {
            box-shadow: 0 2px 12px rgba(0, 0, 0, 0.05);
        }

    .home-widget-header {
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 0.625rem 0.875rem;
        border-bottom: 1px solid #f0f2f5;
    }

        .home-widget-header h3 {
            font-size: 0.75rem;
            font-weight: 700;
            color: #1a1a2e;
            margin: 0;
            display: flex;
            align-items: center;
            gap: 0.4rem;
        }

            .home-widget-header h3 i {
                font-size: 0.875rem;
                color: var(--ds-color-atlas-blue);
                margin: 0;
            }

    .home-widget-link {
        font-size: 0.625rem;
        font-weight: 600;
        color: var(--ds-color-atlas-blue);
        cursor: pointer;
        text-decoration: none;
        transition: color 0.12s;
    }

        .home-widget-link:hover {
            color: #357abd;
            text-decoration: underline;
        }

    .home-widget-header-links {
        display: flex;
        align-items: center;
        gap: 0.5rem;
    }

        .home-widget-header-links .home-widget-link + .home-widget-link::before {
            content: "";
            display: inline-block;
            width: 1px;
            height: 0.7rem;
            background: #ccc;
            margin-right: 0.5rem;
        }

    .home-widget-body {
        padding: 0.75rem 0.875rem;
    }

    .home-widget-empty {
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 0.5rem;
        padding: 1.5rem 0;
        color: #8a96a3;
        font-size: 0.75rem;
    }

    .home-widget-error {
        display: flex;
        align-items: center;
        gap: 0.5rem;
        padding: 0.5rem 0.75rem;
        background: #fef2f2;
        border: 1px solid #fecaca;
        border-radius: 6px;
        color: #dc2626;
        font-size: 0.75rem;
    }

        .home-widget-error i {
            margin: 0;
            font-size: 0.875rem;
        }

    /* Loading States */

    .loading-overlay {
        display: flex;
        justify-content: center;
        align-items: center;
        padding: 5rem 1.5rem;
    }

    .loading-overlay--modal {
        position: fixed;
        inset: 0;
        padding: 1.5rem;
        background: rgba(15, 23, 32, 0.45);
        z-index: 1080;
    }

    .loading-card {
        background: #fff;
        border: 1px solid #e0e0e0;
        border-radius: 12px;
        padding: 3rem 4rem;
        text-align: center;
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
        animation: fadeInUp 0.4s ease-out;
    }

        .loading-card .spinner-ring {
            display: inline-block;
            width: 3rem;
            height: 3rem;
            border: 4px solid #e8ecf1;
            border-top-color: var(--ds-color-atlas-blue);
            border-radius: 50%;
            animation: spin 0.8s linear infinite;
            margin-bottom: 1.25rem;
        }

        .loading-card h3 {
            margin: 0 0 0.4rem;
            font-size: 0.875rem;
            font-weight: 700;
            color: #333;
        }

        .loading-card p {
            margin: 0;
            font-size: 0.75rem;
            color: #888;
        }


 /* Report Toolbar */
.report-toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 0.75rem;
    padding: 0.6rem 0.85rem;
    background: #f9fafb;
    border: 1px solid #e5e7eb;
    border-radius: 8px;
    margin-top: 1rem;
}

.report-toolbar-info {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    font-size: 0.75rem;
    color: #374151;
    font-weight: 600;
}

.report-toolbar-subtitle {
    font-weight: 400;
    color: #6b7280;
}

.report-toolbar-actions {
    display: flex;
    gap: 0.4rem;
}

    /* Impersonation Banner */
    .impersonation-banner {
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 0.5rem;
        padding: 0.4rem 1rem;
        background: #f59e0b;
        color: #1a1a1a;
        font-size: 0.85rem;
        font-weight: 500;
        z-index: 1050;
    }

        .impersonation-banner .btn-light {
            font-size: 0.78rem;
            padding: 0.15rem 0.6rem;
            margin-left: 0.5rem;
        }


/* ── Month / Year Selector Bar ────────────────────────── */
.month-year-bar {
    display: flex;
    align-items: center;
    gap: 1.25rem;
    padding: 0.75rem 1rem;
    background: #fff;
    border: 1px solid #e8ecf1;
    border-radius: 10px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.06);
}

.year-stepper {
    display: flex;
    align-items: center;
    flex-shrink: 0;
}

.year-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 1px solid #d4e2f0;
    border-radius: 6px;
    background: #f8fafb;
    color: #1e3a5f;
    font-size: 0.75rem;
    cursor: pointer;
    transition: background 0.15s, border-color 0.15s;
}

    .year-btn:hover:not(:disabled) {
        background: #e8f0fa;
        border-color: var(--ds-color-atlas-blue);
    }

    .year-btn:disabled {
        opacity: 0.4;
        cursor: default;
    }

.year-label {
    font-size: var(--ds-font-size-sm);
    color: #1e3a5f;
    min-width: 3.5rem;
    text-align: center;
}





.month-strip {
    display: flex;
    gap: 0.35rem;
    flex-wrap: wrap;
}

.month-btn {
    padding: 0.4rem 0.75rem;
    border: 1px solid #d4e2f0;
    border-radius: 6px;
    background: #f8fafb;
    color: #555;
    font-size: 0.6875rem;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.15s, color 0.15s, border-color 0.15s, box-shadow 0.15s;
}

    .month-btn:hover:not(:disabled):not(.active) {
        background: #e8f0fa;
        border-color: var(--ds-color-atlas-blue);
        color: #1e3a5f;
    }

    .month-btn.active {
        background: linear-gradient(135deg, #2c5282, var(--ds-color-atlas-blue));
        color: #fff;
        border-color: var(--ds-color-atlas-blue);
        box-shadow: 0 2px 6px rgba(74, 144, 217, 0.3);
    }

    .month-btn:disabled {
        opacity: 0.35;
        cursor: default;
    }

/* ── Expense Details: Journal entry drill-down (level 4) ── */
.exp-drilldown .exp-day-row {
    cursor: pointer;
}

    .exp-drilldown .exp-day-row:hover {
        background: #f1f5f9;
    }

.exp-drilldown .exp-entry-header-row > td,
.exp-drilldown .exp-entry-row > td {
    background: #f8fafc;
    border-top: 1px dashed #e2e8f0;
}

.exp-drilldown .exp-entry-header-row > td {
    font-size: 0.7rem;
    color: #64748b;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    padding-top: 0.4rem;
    padding-bottom: 0.2rem;
}

.exp-drilldown .exp-entry-grid {
    display: grid;
    grid-template-columns: 1.2fr 1fr 1fr 1fr;
    gap: 0.75rem;
    align-items: center;
}

.exp-drilldown .exp-entry-grid-head span {
    font-weight: 600;
}

/* ── Drill-down trail vs selected (Expense Details) */
.exp-drilldown tr.row-trail > td {
    background: #f1f6fb; /* much lighter than row-selected */
    box-shadow: inset 3px 0 0 0 rgba(74, 144, 217, 0.45);
}

/* Make the leaf entry highlight pop a touch more so it's the obvious focus */
.exp-drilldown tr.exp-entry-row {
    cursor: pointer;
}

    .exp-drilldown tr.exp-entry-row:hover > td {
        background: #eef4fb;
    }

    .exp-drilldown tr.exp-entry-row.row-selected > td {
        background: #e3efff;
        box-shadow: inset 3px 0 0 0 var(--ds-color-atlas-blue);
    }


/* ── Expense Details: Drilldown Report ────────────────── */

.exp-drilldown .exp-class-row {
    cursor: pointer;
    user-select: none;
    background: #f5f7fa;
}

.exp-drilldown .exp-acct-row {
    cursor: pointer;
}

    .exp-drilldown .exp-acct-row:hover {
        background: #eaf3fd;
    }

.exp-toggle {
    display: inline-block;
    width: 0.75rem;
    font-size: 0.5625rem;
    color: #64748b;
    text-align: center;
    flex-shrink: 0;
}

.exp-var.val-positive {
    color: #1b5e20;
    font-weight: 600;
}

.exp-var.val-negative {
    color: #b71c1c;
    font-weight: 600;
}

.exp-summary-bar {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    color: #64748b;
    font-size: 0.8125rem;
    margin-bottom: 0.75rem;
}

.exp-daily-card {
    margin-top: 0.35rem;
    padding-top: 0.35rem;
    border-top: 1px dashed #e0e4ea;
}

/* ── YSN As-Of Date Bar ──────────────────────────────── */
/*.ysn-asof-bar {
    display: flex;
    gap: 1.5rem;
    justify-content: center;
    padding: 0.5rem 1rem;
    margin-bottom: 0.5rem;
    font-size: 0.85rem;
    color: #555;
}

.ysn-asof-item strong {
    margin-right: 0.25rem;
}*/

/* ── YSN As-Of Date Bar ───────────────────────────── */
/*.ysn-as-of-bar {
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
    color: #64748b;
    margin-bottom: 0.75rem;
}*/

/* ── Location Column Dividers ─────────────────────────── */

/*.exec-report .loc-divider {
    border-right: 3px solid #1e3a5f !important;
}

.exec-report .loc-header.loc-last {
    border-right: none;
}*/


/* ── Executive Financial Report Table ─────────────────── */

/*.exec-report {
    width: 100%;
    border-collapse: collapse;*/
/*    font-size: 0.75rem;*/
    /*font-family: var(--ins-font-sans-serif);
}

    .exec-report .loc-header {
        background: linear-gradient(135deg, #2c5282 0%, #3b6fb5 60%, var(--ds-color-atlas-blue) 100%);
        color: #fff;
        text-align: center;*/
/*        font-size: 0.8125rem;
        font-weight: 700;
        padding: 0.6rem 0.5rem;
        letter-spacing: 0.03em;
        border-left: 2px solid #1e3a5f;*/
    /*}

        .exec-report .loc-header:first-of-type {
            border-left: 1px solid #1e3a5f;
        }

    .exec-report .sub-header {
        background: #e8f0fa;*/
/*        color: #1e3a5f;*/
        /*text-align: center;*/
/*        font-size: 0.625rem;
        font-weight: 700;
        text-transform: uppercase;
        letter-spacing: 0.05em;
        padding: 0.4rem 0.5rem;
        border-bottom: 2px solid #a8c4e0;
        border-right: 1px solid #d4e2f0;*/
    /*}

    .exec-report .sub-header-gp {
        border-right: 2px solid #a8c4e0;
    }

    .exec-report .corner-cell {
        background: linear-gradient(135deg, #2c5282 0%, #3b6fb5 60%, var(--ds-color-atlas-blue) 100%);
        border-bottom: 2px solid #a8c4e0;
        min-width: 110px;
    }

    .exec-report .section-row td {
        background: #f0f5fb;*/
/*        font-weight: 700;
        font-size: 0.8125rem;
        color: #1e3a5f;
        padding: 0.5rem 0.75rem;*/
        /*border-top: 2px solid #c6d8ea;
        border-bottom: 1px solid #d4e2f0;*/
/*        letter-spacing: 0.02em;*/
    /*}

    .exec-report .section-row.computed td {
        background: #e0ecf7;
        border-top: 3px double var(--ds-color-atlas-blue);
        font-size: 0.8125rem;
    }

    .exec-report .period-cell {
        background: #f8fafb;
        font-weight: 600;
        color: #555;
        padding: 0.35rem 0.75rem;
        white-space: nowrap;
        border-right: 1px solid #d4e2f0;
        font-size: 0.6875rem;
        text-transform: uppercase;
        letter-spacing: 0.03em;
    }

    .exec-report .amt {
        text-align: right;
        padding: 0.35rem 0.65rem;
        font-variant-numeric: tabular-nums;
        border-right: 1px solid #edf2f7;
        color: #333;
        white-space: nowrap;
    }

    .exec-report .gp-col {
        border-right: 2px solid #c6d8ea;
        font-weight: 600;
    }

    .exec-report tbody tr {
        border-bottom: 1px solid #edf2f7;
    }

        .exec-report tbody tr:nth-child(3n+3):not(.section-row):not(.change-row) {
            background: #fbfcfe;*/
/*        }

    .exec-report .change-row {
        background: #f5f8fc;
        border-bottom: 2px solid #d4e2f0;
    }*/
/*
        .exec-report .change-row .period-cell {
            background: #e8f0fa;
            font-weight: 700;
            color: #1e3a5f;
        }*/
/*
    .exec-report .val-positive {
        background: #d4edda;
        color: #1b5e20;
        font-weight: 600;
    }

    .exec-report .val-negative {
        background: #f8d7da;
        color: #b71c1c;
        font-weight: 600;
    }

    .exec-report .gp-high {
        background: #d4edda;
        color: #1b5e20;
        font-weight: 600;
    }

    .exec-report .gp-mid {
        background: #fff3cd;
        color: #856404;
        font-weight: 600;
    }

    .exec-report .gp-low {
        background: #f8d7da;
        color: #b71c1c;
        font-weight: 600;
    }

    .exec-report tbody tr:not(.section-row):hover {
        background: #e8f0fa;
    }*/

/* ── Executive Grid V2 (overrides) ────────────── */

/*.exec-grid-v2.k-grid {
    border-radius: 8px;
    overflow: hidden;
    font-size: 0.75rem;
}

.exec-grid-v2 .k-grouping-row td {
    font-weight: 700;
    font-size: 0.8125rem;
    padding: 0.5rem 0.75rem;
}

.exec-grid-v2 .exec-group-label.computed {
    border-left: 3px solid #1565c0;
    padding-left: 0.5rem;
    font-style: italic;
}

.exec-grid-v2 .k-table-td:first-child {
    font-weight: 600;
    text-transform: uppercase;
    font-size: 0.6875rem;
    letter-spacing: 0.03em;
    color: #555;
}

.exec-grid-v2 .grid-change-row {
    background: #f5f8fc;
    border-bottom: 2px solid #ccc;
}

    .exec-grid-v2 .grid-change-row td:first-child {
        font-weight: 700;
        color: #1565c0;
    }

.exec-grid-v2 .grid-computed-row {
    background: #f0f4fa;
}

.exec-grid-v2 .k-grid-header .k-header.k-grid-header-sticky,
.exec-grid-v2 .k-column-group-header {
    text-align: center;
    font-weight: 700;
    font-size: 0.8125rem;
}

.exec-grid-v2 .val-pos {
    color: #1b5e20;
    font-weight: 600;
}

.exec-grid-v2 .val-neg {
    color: #b71c1c;
    font-weight: 600;
}

.exec-grid-v2 .gp-hi {
    color: #1b5e20;
    font-weight: 600;
}

.exec-grid-v2 .gp-md {
    color: #e65100;
    font-weight: 600;
}

.exec-grid-v2 .gp-lo {
    color: #b71c1c;
    font-weight: 600;
}*/


    /* Weekly Surcharges */
    .surcharge-week-label {
        font-size: 0.7rem;
        font-weight: 600;
        color: #6b7280;
        margin-bottom: 0.5rem;
    }

    .surcharge-grid {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        gap: 0.5rem;
    }

    .surcharge-metric {
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 0.15rem;
        padding: 0.5rem 0.25rem;
        background: #f8fafc;
        border-radius: 6px;
    }

    .surcharge-metric-value {
        font-size: 0.85rem;
        font-weight: 700;
        color: #1a1a2e;
    }

    .surcharge-metric-label {
        font-size: 0.6rem;
        font-weight: 600;
        color: #8a96a3;
        text-align: center;
        line-height: 1.25;
    }
    /* ── My Reported Tickets ──────────────────────────────── */
    .my-reported-tickets-row {
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 1.5rem;
        padding: 0.25rem 0 0.5rem;
    }

    .my-reported-tickets-stat {
        display: flex;
        flex-direction: column;
        align-items: center;
        cursor: default;
    }

    .my-reported-tickets-value {
        font-size: 1.5rem;
        font-weight: 700;
        line-height: 1;
    }

    .my-reported-tickets-open {
        color: var(--ds-color-atlas-blue);
    }

    .my-reported-tickets-closed {
        color: #8a96a3;
    }

    .my-reported-tickets-label {
        font-size: 0.5625rem;
        font-weight: 600;
        text-transform: uppercase;
        letter-spacing: 0.04em;
        color: #8a96a3;
        margin-top: 0.2rem;
    }

    .my-reported-tickets-divider {
        width: 1px;
        height: 2rem;
        background: #e8ecf1;
    }

    .my-reported-tickets-actions {
        padding-top: 0.25rem;
    }

        .my-reported-tickets-actions .btn btn-sm btn-outline-secondary {
            width: 100%;
        }
    /* ── Document Repository ──────────────────────────────── */
    .document-repository-row {
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 1.5rem;
        padding: 0.25rem 0 0.5rem;
    }

    .document-repository-stat {
        display: flex;
        flex-direction: column;
        align-items: center;
        cursor: default;
    }

    .document-repository-value {
        font-size: 1.5rem;
        font-weight: 700;
        line-height: 1;
        color: var(--ds-color-atlas-blue);
    }

    .document-repository-label {
        font-size: 0.5625rem;
        font-weight: 600;
        text-transform: uppercase;
        letter-spacing: 0.04em;
        color: #8a96a3;
        margin-top: 0.2rem;
    }

    .document-repository-divider {
        width: 1px;
        height: 2rem;
        background: #e8ecf1;
    }

    .document-repository-actions {
        padding-top: 0.25rem;
    }

        .document-repository-actions .btn btn-sm btn-outline-secondary {
            width: 100%;
        }
    /* ── Support Center ──────────────────────────────── */
    .support-center-grid {
        display: grid;
        grid-template-columns: repeat(4, 1fr);
        gap: 0.5rem;
    }

    .support-center-kpi {
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 0.25rem;
        padding: 0.625rem 0.375rem;
        border-radius: 8px;
        cursor: pointer;
        transition: transform 0.12s, background 0.12s;
        position: relative;
        text-align: center;
    }

    .support-center:hover {
        transform: translateY(-1px);
    }

    .support-center-kpi-value {
        font-size: 1.25rem;
        font-weight: 700;
        line-height: 1;
    }

    .support-center-kpi-label {
        font-size: 0.5625rem;
        font-weight: 600;
        text-transform: uppercase;
        letter-spacing: 0.04em;
        color: #8a96a3;
    }

    .support-center > i:last-child {
        position: absolute;
        top: 0.375rem;
        right: 0.375rem;
        font-size: 0.625rem;
        opacity: 0.4;
        margin: 0;
    }

    .support-center-danger {
        background: #fef2f2;
    }

        .support-center-danger .support-center-kpi-value {
            color: #dc2626;
        }

        .support-center-danger:hover {
            background: #fee2e2;
        }

    .support-center-blue {
        background: #eff6ff;
    }

        .support-center-blue .support-center-kpi-value {
            color: var(--ds-color-atlas-blue);
        }

        .support-center-blue:hover {
            background: #dbeafe;
        }

    .support-center-amber {
        background: #fffbeb;
    }

        .support-center-amber .support-center-kpi-value {
            color: #d97706;
        }

        .support-center-amber:hover {
            background: #fef3c7;
        }

    .support-center-green {
        background: #f0fdf4;
    }

        .support-center-green .support-center-kpi-value {
            color: #16a34a;
        }

        .support-center-green:hover {
            background: #dcfce7;
        }
    /* Data Integrity Alerts */
    .data-integrity-alert-badge {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        min-width: 1.25rem;
        height: 1.25rem;
        padding: 0 0.35rem;
        border-radius: 999px;
        background: #e53935;
        color: #fff;
        font-size: 0.625rem;
        font-weight: 700;
        line-height: 1;
    }

    .data-integrity-alert-list {
        display: flex;
        flex-direction: column;
        gap: 0.25rem;
    }

    .data-integrity-alert-item {
        display: flex;
        align-items: center;
        gap: 0.6rem;
        padding: 0.5rem 0.65rem;
        border-radius: 6px;
        font-size: 0.75rem;
        color: #444;
        text-decoration: none;
        transition: background 0.12s;
        cursor: default;
        border-left: 3px solid transparent;
    }

    a.data-integrity-alert-item {
        cursor: pointer;
    }

        a.data-integrity-alert-item:hover {
            background: #f5f7fa;
        }

    .data-integrity-alert-item > i:first-child {
        font-size: 0.875rem;
        flex-shrink: 0;
        margin: 0;
    }

    .data-integrity-alert-text {
        flex: 1;
        min-width: 0;
        line-height: 1.35;
    }

        .data-integrity-alert-text strong {
            font-weight: 700;
            margin-right: 0.2rem;
        }

    .data-integrity-alert-arrow {
        font-size: 0.625rem;
        color: #ccc;
        flex-shrink: 0;
        transition: color 0.12s, transform 0.12s;
        margin: 0;
    }

    a.data-integrity-alert-item:hover .data-integrity-alert-arrow {
        color: var(--ds-color-atlas-blue);
        transform: translateX(2px);
    }

    .data-integrity-alert-danger {
        border-left-color: #e53935;
    }

        .data-integrity-alert-danger > i:first-child {
            color: #e53935;
        }

    .data-integrity-alert-warning {
        border-left-color: #f9a825;
    }

        .data-integrity-alert-warning > i:first-child {
            color: #e65100;
        }

    .data-integrity-alert-info {
        border-left-color: var(--ds-color-atlas-blue);
    }

        .data-integrity-alert-info > i:first-child {
            color: var(--ds-color-atlas-blue);
        }

    .data-integrity-alert-success {
        border-left-color: #2e7d32;
    }

        .data-integrity-alert-success > i:first-child {
            color: #2e7d32;
        }




    .home-pill {
        background: #fc0a0a;
        color: #fff;
        font-size: 0.72rem;
        font-weight: 700;
        padding: 0.1rem 0.55rem;
        border-radius: 999px;
        line-height: 1.4;
    }

    .home-loading {
        display: flex;
        align-items: center;
        gap: 0.5rem;
        color: #6b7280;
        font-size: 0.9rem;
        padding: 0.5rem 0.25rem;
    }
    /* ── Home Tiles ────────────────────────────────────── */
    .home-tiles-grid {
        display: grid;
        grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
        gap: 0.5rem;
    }

    .home-section-label {
        font-size: var(--ds-font-size-xs);
        font-weight: var(--ds-font-weight-semibold);
        text-transform: uppercase;
        letter-spacing: 0.08em;
        color: #8a96a3;
        margin: 0 0 0.625rem;
        display: flex;
        align-items: center;
        gap: 0.4rem;
    }

    .home-tile {
        position: relative;
        display: flex;
        align-items: center;
        gap: 0.875rem;
        padding: 0.75rem 1rem;
        background: #fff;
        border: 1px solid #e8ecf1;
        border-left: 3px solid #e8ecf1;
        border-radius: 8px;
        cursor: pointer;
        transition: transform 0.15s ease, box-shadow 0.15s ease, border-color 0.15s ease, background 0.15s ease;
        animation: fadeInUp 0.25s ease-out both;
    }

    .home-tile-icon {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 2.25rem;
        height: 2.25rem;
        border-radius: 8px;
        background: #f5f7fa;
        flex-shrink: 0;
        transition: background 0.15s ease;
    }

    .home-tile-content {
        flex: 1;
        min-width: 0;
    }

        .home-tile-content h3 {
            font-size: var(--ds-font-size-sm);
            font-weight: var(--ds-font-weight-semibold);
            margin: 0 0 0.1rem;
            color: #1a1a2e;
        }

        .home-tile-content p {
            font-size: var(--ds-font-size-xs);
            color: #8a96a3;
            margin: 0;
            line-height: 1.4;
        }

    .home-tile-arrow {
        font-size: 0.6875rem;
        color: #ccc;
        flex-shrink: 0;
        transition: color 0.15s, transform 0.15s;
        margin: 0;
    }
    /* ── Module Accent Colors ─────────────────────────────── */
    .home-tile-accounting {
        border-left-color: #e6a817;
    }

        .home-tile-accounting .home-tile-icon {
            background: #fefce8;
        }

            .home-tile-accounting .home-tile-icon i {
                color: #d4a017;
            }

        .home-tile-accounting:hover {
            background: #fffbeb;
            border-left-color: #ca8a04;
        }

            .home-tile-accounting:hover .home-tile-icon {
                background: #fef3c7;
            }

    .home-tile-inventory {
        border-left-color: #22c55e;
    }

        .home-tile-inventory .home-tile-icon i {
            color: #16a34a;
        }

        .home-tile-inventory:hover {
            background: #f0fdf4;
            border-left-color: #15803d;
        }

            .home-tile-inventory:hover .home-tile-icon {
                background: #dcfce7;
            }

    .home-tile-sales {
        border-left-color: #3b82f6;
    }

        .home-tile-sales .home-tile-icon i {
            color: #2563eb;
        }

        .home-tile-sales:hover {
            background: #eff6ff;
            border-left-color: #1d4ed8;
        }

            .home-tile-sales:hover .home-tile-icon {
                background: #dbeafe;
            }

    .home-tile-executive {
        border-left-color: #8b5cf6;
    }

        .home-tile-executive .home-tile-icon i {
            color: #7c3aed;
        }

        .home-tile-executive:hover {
            background: #f5f3ff;
        }

            .home-tile-executive:hover .home-tile-icon {
                background: #ede9fe;
            }

            .home-tile-executive:hover .home-tile-icon {
                background: #ede9fe;
            }

    .home-tile-it {
        border-left-color: #ef4444;
    }

        .home-tile-it .home-tile-icon i {
            color: #dc2626;
        }

        .home-tile-it:hover {
            background: #fef2f2;
        }

            .home-tile-it:hover .home-tile-icon {
                background: #fee2e2;
            }

    .home-tile-admin {
        border-left-color: #475569;
    }

        .home-tile-admin .home-tile-icon i {
            color: #334155;
        }

        .home-tile-admin:hover {
            background: #f8fafc;
            border-left-color: #1e293b;
        }

            .home-tile-admin:hover .home-tile-icon {
                background: #e2e8f0;
            }

    .home-section-label i {
        font-size: 0.75rem;
        color: var(--ds-color-atlas-blue);
        margin: 0;
    }
    /* ── Module Tiles ─────────────────────────────────────── */

    .home-tiles {
        display: flex;
        flex-direction: column;
        gap: 0.375rem;
    }

    .home-tile:nth-child(2) {
        animation-delay: 0.03s;
    }

    .home-tile:nth-child(3) {
        animation-delay: 0.06s;
    }

    .home-tile:nth-child(4) {
        animation-delay: 0.09s;
    }

    .home-tile:hover {
        transform: translateX(3px);
        box-shadow: 0 4px 16px rgba(0, 0, 0, 0.10);
        border-color: #d0d5dd;
    }

    .home-tile-icon {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 2.25rem;
        height: 2.25rem;
        border-radius: 8px;
        background: #f5f7fa;
        flex-shrink: 0;
        transition: background 0.15s ease;
    }

    .home-tile:hover .home-tile-icon {
        background: #edf2f7;
    }

    .home-tile-icon i {
        font-size: 1rem;
        margin: 0;
    }

    .home-tile:hover .home-tile-arrow {
        color: var(--ds-color-atlas-blue);
        transform: translateX(3px);
    }
    /* ── Reports tile ────────────────────────────────────── */
    .home-tile-reports {
        border-left-color: #dc2626;
    }

        .home-tile-reports .home-tile-icon {
            background: #fef2f2;
        }

            .home-tile-reports .home-tile-icon i {
                color: #dc2626;
            }

        .home-tile-reports:hover {
            background: #fef2f2;
            border-left-color: #b91c1c;
        }

            .home-tile-reports:hover .home-tile-icon {
                background: #fee2e2;
            }

    /* Responsive adjustments for Home page main grids and widgets */
    @media (max-width: 1024px) {
        .home-widget-row-3 {
            grid-template-columns: 1fr;
            gap: 1rem;
        }

        .home-widget-row-2 {
            grid-template-columns: 1fr;
            gap: 1rem;
        }

        .home-tiles-grid {
            grid-template-columns: 1fr 1fr;
        }
    }

    @media (max-width: 700px) {
        .home-tiles-grid {
            grid-template-columns: 1fr;
        }

        .ds-header-group {
            align-items: flex-start;
            text-align: left;
        }

        .ds-section {
            padding-top: var(--ds-space-2);
        }

        .ds-page {
            padding-left: var(--ds-space-1);
            padding-right: var(--ds-space-1);
        }
    }

/* ── Data Table ───────────────────────────────────────── */

.table-wrapper {
    background: #fff;
    border: 1px solid #e0e0e0;
    border-radius: 8px;
    overflow-x: auto;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.06);
}

    .table-wrapper.full-width {
        width: 100%;
        max-width: 100%;
    }

.data-table {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
    background: var(--ds-surface, #fff);
    border: 1px solid var(--ds-border, #e5e7eb);
    overflow: hidden;
    font-size: var(--ds-font-size-xs);
    box-shadow: 0 2px 10px rgba(0,0,0,.04);
}

.data-table-sm {
    font-size: var(--ds-font-size-xxs);
}

.data-table thead {
    position: sticky;
    top: 0;
    z-index: 2;
}

.data-table-header-atlas thead th {
    background: linear-gradient( 135deg, #2c5282 0%, #3b6fb5 60%, var(--ds-color-atlas-blue) 100% );
    color: white;
    text-transform: uppercase;
    border-bottom: 1px solid var(--ds-border, #e5e7eb);
    white-space: nowrap;
    font-weight: 700;
}

.data-table-header-clean thead th {
    background: #f5f7fa;
    color: #333;
    font-weight: 700;
    text-transform: uppercase;
    font-size: 0.625rem;
    letter-spacing: 0.5px;
    padding: 0.45rem 0.5rem;
    border-bottom: 2px solid #dee2e6;
    white-space: normal;
    min-width: 70px;
    cursor: pointer;
    user-select: none;
    transition: background 0.15s;
    position: relative;
}

.data-table tbody tr.selectable-row {
    cursor: pointer;
    transition: background-color 0.15s ease, box-shadow 0.15s ease;
}

    .data-table tbody tr.selectable-row:hover {
        background: #f8fafc;
    }

    .data-table tbody tr.selectable-row.is-selected {
/*        background: #eef4ff;
        box-shadow: inset 4px 0 0 #4f46e5;*/
    background: linear-gradient(90deg, #e0edfa 0%, #f5faff 100%);
    box-shadow: 0 1px 6px 0 rgba(37, 99, 235, 0.06);
    outline: 2px solid var(--ds-color-atlas-blue);
    outline-offset: -2px;
    transition: background 0.18s, box-shadow 0.18s;
}

.data-table .sub-header {
    background: #e8f0fa !important;
    color: #1e3a5f !important;
    text-align: right;
    font-weight: var(--ds-font-weight-semibold) !important;
    border-bottom: 1px solid #d5e2f2;
    border-top: 1px solid #c9d9ee;
    text-transform: none;
    letter-spacing: normal;
}

.data-table tbody tr {
    transition: background-color .18s ease, transform .12s ease, box-shadow .18s ease;
}

.data-table tbody td {
  /*  padding: .7rem .75rem;*/
/*    border-bottom: 1px solid #eef0f2;*/
    vertical-align: middle;
    white-space: nowrap;
}

/* Hover */
.data-table tbody tr:hover {
    background-color: #f8fafc;
}

/* =========================================================
   SECTION ROWS
========================================================= */
.data-table tbody tr td[colspan] {
/*    background: #e8f0fa !important;
    text-transform: uppercase;

*/

    background: #f0f5fb !important;
    font-weight: var(--ds-font-weight-bold);
    color: #1e3a5f;
}

/* =========================================================
   COLUMN STYLING
========================================================= */

/* First column (labels) */
.data-table tbody td:first-child {
    font-weight: 600;
    color: #374151;
/*    position: sticky;*/
    left: 0;
/*    background: inherit;*/
    z-index: 1;
}

/* Divider between locations */
.loc-divider {
    border-right: 2px solid #dbe1e8 !important;
}

/* GP % column */
.gp-col {
    font-weight: 600;
}

/* =========================================================
   SELECTED / ACTIVE ROW
========================================================= */
.selected-row {
    background: rgba(249, 115, 22, 0.10) !important;
    box-shadow: inset 4px 0 0 #f97316;
}

    .selected-row td {
        font-weight: 600;
    }

/* =========================================================
   POSITIVE / NEGATIVE CHANGES
========================================================= */
.positive {
    background: #d4edda;
    color: #1b5e20;
    font-weight: var(--ds-font-weight-semibold);
}

.negative {
    background: #f8d7da;
    color: #b71c1c;
    font-weight: var(--ds-font-weight-semibold);
}

.neutral {
    color: #6b7280;
}

/* =========================================================
   PERIOD LABELS
========================================================= */
.period-cell {
    font-weight: var(--ds-font-weight-bold);
    color: #111827;
}

/* =========================================================
   COMPACT MODE
========================================================= */
.compact .data-table tbody td,
.data-table.compact tbody td {
    padding: .25rem .25rem;
}

.compact .data-table thead th,
.data-table.compact thead th {
    padding: .25rem .25rem;
}

/* ── Paging Bar ───────────────────────────────────────── */
.paging-bar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.5rem;
    border-top: 1px solid #e0e0e0;
    font-size: var(--ds-font-size-sm);
    color: #666;
    flex-wrap: wrap;
    gap: 0.5rem;
}

    .paging-bar .page-info {
        font-weight: 500;
    }

.paging-controls {
    display: flex;
    gap: 0.25rem;
    align-items: center;
}

    .paging-controls button {
        padding: 0.35rem 0.7rem;
        border: 1px solid #ccc;
        background: #fff;
        border-radius: 5px;
        cursor: pointer;
        font-size: var(--ds-font-size-sm);
        transition: background 0.15s, border-color 0.15s;
    }

        .paging-controls button:hover:not(:disabled) {
            background: #e8ecf1;
            border-color: #aaa;
        }

        .paging-controls button:disabled {
            opacity: 0.45;
            cursor: default;
        }

        .paging-controls button.active-page {
            background: var(--ds-color-atlas-blue);
            color: #fff;
            border-color: var(--ds-color-atlas-blue);
        }

    .paging-controls select {
        padding: 0.3rem 0.5rem;
        border: 1px solid #ccc;
        border-radius: 5px;
        font-size: 0.75rem;
    }

.page-size-group {
    display: flex;
    align-items: center;
    gap: 0.35rem;
}

    .page-size-group select {
        padding: 0.45rem 0.65rem;
        border: 1px solid #ccc;
        border-radius: 6px;
        font-size: 0.75rem;
        background: #fafafa;
        transition: border-color 0.2s, box-shadow 0.2s;
    }

        .page-size-group select:focus {
            outline: none;
            border-color: var(--ds-color-atlas-blue);
            box-shadow: 0 0 0 3px rgba(74, 144, 217, 0.15);
        }

.div-padding {
    padding-top: var(--ds-space-2);
    padding-bottom: var(--ds-space-2);
    padding-left: var(--ds-space-2);
    padding-right: var(--ds-space-2);
}

/* ── Loading card: error modifier ────────────────────── */
.loading-card.error-card {
    border-color: #fecaca;
    background: #fff;
}

.error-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.5rem;
    height: 2.5rem;
    border-radius: 50%;
    background: #fee2e2;
    color: #dc2626;
    font-size: 1.25rem;
    font-weight: 700;
    margin-bottom: 1rem;
}

/* ── Expense Details: alternating sub-rows ────────────── */
.exp-row-alt > td,
.exp-card-alt {
    background: #f8fafc;
}

/* ── Expense Details: mobile card drill-down states ────── */
.card-trail {
    background: #f1f6fb;
    border-left: 3px solid rgba(74, 144, 217, 0.45);
}

.card-selected {
    background: #e3efff;
    border-left: 3px solid var(--ds-color-atlas-blue);
}




/* ── Expense Details: calculated financial summary rows (Gross Profit / Net Income) ── */
.exp-summary-row {
    border-top: 2px solid #b6c9e0;
    border-bottom: 2px solid #b6c9e0;
}

    .exp-summary-row td {
        padding-top: 0.3rem;
        padding-bottom: 0.3rem;
        font-size: 0.6875rem;
    }

        .exp-summary-row td:first-child {
            padding-left: 0.75rem;
            color: #1e3a5f;
            letter-spacing: 0.01em;
        }


/* ══════════════════════════════════════════════════════════
   Activity Timeline  — replaces pipeline-activity-* classes
   ══════════════════════════════════════════════════════════ */

.activity-timeline {
    display: flex;
    flex-direction: column;
    padding: 0.25rem 0 0.5rem 0.75rem;
}

.activity-item {
    display: flex;
    gap: 0;
    padding: 0.625rem 0 0.625rem 1.25rem;
    border-left: 2px solid #e0e4ea;
    position: relative;
}

.activity-dot {
    position: absolute;
    left: -0.4rem;
    top: 1rem;
    width: 0.625rem;
    height: 0.625rem;
    border-radius: 50%;
    background: var(--ds-color-atlas-blue);
    border: 2px solid #fff;
    box-shadow: 0 0 0 1px var(--ds-color-atlas-blue);
    flex-shrink: 0;
}

.activity-content {
    flex: 1;
    min-width: 0;
}

.activity-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 0.2rem;
}

.activity-type {
    font-size: 0.6875rem;
    font-weight: 700;
    color: var(--ds-color-atlas-blue);
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.activity-date {
    font-size: 0.625rem;
    color: #8a96a3;
}

.activity-subject {
    font-size: 0.75rem;
    color: #1e293b;
    font-weight: 500;
    margin-bottom: 0.15rem;
}

.activity-meta {
    font-size: 0.625rem;
    color: #8a96a3;
}


/* ── Responsive Table-to-Card Utility ────────────────────────────── */
/* By default, hide card-list-responsive (card mode) on desktop/wide screens */
.card-list-responsive {
    display: none;
}

/* Utility classes for breakpoints:
   - .card-list-break-1400: Breaks to card mode at 1400px (e.g., iPad Pro landscape)
   - .card-list-break-1024: Breaks at 1024px (iPad Mini landscape, iPad Pro portrait)
   - .card-list-break-700: Breaks at 700px (iPhone 14, most phones)

   NOTE: The actual show/hide behavior for each breakpoint is implemented in
   Atlas.css using compound selectors (e.g. .atlas-activity-card.card-list-break-700
   and .card-list-responsive.card-list-break-700) so the table wrapper and the
   card fallback never end up hidden at the same time. The bare
   `.card-list-break-XXX { display: flex !important }` rules that used to live
   here applied to BOTH the table wrapper and the card fallback (since both
   elements share the same breakpoint class), which caused unpredictable
   layout on some mobile browsers (e.g. the table/card content disappearing
   entirely on iPhone Safari). Do not re-add bare breakpoint display rules here.
*/

/* Always keep .card-list-responsive hidden unless a breakpoint class is active */
.card-list-responsive:not(.card-list-break-1400):not(.card-list-break-1024):not(.card-list-break-932):not(.card-list-break-700) {
    display: none !important;
}



/* FORM GRID RESPONSIVENESS */

/* Responsive form grid: 2 columns on tablet/desktop, 1 column on mobile */
.form-grid-responsive {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: .5rem;
}

.form-grid-span-all {
    grid-column: 1 / -1;
}

/*
 Ensure all form controls respect container padding and do not overflow */
.form-grid-responsive input,
.form-grid-responsive select,
.form-grid-responsive textarea,
.form-grid-responsive .form-input {
    box-sizing: border-box;
    width: 100%;
    min-width: 0;
}

    .form-grid-responsive input[type="date"],
    .form-grid-responsive .form-input[type="date"] {
        width: 100%;
        min-width: 0;
        box-sizing: border-box;
        padding-right: 0.75rem;
        padding-left: 0.5rem;
        min-height: 2.125rem; 
        background-clip: padding-box;
        border-radius: 6px;
        border: 1px solid #cbd5e1;  

    }

        .form-grid-responsive input[type="date"]:focus {
            border-color: var(--ds-color-accent, #2563eb);
            box-shadow: 0 0 0 2px rgba(37,99,235,0.12);
            outline: none;
        }

        .form-grid-responsive input[type="date"]::-webkit-inner-spin-button,
        .form-grid-responsive input[type="date"]::-webkit-clear-button,
        .form-grid-responsive input[type="date"]::-webkit-calendar-picker-indicator {
            margin-right: 0.25rem;
        }

    .form-grid-responsive input[type="date"] {
        -webkit-appearance: none;
        appearance: none;
        line-height: 1.5;
    }


@media (max-width: 700px) {
    .form-grid-responsive {
        grid-template-columns: 1fr;
        padding: 0.5rem;
        Ensure padding on mobile
    }

        .form-grid-responsive .field-group {
            grid-column: 1 / -1 !important;
        }
}

@media (max-width: 700px) {
    .page-breadcrumb-bar {
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        gap: 0.4rem;
    }

    .page-breadcrumb-title-group,
    .page-breadcrumb-trail {
        width: 100%;
    }

    .page-breadcrumb-title {
        font-size: 1.15rem;
    }

    .page-breadcrumb-trail .breadcrumb {
        flex-wrap: wrap;
    }

    .breadcrumb,
    .breadcrumb-item,
    .breadcrumb-item a {
        font-size: 0.9375rem;
    }

    .btn-back-inline {
        width: 2.75rem;
        height: 2.75rem;
    }
}

/* ── Quick Links: manage page option cards ──────────────────── */
.ql-option-card {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    padding: 0.65rem 0.9rem;
    border: 1px solid var(--border-color, #e2e8f0);
    border-radius: 0.5rem;
    cursor: pointer;
    background: var(--card-bg, #fff);
    transition: border-color 0.15s, background 0.15s;
    font-size: 0.9rem;
}

    .ql-option-card input[type="checkbox"] {
        accent-color: var(--accent, #2563eb);
        width: 1rem;
        height: 1rem;
        flex-shrink: 0;
    }

.ql-option-card--selected {
    border-color: var(--accent, #2563eb);
    background: var(--accent-subtle, #eff6ff);
}

.ql-option-title {
    display: flex;
    align-items: center;
    gap: 0.35rem;
}

/* ── Quick Links manage pill button ────────────────────── */
.btn-ql-pill {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    background: #FFF;
    color: var(--ds-color-atlas-blue);
    border: none;
    border-radius: 10px;
    padding: 0.45rem 1.1rem 0.45rem 0.85rem;
    font-size: 0.9rem;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.15s;
    white-space: nowrap;
    line-height: 1.4;
}

    .btn-ql-pill:hover,
    .btn-ql-pill:focus-visible {
        background: var(--ds-color-accent-hover);
        color: #fff;
    }

    .btn-ql-pill i {
        font-size: 1.1rem;
    }

/* ── System Update Banner ─────────────────────────────────── */
.system-update-banner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: 0.6rem 0.875rem;
    margin-bottom: 0.75rem;
    background: linear-gradient(90deg, #eef4fb 0%, #f0f7ff 100%);
    border: 1px solid #b8d4f0;
    border-radius: 8px;
    font-size: 0.8125rem;
    color: #1e3a5f;
}

.system-update-banner-left {
    display: flex;
    align-items: center;
    flex: 1;
    min-width: 0;
}

    .system-update-banner-left i {
        color: var(--ds-color-atlas-blue);
        font-size: 1rem;
        flex-shrink: 0;
    }

.system-update-banner-actions {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex-shrink: 0;
}

.system-update-banner-dismiss {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.5rem;
    height: 1.5rem;
    padding: 0;
    background: none;
    border: 1px solid transparent;
    border-radius: 4px;
    color: #6b7280;
    font-size: 1rem;
    cursor: pointer;
    transition: color 0.15s, background 0.15s, border-color 0.15s;
}

    .system-update-banner-dismiss:hover {
        color: #c62828;
        background: #fef2f2;
        border-color: #fca5a5;
    }




.section-header-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 0.75rem;
}

.section-title {
    margin: 0;
    font-size: 1.1rem;
    font-weight: 600;
    color: #1e3a5f;
}

.new-note-form {
    border: 1px dashed #cbd5e1;
    border-radius: 6px;
    padding: 1rem;
    background: #fff;
}
/* ── End admin preview ───────────────────────────────────────── */


/* ── Release note image thumbnail (admin table + preview) ── */
.rn-thumb {
    max-width: 72px;
    max-height: 48px;
    border-radius: 4px;
    border: 1px solid #e2e8f0;
    object-fit: cover;
    display: block;
}

.rn-img-preview {
    max-width: 100%;
    max-height: 260px;
    border-radius: 6px;
    border: 1px solid #e2e8f0;
    object-fit: contain;
    display: block;
}
/* ── End release note images ─────────────────────────────── */

/* ── Ship-To Sales Rep inline controls ──────────────────── */
.shipto-salesrep-link {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    font-size: 0.8rem;
    color: var(--accent, #0d6efd);
    text-decoration: none;
    font-weight: 500;
}

    .shipto-salesrep-link:hover {
        text-decoration: underline;
    }

.btn-icon-inline {
    background: none;
    border: none;
    padding: 0 0.25rem;
    cursor: pointer;
    color: var(--accent, #0d6efd);
    font-size: 0.85rem;
    line-height: 1;
    vertical-align: middle;
}

    .btn-icon-inline:hover {
        color: var(--accent-dark, #0a58ca);
    }




.header-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .75rem;
    flex-wrap: wrap;
/*    margin-bottom:.5rem;*/
}

.header-left,
.header-right {
    display: flex;
    align-items: center;
    gap: .5rem;
    flex-wrap: wrap;
}

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

.flex-gap-sm {
    gap: .5rem;
}

.detail-grid-responsive-120 {
    grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
}

.detail-grid-responsive-240 {
    grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
}


.detail-grid-responsive-360 {
    grid-template-columns: repeat(auto-fill, minmax(360px, 1fr));
}

.detail-grid-responsive-480 {
    grid-template-columns: repeat(auto-fill, minmax(480px, 1fr));
}

.detail-grid-responsive-600 {
    grid-template-columns: repeat(auto-fill, minmax(600px, 1fr));
}

.detail-body-padding {
    padding: .5rem 1rem;
}

.mobile-header-text {
    font-weight: 600;
}

.empty-state-cell {
    text-align: center;
    padding: 1.5rem;
    color: #888;
}


.modal-alert-spacing {
    margin-bottom: .75rem;
}

.action-column {
    width: 90px;
}

/* ── YSN Header bar — toggle group in HeaderBar #2 ───── */
.ysn-header-toggles {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.task-list {
    display: flex;
    flex-direction: column;
    gap: 0;
}

.task-list-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
    padding: 0.25rem 0;
    border-bottom: 1px solid #eee;
}

.task-list-row:last-child {
    border-bottom: none;
}

.task-list-name {
    font-weight: 500;
    font-size: 0.75rem;
}

@media (max-width: 576px) {
    .task-list-row {
        flex-direction: column;
        align-items: stretch;
        gap: 0.4rem;
        padding: 0.6rem 0;
    }

    .task-list-name {
        font-size: 0.9rem;
    }

    .task-list-row .atlas-btn,
    .task-list-row .badge {
        width: 100%;
        justify-content: center;
        font-size: 0.9rem;
        padding: 0.5rem 0.75rem;
        min-height: 2.5rem;
    }

    .task-list-row .atlas-btn.atlas-btn-sm {
        font-size: 0.9rem;
        padding: 0.5rem 0.75rem;
    }

    .task-list-row .text-muted.small {
        font-size: 0.85rem;
    }

    .game-fouls-header-title {
        font-size: 1rem;
        line-height: 1.3;
    }

    .game-fouls-toolbar {
        flex-direction: column;
        align-items: stretch;
    }

    .game-fouls-total {
        font-size: 0.9rem;
        text-align: center;
    }

    .game-fouls-actions {
        flex-direction: column;
        width: 100%;
    }

    .game-fouls-actions .atlas-btn {
        width: 100%;
        justify-content: center;
        font-size: 0.95rem;
        padding: 0.6rem 0.75rem;
        min-height: 2.6rem;
    }
}

/* ── YSN As-Of text inside HeaderBar RightContent ─────── */
.ysn-asof-text {
    font-size: 0.8125rem;
    color: #64748b;
    white-space: nowrap;
}

    .ysn-asof-text strong {
        color: #1e3a5f;
        margin-right: 0.2rem;
    }

    .ysn-asof-text .ysn-bday-count {
        margin-left: 0.2rem;
        color: #94a3b8;
    }

/* ── Favorite Star ──────────────────────────────────────── */
.btn-favorite-star {
    display: inline-flex;
    align-items: center;
    background: none;
    border: none;
    padding: 0 6px 0 0;
    cursor: pointer;
    font-size: 1.1rem;
    color: #adb5bd; /* neutral/gray when not favorited */
    transition: color 0.15s ease, transform 0.1s ease;
    line-height: 1;
}

    .btn-favorite-star:hover:not(:disabled) {
        color: #ffc107;
        transform: scale(1.15);
    }

    .btn-favorite-star.is-favorite {
        color: #ffc107; /* gold when favorited */
    }

    .btn-favorite-star:disabled {
        opacity: 0.5;
        cursor: default;
    }

/* ── Home Favorites List ────────────────────────────────── */
.home-favorites-list {
    list-style: disc;
    padding-left: 1.25rem;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 0.3rem;
}

.home-favorite-link {
    font-size: 0.9rem;
    color: var(--ds-link-color, #0d6efd);
    text-decoration: none;
}

    .home-favorite-link:hover {
        text-decoration: underline;
    }