/* ==================== DASHBOARD SUMMARY STYLES ====================  */

/* Dashboard profile G-- Online/Away badge (setUserState) */
.dashboard-user-status-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 12px;
    border-radius: 999px;
    font-size: 0.8rem;
    font-weight: 500;
    background: var(--success-light, #c3e6cb);
    color: var(--alert-success, #155724);
}

.dashboard-user-status-badge .dashboard-user-status-dot {
    font-size: 0.5rem;
    vertical-align: middle;
}

.dashboard-user-status-badge .fa-circle.text-danger {
    color: var(--danger, #dc3545) !important;
}

.dashboard-user-status-badge .fa-circle.text-success {
    color: var(--success, #28a745) !important;
}

/* Away state: subtle red tint */
.dashboard-user-status-badge:has(.text-danger) {
    background: var(--danger-light, #f5c6cb);
    color: var(--alert-danger, #721c24);
}

[data-theme="dark"] .dashboard-user-status-badge {
    background: rgba(var(--success-rgb, 40, 167, 69), 0.22);
    color: var(--success-light, #c3e6cb);
}

[data-theme="dark"] .dashboard-user-status-badge:has(.text-danger) {
    background: rgba(var(--danger-rgb, 220, 53, 69), 0.22);
    color: var(--danger-light, #f5c6cb);
}

/* Pending Actions widget (dashboard) */
.pending-actions-widget .pending-summary-row-tight {
    margin-top: 0.40rem !important;
}

.pending-actions-widget .pending-list-wrapper-dashboard {
    max-height: min(22vh, 260px);
    overflow-y: auto;
    margin-top: 0.35rem;
}

.pending-actions-widget .pending-actions-title {
    font-weight: 600;
    font-size: 0.95rem;
    color: #333;
}

.pending-actions-widget.is-loading #Count_Pending,
.pending-actions-widget.is-loading #Pending_Total_Pill,
.pending-actions-widget.is-loading #Pending_Summary_Dynamic,
.pending-actions-widget.is-loading #Pending_Showing_Wrapper {
    display: none !important;
}

.pending-actions-widget:not(.is-loading) #Count_Pending_Skeleton,
.pending-actions-widget:not(.is-loading) #Pending_Summary_Skeleton,
.pending-actions-widget:not(.is-loading) #Pending_Action_Skeleton {
    display: none !important;
}

.pending-actions-widget.is-loading.is-collapsed #Count_Pending_Skeleton {
    display: none !important;
}

.pending-actions-widget.is-loading.is-collapsed #Count_Pending {
    display: inline-block !important;
}

.home-tile-skel__count {
    display: inline-block;
    width: 1.5rem;
    height: 1.15rem;
    margin-left: 0.5rem;
    border-radius: 999px;
    vertical-align: middle;
}

.home-tile-skel--pills {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem;
}

.home-tile-skel__pill {
    display: inline-block;
    width: 5.5rem;
    height: 1.75rem;
    border-radius: 999px;
}

#Pending_Action_Skeleton {
    pointer-events: none;
}

#Pending_Action_Skeleton .pending-card-link {
    cursor: default;
}

#Pending_Action_Skeleton .home-tile-skel__line {
    display: block;
    margin-top: 4px;
}

#Pending_Action_Skeleton .pending-section-header {
    display: flex;
    align-items: center;
    gap: 0.4rem;
}

.home-tile-skel__section-label {
    display: inline-block;
    width: 6.5rem;
    height: 0.8rem;
    vertical-align: middle;
}

.home-tile-skel__section-badge {
    display: inline-block;
    width: 1.4rem;
    height: 1.1rem;
    border-radius: 999px;
    margin-left: 0.15rem;
    vertical-align: middle;
}

.home-tile-skel__icon {
    display: inline-block;
    width: 18px;
    height: 18px;
    border-radius: 4px;
}

.home-tile-skel__line {
    height: 10px;
    width: 72%;
}

.home-tile-skel--shortcuts .home-tile-skel__tile {
    min-height: 55px;
    border-radius: 5px;
    border: 1px solid #e0e0e0;
    background: #fff;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 8px 6px;
}

.home-tile-skel__tile-icon {
    width: 22px;
    height: 22px;
    border-radius: 6px;
}

.home-tile-skel__tile-label {
    width: 70%;
    height: 8px;
}

[data-theme="dark"] .home-tile-skel--shortcuts .home-tile-skel__tile {
    background: #262626;
    border-color: #3a3a3a;
}

/* Tile + widget as flex column so list fills remaining height */
.tile.tile-pending-actions {
    display: flex;
    flex-direction: column;
    min-height: 0;
}

.tile.tile-pending-actions .pending-actions-widget {
    display: flex;
    flex-direction: column;
    flex: 1;
    min-height: 0;
}

.tile.tile-pending-actions .pending-list-wrapper {
    flex: 1;
    min-height: 0;
    overflow-y: auto;
}


.pending-summary-cards .pending-summary-card {
    border: 1px solid #dee2e6;
    border-radius: 16px;
    padding: 10px 12px;
    text-align: center;
    cursor: pointer;
    transition: border-color 0.2s, background 0.2s;
    background: #fff;
    width: 150px;
    gap: 10px;
}

.pending-summary-cards .pending-summary-card .label {
    font-size: 0.65rem;
    color: #666;
    display: block;
    margin-left: 10px;
}

.pending-summary-cards .pending-summary-card .count {
    font-size: 1rem;
    font-weight: 700;
    display: block;
}

.pending-summary-cards .pending-summary-card .sub {
    font-size: 0.65rem;
    color: #888;
}

.pending-summary-cards .pending-summary-card .sub.pct {
    display: block;

}

.pending-summary-cards .pending-summary-card.active {
    border-color: #495057;
    background: #f8f9fa;
}

.pending-summary-cards .pending-summary-card:hover {
    border-color: #adb5bd;
}

.progress-bar-mini {
    height: 3px;
    border-radius: 2px;
    margin-top: 2px;
    max-width: 100%;
    transition: width 0.3s;
}

/* Pending summary: simple rounded-pill filter buttons */
#Pending_Summary_Row,
.pending-summary-dynamic {
    gap: 0.5rem;
}

.pending-summary-pill {
    font-size: 0.75rem;
    font-weight: 500;
    padding: 0.32rem 0.65rem;
    line-height: 1.2;
}

.pending-summary-pill.active {
    font-weight: 600;
}

.pending-summary-pill.btn-outline-primary.active,
.pending-summary-pill.btn-outline-info.active {
    color: #fff;
}

.pending-summary-pill.btn-outline-warning.active {
    color: #212529;
}

.pending-summary-pill-outline-purple {
    color: #6f42c1;
    border-color: #6f42c1;
    background: transparent;
}

.pending-summary-pill-outline-purple:hover,
.pending-summary-pill-outline-purple.active {
    color: #fff;
    background-color: #6f42c1;
    border-color: #6f42c1;
}

/* Dark mode: neutral filter-chip hover (not teal G-- unlike .quick-actions-btn) */
[data-theme="dark"] .pending-summary-pill {
    transform: none;
}

[data-theme="dark"] .pending-summary-pill.border-secondary,
[data-theme="dark"] .pending-summary-pill.border.border-secondary {
    color: #ced4da;
    background-color: #2d3238;
    border-color: var(--secondary-btn-hover, #5a6268) !important;
}

[data-theme="dark"] .pending-summary-pill.border-secondary:hover,
[data-theme="dark"] .pending-summary-pill.border-secondary:focus,
[data-theme="dark"] .pending-summary-pill.border.border-secondary:hover,
[data-theme="dark"] .pending-summary-pill.border.border-secondary:focus {
    color: #f8f9fa;
    background-color: #3d4450 !important;
    border-color: #868e96 !important;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.45);
}

[data-theme="dark"] .pending-summary-pill.border-secondary.active,
[data-theme="dark"] .pending-summary-pill.border.border-secondary.active {
    color: #fff;
    background-color: var(--secondary-btn-hover, #5a6268) !important;
    border-color: #adb5bd !important;
    box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.35);
}

[data-theme="dark"] .pending-summary-pill.border-secondary.active:hover,
[data-theme="dark"] .pending-summary-pill.border.border-secondary.active:hover {
    background-color: var(--secondary, #6c757d) !important;
    border-color: #ced4da !important;
}

[data-theme="dark"] .pending-summary-pill.btn-primary {
    color: #7ec8c0;
    background-color: rgba(var(--primary-rgb, 0, 150, 136), 0.18);
    border-color: var(--primary, #009688);
}

[data-theme="dark"] .pending-summary-pill.btn-info {
    color: #8fd4e0;
    background-color: rgba(23, 162, 184, 0.18);
    border-color: var(--info, #17a2b8);
}

[data-theme="dark"] .pending-summary-pill.btn-success {
    color: #9fdfb4;
    background-color: rgba(40, 167, 69, 0.18);
    border-color: var(--success, #28a745);
}

[data-theme="dark"] .pending-summary-pill.btn-danger {
    color: #f5a8ae;
    background-color: rgba(220, 53, 69, 0.18);
    border-color: var(--danger, #dc3545);
}

[data-theme="dark"] .pending-summary-pill.btn-warning {
    color: #ffe08a;
    background-color: rgba(255, 193, 7, 0.15);
    border-color: var(--warning, #ffc107);
}

[data-theme="dark"] .pending-summary-pill.btn-primary:hover,
[data-theme="dark"] .pending-summary-pill.btn-primary:focus,
[data-theme="dark"] .pending-summary-pill.btn-info:hover,
[data-theme="dark"] .pending-summary-pill.btn-info:focus,
[data-theme="dark"] .pending-summary-pill.btn-success:hover,
[data-theme="dark"] .pending-summary-pill.btn-success:focus,
[data-theme="dark"] .pending-summary-pill.btn-danger:hover,
[data-theme="dark"] .pending-summary-pill.btn-danger:focus,
[data-theme="dark"] .pending-summary-pill.btn-warning:hover,
[data-theme="dark"] .pending-summary-pill.btn-warning:focus {
    color: #fff;
    filter: brightness(1.12);
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.45);
    transform: none;
}

[data-theme="dark"] .pending-summary-pill.btn-primary.active {
    color: #fff;
    background-color: var(--primary, #009688) !important;
    border-color: var(--primary, #009688) !important;
}

[data-theme="dark"] .pending-summary-pill.btn-info.active {
    color: #fff;
    background-color: var(--info, #17a2b8) !important;
    border-color: var(--info, #17a2b8) !important;
}

[data-theme="dark"] .pending-summary-pill.btn-success.active {
    color: #fff;
    background-color: var(--success, #28a745) !important;
    border-color: var(--success, #28a745) !important;
}

[data-theme="dark"] .pending-summary-pill.btn-danger.active {
    color: #fff;
    background-color: var(--danger, #dc3545) !important;
    border-color: var(--danger, #dc3545) !important;
}

[data-theme="dark"] .pending-summary-pill.btn-warning.active {
    color: #212529;
    background-color: var(--warning, #ffc107) !important;
    border-color: var(--warning, #ffc107) !important;
}

[data-theme="dark"] .pending-summary-pill-outline-purple {
    color: #c9b3f5;
    background-color: rgba(111, 66, 193, 0.15);
    border-color: #6f42c1;
}

[data-theme="dark"] .pending-summary-pill-outline-purple:hover,
[data-theme="dark"] .pending-summary-pill-outline-purple:focus {
    color: #fff;
    background-color: rgba(111, 66, 193, 0.45);
    border-color: #8b5cf6;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.45);
    transform: none;
}

[data-theme="dark"] .pending-summary-pill-outline-purple.active {
    color: #fff;
    background-color: #6f42c1 !important;
    border-color: #6f42c1 !important;
}


.pending-list-wrapper .action_pending {
    flex: 0 0 100%;
    max-width: 100%;
    margin-bottom: 6px;
    box-sizing: border-box;
}

.pending-list-wrapper .action_pending a.alert {
    border-left: 4px solid var(--danger, #dc3545);
    padding: 8px 10px;
    margin: 0;
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
    display: flex;
    align-items: flex-start;
    text-align: left;
    border-radius: 6px;
}

.pending-list-wrapper .action_pending .app-notification__icon {
    margin-right: 8px;
    flex-shrink: 0;
}

/* Dashboard pending: each .pending-section is full width of #Pending_Action row */
#Pending_Action {
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
}

#Pending_Action>.pending-section {
    flex: 0 0 100%;
    max-width: 100%;
}

.pending-section {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    align-items: stretch;
    align-content: flex-start;
    gap: 0;
    width: 100%;
    max-width: 100%;
    margin-bottom: 10px;
    box-sizing: border-box;
}

.pending-section:last-child {
    margin-bottom: 0;
}

/* Mobile-first: one column (overridden from md / lg) */
#Pending_Action .pending-section .action_pending {
    flex: 0 0 100%;
    max-width: 100%;
    min-width: 0;
    padding: 0 0 8px;
    box-sizing: border-box;
}

/* Section title: full row, gutters match card padding (px-2 on #Pending_Action G-- 8px) */
.pending-section-header {
    flex: 0 0 100%;
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
    font-size: 0.8rem;
    font-weight: 600;
    color: #495057;
    margin: 0 0 6px 0;
    padding: 4px 4px 8px 4px;
    border-bottom: 1px solid #e9ecef;
}

.pending-section-header:first-child {
    margin-top: 0;
    padding-top: 0;
}

/* Tablet md: 2 cards per row */
@media (min-width: 768px) and (max-width: 991.98px) {
    #Pending_Action .pending-section .action_pending {
        flex: 0 0 50%;
        max-width: 50%;
        min-width: 0;
        padding: 0 4px 8px;
        box-sizing: border-box;
    }

    .pending-section-header {
        padding-left: 4px;
        padding-right: 4px;
    }
}

/* Desktop lg+: 4 cards per row (no min-width G-- avoids forcing overflow) */
@media (min-width: 992px) {
    #Pending_Action .pending-section .action_pending {
        flex: 0 0 25%;
        max-width: 25%;
        min-width: 0;
        padding: 0 4px 8px;
        box-sizing: border-box;
    }
}

/* Mobile: typography / tile height (card width uses mobile-first base above) */
@media (max-width: 767.98px) {
    .tile.tile-pending-actions {
        min-height: min(52vh, 420px);
    }

    .pending-actions-widget .pending-summary-row-tight {
        margin-top: 0.6rem !important;
    }

    .pending-actions-widget .pending-list-wrapper-dashboard {
        max-height: min(42vh, 340px);
        margin-top: 0.55rem;
    }

    .pending-summary-pill {
        font-size: 0.75rem;
        padding: 0.38rem 0.8rem;
    }

    .pending-section-header {
        font-size: 1.06rem;
        margin: 8px 0 8px 0;
        padding: 0 0 8px 0;
    }

    .pending-section-header>.fa,
    .pending-section-header .fa.mr-1 {
        font-size: 1.1rem;
        vertical-align: -0.12em;
        margin-right: 0.4rem !important;
    }

    .pending-section-header .badge {
        font-size: 0.75rem;
        font-weight: 600;
        padding: 0.32em 0.6em;
    }
}

#Pending_Action .action_pending {
    min-width: 0;
}

.pending-action-card .pending-card-link {
    display: block;
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
    padding: 8px 10px;
    text-decoration: none;
    color: #212529;
    background-color: #f8f9fa;
    border-left: 4px solid var(--secondary, #6c757d);
    border-radius: 10px;
    transition: background 0.2s;
}

/* Left border follows PENDING_TYPE_CONFIG: primary, warning, info, danger, secondary */
.pending-section[data-type="cm"] .pending-action-card .pending-card-link {
    border-left-color: var(--danger, #dc3545);
    /* primary */
}

.pending-section[data-type="pm"] .pending-action-card .pending-card-link {
    border-left-color: #0dcaf0;
    /* warning */
}

.pending-section[data-type="scm"] .pending-action-card .pending-card-link {
    border-left-color: var(--primary, #009688);
    /* primary */
}

.pending-section[data-type="stock"] .pending-action-card .pending-card-link {
    border-left-color: var(--warning, #ffc107);
    /* info */
}

.pending-section[data-type="claim"] .pending-action-card .pending-card-link {
    border-left-color: var(--primary, #009688);
    /* danger */
}

.pending-section[data-type="booking"] .pending-action-card .pending-card-link {
    border-left-color: #009688;
    /* primary */
}

.pending-section[data-type="other"] .pending-action-card .pending-card-link {
    border-left-color: var(--secondary, #6c757d);
    /* secondary */
}

.pending-action-card .pending-card-link:hover {
    background-color: #e9ecef;
    color: #212529;
}

.pending-card-vertical.pending-card-link {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 6px;
}

.pending-card-id {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 6px 10px;
    font-size: 0.9rem;
    margin-bottom: 2px;
    width: 100%;
}

.pending-card-id__title {
    flex: 1 1 auto;
    min-width: 0;
}

.pending-card-id .pending-card-pm-type {
    flex-shrink: 0;
    align-self: center;
    padding: 3px 8px;
}

.pending-card-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px;
    margin-top: 4px;
}

.pending-action-card-simple .pending-card-link {
    display: flex;
    align-items: flex-start;
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
}

.pending-action-card-simple .pending-card-link .app-notification__icon {
    margin-right: 8px;
}

.pending-showing-wrapper {
    text-align: center;
    background: #f8f9fa;
    padding: 6px 10px;
    border-radius: 6px;
    border: 1px solid #dee2e6;
    height: 100%;
}

/* Full-width footer bar: break out of tile padding so it spans edge-to-edge at bottom */
.tile .pending-actions-widget .pending-showing-wrapper,
.widget-modern .pending-actions-widget .pending-showing-wrapper {
    width: calc(100% + 36px);
    margin-left: -18px;
    margin-right: -18px;
    margin-bottom: -18px;
    margin-top: 0.25rem;
    padding-left: 18px;
    padding-right: 18px;
    padding-top: 6px;
    padding-bottom: 8px;
    border-radius: 0 0 12px 12px;
    border-left: none;
    border-right: none;
    border-bottom: none;
    box-sizing: border-box;
}

/* Ensure pending-actions widget doesn't clip the full-bleed footer */
.tile .pending-actions-widget {
    overflow: visible;
}

/* Links used as card wrapper: no underline on hover/focus */
a.text-decoration-none:hover,
a.text-decoration-none:focus {
    text-decoration: none !important;
}

/* Work Order dashboard cards G-- aligned with unified KPI card system (.kpi-card) */
.wo-card {
    background: #fff;
    border: none;
    border-left: 4px solid #e9ecef;
    border-radius: 10px;
    padding: 12px 14px;
    height: 100%;
    min-height: 108px;
    -webkit-box-shadow: 0 6px 6px 0 rgba(0, 0, 0, 0.08), 0 1px 6px 0 rgba(0, 0, 0, 0.06), 6px 6px 8px -2px rgba(0, 0, 0, 0.2);
    box-shadow: 0 6px 6px 0 rgba(0, 0, 0, 0.08), 0 1px 6px 0 rgba(0, 0, 0, 0.06), 6px 6px 8px -2px rgba(0, 0, 0, 0.2);
    transition: transform 0.15s, box-shadow 0.15s;
    overflow: visible;
    box-sizing: border-box;
}

/* Accent border from dominant status color inside the card */
.wo-card:has(.bg-success) {
    border-left-color: var(--success, #28a745);
}

.wo-card:has(.bg-info) {
    border-left-color: var(--info, #17a2b8);
}

.wo-card:has(.bg-danger) {
    border-left-color: var(--danger, #dc3545);
}

.wo-card:has(.bg-warning) {
    border-left-color: var(--warning, #ffc107);
}

.wo-card:has(.bg-primary) {
    border-left-color: var(--primary, #009688);
}

.wo-card:hover {
    -webkit-box-shadow: 0 6px 6px 0 rgba(0, 0, 0, 0.14), 0 1px 6px 0 rgba(0, 0, 0, 0.12), 6px 6px 8px -2px rgba(0, 0, 0, 0.2);
    box-shadow: 0 6px 6px 0 rgba(0, 0, 0, 0.14), 0 1px 6px 0 rgba(0, 0, 0, 0.12), 6px 6px 8px -2px rgba(0, 0, 0, 0.2);
    transform: translateY(-1px);
}

.wo-card.wo-chart-card {
    min-height: 0;
    border-radius: 16px;
    -webkit-box-shadow: 0 6px 6px 0 rgba(0, 0, 0, 0.14), 0 1px 6px 0 rgba(0, 0, 0, 0.12), 6px 6px 8px -2px rgba(0, 0, 0, 0.2);
    box-shadow: 0 6px 6px 0 rgba(0, 0, 0, 0.14), 0 1px 6px 0 rgba(0, 0, 0, 0.12), 6px 6px 8px -2px rgba(0, 0, 0, 0.2);
    transform: none;
}

.wo-card.wo-chart-card:hover {
    transform: translateY(-1px);
}

/* KPI-style row: solid icon tile + text (matches .kpi-card layout) */
.wo-card-kpi-row {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 8px;
    min-width: 0;
    max-width: 100%;
}

.wo-card-kpi-row:last-child {
    margin-bottom: 0;
}

.wo-card--kpi-stat .wo-card-kpi-row {
    margin-bottom: 10px;
}

.wo-card-kpi-row--flush {
    margin-bottom: 0;
}

.wo-card-kpi-text {
    flex: 1;
    min-width: 0;
}

.wo-card-kpi-text .wo-stat-label {
    margin-bottom: 3px;
}

.wo-card-kpi-text .wo-stat-value {
    margin-bottom: 0;
}

/* Stat cards: top block (legacy + flex utility rows).
   Grid keeps the pill in the top-right cell. The text column is allowed to
   shrink, so the pill stays inside the card border.
   d-flex on the markup is display:flex !important, so grid must win here.
   This Bootstrap build has no .min-w-0 / .flex-grow-1 / .flex-shrink-0. */
.wo-card-top,
.wo-card-top.d-flex {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: start;
    justify-content: stretch;
    margin-bottom: 4px;
    min-width: 0;
    max-width: 100%;
    column-gap: 8px;
}

.wo-card-top> :first-child {
    min-width: 0;
}

.wo-card-top>.wo-card-badge,
.wo-card-top>.d-flex.flex-column {
    justify-self: end;
}

.wo-card-top>.d-flex>div:last-child {
    min-width: 0;
}

.wo-card-top .wo-stat-value {
    margin-bottom: 0;
}

.wo-card-top--kpi {
    align-items: center;
    gap: 12px;
    flex-wrap: nowrap;
}

.wo-card-top--kpi .min-w-0 {
    min-width: 0;
}

/* Single-row dashboard strips: no stretch-tall empty space in equal-height columns */
.wo-card--fit-content {
    height: auto;
    min-height: 0;
    align-self: flex-start;
    width: 100%;
}

/* Icon always first (left); text grows; badge stays at end of row */
.wo-card-kpi-row--dash {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    align-items: center;
    gap: 12px;
    margin-bottom: 0;
    width: 100%;
    min-width: 0;
}

.wo-card-kpi-row--dash>.wo-stat-icon-assets {
    flex-shrink: 0;
    order: 0;
}

.wo-card-kpi-row--dash>.wo-card-kpi-text {
    flex: 1 1 auto;
    min-width: 0;
    order: 1;
}

.wo-card-kpi-row--dash>.badge {
    flex-shrink: 0;
    order: 2;
    margin-left: auto;
    margin-top: 0 !important;
}

.wo-card-kpi-row--dash .wo-card-kpi-text h6 {
    margin-top: 0;
    line-height: 1.25;
}

.wo-card-head {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    align-items: flex-start;
    gap: 6px;
    margin-bottom: 0;
}

.wo-chart-card .wo-card-head {
    justify-content: space-between;
    margin-bottom: 12px;
}

.wo-card-badge {
    font-size: 0.75rem;
    padding: 2px 10px;
    border-radius: 999px;
    background: #f5f5f5;
    color: #616161;
    flex-shrink: 0;
    max-width: 100%;
}

.wo-card-badge-info {
    font-size: 0.75rem;
    padding: 4px 10px;
    border-radius: 999px;
    background: rgba(156, 242, 255, 0.5);
    color: #0c5460;
}

.wo-card-badge-primary {
    font-size: 0.75rem;
    padding: 4px 10px;
    border-radius: 999px;
    background: rgba(var(--primary-rgb, 0, 150, 136), 0.16);
    color: var(--primary-back, #00635a);
}
[data-theme="dark"] .wo-card-badge-primary { background: rgba(var(--primary-rgb, 0, 150, 136), 0.26); color: var(--primary-hover, #a6dbd6); }

.wo-card-badge-danger {
    font-size: 0.75rem;
    padding: 4px 10px;
    border-radius: 999px;
    background: rgba(235, 151, 159, 0.5);
    color: #721c24;
}

.wo-card-badge-warning {
    background: rgba(255, 193, 7, 0.35);
    color: var(--warning, #ffc107);
}

.wo-card-badge-success {
    background: rgba(40, 167, 69, 0.25);
    color: #155724;
}

/* SCM Status list (workflow breakdown) */
.wo-scm-status-list {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.wo-scm-status-row {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 0.875rem;
}

.wo-scm-status-icon {
    width: 12px;
    height: 12px;
    border-radius: 2px;
    border: 2px solid;
    flex-shrink: 0;
}

.wo-scm-status-icon--danger {
    border-color: var(--danger, #dc3545);
    background: rgba(220, 53, 69, 0.2);
}

.wo-scm-status-icon--warning {
    border-color: var(--warning, #ffc107);
    background: rgba(255, 193, 7, 0.2);
}

.wo-scm-status-icon--info {
    border-color: var(--info, #17a2b8);
    background: rgba(23, 162, 184, 0.2);
}

.wo-scm-status-icon--success {
    border-color: var(--success, #28a745);
    background: rgba(40, 167, 69, 0.2);
}

.wo-scm-status-label {
    min-width: 100px;
    color: #212529;
}

.wo-scm-status-count {
    font-weight: 600;
    min-width: 3em;
    text-align: right;
}

[data-theme="dark"] .wo-card .wo-scm-status-label,
[data-theme="dark"] .wo-card .wo-scm-status-count {
    color: #e2e8f0;
}

/* Stat icons: same proportions as .kpi-icon (solid bg + white glyph from Bootstrap bg-* / text-white) */
.wo-stat-icon {
    width: 50px;
    height: 50px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 26px;
    line-height: 1;
    color: #fff;
    flex-shrink: 0;
}

.wo-stat-icon .fa {
    color: inherit;
}

/* Darker warning tile for white icons (matches .kpi-card.kpi-warning .kpi-icon) */
.wo-stat-icon.bg-warning.text-white,
.wo-stat-icon-assets.bg-warning.text-white {
    background-color: var(--warning, #ffc107) !important;
}

.wo-stat-icon-assets {
    width: 52px;
    height: 52px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 28px;
    line-height: 1;
    color: #fff;
    flex-shrink: 0;
}

.wo-stat-icon-assets .fa {
    color: inherit;
}

.wo-stat-value {
    font-size: 20px;
    font-weight: 700;
    color: #212529;
    line-height: 1.2;
    margin-bottom: 4px;
}

.wo-stat-value--lg {
    font-size: 1.75rem;
}

.wo-stat-value--sm {
    font-size: 0.95rem;
    line-height: 1.35;
    font-weight: 600;
}

.wo-stat-label {
    font-size: 11px;
    font-weight: 600;
    color: var(--secondary, #6c757d);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: 8px;
}

.wo-stat-breakdown {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-start;
    align-items: flex-start;
    align-content: flex-start;
    gap: 6px;
    width: 100%;
}

/* Chart card: title, subtitle, filters */
.wo-card-title {
    font-size: 0.95rem;
    font-weight: 600;
    color: #212529;
    margin-bottom: 2px;
}

.wo-card-subtitle {
    font-size: 0.78rem;
    color: var(--secondary, #6c757d);
    margin-bottom: 12px;
}

.wo-chart-filters .btn {
    font-size: 0.75rem;
    padding: 4px 12px;
    border-radius: 22px;
}

/* Assets Operation cards (use existing wo-card styles with minimal extensions) */
.assets-op-summary-card .wo-stat-value {
    font-size: 1.6rem;
}

.assets-op-progress {
    margin-top: 8px;
}

/* Home: Asset Lifecycle section */
.home-dep-meter {
    height: 6px;
    border-radius: 3px;
    background: #e9ecef;
    overflow: hidden;
    margin-bottom: 4px;
}

.home-dep-meter-fill {
    height: 100%;
    border-radius: 3px;
    background: var(--primary, #009688);
    transition: width 0.4s;
}

.home-dep-chart-wrap {
    position: relative;
    height: 260px;
}

[data-theme="dark"] .home-dep-meter {
    background: #3a3a3a;
}

.assets-op-type-card {
    padding: 0.75rem 1rem;
    border-left-width: 0px;
    border-left-color: #e9ecef;
}

.assets-op-type-card .wo-stat-icon-assets {
    width: 40px;
    height: 40px;
    font-size: 1.2rem;
}

.assets-op-type-icon {
    width: 24px;
    height: 24px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: #212529;
    font-size: 1rem;
}

.assets-op-type-label {
    font-size: 0.95rem;
    font-weight: 600;
}

.assets-op-metric {
    display: block;
    text-align: center;
    padding: 0.5rem 0.25rem;
    font-size: 0.8rem;
    text-decoration: none;
    color: inherit;
}

.assets-op-metric:hover {
    text-decoration: none;
    color: inherit;
}

.assets-op-metric-value {
    font-size: 1.1rem;
    font-weight: 600;
    color: #212529;
}

.assets-op-metric-label {
    font-size: 0.75rem;
    color: var(--primary-back, #0d9488);
}

.assets-op-metric-pending,
.assets-op-metric-closed {
    background: transparent;
}

.wo-trend-chart-wrap {
    max-height: 290px;
}

/* ===================== Assets Summary Cards (Total Assets / Locations / Sections) ===================== */
.assets-summary-card {
    background: #fff;
    border-radius: 12px;
    padding: 24px;
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.08);
    height: 100%;
    border: 1px solid #f0f0f0;
    transition: box-shadow 0.2s ease, transform 0.2s ease;
}

.assets-summary-card:hover {
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.12);
    transform: translateY(-2px);
}

.assets-summary-card__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 20px;
}

/* Icon wrap G-- soft tint background */
.assets-summary-card__icon-wrap {
    width: 48px;
    height: 48px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.35rem;
    flex-shrink: 0;
}

.assets-summary-card__icon-wrap--green {
    background: rgba(88, 166, 92, 0.12);
    color: #58A65C;
}

.assets-summary-card__icon-wrap--amber {
    background: rgba(244, 196, 76, 0.12);
    color: #c99b00;
}

.assets-summary-card__icon-wrap--teal {
    background: rgba(80, 162, 185, 0.12);
    color: #50A2B9;
}

/* Year badge G-- pill in brand tint */
.assets-summary-card__year-badge {
    font-size: 0.72rem;
    font-weight: 600;
    padding: 3px 10px;
    border-radius: 999px;
    letter-spacing: 0.3px;
}

.assets-summary-card__year-badge--green {
    background: rgba(88, 166, 92, 0.12);
    color: #3d7a40;
}

.assets-summary-card__year-badge--amber {
    background: rgba(244, 196, 76, 0.15);
    color: #8a6800;
}

.assets-summary-card__year-badge--teal {
    background: rgba(80, 162, 185, 0.12);
    color: #2e7a93;
}

/* Value G-- large bold charcoal number */
.assets-summary-card__value {
    font-size: 2rem;
    font-weight: 700;
    color: #1a1a2e;
    line-height: 1.1;
    margin-bottom: 6px;
    letter-spacing: -0.5px;
}

/* Title G-- medium gray label */
.assets-summary-card__title {
    font-size: 14px;
    font-weight: 500;
    color: #888;
    text-transform: none;
}

/* Dark mode: badge-light stays --light (#f8f9fa) while dark-mode.css sets
   [data-theme="dark"] .badge { color:#fff } → white-on-pale (Staff Overview
   "In-Active: N", site-code chips, tenant/vendor overview pills, etc.). */
[data-theme="dark"] .badge-light {
    background-color: #3a3a3a;
    color: #fff;
    border-color: #555;
}

[data-theme="dark"] .badge-light.text-muted,
[data-theme="dark"] .badge-light.text-dark {
    color: #fff !important;
}

[data-theme="dark"] a.badge-light:hover,
[data-theme="dark"] a.badge-light:focus,
[data-theme="dark"] .badge-light[href]:hover,
[data-theme="dark"] .badge-light[href]:focus {
    background-color: #333;
    color: #fff;
}

/* Dark mode */
[data-theme="dark"] .assets-summary-card {
    background: #2d2d2d;
    border-color: #3a3a3a;
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.35);
}

[data-theme="dark"] .assets-summary-card:hover {
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.5);
}

[data-theme="dark"] .assets-summary-card__value {
    color: #e2e8f0;
}

[data-theme="dark"] .assets-summary-card__title {
    color: #adb5bd;
}

[data-theme="dark"] .assets-summary-card__icon-wrap--green {
    background: rgba(88, 166, 92, 0.18);
}

[data-theme="dark"] .assets-summary-card__icon-wrap--amber {
    background: rgba(244, 196, 76, 0.18);
}

[data-theme="dark"] .assets-summary-card__icon-wrap--teal {
    background: rgba(80, 162, 185, 0.18);
}

[data-theme="dark"] .assets-summary-card__year-badge--green {
    background: rgba(88, 166, 92, 0.2);
    color: #7ecf82;
}

[data-theme="dark"] .assets-summary-card__year-badge--amber {
    background: rgba(244, 196, 76, 0.2);
    color: #f4c44c;
}

[data-theme="dark"] .assets-summary-card__year-badge--teal {
    background: rgba(80, 162, 185, 0.2);
    color: #7ecbe0;
}

/* Stock Out by Type donut + legend layout */
.wo-card-chart {
    position: relative;
    height: 200px;
}

.wo-donut-chart {
    position: relative;
    min-width: 140px;
    height: 200px;
}

.wo-donut-center {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    text-align: center;
    pointer-events: none;
}

.wo-donut-total {
    font-size: 1.4rem;
    font-weight: 700;
    color: #212529;
}

.wo-donut-total-label {
    font-size: 0.75rem;
    color: var(--secondary, #6c757d);
}

/* Stock Out by Type legend layout (2 items per row) */
.wo-chart-legend {
    margin-top: 8px;
    min-width: 0;
}

.wo-chart-legend #legend1_sp,
.wo-chart-legend #legend1_claim {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: 12px;
    row-gap: 8px;
}

.wo-chart-legend #legend1_sp>.wo-chart-legend-item,
.wo-chart-legend #legend1_claim>.wo-chart-legend-item {
    min-width: 0;
}

.wo-chart-legend-item {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    margin-bottom: 6px;
    font-size: 0.8rem;
    color: #495057;
}

.wo-chart-legend-label {
    display: flex;
    align-items: center;
    flex: 1;
    margin-right: 8px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.wo-chart-legend-bar-wrapper {
    flex: 1;
    background: #f1f3f5;
    border-radius: 999px;
    height: 8px;
    overflow: hidden;
}

.wo-chart-legend-bar {
    height: 100%;
    border-radius: 999px;
}

.wo-chart-legend-value {
    flex: 0 0 auto;
    margin-left: 8px;
    font-weight: 600;
    font-size: 0.8rem;
}

[data-theme="dark"] .wo-chart-legend-item {
    color: #e2e8f0;
}

[data-theme="dark"] .wo-chart-legend-bar-wrapper {
    background: #3b3b3b;
}

.wo-chart-legend-dot {
    width: 8px;
    height: 8px;
    border-radius: 999px;
    margin-right: 8px;
    flex: 0 0 auto;
}

[data-theme="dark"] .wo-donut-total {
    color: #e2e8f0;
}

[data-theme="dark"] .wo-donut-total-label {
    color: #adb5bd;
}

.wo-chart-legend-bar-row {
    display: flex;
    align-items: center;
}

/* Leave dashboard summary cards */
.leave-summary-card {
    padding: 12px 14px;
}

.leave-summary-card .wo-card-kpi-row {
    margin-bottom: 0;
}

.leave-summary-card .wo-stat-value {
    font-size: 20px;
}

.leave-summary-card .wo-card-subtitle {
    font-size: 0.78rem;
    margin-bottom: 0;
}

.leave-summary-card .wo-stat-icon {
    width: 50px;
    height: 50px;
    font-size: 26px;
    border-radius: 10px;
}

.leave-summary-card .wo-stat-icon.bg-warning.text-white {
    background-color: var(--warning, #ffc107) !important;
}

.leave-summary-footer {
    margin-top: 8px;
    font-size: 0.78rem;
}

.leave-summary-link {
    color: #0d6efd;
    text-decoration: none;
    font-weight: 600;
}

.leave-summary-link:hover {
    text-decoration: underline;
}

.leave-progress {
    margin-top: 8px;
    height: 4px;
    border-radius: 999px;
    background: #f1f3f5;
    overflow: hidden;
}

.leave-progress-bar {
    height: 100%;
    border-radius: 999px;
}

.leave-summary-meta {
    display: flex;
    justify-content: space-between;
    margin-top: 4px;
    font-size: 0.75rem;
    color: var(--secondary, #6c757d);
}

.leave-negative .wo-stat-value {
    color: var(--danger, #dc3545);
}

.leave-chart-card {
    padding: 1rem 1rem 0.9rem 1rem;
}

.leave-chart-card .wo-card-title {
    font-size: 0.95rem;
}

.leave-chart-card .wo-card-subtitle {
    font-size: 0.78rem;
}

.claim-empty-state {
    min-height: 120px;
}

[data-theme="dark"] .leave-summary-meta {
    color: #adb5bd;
}

@media (max-width: 992px) {

    .wo-stockout-layout {
        flex-direction: column;
        align-items: stretch;
    }

    .wo-donut-wrap {
        margin: 0 auto 12px auto;
    }

    .wo-chart-legend {
        width: 100%;
    }
}

/* Rating block inside wo-card (My Work Performance) */
.wo-rating-avg {
    font-size: 2rem;
    font-weight: 700;
    color: #212529;
    line-height: 1.2;
    text-align: center;
}

.wo-rating-stars {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 2px;
    font-size: 1.25rem;
    color: var(--warning, #ffc107);
    margin: 4px 0 6px 0;
}

.wo-rating-stars i {
    display: inline-block;
}

.wo-rating-reviews {
    font-size: 0.8rem;
    color: var(--secondary, #6c757d);
    margin-bottom: 14px;
    text-align: center;
}

.wo-rating-bar-row {
    display: flex;
    align-items: center;
    margin-bottom: 8px;
    font-size: 0.8rem;
}

.wo-rating-bar-row .label,
.wo-rating-bar-row .wo-rating-bar-label {
    flex: 0 0 42px;
    color: #212529;
}

.wo-rating-body {
    overflow: visible;
}

.wo-rating-bar-track {
    flex: 1;
    height: 8px;
    background: #e9ecef;
    border-radius: 999px;
    overflow: hidden;
    margin: 0 10px;
}

.wo-rating-bar-fill {
    height: 100%;
    border-radius: 999px;
    min-width: 4px;
}

.wo-rating-bar-fill.orange {
    background: #fd7e14;
}

.wo-rating-bar-fill.red {
    background: var(--danger, #dc3545);
}

.wo-rating-bar-row .pct {
    flex: 0 0 36px;
    text-align: right;
    color: var(--secondary, #6c757d);
    font-weight: 600;
}

[data-theme="dark"] .my-work-performance-title {
    color: #e2e8f0;
}

[data-theme="dark"] .wo-card .wo-rating-avg {
    color: #e2e8f0;
}

[data-theme="dark"] .wo-card .wo-rating-reviews,
[data-theme="dark"] .wo-card .wo-rating-bar-row .pct {
    color: #adb5bd;
}

[data-theme="dark"] .wo-card .wo-rating-bar-track {
    background: #444;
}

[data-theme="dark"] .wo-card .wo-rating-bar-row .label,
[data-theme="dark"] .wo-card .wo-rating-bar-row .wo-rating-bar-label {
    color: #e2e8f0;
}

[data-theme="dark"] .pending-actions-widget .pending-actions-title {
    color: #e2e8f0;
}

[data-theme="dark"] .wo-card {
    background: #2c2c2c;
    border: none;
    border-left: 4px solid #4b5563;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.35);
}

[data-theme="dark"] .wo-card:has(.bg-success) {
    border-left-color: var(--success, #28a745);
}

[data-theme="dark"] .wo-card:has(.bg-info) {
    border-left-color: var(--info, #17a2b8);
}

[data-theme="dark"] .wo-card:has(.bg-danger) {
    border-left-color: var(--danger, #dc3545);
}

[data-theme="dark"] .wo-card:has(.bg-warning) {
    border-left-color: var(--warning, #ffc107);
}

[data-theme="dark"] .wo-card:has(.bg-primary) {
    border-left-color: var(--primary, #009688);
}

[data-theme="dark"] .wo-card:hover {
    box-shadow: 0 3px 10px rgba(0, 0, 0, 0.45);
}

[data-theme="dark"] .wo-card .wo-stat-value,
[data-theme="dark"] .wo-card .wo-card-title {
    color: #e2e8f0;
}

[data-theme="dark"] .wo-card .wo-stat-label,
[data-theme="dark"] .wo-card .wo-card-subtitle {
    color: #adb5bd;
}

[data-theme="dark"] .wo-card .wo-card-badge {
    background: #444;
    color: #868e96;
}

[data-theme="dark"] .wo-stat-breakdown>hr {
    border-top-color: #555;
}

[data-theme="dark"] .wo-card .assets-op-metric-value {
    color: #e2e8f0;
}

[data-theme="dark"] .wo-card .assets-op-metric-label {
    color: #4ecdc4;
}

[data-theme="dark"] .wo-card .assets-op-type-label {
    color: #e2e8f0;
}

[data-theme="dark"] .pending-summary-cards .pending-summary-card {
    background: #3a3a3a;
    border-color: var(--secondary, #6c757d);
}

[data-theme="dark"] .pending-summary-cards .pending-summary-card .pending-summary-card.active {
    background: #3a3a3a;
    border-color: var(--secondary, #6c757d);
}

[data-theme="dark"] .pending-summary-cards .pending-summary-card .label {
    color: #adb5bd;
}

[data-theme="dark"] .pending-summary-cards .pending-summary-card .sub {
    color: #868e96;
}

[data-theme="dark"] .pending-action-card .pending-card-link {
    background-color: #2d3032;
    border-left-width: 4px;
    color: #e2e8f0;
}

[data-theme="dark"] .pending-action-card .pending-card-link:hover {
    background-color: #3a3d40;
    color: #e2e8f0;
}

[data-theme="dark"] .pending-action-card-simple .pending-card-link .app-notification__icon,
[data-theme="dark"] .pending-action-card-simple .pending-card-link .app-notification__icon i {
    color: #e2e8f0;
}

[data-theme="dark"] .pending-showing-wrapper {
    background: #333;
    border-color: #444;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
}

/* Pending Actions — "Do Next" highlight + SLA due chips */
.pending-do-next {
    margin: 8px 0 4px;
}

.pending-do-next__link {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 4px 10px;
    padding: 10px 12px;
    border-radius: 10px;
    border-left: 4px solid var(--primary, #009688);
    background: rgba(var(--primary-rgb, 0, 150, 136), 0.08);
    color: #212529;
    text-decoration: none;
    transition: background 0.2s;
}

.pending-do-next__link:hover,
.pending-do-next__link:focus {
    background: rgba(var(--primary-rgb, 0, 150, 136), 0.14);
    color: #212529;
    text-decoration: none;
}

.pending-do-next__eyebrow {
    flex: 0 0 100%;
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--primary, #009688);
}

.pending-do-next__main {
    min-width: 0;
    overflow-wrap: anywhere;
}

.pending-do-next__meta {
    flex: 1 1 auto;
    min-width: 0;
    font-size: 0.8rem;
    color: #6c757d;
    overflow-wrap: anywhere;
}

.pending-due-chip {
    display: inline-flex;
    align-items: center;
    margin-left: 8px;
    padding: 1px 8px;
    border-radius: 999px;
    font-size: 0.72rem;
    font-weight: 600;
    white-space: nowrap;
}

.pending-do-next__link .pending-due-chip {
    margin-left: auto;
}

.pending-due-chip.is-overdue {
    background: rgba(220, 53, 69, 0.12);
    color: #c82333;
}

.pending-due-chip.is-soon {
    background: rgba(255, 193, 7, 0.18);
    color: #9a6b00;
}

.pending-due-chip.is-later {
    background: rgba(108, 117, 125, 0.12);
    color: #5a6268;
}

.pending-due-chip.is-missed {
    background: rgba(108, 117, 125, 0.12);
    color: #6c757d;
}

[data-theme="dark"] .pending-do-next__link {
    background: rgba(var(--primary-rgb, 0, 150, 136), 0.16);
    color: #e2e8f0;
}

[data-theme="dark"] .pending-do-next__link:hover,
[data-theme="dark"] .pending-do-next__link:focus {
    background: rgba(var(--primary-rgb, 0, 150, 136), 0.24);
    color: #fff;
}

[data-theme="dark"] .pending-do-next__eyebrow {
    color: #02b3a2;
}

[data-theme="dark"] .pending-do-next__meta {
    color: #a0aec0;
}

[data-theme="dark"] .pending-due-chip.is-overdue {
    background: rgba(220, 53, 69, 0.22);
    color: #ff8a95;
}

[data-theme="dark"] .pending-due-chip.is-soon {
    background: rgba(255, 193, 7, 0.2);
    color: #ffd166;
}

[data-theme="dark"] .pending-due-chip.is-later {
    background: #3a3a3a;
    color: #cbd5e0;
}

[data-theme="dark"] .pending-due-chip.is-missed {
    background: #333;
    color: #a0aec0;
}


/* ==================== REPORT SUMMARY STYLES ====================  */

.report-container {
    max-width: 100%;
    margin: 0;
    background: #fff;
    padding: 20px;
    border-radius: 12px;
    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.07);
    overflow: hidden;
}

/* HEADER SECTION G-- 1fr | auto | 1fr so title stays visually centered when logo/QR differ in width (CM + PM) */
.report-summary-header {
    background: linear-gradient(135deg, var(--primary, #009688), var(--primary-back, #00695c));
    position: relative;
    padding: 24px 20px;
    color: #fff;
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    gap: 16px 20px;
    border-top-right-radius: 12px;
    border-top-left-radius: 12px;
    border-bottom-left-radius: 0;
    border-bottom-right-radius: 0;
    margin: -20px -20px 20px -20px;
    min-height: 110px;
}

.report-summary-header .logo {
    justify-self: start;
    min-width: 0;
    /* White background wraps logo (responsive to logo size, like QR) */
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: white;
    padding: 8px;
    border-radius: 8px;
    box-sizing: border-box;
}

.report-summary-header .logo img {
    max-height: 100px;
    width: auto;
    height: auto;
    display: block;
}

/* TITLE SECTION */
.report-summary-header .title-section {
    position: relative;
    left: auto;
    transform: none;
    text-align: center;
    padding: 0 12px;
    min-width: 0;
    max-width: 100%;
    justify-self: center;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.report-summary-header .qr-code {
    justify-self: end;
    min-width: 0;
}

.report-summary-header .title-section h1 {
    margin: 0;
    font-size: 28px;
    font-weight: 600;
    letter-spacing: 1px;
    text-transform: uppercase;
    max-width: 100%;
    text-align: center;
}

.report-summary-header .title-section h2 {
    margin: 5px 0 0 0;
    font-size: 32px;
    font-weight: 700;
    letter-spacing: 2px;
    max-width: 100%;
    text-align: center;
}

.report-summary-header .qr-code img {
    width: 150px;
    height: 150px;
    background: white;
    padding: 2px;
    border-radius: 8px;
}

/* Section Headers */
.report-section-header-status {
    margin-left: 10px;
    vertical-align: middle;
}

.report-section-header {
    font-size: 18px;
    font-weight: 700;
    margin-top: 20px;
    margin-bottom: 20px;
    padding-left: 15px;
    border-left: 5px solid var(--primary, #009688);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

/* CM report Ratings: 1 card centered, 2 cards side-by-side */
.report-ratings-row {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    margin-bottom: 12px;
}

.report-ratings-row--single {
    justify-content: center;
}

.report-ratings-row--single .report-rating-card {
    width: 100%;
    max-width: 420px;
}

.report-ratings-row--dual {
    justify-content: stretch;
}

.report-ratings-row--dual .report-rating-card {
    flex: 1 1 calc(50% - 6px);
    min-width: 220px;
    max-width: 100%;
    margin-bottom: 0;
}

@media (max-width: 575.98px) {
    .report-ratings-row--dual .report-rating-card {
        flex: 1 1 100%;
    }
}

[data-theme="dark"] .report-rating-card.bg-light {
    background: #2d2d2d !important;
    color: #fff !important;
    border-color: #3a3a3a;
}

[data-theme="dark"] .report-rating-card.bg-light hr {
    border-top-color: #3a3a3a;
}

/* Info Grid */
.report-info-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 20px;
    margin-bottom: 30px;
}

/* Asset info: two cards with left accent */
.report-asset-cards {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 20px;
    margin-bottom: 30px;
}

.report-info-card {
    background: #ffffff;
    border: 1px solid #e5e7eb;
    border-radius: 8px;
    overflow: hidden;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
}

.report-info-card-accent {
    border-left: 4px solid var(--primary, #009688);
}

.report-info-card .report-info-item {
    border-radius: 0;
    border: none;
    border-bottom: 1px solid #e5e7eb;
    box-shadow: none;
    min-width: 0;
}

.report-info-card .report-info-item:last-child {
    border-bottom: none;
}

.report-info-card .report-info-item:hover {
    transform: none;
}

.report-info-item {
    border: 1px solid #e5e7eb;
    border-radius: 8px;
    padding: 15px;
    display: flex;
    align-items: flex-start;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
    transition: all 0.3s ease;
}

.report-info-item:hover {
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    transform: translateY(-2px);
}

.report-info-icon {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: var(--primary, #009688);
    color: white;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-right: 15px;
    flex-shrink: 0;
    font-size: 20px;
}

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

.report-info-label {
    font-size: 12px;
    color: #6b7280;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: 5px;
}

.report-info-value {
    font-size: 16px;
    color: #1f2937;
    font-weight: 600;
    overflow-wrap: break-word;
    word-break: break-word;
}

.report-details-box {
    background: #ffffff;
    border: 1px solid #e5e7eb;
    border-left: 4px solid var(--primary, #009688);
    border-radius: 10px;
    margin-bottom: 30px;
    overflow-wrap: break-word;
    word-break: break-word;
}

.report-details-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 0;
}

.report-detail-item {
    display: flex;
    flex-direction: column;
    border-right: 1px solid #e5e7eb;
    border-bottom: 1px solid #e5e7eb;
    padding: 12px 14px;
    min-width: 0;
}

.report-detail-item:nth-child(3n) {
    border-right: none;
}

.report-detail-label {
    font-size: 13px;
    color: #6b7280;
    font-weight: 600;
    margin-bottom: 8px;
    text-transform: uppercase;
}

.report-detail-value {
    font-size: 16px;
    color: #1f2937;
    font-weight: 600;
    overflow-wrap: break-word;
    word-break: break-word;
}

/* Corrective_Attend sidebar: 2-column compact grids + smaller icons */
/* One horizontal rhythm: no Bootstrap row bleed; same inner padding (12px) everywhere */
/* Stronger side inset only (left/right); top/bottom stay from theme .tile (18px) */
.tile.uap-attend-wo-summary,
.uap-attend-wo-summary.tile {
    padding-left: 15px;
    padding-right: 15px;
}

.uap-attend-wo-summary>.row {
    margin-left: 0;
    margin-right: 0;
}

.uap-attend-wo-summary .report-asset-cards {
    grid-template-columns: 1fr;
    gap: 12px;
    margin-bottom: 12px;
}

.uap-attend-wo-summary .report-info-card {
    border: none;
    box-shadow: none;
    background: transparent;
    overflow: visible;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
    padding: 0;
}

.uap-attend-wo-summary .report-info-card.report-info-card-accent {
    border-left: none;
}

.uap-attend-wo-summary .report-info-card .report-info-item {
    border: 1px solid #e5e7eb;
    border-radius: 6px;
    padding: 12px;
    box-shadow: none;
    min-width: 0;
}

.uap-attend-wo-summary .report-info-card .report-info-item:last-child {
    border-bottom: 1px solid #e5e7eb;
}

.uap-attend-wo-summary .uap-attend-event-strip {
    padding: 12px;
}

.uap-attend-wo-summary .report-info-card .report-info-item:last-child:nth-child(odd):not(:only-child) {
    grid-column: 1 / -1;
}

.uap-attend-wo-summary .report-info-icon {
    width: 28px;
    height: 28px;
    font-size: 13px;
    margin-right: 10px;
}

.uap-attend-wo-summary .report-info-label {
    font-size: 11px;
    margin-bottom: 3px;
}

.uap-attend-wo-summary .report-info-content {
    min-width: 0;
}

.uap-attend-wo-summary .report-info-value {
    font-size: 13px;
    overflow-wrap: break-word;
    word-break: break-word;
}

.uap-attend-wo-summary .report-details-box {
    margin-bottom: 12px;
    overflow-wrap: break-word;
    word-break: break-word;
}

.uap-attend-wo-summary .report-details-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.uap-attend-wo-summary .uap-attend-more-detail-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.uap-attend-wo-summary .uap-attend-more-detail-grid .report-detail-item {
    min-width: 0;
}

.uap-attend-wo-summary .report-detail-item {
    border-right: 1px solid #e5e7eb;
    border-bottom: 1px solid #e5e7eb;
    padding: 12px;
    min-width: 0;
}

.uap-attend-wo-summary .report-details-grid .report-detail-item:nth-child(2n) {
    border-right: none;
}

.uap-attend-wo-summary .report-details-grid .report-detail-item:last-child:nth-child(odd):not(.uap-attend-detail-span-2) {
    border-right: none;
}

.uap-attend-wo-summary .uap-attend-detail-span-2 {
    grid-column: 1 / -1;
    border-right: none;
}

.uap-attend-wo-summary .report-detail-label {
    font-size: 11px;
    margin-bottom: 4px;
}

.uap-attend-wo-summary .report-detail-value {
    font-size: 13px;
    overflow-wrap: break-word;
    word-break: break-word;
}

.uap-attend-wo-summary .report-section-header {
    margin-top: 14px;
    margin-bottom: 12px;
    font-size: 15px;
}

.uap-attend-wo-summary .uap-attend-breakdown-primary {
    font-size: 1.125rem;
    color: #111827;
    font-weight: 700;
    line-height: 1.5;
    margin: 0;
}

.uap-attend-wo-summary .uap-attend-wo-meta-row {
    display: flex;
    flex-wrap: wrap;
    align-items: stretch;
    gap: 8px;
    margin-top: 8px;
    padding: 1px 0 0;
}

.uap-attend-wo-summary .uap-attend-wo-meta-row>.report-info-item {
    flex: 1 1 calc(50% - 4px);
    min-width: 0;
}

.uap-attend-onhold-reason {
    border-radius: 10px;
    font-size: 0.95rem;
    border-left: 4px solid #f59e0b !important;
}

.uap-attend-onhold-reason__icon {
    color: #d97706;
}

.uap-attend-onhold-reason__body {
    min-width: 0;
    word-wrap: break-word;
}

.uap-attend-onhold-reason__label {
    font-size: 0.8rem;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: #92400e;
}

.uap-attend-onhold-reason__text {
    line-height: 1.5;
    color: #1f2937;
}

.uap-attend-wo-summary .uap-attend-sla-pill {
    font-size: 9px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.2px;
    padding: 0.15rem 0.4rem;
    line-height: 1.15;
    border-radius: 0.2rem;
}

.report-sparepart-list {
    font-size: 14px;
}

.report-sparepart-row {
    display: block;
    margin-bottom: 6px;
}

.report-sparepart-row:last-child {
    margin-bottom: 0;
}

.report-sparepart-no {
    margin-right: 6px;
    font-weight: 600;
}

.report-sparepart-qty {
    white-space: nowrap;
    margin-left: 10px;
    font-weight: 400;
    font-size: 13px;
}

.report-status-badge {
    display: inline-block;
    padding: 6px 16px;
    border-radius: 20px;
    font-size: 13px;
    font-weight: 600;
    text-transform: uppercase;
}

.wo-status-new {
    background: #fee2e2;
    color: #b91c1c;
}

.wo-status-open {
    background: #e0f2fe;
    color: #0369a1;
}

.wo-status-repair {
    background: #e0f2fe;
    color: #0369a1;
}

.wo-status-onhold {
    background: #fef3c7;
    color: #92400e;
}

.wo-status-completed {
    background: #d1fae5;
    color: #065f46;
}

.wo-status-attend {
    background: #f7464a;
    color: #ffffff;
}

.wo-status-verified {
    background: #00968724;
    color: var(--primary, #009688);
}

.wo-status-cancel {
    background: #fef3c7;
    color: #92400e;
}

.wo-status-acknowledged {
    background: #f3f4f6;
    color: #6b7280;
}

/* Performance Metrics (compact, 6 per row on large screens) */
.report-metrics-grid {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 10px;
    margin-bottom: 30px;
}

.report-metric-card {
    background: #ffffff;
    border: 1px solid #e5e7eb;
    border-top: 4px solid var(--primary, #009688);
    border-radius: 6px;
    padding: 15px 15px;
    text-align: center;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
}

.report-metric-card:hover {
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.08);
}

.report-metric-label {
    font-size: 12px;
    color: #6b7280;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.3px;
    margin-bottom: 10px;
    border-bottom: 1px solid;
    padding-bottom: 10px;
    line-height: 1.2;
}

.report-metric-value {
    font-size: 15px;
    color: var(--primary, #009688);
    font-weight: 700;
    margin: 2px 0;
    line-height: 1.3;
}

.report-metric-workers-list {
    margin: 0;
    padding: 0;
    font-size: 13px;
    color: var(--primary, #009688);
    font-weight: 600;
    line-height: 1.4;
    text-align: center;
    list-style-position: inside;
}

.report-metric-workers-list li {
    margin-bottom: 2px;
    text-align: center;
}

.report-metric-value-danger {
    color: var(--danger, #dc3545) !important;
    font-weight: 700;
}

/* APPROVAL CARDS */
.report-approvals-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
    margin-bottom: 30px;
}

.report-approval-card {
    background: #ffffff;
    border: 2px solid #e5e7eb;
    border-radius: 10px;
    padding: 10px 20px;
    text-align: center;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
}

.report-approval-title {
    font-size: 14px;
    color: #6b7280;
    font-weight: 600;
}

.report-approval-name {
    font-size: 16px;
    color: var(--primary, #009688);
    font-weight: 700;

}

.report-signature-box {
    height: 120px;
    border: 2px dashed #d1d5db;
    border-radius: 8px;
    margin: 15px -10px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #f9fafb;
    overflow: visible;
    padding: 0px;
}

.report-signature-box img,
.report-signature-box .report-signature-img {
    max-width: 90%;
    max-height: 100px;
    display: block;
    margin: 0 auto;
}

.report-signature-box svg {
    max-width: 100%;
    display: block;
    margin: 0 auto;
}

.if-empty {
    font-size: 13px;
    color: #9ca3af;
    font-style: italic;
}

.report-approval-details {
    font-size: 14px;
    color: #1f2937;
    font-weight: 600;
    margin-top: 10px;
}

.report-approval-position {
    font-size: 12px;
    color: #6b7280;
    font-weight: 500;
    text-transform: uppercase;
}

/* SUB-APPROVALS SECTION */
.report-subapprovals-header {
    font-size: 18px;
    font-weight: 700;
    color: #dc2626;
    margin-bottom: 20px;
    padding-left: 15px;
    border-left: 5px solid #dc2626;
}

/* IMAGES SECTION */
.report-images-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
    margin-bottom: 30px;
}

.report-image-card {
    border: 2px solid #e5e7eb;
    border-radius: 10px;
    overflow: hidden;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
}

.report-image-title {
    background: #f3f4f6;
    padding: 12px;
    text-align: center;
    font-size: 13px;
    color: #6b7280;
    font-weight: 700;
    text-transform: uppercase;
    border-bottom: 2px solid #e5e7eb;
}

.report-image-container {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    padding: 10px;
}

.report-image-container img {
    max-width: 100%;
    max-height: 300px;
    width: auto;
    height: auto;
    object-fit: contain;
    display: block;
    margin-left: auto;
    margin-right: auto;
}


/* CHECKLIST SECTION */
.report-checklist-header {
    padding: 15px 20px;
    font-size: 16px;
    font-weight: 700;
    text-transform: uppercase;
    border-radius: 8px 8px 8px 8px;
    margin-bottom: 0;
}

.report-checklist-items {
    background: #ffffff;
    border: 1px solid #e5e7eb;
    border-left: 4px solid var(--primary, #009688);
    border-radius: 8px;
    margin-bottom: 20px;
}

.report-checklist-item {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    padding: 15px 20px;
    border-bottom: 1px solid #e5e7eb;
    transition: background 0.2s ease;
}

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

.report-checklist-item:hover {
    background: #f9fafb;
}

.report-checklist-number {
    width: 30px;
    height: 30px;
    border-radius: 50%;
    background: var(--primary, #009688);
    color: white;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    margin-right: 15px;
    flex-shrink: 0;
}

.report-checklist-text {
    flex: 1;
    font-size: 14px;
    color: #1f2937;
    font-weight: 500;
}

.report-checklist-attachment {
    width: 100%;
    flex-basis: 100%;
    padding-left: 45px;
    margin-top: 8px;
}

.report-checklist-attachment .report-image-container {
    max-height: 220px;
}

.report-checklist-attachment .report-checklist-img {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
    display: block;
}

.report-checklist-status {
    padding: 6px 20px;
    border-radius: 20px;
    font-size: 13px;
    font-weight: 700;
    text-transform: uppercase;
}

.checklist-status-ok {
    background: #f0fdfa !important;
    color: var(--primary, #009688);
}

.checklist-status-note {
    background: #f0fdfa !important;
    color: var(--primary, #009688);
    padding: 8px 15px;
    font-size: 12px;
}

/*
 * Preview tile only (#report-preview-tile): enhanced checklist card + PM summary print helpers.
 * Keeps batch Reports.php / workorder shells / non-preview pages on the generic rules above.
 */

/* Preview-only enhanced checklist + PM summary print helpers G-- scoped to #report-preview-tile */
/* Included once with summary body: preview grids may clip; print shows full image + growing wrappers */
@media print {
    #report-preview-tile.report-container {
        overflow: visible !important;
    }

    /* Long checklist text can break across pages; tr/row rules also in Preventive_Report_Preview print CSS */
    #report-preview-tile .checklist-card,
    .wo-checklist-preview .checklist-card,
    .wo-checklist-preview.checklist-card {
        page-break-inside: auto !important;
        break-inside: auto !important;
    }

    /* Keep each checklist attachment + image on one page fragment (classic: table tr avoid) */
    #report-preview-tile .report-checklist-attachment {
        page-break-inside: avoid !important;
        break-inside: avoid-page !important;
        overflow: visible !important;
    }

    /* Print: avoid CSS grid fragmentation in Chrome/Safari (can split a picture card across pages). */
    #report-preview-tile .pictures-card .report-images-grid {
        display: block !important;
        margin: 0 -10px 20px !important;
        font-size: 0 !important;
        page-break-inside: auto !important;
        break-inside: auto !important;
    }

    #report-preview-tile .pictures-card .report-image-card {
        display: inline-block !important;
        vertical-align: top !important;
        width: 33.333333% !important;
        padding: 0 10px !important;
        box-sizing: border-box !important;
        font-size: 12px !important;
        page-break-inside: avoid !important;
        break-inside: avoid-page !important;
        -webkit-column-break-inside: avoid !important;
    }

    /* Whole section may span pages; each cell stays intact G-- moves to next page if it would split (like classic .picture-block) */
    #report-preview-tile .pictures-card.report-section-block {
        page-break-inside: auto !important;
        break-inside: auto !important;
    }

    #report-preview-tile .pictures-card .report-image-card.picture-block,
    #report-preview-tile .pictures-card .picture-block {
        overflow: visible !important;
        page-break-inside: avoid !important;
        break-inside: avoid-page !important;
        -webkit-column-break-inside: avoid !important;
    }

    #report-preview-tile .pictures-card .report-image-container,
    #report-preview-tile .pictures-card .report-image-container a {
        page-break-inside: avoid !important;
        break-inside: avoid-page !important;
        -webkit-column-break-inside: avoid !important;
        height: auto !important;
        min-height: 0 !important;
        max-height: none !important;
        overflow: visible !important;
        align-items: flex-start !important;
    }

    #report-preview-tile .report-image-card img,
    #report-preview-tile .report-image-container img,
    #report-preview-tile .pictures-card .report-img,
    #report-preview-tile .report-checklist-img,
    :is(#report-preview-tile .checklist-card.report-section-block, .wo-checklist-preview.checklist-card.report-section-block) .report-checklist-attachment .report-img,
    #report-preview-tile .report-signature-img,
    #report-preview-tile .report-signature-box img {
        max-height: none !important;
        max-width: 100% !important;
        width: auto !important;
        height: auto !important;
        object-fit: contain !important;
        display: block !important;
        page-break-inside: avoid !important;
        break-inside: avoid-page !important;
        -webkit-column-break-inside: avoid !important;
    }

    #report-preview-tile .report-checklist-attachment .report-image-container {
        height: auto !important;
        min-height: 0 !important;
        max-height: none !important;
        overflow: visible !important;
        align-items: flex-start !important;
    }

    #report-preview-tile .report-signature-box {
        height: auto !important;
        min-height: 0 !important;
        max-height: none !important;
        overflow: visible !important;
        align-items: flex-start !important;
    }

    /* Checklist in this summary: match readable body size when printing (overrides compact print rules) */
    :is(#report-preview-tile .checklist-card.report-section-block, .wo-checklist-preview.checklist-card.report-section-block) .report-checklist-header,
    :is(#report-preview-tile .checklist-card.report-section-block, .wo-checklist-preview.checklist-card.report-section-block) .report-checklist-text,
    :is(#report-preview-tile .checklist-card.report-section-block, .wo-checklist-preview.checklist-card.report-section-block) .report-checklist-status,
    :is(#report-preview-tile .checklist-card.report-section-block, .wo-checklist-preview.checklist-card.report-section-block) .checklist-status-note,
    :is(#report-preview-tile .checklist-card.report-section-block, .wo-checklist-preview.checklist-card.report-section-block) .checklist-status-ok,
    :is(#report-preview-tile .checklist-card.report-section-block, .wo-checklist-preview.checklist-card.report-section-block) .report-checklist-meta,
    :is(#report-preview-tile .checklist-card.report-section-block, .wo-checklist-preview.checklist-card.report-section-block) .report-checklist-attachment-link {
        font-size: 1rem !important;
    }

    :is(#report-preview-tile .checklist-card.report-section-block, .wo-checklist-preview.checklist-card.report-section-block) .report-checklist-subtitle {
        page-break-inside: avoid !important;
        break-inside: avoid-page !important;
        page-break-after: avoid !important;
        break-after: avoid-page !important;
    }

    :is(#report-preview-tile .checklist-card.report-section-block, .wo-checklist-preview.checklist-card.report-section-block) .report-checklist-number {
        box-sizing: border-box !important;
        width: 1.625rem !important;
        height: 1.625rem !important;
        min-width: 1.625rem !important;
        min-height: 1.625rem !important;
        max-width: 1.625rem !important;
        max-height: 1.625rem !important;
        aspect-ratio: 1 / 1 !important;
        border-radius: 50% !important;
        border: none !important;
        padding: 0 !important;
        font-size: 0.8125rem !important;
        line-height: 1 !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
    }

    /* Status column + part-by-part breaks (row vs attachment may separate; each part intact) */
    :is(#report-preview-tile .checklist-card.report-section-block, .wo-checklist-preview.checklist-card.report-section-block) .report-checklist-row-top {
        flex-wrap: nowrap !important;
        align-items: center !important;
        page-break-inside: avoid !important;
        break-inside: avoid-page !important;
        -webkit-column-break-inside: avoid !important;
    }

    :is(#report-preview-tile .checklist-card.report-section-block, .wo-checklist-preview.checklist-card.report-section-block) .report-checklist-text {
        flex: 1 1 0% !important;
        min-width: 0 !important;
    }

    :is(#report-preview-tile .checklist-card.report-section-block, .wo-checklist-preview.checklist-card.report-section-block) .report-checklist-status {
        flex: 0 0 auto !important;
        width: auto !important;
        max-width: 14rem !important;
        align-self: center !important;
        margin-top: 0 !important;
        page-break-inside: avoid !important;
        break-inside: avoid-page !important;
        -webkit-column-break-inside: avoid !important;
    }

    :is(#report-preview-tile .checklist-card.report-section-block, .wo-checklist-preview.checklist-card.report-section-block) .report-checklist-status-sub,
    :is(#report-preview-tile .checklist-card.report-section-block, .wo-checklist-preview.checklist-card.report-section-block) .report-checklist-status-detail {
        page-break-inside: avoid !important;
        break-inside: avoid-page !important;
        -webkit-column-break-inside: avoid !important;
    }

    :is(#report-preview-tile .checklist-card.report-section-block, .wo-checklist-preview.checklist-card.report-section-block) .report-checklist-attachment,
    :is(#report-preview-tile .checklist-card.report-section-block, .wo-checklist-preview.checklist-card.report-section-block) .report-checklist-attachment .report-checklist-attachment-card,
    :is(#report-preview-tile .checklist-card.report-section-block, .wo-checklist-preview.checklist-card.report-section-block) .report-checklist-attachment .report-image-container,
    :is(#report-preview-tile .checklist-card.report-section-block, .wo-checklist-preview.checklist-card.report-section-block) .report-checklist-attachment a.uap-gallery-tile {
        page-break-inside: avoid !important;
        break-inside: avoid-page !important;
        -webkit-column-break-inside: avoid !important;
    }
}

/* Checklist (summary include): default-scale typography; teal accent on .report-checklist-items only */
:is(#report-preview-tile .checklist-card.report-section-block, .wo-checklist-preview.checklist-card.report-section-block) {
    font-size: 1rem;
    line-height: 1.5;
    position: relative;
    border: none;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
    padding: 0;
    overflow: visible;
}

:is(#report-preview-tile .checklist-card.report-section-block, .wo-checklist-preview.checklist-card.report-section-block)>.report-section-header {
    margin: 0.5rem 0 0.5rem;
    border-radius: 0;
}

:is(#report-preview-tile .checklist-card.report-section-block, .wo-checklist-preview.checklist-card.report-section-block) h5.line-head.report-section-header {
    margin: 0.5rem 0 0.5rem;
    border-radius: 0;
}

/* WO Confirm/Verify: checklist is a table.report-checklist-items G-- subtitle cell uses green left accent */
:is(#report-preview-tile .checklist-card.report-section-block, .wo-checklist-preview.checklist-card.report-section-block) table.report-checklist-items {
    border-collapse: separate;
    border-spacing: 0;
    width: 100%;
}

:is(#report-preview-tile .checklist-card.report-section-block, .wo-checklist-preview.checklist-card.report-section-block) table.report-checklist-items>tbody>tr>td.p-0,
:is(#report-preview-tile .checklist-card.report-section-block, .wo-checklist-preview.checklist-card.report-section-block) table.report-checklist-items>tbody>tr>td.border-0 {
    padding: 0 !important;
    vertical-align: top;
}

/* Checklist sub-title: same teal left bar as .report-checklist-items; inherit text color */
:is(#report-preview-tile .checklist-card.report-section-block, .wo-checklist-preview.checklist-card.report-section-block) .report-checklist-subtitle {
    font-size: 1rem;
    font-weight: 700;
    letter-spacing: 0.07em;
    text-transform: uppercase;
    text-align: center;
    background: #fff;
    border: 1px solid #e2e8f0;
    border-left: 4px solid var(--primary, #009688);
    border-bottom: 1px solid #e2e8f0;
    border-radius: 8px 8px 0 0;
    margin: 0.5rem 0 0;
    padding: 1rem 1.25rem;
    line-height: 1.5;
    word-break: break-word;
    page-break-inside: avoid;
    break-inside: avoid-page;
    page-break-after: avoid;
    break-after: avoid-page;
}

:is(#report-preview-tile .checklist-card.report-section-block, .wo-checklist-preview.checklist-card.report-section-block) .report-checklist-subtitle+.report-checklist-items {
    margin-top: 0;
    border-top: none;
    border-radius: 0 0 8px 8px;
}

/* Sub-title inside the same card as tasks; wrapper closes only on Break Page */
:is(#report-preview-tile .checklist-card.report-section-block, .wo-checklist-preview.checklist-card.report-section-block) .report-checklist-items>.report-checklist-subtitle {
    margin: 0;
    border-radius: 0;
    border-left: none;
    border-right: none;
    border-top: 1px solid #eef2f7;
}

:is(#report-preview-tile .checklist-card.report-section-block, .wo-checklist-preview.checklist-card.report-section-block) .report-checklist-items>.report-checklist-subtitle:first-child {
    border-top: none;
}

/* WO table checklist: green accent on subtitle (overrides teal border-left on .report-checklist-subtitle above) */
:is(#report-preview-tile .checklist-card.report-section-block, .wo-checklist-preview.checklist-card.report-section-block) table.report-checklist-items>tbody>tr>td>.report-checklist-subtitle {
    border-left: 4px solid var(--success, #28a745);
}

:is(#report-preview-tile .checklist-card.report-section-block, .wo-checklist-preview.checklist-card.report-section-block) table.report-checklist-items>tbody>tr:first-child>td>.report-checklist-subtitle {
    border-top: none;
}

:is(#report-preview-tile .checklist-card.report-section-block, .wo-checklist-preview.checklist-card.report-section-block) .report-checklist-items {
    border-radius: 8px;
    border: 1px solid #e5e7eb;
    border-left: 4px solid var(--primary, #009688);
    margin: 0.35rem 0 1rem;
    box-shadow: none;
    overflow: hidden;
    background: #fff;
}

:is(#report-preview-tile .checklist-card.report-section-block, .wo-checklist-preview.checklist-card.report-section-block) .report-checklist-items:last-child {
    margin-bottom: 0;
}

:is(#report-preview-tile .checklist-card.report-section-block, .wo-checklist-preview.checklist-card.report-section-block) .report-checklist-item {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    padding: 0;
    border-bottom: 1px solid #eef2f7;
    transition: background 0.15s ease;
}

:is(#report-preview-tile .checklist-card.report-section-block, .wo-checklist-preview.checklist-card.report-section-block) .report-checklist-item:last-child {
    border-bottom: none;
}

:is(#report-preview-tile .checklist-card.report-section-block, .wo-checklist-preview.checklist-card.report-section-block) .report-checklist-item:not(.report-checklist-text-only):hover {
    background: #f4f7fb;
}

:is(#report-preview-tile .checklist-card.report-section-block, .wo-checklist-preview.checklist-card.report-section-block) .report-checklist-row-top {
    display: flex;
    align-items: center;
    gap: 0.75rem 1rem;
    width: 100%;
    padding: 0.875rem 1rem;
    box-sizing: border-box;
}

/* Text-only rows: compact neutral inset block */
:is(#report-preview-tile .checklist-card.report-section-block, .wo-checklist-preview.checklist-card.report-section-block) .report-checklist-item.report-checklist-text-only {
    display: block;
    margin: 0.3rem 0.45rem 0.4rem;
    padding: 0.5rem 0.65rem;
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    border-radius: 6px;
}

:is(#report-preview-tile .checklist-card.report-section-block, .wo-checklist-preview.checklist-card.report-section-block) .report-checklist-item.report-checklist-text-only .report-checklist-text {
    flex: none;
    font-weight: 400;
    font-size: 0.9375rem;
    color: #1f2937;
    line-height: 1.45;
}

:is(#report-preview-tile .checklist-card.report-section-block, .wo-checklist-preview.checklist-card.report-section-block) .report-checklist-number {
    box-sizing: border-box;
    width: 1.625rem;
    height: 1.625rem;
    min-width: 1.625rem;
    min-height: 1.625rem;
    max-width: 1.625rem;
    max-height: 1.625rem;
    aspect-ratio: 1 / 1;
    flex-shrink: 0;
    margin: 0;
    margin-top: 0;
    padding: 0;
    border: none;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--primary, #009688);
    color: #fff;
    font-size: 0.8125rem;
    font-weight: 700;
    line-height: 1;
    align-self: center;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
}

:is(#report-preview-tile .checklist-card.report-section-block, .wo-checklist-preview.checklist-card.report-section-block) .report-checklist-text {
    flex: 1 1 0;
    min-width: 0;
    align-self: center;
    font-size: 1rem;
    font-weight: 400;
    color: #1f2937;
    word-break: break-word;
}

:is(#report-preview-tile .checklist-card.report-section-block, .wo-checklist-preview.checklist-card.report-section-block) .report-checklist-status {
    flex: 0 0 auto;
    min-width: 5.75rem;
    max-width: 14rem;
    font-size: 1rem;
    font-weight: 600;
    text-transform: none;
    letter-spacing: normal;
    align-self: center;
    margin-top: 0;
    margin-left: auto;
    line-height: 1.35;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    text-align: left;
}

:is(#report-preview-tile .checklist-card.report-section-block, .wo-checklist-preview.checklist-card.report-section-block) .report-checklist-status-primary {
    display: block;
    font-weight: 600;
    line-height: 1.3;
    text-align: left;
}

:is(#report-preview-tile .checklist-card.report-section-block, .wo-checklist-preview.checklist-card.report-section-block) .report-checklist-status-sub {
    width: 100%;
    max-width: 100%;
    margin-top: 0.5rem;
    padding-top: 0.5rem;
    border-top: 1px solid rgba(15, 23, 42, 0.12);
    text-align: left;
}

:is(#report-preview-tile .checklist-card.report-section-block, .wo-checklist-preview.checklist-card.report-section-block) .checklist-status-ok .report-checklist-status-sub {
    border-top-color: rgba(4, 120, 87, 0.22);
}

:is(#report-preview-tile .checklist-card.report-section-block, .wo-checklist-preview.checklist-card.report-section-block) .checklist-status-note .report-checklist-status-sub {
    border-top-color: rgba(71, 85, 105, 0.2);
}

:is(#report-preview-tile .checklist-card.report-section-block, .wo-checklist-preview.checklist-card.report-section-block) .report-checklist-status-detail {
    display: block;
    font-size: 1rem;
    font-weight: 400;
    line-height: 1.45;
    color: inherit;
    opacity: 0.88;
    text-align: left;
    margin-top: 0.3rem;
}

:is(#report-preview-tile .checklist-card.report-section-block, .wo-checklist-preview.checklist-card.report-section-block) .report-checklist-status-detail:first-child {
    margin-top: 0;
}

:is(#report-preview-tile .checklist-card.report-section-block, .wo-checklist-preview.checklist-card.report-section-block) .report-checklist-status-detail .fa {
    margin-right: 0.35rem;
    opacity: 0.72;
}

:is(#report-preview-tile .checklist-card.report-section-block, .wo-checklist-preview.checklist-card.report-section-block) .checklist-status-ok {
    font-size: 1rem;
    padding: 0.4rem 0.9rem;
    background: #ecfdf5 !important;
    color: #047857 !important;
    border: 1px solid #6ee7b7;
    border-radius: 16px;
}

:is(#report-preview-tile .checklist-card.report-section-block, .wo-checklist-preview.checklist-card.report-section-block) .checklist-status-note {
    font-size: 1rem;
    padding: 0.4rem 0.9rem;
    background: #f8fafc !important;
    color: #475569 !important;
    border: 1px solid #e2e8f0;
    border-radius: 16px;
}

:is(#report-preview-tile .checklist-card.report-section-block, .wo-checklist-preview.checklist-card.report-section-block) .report-checklist-meta {
    display: block;
    font-size: inherit;
    line-height: inherit;
    color: inherit;
    opacity: 0.78;
    font-weight: 400;
    margin-top: 0.35rem;
    text-align: inherit;
}

:is(#report-preview-tile .checklist-card.report-section-block, .wo-checklist-preview.checklist-card.report-section-block) .report-checklist-meta.report-checklist-meta--inline {
    display: inline;
    margin-top: 0;
    margin-right: 0.35rem;
}

:is(#report-preview-tile .checklist-card.report-section-block, .wo-checklist-preview.checklist-card.report-section-block) .report-checklist-attachment-link {
    font-size: inherit;
    text-decoration: none;
    border-bottom: 1px dotted var(--primary, #009688);
}

:is(#report-preview-tile .checklist-card.report-section-block, .wo-checklist-preview.checklist-card.report-section-block) .report-checklist-attachment-link:hover {
    border-bottom-style: solid;
    color: var(--primary-btn-hover, #00796b);
}

:is(#report-preview-tile .checklist-card.report-section-block, .wo-checklist-preview.checklist-card.report-section-block) .report-checklist-attachment {
    padding: 0.65rem 1rem 0.85rem;
    margin: 0;
    margin-top: 0;
    border-top: 1px solid #e8edf3;
    width: 100%;
    flex-basis: 100%;
    box-sizing: border-box;
    background: #f8fafc;
}

:is(#report-preview-tile .checklist-card.report-section-block, .wo-checklist-preview.checklist-card.report-section-block) .report-checklist-attachment .report-checklist-attachment-card {
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
}

:is(#report-preview-tile .checklist-card.report-section-block, .wo-checklist-preview.checklist-card.report-section-block) .report-checklist-attachment .report-image-container {
    width: 100%;
    max-height: none;
    min-height: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    padding: 10px;
    box-sizing: border-box;
    background: #fff;
    border: none;
    border-radius: 0;
}

:is(#report-preview-tile .checklist-card.report-section-block, .wo-checklist-preview.checklist-card.report-section-block) .report-checklist-attachment .report-image-card .report-image-container {
    border: none;
}

:is(#report-preview-tile .checklist-card.report-section-block, .wo-checklist-preview.checklist-card.report-section-block) .report-checklist-attachment .report-img {
    max-width: 100%;
    max-height: 300px;
    width: auto;
    height: auto;
    object-fit: contain;
    display: block;
    margin-left: auto;
    margin-right: auto;
}

:is(#report-preview-tile .checklist-card.report-section-block, .wo-checklist-preview.checklist-card.report-section-block) .report-checklist-break {
    min-height: 0;
    border: 0;
    margin: 0;
    padding: 0;
}

/* Dark mode: align with app/Include/system_style.css [.report-info-card], [.report-checklist-items], [.report-image-card] */
[data-theme="dark"] :is(#report-preview-tile .checklist-card.report-section-block, .wo-checklist-preview.checklist-card.report-section-block) {
    background: transparent;
    border: none;
    box-shadow: none;
}

[data-theme="dark"] :is(#report-preview-tile .checklist-card.report-section-block, .wo-checklist-preview.checklist-card.report-section-block) .report-checklist-subtitle {
    background: #262626;
    border-color: #525252;
    border-bottom-color: #525252;
    border-left-color: var(--primary, #009688);
    box-shadow: none;
}

[data-theme="dark"] :is(#report-preview-tile .checklist-card.report-section-block, .wo-checklist-preview.checklist-card.report-section-block) table.report-checklist-items>tbody>tr>td>.report-checklist-subtitle {
    border-left-color: var(--success, #28a745);
}

[data-theme="dark"] :is(#report-preview-tile .checklist-card.report-section-block, .wo-checklist-preview.checklist-card.report-section-block) .report-checklist-items>.report-checklist-subtitle {
    border-top-color: #8c8c8c;
    border-left: none;
}

[data-theme="dark"] :is(#report-preview-tile .checklist-card.report-section-block, .wo-checklist-preview.checklist-card.report-section-block) .report-checklist-items {
    background: #212121;
    border-color: #8c8c8c;
    border-left: 4px solid var(--primary, #009688);
}

[data-theme="dark"] :is(#report-preview-tile .checklist-card.report-section-block, .wo-checklist-preview.checklist-card.report-section-block) .report-checklist-item {
    border-bottom-color: #8c8c8c;
}

[data-theme="dark"] :is(#report-preview-tile .checklist-card.report-section-block, .wo-checklist-preview.checklist-card.report-section-block) .report-checklist-item:not(.report-checklist-text-only):hover {
    background: #212529;
}

[data-theme="dark"] :is(#report-preview-tile .checklist-card.report-section-block, .wo-checklist-preview.checklist-card.report-section-block) .report-checklist-text {
    color: #fff;
}

[data-theme="dark"] :is(#report-preview-tile .checklist-card.report-section-block, .wo-checklist-preview.checklist-card.report-section-block) .report-checklist-item.report-checklist-text-only {
    background: #212121;
    border-color: #525252;
}

[data-theme="dark"] :is(#report-preview-tile .checklist-card.report-section-block, .wo-checklist-preview.checklist-card.report-section-block) .report-checklist-item.report-checklist-text-only .report-checklist-text {
    color: #e2e8f0;
}

[data-theme="dark"] :is(#report-preview-tile .checklist-card.report-section-block, .wo-checklist-preview.checklist-card.report-section-block) .checklist-status-ok {
    background: #1b3328 !important;
    color: #6ee7b7 !important;
    border-color: #047857;
}

[data-theme="dark"] :is(#report-preview-tile .checklist-card.report-section-block, .wo-checklist-preview.checklist-card.report-section-block) .checklist-status-note {
    background: #212121 !important;
    color: #d0d0d0 !important;
    border-color: #8c8c8c;
}

[data-theme="dark"] :is(#report-preview-tile .checklist-card.report-section-block, .wo-checklist-preview.checklist-card.report-section-block) .report-checklist-status-sub {
    border-top-color: rgba(255, 255, 255, 0.12);
}

[data-theme="dark"] :is(#report-preview-tile .checklist-card.report-section-block, .wo-checklist-preview.checklist-card.report-section-block) .checklist-status-ok .report-checklist-status-sub {
    border-top-color: rgba(110, 231, 183, 0.22);
}

[data-theme="dark"] :is(#report-preview-tile .checklist-card.report-section-block, .wo-checklist-preview.checklist-card.report-section-block) .checklist-status-note .report-checklist-status-sub {
    border-top-color: rgba(208, 208, 208, 0.2);
}

[data-theme="dark"] :is(#report-preview-tile .checklist-card.report-section-block, .wo-checklist-preview.checklist-card.report-section-block) .report-checklist-attachment {
    background: #212121;
    border-top-color: #8c8c8c;
}

[data-theme="dark"] :is(#report-preview-tile .checklist-card.report-section-block, .wo-checklist-preview.checklist-card.report-section-block) .report-checklist-attachment .report-image-container {
    background: #212121;
}

[data-theme="dark"] :is(#report-preview-tile .checklist-card.report-section-block, .wo-checklist-preview.checklist-card.report-section-block) .report-checklist-attachment .report-image-card {
    background: #212121;
    border-color: #8c8c8c;
}

@media (max-width: 768px) {

    :is(#report-preview-tile .checklist-card.report-section-block, .wo-checklist-preview.checklist-card.report-section-block) .report-checklist-header,
    :is(#report-preview-tile .checklist-card.report-section-block, .wo-checklist-preview.checklist-card.report-section-block) .report-checklist-text,
    :is(#report-preview-tile .checklist-card.report-section-block, .wo-checklist-preview.checklist-card.report-section-block) .report-checklist-status,
    :is(#report-preview-tile .checklist-card.report-section-block, .wo-checklist-preview.checklist-card.report-section-block) .checklist-status-note,
    :is(#report-preview-tile .checklist-card.report-section-block, .wo-checklist-preview.checklist-card.report-section-block) .checklist-status-ok {
        font-size: 1rem !important;
    }

    /* Perfect circle: beat global .report-checklist-number mobile !important rules */
    :is(#report-preview-tile .checklist-card.report-section-block, .wo-checklist-preview.checklist-card.report-section-block) .report-checklist-number {
        box-sizing: border-box !important;
        width: 1.625rem !important;
        height: 1.625rem !important;
        min-width: 1.625rem !important;
        min-height: 1.625rem !important;
        max-width: 1.625rem !important;
        max-height: 1.625rem !important;
        aspect-ratio: 1 / 1 !important;
        border-radius: 50% !important;
        border: none !important;
        padding: 0 !important;
        font-size: 0.8125rem !important;
        line-height: 1 !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
    }

    :is(#report-preview-tile .checklist-card.report-section-block, .wo-checklist-preview.checklist-card.report-section-block) .report-checklist-items {
        margin-left: 0;
        margin-right: 0;
    }

    :is(#report-preview-tile .checklist-card.report-section-block, .wo-checklist-preview.checklist-card.report-section-block) .report-checklist-row-top {
        flex-wrap: wrap;
        padding: 0.75rem !important;
    }

    :is(#report-preview-tile .checklist-card.report-section-block, .wo-checklist-preview.checklist-card.report-section-block) .report-checklist-status {
        width: 100%;
        max-width: none;
        align-self: stretch;
        margin-top: 0.25rem;
    }

    :is(#report-preview-tile .checklist-card.report-section-block, .wo-checklist-preview.checklist-card.report-section-block) .report-checklist-meta {
        text-align: left;
    }
}

/* ADDITIONAL SECTIONS (d-print-none) */

.section-title {
    font-size: 1.1em;
    font-weight: 600;
    color: #333;
    margin-bottom: 8px;
    margin-top: 0;
}

.report-additional-card {
    background: #ffffff;
    border: 1px solid #e5e7eb;
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
}

.report-additional-header {
    background: #f9fafb;
    border-bottom: 2px solid var(--primary, #009688);
    padding: 20px;
    font-size: 16px;
    font-weight: 700;
    color: #1f2937;
    margin: 0;
}

.report-additional-body {
    padding: 20px;
}

/* COMMENTS SECTION */
.comment-input-group {
    display: flex;
    gap: 12px;
    margin-bottom: 20px;
}

.comment-input {
    flex: 1;
    padding: 12px 16px;
    border: 2px solid #e5e7eb;
    border-radius: 8px;
    font-size: 14px;
    font-family: inherit;
    resize: vertical;
    transition: border-color 0.2s;
}

.comment-input:focus {
    outline: none;
    border-color: var(--primary, #009688);
}

.comment-save-btn {
    padding: 8px 20px;
    background: var(--primary, #009688);
    color: white;
    border: none;
    border-radius: 22px;
    font-weight: 600;
    font-size: 14px;
    cursor: pointer;
    transition: background 0.2s;
    align-self: flex-start;
}

.comment-save-btn:hover {
    background: var(--primary-btn-hover, #00796b);
}

.comments-list {
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.comment-item {
    display: flex;
    gap: 14px;
    padding: 14px 16px;
    background: #fff;
    border: 1px solid #e5e7eb;
    border-radius: 10px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.06);
    transition: box-shadow 0.2s, border-color 0.2s;
}

.comment-item:hover {
    border-color: #d1d5db;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
}

.comment-avatar {
    width: 35px;
    height: 35px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--primary, #009688) 0%, var(--primary-btn-hover, #00796b) 100%);
    color: white;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: 16px;
    flex-shrink: 0;
    letter-spacing: 0.5px;
}

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

.comment-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 6px;
    flex-wrap: wrap;
    gap: 6px;
}

.comment-author {
    font-weight: 700;
    color: var(--primary, #009688);
    font-size: 14px;
}

.comment-meta {
    display: inline-flex;
    align-items: center;
    gap: 10px;
}

.comment-date {
    font-size: 12px;
    color: #6b7280;
}

.comment-delete {
    color: #9ca3af;
    padding: 4px 6px;
    border-radius: 6px;
    transition: color 0.2s, background 0.2s;
    text-decoration: none;
}

.comment-delete:hover {
    color: #dc2626;
    background: #fef2f2;
}

.comment-delete i {
    font-size: 14px;
}

.comment-text {
    color: #374151;
    font-size: 14px;
    line-height: 1.5;
    word-break: break-word;
    white-space: pre-wrap;
}

/* MULTIPLE TIMER TABLE */
.report-timer-table {
    width: 100%;
    border-collapse: collapse;
}

.report-timer-table thead {
    background: #4b5563;
    color: white;
}

.report-timer-table th {
    padding: 12px;
    text-align: left;
    font-size: 12px;
    font-weight: 600;
    text-transform: uppercase;
}

.report-timer-table tbody tr {
    border-bottom: 1px solid #e5e7eb;
}

.report-timer-table tbody tr:hover {
    background: #f9fafb;
}

.report-timer-table td {
    padding: 12px;
    font-size: 13px;
    color: #1f2937;
}

.report-timer-table .report-timer-worker {
    font-weight: 600;
    line-height: 1.35;
    word-break: break-word;
}

.report-timer-table .report-timer-session {
    display: flex;
    gap: 0.5rem;
    align-items: stretch;
    min-width: 0;
}

.report-timer-table .report-timer-session__cell {
    flex: 1;
    min-width: 0;
    border: 1px solid rgba(0, 0, 0, 0.1);
    border-radius: 6px;
    padding: 0.35rem 0.5rem;
    background: #f9fafb;
}

.report-timer-table .report-timer-session__label {
    display: block;
    font-size: 0.625rem;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: #6b7280;
    margin-bottom: 0.15rem;
    line-height: 1.2;
}

.report-timer-table .report-timer-session__time {
    display: block;
    font-size: 0.75rem;
    font-weight: 600;
    line-height: 1.3;
    color: #1f2937;
    word-break: break-word;
}

.report-timer-table .report-timer-duration {
    font-weight: 600;
    color: #1f2937;
    white-space: nowrap;
}

.report-timer-table .report-timer-duration--empty {
    color: #9ca3af;
    font-weight: 400;
}

.timer-total-row {
    background: #f9fafb !important;
}

.timer-total-row td {
    font-weight: 700;
    color: #1f2937;
}

/* MULTIPLE TIMER G-- stacked entry cards (report preview) */
.report-timer-panel__body {
    display: flex;
    flex-direction: column;
    gap: 0.85rem;
}

.report-timer-cards {
    display: flex;
    flex-direction: column;
    gap: 0.65rem;
}

.report-timer-entry-card {
    background: #fff;
    border: 1px solid rgba(0, 0, 0, 0.08);
    border-radius: 14px;
    padding: 0.65rem 0.85rem 0.75rem;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.report-timer-entry-card:hover {
    border-color: rgba(0, 0, 0, 0.16);
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.07);
}

.report-timer-entry-card__head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 0.65rem;
    margin-bottom: 0.55rem;
}

.report-timer-entry-card__identity {
    display: flex;
    align-items: flex-start;
    gap: 0.5rem;
    min-width: 0;
    flex: 1;
}

.report-timer-entry-card__user-count {
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    gap: 0.2rem;
    padding: 0.15rem 0.45rem;
    border-radius: 999px;
    background: #f3f4f6;
    color: #4b5563;
    font-size: 0.625rem;
    font-weight: 700;
    line-height: 1.2;
}

.report-timer-entry-card__user-count-num {
    font-size: 0.6875rem;
}

.report-timer-entry-card__workers-list {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0;
    min-width: 0;
    flex: 1;
    font-size: 0.8125rem;
    line-height: 1.4;
}

.report-timer-worker-chip {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    max-width: 100%;
}

.report-timer-worker-chip__avatar {
    width: 20px;
    height: 20px;
    border-radius: 50%;
    object-fit: cover;
    flex-shrink: 0;
    border: 1px solid rgba(0, 0, 0, 0.08);
    background: #f3f4f6;
}

.report-timer-worker-chip__avatar--group {
    display: inline-grid;
    place-items: center;
    width: 20px;
    height: 20px;
    min-width: 20px;
    min-height: 20px;
    flex-shrink: 0;
    border-radius: 50%;
    box-sizing: border-box;
    padding: 0;
    vertical-align: middle;
    overflow: hidden;
}

.report-timer-worker-chip__avatar--group.text-info {
    background: var(--info, var(--primary, #009688)) !important;
    border: 1px solid var(--info, var(--primary, #009688)) !important;
    color: #fff !important;
}

.report-timer-worker-chip__avatar--group i.fa {
    display: block;
    margin: 0;
    padding: 0;
    font-size: 0.5625rem;
    line-height: 1;
    width: 1em;
    height: 1em;
    text-align: center;
}

.report-timer-worker-chip__avatar--group i.fa::before {
    display: block;
    line-height: 1em;
    text-align: center;
}

.report-timer-worker-chip__name {
    font-weight: 600;
    color: #37474f;
    word-break: break-word;
}

.report-timer-worker-chip__comma {
    color: #6b7280;
    margin-right: 0.15rem;
}

.report-timer-worker-chip__empty {
    color: #9ca3af;
}

.report-timer-entry-card__duration {
    flex-shrink: 0;
    font-size: 0.75rem;
    font-weight: 700;
    color: #374151;
    background: #f3f4f6;
    border: 1px solid #e5e7eb;
    border-radius: 999px;
    padding: 0.2rem 0.55rem;
    white-space: nowrap;
}

.report-timer-entry-card__duration--empty {
    color: #9ca3af;
    background: #f9fafb;
    border-color: #e5e7eb;
    font-weight: 500;
}

.report-timer-entry-card__body .report-timer-session-row {
    display: flex;
    gap: 0.5rem;
    align-items: stretch;
}

.report-timer-entry-card__body .report-timer-session__cell {
    flex: 1;
    min-width: 0;
    border: 1px solid rgba(0, 0, 0, 0.1);
    border-radius: 10px;
    padding: 0.4rem 0.55rem;
    background: #f9fafb;
}

.report-timer-entry-card__body .report-timer-session__label {
    display: block;
    font-size: 0.625rem;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: #6b7280;
    margin-bottom: 0.2rem;
    line-height: 1.2;
}

.report-timer-entry-card__body .report-timer-session__time {
    display: block;
    font-size: 0.75rem;
    font-weight: 600;
    line-height: 1.35;
    color: #1f2937;
    word-break: break-word;
}

.report-timer-entry-card__body .report-timer-session__time-short {
    display: none;
}

.report-timer-total-card {
    margin-top: 0.5rem;
    padding: 0.85rem 1rem;
    border: 1px solid rgba(0, 0, 0, 0.12);
    border-radius: 14px;
    background: transparent;
}

.report-timer-total-card__inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    flex-wrap: wrap;
}

.report-timer-total-card__label {
    font-size: 0.6875rem;
    font-weight: 700;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: #6b7280;
}

.report-timer-total-card__value {
    font-size: 1.125rem;
    font-weight: 700;
    color: #1f2937;
    line-height: 1.2;
}

.report-timer-total-card__hint {
    display: block;
    margin-top: 0.4rem;
    font-size: 0.625rem;
    line-height: 1.35;
}

/* Multiple Timer cards G-- narrow / mobile (preview column is often ~full width below lg) */
@media (max-width: 767px) {
    .report-timer-entry-card {
        padding: 0.7rem 0.75rem 0.8rem;
    }

    .report-timer-entry-card__head {
        display: grid;
        grid-template-columns: minmax(0, 1fr) auto;
        grid-template-areas:
            "count duration"
            "workers workers";
        gap: 0.45rem 0.5rem;
        align-items: center;
        margin-bottom: 0.5rem;
    }

    .report-timer-entry-card__identity {
        display: contents;
    }

    .report-timer-entry-card__user-count {
        grid-area: count;
        justify-self: start;
    }

    .report-timer-entry-card__workers-list {
        grid-area: workers;
        width: 100%;
        flex: none;
        gap: 0.35rem 0.45rem;
    }

    .report-timer-entry-card__duration {
        grid-area: duration;
        justify-self: end;
        align-self: center;
    }

    .report-timer-worker-chip__comma {
        display: none;
    }

    .report-timer-worker-chip {
        max-width: 100%;
    }

    .report-timer-worker-chip__name {
        overflow-wrap: anywhere;
    }

    .report-timer-entry-card__body .report-timer-session-row {
        flex-direction: row;
        gap: 0.35rem;
        align-items: stretch;
    }

    .report-timer-entry-card__body .report-timer-session__cell {
        flex: 1;
        min-width: 0;
        width: auto;
        box-sizing: border-box;
        padding: 0.35rem 0.4rem;
    }

    .report-timer-entry-card__body .report-timer-session__label {
        font-size: 0.5625rem;
        margin-bottom: 0.15rem;
    }

    .report-timer-entry-card__body .report-timer-session__time {
        font-size: 0.6875rem;
        line-height: 1.25;
        word-break: normal;
        white-space: nowrap;
    }

    .report-timer-entry-card__body .report-timer-session__time-full {
        display: none;
    }

    .report-timer-entry-card__body .report-timer-session__time-short {
        display: block;
    }

    .report-timer-total-card__inner {
        flex-direction: column;
        align-items: stretch;
        gap: 0.35rem;
    }

    .report-timer-total-card__value {
        font-size: 1.25rem;
    }
}

/* COMPACT CARDS FOR OTHER SECTIONS */
.report-additional-card-compact {
    background: #ffffff;
    border: 1px solid #e5e7eb;
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);

}

.report-compact-body {
    padding: 16px;
}

.compact-item {
    padding: 10px 0;
    border-bottom: 1px solid #f3f4f6;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

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

.compact-file-link {
    display: block;
    padding: 10px 12px;
    background: #f9fafb;
    border-radius: 6px;
    color: var(--primary, #009688);
    text-decoration: none;
    font-size: 13px;
    margin-bottom: 8px;
    transition: background 0.2s;
}

.compact-file-link:hover {
    background: var(--primary-light, #b8e2de);
    text-decoration: none;
}

.compact-file-link i {
    margin-right: 6px;
}

.compact-detail {
    display: flex;
    gap: 8px;
    margin-bottom: 8px;
    font-size: 13px;
}

.compact-label {
    font-weight: 600;
    color: #6b7280;
    min-width: 100px;
}

.rating-row {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px;
    background: #f9fafb;
    border-radius: 6px;
    margin-bottom: 10px;
}

.rating-row:last-child {
    margin-bottom: 0;
}

.rating-label {
    min-width: 70px;
    font-weight: 600;
}

.rating-stars-inline {
    font-size: 16px;
    white-space: nowrap;
}

.rating-stars-inline i {
    margin-right: 2px;
}

.rating-comment {
    flex: 1;
    padding-left: 12px;
    border-left: 2px solid #e5e7eb;
}

/* Responsive Design */
@media (max-width: 1200px) {
    .report-metrics-grid {
        grid-template-columns: repeat(3, 1fr);
    }
}

@media (max-width: 992px) {
    .report-metrics-grid {
        grid-template-columns: repeat(4, 1fr);
    }
}

/* Tablet / iPad Air (e.g. 820px): reduce logo so it doesn't overlap title */
@media (max-width: 1300px) and (min-width: 769px) {
    .report-summary-header .logo img {
        max-width: 150px;
    }

    .report-summary-header .qr-code img {
        width: 70px;
        height: 70px;
    }

    .report-summary-header .title-section h1 {
        font-size: 20px;
    }

    .report-summary-header .title-section h2 {
        font-size: 22px;
    }
}

/* ========== Mobile: single consolidated block for max-width 768px ========== */
@media (max-width: 768px) {

    /* Header */
    .report-summary-header {
        grid-template-columns: 1fr;
        justify-items: center;
        align-items: center;
        padding: 20px 15px;
        min-height: auto;
        gap: 12px;
    }

    .report-summary-header .logo {
        order: 1;
        justify-self: center;
        margin-bottom: 15px;
        width: 170px !important;
        max-width: 100%;
        text-align: center;
        margin-left: auto;
        margin-right: auto;
    }

    .report-summary-header .logo img {
        max-height: 20px;
        max-width: 170px;
    }

    .report-summary-header .title-section {
        order: 2;
        position: relative;
        left: auto;
        transform: none;
        width: 100%;
        padding: 0;
        pointer-events: auto;
    }

    .report-summary-header .title-section h1 {
        font-size: 17px;
        margin-bottom: 10px;
    }

    .report-summary-header .title-section h2 {
        font-size: 20px;
        margin: 0;
        word-break: break-all;
    }

    .report-summary-header .qr-code {
        display: none !important;
    }

    /* Section headers */
    .report-section-header {
        font-size: 15px;
    }

    .report-container .report-section-header {
        font-size: 14px !important;
        margin-top: 12px !important;
        margin-bottom: 8px !important;
        padding: 8px 10px !important;
        border-left-width: 3px !important;
    }

    /* Grids: single column (or 2 for metrics) */
    .report-asset-cards,
    .report-info-grid,
    .report-details-grid,
    .report-approvals-grid,
    .report-images-grid {
        grid-template-columns: 1fr;
    }

    .report-asset-cards {
        gap: 12px !important;
        margin-bottom: 18px !important;
    }

    .report-metrics-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 10px !important;
        margin-bottom: 21px !important;
    }

    .report-metric-card {
        padding: 8px 11px !important;
        border-radius: 8px !important;
        border-top-width: 5px !important;
    }

    .report-metric-label {
        font-size: 11px !important;
        margin-bottom: 6px !important;
        padding-bottom: 6px !important;
    }

    .report-metric-value {
        font-size: 12px !important;
    }

    .report-metric-workers-list {
        font-size: 12px !important;
    }

    .report-time-grid {
        grid-template-columns: 1fr;
    }

    /* Asset Information: smaller font and padding */
    .report-info-card .report-info-item,
    .report-info-item {
        padding: 8px 10px !important;
    }

    .report-info-icon {
        width: 32px !important;
        height: 32px !important;
        font-size: 15px !important;
        margin-right: 10px !important;
    }

    .report-info-label {
        font-size: 11px !important;
        margin-bottom: 3px !important;
    }

    .report-info-value {
        font-size: 13px !important;
    }

    /* Work Order Details: smaller font and padding */
    .report-detail-item:nth-child(3n) {
        border-right: 1px solid #e5e7eb;
    }

    .report-details-box {
        padding: 0 !important;
        margin-bottom: 18px !important;
        border-radius: 8px !important;
        border-left-width: 3px !important;
    }

    .report-details-grid {
        gap: 0 !important;
    }

    .report-detail-item {
        padding: 8px 10px !important;
    }

    .report-detail-label {
        font-size: 12px !important;
        margin-bottom: 4px !important;
    }

    .report-detail-value {
        font-size: 14px !important;
    }

    .report-sparepart-row,
    .report-sparepart-list {
        font-size: 12px !important;
    }

    .report-status-badge {
        padding: 4px 10px !important;
        font-size: 11px !important;
    }

    /* Approvals: smaller font and padding */
    .report-approvals-grid {
        gap: 8px !important;
        margin-bottom: 18px !important;
    }

    .report-approval-card {
        padding: 6px 8px !important;
        border-radius: 6px !important;
    }

    .report-approval-title {
        font-size: 10px !important;
    }

    .report-approval-name {
        font-size: 12px !important;
    }

    .report-signature-box {
        height: 100px !important;
        margin: 4px 0 !important;
        justify-content: center !important;
    }

    .report-signature-box img,
    .report-signature-box .report-signature-img {
        max-width: 100% !important;
        margin: 0 !important;
    }

    .report-signature-box svg {
        max-width: 100% !important;
        margin: 0 !important;
    }

    .report-approval-details {
        font-size: 11px !important;
    }

    .report-approval-position {
        font-size: 10px !important;
    }

    /* Images Attached: compact on mobile */
    .report-images-grid {
        gap: 8px !important;
        margin-bottom: 18px !important;
    }

    .report-image-title {
        padding: 6px !important;
        font-size: 11px !important;
    }

    .report-image-container {
        height: 160px !important;
        padding: 6px !important;
    }

    /* Checklist: smaller font and padding */
    .report-checklist-header {
        font-size: 13px !important;
        padding: 8px 10px !important;
    }

    .report-checklist-items {
        margin-bottom: 12px !important;
    }

    .report-checklist-item {
        padding: 6px 8px !important;
    }

    .report-checklist-number {
        font-size: 12px !important;
        min-width: 22px !important;
        height: 22px !important;
    }

    .report-checklist-text {
        font-size: 12px !important;
    }

    .report-checklist-status {
        font-size: 11px !important;
        padding: 4px 10px !important;
    }

    /* Timeline */
    .report-timeline-container {
        overflow-x: auto;
        padding: 30px 10px;
    }


    .report-additional-header {
        font-size: 14px !important;
    }

    .report-additional-body {
        font-size: 11px !important;
    }

    .compact-item {
        padding: 10px 0 !important;
    }
}

@media print {

    /* Checklist (and any .report-print-page-before): start on a new page */
    .report-print-page-before {
        page-break-before: avoid !important;
    }

    /* Fit report on one page: remove padding and scale down overall design */
    body,
    main.app-content,
    .app-content {
        padding: 0 !important;
        margin: 0 !important;
    }

    .report-container {
        padding: 10px !important;
        margin: 0 !important;
        max-width: 100% !important;
        box-shadow: none !important;
        border-radius: 0 !important;
    }

    /* ========== Compact header ========== */
    .report-summary-header {
        display: grid !important;
        grid-template-columns: 1fr auto 1fr !important;
        align-items: center !important;
        gap: 12px 16px !important;
        background: none !important;
        padding: 30px !important;
        min-height: 110px !important;
        border-radius: 0 !important;

    }

    .report-summary-header .logo {
        order: 1 !important;
        justify-self: start !important;
        margin-bottom: 0 !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
        width: auto !important;
        max-width: none !important;
        text-align: left !important;
        padding: 6px !important;
    }

    .report-summary-header .logo img {
        max-height: 58px !important;
    }

    .report-summary-header .title-section {
        order: 2 !important;
        position: relative !important;
        left: auto !important;
        top: auto !important;
        transform: none !important;
        width: auto !important;
        max-width: 100% !important;
        min-width: 0 !important;
        padding: 0 12px !important;
        justify-self: center !important;
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        text-align: center !important;
        pointer-events: none !important;
    }

    .report-summary-header .title-section h1 {
        font-size: 18px !important;
        margin-bottom: 3px !important;
        color: red !important;
    }

    .report-summary-header .title-section h2 {
        font-size: 20px !important;
        margin: 0 !important;
        word-break: normal !important;
        color: red !important;

    }

    .report-summary-header .qr-code {
        display: block !important;
        order: 3 !important;
        justify-self: end !important;
        min-width: 0 !important;
    }

    .report-summary-header .qr-code img {
        width: 82px !important;
        height: 82px !important;
    }

    /* ========== Compact section headers ========== */
    .report-section-header {
        font-size: 16px !important;
        margin-top: 14px !important;
        margin-bottom: 10px !important;
        padding-left: 12px !important;
        border-left-width: 4px !important;
    }

    /* ========== Asset information & work order details & performance metrics G-- bigger for print ========== */
    .report-info-grid,
    .report-asset-cards {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 14px !important;
        margin-bottom: 18px !important;
    }

    .report-info-card .report-info-item,
    .report-info-item {
        padding: 6px 10px !important;
    }

    .report-info-icon {
        width: 35px !important;
        height: 35px !important;
        font-size: 18px !important;
        margin-right: 14px !important;
    }

    .report-info-label {
        font-size: 13px !important;
        margin-bottom: 5px !important;
    }

    .report-info-value {
        font-size: 15px !important;
    }

    .report-details-box {
        margin-bottom: 16px !important;
        border-radius: 10px !important;
    }

    .report-details-grid {
        grid-template-columns: repeat(3, 1fr) !important;
    }

    .report-detail-item {
        padding: 6px 10px !important;
    }

    .report-metric-workers-list {
        color: #0F1216;
    }

    .report-status-badge {
        display: inline-block;
        padding: 4px 10px;
        border-radius: 15px;
        font-size: 11px;
        text-transform: uppercase;
    }

    .report-detail-label {
        font-size: 13px !important;
    }

    .report-detail-value {
        font-size: 15px !important;
    }

    /* Performance Metrics (compact, 6 per row on large screens) */


    .report-metrics-grid {
        grid-template-columns: repeat(5, 1fr) !important;
        gap: 8px !important;
        margin-bottom: 18px !important;
    }

    .report-metric-card {
        padding: 6px 10px !important;
        border-radius: 8px !important;
    }

    .report-metric-label {
        font-size: 13px !important;
        margin-bottom: 8px !important;
        padding-bottom: 8px !important;
    }

    .report-metric-value {
        font-size: 15px !important;
    }

    .report-metric-workers-list {
        font-size: 13px !important;
    }

    /* Approvals (compact, 6 per row on large screens) */


    .report-approvals-grid {
        gap: 10px !important;
        margin-bottom: 12px !important;
    }

    .report-approval-card {
        padding: 8px 12px !important;
        border-radius: 8px !important;
    }

    .report-approval-title {
        font-size: 10px !important;
    }

    .report-approval-name {
        font-size: 12px !important;
        color: #0F1216 !important;
    }

    .report-signature-box {
        height: 120px !important;
        border: 1px solid #d1d5db !important;
        border-radius: 8px !important;
        margin: 15px 0px !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        background: #f9fafb !important;
        overflow: visible !important;
        padding: 0px !important;
    }

    .report-signature-box img,
    .report-signature-box .report-signature-img {
        max-height: 100px !important;
        display: block !important;
        margin: 0 auto !important;
    }

    .report-signature-box svg {
        display: block !important;
        margin: 0 auto !important;
    }

    .report-images-grid {
        gap: 8px !important;
        margin-bottom: 12px !important;
    }

    .report-image-title {
        padding: 6px !important;
        font-size: 11px !important;
    }


    .report-image-title,
    .report-checklist-header {
        font-size: 11px !important;
    }

    .report-checklist-items {
        gap: 3px !important;
    }

    .report-checklist-item {
        padding: 6px 10px !important;
    }

    .report-checklist-number {
        font-size: 11px !important;
        min-width: 26px !important;
        height: 26px !important;
    }

    .report-checklist-text {
        font-size: 11px !important;
    }

    .report-checklist-status {
        font-size: 10px !important;
    }

    .report-additional-card,
    .report-additional-card-compact {
        padding: 10px 12px !important;
        margin-bottom: 10px !important;
    }

    .report-additional-header {
        font-size: 11px !important;
        padding: 5px 0 !important;
    }

    .report-additional-body {
        font-size: 11px !important;
    }

    .report-timeline-step-icon {
        width: 32px !important;
        height: 32px !important;
        font-size: 14px !important;
    }

    .report-timeline-step-label {
        font-size: 10px !important;
    }

    .report-time-grid {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 10px !important;
    }

    .report-timer-table th,
    .report-timer-table td {
        padding: 5px 8px !important;
        font-size: 11px !important;
    }

    .report-sparepart-row {
        padding: 6px 10px !important;
        font-size: 11px !important;
    }

    /* Restore grid columns for print */
    .report-info-grid,
    .report-asset-cards {
        grid-template-columns: repeat(2, 1fr) !important;
    }

    .report-details-grid {
        grid-template-columns: repeat(3, 1fr) !important;
    }

    .report-metrics-grid {
        grid-template-columns: repeat(5, 1fr) !important;
    }

    .report-approvals-grid {
        grid-template-columns: repeat(3, 1fr) !important;
    }

    .report-images-grid {
        grid-template-columns: repeat(3, 1fr) !important;
    }

    .report-time-grid {
        grid-template-columns: repeat(2, 1fr) !important;
    }

    /* Print color adjustments */
    .report-summary-header {
        -webkit-print-color-adjust: exact;
        print-color-adjust: exact;
    }

    .report-timeline-step.completed .report-timeline-step-icon {
        background: var(--primary, #009688) !important;
        -webkit-print-color-adjust: exact;
        print-color-adjust: exact;
    }

    .report-metric-value {
        color: #0F1216 !important;
    }

    .report-approval-name {
        color: #0F1216 !important;
    }


    .report-additional-card,
    .report-additional-card-compact {
        page-break-inside: avoid;
    }

    .report-timer-entry-card,
    .report-timer-total-card {
        page-break-inside: avoid;
        break-inside: avoid-page;
    }

    .report-metrics-grid,
    .report-approvals-grid {
        page-break-inside: avoid;
    }

    /* ========== Print: wrappers grow with image (override fixed heights / overflow) ========== */
    .report-image-card {
        overflow: visible !important;
        page-break-inside: avoid;
        break-inside: avoid-page;
        -webkit-column-break-inside: avoid;
    }

    /* Pictures: section may continue across pages; each slot stays intact (Chrome / Safari / Firefox) */
    .pictures-card {
        page-break-inside: auto !important;
        break-inside: auto !important;
    }

    .pictures-card.d-print-no-break {
        page-break-inside: auto !important;
        break-inside: auto !important;
    }

    .pictures-card .d-print-no-break {
        page-break-inside: auto !important;
        break-inside: auto !important;
    }

    .pictures-card .report-images-grid {
        page-break-inside: auto !important;
        break-inside: auto !important;
    }

    .pictures-card .report-image-card,
    .pictures-card .picture-block,
    .pictures-card .row>.col-sm-4 {
        page-break-inside: avoid !important;
        break-inside: avoid-page !important;
        -webkit-column-break-inside: avoid !important;
    }

    .pictures-card table tr {
        page-break-inside: avoid !important;
        break-inside: avoid-page !important;
        -webkit-column-break-inside: avoid !important;
    }

    .report-images-grid {
        align-items: start !important;
        grid-auto-rows: min-content !important;
    }

    .report-image-container {
        height: auto !important;
        min-height: 0 !important;
        max-height: none !important;
        overflow: visible !important;
        align-items: flex-start !important;
    }

    .report-image-container img {
        max-height: none !important;
        max-width: 100% !important;
        width: auto !important;
        height: auto !important;
        object-fit: contain !important;
    }

    .report-checklist-attachment .report-image-container {
        max-height: none !important;
    }

    .report-checklist-attachment .report-checklist-img {
        max-height: none !important;
        object-fit: contain !important;
    }

    .report-signature-box {
        height: auto !important;
        min-height: 0 !important;
        max-height: none !important;
        overflow: visible !important;
        align-items: flex-start !important;
    }

    .report-signature-box img,
    .report-signature-box .report-signature-img {
        max-height: none !important;
        max-width: 100% !important;
        width: auto !important;
        height: auto !important;
        object-fit: contain !important;
    }

    .report-signature-box svg {
        max-width: 100% !important;
        max-height: none !important;
    }


}

/* DARK MODE STYLES */
/* Uses data-theme="dark" attribute on body (set by dark-mode-switch.js) */
[data-theme="dark"] .report-container {
    border-radius: 15px;
    background: #333;
    color: #d0d0d0;
}

[data-theme="dark"] .report-container td,
[data-theme="dark"] .report-container th {
    color: #d0d0d0;
    border-color: #444;
}

[data-theme="dark"] .report-container .section-title {
    color: #c8c8c8;
}

[data-theme="dark"] .report-summary-header {
    background: linear-gradient(135deg, var(--primary, #009688), var(--primary-back, #00695c));
    color: #fff;
}



[data-theme="dark"] .report-section-header {
    color: #fff;
    border-left-color: var(--primary-btn-hover, #007d71);
}

[data-theme="dark"] .report-info-card,
[data-theme="dark"] .report-info-card-accent {
    background: #212121;
}

[data-theme="dark"] .report-info-value {
    color: #fff;
}

[data-theme="dark"] .report-info-label {
    color: var(--secondary, #6c757d);
}

[data-theme="dark"] .report-details-box {
    background: #212121;
    /* border: 1px solid #444;
    border-left: 4px solid var(--primary, #009688); */
}

[data-theme="dark"] .report-detail-label {
    color: var(--secondary, #6c757d);
}

[data-theme="dark"] .report-detail-value {
    color: #fff;
}

[data-theme="dark"] .uap-attend-wo-summary .uap-attend-breakdown-primary {
    color: #f3f4f6;
}

[data-theme="dark"] .uap-attend-wo-summary .uap-attend-wo-meta-row {
    border-top-color: #374151;
}

[data-theme="dark"] .uap-attend-wo-summary .uap-attend-wo-meta-row>.report-info-item {
    border-color: #374151;
    background: transparent;
    box-shadow: none;
}

[data-theme="dark"] .uap-attend-wo-summary .uap-attend-wo-meta-row>.report-info-item:hover {
    box-shadow: none;
    transform: none;
}

[data-theme="dark"] .uap-attend-wo-summary .uap-attend-wo-meta-row .report-info-value {
    color: #f3f4f6;
}

[data-theme="dark"] .uap-attend-wo-summary .uap-attend-wo-meta-row .report-info-value.text-primary {
    color: var(--primary-hover, #5eead4);
}

[data-theme="dark"] .uap-attend-wo-summary .report-info-card,
[data-theme="dark"] .uap-attend-wo-summary .report-info-card-accent {
    background: transparent;
}

[data-theme="dark"] .uap-attend-wo-summary .report-info-card .report-info-item {
    border-color: #374151;
    background: transparent;
    box-shadow: none;
}

[data-theme="dark"] .uap-attend-wo-summary .report-info-card .report-info-item:hover {
    box-shadow: none;
    transform: none;
}

[data-theme="dark"] .uap-attend-wo-summary .report-detail-item {
    border-right-color: #374151;
    border-bottom-color: #374151;
}

[data-theme="dark"] .uap-attend-wo-summary .uap-attend-more-detail-btn {
    background-color: #2d2d2d;
    border-color: #4b5563;
    color: var(--primary-hover, #5eead4);
    box-shadow: none;
}

[data-theme="dark"] .uap-attend-onhold-reason {
    background-color: rgba(245, 158, 11, 0.14) !important;
    border-color: transparent !important;
    border-left-color: #f59e0b !important;
    color: #f3f4f6;
    box-shadow: none;
}

[data-theme="dark"] .uap-attend-onhold-reason__icon {
    color: #fbbf24;
}

[data-theme="dark"] .uap-attend-onhold-reason__label {
    color: #fcd34d;
}

[data-theme="dark"] .uap-attend-onhold-reason__text {
    color: #e5e7eb;
}

[data-theme="dark"] .uap-attend-wo-summary .uap-attend-more-detail-btn:hover,
[data-theme="dark"] .uap-attend-wo-summary .uap-attend-more-detail-btn:focus {
    background-color: #374151;
    border-color: #6b7280;
    color: var(--primary-light, #99f6e4);
    box-shadow: none;
}

[data-theme="dark"] .report-metric-card {
    background: #212121;
}

[data-theme="dark"] .report-metric-label {
    color: var(--secondary, #6c757d);
}

[data-theme="dark"] .report-metric-value {
    color: #fff;
}

[data-theme="dark"] .report-time-card {
    background: #212121;
}

[data-theme="dark"] .report-approval-card {
    background: #212121;
    border-color: #8c8c8c;
}

[data-theme="dark"] .report-approval-name {
    color: #fff;
}

[data-theme="dark"] .report-approval-position {
    color: var(--secondary, #6c757d);
}

[data-theme="dark"] .report-image-card {
    background: #212121;
    border-color: #8c8c8c;
}

[data-theme="dark"] .report-image-title {
    background: #212121;
    color: #fff;
}

[data-theme="dark"] .report-checklist-header {
    color: #fff;
}

[data-theme="dark"] .report-checklist-items {
    background: #212121;
    border-color: #8c8c8c;
}

[data-theme="dark"] .report-checklist-item {
    border-color: #8c8c8c;
}

[data-theme="dark"] .report-checklist-item:hover {
    background: #212529;
}

[data-theme="dark"] .report-checklist-text {
    color: #fff;
}

[data-theme="dark"] .report-additional-card,
[data-theme="dark"] .report-additional-card-compact {
    background: #212121;
    border-color: #8c8c8c;
}

[data-theme="dark"] .report-additional-header {
    background: #0F1216;
    color: #fff;
    border-bottom-color: var(--primary-btn-hover, #007d71);
}

[data-theme="dark"] .report-compact-body {
    background: #212121;
}

[data-theme="dark"] .comment-input {
    background: #0F1216;
    border-color: #8c8c8c;
    color: #fff;
}

[data-theme="dark"] .comment-input:focus {
    border-color: var(--primary-btn-hover, #007d71);
}

[data-theme="dark"] .comment-item {
    background: #0F1216;
    border-color: #3d3d3d;
}

[data-theme="dark"] .comment-item:hover {
    border-color: #5a5a5a;
}

[data-theme="dark"] .comment-author {
    color: #01baa8;
}

[data-theme="dark"] .comment-text {
    color: #e5e5e5;
}

[data-theme="dark"] .comment-delete {
    color: #8c8c8c;
}

[data-theme="dark"] .comment-delete:hover {
    color: #f87171;
    background: #3d1f1f;
}

[data-theme="dark"] .report-timer-table thead {
    background: var(--primary-btn-hover, #007d71);
    color: #fff;
}

[data-theme="dark"] .report-timer-table tbody tr {
    border-color: #8c8c8c;
}

[data-theme="dark"] .report-timer-table tbody tr:hover {
    background: #212529;
}

[data-theme="dark"] .report-timer-table td {
    color: #fff;
}

[data-theme="dark"] .report-timer-table .report-timer-session__cell {
    border-color: rgba(255, 255, 255, 0.14);
    background: rgba(255, 255, 255, 0.04);
}

[data-theme="dark"] .report-timer-table .report-timer-session__label {
    color: #9ca3af;
}

[data-theme="dark"] .report-timer-table .report-timer-session__time {
    color: #e5e7eb;
}

[data-theme="dark"] .report-timer-table .report-timer-duration {
    color: #e5e7eb;
}

[data-theme="dark"] .report-timer-entry-card {
    background: #262626;
    border-color: rgba(255, 255, 255, 0.1);
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.25);
}

[data-theme="dark"] .report-timer-entry-card:hover {
    border-color: rgba(255, 255, 255, 0.22);
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.35);
}

[data-theme="dark"] .report-timer-entry-card__user-count {
    background: rgba(255, 255, 255, 0.08);
    color: #d1d5db;
}

[data-theme="dark"] .report-timer-worker-chip__avatar {
    border-color: #404040;
    background: rgba(255, 255, 255, 0.06);
}

[data-theme="dark"] .report-timer-worker-chip__avatar--group.text-info {
    background: var(--info, #4db6ac) !important;
    border-color: var(--info, #4db6ac) !important;
    color: #fff !important;
}

[data-theme="dark"] .report-timer-worker-chip__name {
    color: #e5e7eb;
}

[data-theme="dark"] .report-timer-worker-chip__comma {
    color: #9ca3af;
}

[data-theme="dark"] .report-timer-entry-card__duration {
    color: #e5e7eb;
    background: rgba(255, 255, 255, 0.08);
    border-color: rgba(255, 255, 255, 0.14);
}

[data-theme="dark"] .report-timer-entry-card__duration--empty {
    color: #9ca3af;
    background: rgba(255, 255, 255, 0.04);
    border-color: rgba(255, 255, 255, 0.12);
}

[data-theme="dark"] .report-timer-entry-card__body .report-timer-session__cell {
    border-color: rgba(255, 255, 255, 0.14);
    background: rgba(255, 255, 255, 0.04);
}

[data-theme="dark"] .report-timer-entry-card__body .report-timer-session__label {
    color: #9ca3af;
}

[data-theme="dark"] .report-timer-entry-card__body .report-timer-session__time {
    color: #e5e7eb;
}

[data-theme="dark"] .report-timer-total-card {
    border-color: rgba(255, 255, 255, 0.14);
    background: transparent;
}

[data-theme="dark"] .report-timer-total-card__label {
    color: #9ca3af;
}

[data-theme="dark"] .report-timer-total-card__value {
    color: #f3f4f6;
}

[data-theme="dark"] .timer-total-row {
    background: #0F1216 !important;
}

[data-theme="dark"] .compact-item {
    border-color: #8c8c8c;
}

[data-theme="dark"] .compact-file-link {
    background: #0F1216;
    color: #01baa8;
}

[data-theme="dark"] .compact-file-link:hover {
    background: #1b1f23;
    color: #00877a;
}

[data-theme="dark"] .compact-label {
    color: var(--secondary, #6c757d);
}

[data-theme="dark"] .rating-row {
    background: #0F1216;
}

[data-theme="dark"] .rating-comment {
    border-left-color: #8c8c8c;
}

[data-theme="dark"] .report-sparepart-list {
    color: #fff;
}

[data-theme="dark"] .wo-status-new {
    background: var(--danger, #dc3545);
    color: #fff;
}

[data-theme="dark"] .wo-status-open {
    background: var(--info, #17a2b8);
    color: #fff;
}

[data-theme="dark"] .wo-status-completed {
    background: var(--success, #28a745);
    color: #fff;
}

[data-theme="dark"] .wo-status-verified {
    background: var(--success, #28a745);
    color: #fff;
}

[data-theme="dark"] .wo-status-acknowledged {
    background: var(--secondary, #6c757d);
    color: #fff;
}

[data-theme="dark"] .wo-status-cancel {
    background: var(--danger, #dc3545);
    color: #fff;
}

[data-theme="dark"] .checklist-status-ok {
    background: #d1ecf1;
    color: var(--info, #17a2b8);
}

[data-theme="dark"] .checklist-status-note {
    background: #e7f3f5;
    color: var(--info, #17a2b8);
}

[data-theme="dark"] .if-empty {
    color: var(--secondary, #6c757d);
}

[data-theme="dark"] .report-signature-box {
    background: #333;
    border-color: #8c8c8c;
}

[data-theme="dark"] .report-approval-details {
    color: #fff;
}

/* ==================== UNIFIED KPI CARD SYSTEM ==================== */
.kpi-grid {
    display: grid;
    gap: 10px;
    margin-bottom: 16px;
}

.kpi-grid--four {
    grid-template-columns: repeat(4, 1fr);
    gap: 8px;
    margin-bottom: 12px;
}

.kpi-grid--three {
    grid-template-columns: repeat(3, 1fr);
    gap: 8px;
    margin-bottom: 12px;
}

.kpi-grid--five {
    grid-template-columns: repeat(5, 1fr);
}

.kpi-grid--six {
    grid-template-columns: repeat(6, 1fr);
    gap: 8px;
    margin-bottom: 12px;
}

/* Dashboard column embed (e.g. Column.php OEE widget): min-width + table-responsive = scroll, not crushed text */
.kpi-column-oee-wrap.table-responsive {
    margin-bottom: 12px;
}

.kpi-column-oee-wrap .kpi-grid.kpi-grid--column-oee {
    margin-bottom: 0;
}

.kpi-grid.kpi-grid--column-oee {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    width: 100%;
    box-sizing: border-box;
}

.kpi-column-oee-wrap .kpi-grid.kpi-grid--column-oee {
    min-width: 292px;
}

.kpi-grid.kpi-grid--column-oee>.kpi-card {
    min-width: 0;
    padding: 10px 10px;
    gap: 8px;
}

.kpi-grid.kpi-grid--column-oee .kpi-icon {
    width: 44px;
    height: 44px;
    font-size: 22px;
}

.kpi-grid.kpi-grid--column-oee .kpi-label {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.kpi-grid.kpi-grid--column-oee .kpi-value {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    font-size: clamp(15px, 2.5vw, 20px);
}

.kpi-card {
    background: #fff;
    border-radius: 10px;
    padding: 12px 14px;
    display: flex;
    align-items: center;
    gap: 11px;
    -webkit-box-shadow: 0 6px 6px 0 rgba(0, 0, 0, 0.08), 0 1px 6px 0 rgba(0, 0, 0, 0.06), 6px 6px 8px -2px rgba(0, 0, 0, 0.2);
    box-shadow: 0 6px 6px 0 rgba(0, 0, 0, 0.08), 0 1px 6px 0 rgba(0, 0, 0, 0.06), 6px 6px 8px -2px rgba(0, 0, 0, 0.2);
    border-left: 4px solid;
    transition: transform 0.15s, box-shadow 0.15s;
}

.kpi-card:hover {
    transform: translateY(-1px);
    -webkit-box-shadow: 0 6px 6px 0 rgba(0, 0, 0, 0.14), 0 1px 6px 0 rgba(0, 0, 0, 0.12), 6px 6px 8px -2px rgba(0, 0, 0, 0.2);
    box-shadow: 0 6px 6px 0 rgba(0, 0, 0, 0.14), 0 1px 6px 0 rgba(0, 0, 0, 0.12), 6px 6px 8px -2px rgba(0, 0, 0, 0.2);
}

.kpi-icon {
    font-size: 26px;
    width: 50px;
    height: 50px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 10px;
    flex-shrink: 0;
    color: #fff;
}

.kpi-icon .fa {
    color: inherit;
}

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

.kpi-label {
    font-size: 11px;
    color: var(--secondary, #6c757d);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    font-weight: 600;
    margin: 0 0 3px;
}

.kpi-value {
    font-size: 20px;
    font-weight: 700;
    color: #212529;
    line-height: 1.2;
    margin: 0;
}

.kpi-card.kpi-primary {
    border-left-color: var(--primary, #009688);
}

.kpi-card.kpi-info {
    border-left-color: var(--info, #17a2b8);
}

.kpi-card.kpi-warning {
    border-left-color: var(--warning, #ffc107);
}

.kpi-card.kpi-danger {
    border-left-color: var(--danger, #dc3545);
}

.kpi-card.kpi-success {
    border-left-color: var(--success, #28a745);
}

.kpi-card.kpi-secondary {
    border-left-color: var(--secondary, #6c757d);
}

/* Icon tile: solid accent background, white glyph */
.kpi-card.kpi-primary .kpi-icon {
    background: var(--primary, #009688);
}

.kpi-card.kpi-info .kpi-icon {
    background: var(--info, #17a2b8);
}

.kpi-card.kpi-warning .kpi-icon {
    background: var(--warning, #ffc107);
}

.kpi-card.kpi-danger .kpi-icon {
    background: var(--danger, #dc3545);
}

.kpi-card.kpi-success .kpi-icon {
    background: var(--success, #28a745);
}

.kpi-card.kpi-secondary .kpi-icon {
    background: var(--secondary, #6c757d);
}

@media (max-width: 992px) {

    .kpi-grid--five,
    .kpi-grid--six {
        grid-template-columns: repeat(3, 1fr);
    }
}

@media (max-width: 576px) {
    .kpi-column-oee-wrap .kpi-grid.kpi-grid--column-oee {
        min-width: 0;
    }

    .kpi-grid.kpi-grid--column-oee {
        grid-template-columns: minmax(0, 1fr);
    }

    .kpi-grid--three,
    .kpi-grid--four,
    .kpi-grid--five,
    .kpi-grid--six {
        grid-template-columns: repeat(2, 1fr);
    }

    .kpi-value {
        font-size: 18px;
    }
}

[data-theme="dark"] .kpi-card {
    background: #2c2c2c;
}

[data-theme="dark"] .kpi-value {
    color: #e5e7eb;
}

[data-theme="dark"] .kpi-label {
    color: #94a3b8;
}

/* ==================== DASHBOARD OVERVIEW PANEL (Corrective / Preventive) ==================== */

/* Header row: heading + subtitle on left, site filter on right */
.dash-overview-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    margin-bottom: 10px;
    padding: 0 4px;
}

.dash-overview-heading {
    margin: 0;
    font-size: 16px;
    font-weight: 600;
    color: inherit;
}

.dash-overview-subtitle {
    font-size: 12px;
    color: #888;
    margin-top: 3px;
}

/* Outer full-width tile that holds both sub-tiles */
.dash-panel-tile {
    padding: 16px;
}

.dash-panel-inner {
    display: flex;
    gap: 16px;
    align-items: stretch;
    flex-wrap: wrap;
}

/* Shared sub-tile base */
.dash-subtile {
    background: #fff;
    border: 1px solid #e9ecef;
    border-left: 4px solid #f1f3f5;
    border-radius: 8px;
    padding: 16px;
}

/* Left: Trend chart (~60%) */
.dash-subtile--trend {
    flex: 3;
    min-width: 280px;
    display: flex;
    flex-direction: column;
    min-height: 320px;
}

/* Right: Status / Donut (~40%) */
.dash-subtile--status {
    flex: 2;
    min-width: 220px;
}

/* Sub-tile title row */
.dash-subtile-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    margin-bottom: 8px;
}

/* Sub-tile title text */
.dash-subtile-title {
    font-size: 14px;
    font-weight: 600;
    display: flex;
    align-items: center;
    gap: 7px;
}

/* Sub-tile subtitle / descriptor */
.dash-subtile-sub {
    font-size: 11px;
    color: #aaa;
    margin-top: 2px;
}

/* Month badge (light pill) */
.dash-month-badge {
    font-size: 11px;
    color: #555;
    background: #f0f4f8;
    border: 1px solid #d0dce8;
    border-radius: 20px;
    padding: 3px 10px;
    white-space: nowrap;
    flex-shrink: 0;
}

/* Chart canvas wrapper G-- fills flex:1 column */
.dash-chart-wrap {
    flex: 1;
    position: relative;
    min-height: 240px;
    margin-top: 10px;
}

.dash-chart-wrap canvas {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

/* "No data" placeholder inside chart area */
.dash-chart-empty {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* KPI pending label row: label + Requested badge side-by-side */
.dash-pending-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 6px;
    margin-bottom: 4px;
}

.dash-pending-row .kpi-label {
    margin: 0;
    min-width: 0;
    flex: 1;
}

.dash-requested-badge {
    flex-shrink: 0;
    white-space: nowrap;
    font-size: 11px;
    padding: 5px 8px;
    text-decoration: none;
}

/* Badge grid (2 equal columns) under pending row */
.dash-badge-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 4px;
    width: 100%;
}

/* Dark mode overrides */
[data-theme="dark"] .dash-subtile {
    background: #2c2c2c;
    border-color: #444;
    border-left-color: #555;
}

[data-theme="dark"] .dash-overview-subtitle,
[data-theme="dark"] .dash-subtile-sub {
    color: #94a3b8;
}

[data-theme="dark"] .dash-month-badge {
    background: #374151;
    border-color: #4b5563;
    color: #d1d5db;
}

/* CM/PM trend chart area: empty state + any copy inside the canvas wrapper */
[data-theme="dark"] .dash-chart-wrap {
    color: #e2e8f0;
}

[data-theme="dark"] .dash-chart-wrap .text-muted {
    color: #94a3b8 !important;
}

@media (max-width: 576px) {

    .dash-subtile--trend,
    .dash-subtile--status {
        flex: 1 1 100%;
        min-width: 0;
    }
}

/* ==================== KPI: compact 2+-2 on mobile (matches Assets_Detail header KPIs) ==================== */
@media (max-width: 767px) {
    .asset-identity-kpis {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .asset-identity-kpis.am-advanced-kpi {
        gap: 6px;
        padding-top: 6px;
        margin-top: 0;
    }

    .asset-identity-kpis.am-advanced-kpi .kpi-card {
        padding: 7px 8px;
        gap: 7px;
        align-items: flex-start;
    }

    .asset-identity-kpis.am-advanced-kpi .kpi-icon {
        width: 36px;
        height: 36px;
        min-width: 36px;
        font-size: 16px;
        border-radius: 8px;
    }

    .asset-identity-kpis.am-advanced-kpi .kpi-label {
        font-size: 9px;
        letter-spacing: 0.04em;
        margin: 0 0 1px;
        line-height: 1.15;
    }

    .asset-identity-kpis.am-advanced-kpi .kpi-value {
        font-size: clamp(13px, 3.8vw, 16px);
        line-height: 1.1;
        margin: 0;
    }

    .asset-identity-kpis.am-advanced-kpi .kpi-hint {
        font-size: 0.6rem;
        margin-top: 2px;
        line-height: 1.2;
    }

    .asset-identity-kpis.am-advanced-kpi .kpi-health-caption {
        margin-top: 2px;
        gap: 2px 4px;
    }

    .asset-identity-kpis.am-advanced-kpi .kpi-health-risk-badge {
        font-size: 0.58rem;
        padding: 0.1em 0.35em;
    }

    .asset-identity-kpis.am-advanced-kpi .asset-kpi-data-bar {
        margin-top: 5px;
    }

    .asset-identity-kpis.am-advanced-kpi .asset-kpi-data-top {
        gap: 7px;
    }

    .asset-identity-kpis.am-advanced-kpi .summary-progress-bar {
        margin-top: 3px;
        height: 3px;
    }

    .asset-identity-kpis.am-advanced-kpi .kpi-card.kpi-primary .kpi-label {
        font-size: 8px;
        line-height: 1.2;
        word-break: break-word;
    }

    .asset-identity-kpis.am-advanced-kpi .asset-kpi-uptime .kpi-icon {
        margin-top: 0;
    }

    .asset-identity-kpis.am-advanced-kpi .kpi-label-uptime {
        margin-bottom: 1px;
        gap: 0;
    }

    .asset-identity-kpis.am-advanced-kpi .kpi-uptime-range {
        font-size: 8px;
    }

    .asset-identity-kpis.am-advanced-kpi .kpi-uptime-hint {
        margin-top: 1px;
    }

    /* Assets_Maintenance: advanced analytics KPI row G-- compact 2+-2; beats inline .asset-maintenance-insights .am-advanced-kpi */
    .asset-maintenance-insights .asset-identity-kpis.am-advanced-kpi {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 6px;
        padding-top: 6px;
        margin-top: 0;
        margin-bottom: 8px;
    }

    .asset-maintenance-insights .asset-identity-kpis.am-advanced-kpi .kpi-card {
        padding: 7px 8px;
        gap: 7px;
        align-items: flex-start;
    }

    .asset-maintenance-insights .asset-identity-kpis.am-advanced-kpi .kpi-icon {
        width: 36px;
        height: 36px;
        min-width: 36px;
        font-size: 16px;
        border-radius: 8px;
    }

    .asset-maintenance-insights .asset-identity-kpis.am-advanced-kpi .kpi-label {
        font-size: 9px;
        letter-spacing: 0.04em;
        margin: 0 0 1px;
        line-height: 1.15;
    }

    .asset-maintenance-insights .asset-identity-kpis.am-advanced-kpi .kpi-value {
        font-size: clamp(13px, 3.8vw, 16px);
        line-height: 1.1;
        margin: 0;
    }

    .asset-maintenance-insights .asset-identity-kpis.am-advanced-kpi .kpi-hint {
        font-size: 0.6rem;
        margin-top: 2px;
        line-height: 1.2;
    }

    .asset-maintenance-insights .asset-identity-kpis.am-advanced-kpi .kpi-card.kpi-primary .kpi-label {
        font-size: 8px;
        line-height: 1.2;
        word-break: break-word;
    }
}

/* Dashboard / reports: when .kpi-grid collapses to 2 columns (see breakpoint below), scale cards down */
@media (max-width: 576px) {

    .kpi-grid--four>.kpi-card,
    .kpi-grid--five>.kpi-card,
    .kpi-grid--six>.kpi-card {
        padding: 7px 9px;
        gap: 7px;
        align-items: flex-start;
    }

    .kpi-grid--four .kpi-icon,
    .kpi-grid--five .kpi-icon,
    .kpi-grid--six .kpi-icon {
        width: 36px;
        height: 36px;
        min-width: 36px;
        font-size: 16px;
        border-radius: 8px;
    }

    .kpi-grid--four .kpi-label,
    .kpi-grid--five .kpi-label,
    .kpi-grid--six .kpi-label {
        font-size: 9px;
        letter-spacing: 0.04em;
        margin: 0 0 1px;
        line-height: 1.15;
    }

    .kpi-grid--four .kpi-value,
    .kpi-grid--five .kpi-value,
    .kpi-grid--six .kpi-value {
        font-size: clamp(13px, 3.8vw, 17px);
        line-height: 1.1;
    }
}

/* Corrective_Verify (and similar): WO picture strip overlaps upward but stays under the timeline .tile */
.cm-verify-timeline-stack {
    position: relative;
    z-index: 2;
}

.cm-verify-header-img-row {
    position: relative;
    z-index: 1;
}

/* Page columns sit above the decorative Pic_Report header strip (never Pic_Before/Pic_After). */
.cm-verify-header-img-row>[class*="col-"] {
    position: relative;
    z-index: 2;
}

/* WO Verify/Confirm/Action dropdown: above picture sidebar when open */
.wo-action-dropdown {
    position: relative;
    z-index: 5;
}

.tile.submit-focus table.table-sm,
.tile.submit-focus table.table-sm td,
.tile.submit-focus .wo-action-dropdown,
.tile.submit-focus .wo-action-dropdown-menu {
    overflow: visible;
}

.tile.submit-focus td.pm-verify-substatus-footer,
.tile.submit-focus td.pm-verify-substatus-footer .wo-substatus-timeline,
.tile.submit-focus td.pm-verify-substatus-footer #substatus-signature-container,
.tile.submit-focus .pm-verify-substatus-footer,
.tile.submit-focus .pm-verify-substatus-footer .wo-substatus-timeline,
.tile.submit-focus .pm-verify-substatus-footer #substatus-signature-container {
    overflow: visible;
}

.pm-wo-layout-row.cm-verify-header-img-row {
    width: 100%;
    margin-left: 0;
    margin-right: 0;
    align-items: flex-start;
}

@media (min-width: 992px) {

    :is(.pm-wo-layout-row, .cm-verify-header-img-row)>.pm-wo-summary-col,
    :is(.pm-wo-layout-row, .cm-verify-header-img-row)>.pm-wo-main-col,
    :is(.pm-wo-layout-row, .cm-verify-header-img-row)>.pm-wo-pictures-col {
        flex-shrink: 0;
    }
}

.wo-action-dropdown .dropdown-menu.wo-action-dropdown-menu {
    width: max(100%, 13.75rem);
    max-width: min(22rem, 92vw);
    max-height: 300px;
    overflow-y: auto;
}

.wo-action-dropdown.show,
.wo-action-dropdown .dropdown-menu.show,
:is(.cm-verify-header-img-row, .pm-wo-layout-row) .dropdown-menu.show {
    z-index: 50;
}

.wo-action-dropdown .dropdown-menu.wo-action-dropdown-menu.show {
    z-index: 51;
}

:is(.cm-verify-header-img-row, .pm-wo-layout-row)>[class*="col-"]:has(.wo-action-dropdown.show),
:is(.cm-verify-header-img-row, .pm-wo-layout-row)>[class*="col-"]:has(.dropdown-menu.show) {
    z-index: 50;
}

.tile:has(.wo-action-dropdown.show),
:is(.cm-verify-header-img-row, .pm-wo-layout-row) .tile:has(.dropdown-menu.show) {
    z-index: 51;
    overflow: visible;
}

td:has(.wo-action-dropdown.show),
:is(.cm-verify-header-img-row, .pm-wo-layout-row) td:has(.dropdown-menu.show),
:is(.cm-verify-header-img-row, .pm-wo-layout-row) td.show:has(.dropdown-menu) {
    position: relative;
    z-index: 52;
    overflow: visible;
}

/* Select2: visible widget matches .form-control radius (10px). Dark theme uses the same in dark-mode.css */
select.form-control+.select2-container .select2-selection {
    border-radius: 10px;
}

/* Header nav menus above page Select2 (1070 > default open Select2 ~1051) */
#navbar-header.app-header {
    z-index: 1070 !important;
}

#navbar-header .app-header-dropdown-menu.dropdown-menu,
#navbar-header #personal_dropdown.settings-menu,
#navbar-header #notification_dropdown {
    z-index: 1071 !important;
}

html.swal2-shown #navbar-header.app-header {
    z-index: 1030 !important;
}

html.swal2-shown #navbar-header .app-header-dropdown-menu.dropdown-menu {
    z-index: 1031 !important;
}

/* Bootstrap modals: stack above app-header (1070) and sit below the fixed header */
.modal {
    z-index: 1080 !important;
}

.modal-backdrop {
    z-index: 1072 !important;
}

.modal .modal-dialog {
    margin-top: 3.75rem;
    margin-bottom: 1.5rem;
}

.modal .modal-dialog.modal-dialog-centered {
    align-items: flex-start;
    min-height: calc(100vh - 5.25rem);
    margin-top: 3.75rem;
    margin-bottom: 1.5rem;
}

.modal .modal-dialog.modal-dialog-centered::before {
    display: none;
}

.modal .modal-body {
    max-height: calc(100vh - 11rem);
    overflow-y: auto;
}

/* Bootstrap modal: Select2 inside modal only */
.modal .select2-container,
.modal .select2-container--open,
.modal .select2-dropdown {
    z-index: 1090 !important;
}

/* Air-datepicker popup above Bootstrap modal (backdrop 1072, modal 1080) */
#datepickers-container,
.datepickers-container {
    z-index: 1090 !important;
}

/* Theme-aware air-datepicker (datepicker-here) accents */
.datepicker--cell.-current-,
.datepicker--cell.-current-.-in-range- {
    color: var(--primary, #009688);
}
.datepicker--cell.-in-range- {
    background: rgba(var(--primary-rgb, 0, 150, 136), 0.1);
}
.datepicker--cell.-in-range-.-focus- {
    background-color: rgba(var(--primary-rgb, 0, 150, 136), 0.2);
}
.datepicker--cell.-range-from-,
.datepicker--cell.-range-to- {
    border-color: rgba(var(--primary-rgb, 0, 150, 136), 0.5);
    background-color: rgba(var(--primary-rgb, 0, 150, 136), 0.1);
}
.datepicker--cell.-selected-,
.datepicker--cell.-selected-.-current- {
    color: #fff;
    background: var(--primary, #009688);
}
.datepicker--cell.-selected-.-focus- {
    background: var(--primary-btn-hover, #00796b);
}
.datepicker--time-row input[type=range]:focus::-webkit-slider-thumb,
.datepicker--time-row input[type=range]:focus::-moz-range-thumb,
.datepicker--time-row input[type=range]:focus::-ms-thumb {
    background: var(--primary, #009688);
    border-color: var(--primary, #009688);
}
.datepicker--button {
    color: var(--primary, #009688);
}

/* Theme-aware SweetAlert2 defaults (confirm/cancel follow system primary/secondary).
   No !important so explicit confirmButtonColor (e.g. danger) still wins via inline style. */
.swal2-popup .swal2-styled.swal2-confirm {
    background-color: var(--primary, #009688);
}
.swal2-popup .swal2-styled.swal2-cancel {
    background-color: var(--secondary, #6c757d);
}
.swal2-popup .swal2-close:hover {
    background: var(--danger, #dc3545);
    color: #fff;
}
.swal2-progresssteps .swal2-progresscircle,
.swal2-progresssteps .swal2-progresscircle.swal2-activeprogressstep,
.swal2-progresssteps .swal2-progressline {
    background: var(--primary, #009688);
}

/* DataTables ColReorder drop marker (all lists — CDN + local CSS). */
div.DTCR_pointer,
.DTCR_pointer,
.dtcr-pointer {
    border-left: 2px solid var(--primary, #009688) !important;
    background-color: var(--primary, #009688) !important;
    width: 0 !important;
}
html[data-theme="dark"] div.DTCR_pointer,
html[data-theme="dark"] .DTCR_pointer,
html[data-theme="dark"] .dtcr-pointer,
html.dark div.DTCR_pointer {
    border-left-color: var(--primary, #009688) !important;
    background-color: var(--primary, #009688) !important;
}

/* CM shutdown "Downtime Already Running" popup: one card = facts on top, then what saving does */
.swal2-popup.cm-sd-swal .swal2-icon {
    /* Info, not a warning: ~70% size. transform keeps the 80px box, so the margins absorb the gap. */
    transform: scale(.7);
    margin: 8px auto 6px;
}
.swal2-popup.cm-sd-swal .swal2-title {
    font-size: 1.4em;
    line-height: 1.3;
}
.cm-sd-swal__card {
    max-width: 400px;
    margin: 4px auto 4px;
    border: 1px solid #e9edf5;
    border-radius: 10px;
    background: #f8f9fa;
    text-align: left;
}
.cm-sd-swal__facts {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 12px 16px;
}
.cm-sd-swal__fact {
    display: flex;
    align-items: center;
    gap: 14px;
}
.cm-sd-swal__fact-label {
    flex: 0 0 104px;
    color: var(--secondary, #6c757d);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .04em;
    text-transform: uppercase;
}
.cm-sd-swal__fact-value {
    color: #212529;
    font-size: 15px;
    white-space: nowrap;
}
.cm-sd-swal__cm {
    display: inline-block;
    padding: 2px 10px;
    border-radius: 999px;
    background: var(--primary, #009688);
    color: #fff;
    font-size: 13px;
    font-weight: 700;
    white-space: nowrap;
}
.cm-sd-swal__steps {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin: 0;
    padding: 12px 16px;
    list-style: none;
}
.cm-sd-swal__facts + .cm-sd-swal__steps {
    border-top: 1px solid #e9edf5;
}
/* Icon column + text column: every line starts at the same x, wrapped text stays under its own line */
.cm-sd-swal__step {
    display: grid;
    grid-template-columns: 20px 1fr;
    align-items: start;
    gap: 8px;
    color: #495057;
    font-size: 14px;
    line-height: 1.45;
}
.cm-sd-swal__step .fa {
    margin-top: 3px;
    color: var(--primary, #009688);
    text-align: center;
}
.cm-sd-swal__nowrap {
    font-weight: 700;
    white-space: nowrap;
}
[data-theme="dark"] .cm-sd-swal__card {
    border-color: #3a3a3a;
    background: #262626;
}
[data-theme="dark"] .cm-sd-swal__facts + .cm-sd-swal__steps {
    border-top-color: #3a3a3a;
}
[data-theme="dark"] .cm-sd-swal__fact-label {
    color: #c2c2c2;
}
[data-theme="dark"] .cm-sd-swal__fact-value,
[data-theme="dark"] .cm-sd-swal__step {
    color: #fff;
}

/* SweetAlert2 + Select2 / Bootstrap dropdown stacking (cache-busted via system_style.css?v=filemtime) */
.swal2-container {
    z-index: 100002 !important;
}

.swal2-container .select2-container,
.swal2-container .select2-container--open,
.swal2-container .select2-dropdown {
    z-index: 100010 !important;
}

/* Select2 dropdown on body while Swal is open (no dropdownParent) */
html.swal2-shown body>.select2-container.select2-container--open,
html.swal2-shown body>.select2-container,
html.swal2-shown .select2-dropdown {
    z-index: 100010 !important;
}

.swal2-container .dropdown-menu.show {
    z-index: 100010 !important;
}

html.swal2-shown #datepickers-container,
html.swal2-shown .datepickers-container {
    z-index: 100020 !important;
}

.swal2-popup {
    overflow: visible !important;
}

.swal2-container .swal2-content,
.swal2-container .swal2-html-container,
.swal2-container #swal2-content {
    overflow: visible !important;
}

/* Downtime-style meta cards (Corrective countermeasure timing, etc. G-- aligns with Assets_Detail / Asset_Downtime) */
.downtime-card {
    border: 1px solid rgba(0, 0, 0, 0.06);
    border-radius: 16px;
    -webkit-box-shadow: 0 6px 6px 0 rgba(0, 0, 0, 0.14), 0 1px 6px 0 rgba(0, 0, 0, 0.12), 6px 6px 8px -2px rgba(0, 0, 0, 0.2);
    box-shadow: 0 6px 6px 0 rgba(0, 0, 0, 0.14), 0 1px 6px 0 rgba(0, 0, 0, 0.12), 6px 6px 8px -2px rgba(0, 0, 0, 0.2);
    background: #fff;
    padding: 20px;
}

.downtime-card-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 12px;
    margin-bottom: 16px;
}

.downtime-kicker {
    text-transform: uppercase;
    letter-spacing: 0.08em;
    font-size: 11px;
    font-weight: 700;
    color: var(--secondary, #6c757d);
    margin-bottom: 4px;
}

.downtime-meta-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
    margin-bottom: 0;
}

.downtime-meta-item {
    background: #f8f9fb;
    border: 1px solid #edf0f5;
    border-radius: 12px;
    padding: 10px 12px;
}

.downtime-meta-item--full {
    grid-column: 1 / -1;
}

.downtime-meta-item span {
    display: block;
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--secondary, #6c757d);
    margin-bottom: 3px;
}

.downtime-meta-item strong {
    display: block;
    font-size: 13px;
    color: #212529;
    font-weight: 600;
    word-break: break-word;
}

/* Identity header strip (Assets_Detail, Location_Detail, BIM bucket) */
.asset-identity-header {
    display: flex;
    align-items: stretch;
    gap: 16px;
    flex-wrap: wrap;
}

.asset-identity-header>.asset-identity-main,
.staff-identity-header>.staff-identity-main,
.asset-identity-header>.sp-identity-head {
    flex: 1 1 auto;
    min-width: 0;
}

.asset-identity-header:has(> .asset-identity-side)>.asset-identity-main,
.staff-identity-header:has(> .asset-identity-side)>.staff-identity-main,
.asset-identity-header:has(> .asset-identity-side)>.sp-identity-head {
    max-width: 50%;
}

.asset-identity-header>.asset-identity-side,
.staff-identity-header>.asset-identity-side {
    display: flex;
    flex-wrap: nowrap;
    align-items: stretch;
    gap: 16px;
    flex: 1 1 30rem;
    min-width: min(100%, 30rem);
    max-width: 100%;
}

.asset-identity-header.is-identity-stacked>.asset-identity-main,
.asset-identity-header.is-identity-stacked>.sp-identity-head,
.staff-identity-header.is-identity-stacked>.staff-identity-main {
    max-width: 100%;
    flex: 1 1 100%;
    width: 100%;
}

.asset-identity-header.is-identity-stacked>.asset-identity-side,
.staff-identity-header.is-identity-stacked>.asset-identity-side {
    flex: 1 1 100%;
    min-width: 100%;
    width: 100%;
}

.asset-identity-main {
    display: flex;
    align-items: flex-start;
    gap: 14px;
    min-width: 0;
}

.asset-identity-icon {
    width: 42px;
    height: 42px;
    background: linear-gradient(135deg, var(--info, #17a2b8) 0%, var(--primary, #009688) 100%);
    border-radius: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1rem;
    color: #fff;
    flex-shrink: 0;
    box-shadow: 0 8px 18px rgba(var(--primary-rgb, 0, 150, 136), 0.2);
}

.asset-identity-title-block {
    flex: 1;
    min-width: 0;
}

.asset-identity-name {
    color: #212529;
    font-size: 1.45rem;
    font-weight: 700;
    margin: 0 0 8px 0;
    line-height: 1.25;
    white-space: normal;
    overflow-wrap: anywhere;
    word-break: break-word;
    max-width: 100%;
}

.asset-identity-badges {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    align-items: center;
    max-width: 100%;
    min-width: 0;
}

.asset-no-badge {
    background: rgba(var(--primary-rgb, 0, 150, 136), 0.08);
    color: var(--primary-back, #00695c);
    padding: 5px 12px;
    border-radius: 999px;
    font-size: 0.82rem;
    font-weight: 600;
    border: 1px solid rgba(var(--primary-rgb, 0, 150, 136), 0.18);
    transition: background 0.2s ease, transform 0.2s ease;
    user-select: none;
}

.asset-identity-badges .asset-no-badge {
    max-width: 100%;
    min-width: 0;
    display: inline-flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.35rem;
    white-space: normal;
    overflow-wrap: anywhere;
    word-break: break-word;
    line-height: 1.35;
}

.asset-no-badge[title] {
    cursor: default;
}

.asset-no-badge:hover {
    background: rgba(var(--primary-rgb, 0, 150, 136), 0.14);
    transform: translateY(-1px);
}

.badge-status {
    font-size: 0.78rem !important;
    border-radius: 999px;
}

.asset-identity-badges .badge-status {
    box-sizing: border-box;
    max-width: 100%;
    min-width: 0;
    white-space: normal;
    overflow-wrap: anywhere;
    word-break: break-word;
    line-height: 1.35;
    vertical-align: middle;
}

.asset-identity-fields.downtime-meta-grid.asset-identity-meta {
    flex: 1 1 auto;
    min-width: 0;
    margin-bottom: 0;
    border: none;
    background: transparent;
    padding: 0;
    overflow: visible;
    align-content: stretch;
}

.asset-identity-meta .downtime-meta-item span .fa {
    margin-right: 6px;
    opacity: 0.88;
}

.asset-identity-meta .downtime-meta-item strong {
    font-weight: 600;
}

@media (max-width: 767px) {

    .asset-identity-header,
    .staff-identity-header {
        flex-direction: column;
        align-items: stretch;
        gap: 14px;
        height: auto;
        overflow: visible;
    }

    .asset-identity-header:has(> .asset-identity-side)>.asset-identity-main,
    .asset-identity-header:has(> .asset-identity-side)>.sp-identity-head,
    .staff-identity-header:has(> .asset-identity-side)>.staff-identity-main,
    .asset-identity-header>.asset-identity-main,
    .asset-identity-header>.sp-identity-head,
    .staff-identity-header>.staff-identity-main,
    .asset-identity-header>.asset-identity-side,
    .staff-identity-header>.asset-identity-side {
        max-width: 100%;
        min-width: 0;
        width: 100%;
        flex: 1 1 auto;
    }

    .asset-identity-header>.asset-identity-side,
    .staff-identity-header>.asset-identity-side {
        display: flex;
        flex-wrap: wrap;
    }

    .asset-identity-header>.sp-identity-head {
        flex-direction: column;
        align-items: flex-start;
        justify-content: flex-start;
        gap: 8px;
    }

    .asset-identity-name {
        font-size: 1.15rem;
        line-height: 1.35;
    }

    .asset-identity-fields.downtime-meta-grid.asset-identity-meta {
        min-width: 0;
        width: 100%;
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 575px) {
    .downtime-meta-grid {
        grid-template-columns: 1fr;
    }
}

/* PM/CM Verify & Confirm G-- keep picture sidebar width when checklist content is wide */
:is(.pm-wo-layout-row, .cm-verify-header-img-row)>[class*="col-"] {
    min-width: 0;
}

:is(.pm-wo-layout-row, .cm-verify-header-img-row)>.pm-wo-pictures-col {
    flex-shrink: 0;
}

@media (min-width: 992px) {
    :is(.pm-wo-layout-row, .cm-verify-header-img-row) {
        flex-wrap: nowrap;
    }

    :is(.pm-wo-layout-row, .cm-verify-header-img-row)>.pm-wo-summary-col {
        flex: 0 0 33.333333%;
        max-width: 33.333333%;
    }

    :is(.pm-wo-layout-row, .cm-verify-header-img-row)>.pm-wo-main-col {
        flex: 0 0 41.666667%;
        max-width: 41.666667%;
        overflow-x: auto;
    }

    :is(.pm-wo-layout-row, .cm-verify-header-img-row)>.pm-wo-pictures-col {
        flex: 0 0 25%;
        max-width: 25%;
    }
}

@media (max-width: 991.98px) {
    :is(.pm-wo-layout-row, .cm-verify-header-img-row)>.pm-wo-pictures-col {
        flex: 0 0 100%;
        max-width: 100%;
    }
}

.wo-checklist-preview.checklist-card {
    max-width: 100%;
    overflow-x: auto;
}

.pm-wo-main-col .wo-checklist-preview.checklist-card .report-checklist-row-top {
    flex-wrap: wrap;
    align-items: flex-start;
}

.pm-wo-main-col .wo-checklist-preview.checklist-card .report-checklist-specific-asset {
    padding: 0.65rem 1rem 0;
    word-break: break-word;
    overflow-wrap: anywhere;
}

.pm-wo-main-col .wo-checklist-preview.checklist-card .report-checklist-text {
    flex: 1 1 0%;
    min-width: 0;
    overflow-wrap: anywhere;
    word-break: break-word;
}

.pm-wo-main-col .wo-checklist-preview.checklist-card .report-checklist-status {
    flex: 0 0 auto;
    max-width: 100%;
    margin-left: auto;
}

.uap-report-pictures-root {
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
}

.uap-report-pictures-root>.tile {
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
}

.uap-report-pictures-root .uap-gallery-tile {
    display: block;
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
    text-align: center;
}

.uap-report-pictures-root .uap-gallery-tile img {
    max-width: 100%;
    max-height: 300px;
    width: auto;
    height: auto;
    object-fit: contain;
}

.wo-substatus-allowed-performers small {
    display: block;
    font-size: 0.72rem;
    line-height: 1.25;
    text-align: center;
    word-break: break-word;
}

.wo-action-substatus-allowed-hint {
    font-size: 0.875rem;
    line-height: 1.45;
    text-align: center;
    word-break: break-word;
}

.wo-action-substatus-allowed-hint--banner {
    width: 100%;
    max-width: 100%;
    padding: 0 12px;
    margin-left: auto;
    margin-right: auto;
}

.wo-action-substatus-allowed-hint-card {
    text-align: left;
    background-color: #f4f6f8;
    border: 1px solid #dee2e6;
    border-radius: 8px;
    padding: 10px 12px;
    font-size: 0.8125rem;
    line-height: 1.45;
    color: #495057;
}

.wo-action-substatus-allowed-hint-title {
    font-size: 0.875rem;
    font-weight: 600;
    color: #2c3e50;
    margin-bottom: 8px;
    display: flex;
    align-items: center;
    gap: 6px;
}

.wo-action-substatus-allowed-hint-title .fa {
    color: var(--primary, #009688);
    font-size: 0.9rem;
}

.wo-action-substatus-allowed-hint-list {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.wo-action-substatus-allowed-hint-item {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 6px 8px;
    padding: 7px 10px;
    background: #fff;
    border: 1px solid #e9ecef;
    border-radius: 6px;
}

.wo-action-substatus-allowed-hint-stage {
    font-size: 0.75rem;
    font-weight: 600;
    padding: 0.28em 0.55em;
    background-color: rgba(0, 150, 136, 0.12);
    color: var(--primary, #009688);
    border: 1px solid rgba(0, 150, 136, 0.25);
}

.wo-action-substatus-allowed-hint-step {
    font-weight: 600;
    font-size: 0.8125rem;
    color: #343a40;
}

.wo-action-substatus-allowed-hint-performers {
    flex: 1 1 100%;
    font-size: 0.8125rem;
    color: #495057;
}

.wo-action-substatus-allowed-hint-performers-lbl {
    font-weight: 600;
    color: #6c757d;
}

[data-theme="dark"] .wo-action-substatus-allowed-hint-card {
    background-color: var(--surface, #262626);
    border-color: var(--default-line, #404040);
    color: var(--main-text-color, #e0e0e0);
}

[data-theme="dark"] .wo-action-substatus-allowed-hint-title {
    color: var(--main-text-color, #fff);
}

[data-theme="dark"] .wo-action-substatus-allowed-hint-item {
    background-color: #2d2d2d;
    border-color: var(--default-line, #404040);
}

[data-theme="dark"] .wo-action-substatus-allowed-hint-step {
    color: var(--main-text-color, #fff);
}

[data-theme="dark"] .wo-action-substatus-allowed-hint-performers {
    color: var(--main-text-color, #e0e0e0);
}

[data-theme="dark"] .wo-action-substatus-allowed-hint-performers-lbl {
    color: #c2c2c2;
}

[data-theme="dark"] .wo-action-substatus-allowed-hint-stage {
    background-color: rgba(0, 150, 136, 0.2);
    border-color: rgba(0, 150, 136, 0.45);
    color: #4db6ac;
}

.wo-substatus-timeline-viewer-blocked {
    border-radius: 8px;
    font-size: 0.85rem;
}

[data-theme="dark"] .wo-substatus-timeline .badge-light {
    background-color: var(--surface, #2a2a2a);
    border-color: var(--default-line, #404040) !important;
    color: var(--main-text-color, #e0e0e0) !important;
}

[data-theme="dark"] .wo-substatus-allowed-performers.text-muted small {
    color: var(--main-text-color, #e0e0e0);
    opacity: 0.75;
}

[data-theme="dark"] .wo-substatus-timeline-viewer-blocked {
    background-color: rgba(255, 183, 77, 0.12);
    border-color: rgba(255, 183, 77, 0.35);
    color: var(--main-text-color, #e0e0e0);
}

.pm-wo-pictures-col .focus-img,
.uap-report-pictures-root .uap-gallery-tile img.focus-img,
.uap-report-pictures-root>.tile>img.focus-img {
    width: 100% !important;
    max-width: 100%;
    height: auto !important;
    max-height: 280px;
    object-fit: contain !important;
    margin-bottom: 0;
}

[data-theme="dark"] .downtime-card {
    background-color: #333;
    border-color: #444;
    -webkit-box-shadow: 0 6px 6px 0 rgba(0, 0, 0, 0.14), 0 1px 6px 0 rgba(0, 0, 0, 0.12), 6px 6px 8px -2px rgba(0, 0, 0, 0.2);
    box-shadow: 0 6px 6px 0 rgba(0, 0, 0, 0.14), 0 1px 6px 0 rgba(0, 0, 0, 0.12), 6px 6px 8px -2px rgba(0, 0, 0, 0.2);
}

[data-theme="dark"] .downtime-kicker,
[data-theme="dark"] .downtime-meta-item span {
    color: #94a3b8;
}

[data-theme="dark"] .downtime-card .text-muted,
[data-theme="dark"] .downtime-meta-item strong {
    color: #e5e7eb;
}

[data-theme="dark"] .downtime-meta-item {
    background-color: #333;
    border-color: #444;
}

/* Asset Detail › Replace Or Maintain advice banner (asset_replacement_lib.php) */
.asset-replace-advice {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 12px 14px;
    border-radius: 12px;
    border-left: 4px solid #6c757d;
    background: #f8f9fb;
}
.asset-replace-advice > .fa {
    font-size: 20px;
    line-height: 1.2;
    color: #6c757d;
}
.asset-replace-advice--replace { border-left-color: #dc3545; background: rgba(220, 53, 69, 0.08); }
.asset-replace-advice--replace > .fa { color: #dc3545; }
.asset-replace-advice--plan { border-left-color: #ffc107; background: rgba(255, 193, 7, 0.12); }
.asset-replace-advice--plan > .fa { color: #d39e00; }
.asset-replace-advice--monitor,
.asset-replace-advice--fix { border-left-color: #17a2b8; background: rgba(23, 162, 184, 0.08); }
.asset-replace-advice--monitor > .fa,
.asset-replace-advice--fix > .fa { color: #17a2b8; }
.asset-replace-advice--keep { border-left-color: var(--primary, #009688); background: rgba(var(--primary-rgb, 0, 150, 136), 0.08); }
.asset-replace-advice--keep > .fa { color: var(--primary, #009688); }

[data-theme="dark"] .asset-replace-advice { background: #262626; color: #e5e7eb; }
[data-theme="dark"] .asset-replace-advice--replace { background: rgba(220, 53, 69, 0.15); }
[data-theme="dark"] .asset-replace-advice--plan { background: rgba(255, 193, 7, 0.12); }
[data-theme="dark"] .asset-replace-advice--plan > .fa { color: #ffc107; }
[data-theme="dark"] .asset-replace-advice--monitor,
[data-theme="dark"] .asset-replace-advice--fix { background: rgba(23, 162, 184, 0.15); }
[data-theme="dark"] .asset-replace-advice--keep { background: rgba(var(--primary-rgb, 0, 150, 136), 0.15); }

[data-theme="dark"] .asset-identity-name {
    color: #f1f5f9;
}

[data-theme="dark"] .asset-no-badge {
    background: rgba(var(--primary-rgb, 0, 150, 136), 0.15);
    color: var(--primary-hover, #5eead4);
    border-color: rgba(var(--primary-rgb, 0, 150, 136), 0.25);
}

[data-theme="dark"] .asset-no-badge:hover {
    background: rgba(var(--primary-rgb, 0, 150, 136), 0.24);
}

/* ==================== LICENSE DETAIL / EDIT SHARED HELPERS ==================== */
.lic-upload-link-btn {
    margin-top: 7px;
    font-size: .75rem;
    color: #0ea5a4;
    font-weight: 600;
    text-decoration: none;
}

.lic-upload-link-btn:hover {
    color: #0f766e;
    text-decoration: underline;
}

.lic-updates-scroll {
    max-height: 360px;
    overflow-y: auto;
    padding-right: 4px;
}

[data-theme="dark"] .lic-upload-link-btn {
    color: #2dd4bf;
}

.system-logs__page-size {
    width: auto;
    min-width: 4.5rem;
    display: inline-block;
}

.system-logs__field-clear-wrap {
    position: relative;
}

.system-logs__field-clear-wrap>.form-control {
    padding-right: 2.15rem;
}

.system-logs__field-clear {
    position: absolute;
    right: 0.4rem;
    top: 50%;
    transform: translateY(-50%);
    border: none;
    background: transparent;
    color: var(--secondary, #6c757d);
    padding: 0.2rem 0.35rem;
    line-height: 1;
    cursor: pointer;
    z-index: 2;
}

.system-logs__field-clear:hover,
.system-logs__field-clear:focus {
    color: #37474f;
    outline: none;
}

[data-theme="dark"] .system-logs__field-clear {
    color: #94a3b8;
}

[data-theme="dark"] .system-logs__field-clear:hover,
[data-theme="dark"] .system-logs__field-clear:focus {
    color: #e5e7eb;
}

.system-logs__list {
    display: flex;
    flex-direction: column;
    gap: 0.55rem;
}

.system-logs__summary .login-summary-tile.login-summary-tile--collapsed {
    display: none !important;
}

.system-logs__summary .login-summary-tile.tile,
.activity-log-summary .login-summary-tile.tile {
    position: relative;
    overflow: visible;
}

.system-logs__summary .login-summary,
.activity-log-summary .login-summary {
    background: transparent;
    border: none;
    box-shadow: none;
    padding: 0;
}

.activity-log-summary .login-summary-page-head--summary {
    cursor: default;
    user-select: auto;
}

/* Activity / Message summary G-- keep KPI tiles in a 2+-2 grid (match reference cards) */
.activity-log-summary .activity-summary__kpi-grid,
.activity-log-summary .login-summary__kpi-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

@media (min-width: 992px) {

    .activity-log-summary .activity-summary__kpi-grid,
    .activity-log-summary .login-summary__kpi-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

.activity-log-summary .login-summary-page-head--in-tile {
    margin: 0 0 0.75rem;
    padding: 0 0 0.65rem;
    border-bottom: 1px solid rgba(0, 0, 0, 0.06);
}

[data-theme="dark"] .activity-log-summary .login-summary-page-head--in-tile {
    border-bottom-color: rgba(255, 255, 255, 0.08);
}

.activity-summary__doughnut-panel {
    height: 180px;
    margin-bottom: 0.75rem;
}

.activity-summary__module-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.4rem;
}

.activity-summary__module-list--extra {
    margin-top: 0.4rem;
}

.activity-summary__module-more {
    margin-top: 0.35rem;
}

.activity-summary__module-more-toggle {
    list-style: none;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0.2rem 0.15rem;
    font-size: 0.72rem;
    font-weight: 600;
    color: var(--primary, #009688);
    user-select: none;
}

.activity-summary__module-more-toggle::-webkit-details-marker {
    display: none;
}

.activity-summary__module-more-toggle::before {
    content: '\f078';
    font-family: FontAwesome;
    font-size: 0.65rem;
    transition: transform 0.15s ease;
}

.activity-summary__module-more[open]>.activity-summary__module-more-toggle::before {
    transform: rotate(180deg);
}

.activity-summary__module-more-label--less {
    display: none;
}

.activity-summary__module-more[open] .activity-summary__module-more-label--more {
    display: none;
}

.activity-summary__module-more[open] .activity-summary__module-more-label--less {
    display: inline;
}

[data-theme="dark"] .activity-summary__module-more-toggle {
    color: var(--primary-hover, #4db6ac);
}

.activity-summary__module-row {
    display: flex;
    align-items: center;
    gap: 0.45rem;
    padding: 0.4rem 0.5rem;
    border-radius: 10px;
    border: 1px solid rgba(15, 23, 42, 0.08);
    background: rgba(248, 250, 252, 0.85);
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
    min-width: 0;
}

.activity-summary__module-row:hover {
    border-color: rgba(var(--primary-rgb, 0, 150, 136), 0.25);
    box-shadow: 0 2px 8px rgba(15, 23, 42, 0.06);
}

.activity-summary__module-icon {
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.65rem;
    height: 1.65rem;
    border-radius: 50%;
    font-size: 0.72rem;
    color: #fff;
}

.activity-summary__module-icon--success {
    background: linear-gradient(135deg, #22c55e, #16a34a);
}

.activity-summary__module-icon--warning {
    background: linear-gradient(135deg, #f59e0b, #d97706);
}

.activity-summary__module-icon--info {
    background: linear-gradient(135deg, #0ea5e9, #0284c7);
}

.activity-summary__module-icon--primary {
    background: linear-gradient(135deg, var(--primary, #009688), var(--primary-back, #00695c));
}

.activity-summary__module-icon--secondary {
    background: linear-gradient(135deg, #64748b, #475569);
}

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

.activity-summary__module-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.35rem;
    margin-bottom: 0.25rem;
}

.activity-summary__module-name {
    font-size: 0.75rem;
    font-weight: 600;
    color: #0f172a;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.activity-summary__module-stats {
    display: inline-flex;
    align-items: baseline;
    gap: 0.25rem;
    flex-shrink: 0;
}

.activity-summary__module-count {
    font-size: 0.8125rem;
    font-weight: 700;
    color: var(--primary, #009688);
}

.activity-summary__module-pct {
    font-size: 0.625rem;
    font-weight: 600;
    color: #64748b;
}

.activity-summary__module-bar {
    height: 4px;
    border-radius: 999px;
    background: rgba(15, 23, 42, 0.08);
    overflow: hidden;
}

.activity-summary__module-bar-fill {
    display: block;
    height: 100%;
    border-radius: inherit;
    transition: width 0.35s ease;
}

.activity-summary__module-bar--success .activity-summary__module-bar-fill {
    background: linear-gradient(90deg, #22c55e, #16a34a);
}

.activity-summary__module-bar--warning .activity-summary__module-bar-fill {
    background: linear-gradient(90deg, #f59e0b, #d97706);
}

.activity-summary__module-bar--info .activity-summary__module-bar-fill {
    background: linear-gradient(90deg, #0ea5e9, #0284c7);
}

.activity-summary__module-bar--primary .activity-summary__module-bar-fill {
    background: linear-gradient(90deg, var(--primary, #009688), var(--primary-back, #00695c));
}

.activity-summary__module-bar--secondary .activity-summary__module-bar-fill {
    background: linear-gradient(90deg, #64748b, #475569);
}

/* Message summary KPIs: Total + This week */
.msg-telegram-summary__kpi-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.msg-telegram-summary__kpi-grid .login-summary__kpi:last-child {
    grid-column: auto;
}

@media (min-width: 992px) {
    .activity-log-summary .msg-telegram-summary__kpi-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

/* Combined Unread + Read as one status block */
.msg-telegram-summary__status-combined {
    display: flex;
    flex-direction: column;
    gap: 0.45rem;
    padding: 0.55rem 0.65rem;
    border-radius: 10px;
    border: 1px solid rgba(15, 23, 42, 0.08);
    background: rgba(248, 250, 252, 0.85);
}

.msg-telegram-summary__status-meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 0.35rem 0.75rem;
}

.msg-telegram-summary__status-chip {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    font-size: 0.75rem;
    font-weight: 600;
    color: #0f172a;
    min-width: 0;
}

.msg-telegram-summary__status-chip .fa {
    font-size: 0.8rem;
}

.msg-telegram-summary__status-chip--unread .fa {
    color: #d97706;
}

.msg-telegram-summary__status-chip--read .fa {
    color: #16a34a;
}

.msg-telegram-summary__status-chip strong {
    font-weight: 700;
    color: var(--primary, #009688);
}

.msg-telegram-summary__status-pct {
    font-size: 0.6875rem;
    font-weight: 600;
    color: #64748b;
}

.msg-telegram-summary__status-bar {
    display: flex;
    width: 100%;
    height: 8px;
    border-radius: 999px;
    overflow: hidden;
    background: rgba(15, 23, 42, 0.08);
}

.msg-telegram-summary__status-fill {
    display: block;
    height: 100%;
    min-width: 0;
}

.msg-telegram-summary__status-fill--unread {
    background: linear-gradient(90deg, #f59e0b, #d97706);
}

.msg-telegram-summary__status-fill--read {
    background: linear-gradient(90deg, #22c55e, #16a34a);
}

[data-theme="dark"] .msg-telegram-summary__status-combined {
    background: rgba(35, 42, 59, 0.65);
    border-color: rgba(255, 255, 255, 0.08);
}

[data-theme="dark"] .msg-telegram-summary__status-chip {
    color: #f1f5f9;
}

[data-theme="dark"] .msg-telegram-summary__status-bar {
    background: rgba(255, 255, 255, 0.08);
}

/* legacy class kept for older cached HTML */
.msg-telegram-summary__status-list {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.4rem;
}

@media (max-width: 360px) {

    .activity-summary__module-list,
    .msg-telegram-summary__status-list {
        grid-template-columns: 1fr;
    }
}

[data-theme="dark"] .activity-summary__module-row {
    background: rgba(35, 42, 59, 0.65);
    border-color: rgba(255, 255, 255, 0.08);
}

[data-theme="dark"] .activity-summary__module-row:hover {
    border-color: rgba(38, 166, 154, 0.35);
}

[data-theme="dark"] .activity-summary__module-name {
    color: #f1f5f9;
}

[data-theme="dark"] .activity-summary__module-count {
    color: #26a69a;
}

[data-theme="dark"] .activity-summary__module-pct {
    color: #94a3b8;
}

[data-theme="dark"] .activity-summary__module-bar {
    background: rgba(255, 255, 255, 0.1);
}

.system-log-card {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    row-gap: 0;
    align-items: start;
    background: #fff;
    border: 1px solid rgba(0, 0, 0, 0.08);
    border-radius: 16px;
    padding: 0.6rem 1.1rem;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04);
    transition: box-shadow 0.15s ease, border-color 0.15s ease;
}

.system-log-card:hover {
    border-color: rgba(var(--primary-rgb, 0, 150, 136), 0.35);
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.07);
}

.system-log-card__head {
    display: block;
    grid-column: 1;
    grid-row: 1;
    min-width: 0;
}

.system-log-card__avatar {
    width: 22px;
    height: 22px;
    border-radius: 50%;
    object-fit: cover;
    border: 1px solid #f0f0f0;
    flex-shrink: 0;
}

.system-log-card__identity {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 0.75rem;
    flex: 1;
    min-width: 0;
}

.system-log-card__meta {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
    min-width: 0;
}

.system-log-card__who {
    flex: 1;
    min-width: 0;
    text-align: left;
    overflow-wrap: break-word;
}

.system-log-card--stack-datetime .system-log-card__meta {
    flex-direction: column;
    align-items: flex-end;
    gap: 0.2rem;
}

.system-log-card--stack-datetime .system-log-card__when {
    order: -1;
    width: 100%;
}

.system-log-card--stack-datetime .system-log-card__identity {
    flex: none;
    width: 100%;
    align-self: stretch;
    align-items: center;
}

.system-log-card--stack-datetime .system-log-card__who {
    flex: 1;
    min-width: 0;
    word-break: break-word;
}

.system-log-card__name {
    display: block;
    font-weight: 500;
    font-size: 0.6875rem;
    line-height: 1.35;
    color: #546e7a;
}

.system-log-card__when {
    white-space: nowrap;
    flex-shrink: 0;
    text-align: right;
    font-size: 0.6875rem;
    line-height: 1.35;
    font-weight: 500;
    color: var(--secondary, #6c757d);
}

.system-log-card__when time {
    border-bottom: 1px dotted rgba(108, 117, 125, 0.5);
    cursor: default;
}

.system-log-card__body {
    grid-column: 1;
    grid-row: 2;
    margin-top: -0.55rem;
    font-size: 1rem;
    line-height: 1.75;
    color: #37474f;
    word-break: break-word;
    padding-left: 0;
}

@media (min-width: 576px) {
    .system-log-card__body {
        padding-left: calc(22px + 0.75rem);
    }
}

@media (max-width: 575px) {
    .system-log-card {
        row-gap: 0.35rem;
    }

    .system-log-card__body {
        margin-top: 0;
        padding-top: 0.15rem;
    }
}

.system-log-card__subtitle {
    display: block;
    font-size: 0.625rem;
    font-weight: 400;
    color: #78909c;
    line-height: 1.3;
    margin-top: 0.1rem;
}

.system-logs__gap-banner {
    font-size: 0.875rem;
    border-color: rgba(255, 193, 7, 0.45);
    background: rgba(255, 243, 205, 0.92);
    color: #856404;
    padding-top: 0.45rem;
    padding-bottom: 0.45rem;
}

.system-logs__gap-banner-toggle {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
    width: 100%;
    margin: 0;
    padding: 0;
    border: 0;
    background: transparent;
    color: inherit;
    text-align: left;
    cursor: pointer;
    font: inherit;
}

.system-logs__gap-banner-toggle:hover,
.system-logs__gap-banner-toggle:focus {
    color: inherit;
    outline: none;
}

.system-logs__gap-banner-toggle:focus-visible {
    outline: 2px solid rgba(133, 100, 4, 0.45);
    outline-offset: 2px;
}

.system-logs__gap-banner-head {
    font-weight: 600;
    flex: 1 1 auto;
    min-width: 0;
}

.system-logs__gap-banner-chevron {
    flex: 0 0 auto;
    opacity: 0.75;
    transition: transform 0.15s ease;
}

.system-logs__gap-banner--open .system-logs__gap-banner-chevron {
    transform: rotate(180deg);
}

.system-logs__gap-banner-details {
    margin-top: 0.4rem;
    padding-top: 0.35rem;
    border-top: 1px dashed rgba(133, 100, 4, 0.28);
}

.system-logs__gap-banner-list {
    margin: 0;
    padding-left: 1.15rem;
    max-height: 9.5rem;
    overflow-y: auto;
}

.system-logs__gap-banner-list>li {
    margin: 0.1rem 0;
    line-height: 1.35;
}

.system-logs__gap-banner-more {
    margin-top: 0.25rem;
    font-size: 0.8rem;
    opacity: 0.85;
}

.system-logs__gap-divider {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin: 0.45rem 0;
    color: #856404;
    font-size: 0.75rem;
    font-weight: 600;
}

.system-logs__gap-divider-line {
    flex: 1 1 auto;
    height: 0;
    border-top: 1px dashed rgba(133, 100, 4, 0.45);
}

.system-logs__gap-divider-badge {
    flex: 0 1 auto;
    white-space: normal;
    text-align: center;
    max-width: min(100%, 28rem);
    padding: 0.15rem 0.55rem;
    border-radius: 999px;
    background: rgba(255, 243, 205, 0.95);
    border: 1px solid rgba(255, 193, 7, 0.4);
}

.system-logs__gap-row>td {
    padding: 0.35rem 0.5rem !important;
    background: transparent !important;
    border-top: none !important;
}

[data-theme="dark"] .system-logs__gap-banner.alert-warning,
[data-theme="dark"] .system-logs__gap-banner {
    background: rgba(58, 50, 24, 0.92);
    border-color: rgba(240, 215, 140, 0.35);
    color: #f0d78c;
}

[data-theme="dark"] .system-logs__gap-banner-toggle:focus-visible {
    outline-color: rgba(240, 215, 140, 0.55);
}

[data-theme="dark"] .system-logs__gap-banner-details {
    border-top-color: rgba(240, 215, 140, 0.28);
}

[data-theme="dark"] .system-logs__gap-divider {
    color: #f0d78c;
}

[data-theme="dark"] .system-logs__gap-divider-line {
    border-top-color: rgba(240, 215, 140, 0.4);
}

[data-theme="dark"] .system-logs__gap-divider-badge {
    background: rgba(58, 50, 24, 0.95);
    border-color: rgba(240, 215, 140, 0.4);
    color: #f0d78c;
}

.system-log-card__link {
    display: block;
    text-decoration: none;
    color: inherit;
    cursor: pointer;
}

.system-log-card__link:hover,
.system-log-card__link:focus {
    text-decoration: none;
    color: inherit;
}

.system-log-card__link .system-log-card:hover {
    border-color: rgba(var(--primary-rgb, 0, 150, 136), 0.35);
}

/* Access Control - user cards (Admin / Access Control) */
.access-control-page .nav-tabs {
    margin-bottom: 1rem;
}

.access-control-users .system-logs__list {
    gap: 0.85rem;
}

.access-control-users .acu-filters .select2-container {
    width: 100% !important;
}

/* Toolbar G-- same resting height as form-control-sm (native + Select2 multi) */
.access-control-users .acu-filters .form-control-sm {
    height: calc(1.6484375rem + 4px);
}

.access-control-users .acu-filters select.acu-filter-select+.select2-container--default .select2-selection--multiple {
    min-height: calc(1.6484375rem + 4px);
}

.access-control-users .acu-filters select.acu-filter-select+.select2-container--default .select2-selection--multiple .select2-selection__rendered {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    padding: 0 0.5rem;
    min-height: calc(1.6484375rem + 4px);
}

.access-control-users .acu-filters select.acu-filter-select+.select2-container--default .select2-selection--multiple .select2-search--inline .select2-search__field {
    margin-top: 0;
    font-size: 0.765625rem;
    line-height: 1.5;
    height: calc(1.6484375rem);
}

.access-control-users .acu-filters select.acu-filter-select+.select2-container--default .select2-selection--multiple .select2-selection__placeholder {
    font-size: 0.765625rem;
    line-height: calc(1.6484375rem + 4px);
    margin: 0;
}

.access-control-users .acu-filter-option {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
}

.access-control-users .acu-filter-option__stack {
    width: 1.5em;
    line-height: 1.5em;
    font-size: 0.85em;
}

.access-control-users .acu-filter-option__label {
    line-height: 1.3;
}

.access-control-users .select2-selection--multiple .select2-selection__choice {
    font-size: 0.8125rem;
}

/* Module filter — selected chips: green badge + compact icon (theme success tokens, not primary/teal) */
.access-control-users select.acu-filter-select--module+.select2-container--default .select2-selection--multiple .select2-selection__rendered {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
}

.access-control-users select.acu-filter-select--module+.select2-container--default .select2-selection--multiple .select2-selection__choice {
    display: inline-flex !important;
    align-items: center;
    float: none !important;
    margin: 4px 6px 3px 0;
    padding: 0.15rem 0.45rem 0.15rem 0.3rem !important;
    background-color: var(--success-light, #c3e6cb) !important;
    color: var(--alert-success, #155724) !important;
    border: 1px solid var(--success-hover, #b1dfbb) !important;
    border-radius: 999px !important;
    font-size: 0.75rem;
    font-weight: 600;
    line-height: 1.25;
}

.access-control-users select.acu-filter-select--module+.select2-container--default .select2-selection--multiple .select2-selection__choice__remove {
    color: var(--success-back, #1e7e34) !important;
    opacity: 0.7;
    margin-right: 0.25rem;
    font-weight: 700;
}

.access-control-users select.acu-filter-select--module+.select2-container--default .select2-selection--multiple .select2-selection__choice__remove:hover {
    color: var(--danger, #dc3545) !important;
    opacity: 1;
}

.access-control-users select.acu-filter-select--module+.select2-container--default .select2-selection--multiple .acu-filter-choice {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
}

.access-control-users select.acu-filter-select--module+.select2-container--default .select2-selection--multiple .acu-filter-choice__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.2rem;
    height: 1.2rem;
    flex-shrink: 0;
    border-radius: 50%;
    background: rgba(var(--success-rgb, 40, 167, 69), 0.14);
    color: var(--alert-success, #155724);
    font-size: 0.65rem;
    line-height: 1;
}

.access-control-users select.acu-filter-select--module+.select2-container--default .select2-selection--multiple .acu-filter-choice__icon .fa {
    line-height: 1;
}

.access-control-users select.acu-filter-select--module+.select2-container--default .select2-selection--multiple .acu-filter-choice__label {
    line-height: 1.25;
}

.acu-card {
    border-radius: 16px;
    border: 1px solid rgba(0, 0, 0, 0.08);
    background: #fff;
    overflow: hidden;
    transition: box-shadow 0.18s ease, border-color 0.18s ease, transform 0.18s ease;
}

.acu-card__head {
    display: flex;
    align-items: flex-start;
    gap: 0.85rem;
    padding: 1rem 1.1rem 0.85rem;
    background: linear-gradient(135deg, rgba(var(--primary-rgb, 0, 150, 136), 0.07) 0%, rgba(255, 255, 255, 0) 85%);
    border-bottom: 1px solid rgba(0, 0, 0, 0.05);
}

.acu-card__head-link {
    display: flex;
    align-items: flex-start;
    gap: 0.85rem;
    color: inherit;
    text-decoration: none;
    transition: background 0.18s ease;
}

.acu-card__head-link:hover,
.acu-card__head-link:focus {
    color: inherit;
    text-decoration: none;
    background: linear-gradient(135deg, rgba(var(--primary-rgb, 0, 150, 136), 0.12) 0%, rgba(255, 255, 255, 0) 85%);
}

.acu-card:has(.acu-card__head-link:hover) {
    border-color: rgba(var(--primary-rgb, 0, 150, 136), 0.35);
    box-shadow: 0 6px 18px rgba(var(--primary-rgb, 0, 150, 136), 0.1);
}

.acu-card--selected {
    border-color: rgba(var(--primary-rgb, 0, 150, 136), 0.55);
    box-shadow: 0 0 0 2px rgba(var(--primary-rgb, 0, 150, 136), 0.15);
}

.acu-card--selected .acu-card__head {
    background: linear-gradient(135deg, rgba(var(--primary-rgb, 0, 150, 136), 0.1) 0%, rgba(255, 255, 255, 0) 85%);
}

.acu-card__select {
    flex-shrink: 0;
    margin: 0.15rem 0 0;
    padding: 0;
    cursor: pointer;
}

.acu-card__select .label-text {
    margin: 0;
}

.acu-card__avatar {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    object-fit: cover;
    border: 2px solid #fff;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
    flex-shrink: 0;
}

.acu-card__avatar--icon {
    display: flex;
    align-items: center;
    justify-content: center;
    object-fit: unset;
    background: #e8edf2;
    color: #5a6a7a;
    font-size: 18px;
}

.acu-card__identity {
    flex: 1;
    min-width: 0;
}

.acu-card__nickname {
    margin: 0;
    font-size: 1rem;
    font-weight: 700;
    line-height: 1.25;
    color: #263238;
}

.acu-card__fullname {
    margin: 0.15rem 0 0;
    font-size: 0.8125rem;
    color: #607d8b;
}

.acu-card__meta {
    display: flex;
    flex-wrap: wrap;
    gap: 0.35rem;
    margin-top: 0.45rem;
}

.acu-meta-pill {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    font-size: 0.6875rem;
    line-height: 1.3;
    padding: 0.2rem 0.55rem;
    border-radius: 8px;
    background: rgba(var(--primary-rgb, 0, 150, 136), 0.1);
    border: 1px solid rgba(var(--primary-rgb, 0, 150, 136), 0.22);
    color: var(--primary-back, #00695c);
}

.acu-meta-pill .fa {
    color: var(--primary, #009688);
    opacity: 0.9;
}

.acu-card__chevron {
    color: #90a4ae;
    font-size: 1.25rem;
    line-height: 1;
    padding-top: 0.35rem;
}

.acu-card__body {
    padding: 0.85rem 1.1rem 1.1rem;
}

.acu-card__section+.acu-card__section {
    margin-top: 0.85rem;
    padding-top: 0.75rem;
    border-top: 1px dashed rgba(0, 0, 0, 0.08);
}

.acu-card__section-head {
    margin-bottom: 0.4rem;
}

.acu-card__section-title {
    font-size: 0.6875rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: #90a4ae;
}

.acu-modules,
.acu-sites {
    display: flex;
    flex-wrap: wrap;
    gap: 0.2rem 0.3rem;
    align-items: center;
}

.acu-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.2rem;
    padding: 0.1rem 0.38rem;
    font-size: 0.6875rem;
    line-height: 1.25;
    font-weight: 500;
    border-radius: 999px;
    border: 1px solid transparent;
    white-space: nowrap;
    max-width: 100%;
}

.acu-badge .fa {
    font-size: 0.625rem;
    opacity: 0.9;
}

.acu-badge__label {
    font-weight: 500;
}

.acu-badge__suffix {
    font-size: 0.625rem;
    font-weight: 600;
    opacity: 0.92;
}

.acu-badge__suffix::before {
    content: ':';
    margin-right: 0.15rem;
    font-weight: 400;
    opacity: 0.65;
}

.acu-badge--success {
    color: var(--alert-success, #155724);
    background: var(--success-light, #c3e6cb);
    border-color: var(--success-hover, #b1dfbb);
}

.acu-badge--info {
    color: var(--alert-info, #0c5460);
    background: var(--info-light, #bee5eb);
    border-color: var(--info-hover, #abdde5);
}

.acu-badge--danger {
    color: var(--alert-danger, #721c24);
    background: var(--danger-light, #f5c6cb);
    border-color: var(--danger-hover, #f1b0b7);
}

.acu-badge--warning {
    color: var(--alert-warning, #856404);
    background: var(--warning-light, #ffeeba);
    border-color: var(--warning-hover, #ffe8a1);
}

.acu-badge--secondary {
    color: var(--secondary-back, #545b62);
    background: var(--secondary-light, #d6d8db);
    border-color: var(--secondary-hover, #c8cbcf);
}

.acu-badge--primary {
    color: var(--alert-primary, #004e47);
    background: var(--primary-light, #b8e2de);
    border-color: var(--primary-hover, #a6dbd6);
}

.acu-badge--site {
    font-size: 0.625rem;
    padding: 0.08rem 0.35rem;
    border-style: dashed;
}

.acu-badge--more {
    font-style: italic;
    opacity: 0.88;
}

.acu-card--no-access {
    border-color: rgba(var(--warning-rgb, 255, 193, 7), 0.55);
}

.acu-card__no-access.alert {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.35rem 0.5rem;
    margin: 0;
    border-radius: 8px;
    border-width: 1px;
    font-size: 0.6875rem;
    line-height: 1.3;
    color: var(--alert-warning, #856404);
    background-color: var(--warning-light, #ffeeba);
    border-color: var(--warning-hover, #ffe8a1);
}

.acu-card__no-access-icon {
    flex-shrink: 0;
    font-size: 0.75rem;
    color: var(--warning-back, #d39e00);
}

.acu-card__no-access-text {
    font-weight: 600;
}

@media (max-width: 575px) {
    .acu-card__head {
        padding: 0.85rem 0.85rem 0.7rem;
    }

    .acu-card__body {
        padding: 0.7rem 0.85rem 0.85rem;
    }
}

[data-theme="dark"] .acu-card {
    background: #2a2a2a;
    border-color: rgba(255, 255, 255, 0.08);
}

[data-theme="dark"] .acu-card--no-access {
    border-color: rgba(var(--warning-rgb, 255, 193, 7), 0.5);
}

[data-theme="dark"] .acu-card--selected {
    border-color: rgba(var(--primary-rgb, 0, 150, 136), 0.55);
    box-shadow: 0 0 0 2px rgba(var(--primary-rgb, 0, 150, 136), 0.2);
}

[data-theme="dark"] .acu-card--selected .acu-card__head {
    background: linear-gradient(135deg, rgba(var(--primary-rgb, 0, 150, 136), 0.12) 0%, transparent 75%);
}

[data-theme="dark"] .acu-card__head {
    background: linear-gradient(135deg, rgba(var(--primary-rgb, 0, 150, 136), 0.15) 0%, transparent 75%);
    border-bottom-color: rgba(255, 255, 255, 0.06);
}

[data-theme="dark"] .acu-card__nickname {
    color: #eceff1;
}

[data-theme="dark"] .acu-card__fullname {
    color: #90a4ae;
}

[data-theme="dark"] .acu-meta-pill {
    background: rgba(var(--primary-rgb, 0, 150, 136), 0.18);
    border-color: rgba(var(--primary-rgb, 0, 150, 136), 0.35);
    color: var(--primary-light, #b8e2de);
}

[data-theme="dark"] .acu-badge--success {
    background: rgba(var(--success-rgb, 40, 167, 69), 0.22);
    border-color: rgba(var(--success-rgb, 40, 167, 69), 0.45);
    color: var(--success-light, #c3e6cb);
}

[data-theme="dark"] .acu-badge--info {
    background: rgba(var(--info-rgb, 23, 162, 184), 0.22);
    border-color: rgba(var(--info-rgb, 23, 162, 184), 0.45);
    color: var(--info-light, #bee5eb);
}

[data-theme="dark"] .acu-badge--danger {
    background: rgba(var(--danger-rgb, 220, 53, 69), 0.22);
    border-color: rgba(var(--danger-rgb, 220, 53, 69), 0.45);
    color: var(--danger-light, #f5c6cb);
}

[data-theme="dark"] .acu-badge--warning {
    background: rgba(var(--warning-rgb, 255, 193, 7), 0.22);
    border-color: rgba(var(--warning-rgb, 255, 193, 7), 0.45);
    color: var(--warning-light, #ffeeba);
}

[data-theme="dark"] .acu-badge--secondary {
    background: rgba(var(--secondary-rgb, 108, 117, 125), 0.28);
    border-color: rgba(var(--secondary-rgb, 108, 117, 125), 0.4);
    color: var(--secondary-light, #d6d8db);
}

[data-theme="dark"] .acu-badge--primary {
    background: rgba(var(--primary-rgb, 0, 150, 136), 0.22);
    border-color: rgba(var(--primary-rgb, 0, 150, 136), 0.45);
    color: var(--primary-light, #b8e2de);
}

[data-theme="dark"] .acu-card__no-access.alert {
    color: var(--warning-light, #ffeeba);
    background-color: rgba(var(--warning-rgb, 255, 193, 7), 0.16);
    border-color: rgba(var(--warning-rgb, 255, 193, 7), 0.4);
}

[data-theme="dark"] .acu-card__no-access-icon {
    color: var(--warning, #ffc107);
}

[data-theme="dark"] .access-control-users select.acu-filter-select--module+.select2-container--default .select2-selection--multiple .select2-selection__choice {
    background-color: rgba(var(--success-rgb, 40, 167, 69), 0.22) !important;
    color: var(--success-light, #c3e6cb) !important;
    border-color: rgba(var(--success-rgb, 40, 167, 69), 0.45) !important;
}

[data-theme="dark"] .access-control-users select.acu-filter-select--module+.select2-container--default .select2-selection--multiple .select2-selection__choice__remove {
    color: var(--success-light, #c3e6cb) !important;
}

[data-theme="dark"] .access-control-users select.acu-filter-select--module+.select2-container--default .select2-selection--multiple .acu-filter-choice__icon {
    background: rgba(var(--success-rgb, 40, 167, 69), 0.2);
    color: var(--success-light, #c3e6cb);
}

/* Message inbox (Notification / Messages) - toolbar + card shell */
.msg-inbox__filter-panel {
    background: rgba(var(--primary-rgb, 0, 150, 136), 0.04);
    border: 1px solid rgba(0, 0, 0, 0.08);
    border-radius: 14px;
    padding: 1rem 1.15rem 0.85rem;
    margin-bottom: 1rem;
}

.msg-inbox__label {
    display: block;
    font-size: 0.6875rem;
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--secondary, #6c757d);
    margin-bottom: 0.35rem;
}

.msg-inbox__category-btn {
    display: flex;
    align-items: center;
    justify-content: space-between;
    text-align: left;
    font-weight: 600;
    color: #fff;
    background: linear-gradient(135deg, var(--primary, #009688) 0%, var(--primary-btn-hover, #00796b) 100%);
    border: 0;
    border-radius: 10px;
    padding: 0.45rem 0.75rem;
    box-shadow: 0 2px 6px rgba(var(--primary-btn-hover-rgb, 0, 121, 107), 0.25);
}

.msg-inbox__category-btn:hover,
.msg-inbox__category-btn:focus {
    color: #fff;
    background: linear-gradient(135deg, var(--primary-btn-hover, #00796b) 0%, var(--primary-back, #00695c) 100%);
    box-shadow: 0 3px 10px rgba(var(--primary-btn-hover-rgb, 0, 121, 107), 0.35);
}

.msg-inbox__category-btn-label {
    flex: 1;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.msg-inbox__category-menu {
    max-height: 70vh;
    overflow-y: auto;
    border-radius: 12px;
    padding: 0.35rem 0;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
}

.msg-inbox__cat-option {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.45rem 1rem;
    font-size: 0.875rem;
    font-weight: 500;
    color: #37474f;
}

.msg-inbox__cat-option:hover,
.msg-inbox__cat-option:focus {
    background: rgba(var(--primary-rgb, 0, 150, 136), 0.08);
    color: var(--primary-back, #00695c);
}

.msg-inbox__cat-option.active {
    background: rgba(var(--primary-rgb, 0, 150, 136), 0.12);
    color: var(--primary-back, #00695c);
    font-weight: 600;
}

.msg-inbox__cat-option-icon {
    width: 2rem;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
}

.msg-inbox__cat-stack {
    width: 2em;
    height: 2em;
    line-height: 2em;
    font-size: 0.72rem;
}

.msg-inbox__cat-stack .fa-stack-2x {
    font-size: 2em;
}

.msg-inbox__cat-stack .fa-stack-1x {
    font-size: 0.95em;
    line-height: inherit;
}

.msg-inbox__cat-option-label {
    flex: 1;
    min-width: 0;
}

.msg-inbox__cat-badge {
    flex-shrink: 0;
    font-size: 0.7rem;
}

.msg-inbox__input-addon {
    background: #fff;
    border-color: rgba(0, 0, 0, 0.12);
    color: var(--primary, #009688);
}

.msg-inbox__meta {
    margin-top: 0.85rem;
    padding-top: 0.75rem;
    border-top: 1px solid rgba(0, 0, 0, 0.06);
}

.msg-inbox__page-size {
    width: auto;
    min-width: 4.5rem;
}

.msg-inbox__empty {
    border-radius: 14px;
    padding: 2rem 1rem;
}

.msg-inbox__empty-icon {
    opacity: 0.55;
}

[data-theme="dark"] .msg-inbox__filter-panel {
    background: rgba(var(--primary-rgb, 0, 150, 136), 0.08);
    border-color: rgba(255, 255, 255, 0.1);
}

[data-theme="dark"] .msg-inbox__label {
    color: #9ca3af;
}

[data-theme="dark"] .msg-inbox__cat-option {
    color: #e5e7eb;
}

[data-theme="dark"] .msg-inbox__cat-option:hover,
[data-theme="dark"] .msg-inbox__cat-option:focus {
    background: rgba(var(--primary-rgb, 0, 150, 136), 0.15);
    color: var(--primary-hover, #5eead4);
}

[data-theme="dark"] .msg-inbox__cat-option.active {
    background: rgba(var(--primary-rgb, 0, 150, 136), 0.22);
    color: var(--primary-light, #99f6e4);
}

[data-theme="dark"] .msg-inbox__input-addon {
    background: #2d2d2d;
    border-color: rgba(255, 255, 255, 0.12);
    color: var(--primary-hover, #5eead4);
}

[data-theme="dark"] .msg-inbox__meta {
    border-top-color: rgba(255, 255, 255, 0.08);
}

[data-theme="dark"] .msg-inbox__empty {
    background: #262626;
    color: #e5e7eb;
}

.msg-inbox__list {
    display: flex;
    flex-direction: column;
    gap: 0.55rem;
}

.msg-inbox-card {
    background: #fff;
    border: 1px solid rgba(0, 0, 0, 0.08);
    border-radius: 16px;
    padding: 0.6rem 1.1rem;
    margin-bottom: 0;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04);
    transition: box-shadow 0.15s ease, border-color 0.15s ease;
}

.msg-inbox-card:hover {
    border-color: rgba(var(--primary-rgb, 0, 150, 136), 0.35);
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.07);
}

.msg-inbox-card:focus {
    outline: 2px solid rgba(0, 123, 255, 0.35);
    outline-offset: 2px;
}

.msg-inbox-card.table-info,
.msg-inbox-card.table-danger,
.msg-inbox-card.table-public {
    background: #fff;
}

.msg-inbox-card__text {
    font-size: 1rem;
    line-height: 1.75;
    color: #37474f;
}

[data-theme="dark"] .msg-inbox-card {
    background: #262626;
    border-color: rgba(255, 255, 255, 0.1);
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.25);
    color: #e5e7eb;
}

[data-theme="dark"] .msg-inbox-card:hover {
    border-color: rgba(var(--primary-rgb, 0, 150, 136), 0.55);
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.35);
}

[data-theme="dark"] .msg-inbox-card.table-info,
[data-theme="dark"] .msg-inbox-card.table-danger,
[data-theme="dark"] .msg-inbox-card.table-public {
    background: #262626;
}

[data-theme="dark"] .msg-inbox-card .msg-inbox-card__text {
    color: #e5e7eb;
}

[data-theme="dark"] .msg-inbox-card .msg-inbox-card__text a:not(.badge):not(.btn) {
    color: var(--primary-hover, #5eead4);
}

[data-theme="dark"] .msg-inbox-card .msg-inbox-card__text a:not(.badge):not(.btn):hover {
    color: var(--primary-light, #99f6e4);
}

.system-logs__table-wrap {
    border: 1px solid rgba(0, 0, 0, 0.08);
    border-radius: 10px;
    overflow: hidden;
    background: #fff;
}

.system-logs__table thead th {
    background-color: var(--primary, #009688);
    color: #fff;
    border-color: rgba(255, 255, 255, 0.12);
    border-bottom-width: 1px;
    font-size: 0.75rem;
    font-weight: 600;
    vertical-align: middle;
    text-align: center;
}

.system-logs__table td {
    vertical-align: top;
    font-size: 0.875rem;
}

.system-logs__table td.system-logs__col-num {
    text-align: center;
    color: var(--secondary, #6c757d);
    font-weight: 500;
    white-space: nowrap;
}

.system-logs__name-row {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    min-width: 0;
}

.system-logs__table .system-logs__avatar {
    width: 22px;
    height: 22px;
    border-radius: 50%;
    object-fit: cover;
    border: 1px solid #f0f0f0;
    flex-shrink: 0;
}

.system-logs__name-text {
    font-weight: 500;
    color: #546e7a;
    word-break: break-word;
}

.system-logs__col-date time {
    border-bottom: 1px dotted rgba(108, 117, 125, 0.5);
    cursor: default;
    white-space: nowrap;
}

.system-logs__col-log {
    word-break: break-word;
    line-height: 1.6;
    color: #37474f;
}

[data-theme="dark"] .system-logs .system-logs__meta .text-muted {
    color: #9ca3af !important;
}

[data-theme="dark"] .system-logs .system-logs__empty.alert-light {
    background-color: #262626 !important;
    border-color: #3d3d3d !important;
    color: #e5e7eb;
}

[data-theme="dark"] .system-logs .system-logs__empty .text-muted,
[data-theme="dark"] .system-logs .system-logs__loader .text-muted {
    color: #9ca3af !important;
}

[data-theme="dark"] .system-logs .system-log-card {
    background: #262626;
    border-color: rgba(255, 255, 255, 0.1);
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.25);
}

[data-theme="dark"] .system-logs .system-log-card:hover {
    border-color: rgba(var(--primary-rgb, 0, 150, 136), 0.55);
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.35);
}

[data-theme="dark"] .system-logs .system-log-card__avatar {
    border-color: #3d3d3d;
}

[data-theme="dark"] .system-logs .system-log-card__name {
    color: #94a3b8;
}

[data-theme="dark"] .system-logs .system-log-card__when {
    color: #a8b0ba;
}

[data-theme="dark"] .system-logs .system-log-card__when time {
    border-bottom-color: rgba(168, 176, 186, 0.45);
}

[data-theme="dark"] .system-logs .system-log-card__body {
    color: #e5e7eb;
}

[data-theme="dark"] .system-logs .system-log-card__body a,
[data-theme="dark"] .system-logs .system-logs__col-log a {
    color: var(--primary-hover, #5eead4);
}

[data-theme="dark"] .system-logs .system-log-card__body a:hover,
[data-theme="dark"] .system-logs .system-logs__col-log a:hover {
    color: var(--primary-light, #99f6e4);
}

[data-theme="dark"] .system-logs .system-logs__table-wrap {
    background: #262626;
    border-color: rgba(255, 255, 255, 0.12);
}

[data-theme="dark"] .system-logs .system-logs__table {
    color: #e5e7eb;
}

[data-theme="dark"] .system-logs .system-logs__table thead th {
    background-color: var(--primary, #009688);
    color: #f1f5f9;
    border-color: rgba(255, 255, 255, 0.12);
}

[data-theme="dark"] .system-logs .system-logs__table.table-striped tbody tr:nth-of-type(odd) {
    background-color: rgba(255, 255, 255, 0.03);
}

[data-theme="dark"] .system-logs .system-logs__table.table-striped tbody tr:nth-of-type(even) {
    background-color: transparent;
}

[data-theme="dark"] .system-logs .system-logs__table.table-hover tbody tr:hover {
    background-color: rgba(var(--primary-rgb, 0, 150, 136), 0.12) !important;
}

[data-theme="dark"] .system-logs .system-logs__table td {
    border-top-color: #333;
}

[data-theme="dark"] .system-logs .system-logs__table td.system-logs__col-num {
    color: #9ca3af;
}

[data-theme="dark"] .system-logs .system-logs__table .system-logs__avatar {
    border-color: #3d3d3d;
}

[data-theme="dark"] .system-logs .system-logs__name-text {
    color: #cbd5e1;
}

[data-theme="dark"] .system-logs .system-logs__col-date {
    color: #a8b0ba;
}

[data-theme="dark"] .system-logs .system-logs__col-date time {
    border-bottom-color: rgba(168, 176, 186, 0.45);
}

[data-theme="dark"] .system-logs .system-logs__col-log {
    color: #e5e7eb;
}

/* Login logs (user_login) compact cells inside activity logs */
.system-logs .login-log-detail {
    font-size: 0.6875rem;
    line-height: 1.35;
}

/*
 * Spacing from user name to login-log block:
 * G-- Desktop default is CARD view (not table). Card body uses negative margin-top that pulls
 *   logs up beside the identity row; reset when body holds login-log-detail.
 * G-- Table view: pad the Logs column (only rows that contain login-log-detail).
 */
.system-logs .system-log-card__body:has(> .login-log-detail) {
    margin-top: 0.1rem;
}

.system-logs .system-log-card__body>.login-log-detail {
    padding-top: 0.1rem;
}

.system-logs .system-logs__table td.system-logs__col-log:has(.login-log-detail) {
    padding-left: 1rem;
}

.system-logs .system-logs__table td.system-logs__col-log .login-log-detail {
    margin-left: 0;
}

.system-logs .login-log-detail__signin {
    gap: 0.35rem 0.5rem;
    line-height: 1.2;
    margin-bottom: 0.35rem;
}

.system-logs .login-log-detail__device-model {
    gap: 0.25rem;
    max-width: 100%;
}

.system-logs .login-log-detail__device-model-icon {
    font-size: 0.75rem;
    flex-shrink: 0;
}

.system-logs .login-log-detail__device-model-text {
    font-size: 0.6875rem;
    font-weight: 600;
    line-height: 1.2;
    word-break: break-word;
}

.system-logs .login-log-detail__meta {
    font-size: 0.6875rem;
    line-height: 1.35;
    margin-bottom: 0.35rem;
    word-break: break-word;
}

.system-logs .login-log-detail__meta-sep {
    opacity: 0.65;
}

.system-logs .login-log-detail__badge {
    font-size: 0.625rem;
    padding: 0.15em 0.45em;
}

.system-logs .login-log-detail__badge.login-log-badge--signed-out {
    color: #455a64;
    background-color: #cfd8dc;
    border: 1px solid #90a4ae;
}

[data-theme="dark"] .system-logs .login-log-detail__badge.login-log-badge--signed-out {
    color: #e2e8f0;
    background-color: #475569;
    border-color: #64748b;
}

.system-logs .login-log-detail small.login-log-detail__signin-label,
.system-logs .login-log-detail small.login-log-detail__ip-label {
    font-size: 0.5625rem;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

.system-logs .login-log-detail small.login-log-detail__session-label {
    font-size: 0.59375rem;
    line-height: 1.2;
    margin-bottom: 0.15rem;
}

.system-logs .login-log-detail__ip-inline {
    gap: 0.3rem;
    min-width: 0;
}

.system-logs .login-log-detail__ip-icon {
    font-size: 0.625rem;
    flex-shrink: 0;
}

.system-logs .login-log-detail__session-row {
    display: flex;
    gap: 0.5rem;
    align-items: stretch;
}

.system-logs .login-log-detail__session-cell {
    flex: 1;
    min-width: 0;
    border: 1px solid rgba(0, 0, 0, 0.12);
    border-radius: 10px;
    padding: 0.25rem 0.35rem;
}

.system-logs .login-log-detail small.login-log-detail__time {
    display: block;
    font-size: 0.65625rem;
    line-height: 1.3;
    word-break: break-word;
    color: #37474f;
}

.system-logs .login-log-detail__ip-code {
    font-size: 0.65625rem;
    background: transparent;
    padding: 0;
    color: inherit;
}

[data-theme="dark"] .system-logs .login-log-detail__session-cell {
    border-color: rgba(255, 255, 255, 0.14);
    background: rgba(255, 255, 255, 0.04);
}

[data-theme="dark"] .system-logs .login-log-detail small.login-log-detail__time {
    color: #e5e7eb;
}

[data-theme="dark"] .system-logs .login-log-detail .text-muted {
    color: #9ca3af !important;
}

[data-theme="dark"] .system-logs .login-log-detail__ip-code {
    color: #cbd5e1;
}

/* ==================== BOOKING styles ==================== */

/* Booking Detail G-- layout helpers (uses system .tile / .btn-primary) */
.booking-detail {
    --bd-primary: var(--primary, #009688);
    --bd-primary-soft: rgba(var(--primary-rgb, 0, 150, 136), 0.12);
    --bd-text: #1e293b;
    --bd-muted: #64748b;
    --bd-border: #e8eef4;
    --bd-surface: #f8fafc;
}

/* Hero */
.booking-detail .bd-hero-top {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 16px;
    flex-wrap: wrap;
}

.booking-detail .bd-eyebrow {
    display: block;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--bd-muted);
    margin-bottom: 6px;
}

.booking-detail .bd-hero-title {
    margin: 0 0 10px;
    font-size: clamp(1.55rem, 2.2vw, 2rem);
    font-weight: 700;
    color: var(--bd-text);
    line-height: 1.25;
}

.booking-detail .bd-status {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 12px;
    border-radius: 999px;
    font-size: 13px;
    font-weight: 700;
    line-height: 1.4;
}

.booking-detail .bd-status::before {
    content: '';
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: currentColor;
}

.booking-detail .bd-status.is-approved {
    background: var(--bd-primary-soft);
    color: var(--bd-primary);
}

.booking-detail .bd-status.is-pending {
    background: rgba(255, 193, 7, 0.18);
    color: #b78103;
}

.booking-detail .bd-status.is-rejected {
    background: rgba(220, 53, 69, 0.12);
    color: var(--danger-btn-hover, #c82333);
}

.booking-detail .bd-status.is-cancelled {
    background: rgba(var(--warning-rgb, 255, 193, 7), 0.16);
    color: var(--warning-back, #d39e00);
}

.booking-detail .bd-status.is-withdrawn {
    background: rgba(108, 117, 125, 0.16);
    color: #495057;
}

/* Why: list/check/modal badges — Cancelled orange (Booking_Detail is-cancelled), Withdrawn stays secondary. */
.badge.badge-cancelled {
    color: #fff;
    background-color: #e65100;
}

.badge.badge-cancelled[href]:hover,
.badge.badge-cancelled[href]:focus {
    color: #fff;
    text-decoration: none;
    background-color: #bf360c;
}

.text-cancelled {
    color: #e65100 !important;
}

.booking-detail .bd-status.is-completed {
    background: rgba(23, 162, 184, 0.14);
    color: var(--info, #117a8b);
}

.booking-detail .bd-status.is-default {
    background: #f1f5f9;
    color: #64748b;
}

.booking-detail .bd-hero-badges {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
}

/* Submit channel: Internal (staff) vs External (public form) — soft pastel, not danger red */
.booking-detail .bd-channel,
.booking-detail .bd-channel-chip {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 4px 10px;
    border-radius: 999px;
    font-size: 12px;
    font-weight: 700;
    line-height: 1.35;
    vertical-align: middle;
}

.booking-detail .bd-channel.is-internal,
.booking-detail .bd-channel-chip.is-internal {
    background: rgba(60, 138, 150, 0.14);
    color: #2b6a74;
}

.booking-detail .bd-channel.is-external,
.booking-detail .bd-channel-chip.is-external {
    background: rgba(11, 114, 133, 0.12);
    color: #0b7285;
}

.booking-detail .bd-user-name .bd-channel-chip {
    margin-left: 8px;
    font-size: 11px;
    font-weight: 600;
    position: relative;
    top: -1px;
}

[data-theme="dark"] .booking-detail .bd-channel.is-internal,
[data-theme="dark"] .booking-detail .bd-channel-chip.is-internal {
    background: rgba(116, 192, 252, 0.16);
    color: #74c0fc;
}

[data-theme="dark"] .booking-detail .bd-channel.is-external,
[data-theme="dark"] .booking-detail .bd-channel-chip.is-external {
    background: rgba(99, 230, 190, 0.14);
    color: #63e6be;
}

.booking-detail .bd-ref {
    text-align: right;
}

.booking-detail .bd-ref-label {
    display: block;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--bd-muted);
    margin-bottom: 4px;
}

.booking-detail .bd-ref-id {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 1.05rem;
    font-weight: 700;
    color: var(--bd-text);
    background: none;
    border: 0;
    padding: 0;
    cursor: pointer;
}

.booking-detail .bd-ref-id i {
    color: var(--bd-muted);
    font-size: 14px;
}

.booking-detail .bd-ref-id:hover i {
    color: var(--bd-primary);
}

.booking-detail .bd-divider {
    border: 0;
    border-top: 1px dashed #d7dee8;
    margin: 18px 0 16px;
}

.booking-detail .bd-meta {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 14px;
}

.booking-detail .bd-meta-item {
    min-width: 0;
}

.booking-detail .bd-meta-label {
    display: block;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--bd-muted);
    margin-bottom: 6px;
}

.booking-detail .bd-meta-value {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 15px;
    font-weight: 600;
    color: var(--bd-text);
    word-break: break-word;
}

.booking-detail .bd-meta-value i {
    color: var(--bd-muted);
    flex: 0 0 auto;
}

/* Period row (same inset cover as location) */
.booking-detail .bd-period-box {
    align-items: stretch;
    flex-wrap: wrap;
}

.booking-detail .bd-period-box>.bd-location-icon {
    align-self: center;
}

.booking-detail .bd-period-content {
    flex: 1 1 220px;
    min-width: 0;
}

.booking-detail .bd-period-row {
    display: flex;
    align-items: center;
    gap: 14px;
    flex-wrap: wrap;
}

.booking-detail .bd-period-point {
    flex: 1 1 160px;
    min-width: 0;
}

.booking-detail .bd-period-role {
    display: block;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--bd-muted);
    margin-bottom: 4px;
}

.booking-detail .bd-period-when {
    display: block;
    font-size: 15px;
    font-weight: 700;
    color: var(--bd-text);
    line-height: 1.35;
}

.booking-detail .bd-period-arrow {
    color: #94a3b8;
    font-size: 16px;
    flex: 0 0 auto;
}

.booking-detail .bd-duration-pill {
    display: inline-flex;
    align-items: center;
    padding: 6px 12px;
    border-radius: 999px;
    background: var(--bd-primary-soft);
    color: var(--bd-primary);
    font-size: 13px;
    font-weight: 700;
    white-space: nowrap;
}

.booking-detail .bd-period-box .bd-duration-pill {
    margin-left: 0;
    align-self: center;
}

/* Location inset */
.booking-detail .bd-location-box {
    display: flex;
    align-items: center;
    gap: 14px;
    background: var(--bd-surface);
    border: 1px solid var(--bd-border);
    border-radius: 12px;
    padding: 14px 16px;
}

.booking-detail .bd-location-icon {
    width: 44px;
    height: 44px;
    border-radius: 10px;
    background: var(--bd-primary);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
    flex: 0 0 auto;
}

.booking-detail .bd-location-name {
    display: block;
    font-size: 16px;
    font-weight: 700;
    color: var(--bd-text);
}

.booking-detail .bd-location-sub {
    display: block;
    font-size: 14px;
    color: var(--bd-muted);
    margin-top: 2px;
}

/* Booked by */
.booking-detail .bd-user {
    display: flex;
    align-items: flex-start;
    gap: 14px;
}

.booking-detail .bd-avatar {
    width: 46px;
    height: 46px;
    border-radius: 50%;
    background: var(--bd-primary);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
    font-weight: 700;
    flex: 0 0 auto;
}

.booking-detail .bd-user-name {
    font-size: 16px;
    font-weight: 700;
    color: var(--bd-text);
    margin-bottom: 4px;
}

.booking-detail .bd-user-line {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 14px;
    color: var(--bd-muted);
    margin-top: 2px;
}

.booking-detail .bd-user-line a {
    color: var(--bd-primary);
}

.booking-detail .bd-label {
    display: block;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.07em;
    text-transform: uppercase;
    color: var(--bd-muted);
    margin: 16px 0 8px;
}

.booking-detail .bd-remarks {
    background: var(--bd-surface);
    border: 1px solid var(--bd-border);
    border-radius: 10px;
    padding: 12px 14px;
    color: var(--bd-text);
    font-size: 14px;
}

.booking-detail .bd-extra {
    margin-top: 14px;
    font-size: 13px;
    color: var(--bd-muted);
    line-height: 1.6;
}

/* Itemized cost breakdown in booking detail */
.booking-detail .bd-cost-breakdown {
    background: var(--bd-surface);
    border: 1px solid var(--bd-border);
    border-radius: 10px;
    overflow: hidden;
}

.booking-detail .bd-cost-lines {
    padding: 4px 0;
}

.booking-detail .bd-cost-line {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
    padding: 9px 14px;
    border-bottom: 1px solid var(--bd-border);
    font-size: 13.5px;
}

.booking-detail .bd-cost-line:last-child {
    border-bottom: 0;
}

.booking-detail .bd-cost-line__label {
    font-weight: 600;
    color: var(--bd-text);
    flex: 0 0 auto;
    max-width: 50%;
}

.booking-detail .bd-cost-line__calc {
    color: var(--bd-muted);
    text-align: right;
    flex: 1;
    font-variant-numeric: tabular-nums;
}

.booking-detail .bd-cost-total {
    padding: 10px 14px;
    background: rgba(var(--primary-rgb, 0, 150, 136), 0.06);
    border-top: 1px solid var(--bd-border);
    font-size: 14px;
    color: var(--bd-text);
    text-align: right;
}

.booking-detail .bd-cost-lines--grouped {
    padding: 8px;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.booking-detail .bd-cost-item {
    border: 1px solid var(--bd-border);
    border-radius: 8px;
    overflow: hidden;
    background: var(--bd-surface);
}

.booking-detail .bd-cost-item__head {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
    padding: 10px 14px;
    border-bottom: 1px solid var(--bd-border);
}

.booking-detail .bd-cost-item__name {
    font-weight: 600;
    color: var(--bd-text);
}

.booking-detail .bd-cost-item__total {
    font-weight: 600;
    color: var(--bd-text);
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

.booking-detail .bd-cost-segment {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 12px;
    padding: 7px 14px;
    font-size: 12.5px;
}

.booking-detail .bd-cost-segment__label {
    color: var(--bd-muted);
    flex: 0 0 auto;
    max-width: 42%;
}

.booking-detail .bd-cost-segment__calc {
    color: var(--bd-muted);
    text-align: right;
    flex: 1;
    font-variant-numeric: tabular-nums;
}

[data-theme="dark"] .booking-detail .bd-cost-total {
    background: rgba(0, 150, 136, 0.12);
}

.booking-detail .bd-actions {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 12px;
    margin: 4px 0 16px;
}

/* Sidebar / timeline */
.booking-detail .bd-timeline {
    position: relative;
    margin: 0;
    padding: 0 0 0 18px;
    list-style: none;
    border-left: 2px solid #e2e8f0;
}

.booking-detail .bd-timeline-item {
    position: relative;
    padding: 0 0 16px 14px;
}

.booking-detail .bd-timeline-item:last-child {
    padding-bottom: 0;
}

.booking-detail .bd-timeline-item::before {
    content: '';
    position: absolute;
    left: -23px;
    top: 5px;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: var(--bd-primary);
    box-shadow: 0 0 0 3px #fff;
}

.booking-detail .bd-timeline-item.is-upcoming::before {
    background: #fff;
    border: 2px solid #cbd5e1;
    box-shadow: none;
}

.booking-detail .bd-timeline-item.is-rejected::before {
    background: var(--danger, #dc3545);
}

/* Why: Pending stays amber + pulse; Cancelled orange; Withdrawn grey (match .bd-status.is-withdrawn). */
@keyframes bd-dot-pulse {

    0%,
    100% {
        box-shadow: 0 0 0 3px #fff, 0 0 0 0 rgba(255, 193, 7, 0.55);
        opacity: 1;
    }

    50% {
        box-shadow: 0 0 0 3px #fff, 0 0 0 8px rgba(255, 193, 7, 0);
        opacity: 0.75;
    }
}

.booking-detail .bd-timeline-item.is-pending::before {
    background: var(--warning, #ffc107);
    animation: bd-dot-pulse 1.4s ease-in-out infinite;
}

.booking-detail .bd-timeline-item.is-cancelled::before {
    background: #fd7e14;
}

.booking-detail .bd-timeline-item.is-withdrawn::before {
    background: var(--secondary, #6c757d);
}

.booking-detail .bd-timeline-item.is-completed::before {
    background: #17a2b8;
}

@media (prefers-reduced-motion: reduce) {
    .booking-detail .bd-timeline-item.is-pending::before {
        animation: none;
    }
}

.booking-detail .bd-timeline-title {
    display: block;
    font-size: 14px;
    font-weight: 700;
    color: var(--bd-text);
}

.booking-detail .bd-timeline-meta {
    display: block;
    font-size: 12px;
    color: var(--bd-muted);
    margin-top: 2px;
}

/* Attachment dropzone */
.booking-detail .bd-attach-list {
    margin-bottom: 10px;
}

.booking-detail .bd-attach-drop {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 4px;
    min-height: 110px;
    border: 1.5px dashed #cbd5e1;
    border-radius: 12px;
    background: var(--bd-surface);
    color: var(--bd-muted);
    text-align: center;
    padding: 16px;
    cursor: pointer;
    transition: border-color .15s ease, background .15s ease;
}

.booking-detail .bd-attach-drop:hover,
.booking-detail .bd-attach-drop.is-dragover {
    border-color: var(--bd-primary);
    background: var(--bd-primary-soft);
    color: var(--bd-primary);
}

.booking-detail .bd-attach-drop i {
    font-size: 22px;
    margin-bottom: 4px;
}

.booking-detail .bd-attach-drop strong {
    display: block;
    font-size: 14px;
    color: inherit;
}

.booking-detail .bd-attach-drop span {
    font-size: 12px;
}

/* Comments */
.booking-detail .bd-comment-form {
    display: flex;
    align-items: stretch;
    gap: 8px;
}

.booking-detail .bd-comment-form .form-control {
    flex: 1;
    min-width: 0;
    border-radius: 10px;
}

.booking-detail .bd-comment-form .btn {
    flex: 0 0 auto;
}

.booking-detail .bd-comment-empty {
    margin: 12px 0 0;
    font-size: 13px;
    font-style: italic;
    color: #94a3b8;
    text-align: center;
}

.booking-detail #comments_preview table {
    margin-top: 10px;
    width: 100%;
}

.booking-detail #comments_preview .booking-comment-item td {
    background: var(--bd-surface);
    border: 1px solid var(--bd-border);
    border-radius: 10px;
    padding: 10px 12px;
    display: block;
    margin-bottom: 8px;
}

/* Recurring occurrence panel */
.booking-detail .recur-panel,
.booking-add-summary-card .recur-panel {
    margin-top: 4px;
}

.booking-detail .recur-panel__label,
.booking-add-summary-card .recur-panel__label {
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--bd-muted, #64748b);
    margin-bottom: 10px;
}

.booking-detail .recur-panel__summary,
.booking-add-summary-card .recur-panel__summary {
    display: flex;
    align-items: flex-start;
    gap: 14px;
    padding: 14px 16px;
    background: var(--bd-surface-alt, #f8fafc);
    border: 1px solid var(--bd-border, #e2e8f0);
    border-radius: 12px;
}

.booking-detail .recur-panel__icon,
.booking-add-summary-card .recur-panel__icon {
    flex: 0 0 36px;
    width: 36px;
    height: 36px;
    border-radius: 10px;
    background: rgba(0, 150, 136, 0.14);
    color: var(--bd-primary, #009688);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 15px;
}

.booking-detail .recur-panel__summary-body,
.booking-add-summary-card .recur-panel__summary-body {
    flex: 1;
    min-width: 0;
}

.booking-detail .recur-panel__title,
.booking-add-summary-card .recur-panel__title {
    font-size: 15px;
    font-weight: 700;
    color: var(--bd-text, #1e293b);
    line-height: 1.35;
}

.booking-detail .recur-panel__meta,
.booking-add-summary-card .recur-panel__meta {
    margin-top: 4px;
    font-size: 13px;
    color: var(--bd-muted, #64748b);
}

.booking-detail .recur-panel__next,
.booking-add-summary-card .recur-panel__next,
.recur-panel__next {
    margin-top: 12px;
    padding: 12px 14px;
    border-radius: 10px;
    border: 1px solid rgba(0, 150, 136, 0.35);
    background: rgba(0, 150, 136, 0.08);
}

.booking-detail .recur-panel__next-k,
.booking-add-summary-card .recur-panel__next-k,
.recur-panel__next-k {
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--bd-primary, #009688);
    margin-bottom: 4px;
}

.booking-detail .recur-panel__next-k i,
.booking-add-summary-card .recur-panel__next-k i,
.recur-panel__next-k i {
    margin-right: 4px;
}

.booking-detail .recur-panel__next-v,
.booking-add-summary-card .recur-panel__next-v,
.recur-panel__next-v {
    font-size: 15px;
    font-weight: 700;
    color: var(--bd-text, #1e293b);
    line-height: 1.35;
}

.booking-detail .recur-panel__occurrences-count,
.booking-add-summary-card .recur-panel__occurrences-count,
.recur-panel__occurrences-count {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 22px;
    height: 22px;
    padding: 0 7px;
    border-radius: 999px;
    font-size: 12px;
    font-weight: 700;
    background: rgba(0, 150, 136, 0.12);
    color: var(--bd-primary, #009688);
}

.booking-detail .recur-panel__item.is-next,
.booking-add-summary-card .recur-panel__item.is-next,
.recur-panel__item.is-next {
    font-weight: 700;
}

.booking-detail .recur-panel__badge--next,
.booking-add-summary-card .recur-panel__badge--next,
.recur-panel__badge--next {
    background: #009688;
    color: #fff;
}

.booking-detail .recur-panel__edit-link {
    flex: 0 0 auto;
    border: 0;
    background: transparent;
    color: var(--bd-primary, #009688);
    font-size: 13px;
    font-weight: 600;
    padding: 4px 0 0;
    cursor: pointer;
    white-space: nowrap;
}

.booking-detail .recur-panel__edit-link:hover {
    text-decoration: underline;
}

.booking-detail .recur-panel__occurrences,
.booking-add-summary-card .recur-panel__occurrences {
    margin-top: 14px;
}

.booking-detail .recur-panel__occurrences-toggle,
.booking-add-summary-card .recur-panel__occurrences-toggle {
    list-style: none;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 13px;
    font-weight: 600;
    color: var(--bd-muted, #64748b);
    margin-bottom: 12px;
    user-select: none;
}

.booking-detail .recur-panel__occurrences-toggle::-webkit-details-marker,
.booking-add-summary-card .recur-panel__occurrences-toggle::-webkit-details-marker {
    display: none;
}

.booking-detail .recur-panel__chevron,
.booking-add-summary-card .recur-panel__chevron {
    font-size: 11px;
    transition: transform 0.2s ease;
}

.booking-detail .recur-panel__occurrences[open] .recur-panel__chevron,
.booking-add-summary-card .recur-panel__occurrences[open] .recur-panel__chevron {
    transform: rotate(180deg);
}

/* Why: fill horizontal space — up to 4 week columns per row, then wrap. */
.recur-panel__weeks,
.booking-detail .recur-panel__weeks {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 16px 20px;
    align-items: start;
}

@media (max-width: 1199.98px) {

    .recur-panel__weeks,
    .booking-detail .recur-panel__weeks {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

@media (max-width: 991.98px) {

    .recur-panel__weeks,
    .booking-detail .recur-panel__weeks {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 575.98px) {

    .recur-panel__weeks,
    .booking-detail .recur-panel__weeks {
        grid-template-columns: minmax(0, 1fr);
    }
}

.recur-panel__week,
.booking-detail .recur-panel__week {
    margin-bottom: 0;
    min-width: 0;
}

.booking-detail .recur-panel__week-label,
.booking-add-summary-card .recur-panel__week-label {
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.06em;
    color: var(--bd-muted, #94a3b8);
    margin-bottom: 8px;
}

.booking-detail .recur-panel__list,
.booking-add-summary-card .recur-panel__list {
    list-style: none;
    margin: 0;
    padding: 0;
}

.booking-detail .recur-panel__item,
.booking-add-summary-card .recur-panel__item {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 5px 0;
    font-size: 14px;
    color: var(--bd-text, #334155);
}

.booking-detail .recur-panel__dot,
.booking-add-summary-card .recur-panel__dot {
    flex: 0 0 6px;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--bd-primary, #009688);
    margin-top: 8px;
}

.booking-detail .recur-panel__item.is-skipped .recur-panel__dot,
.recur-panel__item.is-skipped .recur-panel__dot {
    background: transparent;
}

.booking-detail .recur-panel__item.is-skipped,
.recur-panel__item.is-skipped {
    color: var(--bd-muted, #94a3b8);
}

.booking-detail .recur-panel__badge,
.recur-panel__badge {
    font-size: 11px;
    font-weight: 600;
    padding: 2px 8px;
    border-radius: 999px;
    background: rgba(0, 150, 136, 0.12);
    color: var(--bd-primary, #009688);
    margin-left: 6px;
}

.recur-panel__date.is-skipped-text {
    text-decoration: line-through;
    opacity: 0.85;
}

[data-theme="dark"] .booking-detail .recur-panel__badge,
[data-theme="dark"] .recur-panel__badge {
    background: rgba(0, 150, 136, 0.22);
    color: #5eead4;
}

[data-theme="dark"] .booking-detail .recur-panel__badge--next,
[data-theme="dark"] .booking-add-summary-card .recur-panel__badge--next,
[data-theme="dark"] .recur-panel__badge--next {
    background: #009688;
    color: #fff;
}

.booking-detail .recur-panel__edit-form {
    margin-top: 16px;
    padding-top: 16px;
    border-top: 1px solid var(--bd-border, #e2e8f0);
}

[data-theme="dark"] .booking-detail .recur-panel__summary,
[data-theme="dark"] .booking-add-summary-card .recur-panel__summary {
    background: #262626;
    border-color: #3a3a3a;
}

[data-theme="dark"] .booking-detail .recur-panel__title,
[data-theme="dark"] .booking-add-summary-card .recur-panel__title,
[data-theme="dark"] .booking-detail .recur-panel__next-v,
[data-theme="dark"] .booking-add-summary-card .recur-panel__next-v,
[data-theme="dark"] .recur-panel__next-v {
    color: #fff;
}

[data-theme="dark"] .booking-detail .recur-panel__next,
[data-theme="dark"] .booking-add-summary-card .recur-panel__next,
[data-theme="dark"] .recur-panel__next {
    background: rgba(0, 150, 136, 0.16);
    border-color: rgba(0, 150, 136, 0.45);
}

[data-theme="dark"] .booking-detail .recur-panel__meta,
[data-theme="dark"] .booking-add-summary-card .recur-panel__meta,
[data-theme="dark"] .booking-detail .recur-panel__occurrences-toggle,
[data-theme="dark"] .booking-add-summary-card .recur-panel__occurrences-toggle,
[data-theme="dark"] .booking-detail .recur-panel__week-label,
[data-theme="dark"] .booking-add-summary-card .recur-panel__week-label,
[data-theme="dark"] .booking-detail .recur-panel__label,
[data-theme="dark"] .booking-add-summary-card .recur-panel__label {
    color: #c2c2c2;
}

[data-theme="dark"] .booking-detail .recur-panel__item,
[data-theme="dark"] .booking-add-summary-card .recur-panel__item {
    color: #fff;
}

[data-theme="dark"] .booking-detail .recur-panel__item {
    color: #cbd5e1;
}

@media (max-width: 767.98px) {
    .booking-detail .bd-meta {
        grid-template-columns: 1fr;
    }

    .booking-detail .bd-ref {
        text-align: left;
    }

    .booking-detail .bd-duration-pill {
        margin-left: 0;
    }
}

[data-theme="dark"] .booking-detail {
    --bd-text: #e2e8f0;
    --bd-muted: #94a3b8;
    --bd-border: rgba(255, 255, 255, 0.12);
    --bd-surface: rgba(255, 255, 255, 0.04);
    --bd-primary-soft: rgba(var(--primary-rgb, 0, 150, 136), 0.22);
}

[data-theme="dark"] .booking-detail .bd-timeline {
    border-left-color: rgba(255, 255, 255, 0.15);
}

[data-theme="dark"] .booking-detail .bd-timeline-item::before {
    box-shadow: 0 0 0 3px #1e1e1e;
}

[data-theme="dark"] .booking-detail .bd-timeline-item.is-upcoming::before {
    background: #1e1e1e;
}

/* Why: Match pulse ring to dark timeline dot halo (#1e1e1e instead of white). */
@keyframes bd-dot-pulse-dark {

    0%,
    100% {
        box-shadow: 0 0 0 3px #1e1e1e, 0 0 0 0 rgba(255, 193, 7, 0.55);
        opacity: 1;
    }

    50% {
        box-shadow: 0 0 0 3px #1e1e1e, 0 0 0 8px rgba(255, 193, 7, 0);
        opacity: 0.75;
    }
}

[data-theme="dark"] .booking-detail .bd-timeline-item.is-pending::before {
    animation-name: bd-dot-pulse-dark;
}

.booking-target-stack {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: 14px;
    margin-top: 6px;
    align-items: stretch;
}

.booking-target-card,
.booking-edit-venue-card {
    background: #fff;
    border: 1px solid #e2e8f0;
    border-radius: 12px;
    border-left: 4px solid var(--primary, #009688);
    box-shadow: 0 2px 10px rgba(15, 23, 42, 0.06);
    overflow: hidden;
    min-width: 0;
}

.booking-target-card--tone-1 {
    border-left-color: var(--info, #17a2b8);
}

.booking-target-card--tone-2 {
    border-left-color: #5c6bc0;
}

.booking-target-card-header {
    padding: 11px 14px;
    background: linear-gradient(180deg, #f8fafc 0%, #f1f5f9 100%);
    border-bottom: 1px solid #e8eef4;
}

.booking-target-badge {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 0.03em;
    color: #0f172a;
}

.booking-target-badge .fa {
    color: var(--primary, #009688);
    font-size: 14px;
}

.booking-target-card--tone-1 .booking-target-badge .fa {
    color: var(--info, #17a2b8);
}

.booking-target-card--tone-2 .booking-target-badge .fa {
    color: #5c6bc0;
}

.booking-target-card-body {
    padding: 6px 14px 12px;
}

.booking-target-row {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 14px;
    padding: 10px 0;
    border-bottom: 1px solid #f1f5f9;
}

.booking-target-row:last-child {
    border-bottom: 0;
    padding-bottom: 2px;
}

.booking-target-label {
    flex: 0 0 auto;
    max-width: 42%;
    font-size: 11px;
    font-weight: 600;
    color: #64748b;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    line-height: 1.35;
}

.booking-target-value {
    flex: 1;
    text-align: right;
    font-size: 14px;
    font-weight: 600;
    color: #0f172a;
    line-height: 1.4;
    word-break: break-word;
}

@media print {
    .booking-detail .booking-target-card {
        box-shadow: none;
        break-inside: avoid;
    }
}

[data-theme="dark"] .booking-target-card,
[data-theme="dark"] .booking-edit-venue-card {
    background: #1b1f23;
    border-color: rgba(255, 255, 255, 0.1);
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.3);
}

[data-theme="dark"] .booking-target-card-header {
    background: linear-gradient(180deg, #252d3d 0%, #1b1f23 100%);
    border-bottom-color: rgba(255, 255, 255, 0.1);
}

[data-theme="dark"] .booking-target-badge {
    color: #e2e8f0;
}

[data-theme="dark"] .booking-target-row {
    border-bottom-color: rgba(255, 255, 255, 0.07);
}

[data-theme="dark"] .booking-target-label {
    color: #94a3b8;
}

[data-theme="dark"] .booking-target-value {
    color: #e2e8f0;
}

/* ==================== ANNOUNCEMENT COMPOSE G-- MESSAGE EDITOR ==================== */

.announcement-compose-form .announcement-msg-editor-wrap {
    border-radius: 10px;
    overflow: visible;
}

.announcement-compose-form .announcement-msg-editor-wrap>textarea.form-control {
    border: 1px solid #c5d0dc;
    border-radius: 10px;
    transition: border-color .15s ease, box-shadow .15s ease;
}

.announcement-compose-form .announcement-msg-editor-wrap>textarea.form-control:focus {
    border-color: var(--primary, #009688);
    box-shadow: 0 0 0 3px rgba(var(--primary-rgb, 0, 150, 136), 0.12);
}

.announcement-compose-form .announcement-msg-editor-wrap .note-editor.note-frame {
    border: 1px solid #c5d0dc;
    border-radius: 10px;
    overflow: visible;
    transition: border-color .15s ease, box-shadow .15s ease;
}

.announcement-compose-form .announcement-msg-editor-wrap:focus-within .note-editor.note-frame {
    border-color: var(--primary, #009688);
    box-shadow: 0 0 0 3px rgba(var(--primary-rgb, 0, 150, 136), 0.12);
}

.announcement-compose-form .announcement-msg-editor-wrap .note-editor.note-frame .note-toolbar {
    background: #f8fafc;
    border-bottom: 1px solid #e2e8f0;
    border-radius: 10px 10px 0 0;
    overflow: visible;
    position: relative;
    z-index: 2;
}

.announcement-compose-form .announcement-msg-editor-wrap .note-editor.note-frame .note-toolbar .note-dropdown-menu {
    z-index: 1060;
}

.announcement-compose-form .announcement-msg-editor-wrap .note-editor.note-frame .note-editing-area {
    overflow: hidden;
    border-radius: 0;
}

.announcement-compose-form .announcement-msg-editor-wrap .note-editor.note-frame .note-editing-area .note-editable {
    border-top: 1px solid #eef2f6;
}

.announcement-compose-form .announcement-msg-editor-wrap .note-editor.note-frame .note-statusbar {
    border-top: 1px solid #e2e8f0;
    border-radius: 0 0 10px 10px;
    background: #f8fafc;
}

[data-theme="dark"] .announcement-compose-form .announcement-msg-editor-wrap>textarea.form-control {
    background: #1e1e1e;
    border-color: rgba(255, 255, 255, 0.22);
    color: #e0e0e0;
}

[data-theme="dark"] .announcement-compose-form .announcement-msg-editor-wrap .note-editor.note-frame {
    border-color: rgba(255, 255, 255, 0.22);
}

[data-theme="dark"] .announcement-compose-form .announcement-msg-editor-wrap:focus-within .note-editor.note-frame {
    border-color: var(--primary, #009688);
    box-shadow: 0 0 0 3px rgba(var(--primary-rgb, 0, 150, 136), 0.2);
}

[data-theme="dark"] .announcement-compose-form .announcement-msg-editor-wrap .note-editor.note-frame .note-toolbar,
[data-theme="dark"] .announcement-compose-form .announcement-msg-editor-wrap .note-editor.note-frame .note-statusbar {
    background: #252525;
    border-color: rgba(255, 255, 255, 0.12);
}

[data-theme="dark"] .announcement-compose-form .announcement-msg-editor-wrap .note-editor.note-frame .note-editing-area .note-editable {
    background: #1e1e1e;
    color: #e0e0e0;
    border-top-color: rgba(255, 255, 255, 0.08);
}

/* ==================== METER STYLES ==================== */

/* Meter_Action G-- summary, charts, submit form, AI bill panel */
@media (max-width: 991px) {
    .kpi-grid.kpi-grid--meter-action {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 576px) {
    .kpi-grid.kpi-grid--meter-action {
        grid-template-columns: 1fr;
    }
}

[data-theme="dark"] .kpi-value.text-muted {
    color: #94a3b8 !important;
}

[data-theme="dark"] .kpi-value.text-danger {
    color: #f87171 !important;
}

[data-theme="dark"] .kpi-value.text-info {
    color: #38bdf8 !important;
}

[data-theme="dark"] .kpi-value.text-success {
    color: #4ade80 !important;
}

.meter-chart-card {
    border: 1px solid #e5e9f2;
    border-radius: 10px;
    padding: 14px;
    height: 100%;
    background: #fff;
}

.meter-chart-head {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 10px;
    margin-bottom: 12px;
}

.meter-chart-head strong {
    color: #212529;
}

.meter-chart-head small {
    color: var(--secondary, #6c757d);
}

.meter-donut-wrap {
    position: relative;
    height: 260px;
}

.meter-chart-empty {
    min-height: 260px;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    color: var(--secondary, #6c757d);
}

.meter-chart-note {
    font-size: 12px;
    color: var(--secondary, #6c757d);
    margin-top: 4px;
}

.meter-side-stack {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.meter-combined-formula {
    font-size: 12px;
    color: var(--secondary, #6c757d);
    margin-bottom: 12px;
    line-height: 1.5;
}

.meter-combined-total {
    font-size: 20px;
    font-weight: 700;
    color: #212529;
    margin-bottom: 12px;
}

.meter-combined-list {
    margin: 0;
    padding: 0;
    list-style: none;
}

.meter-combined-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 8px 0;
    border-top: 1px solid #edf2f7;
}

.meter-combined-item:first-child {
    border-top: 0;
    padding-top: 0;
}

.meter-combined-name {
    font-size: 13px;
    color: #212529;
    font-weight: 600;
}

.meter-combined-meta {
    font-size: 12px;
    color: var(--secondary, #6c757d);
}

.meter-combined-reading {
    font-size: 13px;
    color: #212529;
    font-weight: 700;
    white-space: nowrap;
}

[data-theme="dark"] .meter-chart-card {
    background: #2c2c2c;
    border-color: #3b4757;
}

[data-theme="dark"] .meter-chart-note {
    color: #94a3b8;
}

[data-theme="dark"] .meter-combined-formula,
[data-theme="dark"] .meter-combined-meta {
    color: #94a3b8;
}

[data-theme="dark"] .meter-combined-total,
[data-theme="dark"] .meter-combined-name,
[data-theme="dark"] .meter-combined-reading {
    color: #e5e7eb;
}

[data-theme="dark"] .meter-combined-item {
    border-top-color: #3b4757;
}

[data-theme="dark"] .meter-chart-head strong {
    color: #e5e7eb;
}

[data-theme="dark"] .meter-chart-head small,
[data-theme="dark"] .meter-chart-empty {
    color: #94a3b8;
}

.meter-action-summary .meter-identity-main {
    display: flex;
    align-items: flex-start;
    gap: 14px;
    min-width: 0;
    flex: 1 1 auto;
}

.meter-action-summary .meter-identity-icon {
    width: 42px;
    height: 42px;
    background: linear-gradient(135deg, var(--info, #17a2b8) 0%, var(--primary, #009688) 100%);
    border-radius: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1rem;
    color: #fff;
    flex-shrink: 0;
    box-shadow: 0 8px 18px rgba(var(--primary-rgb, 0, 150, 136), 0.2);
}

.meter-action-summary .meter-identity-title-block {
    flex: 1;
    min-width: 0;
}

.meter-action-summary .meter-identity-title-row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px 12px;
    margin-bottom: 4px;
}

.meter-action-summary .meter-identity-title-row .meter-identity-name {
    margin: 0;
    flex: 1 1 auto;
    min-width: 0;
}

.meter-action-summary .meter-identity-meta-row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 4px 14px;
    font-size: 0.8125rem;
    color: #546e7a;
    margin-top: 2px;
}

.meter-action-summary .meter-identity-meta-row>span {
    display: inline-flex;
    align-items: center;
    gap: 5px;
}

.meter-action-summary .meter-identity-meta-row .fa {
    opacity: 0.85;
}

.meter-action-summary .meter-identity-asset-panel {
    margin-top: 10px;
    padding: 10px 12px;
    background: rgba(var(--primary-rgb, 0, 150, 136), 0.06);
    border: 1px solid rgba(var(--primary-rgb, 0, 150, 136), 0.14);
    border-radius: 10px;
    font-size: 0.875rem;
    line-height: 1.45;
}

.meter-action-summary .meter-identity-asset-ico {
    font-size: 0.85em;
    margin-right: 4px;
    opacity: 0.55;
}

.meter-action-summary .meter-identity-asset-name {
    font-weight: 600;
    color: #263238;
    word-break: break-word;
}

.meter-action-summary .meter-identity-asset-name a {
    color: var(--primary-back, #00695c);
}

.meter-action-summary .meter-identity-asset-name a:hover {
    color: var(--primary-disable, #00564e);
    text-decoration: underline;
}

.meter-action-summary .meter-identity-asset-loc {
    font-size: 0.78rem;
    color: #78909c;
    margin-top: 5px;
    display: flex;
    flex-wrap: wrap;
    gap: 4px 12px;
    align-items: center;
}

.meter-action-summary .meter-identity-name {
    color: #212529;
    font-size: 1.45rem;
    font-weight: 700;
    line-height: 1.2;
    word-break: break-word;
}

.meter-action-summary .meter-unit-badge {
    background: rgba(var(--primary-rgb, 0, 150, 136), 0.08);
    color: rgb(0, 143, 126);
    padding: 5px 12px;
    border-radius: 999px;
    font-size: 0.82rem;
    font-weight: 600;
    border: 1px solid rgba(var(--primary-rgb, 0, 150, 136), 0.18);
    max-width: 100%;
    flex-shrink: 0;
    white-space: nowrap;
}

.meter-action-summary .meter-unit-badge .fa {
    opacity: 0.9;
}

[data-theme="dark"] .meter-action-summary .meter-identity-name {
    color: #e5e7eb;
}

[data-theme="dark"] .meter-action-summary .meter-identity-meta-row {
    color: #94a3b8;
}

[data-theme="dark"] .meter-action-summary .meter-identity-asset-panel {
    background: rgba(45, 212, 191, 0.08);
    border-color: rgba(45, 212, 191, 0.2);
}

[data-theme="dark"] .meter-action-summary .meter-identity-asset-name {
    color: #e5e7eb;
}

[data-theme="dark"] .meter-action-summary .meter-identity-asset-name a {
    color: var(--primary-hover, #5eead4);
}

[data-theme="dark"] .meter-action-summary .meter-identity-asset-name a:hover {
    color: var(--primary-light, #99f6e4);
}

[data-theme="dark"] .meter-action-summary .meter-identity-asset-ico {
    opacity: 0.7;
}

.meter-submit-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 8px;
    padding-bottom: 10px;
    margin-bottom: 2px;
}

.meter-submit-title {
    margin: 0;
    font-size: 1.2rem;
    font-weight: 700;
    color: #212529;
    letter-spacing: -0.02em;
}

.meter-submit-sub {
    margin: 2px 0 0;
    font-size: 0.75rem;
    color: #757575;
}

.meter-submit-schedule-badge {
    flex-shrink: 0;
    font-size: 0.8rem;
    font-weight: 600;
    color: #616161;
    background: #f1f3f5;
    border: 1px solid #e0e0e0;
    border-radius: 999px;
    padding: 3px 8px;
    line-height: 1.2;
}

.meter-submit-nextdue {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    background: var(--success-light, #c3e6cb);
    border: 1px solid var(--success-hover, #b1dfbb);
    border-radius: 8px;
    padding: 8px 10px;
    margin-bottom: 12px;
}

.meter-submit-next-assign {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 6px;
    align-items: stretch;
    margin-bottom: 12px;
}

.meter-submit-next-assign--assign-only {
    grid-template-columns: 1fr;
}

.meter-submit-next-assign .meter-submit-nextdue {
    margin-bottom: 0;
    height: 100%;
    box-sizing: border-box;
}

.meter-submit-stat-box--assign {
    display: flex;
    flex-direction: column;
    justify-content: center;
    min-height: 100%;
    box-sizing: border-box;
}

.meter-submit-nextdue-icon {
    width: 26px;
    height: 26px;
    border-radius: 6px;
    border: 2px solid var(--primary-back, #00695c);
    background: rgba(0, 105, 92, 0.06);
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    line-height: 1;
    color: var(--primary-back, #00695c);
}

.meter-submit-nextdue-icon .fa {
    color: inherit;
    font-size: 0.72rem;
}

.meter-submit-nextdue-k {
    font-size: 0.58rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    color: var(--primary-back, #00695c);
    margin: 0 0 2px;
}

.meter-submit-nextdue-v {
    font-size: 0.9rem;
    font-weight: 700;
    color: var(--primary-back, #00695c);
    margin: 0;
    line-height: 1.2;
}

.meter-submit-nextdue--today {
    background: #ffebee;
    border-color: #ef9a9a;
}

.meter-submit-nextdue--today .meter-submit-nextdue-icon {
    border-color: #c62828;
    background: rgba(198, 40, 40, 0.06);
    color: #b71c1c;
}

.meter-submit-nextdue--today .meter-submit-nextdue-k,
.meter-submit-nextdue--today .meter-submit-nextdue-v {
    color: #b71c1c;
}

.meter-submit-label {
    display: block;
    font-size: 0.68rem;
    font-weight: 700;
    letter-spacing: 0.10em;
    color: #757575;
    margin: 0 0 5px;
}

.meter-submit-label .meter-opt {
    font-weight: 500;
    color: #9e9e9e;
    letter-spacing: 0.02em;
}

.meter-submit-label .req {
    color: #c62828;
    font-weight: 700;
}

.meter-reading-field-wrap {
    position: relative;
    border: 1px solid #e0e0e0;
    border-radius: 8px;
    background: #fff;
    display: flex;
    align-items: center;
    min-height: 40px;
    padding: 2px 10px;
    margin-bottom: 10px;
}

.meter-reading-field-wrap:focus-within {
    border-color: var(--primary-back, #00695c);
    box-shadow: 0 0 0 2px rgba(0, 105, 92, 0.12);
}

.meter-reading-field-wrap input[type="number"],
.meter-reading-field-wrap input[type="text"] {
    border: 0;
    box-shadow: none;
    font-size: 1.15rem;
    font-weight: 700;
    color: #212529;
    flex: 1;
    min-width: 0;
    padding: 4px 6px 4px 0;
    height: auto;
    background: transparent;
}

.meter-reading-field-wrap input[type="number"]:focus,
.meter-reading-field-wrap input[type="text"]:focus {
    outline: none;
    box-shadow: none;
}

.meter-reading-field-wrap input[type="text"]::placeholder,
.meter-reading-field-wrap input[type="text"]::-webkit-input-placeholder,
.meter-reading-field-wrap input[type="text"]::-moz-placeholder {
    color: #9e9e9e;
    opacity: 1;
    font-size: 0.80em;
    font-weight: 400;
    letter-spacing: 0.02em;
}

.meter-reading-field-wrap.meter-reading-field-wrap--sm {
    min-height: 34px;
    padding: 2px 8px;
    margin-bottom: 8px;
}

.meter-reading-field-wrap.meter-reading-field-wrap--sm input[type="text"],
.meter-reading-field-wrap.meter-reading-field-wrap--sm input[type="number"] {
    font-size: 0.95rem;
    font-weight: 600;
    padding: 2px 4px 2px 0;
}

.meter-reading-field-wrap.meter-reading-field-wrap--sm .meter-reading-unit-suffix {
    font-size: 0.72rem;
}

.meter-reading-field-wrap .meter-reading-unit-suffix {
    font-size: 0.8rem;
    font-weight: 600;
    color: #9e9e9e;
    white-space: nowrap;
    padding-left: 6px;
}

.meter-submit-stats {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 6px;
    margin-bottom: 10px;
}

.meter-submit-stat-box {
    background: #f8f9fa;
    border: 1px solid #eceff1;
    border-radius: 8px;
    padding: 8px 10px;
}

.meter-submit-stat-k {
    font-size: 0.58rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    color: #757575;
    margin: 0 0 4px;
}

.meter-submit-stat-v {
    font-size: 0.85rem;
    font-weight: 700;
    color: #212529;
    margin: 0;
    line-height: 1.25;
}

.meter-submit-stat-v--asset {
    font-weight: 600;
    word-break: break-word;
}

.meter-submit-stat-v--asset a {
    font-weight: 700;
}

.meter-submit-stat-v.muted {
    color: #9e9e9e;
    font-weight: 600;
}

.meter-submit-remarks-plain {
    margin-bottom: 10px;
}

.meter-submit-remarks-plain textarea.form-control,
.meter-submit-remarks-plain input.form-control {
    font-size: 0.875rem;
}

.meter-ai-analysis-box {
    border: 1px solid rgba(23, 162, 184, 0.25);
    background: rgba(23, 162, 184, 0.06);
    border-radius: 6px;
    padding: 0.6rem 0.7rem;
}

.meter-ai-analysis-box .small {
    font-size: 0.8rem;
}

.meter-dropzone {
    border: 2px dashed #cfd8dc;
    border-radius: 8px;
    background: #fafafa;
    padding: 12px 10px;
    text-align: center;
    cursor: pointer;
    transition: border-color 0.15s, background 0.15s;
    margin-bottom: 10px;
}

.meter-dropzone:hover,
.meter-dropzone.meter-dropzone--drag {
    border-color: var(--primary-back, #00695c);
    background: #f1f8f6;
}

.meter-dropzone-icon {
    font-size: 0.9rem;
    color: #90a4ae;
    margin-bottom: 4px;
}

.meter-dropzone-title {
    margin: 0;
    font-size: 0.78rem;
    color: #424242;
}

.meter-dropzone-title .meter-browse-link {
    color: var(--primary-back, #00695c);
    font-weight: 700;
    cursor: pointer;
    text-decoration: none;
}

.meter-dropzone-title .meter-browse-link:hover {
    text-decoration: underline;
}

.meter-dropzone-meta {
    margin: 4px 0 0;
    font-size: 0.65rem;
    color: #9e9e9e;
}

.meter-dropzone-filename {
    margin-top: 4px;
    font-size: 0.72rem;
    color: var(--primary-back, #00695c);
    word-break: break-all;
}

.meter-submit-actions-wrap {
    margin-top: 10px;
    padding-top: 2px;
}

[data-theme="dark"] .meter-submit-title {
    color: #e5e7eb;
}

[data-theme="dark"] .meter-submit-sub,
[data-theme="dark"] .meter-submit-label {
    color: #94a3b8;
}

[data-theme="dark"] .meter-submit-schedule-badge {
    background: #374151;
    border-color: #4b5563;
    color: #e5e7eb;
}

[data-theme="dark"] .meter-submit-nextdue {
    background: rgba(16, 185, 129, 0.12);
    border-color: rgba(52, 211, 153, 0.35);
}

[data-theme="dark"] .meter-submit-nextdue-k,
[data-theme="dark"] .meter-submit-nextdue-v {
    color: #6ee7b7;
}

[data-theme="dark"] .meter-submit-nextdue--today {
    background: rgba(248, 113, 113, 0.12);
    border-color: rgba(248, 113, 113, 0.45);
}

[data-theme="dark"] .meter-submit-nextdue-icon {
    color: #6ee7b7;
    border-color: rgba(52, 211, 153, 0.65);
}

[data-theme="dark"] .meter-submit-nextdue--today .meter-submit-nextdue-icon {
    border-color: #f87171;
    background: rgba(248, 113, 113, 0.1);
    color: #fca5a5;
}

[data-theme="dark"] .meter-submit-nextdue--today .meter-submit-nextdue-k,
[data-theme="dark"] .meter-submit-nextdue--today .meter-submit-nextdue-v {
    color: #fca5a5;
}

[data-theme="dark"] .meter-reading-field-wrap,
[data-theme="dark"] .meter-submit-stat-box {
    background: #252525;
    border-color: #3b4757;
}

[data-theme="dark"] .meter-reading-field-wrap input {
    color: #e5e7eb;
    background: transparent;
}

[data-theme="dark"] .meter-reading-field-wrap input::placeholder,
[data-theme="dark"] .meter-reading-field-wrap input::-webkit-input-placeholder,
[data-theme="dark"] .meter-reading-field-wrap input::-moz-placeholder {
    color: #64748b;
    opacity: 1;
    font-weight: 400;
}

[data-theme="dark"] .meter-submit-stat-v {
    color: #e5e7eb;
}

[data-theme="dark"] .meter-submit-stat-v--asset a {
    color: #7dd3fc;
}

[data-theme="dark"] .meter-dropzone {
    background: #252525;
    border-color: #4b5563;
}

[data-theme="dark"] .meter-dropzone:hover,
[data-theme="dark"] .meter-dropzone.meter-dropzone--drag {
    border-color: #34d399;
    background: rgba(16, 185, 129, 0.1);
}

[data-theme="dark"] .meter-dropzone-title {
    color: #e5e7eb;
}

[data-theme="dark"] .meter-dropzone-icon {
    color: #64748b;
}

[data-theme="dark"] .meter-dropzone-meta {
    color: #94a3b8;
}

[data-theme="dark"] .meter-dropzone-filename {
    color: #6ee7b7;
}

[data-theme="dark"] .meter-dropzone-title .meter-browse-link {
    color: var(--primary-hover, #5eead4);
}

[data-theme="dark"] .meter-submit-label .meter-opt {
    color: #64748b;
}

.meter-ai-bill-panel .meter-ai-bill-preview-wrap {
    min-height: 0;
}

.meter-ai-bill-panel.meter-ai-bill-panel--has-file .meter-ai-bill-preview-wrap {
    min-height: 72px;
}

.meter-ai-bill-panel .meter-ai-bill-preview-empty {
    border: 1px dashed rgba(0, 0, 0, .15);
    border-radius: 8px;
    padding: 12px 14px;
    background: #f8f9fa;
    line-height: 1.35;
}

.meter-ai-bill-panel .meter-ai-bill-preview-link {
    display: block;
    text-decoration: none;
    color: inherit;
    cursor: pointer;
}

.meter-ai-bill-panel .meter-ai-bill-preview-link:hover {
    text-decoration: none;
    opacity: 0.92;
}

.meter-ai-bill-panel .meter-ai-bill-preview-link:focus {
    outline: 2px solid rgba(0, 123, 255, .35);
    outline-offset: 2px;
}

.meter-ai-bill-panel #meter_ai_bill_preview_img {
    max-height: 200px;
    width: auto;
    display: block;
    cursor: pointer;
}

.meter-ai-bill-panel .meter-ai-bill-pdf-tile {
    border: 1px solid rgba(0, 0, 0, .12);
    border-radius: 8px;
    padding: 14px;
    text-align: center;
    max-width: 220px;
    background: #fff;
    cursor: pointer;
}

.meter-ai-bill-panel .meter-ai-bill-toolbar .btn {
    width: 100%;
}

[data-theme="dark"] .meter-ai-bill-panel .meter-ai-bill-preview-empty {
    background: #252525;
    border-color: #4b5563;
    color: #94a3b8;
}

[data-theme="dark"] .meter-ai-bill-panel .meter-ai-bill-preview-empty strong {
    color: #e5e7eb;
}

[data-theme="dark"] .meter-ai-bill-panel .meter-ai-bill-pdf-tile {
    background: #252525;
    border-color: #4b5563;
    color: #e5e7eb;
}

[data-theme="dark"] .meter-ai-bill-panel .meter-ai-bill-pdf-tile .text-primary {
    color: #7dd3fc !important;
}

[data-theme="dark"] .meter-ai-bill-panel #meter_ai_bill_preview_img {
    border-color: #4b5563 !important;
}

/* ==================== CUSTOM DASHBOARD MODAL ==================== */
#Custom-Dashboard.cd-modal .cd-modal-dialog {
    max-width: 920px;
    width: calc(100% - 2rem);
    margin-top: 3.25rem;
    margin-bottom: 1.5rem;
}

#Custom-Dashboard .cd-modal-content {
    border: 0;
    border-radius: 16px;
    overflow: hidden;
    box-shadow: 0 18px 48px rgba(15, 23, 42, 0.18);
    display: flex;
    flex-direction: column;
    min-height: min(32rem, calc(100vh - 4.75rem));
    max-height: calc(100vh - 4.75rem);
    background: #fff;
}

#Custom-Dashboard .cd-modal-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1rem;
    padding: 1.25rem 1.5rem;
    border-bottom: 1px solid rgba(0, 0, 0, 0.06);
    background: #fff;
    flex: 0 0 auto;
}

#Custom-Dashboard .cd-modal-header-main {
    display: flex;
    align-items: flex-start;
    gap: 0.875rem;
    min-width: 0;
}

#Custom-Dashboard .cd-modal-icon {
    width: 44px;
    height: 44px;
    border-radius: 12px;
    background: var(--primary, #009688);
    color: #fff;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 1.1rem;
    flex-shrink: 0;
}

#Custom-Dashboard .cd-modal-title {
    font-size: 1.25rem;
    font-weight: 700;
    color: #1f2937;
}

#Custom-Dashboard .cd-modal-subtitle {
    margin-top: 0.2rem;
    font-size: 0.875rem;
    color: #6b7280;
}

#Custom-Dashboard .cd-modal-close {
    margin: 0;
    padding: 0.35rem 0.55rem;
    opacity: 0.55;
}

#Custom-Dashboard .cd-modal-body {
    min-height: 0;
    max-height: none;
    overflow: hidden;
    background: #fff;
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
}

#Custom-Dashboard #customize-dashboard,
#Custom-Dashboard .cd-dashboard-form {
    flex: 1 1 auto;
    min-height: 0;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

#Custom-Dashboard .cd-modal-footer {
    padding: 0.9rem 1.5rem;
    border-top: 1px solid rgba(0, 0, 0, 0.06);
    background: #fff;
    justify-content: flex-end;
    gap: 0.65rem;
    flex: 0 0 auto;
}

#Custom-Dashboard .cd-layout {
    display: flex;
    align-items: stretch;
    flex: 1 1 auto;
    min-height: 0;
    max-height: none;
    overflow: hidden;
}

#Custom-Dashboard .cd-sidebar {
    width: 230px;
    flex-shrink: 0;
    display: flex;
    flex-direction: column;
    background: #f7f9f9;
    border-right: 1px solid rgba(0, 0, 0, 0.06);
    padding: 1rem 0.75rem 0.85rem;
}

#Custom-Dashboard .cd-nav {
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
}

#Custom-Dashboard .cd-nav-item {
    display: flex;
    align-items: center;
    gap: 0.55rem;
    width: 100%;
    border: 0;
    background: transparent;
    border-radius: 10px;
    padding: 0.65rem 0.7rem;
    text-align: left;
    color: #4b5563;
    font-size: 0.875rem;
    font-weight: 500;
    position: relative;
    transition: background-color 0.15s ease, color 0.15s ease;
}

#Custom-Dashboard .cd-nav-item:hover {
    background: rgba(var(--primary-rgb, 0, 150, 136), 0.08);
    color: #1f2937;
}

#Custom-Dashboard .cd-nav-item.is-active {
    background: #fff;
    color: #111827;
    font-weight: 600;
    box-shadow: 0 1px 2px rgba(15, 23, 42, 0.06);
}

#Custom-Dashboard .cd-nav-item.is-active::before {
    content: "";
    position: absolute;
    left: -0.75rem;
    top: 0.45rem;
    bottom: 0.45rem;
    width: 4px;
    border-radius: 0 4px 4px 0;
    background: var(--primary, #009688);
}

#Custom-Dashboard .cd-nav-item .cd-nav-icon {
    width: 1rem;
    text-align: center;
    color: #6b7280;
    flex-shrink: 0;
}

#Custom-Dashboard .cd-nav-item.is-active .cd-nav-icon {
    color: var(--primary, #009688);
}

#Custom-Dashboard .cd-nav-label {
    flex: 1;
    min-width: 0;
    line-height: 1.25;
}

#Custom-Dashboard .cd-nav-label-short {
    display: none;
}

#Custom-Dashboard .cd-preview-block.is-on {
    background: rgba(var(--primary-rgb, 0, 150, 136), 0.45);
}

#Custom-Dashboard .cd-nav-badge {
    min-width: 1.35rem;
    height: 1.35rem;
    padding: 0 0.35rem;
    border-radius: 999px;
    background: #e5e7eb;
    color: #4b5563;
    font-size: 0.7rem;
    font-weight: 700;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

#Custom-Dashboard .cd-nav-item.is-active .cd-nav-badge {
    background: rgba(var(--primary-rgb, 0, 150, 136), 0.14);
    color: var(--primary-btn-hover, #00796b);
}

#Custom-Dashboard .cd-preview {
    margin-top: auto;
    padding-top: 1rem;
}

#Custom-Dashboard .cd-preview-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 0.55rem;
}

#Custom-Dashboard .cd-preview-label {
    font-size: 0.68rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    color: #9ca3af;
}

#Custom-Dashboard .cd-preview-count {
    font-size: 0.68rem;
    font-weight: 700;
    color: var(--primary, #009688);
}

#Custom-Dashboard .cd-preview-skeleton {
    background: #eef2f2;
    border-radius: 12px;
    padding: 0.65rem;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.45rem;
}

#Custom-Dashboard .cd-preview-block {
    height: 0.55rem;
    border-radius: 999px;
    background: #d7dede;
}

#Custom-Dashboard .cd-preview-block.is-tall {
    height: 1.35rem;
    border-radius: 8px;
}

#Custom-Dashboard .cd-reset-btn {
    margin-top: 0.85rem;
    border: 0;
    background: transparent;
    color: #6b7280;
    font-size: 0.82rem;
    font-weight: 500;
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.35rem 0.2rem;
}

#Custom-Dashboard .cd-reset-btn:hover {
    color: var(--primary, #009688);
}

#Custom-Dashboard .cd-panels {
    flex: 1;
    min-width: 0;
    min-height: 0;
    overflow-y: auto;
    padding: 1.25rem 1.5rem 2.25rem;
    background: #fff;
}

#Custom-Dashboard .cd-panel {
    display: none;
}

#Custom-Dashboard .cd-panel.is-active {
    display: block;
}

#Custom-Dashboard .cd-section {
    margin-bottom: 1.35rem;
}

#Custom-Dashboard .cd-section:last-child {
    margin-bottom: 0;
}

#Custom-Dashboard .cd-section-head {
    display: flex;
    align-items: flex-start;
    gap: 0.55rem;
    margin-bottom: 0.85rem;
}

#Custom-Dashboard .cd-section-icon {
    width: 1.75rem;
    height: 1.75rem;
    border-radius: 8px;
    background: rgba(var(--primary-rgb, 0, 150, 136), 0.1);
    color: var(--primary, #009688);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    font-size: 0.85rem;
}

#Custom-Dashboard .cd-section-title {
    font-size: 0.95rem;
    font-weight: 700;
    color: #111827;
    margin: 0;
}

#Custom-Dashboard .cd-section-desc {
    margin: 0.15rem 0 0;
    font-size: 0.8rem;
    color: #6b7280;
}

#Custom-Dashboard .cd-field-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.85rem;
}

#Custom-Dashboard .cd-field-grid .cd-field-full {
    grid-column: 1 / -1;
}

#Custom-Dashboard .cd-card {
    border: 1px solid rgba(0, 0, 0, 0.06);
    border-radius: 12px;
    padding: 0.9rem 1rem;
    background: #fff;
}

#Custom-Dashboard .cd-feature-group {
    margin-bottom: 1rem;
}

#Custom-Dashboard .cd-feature-group:last-child {
    margin-bottom: 0;
}

#Custom-Dashboard .cd-feature-group-head {
    display: flex;
    align-items: center;
    gap: 0.45rem;
    padding: 0.55rem 0.75rem;
    margin-bottom: 0.35rem;
    border-radius: 10px;
    background: #f0f4f4;
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.05em;
    color: #4b5563;
    text-transform: uppercase;
}

#Custom-Dashboard .cd-feature-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: 0.8rem 0.75rem;
    border-bottom: 1px solid rgba(0, 0, 0, 0.05);
}

#Custom-Dashboard .cd-feature-row:last-child {
    border-bottom: 0;
}

#Custom-Dashboard .cd-feature-info {
    min-width: 0;
}

#Custom-Dashboard .cd-feature-title {
    font-size: 0.9rem;
    font-weight: 600;
    color: #111827;
}

#Custom-Dashboard .cd-feature-title i {
    margin-right: 0.35rem;
    color: #6b7280;
}

#Custom-Dashboard .cd-feature-desc {
    margin-top: 0.15rem;
    font-size: 0.78rem;
    color: #6b7280;
}

#Custom-Dashboard .cd-feature-toggle {
    flex-shrink: 0;
}

#Custom-Dashboard .cd-feature-toggle .animated-checkbox {
    margin-bottom: 0;
}

#Custom-Dashboard .cd-feature-toggle .animated-checkbox label {
    margin-bottom: 0;
}

#Custom-Dashboard .cd-feature-toggle .animated-checkbox .label-text {
    padding-left: 0;
}

#Custom-Dashboard .cd-feature-toggle .animated-checkbox .label-text:before {
    margin-right: 0;
}

#Custom-Dashboard .cd-feature-subrow {
    padding-left: 1.75rem;
}

#Custom-Dashboard .widget-sync-method-card {
    border: 1px solid #dee2e6;
    border-radius: 10px;
    padding: 10px 12px;
    background: #fff;
}

#Custom-Dashboard .widget-sync-method-title {
    font-size: 0.875rem;
    font-weight: 500;
    color: var(--secondary, #6c757d);
    margin-bottom: 8px;
}

#Custom-Dashboard .widget-sync-method-options {
    margin-left: 0;
    margin-right: 0;
}

#Custom-Dashboard .widget-sync-option {
    display: flex;
    align-items: center;
    border: 1px solid #dee2e6;
    border-radius: 10px;
    padding: 10px 12px;
    margin-bottom: 0;
    cursor: pointer;
    width: 100%;
    font-weight: 500;
    color: inherit;
    transition: border-color .15s ease, background-color .15s ease;
}

#Custom-Dashboard .widget-sync-option:hover {
    border-color: #adb5bd;
    background: #f8f9fa;
}

#Custom-Dashboard .widget-sync-option .animated-checkbox {
    margin-bottom: 0;
    flex-shrink: 0;
}

#Custom-Dashboard .widget-sync-option .label-text {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-weight: 500;
}

#Custom-Dashboard .widget-template-settings-link {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 0.8rem;
}

#Custom-Dashboard .select2-container {
    z-index: 1090 !important;
}

#Custom-Dashboard .select2-dropdown {
    z-index: 1091 !important;
}

#Custom-Dashboard .wp-print-anchor {
    position: relative;
    z-index: 1;
}

#Custom-Dashboard .wp-print-anchor.is-open {
    z-index: 20;
}

#Custom-Dashboard .wp-print-picker {
    display: none;
    position: absolute;
    bottom: calc(100% + 6px);
    top: auto;
    left: 0;
    right: 0;
    z-index: 1060;
    background: #fff;
    border: 1px solid rgba(0, 0, 0, 0.15);
    border-radius: 10px;
    box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.15);
}

#Custom-Dashboard .wp-print-picker.show {
    display: block;
}

#Custom-Dashboard .wp-print-picker__header,
#Custom-Dashboard .wp-print-picker__footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.5rem 0.75rem;
    border-bottom: 1px solid rgba(0, 0, 0, 0.08);
}

#Custom-Dashboard .wp-print-picker__footer {
    border-bottom: 0;
    border-top: 1px solid rgba(0, 0, 0, 0.08);
    justify-content: flex-end;
    gap: 0.5rem;
}

#Custom-Dashboard .wp-print-picker__body {
    padding: 0.75rem;
}

@media (max-width: 767.98px) {
    #Custom-Dashboard .cd-modal-dialog {
        width: calc(100% - 1rem);
        margin: 0.5rem auto;
    }

    #Custom-Dashboard .cd-modal-content {
        max-height: calc(100dvh - 5rem);
        min-height: 0;
        overflow: hidden !important;
        display: flex;
        flex-direction: column;
    }

    #Custom-Dashboard .cd-modal-header,
    #Custom-Dashboard .cd-modal-footer {
        flex: 0 0 auto;
    }

    #Custom-Dashboard .cd-modal-body,
    #Custom-Dashboard #customize-dashboard {
        flex: 1 1 auto;
        min-height: 0 !important;
        max-height: none !important;
        overflow: hidden !important;
        display: flex;
        flex-direction: column;
    }

    #Custom-Dashboard .cd-dashboard-form {
        flex: 1;
        min-height: 0;
        display: flex;
        flex-direction: column;
        overflow: hidden;
    }

    #Custom-Dashboard .cd-layout {
        flex: 1;
        flex-direction: column;
        min-height: 0 !important;
        max-height: none !important;
        display: flex;
        overflow: hidden;
    }

    #Custom-Dashboard .cd-sidebar {
        flex-shrink: 0;
        width: 100%;
        border-right: 0;
        border-bottom: 1px solid rgba(0, 0, 0, 0.06);
        padding: 0.55rem 0.45rem 0.5rem;
        background: #f7f9f9;
    }

    [data-theme="dark"] #Custom-Dashboard .cd-sidebar {
        background: #171717;
        border-bottom-color: rgba(255, 255, 255, 0.08);
    }

    #Custom-Dashboard .cd-panels {
        flex: 1;
        min-height: 0;
        overflow-y: auto !important;
        overflow-x: hidden;
        -webkit-overflow-scrolling: touch;
        overscroll-behavior: contain;
        touch-action: pan-y;
    }

    #Custom-Dashboard .cd-nav {
        flex-direction: row;
        flex-wrap: nowrap;
        overflow-x: hidden;
        gap: 0.25rem;
    }

    #Custom-Dashboard .cd-nav-item {
        flex: 1 1 0;
        min-width: 0;
        white-space: normal;
        padding: 0.42rem 0.28rem;
        font-size: 0.68rem;
        gap: 0.2rem;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        text-align: center;
        position: relative;
    }

    #Custom-Dashboard .cd-nav-item .cd-nav-icon {
        font-size: 0.8rem;
    }

    #Custom-Dashboard .cd-nav-label {
        font-size: 0.62rem;
        line-height: 1.1;
    }

    #Custom-Dashboard .cd-nav-label-full {
        display: none;
    }

    #Custom-Dashboard .cd-nav-label-short {
        display: inline;
    }

    #Custom-Dashboard .cd-nav-badge {
        position: absolute;
        top: 0.15rem;
        right: 0.15rem;
        min-width: 1rem;
        height: 1rem;
        padding: 0 0.2rem;
        font-size: 0.58rem;
    }

    #Custom-Dashboard .cd-nav-item.is-active::before {
        left: 0.35rem;
        right: 0.35rem;
        top: auto;
        bottom: -0.28rem;
        width: auto;
        height: 2px;
        border-radius: 4px 4px 0 0;
    }

    #Custom-Dashboard .cd-preview {
        display: none;
    }

    #Custom-Dashboard .cd-reset-btn {
        display: inline-flex;
        width: 100%;
        justify-content: center;
        margin-top: 0.35rem;
        padding: 0.3rem 0.2rem;
        font-size: 0.72rem;
    }

    #Custom-Dashboard .cd-field-grid {
        grid-template-columns: 1fr;
    }

    body.cd-modal-scroll-lock {
        overflow: hidden !important;
        position: fixed !important;
        width: 100% !important;
        left: 0;
        right: 0;
    }
}

[data-theme="dark"] #Custom-Dashboard .cd-modal-content,
[data-theme="dark"] #Custom-Dashboard .cd-modal-header,
[data-theme="dark"] #Custom-Dashboard .cd-modal-footer,
[data-theme="dark"] #Custom-Dashboard .cd-modal-body,
[data-theme="dark"] #Custom-Dashboard .cd-panels {
    background: #1f1f1f;
}

[data-theme="dark"] #Custom-Dashboard .cd-modal-header,
[data-theme="dark"] #Custom-Dashboard .cd-modal-footer {
    border-color: rgba(255, 255, 255, 0.08);
}

[data-theme="dark"] #Custom-Dashboard .cd-modal-title,
[data-theme="dark"] #Custom-Dashboard .cd-section-title,
[data-theme="dark"] #Custom-Dashboard .cd-feature-title,
[data-theme="dark"] #Custom-Dashboard .cd-nav-item.is-active {
    color: #f3f4f6;
}

[data-theme="dark"] #Custom-Dashboard .cd-modal-subtitle,
[data-theme="dark"] #Custom-Dashboard .cd-section-desc,
[data-theme="dark"] #Custom-Dashboard .cd-feature-desc,
[data-theme="dark"] #Custom-Dashboard .cd-nav-item,
[data-theme="dark"] #Custom-Dashboard .cd-reset-btn {
    color: #9ca3af;
}

[data-theme="dark"] #Custom-Dashboard .cd-modal-close {
    color: #e5e7eb;
    text-shadow: none;
    opacity: 0.75;
}

[data-theme="dark"] #Custom-Dashboard .cd-modal-close:hover {
    color: #fff;
    opacity: 1;
}

[data-theme="dark"] #Custom-Dashboard .cd-modal-footer .btn-outline-secondary {
    color: #e5e7eb;
    border-color: rgba(255, 255, 255, 0.28);
    background: transparent;
}

[data-theme="dark"] #Custom-Dashboard .cd-modal-footer .btn-outline-secondary:hover,
[data-theme="dark"] #Custom-Dashboard .cd-modal-footer .btn-outline-secondary:focus {
    color: #fff;
    border-color: rgba(255, 255, 255, 0.45);
    background: rgba(255, 255, 255, 0.06);
}

[data-theme="dark"] #Custom-Dashboard .cd-sidebar {
    background: #171717;
    border-color: rgba(255, 255, 255, 0.08);
}

[data-theme="dark"] #Custom-Dashboard .cd-nav-item:hover {
    background: rgba(var(--primary-rgb, 0, 150, 136), 0.16);
    color: #f3f4f6;
}

[data-theme="dark"] #Custom-Dashboard .cd-nav-item.is-active {
    background: #262626;
}

[data-theme="dark"] #Custom-Dashboard .cd-nav-badge {
    background: #3f3f46;
    color: #d1d5db;
}

[data-theme="dark"] #Custom-Dashboard .cd-nav-item.is-active .cd-nav-badge {
    background: rgba(var(--primary-rgb, 0, 150, 136), 0.22);
    color: var(--primary-hover, #5eead4);
}

[data-theme="dark"] #Custom-Dashboard .cd-preview-skeleton {
    background: #262626;
}

[data-theme="dark"] #Custom-Dashboard .cd-preview-block {
    background: #3f3f3f;
}

[data-theme="dark"] #Custom-Dashboard .cd-preview-block.is-on {
    background: rgba(var(--primary-rgb, 0, 150, 136), 0.55);
}

[data-theme="dark"] #Custom-Dashboard .cd-feature-group-head {
    background: #262626;
    color: #d1d5db;
}

[data-theme="dark"] #Custom-Dashboard .cd-feature-row,
[data-theme="dark"] #Custom-Dashboard .cd-card {
    background: #262626;
    border-color: rgba(255, 255, 255, 0.08);
    color: #e5e7eb;
}

[data-theme="dark"] #Custom-Dashboard .cd-card .cd-field-label {
    color: #d1d5db;
}

[data-theme="dark"] #Custom-Dashboard .cd-card .text-muted {
    color: #9ca3af !important;
}

[data-theme="dark"] #Custom-Dashboard .cd-section-icon {
    background: rgba(var(--primary-rgb, 0, 150, 136), 0.2);
}

[data-theme="dark"] #Custom-Dashboard .widget-sync-method-card {
    border-color: #444;
    background: #262626;
}

[data-theme="dark"] #Custom-Dashboard .widget-sync-option {
    border-color: #555;
    background: #333;
    color: #e2e8f0;
}

[data-theme="dark"] #Custom-Dashboard .widget-sync-option.is-active {
    border-color: #4dabf7;
    background: rgba(77, 171, 247, 0.14);
}

[data-theme="dark"] #Custom-Dashboard .wp-print-picker {
    background: #2b2b2b;
    border-color: rgba(255, 255, 255, 0.12);
}

/* ===== Shared dashboard / widget modal ===== */
#Custom-Dashboard .cd-field-label,
:is(#Modal_Add, #Modal_Edit) #yourFormID .aw-field-label,
:is(#Modal_Add, #Modal_Edit) #yourFormID .widget-filter-tab-content small.text-muted,
:is(#Modal_Add, #Modal_Edit) #yourFormID .custom-widget-mode-row .cw-field-wrap>small.text-muted,
:is(#Modal_Add, #Modal_Edit) #yourFormID .custom-widget-line .cw-field-wrap>small.text-muted,
:is(#Modal_Add, #Modal_Edit) #yourFormID .custom-widget-line .cw-line-color-head>small.text-muted {
    display: block;
    font-size: 0.78rem;
    font-weight: 700;
    color: #37474f !important;
    text-align: left;
    margin-bottom: 0.25rem;
}

[data-theme="dark"] #Custom-Dashboard .cd-field-label,
[data-theme="dark"] :is(#Modal_Add, #Modal_Edit) #yourFormID .aw-field-label,
[data-theme="dark"] :is(#Modal_Add, #Modal_Edit) #yourFormID .widget-filter-tab-content small.text-muted,
[data-theme="dark"] :is(#Modal_Add, #Modal_Edit) #yourFormID .custom-widget-mode-row .cw-field-wrap>small.text-muted,
[data-theme="dark"] :is(#Modal_Add, #Modal_Edit) #yourFormID .custom-widget-line .cw-field-wrap>small.text-muted,
[data-theme="dark"] :is(#Modal_Add, #Modal_Edit) #yourFormID .custom-widget-line .cw-line-color-head>small.text-muted {
    color: #e5e7eb !important;
}

/* Optional display title rename (standard widgets) */
:is(#Modal_Add, #Modal_Edit) #yourFormID .widget-display-title-optional {
    margin-top: 0.15rem;
    margin-bottom: 0.35rem;
}

:is(#Modal_Add, #Modal_Edit) #yourFormID .widget-display-title-toggle {
    padding: 0.15rem 0;
    font-size: 0.82rem;
    font-weight: 600;
    color: rgba(0, 150, 136, 0.92);
    text-decoration: none;
    line-height: 1.35;
}

:is(#Modal_Add, #Modal_Edit) #yourFormID .widget-display-title-toggle:hover,
:is(#Modal_Add, #Modal_Edit) #yourFormID .widget-display-title-toggle:focus {
    color: rgba(0, 120, 110, 1);
    text-decoration: none;
}

:is(#Modal_Add, #Modal_Edit) #yourFormID .widget-display-title-toggle .fa {
    width: 0.85rem;
    margin-right: 0.2rem;
    font-size: 0.72rem;
}

:is(#Modal_Add, #Modal_Edit) #yourFormID .widget-display-title-body {
    margin-top: 0.35rem;
    padding: 0.55rem 0.65rem;
    border: 1px dashed rgba(0, 150, 136, 0.28);
    border-radius: 8px;
    background: rgba(0, 150, 136, 0.03);
}

:is(#Modal_Add, #Modal_Edit) #yourFormID .widget-display-title-body .aw-field-hint {
    margin-top: 0.35rem;
    font-size: 0.74rem;
    opacity: 0.85;
}

[data-theme="dark"] :is(#Modal_Add, #Modal_Edit) #yourFormID .widget-display-title-toggle {
    color: rgba(120, 220, 210, 0.95);
}

[data-theme="dark"] :is(#Modal_Add, #Modal_Edit) #yourFormID .widget-display-title-body {
    border-color: rgba(120, 220, 210, 0.22);
    background: rgba(0, 0, 0, 0.15);
}

/* Dashboard widget: site access restriction (synced template sites outside viewer's access) */
.widget-site-no-access {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    min-height: 140px;
    padding: 1.5rem 1rem;
    text-align: center;
    color: #6c757d;
    font-size: 0.9rem;
}

.widget-site-no-access .fa {
    font-size: 1.6rem;
    opacity: 0.6;
}

.widget-site-partial-hint {
    padding: 0.25rem 1.25rem 0;
}

[data-theme="dark"] .widget-site-no-access,
[data-theme="dark"] .widget-site-partial-hint .text-mute {
    color: #adb5bd;
}

/* Dashboard section title widget */
.widget-placements .widget-section-title-slot,
.personal-widgets-row .widget-section-title-slot {
    margin-bottom: 30px;
    position: relative;
    z-index: 1;
}

.widget-placements .widget-section-title-slot:hover,
.widget-placements .widget-section-title-slot .dropdown.show,
.personal-widgets-row .widget-section-title-slot:hover,
.personal-widgets-row .widget-section-title-slot .dropdown.show {
    z-index: 20;
}

.widget-section-title-card {
    position: relative;
    min-height: auto;
    height: auto;
    padding: 0.25rem 0;
    margin: 0;
    background: transparent;
    border: none;
    box-shadow: none;
}

.widget-section-title-slot .dropdown-menu {
    z-index: 1050;
}

.widget-section-title-tile__toolbar {
    min-height: 1.25rem;
    margin-bottom: 0;
}

.widget-section-title-tile__heading {
    font-size: 1.45rem;
    font-weight: 700;
    letter-spacing: 0.01em;
    color: #1f2933;
    line-height: 1.35;
    white-space: pre-line;
}

.widget-section-title-tile__subtitle {
    margin-top: 0.35rem;
    font-size: 0.92rem;
    line-height: 1.4;
    white-space: pre-line;
}

.widget-section-title-tile__body {
    padding: 0.35rem 0.75rem 0.85rem;
}

.tile.widget-modern .widget-section-title-tile {
    padding: 0.35rem 0.25rem 0.5rem;
}

/* Vertically center title/subtitle when row height follows a taller neighbor (h-100 tile). */
.tile.widget-modern.widget-section-title-host {
    display: flex;
    flex-direction: column;
    min-height: 100%;
}

.tile.widget-modern.widget-section-title-host,
.tile.widget-modern.widget-section-title-host:hover,
[data-theme="dark"] .tile.widget-modern.widget-section-title-host,
[data-theme="dark"] .tile.widget-modern.widget-section-title-host:hover {
    background: transparent;
    border: none;
    -webkit-box-shadow: none;
    box-shadow: none;
    transform: none;
}

.tile.widget-modern.widget-section-title-host .widget-section-title-tile__body {
    border-bottom: 1px solid rgba(0, 0, 0, 0.12);
}

[data-theme="dark"] .tile.widget-modern.widget-section-title-host {
    background-color: transparent !important;
}

[data-theme="dark"] .tile.widget-modern.widget-section-title-host .widget-section-title-tile__body {
    border-bottom-color: #3a3a3a;
}

.tile.widget-modern.widget-section-title-host .widget-section-title-tile {
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
    min-height: 0;
}

.tile.widget-modern.widget-section-title-host .widget-section-title-tile__toolbar {
    flex-shrink: 0;
}

.tile.widget-modern.widget-section-title-host .widget-section-title-tile__body {
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
}

.tile.widget-modern.widget-section-title-host .widget-section-title-tile__body--valign-top {
    justify-content: flex-start;
}

.tile.widget-modern.widget-section-title-host .widget-section-title-tile__body--valign-center {
    justify-content: center;
}

[data-theme="dark"] .widget-section-title-tile__heading {
    color: #e8eef2;
}

.wc-cron-section-title {
    font-size: 16px;
    font-weight: 700;
    color: #1f2933;
    padding: 4px 0 2px;
}

.wc-cron-section-subtitle {
    font-size: 11px;
    color: #6c757d;
    padding-bottom: 4px;
}

.wc-cron-section-title-rule {
    border: 0;
    margin: 6px 0 10px;
}

/* Bucket targets (PMSC / Timeliness / WO Backlog) */
:is(#Modal_Add, #Modal_Edit) #yourFormID .widget-bucket-targets-block {
    margin-top: 0.35rem;
    padding: 0.75rem 0.85rem;
    border: 1px solid rgba(0, 150, 136, 0.28);
    border-radius: 8px;
    background: rgba(0, 150, 136, 0.04);
}

:is(#Modal_Add, #Modal_Edit) #yourFormID .widget-bucket-targets-block__head {
    margin-bottom: 0.65rem;
}

:is(#Modal_Add, #Modal_Edit) #yourFormID .widget-bucket-targets-block__title {
    display: block;
    font-weight: 700;
    margin-bottom: 0.15rem;
}

:is(#Modal_Add, #Modal_Edit) #yourFormID .widget-bucket-targets-block__hint {
    display: block;
    font-size: 0.74rem;
    line-height: 1.35;
    opacity: 0.85;
}

:is(#Modal_Add, #Modal_Edit) #yourFormID #bucket_targets_grid .widget-bucket-targets-block__mode {
    margin-bottom: 0.65rem;
}

:is(#Modal_Add, #Modal_Edit) #yourFormID .widget-bucket-rows-head,
:is(#Modal_Add, #Modal_Edit) #yourFormID .widget-bucket-row {
    display: grid;
    grid-template-columns: 2.5rem minmax(0, 1fr) minmax(5.25rem, 6.75rem) 4.75rem;
    gap: 0.35rem 0.5rem;
    align-items: center;
    width: 100%;
}

:is(#Modal_Add, #Modal_Edit) #yourFormID .widget-bucket-rows-head {
    margin-top: 0.15rem;
    padding-bottom: 0.35rem;
    border-bottom: 1px solid rgba(0, 150, 136, 0.22);
    font-size: 0.68rem;
    font-weight: 700;
    letter-spacing: 0.02em;
    text-transform: uppercase;
    opacity: 0.78;
}

:is(#Modal_Add, #Modal_Edit) #yourFormID .widget-bucket-rows {
    display: flex;
    flex-direction: column;
    gap: 0.45rem;
    margin-top: 0.35rem;
}

:is(#Modal_Add, #Modal_Edit) #yourFormID .widget-bucket-row__label {
    font-size: 0.82rem;
    line-height: 1.3;
    min-width: 0;
    word-break: break-word;
}

:is(#Modal_Add, #Modal_Edit) #yourFormID .widget-bucket-row__compare,
:is(#Modal_Add, #Modal_Edit) #yourFormID .widget-bucket-row__target {
    min-width: 0;
}

:is(#Modal_Add, #Modal_Edit) #yourFormID .widget-bucket-row__target .form-control {
    height: calc(1.5em + 0.5rem + 2px);
    padding: 0.2rem 0.35rem;
    font-size: 0.82rem;
    width: 100%;
}

:is(#Modal_Add, #Modal_Edit) #yourFormID .widget-bucket-row__compare .form-control {
    height: calc(1.5em + 0.5rem + 2px);
    padding: 0.15rem 0.25rem;
    font-size: 0.78rem;
    width: 100%;
    max-width: 100%;
}

:is(#Modal_Add, #Modal_Edit) #yourFormID .widget-bucket-row__show {
    display: flex;
    align-items: center;
    justify-content: center;
}

:is(#Modal_Add, #Modal_Edit) #yourFormID .widget-bucket-show-check.animated-checkbox {
    margin: 0;
}

:is(#Modal_Add, #Modal_Edit) #yourFormID .widget-bucket-show-check.animated-checkbox label {
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0;
    padding-left: 0;
    min-height: 0;
}

:is(#Modal_Add, #Modal_Edit) #yourFormID .widget-bucket-show-check.animated-checkbox .label-text {
    padding-left: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 18px;
    height: 18px;
    line-height: 1;
}

:is(#Modal_Add, #Modal_Edit) #yourFormID .widget-bucket-show-check.animated-checkbox .label-text:before {
    margin-right: 0;
}

@media (max-width: 575.98px) {

    :is(#Modal_Add, #Modal_Edit) #yourFormID .widget-bucket-rows-head,
    :is(#Modal_Add, #Modal_Edit) #yourFormID .widget-bucket-row {
        grid-template-columns: 2.25rem minmax(0, 1fr) minmax(4.75rem, 6rem) 4.25rem;
        gap: 0.3rem 0.35rem;
    }
}

[data-theme="dark"] :is(#Modal_Add, #Modal_Edit) #yourFormID .widget-bucket-rows-head {
    border-bottom-color: rgba(77, 171, 247, 0.28);
}

[data-theme="dark"] :is(#Modal_Add, #Modal_Edit) #yourFormID .widget-bucket-targets-block {
    border-color: rgba(77, 171, 247, 0.35);
    background: rgba(77, 171, 247, 0.08);
}

/* Scrollbars: hidden until hover on widget tile or modal */
:is(#Modal_Add, #Modal_Edit) #yourFormID .widget-filter-tab-content,
#widgetsize .modal-body,
#Modal_Bulk_Body,
.widget-modern .example {
    scrollbar-width: thin;
    scrollbar-color: transparent transparent;
}

:is(#Modal_Add, #Modal_Edit):hover #yourFormID .widget-filter-tab-content,
#widgetsize:hover .modal-body,
#Modal_Bulk:hover #Modal_Bulk_Body,
.widget-modern:hover .example {
    scrollbar-color: rgba(0, 0, 0, 0.35) transparent;
}

:is(#Modal_Add, #Modal_Edit) #yourFormID .widget-filter-tab-content::-webkit-scrollbar,
#widgetsize .modal-body::-webkit-scrollbar,
#Modal_Bulk_Body::-webkit-scrollbar,
.widget-modern .example::-webkit-scrollbar {
    width: 6px;
    height: 6px;
}

:is(#Modal_Add, #Modal_Edit) #yourFormID .widget-filter-tab-content::-webkit-scrollbar-track,
#widgetsize .modal-body::-webkit-scrollbar-track,
#Modal_Bulk_Body::-webkit-scrollbar-track,
.widget-modern .example::-webkit-scrollbar-track {
    background: transparent;
}

:is(#Modal_Add, #Modal_Edit) #yourFormID .widget-filter-tab-content::-webkit-scrollbar-thumb,
#widgetsize .modal-body::-webkit-scrollbar-thumb,
#Modal_Bulk_Body::-webkit-scrollbar-thumb,
.widget-modern .example::-webkit-scrollbar-thumb {
    background: transparent;
    border-radius: 3px;
}

:is(#Modal_Add, #Modal_Edit):hover #yourFormID .widget-filter-tab-content::-webkit-scrollbar-thumb,
#widgetsize:hover .modal-body::-webkit-scrollbar-thumb,
#Modal_Bulk:hover #Modal_Bulk_Body::-webkit-scrollbar-thumb,
.widget-modern:hover .example::-webkit-scrollbar-thumb {
    background: rgba(0, 0, 0, 0.35);
}

[data-theme="dark"] :is(#Modal_Add, #Modal_Edit):hover #yourFormID .widget-filter-tab-content,
[data-theme="dark"] #widgetsize:hover .modal-body,
[data-theme="dark"] #Modal_Bulk:hover #Modal_Bulk_Body,
[data-theme="dark"] .widget-modern:hover .example {
    scrollbar-color: rgba(255, 255, 255, 0.35) transparent;
}

[data-theme="dark"] :is(#Modal_Add, #Modal_Edit):hover #yourFormID .widget-filter-tab-content::-webkit-scrollbar-thumb,
[data-theme="dark"] #widgetsize:hover .modal-body::-webkit-scrollbar-thumb,
[data-theme="dark"] #Modal_Bulk:hover #Modal_Bulk_Body::-webkit-scrollbar-thumb,
[data-theme="dark"] .widget-modern:hover .example::-webkit-scrollbar-thumb {
    background: rgba(255, 255, 255, 0.35);
}

/* Custom Widget Target % badge */
.widget-modern .cw-target-badge,
#Custom-Dashboard .cw-target-badge {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 0.3rem;
    margin: 0.5rem 0.75rem 0.25rem;
    padding: 0.45rem 0.65rem;
    border-radius: 8px;
    background: rgba(0, 150, 136, 0.08);
    border: 1px solid rgba(0, 150, 136, 0.22);
    font-size: 0.82rem;
    line-height: 1.35;
}

.widget-modern .cw-target-badge__row,
#Custom-Dashboard .cw-target-badge__row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.35rem 0.5rem;
}

.widget-modern .cw-target-badge__row+.cw-target-badge__row,
#Custom-Dashboard .cw-target-badge__row+.cw-target-badge__row {
    padding-top: 0.3rem;
    border-top: 1px solid rgba(0, 150, 136, 0.16);
}

.widget-modern .cw-target-badge__sep,
#Custom-Dashboard .cw-target-badge__sep {
    color: #90a4ae;
}

.widget-modern .cw-target-status,
#Custom-Dashboard .cw-target-status {
    display: inline-block;
    padding: 0.1rem 0.45rem;
    border-radius: 999px;
    font-weight: 700;
    font-size: 0.75rem;
}

.widget-modern .cw-target-status--met,
#Custom-Dashboard .cw-target-status--met {
    background: var(--cw-target-met-bg, rgba(110, 204, 132, 0.35));
    color: var(--cw-target-met-fg, #1b5e20);
}

.widget-modern .cw-target-status--miss,
#Custom-Dashboard .cw-target-status--miss {
    background: var(--cw-target-miss-bg, rgba(235, 151, 159, 0.45));
    color: var(--cw-target-miss-fg, #8b1e2d);
}

[data-theme="dark"] .widget-modern .cw-target-badge,
[data-theme="dark"] #Custom-Dashboard .cw-target-badge {
    background: rgba(0, 150, 136, 0.16);
    border-color: rgba(0, 199, 180, 0.28);
}

[data-theme="dark"] .widget-modern .cw-target-status--met,
[data-theme="dark"] #Custom-Dashboard .cw-target-status--met {
    color: var(--cw-target-met-fg, #c8e6c9);
}

[data-theme="dark"] .widget-modern .cw-target-status--miss,
[data-theme="dark"] #Custom-Dashboard .cw-target-status--miss {
    color: var(--cw-target-miss-fg, #ffcdd2);
}

/* Bucket Card widget legend (PMSC / Timeliness / Backlog) */
.widget-modern .cw-card-widget-block,
#Custom-Dashboard .cw-card-widget-block {
    width: 100%;
}

.widget-modern .cw-card-legend-wrap,
#Custom-Dashboard .cw-card-legend-wrap {
    width: 100%;
    margin-bottom: 0.25rem;
}

.widget-modern .cw-card-legend-table,
#Custom-Dashboard .cw-card-legend-table {
    width: 100%;
    border-collapse: collapse;
}

.widget-modern .cw-card-legend-table td,
#Custom-Dashboard .cw-card-legend-table td {
    padding: 3px;
    vertical-align: middle;
}

.widget-modern .cw-card.cw-card--legend-hidden,
#Custom-Dashboard .cw-card.cw-card--legend-hidden {
    display: none !important;
}

/* Custom Widget Card tiles */
.widget-modern .cw-card-grid,
#Custom-Dashboard .cw-card-grid {
    display: grid;
    gap: 0.65rem;
    padding: 0.5rem 0.65rem 0.75rem;
}

.widget-modern .cw-card-grid--cols-1,
#Custom-Dashboard .cw-card-grid--cols-1 {
    grid-template-columns: 1fr;
    justify-items: center;
}

.widget-modern .cw-card-grid--cols-1 .cw-card,
#Custom-Dashboard .cw-card-grid--cols-1 .cw-card {
    width: 100%;
    max-width: min(100%, var(--cw-card-max, 50%));
}

.widget-modern .cw-card-grid--cols-2,
#Custom-Dashboard .cw-card-grid--cols-2 {
    grid-template-columns: repeat(2, 1fr);
}

.widget-modern .cw-card-grid--cols-3,
#Custom-Dashboard .cw-card-grid--cols-3 {
    grid-template-columns: repeat(3, 1fr);
}

.widget-modern .cw-card-grid--cols-4,
#Custom-Dashboard .cw-card-grid--cols-4 {
    grid-template-columns: repeat(4, 1fr);
}

.widget-modern .cw-card-grid--cols-5,
#Custom-Dashboard .cw-card-grid--cols-5 {
    grid-template-columns: repeat(5, 1fr);
}

.widget-modern .cw-card-grid--cols-6,
#Custom-Dashboard .cw-card-grid--cols-6 {
    grid-template-columns: repeat(6, 1fr);
}

@media (max-width: 991.98px) {

    .widget-modern .cw-card-grid--cols-3 .cw-card__value,
    #Custom-Dashboard .cw-card-grid--cols-3 .cw-card__value,
    .widget-modern .cw-card-grid--cols-4 .cw-card__value,
    #Custom-Dashboard .cw-card-grid--cols-4 .cw-card__value,
    .widget-modern .cw-card-grid--cols-5 .cw-card__value,
    #Custom-Dashboard .cw-card-grid--cols-5 .cw-card__value,
    .widget-modern .cw-card-grid--cols-6 .cw-card__value,
    #Custom-Dashboard .cw-card-grid--cols-6 .cw-card__value {
        font-size: 1.45rem;
    }

    .widget-modern .cw-card-grid--cols-4 .cw-card__head,
    #Custom-Dashboard .cw-card-grid--cols-4 .cw-card__head,
    .widget-modern .cw-card-grid--cols-5 .cw-card__head,
    #Custom-Dashboard .cw-card-grid--cols-5 .cw-card__head,
    .widget-modern .cw-card-grid--cols-6 .cw-card__head,
    #Custom-Dashboard .cw-card-grid--cols-6 .cw-card__head {
        font-size: 0.75rem;
    }
}

.widget-modern .cw-card,
#Custom-Dashboard .cw-card {
    position: relative;
    display: flex;
    flex-direction: column;
    border-radius: 10px;
    border: 1px solid rgba(0, 150, 136, 0.22);
    border-left-width: 4px;
    border-left-color: var(--cw-card-accent, rgba(0, 150, 136, 0.75));
    background: #fff;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.06);
    overflow: hidden;
}

.widget-modern .cw-card--met,
#Custom-Dashboard .cw-card--met {
    border-left-color: var(--cw-target-met-border, var(--success, #28a745));
}

.widget-modern .cw-card--miss,
#Custom-Dashboard .cw-card--miss {
    border-left-color: var(--cw-target-miss-border, var(--danger, #dc3545));
}

.widget-modern a.cw-card,
#Custom-Dashboard a.cw-card,
.widget-modern .cw-card[data-cw-split-links],
#Custom-Dashboard .cw-card[data-cw-split-links] {
    display: flex;
    text-decoration: none;
    color: inherit;
    cursor: pointer;
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.widget-modern a.cw-card:hover,
.widget-modern a.cw-card:focus,
#Custom-Dashboard a.cw-card:hover,
#Custom-Dashboard a.cw-card:focus,
.widget-modern .cw-card[data-cw-split-links]:hover,
.widget-modern .cw-card[data-cw-split-links]:focus,
#Custom-Dashboard .cw-card[data-cw-split-links]:hover,
#Custom-Dashboard .cw-card[data-cw-split-links]:focus {
    text-decoration: none;
    color: inherit;
    border-color: rgba(0, 150, 136, 0.5);
    border-left-color: var(--cw-card-accent, rgba(0, 150, 136, 0.75));
    box-shadow: 0 3px 10px rgba(0, 0, 0, 0.1);
    outline: none;
}

.widget-modern a.cw-card.cw-card--met:hover,
.widget-modern a.cw-card.cw-card--met:focus,
#Custom-Dashboard a.cw-card.cw-card--met:hover,
#Custom-Dashboard a.cw-card.cw-card--met:focus,
.widget-modern .cw-card.cw-card--met[data-cw-split-links]:hover,
.widget-modern .cw-card.cw-card--met[data-cw-split-links]:focus,
#Custom-Dashboard .cw-card.cw-card--met[data-cw-split-links]:hover,
#Custom-Dashboard .cw-card.cw-card--met[data-cw-split-links]:focus {
    border-left-color: var(--success, #28a745);
}

.widget-modern a.cw-card.cw-card--miss:hover,
.widget-modern a.cw-card.cw-card--miss:focus,
#Custom-Dashboard a.cw-card.cw-card--miss:hover,
#Custom-Dashboard a.cw-card.cw-card--miss:focus,
.widget-modern .cw-card.cw-card--miss[data-cw-split-links]:hover,
.widget-modern .cw-card.cw-card--miss[data-cw-split-links]:focus,
#Custom-Dashboard .cw-card.cw-card--miss[data-cw-split-links]:hover,
#Custom-Dashboard .cw-card.cw-card--miss[data-cw-split-links]:focus {
    border-left-color: var(--danger, #dc3545);
}

.widget-modern .cw-card__head,
#Custom-Dashboard .cw-card__head {
    padding: 0.55rem 0.65rem 0.15rem;
    font-size: 0.82rem;
    font-weight: 600;
    color: #546e7a;
    line-height: 1.3;
    text-align: center;
}

.widget-modern .cw-card__value,
#Custom-Dashboard .cw-card__value {
    padding: 0.15rem 0.65rem;
    font-size: 1.85rem;
    font-weight: 700;
    line-height: 1.15;
    color: #263238;
    text-align: center;
}

.widget-modern .cw-card__sub,
#Custom-Dashboard .cw-card__sub {
    padding: 0 0.65rem 0.55rem;
    font-size: 0.78rem;
    color: #78909c;
    text-align: center;
}

.widget-modern .cw-card__foot,
#Custom-Dashboard .cw-card__foot {
    margin-top: auto;
    padding: 0.45rem 0.65rem;
    background: rgba(0, 150, 136, 0.1);
    border-top: 1px solid rgba(0, 150, 136, 0.16);
    font-size: 0.74rem;
    font-weight: bold;
    line-height: 1.35;
    color: #37474f;
    text-align: left;
}

.widget-modern .cw-card__foot-row+.cw-card__foot-row,
#Custom-Dashboard .cw-card__foot-row+.cw-card__foot-row {
    margin-top: 0.2rem;
}

.widget-modern .cw-card-foot-status--met,
#Custom-Dashboard .cw-card-foot-status--met,
.widget-modern .cw-card-foot-status--miss,
#Custom-Dashboard .cw-card-foot-status--miss {
    display: inline-block;
    padding: 0.1rem 0.45rem;
    border-radius: 999px;
    font-weight: 700;
    font-size: 0.72rem;
}

.widget-modern .cw-card-foot-status--met,
#Custom-Dashboard .cw-card-foot-status--met {
    background: var(--cw-target-met-bg, rgba(110, 204, 132, 0.35));
    color: var(--cw-target-met-fg, #1b5e20);
}

.widget-modern .cw-card-foot-status--miss,
#Custom-Dashboard .cw-card-foot-status--miss {
    background: var(--cw-target-miss-bg, rgba(235, 151, 159, 0.45));
    color: var(--cw-target-miss-fg, #8b1e2d);
}

[data-theme="dark"] .widget-modern .cw-card,
[data-theme="dark"] #Custom-Dashboard .cw-card {
    background: rgba(30, 40, 44, 0.92);
    border-color: rgba(0, 150, 136, 0.28);
}

[data-theme="dark"] .widget-modern a.cw-card:hover,
[data-theme="dark"] .widget-modern a.cw-card:focus,
[data-theme="dark"] #Custom-Dashboard a.cw-card:hover,
[data-theme="dark"] #Custom-Dashboard a.cw-card:focus,
[data-theme="dark"] .widget-modern .cw-card[data-cw-split-links]:hover,
[data-theme="dark"] .widget-modern .cw-card[data-cw-split-links]:focus,
[data-theme="dark"] #Custom-Dashboard .cw-card[data-cw-split-links]:hover,
[data-theme="dark"] #Custom-Dashboard .cw-card[data-cw-split-links]:focus {
    border-color: rgba(0, 150, 136, 0.55);
    border-left-color: var(--cw-card-accent, rgba(0, 150, 136, 0.75));
    box-shadow: 0 3px 10px rgba(0, 0, 0, 0.35);
}

[data-theme="dark"] .widget-modern a.cw-card.cw-card--met:hover,
[data-theme="dark"] .widget-modern a.cw-card.cw-card--met:focus,
[data-theme="dark"] #Custom-Dashboard a.cw-card.cw-card--met:hover,
[data-theme="dark"] #Custom-Dashboard a.cw-card.cw-card--met:focus,
[data-theme="dark"] .widget-modern .cw-card.cw-card--met[data-cw-split-links]:hover,
[data-theme="dark"] .widget-modern .cw-card.cw-card--met[data-cw-split-links]:focus,
[data-theme="dark"] #Custom-Dashboard .cw-card.cw-card--met[data-cw-split-links]:hover,
[data-theme="dark"] #Custom-Dashboard .cw-card.cw-card--met[data-cw-split-links]:focus {
    border-left-color: var(--success, #28a745);
}

[data-theme="dark"] .widget-modern a.cw-card.cw-card--miss:hover,
[data-theme="dark"] .widget-modern a.cw-card.cw-card--miss:focus,
[data-theme="dark"] #Custom-Dashboard a.cw-card.cw-card--miss:hover,
[data-theme="dark"] #Custom-Dashboard a.cw-card.cw-card--miss:focus,
[data-theme="dark"] .widget-modern .cw-card.cw-card--miss[data-cw-split-links]:hover,
[data-theme="dark"] .widget-modern .cw-card.cw-card--miss[data-cw-split-links]:focus,
[data-theme="dark"] #Custom-Dashboard .cw-card.cw-card--miss[data-cw-split-links]:hover,
[data-theme="dark"] #Custom-Dashboard .cw-card.cw-card--miss[data-cw-split-links]:focus {
    border-left-color: var(--danger, #dc3545);
}

[data-theme="dark"] .widget-modern .cw-card__value,
[data-theme="dark"] #Custom-Dashboard .cw-card__value {
    color: #eceff1;
}

[data-theme="dark"] .widget-modern .cw-card__foot,
[data-theme="dark"] #Custom-Dashboard .cw-card__foot {
    background: rgba(0, 150, 136, 0.16);
}

.widget-modern .cw-card__split,
#Custom-Dashboard .cw-card__split {
    padding: 0 0.65rem 0.5rem;
    text-align: center;
}

.widget-modern .cw-card__split .cw-group-toggle,
#Custom-Dashboard .cw-card__split .cw-group-toggle {
    color: #546e7a;
}

.widget-modern .cw-card-split-detail,
#Custom-Dashboard .cw-card-split-detail {
    margin-top: 0.2rem;
    font-size: 0.78rem;
    line-height: 1.4;
}

.widget-modern .cw-card-split-detail a,
#Custom-Dashboard .cw-card-split-detail a {
    color: #00796b;
    font-weight: 600;
}

.widget-modern .cw-card-split-sep,
#Custom-Dashboard .cw-card-split-sep {
    opacity: 0.45;
    padding: 0 0.15rem;
}

[data-theme="dark"] .widget-modern .cw-card-split-detail a,
[data-theme="dark"] #Custom-Dashboard .cw-card-split-detail a {
    color: #80cbc4;
}

.cw-chart-split-pop {
    position: fixed;
    z-index: 1080;
    min-width: 140px;
    padding: 0.25rem 0 0.35rem;
    background: #fff;
    border: 1px solid rgba(0, 0, 0, 0.12);
    border-radius: 8px;
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.16);
}

.cw-chart-split-pop__title {
    padding: 0.25rem 0.85rem 0.15rem;
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.02em;
    text-transform: uppercase;
    color: #78909c;
}

.cw-chart-split-pop a {
    display: block;
    padding: 0.4rem 0.85rem;
    color: #263238;
    font-size: 0.85rem;
    font-weight: 600;
    text-decoration: none;
    white-space: nowrap;
}

.cw-chart-split-pop a:hover,
.cw-chart-split-pop a:focus {
    background: rgba(0, 150, 136, 0.1);
    color: #00695c;
    text-decoration: none;
}

[data-theme="dark"] .cw-chart-split-pop {
    background: #2a3034;
    border-color: rgba(255, 255, 255, 0.12);
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.45);
}

[data-theme="dark"] .cw-chart-split-pop__title {
    color: #90a4ae;
}

[data-theme="dark"] .cw-chart-split-pop a {
    color: #eceff1;
}

[data-theme="dark"] .cw-chart-split-pop a:hover,
[data-theme="dark"] .cw-chart-split-pop a:focus {
    background: rgba(0, 150, 136, 0.2);
    color: #80cbc4;
}

#Custom-Dashboard .cd-modal-footer .btn-primary,
:is(#Modal_Add, #Modal_Edit) .aw-modal-footer .btn-primary {
    background: var(--primary, #009688);
    border-color: var(--primary, #009688);
}

#Custom-Dashboard .cd-modal-footer .btn-primary:hover,
#Custom-Dashboard .cd-modal-footer .btn-primary:focus,
:is(#Modal_Add, #Modal_Edit) .aw-modal-footer .btn-primary:hover,
:is(#Modal_Add, #Modal_Edit) .aw-modal-footer .btn-primary:focus {
    background: var(--primary-btn-hover, #00796b);
    border-color: var(--primary-btn-hover, #00796b);
}

#Custom-Dashboard .widget-sync-option.is-active,
:is(#Modal_Add, #Modal_Edit) #yourFormID .aw-chart-type-card.is-active {
    border-color: var(--primary, #009688);
    background: rgba(var(--primary-rgb, 0, 150, 136), 0.08);
}

/* ===== Add / Edit Widget Modal (aw-modal) ===== */
:is(#Modal_Add, #Modal_Edit).aw-modal .aw-modal-dialog {
    max-width: 920px;
    width: calc(100% - 2rem);
}

:is(#Modal_Add, #Modal_Edit).aw-modal .aw-modal-content {
    border: 0;
    border-radius: 14px;
    overflow: hidden;
    background: #f3f4f6;
}

:is(#Modal_Add, #Modal_Edit) .aw-modal-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1rem;
    padding: 1.1rem 1.35rem 1rem;
    border-bottom: 1px solid #e5e7eb;
    background: #fff;
}

:is(#Modal_Add, #Modal_Edit) .aw-modal-header-main {
    display: flex;
    align-items: flex-start;
    gap: 0.85rem;
    min-width: 0;
    text-align: left;
}

:is(#Modal_Add, #Modal_Edit) .aw-modal-icon {
    width: 2.5rem;
    height: 2.5rem;
    border-radius: 10px;
    background: var(--primary, #009688);
    color: #fff;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 1.1rem;
    flex: 0 0 auto;
}

:is(#Modal_Add, #Modal_Edit) .aw-modal-title {
    font-size: 1.15rem;
    font-weight: 700;
    color: #111827;
}

:is(#Modal_Add, #Modal_Edit) .aw-modal-subtitle {
    font-size: 0.82rem;
    color: #6b7280;
    margin-top: 0.15rem;
}

:is(#Modal_Add, #Modal_Edit) .aw-modal-close {
    margin: 0;
    padding: 0.25rem;
    opacity: 0.55;
}

:is(#Modal_Add, #Modal_Edit) .aw-modal-body {
    background: #f3f4f6;
    overflow: hidden !important;
}

:is(#Modal_Add, #Modal_Edit) .aw-modal-body .aw-modal-loading,
#Custom-Dashboard .cd-modal-body .cd-modal-loading {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    flex: 1 1 auto;
    min-height: 12rem;
}

/* Keep loading height aligned with loaded layout (avoid viewport-tall flash) */
#Custom-Dashboard .cd-modal-body .cd-modal-loading:only-child {
    min-height: 460px;
}

:is(#Modal_Add, #Modal_Edit) .aw-modal-footer {
    padding: 0.85rem 1.35rem;
    border-top: 1px solid #e5e7eb;
    background: #fff;
    justify-content: flex-end;
    gap: 0.5rem;
}

:is(#Modal_Add, #Modal_Edit) #yourFormID.aw-form {
    min-height: 0;
}

:is(#Modal_Add, #Modal_Edit) #yourFormID .aw-main {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    min-width: 0;
    min-height: 0;
    padding: 0 1.25rem 0;
    overflow: hidden;
    background: #fff;
}

:is(#Modal_Add, #Modal_Edit) #yourFormID .aw-tabs-toolbar {
    position: relative;
    z-index: 10;
    flex: 0 0 auto;
    display: flex;
    align-items: flex-end;
    gap: 0.35rem;
    border-bottom: 1px solid #e5e7eb;
    margin: 0 -1.25rem 0;
    padding: 0 1.25rem;
    background: #fff;
    box-shadow: 0 1px 0 rgba(0, 0, 0, 0.04);
}

:is(#Modal_Add, #Modal_Edit) #yourFormID .aw-tabs-toolbar .aw-tabs {
    flex: 1 1 auto;
    min-width: 0;
    margin: 0;
    padding: 0;
    border-bottom: none;
    box-shadow: none;
    background: transparent;
}

:is(#Modal_Add, #Modal_Edit) #yourFormID .aw-cloudy-assist-trigger {
    position: relative;
    flex: 0 0 auto;
    width: 36px;
    height: 36px;
    margin: 0 0 0.4rem;
    padding: 0;
    border: none;
    border-radius: 50%;
    background: transparent;
    color: #2f8f80;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    box-shadow: none;
    outline: none;
    -webkit-tap-highlight-color: transparent;
}

:is(#Modal_Add, #Modal_Edit) #yourFormID .aw-cloudy-assist-trigger:hover,
:is(#Modal_Add, #Modal_Edit) #yourFormID .aw-cloudy-assist-trigger:focus,
:is(#Modal_Add, #Modal_Edit) #yourFormID .aw-cloudy-assist-trigger:focus-visible {
    outline: none;
    box-shadow: none;
}

:is(#Modal_Add, #Modal_Edit) #yourFormID .aw-cloudy-assist-trigger .aw-cloudy-assist-logo {
    margin: 0;
    width: 36px;
    height: 36px;
    min-width: 36px;
}

:is(#Modal_Add, #Modal_Edit) #yourFormID .aw-cloudy-assist-trigger:hover .aw-cloudy-assist-logo::before,
:is(#Modal_Add, #Modal_Edit) #yourFormID .aw-cloudy-assist-trigger.has-pending .aw-cloudy-assist-logo::before {
    opacity: 0.75;
    filter: blur(7px);
}

:is(#Modal_Add, #Modal_Edit) #yourFormID .aw-cloudy-assist-badge {
    position: absolute;
    top: -2px;
    right: -2px;
    z-index: 2;
    min-width: 16px;
    height: 16px;
    padding: 0 4px;
    border-radius: 999px;
    background: #009688;
    color: #fff;
    font-size: 10px;
    font-weight: 700;
    line-height: 16px;
    text-align: center;
    box-shadow: 0 0 0 2px #fff;
}

/* Fallback if Assist panel CSS has not loaded yet — match .cloudy-chat-logo glow */
:is(#Modal_Add, #Modal_Edit) #yourFormID .aw-cloudy-assist-logo {
    position: relative;
    width: 36px;
    height: 36px;
    min-width: 36px;
    border-radius: 50%;
    background: transparent;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 2px;
}

:is(#Modal_Add, #Modal_Edit) #yourFormID .aw-cloudy-assist-logo::before {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: 50%;
    z-index: 0;
    pointer-events: none;
    background: conic-gradient(#ff00cc, #3333ff, #00ffcc, #ffcc00, #ff00cc);
    filter: blur(6px);
    opacity: 0.5;
    animation: awCloudyBorderGlow 2s linear infinite;
}

:is(#Modal_Add, #Modal_Edit) #yourFormID .aw-cloudy-assist-logo img,
:is(#Modal_Add, #Modal_Edit) #yourFormID .aw-cloudy-assist-logo .fa {
    position: relative;
    z-index: 1;
}

:is(#Modal_Add, #Modal_Edit) #yourFormID .aw-cloudy-assist-logo img {
    width: 28px;
    height: 28px;
    display: block;
    border-radius: 50%;
    background: #fff;
    padding: 3px;
    box-sizing: border-box;
}

:is(#Modal_Add, #Modal_Edit) #yourFormID .aw-cloudy-assist-logo .fa {
    color: #2f8f80;
    font-size: 18px;
}

@keyframes awCloudyBorderGlow {
    0% { filter: hue-rotate(0deg) blur(6px); }
    100% { filter: hue-rotate(360deg) blur(6px); }
}

:is(#Modal_Add, #Modal_Edit) #yourFormID .aw-tabs {
    position: relative;
    z-index: 10;
    flex: 0 0 auto;
    border-bottom: 1px solid #e5e7eb;
    margin: 0 -1.25rem 0;
    padding: 0 1.25rem;
    background: #fff;
    box-shadow: 0 1px 0 rgba(0, 0, 0, 0.04);
}

:is(#Modal_Add, #Modal_Edit) #yourFormID .aw-tabs .nav-link {
    border: 0;
    border-bottom: 2px solid transparent;
    border-radius: 0;
    color: #9ca3af;
    font-weight: 600;
    font-size: 0.88rem;
    padding: 0.75rem 0.35rem;
    margin-right: 1.25rem;
    background: transparent;
}

:is(#Modal_Add, #Modal_Edit) #yourFormID .aw-tabs .nav-link:hover {
    color: #374151;
}

:is(#Modal_Add, #Modal_Edit) #yourFormID .aw-tabs .nav-link.active {
    color: #111827;
    border-bottom-color: var(--primary, #009688);
    background: transparent;
}

:is(#Modal_Add, #Modal_Edit) #yourFormID .aw-tab-panels {
    flex: 1 1 auto;
    min-height: 0;
    overflow-x: hidden;
    overflow-y: auto;
    padding: 0.65rem 0 0.85rem;
    -webkit-overflow-scrolling: touch;
}

:is(#Modal_Add, #Modal_Edit) #yourFormID .aw-field,
:is(#Modal_Add, #Modal_Edit) #yourFormID .aw-chart-type-field {
    margin: 0 0 0.45rem;
}

:is(#Modal_Add, #Modal_Edit) #yourFormID .aw-field--compact {
    margin: 0 0 0.35rem;
}

:is(#Modal_Add, #Modal_Edit) #yourFormID .aw-field--compact:last-child {
    margin-bottom: 0;
}

:is(#Modal_Add, #Modal_Edit) #yourFormID .aw-filter-group {
    margin: 0 0 0.35rem;
}

:is(#Modal_Add, #Modal_Edit) #yourFormID.aw-has-category-filters>.aw-filter-group:not([style*="display: none"]):not([style*="display:none"]),
:is(#Modal_Add, #Modal_Edit) #yourFormID.aw-has-category-filters>.aw-chart-type-field:not([style*="display: none"]):not([style*="display:none"]),
:is(#Modal_Add, #Modal_Edit) #yourFormID.aw-has-category-filters>#widget-chart-colors-section:not([style*="display: none"]):not([style*="display:none"]) {
    margin-top: 0;
}

:is(#Modal_Add, #Modal_Edit) #yourFormID .aw-filter-group .aw-field-hint {
    display: block;
    font-size: 0.72rem;
    font-weight: 400;
    color: #9ca3af !important;
    margin: 0.15rem 0 0;
    line-height: 1.35;
}

:is(#Modal_Add, #Modal_Edit) #yourFormID .aw-tab-panels .row {
    margin-bottom: 0.35rem;
}

:is(#Modal_Add, #Modal_Edit) #yourFormID .aw-tab-panels .row:last-child {
    margin-bottom: 0;
}

:is(#Modal_Add, #Modal_Edit) #yourFormID .aw-chart-type-field {
    position: relative;
    z-index: 1;
}

:is(#Modal_Add, #Modal_Edit) #yourFormID .aw-field--half {
    margin-bottom: 0;
    min-width: 0;
}

:is(#Modal_Add, #Modal_Edit) #yourFormID .select2-container {
    display: block;
    width: 100% !important;
    margin: 0;
}

:is(#Modal_Add, #Modal_Edit) #yourFormID .aw-time-period-block .select2-container {
    margin-bottom: 0.15rem;
}

:is(#Modal_Add, #Modal_Edit) #yourFormID .aw-chart-type-field .select2-container {
    display: none !important;
}

:is(#Modal_Add, #Modal_Edit) #yourFormID .aw-divider {
    height: 1px;
    background: #e5e7eb;
    margin: 0.2rem 0 0.45rem;
}

:is(#Modal_Add, #Modal_Edit) #yourFormID .aw-loc-section-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.75rem;
    margin-bottom: 0.35rem;
}

:is(#Modal_Add, #Modal_Edit) #yourFormID .aw-chart-type-card,
:is(#Modal_Add, #Modal_Edit) #yourFormID .widget-size-container {
    border: 2px solid #ced4da;
    border-radius: 10px;
    background: #fff;
}

/* Widget size opens a chooser modal — action tile, not a fake <select>. */
:is(#Modal_Add, #Modal_Edit) #yourFormID .widget-size-picker.widget-size-container.aw-widget-size-trigger {
    width: 100%;
    display: flex !important;
    align-items: center;
    gap: 0.75rem;
    padding: 0.55rem 0.7rem;
    min-height: 0;
    margin: 0;
    border: 1px solid #cfd8dc;
    border-radius: 10px;
    background: linear-gradient(180deg, #fafbfc 0%, #f3f6f7 100%) !important;
    box-shadow: none;
    font: inherit;
    text-align: left;
    color: inherit;
    appearance: none;
    -webkit-appearance: none;
    cursor: pointer;
    user-select: none;
    transition: border-color 0.15s ease, background 0.15s ease, box-shadow 0.15s ease;
}

:is(#Modal_Add, #Modal_Edit) #yourFormID .widget-size-picker.aw-widget-size-trigger:hover,
:is(#Modal_Add, #Modal_Edit) #yourFormID .widget-size-picker.aw-widget-size-trigger:focus {
    border-color: var(--primary, #009688);
    background: #fff !important;
    box-shadow: 0 0 0 3px rgba(var(--primary-rgb, 0, 150, 136), 0.12);
    outline: none;
}

:is(#Modal_Add, #Modal_Edit) #yourFormID .aw-widget-size-preview {
    flex: 0 0 52px;
    width: 52px;
}

:is(#Modal_Add, #Modal_Edit) #yourFormID .aw-widget-size-preview-track {
    display: block;
    height: 28px;
    padding: 4px;
    border-radius: 6px;
    background: #e8eef0;
    border: 1px solid #d0d7db;
    box-sizing: border-box;
}

:is(#Modal_Add, #Modal_Edit) #yourFormID .aw-widget-size-preview-bar {
    display: block;
    height: 100%;
    min-width: 8%;
    max-width: 100%;
    border-radius: 3px;
    background: var(--primary, #009688);
    transition: width 0.2s ease;
}

:is(#Modal_Add, #Modal_Edit) #yourFormID .aw-widget-size-meta {
    flex: 1 1 auto;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 0.1rem;
}

:is(#Modal_Add, #Modal_Edit) #yourFormID .widget-size-picker .aw-widget-size-value,
:is(#Modal_Add, #Modal_Edit) #yourFormID #Widget_Size_Display {
    flex: none;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 0.85rem;
    font-weight: 600;
    color: #263238;
    line-height: 1.25;
}

:is(#Modal_Add, #Modal_Edit) #yourFormID .aw-widget-size-hint {
    display: block;
    font-size: 0.72rem;
    font-weight: 500;
    color: #78909c;
    line-height: 1.2;
}

:is(#Modal_Add, #Modal_Edit) #yourFormID .aw-widget-size-action {
    flex: 0 0 auto;
    width: 2rem;
    height: 2rem;
    border-radius: 8px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: rgba(var(--primary-rgb, 0, 150, 136), 0.1);
    color: var(--primary-btn-hover, #00897b);
    font-size: 0.95rem;
}


:is(#Modal_Add, #Modal_Edit) #yourFormID .aw-chart-type-select-hidden {
    position: absolute !important;
    left: -9999px !important;
    width: 1px !important;
    height: 1px !important;
    opacity: 0 !important;
    overflow: hidden !important;
    clip: rect(0, 0, 0, 0) !important;
}

:is(#Modal_Add, #Modal_Edit) #yourFormID .aw-chart-type-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 0.5rem;
    margin-top: 0.35rem;
    position: relative;
    z-index: 2;
}

:is(#Modal_Add, #Modal_Edit) #yourFormID .aw-chart-type-grid .aw-chart-type-card[data-value="Card"] {
    display: none !important;
}

:is(#Modal_Add, #Modal_Edit) #yourFormID .aw-chart-type-grid.has-card {
    grid-template-columns: repeat(5, minmax(0, 1fr));
}

:is(#Modal_Add, #Modal_Edit) #yourFormID .aw-chart-type-grid.has-card .aw-chart-type-card[data-value="Card"] {
    display: block !important;
}

:is(#Modal_Add, #Modal_Edit) #yourFormID .aw-chart-type-card {
    padding: 0.55rem 0.35rem 0.5rem;
    text-align: center;
    cursor: pointer;
    pointer-events: auto;
    position: relative;
    z-index: 1;
    transition: border-color 0.15s, background 0.15s, box-shadow 0.15s;
}

:is(#Modal_Add, #Modal_Edit) #yourFormID .aw-chart-type-card:hover:not(.is-disabled),
:is(#Modal_Add, #Modal_Edit) #yourFormID .aw-chart-type-card.is-active {
    border-color: var(--primary, #009688);
}

:is(#Modal_Add, #Modal_Edit) #yourFormID .aw-chart-type-card.is-active {
    box-shadow: inset 0 0 0 1px rgba(var(--primary-rgb, 0, 150, 136), 0.15);
}

:is(#Modal_Add, #Modal_Edit) #yourFormID .aw-chart-type-card.is-disabled {
    opacity: 0.4;
    cursor: not-allowed;
    pointer-events: none;
}

:is(#Modal_Add, #Modal_Edit) #yourFormID .aw-chart-type-icon {
    display: block;
    font-size: 1.15rem;
    color: #6b7280;
    margin-bottom: 0.2rem;
}

:is(#Modal_Add, #Modal_Edit) #yourFormID .aw-chart-type-card.is-active .aw-chart-type-icon {
    color: var(--primary, #009688);
}

:is(#Modal_Add, #Modal_Edit) #yourFormID .aw-chart-type-label {
    display: block;
    font-size: 0.72rem;
    font-weight: 600;
    color: #374151;
}

@media (max-width: 900px) {
    :is(#Modal_Add, #Modal_Edit) #yourFormID .aw-loc-section-row {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 767.98px) {
    :is(#Modal_Add, #Modal_Edit) #yourFormID .aw-chart-type-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 0.3rem;
        margin-top: 0.25rem;
    }

    :is(#Modal_Add, #Modal_Edit) #yourFormID .aw-chart-type-grid.has-card {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    :is(#Modal_Add, #Modal_Edit) #yourFormID .aw-chart-type-card {
        padding: 0.35rem 0.15rem 0.3rem;
    }

    :is(#Modal_Add, #Modal_Edit) #yourFormID .aw-chart-type-icon {
        font-size: 0.95rem;
        margin-bottom: 0.1rem;
    }

    :is(#Modal_Add, #Modal_Edit) #yourFormID .aw-chart-type-label {
        font-size: 0.62rem;
        line-height: 1.1;
    }
}

@media (max-width: 767.98px) {
    :is(#Modal_Add, #Modal_Edit).aw-modal .aw-modal-dialog {
        width: calc(100% - 1rem);
        max-width: none;
        margin: 0.5rem auto;
    }
}

[data-theme="dark"] :is(#Modal_Add, #Modal_Edit) .aw-modal-content,
[data-theme="dark"] :is(#Modal_Add, #Modal_Edit) .aw-modal-body {
    background: #1f1f1f;
}

[data-theme="dark"] :is(#Modal_Add, #Modal_Edit) .aw-modal-header,
[data-theme="dark"] :is(#Modal_Add, #Modal_Edit) .aw-modal-footer,
[data-theme="dark"] :is(#Modal_Add, #Modal_Edit) #yourFormID .aw-main,
[data-theme="dark"] :is(#Modal_Add, #Modal_Edit) #yourFormID .aw-tabs,
[data-theme="dark"] :is(#Modal_Add, #Modal_Edit) #yourFormID .aw-tabs-toolbar {
    background: #262626;
    border-color: rgba(255, 255, 255, 0.08);
}

[data-theme="dark"] :is(#Modal_Add, #Modal_Edit) #yourFormID .aw-cloudy-assist-trigger {
    background: transparent;
    border: none;
    color: #26a69a;
}

[data-theme="dark"] :is(#Modal_Add, #Modal_Edit) #yourFormID .aw-cloudy-assist-logo img {
    background: #262626;
}

[data-theme="dark"] :is(#Modal_Add, #Modal_Edit) #yourFormID .aw-cloudy-assist-logo .fa {
    color: #26a69a;
}

[data-theme="dark"] :is(#Modal_Add, #Modal_Edit) #yourFormID .aw-cloudy-assist-badge {
    box-shadow: 0 0 0 2px #262626;
}

/* Home dashboard drag-reorder (title section handle; Bootstrap column layout preserved) */
#widget-placements .widget-title-section {
    cursor: move;
    user-select: none;
    min-width: 0;
}
#widget-placements .widget-header-modern__actions {
    cursor: default;
}
#widget-placements .hw-sort-placeholder {
    border: 2px dashed rgba(0, 150, 136, 0.55);
    background: rgba(0, 150, 136, 0.08);
    border-radius: 10px;
    min-height: 120px;
    margin-bottom: 1.5rem;
    box-sizing: border-box;
}
#widget-placements .hw-sort-helper {
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.12);
    z-index: 20;
}
#widget-placements .hw-sort-zone--locked .widget-title-section {
    cursor: default;
}
[data-theme="dark"] #widget-placements .hw-sort-placeholder {
    border-color: rgba(0, 150, 136, 0.65);
    background: rgba(0, 150, 136, 0.12);
}
[data-theme="dark"] #widget-placements .hw-sort-helper {
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.4);
}

/* Cloudy Widget Assist drawer (inside Add/Edit modal body) */
[data-theme="dark"] #Cloudy_Widget_Assist_Drawer .cloudy-widget-assist-drawer-panel {
    background: #333;
    border-left-color: #3a3a3a;
}

[data-theme="dark"] #Cloudy_Widget_Assist_Drawer .cloudy-widget-assist-drawer-scrim {
    background: rgba(0, 0, 0, 0.45);
}

/* Keep Features / Sites / Time Period / other Select2 under Cloudy drawer */
:is(#Modal_Add, #Modal_Edit) .modal-body.cloudy-assist-drawer-host > #yourFormID,
:is(#Modal_Add, #Modal_Edit) .aw-modal-body.cloudy-assist-drawer-host > #yourFormID {
    position: relative;
    z-index: 1;
    isolation: isolate;
}

:is(#Modal_Add, #Modal_Edit).cloudy-assist-drawer-open .modal-body.cloudy-assist-drawer-host > #yourFormID .select2-container,
:is(#Modal_Add, #Modal_Edit).cloudy-assist-drawer-open .modal-body.cloudy-assist-drawer-host > #yourFormID .select2-container--open,
:is(#Modal_Add, #Modal_Edit).cloudy-assist-drawer-open .aw-modal-body.cloudy-assist-drawer-host > #yourFormID .select2-container,
:is(#Modal_Add, #Modal_Edit).cloudy-assist-drawer-open .aw-modal-body.cloudy-assist-drawer-host > #yourFormID .select2-container--open,
:is(#Modal_Add, #Modal_Edit).cloudy-assist-drawer-open .modal-body.cloudy-assist-drawer-host > #yourFormID .select2-dropdown,
:is(#Modal_Add, #Modal_Edit).cloudy-assist-drawer-open .aw-modal-body.cloudy-assist-drawer-host > #yourFormID .select2-dropdown {
    z-index: 1 !important;
}

:is(#Modal_Add, #Modal_Edit).cloudy-assist-drawer-open .modal-body.cloudy-assist-drawer-host > #yourFormID .aw-tabs-toolbar,
:is(#Modal_Add, #Modal_Edit).cloudy-assist-drawer-open .aw-modal-body.cloudy-assist-drawer-host > #yourFormID .aw-tabs-toolbar {
    z-index: 1;
}

/* Select2 / datepicker menus attached to body must not cover the open drawer */
body:has(#Modal_Add.cloudy-assist-drawer-open) > .select2-container,
body:has(#Modal_Edit.cloudy-assist-drawer-open) > .select2-container,
body:has(#Modal_Add.cloudy-assist-drawer-open) > .select2-container--open,
body:has(#Modal_Edit.cloudy-assist-drawer-open) > .select2-container--open,
body:has(#Modal_Add.cloudy-assist-drawer-open) .select2-dropdown,
body:has(#Modal_Edit.cloudy-assist-drawer-open) .select2-dropdown {
    z-index: 1040 !important;
}

body:has(#Modal_Add.cloudy-assist-drawer-open) #datepickers-container,
body:has(#Modal_Edit.cloudy-assist-drawer-open) #datepickers-container,
body:has(#Modal_Add.cloudy-assist-drawer-open) .datepickers-container,
body:has(#Modal_Edit.cloudy-assist-drawer-open) .datepickers-container {
    z-index: 1040 !important;
}

[data-theme="dark"] :is(#Modal_Add, #Modal_Edit) .aw-modal-title {
    color: #f3f4f6;
}

[data-theme="dark"] :is(#Modal_Add, #Modal_Edit) #yourFormID .aw-chart-type-card,
[data-theme="dark"] :is(#Modal_Add, #Modal_Edit) #yourFormID .widget-size-picker.widget-size-container {
    background: #2b2b2b !important;
    border-color: #555;
    color: #e5e7eb;
}

[data-theme="dark"] :is(#Modal_Add, #Modal_Edit) #yourFormID .widget-size-picker.aw-widget-size-trigger {
    background: linear-gradient(180deg, #303030 0%, #262626 100%) !important;
    border-color: #555;
}

[data-theme="dark"] :is(#Modal_Add, #Modal_Edit) #yourFormID .widget-size-picker.aw-widget-size-trigger:hover,
[data-theme="dark"] :is(#Modal_Add, #Modal_Edit) #yourFormID .widget-size-picker.aw-widget-size-trigger:focus {
    border-color: var(--primary-hover, #4db6ac);
    background: #2b2b2b !important;
    box-shadow: 0 0 0 3px rgba(77, 182, 172, 0.18);
}

[data-theme="dark"] :is(#Modal_Add, #Modal_Edit) #yourFormID .aw-widget-size-preview-track {
    background: #1f1f1f;
    border-color: #444;
}

[data-theme="dark"] :is(#Modal_Add, #Modal_Edit) #yourFormID .aw-widget-size-preview-bar {
    background: var(--primary-hover, #4db6ac);
}

[data-theme="dark"] :is(#Modal_Add, #Modal_Edit) #yourFormID .widget-size-picker .aw-widget-size-value,
[data-theme="dark"] :is(#Modal_Add, #Modal_Edit) #yourFormID #Widget_Size_Display {
    color: #e5e7eb;
}

[data-theme="dark"] :is(#Modal_Add, #Modal_Edit) #yourFormID .aw-widget-size-hint {
    color: #9aa0a6;
}

[data-theme="dark"] :is(#Modal_Add, #Modal_Edit) #yourFormID .aw-widget-size-action {
    background: rgba(77, 182, 172, 0.15);
    color: var(--primary-hover, #4db6ac);
}

/* =============================================================================
   BIM module (bim.php) G-- keep in head via system_style.css to prevent FOUC
   ============================================================================= */

/* Bucket Details panel (bim.php) */
.bim-bucket-panel {
    padding: 1.25rem 1.35rem;
}

@media (min-width: 768px) {
    .bim-bucket-pair-row {
        align-items: stretch;
    }

    .bim-bucket-pair-col {
        display: flex;
        flex-direction: column;
    }

    .bim-bucket-pair-col>.bim-bucket-pair-card,
    .bim-bucket-pair-col>.bim-upload-form {
        flex: 1 1 auto;
        width: 100%;
        min-height: 100%;
    }

    .bim-upload-form {
        display: flex;
        flex-direction: column;
        margin: 0;
    }

    .bim-bucket-pair-card {
        display: flex;
        flex-direction: column;
        height: 100%;
        box-sizing: border-box;
    }

    .bim-bucket-pair-card .bim-bucket-stats-grid {
        flex: 1 1 auto;
    }

    .bim-bucket-pair-card .bim-bucket-panel__actions {
        margin-top: auto;
    }
}

.bim-bucket-panel__header {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    margin-bottom: 1.15rem;
    padding-bottom: 1rem;
    border-bottom: 1px solid #edf0f5;
}

.bim-bucket-panel__icon {
    width: 42px;
    height: 42px;
    border-radius: 10px;
    background: rgba(var(--primary-rgb, 0, 150, 136), 0.12);
    color: var(--primary, #009688);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 1.1rem;
    flex-shrink: 0;
}

.bim-bucket-panel__icon--upload {
    background: rgba(var(--success-rgb, 40, 167, 69), 0.12);
    color: var(--success, #28a745);
}

.bim-bucket-panel__icon--contents {
    background: rgba(var(--secondary-rgb, 108, 117, 125), 0.14);
    color: var(--secondary, #6c757d);
}

.bim-bucket-contents-panel__header {
    align-items: center;
    flex-wrap: wrap;
    gap: 12px;
}

.bim-bucket-contents-panel__header .bim-bucket-panel__headings {
    flex: 1 1 200px;
    min-width: 0;
}

.bim-bucket-contents-panel__actions {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
    margin-left: auto;
}

.bim-bucket-contents-table-wrap {
    margin-top: 0.15rem;
}

@media (max-width: 767.98px) {
    .bim-bucket-contents-panel__actions {
        width: 100%;
        margin-left: 0;
        justify-content: flex-end;
    }
}

[data-theme="dark"] .bim-bucket-panel__icon--contents {
    background: rgba(148, 163, 184, 0.15);
    color: #94a3b8;
}

.bim-bucket-panel__actions {
    display: flex;
    justify-content: flex-end;
    margin-top: 12px;
    padding-top: 4px;
}

.bim-bucket-stat .form-control {
    margin-top: 2px;
}

.bim-bucket-stat__fields-row {
    margin-left: 0;
    margin-right: 0;
}

.bim-bucket-stat__fields-row>[class*="col-"] {
    padding-left: 0;
    padding-right: 0;
}

.bim-bucket-stat__fields-row>[class*="col-"]:first-child {
    padding-right: 6px;
}

.bim-bucket-stat__fields-row>[class*="col-"]:last-child {
    padding-left: 6px;
}

@media (max-width: 767.98px) {

    .bim-bucket-stat__fields-row>[class*="col-"]:first-child,
    .bim-bucket-stat__fields-row>[class*="col-"]:last-child {
        padding-left: 0;
        padding-right: 0;
    }
}

.bim-bucket-stat__hint {
    display: block;
    margin-top: 6px;
    font-size: 0.78rem;
    line-height: 1.35;
}

.bim-bucket-stat__hint .fa {
    margin-right: 4px;
}

.bim-bucket-panel__headings {
    min-width: 0;
}

.bim-bucket-panel__title {
    margin: 0 0 2px;
    font-size: 1.15rem;
    font-weight: 700;
    color: #212529;
    line-height: 1.25;
}

.bim-bucket-panel__subtitle {
    margin: 0;
    font-size: 0.82rem;
    color: var(--secondary, #6c757d);
    line-height: 1.35;
}

.bim-bucket-stats-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
}

.bim-bucket-stat {
    background: #f8f9fa;
    border: 1px solid #e9ecef;
    border-radius: 10px;
    padding: 12px 14px;
}

.bim-bucket-stat--wide {
    grid-column: 1 / -1;
}

.bim-bucket-stat__label {
    font-size: 0.68rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.45px;
    color: var(--secondary, #6c757d);
    margin-bottom: 6px;
}

.bim-bucket-stat__label .fa {
    margin-right: 5px;
    opacity: 0.85;
}

.bim-bucket-stat__value {
    font-size: 0.95rem;
    font-weight: 600;
    color: #212529;
    word-break: break-word;
    line-height: 1.35;
}

.bim-bucket-stat__value--key {
    font-family: Consolas, Monaco, 'Courier New', monospace;
    font-size: 0.88rem;
    font-weight: 500;
    color: var(--primary, #009688);
    word-break: break-all;
}

.bim-bucket-stat__value--success {
    font-size: 1.05rem;
    font-weight: 700;
    color: var(--success, #28a745);
}

.bim-bucket-stat__value--info {
    font-size: 1.05rem;
    font-weight: 700;
    color: var(--info, #17a2b8);
}

[data-theme="dark"] .bim-bucket-panel__header {
    border-bottom-color: rgba(255, 255, 255, 0.08);
}

[data-theme="dark"] .bim-bucket-panel__icon {
    background: rgba(var(--primary-rgb, 0, 150, 136), 0.2);
    color: var(--primary-light, #b8e2de);
}

[data-theme="dark"] .bim-bucket-panel__icon--upload {
    background: rgba(var(--success-rgb, 40, 167, 69), 0.2);
    color: var(--success-light, #c3e6cb);
}

[data-theme="dark"] .bim-bucket-panel__title {
    color: #f1f5f9;
}

[data-theme="dark"] .bim-bucket-panel__subtitle,
[data-theme="dark"] .bim-bucket-stat__label {
    color: #94a3b8;
}

[data-theme="dark"] .bim-bucket-stat {
    background: #2c2c2c;
    border-color: #444;
}

[data-theme="dark"] .bim-bucket-stat__value {
    color: #e2e8f0;
}

[data-theme="dark"] .bim-bucket-stat__value--key {
    color: var(--primary-light, #b8e2de);
}

[data-theme="dark"] .bim-bucket-stat__value--success {
    color: var(--success-light, #c3e6cb);
}

[data-theme="dark"] .bim-bucket-stat__value--info {
    color: var(--info-light, #bee5eb);
}

/* BIM viewer: level section list and replaced-object note */
[data-theme="dark"] .bim-layout-panel .bim-level-item.is-active {
    background: #009688;
    border-color: #009688;
    color: #fff;
}

[data-theme="dark"] .bim-layout-panel .bim-level-item.is-active small {
    color: #e3f5f2;
}

[data-theme="dark"] .bim-layout-panel [data-layout="replaces-note"] {
    color: #02b3a2;
}

@media (max-width: 575px) {
    .bim-bucket-stats-grid {
        grid-template-columns: 1fr;
    }
}

/* BIM translation status badges */
.bim-status-badge {
    font-size: 0.85rem;
    padding: 0.45em 0.7em;
    letter-spacing: 0.2px;
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

/* BIM filter Select2 placeholder alignment */
.Select2BIMFilterName .select2-selection__placeholder,
.Select2BIMFilterRvtFile .select2-selection__placeholder {
    text-align: left !important;
    display: block !important;
    float: left !important;
    width: 100% !important;
}

.Select2BIMFilterName .select2-selection__rendered,
.Select2BIMFilterRvtFile .select2-selection__rendered {
    text-align: left !important;
    padding-left: 8px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: flex-start !important;
}

.Select2BIMFilterName .select2-selection,
.Select2BIMFilterRvtFile .select2-selection {
    text-align: left !important;
}

.Select2BIMFilterName,
.Select2BIMFilterRvtFile {
    text-align: left !important;
}

#bim_filter_name+.select2-container .select2-selection__rendered,
#bim_filter_rvt_file+.select2-container .select2-selection__rendered {
    text-align: left !important;
    padding-left: 8px !important;
    justify-content: flex-start !important;
}

#bim_filter_name+.select2-container .select2-selection__placeholder,
#bim_filter_rvt_file+.select2-container .select2-selection__placeholder {
    text-align: left !important;
    float: left !important;
    width: 100% !important;
}

/* Insert CSS — site / template picker Select2 placeholders */
#cssInsertPickerForm .select2-container--default .select2-selection--single .select2-selection__placeholder {
    color: #6c757d;
}

[data-theme="dark"] #cssInsertPickerForm .select2-container--default .select2-selection--single .select2-selection__placeholder {
    color: #94a3b8;
}

/* Insert CSS — card picker (multi-site) */
.css-insert-choose-tile {
    max-width: 920px;
    margin-left: auto;
    margin-right: auto;
    padding: 1.75rem 1.5rem 2rem;
}

.css-insert-choose-title {
    font-size: 1.65rem;
    font-weight: 700;
    color: var(--main-text-color, #212529);
}

.css-insert-choose-subtitle {
    font-size: 0.95rem;
}

.css-insert-choose-section-label,
.css-insert-choose-section-heading {
    letter-spacing: 0.06em;
    font-weight: 600;
    font-size: 0.72rem;
}

.css-insert-choose-site-pills {
    display: flex;
    flex-wrap: wrap;
    gap: 0.65rem;
}

.css-insert-choose-radio {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

.css-insert-choose-panel {
    display: none;
}

.css-insert-choose-site-pill {
    display: inline-flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.35rem;
    padding: 0.55rem 1rem;
    border-radius: 999px;
    border: 1px solid #dee2e6;
    background: #fff;
    color: #495057;
    font-size: 0.875rem;
    line-height: 1.3;
    cursor: pointer;
    text-decoration: none !important;
    position: relative;
    z-index: 2;
    margin: 0;
    transition: border-color 0.15s ease, background-color 0.15s ease, color 0.15s ease, box-shadow 0.15s ease;
}

.css-insert-choose-site-pill:hover,
.css-insert-choose-site-pill:focus {
    color: #009688;
    border-color: rgba(0, 150, 136, 0.45);
    text-decoration: none !important;
}

.css-insert-choose-site-pill-primary {
    font-weight: 700;
    color: inherit;
}

.css-insert-choose-site-pill-secondary {
    font-weight: 400;
    color: #6c757d;
}

.css-insert-choose-site-pill.is-active {
    border-color: rgba(0, 150, 136, 0.55);
    background: rgba(0, 150, 136, 0.08);
    box-shadow: 0 0 0 1px rgba(0, 150, 136, 0.12);
}

.css-insert-choose-site-pill.is-active .css-insert-choose-site-pill-primary {
    color: #009688;
}

.css-insert-choose-site-pill.is-active .css-insert-choose-site-pill-secondary {
    color: #009688;
    opacity: 0.85;
}

.css-insert-choose-site-pill-badge {
    font-size: 0.65rem;
    font-weight: 700;
    padding: 0.1rem 0.35rem;
    border-radius: 4px;
    background: #f8d7da;
    color: #842029;
}

.css-insert-choose-template-list {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.css-insert-choose-template-card {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 1rem 1.15rem;
    border: 1px solid #e9ecef;
    border-radius: 12px;
    background: #fff;
    color: inherit;
    text-decoration: none !important;
    transition: border-color 0.15s ease, box-shadow 0.15s ease, transform 0.12s ease;
}

.css-list-template-chips-wrap {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem 0.75rem;
    padding: 0.65rem 0 0.85rem;
    margin-bottom: 0.25rem;
    border-bottom: 1px solid var(--default-line, #e9ecef);
}

.css-list-template-chips-label {
    font-size: 0.72rem;
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    flex: 0 0 auto;
}

.css-list-template-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    flex: 1 1 auto;
    min-width: 0;
}

.css-list-template-chip {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.45rem 0.95rem;
    border-radius: 999px;
    border: 1px solid #dee2e6;
    background: #fff;
    color: #495057;
    font-size: 0.875rem;
    line-height: 1.25;
    text-decoration: none !important;
    cursor: pointer;
    font-family: inherit;
    transition: border-color 0.15s ease, background-color 0.15s ease, color 0.15s ease, box-shadow 0.15s ease;
}

.css-list-template-chip.is-loading {
    opacity: 0.65;
    pointer-events: none;
}

.css-ext-site-tile {
    margin-left: 10px;
    margin-right: 10px;
}

.css-ext-template-row {
    position: relative;
    padding-top: 0.65rem;
    margin-top: 0.35rem;
    border-top: 1px solid var(--default-line, #e9ecef);
}

.css-ext-site-tile>b+.css-ext-template-row {
    border-top: none;
    margin-top: 0.5rem;
    padding-top: 0;
}

.css-ext-template-row-title {
    display: block;
    padding-right: 5.5rem;
    margin-bottom: 0.15rem;
}

.css-ext-qr-badge {
    position: absolute;
    top: 0.65rem;
    right: 0;
    text-decoration: none !important;
    font-size: 12px;
}

.css-ext-site-tile>b+.css-ext-template-row .css-ext-qr-badge {
    top: 0;
}

.css-ext-template-link {
    white-space: normal !important;
    word-break: break-all;
    text-align: left;
    font-size: 0.8125rem;
    line-height: 1.35;
}

[data-theme="dark"] .css-ext-template-row {
    border-top-color: #3a3a3a;
}

/* External CSS — submit success + loader */
body.css-ext-submit-done-page {
    background: transparent !important;
}

.css-ext-login-shell {
    width: 100%;
    max-width: 100%;
    align-items: stretch !important;
    justify-content: flex-start !important;
    min-height: 100vh;
    padding: 16px 8px 32px;
    box-sizing: border-box;
}

.css-ext-login-shell--done {
    justify-content: center !important;
    align-items: center !important;
}

.css-ext-page-container {
    width: 100%;
    max-width: 960px;
}

.css-ext-submit-done-wrap {
    position: relative;
    z-index: 2;
    pointer-events: auto;
}

.css-ext-submit-done-card {
    margin: 0 auto;
}

.css-ext-submit-again-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    font-weight: 700;
    padding: 0.65rem 1.35rem;
    border-radius: 8px;
}

#cssExtFormLoader.css-ext-form-loader {
    position: fixed;
    inset: 0;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    width: 100%;
    max-width: none;
    height: 100%;
    margin: 0;
    padding: 0;
    z-index: 10050;
    display: none;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    background: rgba(255, 255, 255, 0.88);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    pointer-events: all;
    border-radius: 0;
    box-shadow: none;
}

.css-ext-form-loader-inner {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.75rem;
    min-width: 200px;
    padding: 1.5rem 2rem;
    border-radius: 12px;
    background: #fff;
    box-shadow: 0 8px 32px rgba(15, 23, 42, 0.12);
    color: #333;
    font-weight: 600;
}

[data-theme="dark"] #cssExtFormLoader.css-ext-form-loader {
    background: rgba(31, 31, 31, 0.88);
    color: #e2e8f0;
    box-shadow: none;
}

[data-theme="dark"] .css-ext-form-loader-inner {
    background: #262626;
    color: #fff;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.45);
}

[data-theme="dark"] .css-ext-submit-done-card {
    background: #262626;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.45);
}

[data-theme="dark"] .external-submit-done-title {
    color: #e0e0e0;
}

[data-theme="dark"] .css-ext-submit-done-msg,
[data-theme="dark"] .external-submit-done-msg {
    color: #94a3b8;
}

[data-theme="dark"] .external-submit-done-icon {
    color: #02b3a2;
}

.css-list-template-chip .fa {
    color: #009688;
    font-size: 0.95rem;
}

.css-list-template-chip-label {
    font-weight: 600;
    max-width: 220px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.css-list-template-chip:hover,
.css-list-template-chip:focus {
    border-color: rgba(0, 150, 136, 0.45);
    color: #009688;
    outline: none;
}

.css-list-template-chip.is-active {
    border-color: rgba(0, 150, 136, 0.55);
    background: rgba(0, 150, 136, 0.08);
    box-shadow: 0 0 0 1px rgba(0, 150, 136, 0.12);
    color: #009688;
}

.css-list-template-chip.is-active .css-list-template-chip-label {
    font-weight: 700;
}

.css-insert-choose-template-card:hover,
.css-insert-choose-template-card:focus {
    border-color: rgba(0, 150, 136, 0.45);
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.06);
    transform: translateY(-1px);
    color: inherit;
    outline: none;
}

.css-insert-choose-template-icon {
    flex: 0 0 44px;
    width: 44px;
    height: 44px;
    border-radius: 10px;
    background: rgba(0, 150, 136, 0.12);
    color: #009688;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 1.15rem;
}

.css-insert-choose-template-body {
    flex: 1 1 auto;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 0.2rem;
}

.css-insert-choose-template-title {
    font-weight: 700;
    font-size: 1rem;
    color: var(--main-text-color, #212529);
}

.css-insert-choose-template-desc {
    font-size: 0.875rem;
    line-height: 1.35;
}

.css-insert-choose-template-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 0.65rem 1rem;
    font-size: 0.78rem;
    margin-top: 0.25rem;
}

.css-insert-choose-template-meta span {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
}

.css-insert-choose-template-chevron {
    flex: 0 0 auto;
    color: #adb5bd;
    font-size: 0.85rem;
}

[data-theme="dark"] .css-insert-choose-title {
    color: #fff;
}

[data-theme="dark"] .css-insert-choose-site-pill {
    background: #262626;
    border-color: #3a3a3a;
    color: #e0e0e0;
}

[data-theme="dark"] .css-insert-choose-site-pill-secondary {
    color: #94a3b8;
}

[data-theme="dark"] .css-insert-choose-template-card {
    background: #262626;
    border-color: #3a3a3a;
}

[data-theme="dark"] .css-insert-choose-template-card:hover,
[data-theme="dark"] .css-insert-choose-template-card:focus {
    border-color: rgba(0, 150, 136, 0.55);
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.35);
}

[data-theme="dark"] .css-list-template-chips-wrap {
    border-bottom-color: #3a3a3a;
}

[data-theme="dark"] .css-list-template-chip {
    background: #262626;
    border-color: #3a3a3a;
    color: #e0e0e0;
}

[data-theme="dark"] .css-list-template-chip.is-active {
    background: rgba(0, 150, 136, 0.12);
    border-color: rgba(0, 150, 136, 0.65);
    box-shadow: 0 0 0 1px rgba(0, 150, 136, 0.4);
    color: #02b3a2;
}

[data-theme="dark"] .css-insert-choose-template-title {
    color: #fff;
}

[data-theme="dark"] .css-insert-choose-template-icon {
    background: rgba(0, 150, 136, 0.2);
    color: #02b3a2;
}

[data-theme="dark"] .css-insert-choose-template-chevron {
    color: #808080;
}

#bim_filter_name+.select2-container .select2-selection,
#bim_filter_rvt_file+.select2-container .select2-selection {
    text-align: left !important;
}

#bim_filter_name+.select2-container,
#bim_filter_rvt_file+.select2-container {
    text-align: left !important;
}

/* Docs Client Quotation / PO / Invoice create form layout */
.docs-client-layout {
    align-items: flex-start;
}

.docs-client-detail-card {
    padding: 1.5rem 1.65rem 1.35rem;
    border-radius: 12px;
}

.docs-client-detail-title {
    font-size: 1.35rem;
    font-weight: 700;
    color: #1a1a1a;
    margin: 0 0 0.35rem;
    line-height: 1.25;
}

.docs-client-detail-sub {
    font-size: 0.875rem;
    color: #8a8f98;
    margin: 0 0 1.35rem;
    line-height: 1.45;
}

.docs-client-section {
    padding-top: 1.15rem;
    margin-top: 0.15rem;
    border-top: 1px solid #eceef2;
}

.docs-client-section:first-of-type {
    border-top: 0;
    padding-top: 0;
    margin-top: 0;
}

.docs-client-section-label {
    font-size: 0.68rem;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: #9aa0a8;
    margin-bottom: 0.85rem;
}

.docs-client-field {
    margin-bottom: 0.95rem;
}

.docs-client-field:last-child {
    margin-bottom: 0;
}

.docs-client-field>label {
    display: block;
    font-size: 0.875rem;
    font-weight: 500;
    color: #3d4450;
    margin-top: 0.4rem;
    margin-bottom: 0.4rem;
}

.docs-client-req {
    display: inline;
    font-size: 0.95em;
    font-weight: 700;
    color: var(--danger, #dc3545);
    margin-left: 0.2rem;
    line-height: 1;
}

.docs-client-field .form-control,
.docs-client-field .select2-container .select2-selection--single {
    min-height: 38px;
    border-radius: 8px;
}

.docs-client-field textarea.form-control {
    min-height: 96px;
    resize: vertical;
}

.docs-client-amount-row {
    display: flex;
    align-items: stretch;
    gap: 0;
}

.docs-client-amount-row select.form-control {
    max-width: 96px;
    flex: 0 0 96px;
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
    border-right: 0;
}

.docs-client-amount-row input.form-control {
    border-top-left-radius: 0;
    border-bottom-left-radius: 0;
    flex: 1 1 auto;
}

.docs-client-hint {
    display: block;
    margin-top: 0.4rem;
    font-size: 0.78rem;
    color: #9aa0a8;
    line-height: 1.35;
}

.docs-client-actions {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    gap: 0.65rem;
    margin-top: 1.35rem;
    padding-top: 1.1rem;
    border-top: 1px solid #eceef2;
}

.docs-client-attach-card {
    padding: 1.1rem 1.15rem 1.15rem;
    border-radius: 12px;
}

.docs-client-attach-card .line-head {
    font-size: 1rem;
    margin-bottom: 0.65rem;
}

.docs-client-attach-card .docs-ai-bill-panel .upload-drop-zone {
    min-height: 110px;
    padding: 1rem 0.75rem;
}

.docs-client-attach-card .docs-ai-bill-panel #docs_ai_bill_preview_img {
    max-height: 140px;
}

.docs-client-attach-card .docs-ai-bill-panel p.small.text-muted.mb-2 {
    font-size: 0.78rem;
}

@media (max-width: 991.98px) {
    .docs-client-layout>[class*="col-"] {
        margin-bottom: 1rem;
    }

    .docs-client-actions .btn {
        width: 100%;
    }
}

[data-theme="dark"] .docs-client-detail-title {
    color: #f1f3f5;
}

[data-theme="dark"] .docs-client-detail-sub,
[data-theme="dark"] .docs-client-hint {
    color: #9aa3ad;
}

[data-theme="dark"] .docs-client-section,
[data-theme="dark"] .docs-client-actions {
    border-top-color: rgba(255, 255, 255, 0.1);
}

[data-theme="dark"] .docs-client-section-label {
    color: #8b949e;
}

[data-theme="dark"] .docs-client-field>label {
    color: #d0d7de;
}

[data-theme="dark"] .docs-client-req {
    color: #ff7b72;
}

[data-theme="dark"] .docs-client-attach-card .line-head {
    color: #f1f3f5;
}

[data-theme="dark"] .docs-client-attach-card .docs-ai-bill-panel p.small.text-muted.mb-2,
[data-theme="dark"] .docs-client-attach-card .docs-ai-bill-panel .text-muted {
    color: #9aa3ad !important;
}

[data-theme="dark"] .docs-client-attach-card .docs-ai-bill-panel .upload-drop-zone {
    background: rgba(255, 255, 255, 0.03);
    border-color: rgba(255, 255, 255, 0.18);
}

[data-theme="dark"] .docs-client-attach-card .docs-ai-bill-panel .upload-drop-label-accent {
    color: #c9d1d9;
}

[data-theme="dark"] .docs-client-amount-row select.form-control {
    border-right-color: transparent;
}

/* CM pending work-order recheck alert (New / Insert WO) */
.cm-recheck-wo-alert {
    border-left: 4px solid #f0ad4e;
    color: #856404;
}

.cm-recheck-wo-alert__body {
    min-width: 0;
    flex: 1;
}

.cm-recheck-wo-alert__title {
    font-size: 13px;
    line-height: 1.3;
    color: #856404;
}

.cm-recheck-wo-alert__sub {
    font-size: 12px;
    line-height: 1.35;
    color: #6d5a1e;
}

.cm-recheck-wo-alert__badges {
    line-height: 1.8;
}

.cm-recheck-wo-alert__badges a.badge {
    color: #fff !important;
}

[data-theme="dark"] .cm-recheck-wo-alert.alert-warning {
    color: #ffe08a;
    background-color: #3a3118;
    border-color: #6b5620;
    border-left-color: var(--warning, #ffc107);
}

[data-theme="dark"] .cm-recheck-wo-alert,
[data-theme="dark"] .cm-recheck-wo-alert div,
[data-theme="dark"] .cm-recheck-wo-alert i {
    color: #ffe08a;
}

[data-theme="dark"] .cm-recheck-wo-alert__title {
    color: #ffe08a;
}

[data-theme="dark"] .cm-recheck-wo-alert__sub {
    color: #c9b36a;
}

[data-theme="dark"] .cm-recheck-wo-alert__badges a.badge {
    color: #fff !important;
}

[data-theme="dark"] .cm-recheck-wo-alert__badges a.badge-danger {
    background-color: var(--danger, #dc3545);
}

[data-theme="dark"] .cm-recheck-wo-alert__badges a.badge-info {
    background-color: var(--info, #17a2b8);
}

[data-theme="dark"] .cm-recheck-wo-alert__badges a.badge-secondary {
    background-color: var(--secondary, #6c757d);
    color: #fff !important;
}


/* ---- Summernote: readable text in light & dark themes ---- */
.note-editor.note-frame .note-editing-area .note-editable {
    background-color: #fff;
    color: #212529;
}

.note-editor.note-frame .note-editing-area .note-editable>p,
.note-editor.note-frame .note-editing-area .note-editable>div,
.note-editor.note-frame .note-editing-area .note-editable p:not([style*="color"]),
.note-editor.note-frame .note-editing-area .note-editable div:not([style*="color"]) {
    color: inherit;
}

.note-editor.note-frame .note-editing-area .note-placeholder,
.note-editor.note-frame .note-editing-area .note-editable.note-placeholder:before {
    color: var(--secondary, #6c757d);
}

[data-theme="dark"] .note-editor.note-frame .note-editing-area .note-editable {
    background-color: #1e1e1e !important;
    color: rgba(255, 255, 255, 0.92) !important;
}

[data-theme="dark"] .note-editor.note-frame .note-editing-area .note-editable>p,
[data-theme="dark"] .note-editor.note-frame .note-editing-area .note-editable>div,
[data-theme="dark"] .note-editor.note-frame .note-editing-area .note-editable p:not([style*="color"]),
[data-theme="dark"] .note-editor.note-frame .note-editing-area .note-editable div:not([style*="color"]),
[data-theme="dark"] .note-editor.note-frame .note-editing-area .note-editable span:not([style*="color"]),
[data-theme="dark"] .note-editor.note-frame .note-editing-area .note-editable li:not([style*="color"]),
[data-theme="dark"] .note-editor.note-frame .note-editing-area .note-editable h1:not([style*="color"]),
[data-theme="dark"] .note-editor.note-frame .note-editing-area .note-editable h2:not([style*="color"]),
[data-theme="dark"] .note-editor.note-frame .note-editing-area .note-editable h3:not([style*="color"]),
[data-theme="dark"] .note-editor.note-frame .note-editing-area .note-editable h4:not([style*="color"]),
[data-theme="dark"] .note-editor.note-frame .note-editing-area .note-editable h5:not([style*="color"]),
[data-theme="dark"] .note-editor.note-frame .note-editing-area .note-editable h6:not([style*="color"]) {
    color: inherit !important;
}

[data-theme="dark"] .note-editor.note-frame .note-editing-area .note-editable [style*="color: rgb(0, 0, 0)"],
[data-theme="dark"] .note-editor.note-frame .note-editing-area .note-editable [style*="color:rgb(0, 0, 0)"],
[data-theme="dark"] .note-editor.note-frame .note-editing-area .note-editable [style*="color: #000"],
[data-theme="dark"] .note-editor.note-frame .note-editing-area .note-editable [style*="color:#000"],
[data-theme="dark"] .note-editor.note-frame .note-editing-area .note-editable [style*="color: black"],
[data-theme="dark"] .note-editor.note-frame .note-editing-area .note-editable [style*="color:black"],
[data-theme="dark"] .note-editor.note-frame .note-editing-area .note-editable [style*="color: #212529"],
[data-theme="dark"] .note-editor.note-frame .note-editing-area .note-editable [style*="color:#212529"],
[data-theme="dark"] .note-editor.note-frame .note-editing-area .note-editable font[color="black"],
[data-theme="dark"] .note-editor.note-frame .note-editing-area .note-editable font[color="#000000"],
[data-theme="dark"] .note-editor.note-frame .note-editing-area .note-editable font[color="#000"] {
    color: rgba(255, 255, 255, 0.92) !important;
}

body:not([data-theme="dark"]) .note-editor.note-frame .note-editing-area .note-editable [style*="color: rgb(255, 255, 255)"],
body:not([data-theme="dark"]) .note-editor.note-frame .note-editing-area .note-editable [style*="color:rgb(255, 255, 255)"],
body:not([data-theme="dark"]) .note-editor.note-frame .note-editing-area .note-editable [style*="color: #fff"],
body:not([data-theme="dark"]) .note-editor.note-frame .note-editing-area .note-editable [style*="color:#fff"],
body:not([data-theme="dark"]) .note-editor.note-frame .note-editing-area .note-editable [style*="color: #ffffff"],
body:not([data-theme="dark"]) .note-editor.note-frame .note-editing-area .note-editable [style*="color:#ffffff"],
body:not([data-theme="dark"]) .note-editor.note-frame .note-editing-area .note-editable [style*="color: white"],
body:not([data-theme="dark"]) .note-editor.note-frame .note-editing-area .note-editable [style*="color:white"],
body:not([data-theme="dark"]) .note-editor.note-frame .note-editing-area .note-editable [style*="color: rgba(255, 255, 255"],
body:not([data-theme="dark"]) .note-editor.note-frame .note-editing-area .note-editable font[color="white"],
body:not([data-theme="dark"]) .note-editor.note-frame .note-editing-area .note-editable font[color="#ffffff"],
body:not([data-theme="dark"]) .note-editor.note-frame .note-editing-area .note-editable font[color="#fff"] {
    color: #212529 !important;
}

[data-theme="dark"] .note-editor.note-frame .note-editing-area .note-placeholder,
[data-theme="dark"] .note-editor.note-frame .note-editing-area .note-editable.note-placeholder:before {
    color: rgba(255, 255, 255, 0.45) !important;
}

/* ---- Home progressive widget skeletons ---- */
.hw-widget-skeleton .hw-skel-card {
    min-height: 200px;
    padding: 1rem 1.1rem;
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    background: #fff;
    border: 1px solid rgba(0, 0, 0, 0.06);
}

.hw-skel-line,
.hw-skel-chart {
    border-radius: 8px;
    background: linear-gradient(90deg, #eef1f4 0%, #f7f8fa 45%, #eef1f4 100%);
    background-size: 200% 100%;
    animation: hw-skel-shimmer 1.2s ease-in-out infinite;
}

.hw-skel-title {
    height: 14px;
    width: 55%;
}

.hw-skel-chart {
    flex: 1 1 auto;
    min-height: 140px;
    width: 100%;
}

.hw-skel-caption {
    font-size: 0.75rem;
}

@keyframes hw-skel-shimmer {
    0% {
        background-position: 100% 0;
    }

    100% {
        background-position: -100% 0;
    }
}

[data-theme="dark"] .hw-widget-skeleton .hw-skel-card {
    background: #262626;
    border-color: rgba(255, 255, 255, 0.08);
}

[data-theme="dark"] .hw-skel-line,
[data-theme="dark"] .hw-skel-chart {
    background: linear-gradient(90deg, #333 0%, #3f3f3f 45%, #333 100%);
    background-size: 200% 100%;
}

[data-theme="dark"] .hw-skel-caption {
    color: #9ca3af !important;
}

/* ---- Shared report filter panel (CM/PM reports, Staff Performance-style) ---- */
.report-page-nav-row {
    margin-bottom: 0.5rem;
}

.report-filter-panel {
    padding: 0 8px 12px;
}

.report-filter-form .report-filter-section {
    padding: 12px 8px;
    border-bottom: 1px solid #e9ecef;
}

.report-filter-form .report-filter-section:first-of-type {
    padding-top: 8px;
}

.report-filter-form .report-filter-section:last-of-type {
    border-bottom: 0;
}

.report-filter-section__head {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 12px;
}

.report-filter-section__title {
    flex-shrink: 0;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: #495057;
}

.report-filter-section__rule {
    flex: 1;
    height: 1px;
    background: #e9ecef;
}

.report-filter-section__hint {
    font-size: 11px;
    color: #6c757d;
    margin: -4px 0 12px;
    line-height: 1.45;
}

.report-filter-form .row {
    margin-left: -8px;
    margin-right: -8px;
}

.report-filter-form .row>[class*="col-"] {
    padding-left: 8px;
    padding-right: 8px;
}

.report-filter-field {
    margin-bottom: 12px;
    min-width: 0;
}

.report-filter-form .report-filter-field select.form-control {
    width: 100%;
}

.report-filter-form .report-filter-field .select2-container {
    width: 100% !important;
    max-width: 100%;
}

.report-filter-label {
    display: block;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: #889;
    margin-bottom: 6px;
}

.report-filter-chips-row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px;
    padding: 14px 8px;
    margin-bottom: 4px;
    border-bottom: 1px solid #e9ecef;
}

.report-filter-chips-row__label {
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: #889;
    flex-shrink: 0;
}

.report-filter-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    flex: 1;
    min-width: 0;
}

.report-filter-chip {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    max-width: 100%;
    padding: 4px 10px;
    font-size: 12px;
    line-height: 1.35;
    background: #f1f3f5;
    border: 1px solid #dee2e6;
    border-radius: 999px;
    color: #495057;
}

.report-filter-chip--accent {
    background: #009688;
    border-color: #009688;
    color: #fff;
}

.report-filter-chip--accent .report-filter-chip__label {
    color: rgba(255, 255, 255, 0.85);
}

.report-filter-chip--accent .report-filter-chip__remove {
    color: rgba(255, 255, 255, 0.75);
}

.report-filter-chip--accent .report-filter-chip__remove:hover {
    color: #fff;
}

.report-filter-chip__label {
    color: #6c757d;
    font-weight: 600;
}

.report-filter-chip__text {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    max-width: 220px;
}

.report-filter-chip__remove {
    border: 0;
    background: transparent;
    color: #868e96;
    font-size: 16px;
    line-height: 1;
    padding: 0 2px;
    cursor: pointer;
}

.report-filter-chip__remove:hover {
    color: #c0392b;
}

.report-filter-chips-clear {
    border: 0;
    background: transparent;
    color: #dc3545;
    font-size: 12px;
    font-weight: 600;
    padding: 4px 0;
    cursor: pointer;
    flex-shrink: 0;
}

.report-filter-chips-clear:hover {
    color: #a71d2a;
    text-decoration: underline;
}

.report-filter-more-toggle {
    margin: 12px 8px 0;
}

.report-filter-more-toggle__btn {
    width: 100%;
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 14px;
    border: 1px dashed rgba(0, 150, 136, 0.45);
    border-radius: 6px;
    background: rgba(var(--primary-rgb, 0, 150, 136), 0.06);
    color: #009688;
    font-size: 13px;
    font-weight: 600;
    text-align: left;
    cursor: pointer;
}

.report-filter-more-toggle__btn:hover {
    background: rgba(0, 150, 136, 0.1);
}

.report-filter-more-toggle__badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 20px;
    height: 20px;
    padding: 0 6px;
    border-radius: 999px;
    background: #009688;
    color: #fff;
    font-size: 11px;
    font-weight: 700;
}

.report-filter-more-toggle__badge.d-none {
    display: none !important;
}

.report-filter-more-toggle__chevron {
    margin-left: auto;
    color: #009688;
    transition: transform 0.2s ease;
}

.report-filter-more-toggle__btn:not(.collapsed) .report-filter-more-toggle__chevron {
    transform: rotate(180deg);
}

.report-filter-more-body {
    padding: 8px 0 0;
}

.report-filter-section--date .report-filter-date-row {
    align-items: flex-end;
}

.report-filter-date-group .form-control.datepicker-here {
    border-radius: 10px;
}

.report-filter-date-group .report-filter-date-clear {
    margin-left: -38px;
    z-index: 100;
}

.report-filter-actions {
    padding: 16px 8px 4px;
    text-align: center;
}

#cr-date-field-wrap .select2-container,
#pr-date-field-wrap .select2-container {
    width: 100% !important;
}

.report-filter-form .select2-container .select2-selection--multiple {
    max-height: 5.5rem;
    overflow-y: auto !important;
}

[data-theme="dark"] .report-filter-form .report-filter-section,
[data-theme="dark"] .report-filter-chips-row {
    border-color: #3a3a3a;
}

[data-theme="dark"] .report-filter-section__title {
    color: #e0e0e0;
}

[data-theme="dark"] .report-filter-section__rule {
    background: #3a3a3a;
}

[data-theme="dark"] .report-filter-section__hint,
[data-theme="dark"] .report-filter-label,
[data-theme="dark"] .report-filter-chips-row__label {
    color: #94a3b8;
}

[data-theme="dark"] .report-filter-chip {
    background: #2f2f2f;
    border-color: #454545;
    color: #e5e7eb;
}

[data-theme="dark"] .report-filter-chip__label {
    color: #adb5bd;
}

[data-theme="dark"] .report-filter-chip--accent {
    background: #00796b;
    border-color: #00796b;
}

[data-theme="dark"] .report-filter-more-toggle__btn {
    background: rgba(0, 150, 136, 0.12);
    border-color: rgba(0, 150, 136, 0.35);
    color: #4db6ac;
}

.report-filter-more-toggle--nested {
    margin: 8px 0 0;
}

.report-filter-more-toggle--nested .report-filter-more-toggle__btn {
    padding: 8px 12px;
    font-size: 12px;
}

.report-filter-more-body--nested {
    margin-top: 8px;
    padding-top: 0;
}

[data-theme="dark"] .report-filter-more-toggle--nested .report-filter-more-toggle__btn {
    background: rgba(0, 150, 136, 0.1);
    border-color: rgba(0, 150, 136, 0.3);
    color: #4db6ac;
}

@media (max-width: 991px) {
    .report-filter-chips-row {
        flex-direction: column;
        align-items: stretch;
    }

    .report-filter-chips-clear {
        align-self: flex-start;
    }
}

/* --------------------------------------------------------------------------
   iPhone-style toggle switch (shared)
   Usage:
     <label class="ios-toggle mb-0">
       <input type="checkbox" name="..." value="Enabled" checked>
       <span class="ios-toggle-slider"></span>
     </label>
     Optional status text: <span class="ios-toggle-status" data-for="fieldName">Enable</span>
   -------------------------------------------------------------------------- */
.ios-toggle {
    position: relative;
    display: inline-block;
    width: 51px;
    height: 31px;
    flex-shrink: 0;
    cursor: pointer;
    vertical-align: middle;
}

.ios-toggle input {
    opacity: 0;
    width: 0;
    height: 0;
    position: absolute;
}

.ios-toggle-slider {
    position: absolute;
    inset: 0;
    background: #e9e9eb;
    border-radius: 31px;
    transition: background-color 0.2s ease;
    box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.04);
}

.ios-toggle-slider:before {
    content: "";
    position: absolute;
    height: 27px;
    width: 27px;
    left: 2px;
    top: 2px;
    background: #fff;
    border-radius: 50%;
    transition: transform 0.2s ease;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.25), 0 1px 1px rgba(0, 0, 0, 0.08);
}

.ios-toggle input:checked+.ios-toggle-slider {
    background: #34c759;
}

.ios-toggle input:focus+.ios-toggle-slider {
    box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.04), 0 0 0 3px rgba(52, 199, 89, 0.25);
}

.ios-toggle input:checked+.ios-toggle-slider:before {
    transform: translateX(20px);
}

.ios-toggle input:disabled+.ios-toggle-slider {
    opacity: 0.5;
    cursor: not-allowed;
}

.ios-toggle-status {
    user-select: none;
}

[data-theme="dark"] .ios-toggle-slider {
    background: #39393d;
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.06);
}

[data-theme="dark"] .ios-toggle input:checked+.ios-toggle-slider {
    background: #30d158;
}

[data-theme="dark"] .ios-toggle-slider:before {
    background: #f5f5f7;
}

/* Attendance clocking settings: Booking Display-style soft status cards */
.att-clk-status-cards {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 10px;
    margin-bottom: 2px;
}

.att-clk-status-cards--two {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.att-clk-status-card {
    position: relative;
    display: flex;
    align-items: flex-start;
    gap: 10px;
    margin: 0;
    padding: 12px;
    border: 1px solid #dee2e6;
    border-radius: 8px;
    background: #fff;
    cursor: pointer;
    transition: border-color .15s ease, background-color .15s ease, box-shadow .15s ease;
    user-select: none;
}

.att-clk-status-card:hover {
    border-color: #80cbc4;
    box-shadow: 0 0 0 1px rgba(0, 150, 136, 0.15);
}

.att-clk-status-card.is-on {
    border-color: var(--primary, #009688);
    background: rgba(var(--primary-rgb, 0, 150, 136), 0.06);
    box-shadow: 0 0 0 1px rgba(0, 150, 136, 0.25);
}

.att-clk-status-card-check {
    position: absolute;
    opacity: 0;
    width: 0;
    height: 0;
    pointer-events: none;
}

.att-clk-status-card-icon {
    flex-shrink: 0;
    width: 32px;
    height: 32px;
    border-radius: 8px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: #f1f3f5;
    color: #868e96;
    font-size: 15px;
    transition: background-color .15s ease, color .15s ease;
}

.att-clk-status-card.is-on .att-clk-status-card-icon {
    background: rgba(var(--primary-rgb, 0, 150, 136), 0.15);
    color: var(--primary, #009688);
}

.att-clk-status-card-text {
    display: flex;
    flex-direction: column;
    min-width: 0;
    padding-right: 18px;
}

.att-clk-status-card-label {
    font-weight: 600;
    font-size: 13px;
    color: #343a40;
    line-height: 1.25;
}

.att-clk-status-card-hint {
    font-size: 11px;
    color: #868e96;
    line-height: 1.3;
    margin-top: 2px;
}

.att-clk-status-card-tick {
    position: absolute;
    top: 8px;
    right: 8px;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    border: 1px solid #ced4da;
    background: #fff;
    color: transparent;
    font-size: 10px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: background-color .15s ease, border-color .15s ease, color .15s ease;
}

.att-clk-status-card.is-on .att-clk-status-card-tick {
    background: var(--primary, #009688);
    border-color: var(--primary, #009688);
    color: #fff;
}

@media (max-width: 575.98px) {

    .att-clk-status-cards,
    .att-clk-status-cards--two {
        grid-template-columns: 1fr;
    }
}

[data-theme="dark"] .att-clk-status-card {
    background: #2a2a2a;
    border-color: #3a3a3a;
}

[data-theme="dark"] .att-clk-status-card:hover {
    border-color: #00796b;
    box-shadow: 0 0 0 1px rgba(0, 121, 107, 0.35);
}

[data-theme="dark"] .att-clk-status-card.is-on {
    background: rgba(0, 150, 136, 0.16);
    border-color: #009688;
}

[data-theme="dark"] .att-clk-status-card-icon {
    background: #333;
    color: #adb5bd;
}

[data-theme="dark"] .att-clk-status-card.is-on .att-clk-status-card-icon {
    background: rgba(0, 150, 136, 0.28);
    color: #4db6ac;
}

[data-theme="dark"] .att-clk-status-card-label {
    color: #fff;
}

[data-theme="dark"] .att-clk-status-card-hint {
    color: #adb5bd;
}

[data-theme="dark"] .att-clk-status-card-tick {
    background: #333;
    border-color: #4a4a4a;
}

[data-theme="dark"] .att-clk-status-card.is-on .att-clk-status-card-tick {
    background: #009688;
    border-color: #009688;
    color: #fff;
}

/* Booking AF Picture — dropzone + local paste/upload preview (YCloudX teal) */
.booking-af-picture-field {
    position: relative;
    outline: none;
    border-radius: 8px;
    max-width: 100%;
    margin-bottom: 8px;
    transition: box-shadow 0.15s ease, border-color 0.15s ease;
}

.booking-af-picture-field:focus,
.booking-af-picture-field:focus-within {
    box-shadow: 0 0 0 2px rgba(0, 150, 136, 0.35);
}

/* Why: empty state needs a real dropzone height — Claude's height:0 preview + 14px pad felt too short. */
.booking-af-picture-btn.booking-af-picture-btn {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 150px;
    width: 100%;
    padding: 18px 14px;
    margin-bottom: 0;
    overflow: hidden;
    border-radius: 10px;
    border: 1px dashed #009688;
    background: rgba(0, 150, 136, 0.05);
    transition: border-color 0.2s ease, box-shadow 0.2s ease, background 0.2s ease;
}

.booking-af-picture-btn:hover,
.booking-af-picture-btn:focus-within {
    border-color: #00796b;
    box-shadow: 0 0 0 3px rgba(0, 150, 136, 0.18);
    background: rgba(0, 150, 136, 0.09);
}

.booking-af-picture-btn .fa-camera,
.booking-af-picture-btn .booking-af-picture-upload-text {
    color: #009688;
    font-weight: 600;
}

.booking-af-picture-btn .fa-camera {
    font-size: 22px;
    margin-bottom: 6px;
}

.booking-af-picture-field:not(.has-local-preview) .booking-af-picture-preview {
    display: none;
}

.booking-af-picture-field.has-local-preview .booking-af-picture-btn {
    min-height: 0;
    padding: 0;
    background: #f5f5f5;
    border-style: solid;
}

.booking-af-picture-field.has-local-preview .booking-af-picture-preview {
    display: block;
    position: relative;
    width: 100%;
    height: 180px;
    margin: 0;
}

.booking-af-picture-form-thumb {
    width: 100%;
    height: 100%;
    object-fit: contain;
    display: block;
    cursor: zoom-in;
    background: #f5f5f5;
}

.booking-af-picture-field.has-local-preview .booking-af-picture-btn>.fa-camera,
.booking-af-picture-field.has-local-preview .booking-af-picture-upload-text {
    display: none;
}

/* Why: status rides on the image as an overlay so the card stays compact without losing feedback. */
.booking-af-picture-field.has-local-preview .booking-af-picture-preview-status {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    margin: 0;
    padding: 8px 12px;
    font-size: 12.5px;
    font-weight: 600;
    line-height: 1.3;
    color: #fff !important;
    background: linear-gradient(to top, rgba(0, 0, 0, 0.65), rgba(0, 0, 0, 0));
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    pointer-events: none;
}

/* Why: real button sits above the thumb so Change opens the file picker (CSS ::before was not clickable). */
.booking-af-picture-change-btn {
    position: absolute;
    top: 8px;
    right: 8px;
    z-index: 5;
    padding: 3px 10px;
    border-radius: 999px;
    border: none;
    background: rgba(0, 150, 136, 0.95);
    color: #fff !important;
    font-size: 11px;
    font-weight: 700;
    line-height: 1.4;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
    cursor: pointer;
}

.booking-af-picture-change-btn:hover,
.booking-af-picture-change-btn:focus {
    background: #00796b;
    color: #fff !important;
    outline: none;
    box-shadow: 0 0 0 2px rgba(0, 150, 136, 0.35);
}

.booking-af-picture-paste-row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 4px 8px;
    margin-top: 8px;
    min-height: 28px;
    text-align: center;
}

.booking-af-picture-paste-hint {
    font-size: 12px;
    transition: opacity 0.15s ease;
}

.booking-af-picture-paste-btn {
    font-size: 12px;
    font-weight: 600;
    color: #009688 !important;
    vertical-align: baseline;
}

.booking-af-picture-paste-chip {
    margin-left: 0;
    padding: 2px 10px;
    border-radius: 999px;
    border: 1px solid rgba(0, 150, 136, 0.45);
    background: rgba(0, 150, 136, 0.12);
    color: #00796b !important;
    text-decoration: none !important;
    line-height: 1.4;
    animation: bookingAfPasteChipIn 0.18s ease;
}

@keyframes bookingAfPasteChipIn {
    from {
        opacity: 0;
        transform: translateY(3px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.booking-af-picture-paste-chip:hover,
.booking-af-picture-paste-chip:focus {
    background: rgba(0, 150, 136, 0.22);
    border-color: #009688;
    color: #00695c !important;
    text-decoration: none !important;
}

.booking-af-picture-paste-btn:hover,
.booking-af-picture-paste-btn:focus {
    color: #00796b !important;
    text-decoration: underline;
}

[data-theme="dark"] .booking-af-picture-field:focus,
[data-theme="dark"] .booking-af-picture-field:focus-within {
    box-shadow: 0 0 0 2px rgba(2, 179, 162, 0.45);
}

[data-theme="dark"] .booking-af-picture-btn.booking-af-picture-btn {
    background: #2d2d2d;
    border-color: #009688;
}

[data-theme="dark"] .booking-af-picture-btn:hover,
[data-theme="dark"] .booking-af-picture-btn:focus-within {
    background: #333;
    border-color: #02b3a2;
    box-shadow: 0 0 0 3px rgba(2, 179, 162, 0.25);
}

[data-theme="dark"] .booking-af-picture-btn .fa-camera,
[data-theme="dark"] .booking-af-picture-btn .booking-af-picture-upload-text {
    color: #02b3a2;
}

[data-theme="dark"] .booking-af-picture-field.has-local-preview .booking-af-picture-btn {
    background: #262626;
    border-color: #3a3a3a;
}

[data-theme="dark"] .booking-af-picture-form-thumb {
    background: #262626;
}

[data-theme="dark"] .booking-af-picture-change-btn {
    background: rgba(0, 150, 136, 0.95);
    color: #fff !important;
}

[data-theme="dark"] .booking-af-picture-change-btn:hover,
[data-theme="dark"] .booking-af-picture-change-btn:focus {
    background: #009688;
    box-shadow: 0 0 0 2px rgba(2, 179, 162, 0.4);
}

[data-theme="dark"] .booking-af-picture-paste-hint {
    color: #adb5bd !important;
}

[data-theme="dark"] .booking-af-picture-paste-btn {
    color: #02b3a2 !important;
}

[data-theme="dark"] .booking-af-picture-paste-chip {
    background: rgba(0, 150, 136, 0.22);
    border-color: rgba(2, 179, 162, 0.55);
    color: #4db6ac !important;
}

[data-theme="dark"] .booking-af-picture-paste-chip:hover,
[data-theme="dark"] .booking-af-picture-paste-chip:focus {
    background: rgba(0, 150, 136, 0.32);
    color: #80cbc4 !important;
}

[data-theme="dark"] .booking-af-picture-paste-btn:hover,
[data-theme="dark"] .booking-af-picture-paste-btn:focus {
    color: #4db6ac !important;
}

.asset-dep-preview {
    margin-top: 4px;
    padding-top: 8px;
    border-top: 1px solid var(--default-line, #eee);
}

.asset-dep-preview strong {
    color: var(--main-text-color, #000);
    font-weight: 600;
}

[data-theme="dark"] .asset-dep-preview {
    border-top-color: #3a3a3a;
}

[data-theme="dark"] .asset-dep-preview strong {
    color: #fff;
}

/* Area bulk add (Location / Section) */
.area-bulk-toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 0.75rem;
    position: sticky;
    top: 0;
    z-index: 20;
    margin-bottom: 1rem;
    padding: 0.85rem 1rem;
    background: #fff;
    border: 1px solid var(--default-line, #dee2e6);
    border-radius: 8px;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04);
}

.area-bulk-toolbar__meta {
    display: flex;
    align-items: center;
    gap: 0.65rem;
    min-width: 0;
}

.area-bulk-toolbar__count {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 2rem;
    height: 2rem;
    padding: 0 0.55rem;
    border-radius: 999px;
    background: #009688;
    color: #fff;
    font-weight: 700;
    font-size: 0.9rem;
}

.area-bulk-toolbar__title {
    margin: 0;
    font-size: 1.05rem;
    font-weight: 600;
}

.area-bulk-toolbar__hint {
    margin: 0;
    font-size: 0.8rem;
    color: #6c757d;
}

.area-bulk-card {
    background: #fff;
    border: 1px solid var(--default-line, #dee2e6);
    border-radius: 8px;
    margin-bottom: 1rem;
    overflow: hidden;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.03);
}

.area-bulk-card__head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 0.75rem;
    padding: 0.85rem 1rem;
    background: #f8f9fa;
    border-bottom: 1px solid var(--default-line, #dee2e6);
    border-left: 4px solid #009688;
}

.area-bulk-card__identity {
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
    min-width: 0;
}

.area-bulk-card__index {
    flex-shrink: 0;
    width: 2rem;
    height: 2rem;
    border-radius: 50%;
    background: #009688;
    color: #fff;
    font-weight: 700;
    font-size: 0.85rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.area-bulk-card__name {
    margin: 0;
    font-size: 1rem;
    font-weight: 600;
    word-break: break-word;
}

.area-bulk-card__sub {
    margin: 0.15rem 0 0;
    font-size: 0.8rem;
    color: #6c757d;
}

.area-bulk-card__body {
    padding: 1rem;
}

.area-bulk-card__section {
    margin-top: 0.25rem;
}

.area-bulk-card__section-title {
    margin: 0 0 0.75rem;
    padding-bottom: 0.4rem;
    font-size: 0.78rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: #6c757d;
    border-bottom: 1px dashed var(--default-line, #dee2e6);
}

.area-bulk-card label {
    font-size: 0.8rem;
    font-weight: 600;
    margin-bottom: 0.3rem;
}

.area-bulk-card__body>.area-bulk-booking:first-child {
    margin-top: 0;
}

.area-bulk-booking {
    margin-top: 0.85rem;
    border: 1px solid var(--default-line, #dee2e6);
    border-radius: 10px;
    background: #fff;
    overflow: hidden;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.area-bulk-booking:hover {
    border-color: #b2dfdb;
}

.area-bulk-booking.is-open {
    border-color: #80cbc4;
    box-shadow: 0 4px 12px rgba(0, 150, 136, 0.08);
}

.area-bulk-booking__toggle {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    padding: 0.8rem 0.95rem;
    border: 0;
    background: transparent;
    text-align: left;
    color: inherit;
    cursor: pointer;
}

.area-bulk-booking__toggle:focus {
    outline: none;
}

.area-bulk-booking__toggle:focus-visible {
    box-shadow: inset 0 0 0 2px rgba(0, 150, 136, 0.35);
}

.area-bulk-booking__lead {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    min-width: 0;
}

.area-bulk-booking__icon {
    flex-shrink: 0;
    width: 2.25rem;
    height: 2.25rem;
    border-radius: 8px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: rgba(0, 150, 136, 0.12);
    color: #009688;
    font-size: 0.95rem;
}

.area-bulk-booking__copy {
    display: flex;
    flex-direction: column;
    min-width: 0;
    line-height: 1.25;
}

.area-bulk-booking__title {
    font-weight: 600;
    font-size: 0.92rem;
}

.area-bulk-booking__hint {
    margin-top: 0.12rem;
    font-size: 0.75rem;
    font-weight: 400;
    color: #6c757d;
}

.area-bulk-booking__chevron {
    flex-shrink: 0;
    width: 1.75rem;
    height: 1.75rem;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: #f3f4f5;
    color: #6c757d;
    font-size: 0.7rem;
    transition: transform 0.18s ease, background 0.15s ease, color 0.15s ease;
}

.area-bulk-booking.is-open .area-bulk-booking__chevron {
    transform: rotate(180deg);
    background: rgba(var(--primary-rgb, 0, 150, 136), 0.15);
    color: #009688;
}

.area-bulk-booking.is-open .area-bulk-booking__icon {
    background: #009688;
    color: #fff;
}

.area-bulk-booking__panel {
    display: none;
    padding: 0.15rem 1rem 1rem;
    border-top: 1px dashed var(--default-line, #dee2e6);
    background: #fafafa;
}

.area-bulk-booking.is-open .area-bulk-booking__panel {
    display: block;
}

.area-bulk-empty {
    padding: 1.25rem;
}

[data-theme="dark"] .area-bulk-toolbar {
    background: #262626;
    border-color: #3a3a3a;
}

[data-theme="dark"] .area-bulk-toolbar__title {
    color: #fff;
}

[data-theme="dark"] .area-bulk-toolbar__hint,
[data-theme="dark"] .area-bulk-card__sub,
[data-theme="dark"] .area-bulk-card__section-title {
    color: #adb5bd;
}

[data-theme="dark"] .area-bulk-card {
    background: #262626;
    border-color: #3a3a3a;
}

[data-theme="dark"] .area-bulk-card__head {
    background: #2d2d2d;
    border-bottom-color: #3a3a3a;
}

[data-theme="dark"] .area-bulk-card__name {
    color: #fff;
}

[data-theme="dark"] .area-bulk-booking {
    background: #2d2d2d;
    border-color: #3a3a3a;
    box-shadow: none;
}

[data-theme="dark"] .area-bulk-booking:hover {
    border-color: #009688;
}

[data-theme="dark"] .area-bulk-booking.is-open {
    border-color: #009688;
    box-shadow: none;
}

[data-theme="dark"] .area-bulk-booking__title {
    color: #fff;
}

[data-theme="dark"] .area-bulk-booking__hint {
    color: #adb5bd;
}

[data-theme="dark"] .area-bulk-booking__icon {
    background: rgba(0, 150, 136, 0.22);
    color: #4db6ac;
}

[data-theme="dark"] .area-bulk-booking.is-open .area-bulk-booking__icon {
    background: #009688;
    color: #fff;
}

[data-theme="dark"] .area-bulk-booking__chevron {
    background: #333;
    color: #adb5bd;
}

[data-theme="dark"] .area-bulk-booking.is-open .area-bulk-booking__chevron {
    background: rgba(0, 150, 136, 0.28);
    color: #4db6ac;
}

[data-theme="dark"] .area-bulk-booking__panel {
    background: #262626;
    border-top-color: #3a3a3a;
}

[data-theme="dark"] .area-bulk-card__section-title {
    border-bottom-color: #3a3a3a;
}

/* Leave pro-rate scheme cards */
.leave-prorate-toolbar {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    margin-bottom: 16px;
}

.leave-prorate-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
    gap: 16px;
}

.leave-prorate-card {
    display: block;
    background: #fff;
    border-radius: 10px;
    padding: 16px;
    border: 1px solid #e9ecef;
    border-left: 4px solid #009688;
    color: inherit;
    text-decoration: none;
    box-shadow: 0 6px 6px 0 rgba(0, 0, 0, 0.08), 0 1px 6px 0 rgba(0, 0, 0, 0.06), 6px 6px 8px -2px rgba(0, 0, 0, 0.2);
    transition: transform 0.15s, box-shadow 0.15s;
}

a.leave-prorate-card:hover {
    transform: translateY(-1px);
    color: inherit;
    text-decoration: none;
    box-shadow: 0 6px 6px 0 rgba(0, 0, 0, 0.14), 0 1px 6px 0 rgba(0, 0, 0, 0.12), 6px 6px 8px -2px rgba(0, 0, 0, 0.2);
}

.leave-prorate-card.is-static:hover {
    transform: none;
}

.leave-prorate-card__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 14px;
}

.leave-prorate-card__identity {
    min-width: 0;
}

.leave-prorate-card__name {
    font-size: 18px;
    font-weight: 600;
    line-height: 1.2;
    word-break: break-word;
}

.leave-prorate-card__meta {
    font-size: 11px;
    color: #6c757d;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-top: 4px;
}

.leave-prorate-card__total {
    flex-shrink: 0;
    text-align: right;
}

.leave-prorate-card__total-label {
    font-size: 11px;
    color: #6c757d;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.leave-prorate-card__total-value {
    font-size: 22px;
    font-weight: 700;
    color: #009688;
    line-height: 1.1;
}

.leave-prorate-months {
    display: grid;
    grid-template-columns: repeat(6, minmax(0, 1fr));
    gap: 8px;
}

.leave-prorate-month {
    background: #f5f5f5;
    border: 1px solid #e9ecef;
    border-radius: 8px;
    padding: 8px 4px;
    text-align: center;
    min-width: 0;
}

.leave-prorate-month__lbl {
    display: block;
    font-size: 11px;
    color: #6c757d;
    text-transform: uppercase;
    letter-spacing: 0.4px;
    margin-bottom: 4px;
}

.leave-prorate-month__val {
    display: block;
    font-weight: 600;
    font-size: 14px;
}

.leave-prorate-month .form-control {
    width: 100%;
    min-width: 0;
    padding: 4px 2px;
    text-align: center;
    height: 32px;
}

.leave-prorate-fields {
    display: grid;
    grid-template-columns: minmax(0, 1.4fr) minmax(140px, 0.6fr);
    gap: 12px;
    margin-bottom: 16px;
}

.leave-prorate-empty {
    min-height: 160px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #6c757d;
}

.leave-prorate-actions {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 16px;
    margin-top: 18px;
}

@media (max-width: 767px) {
    .leave-prorate-months {
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }

    .leave-prorate-fields {
        grid-template-columns: 1fr;
    }
}

[data-theme="dark"] .leave-prorate-card {
    background: #2d2d2d;
    border-color: #3a3a3a;
    color: #fff;
}

[data-theme="dark"] a.leave-prorate-card:hover {
    color: #fff;
}

[data-theme="dark"] .leave-prorate-card__meta,
[data-theme="dark"] .leave-prorate-card__total-label,
[data-theme="dark"] .leave-prorate-month__lbl {
    color: #adb5bd;
}

[data-theme="dark"] .leave-prorate-card__name {
    color: #fff;
}

[data-theme="dark"] .leave-prorate-card__total-value {
    color: #4db6ac;
}

[data-theme="dark"] .leave-prorate-month {
    background: #333;
    border-color: #3a3a3a;
}

[data-theme="dark"] .leave-prorate-month__val {
    color: #fff;
}

[data-theme="dark"] .leave-prorate-empty {
    color: #adb5bd;
}

/* Leave admin setting cards (MC limit, revision) */
.leave-setting-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: 16px;
}

.leave-setting-grid.is-single {
    grid-template-columns: minmax(0, 420px);
}

.leave-setting-card.is-wide {
    grid-column: 1 / -1;
}

.leave-schedule-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    align-items: stretch;
}

.leave-schedule-grid .leave-setting-card {
    height: 100%;
}

.leave-setting-card .select2-container {
    width: 100% !important;
}

.leave-setting-card {
    background: #fff;
    border-radius: 10px;
    padding: 18px;
    border: 1px solid #e9ecef;
    border-left: 4px solid #009688;
    box-shadow: 0 6px 6px 0 rgba(0, 0, 0, 0.08), 0 1px 6px 0 rgba(0, 0, 0, 0.06), 6px 6px 8px -2px rgba(0, 0, 0, 0.2);
}

.leave-setting-card.is-danger {
    border-left-color: #dc3545;
}

.leave-setting-card.is-warning {
    border-left-color: #ffc107;
}

.leave-setting-card.is-info {
    border-left-color: #17a2b8;
}

.leave-setting-card__head {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 16px;
}

.leave-setting-card__icon {
    width: 50px;
    height: 50px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    color: #fff;
    font-size: 22px;
    background: #009688;
}

.leave-setting-card.is-danger .leave-setting-card__icon {
    background: #dc3545;
}

.leave-setting-card.is-warning .leave-setting-card__icon {
    background: #ffc107;
}

.leave-setting-card.is-info .leave-setting-card__icon {
    background: #17a2b8;
}

.leave-setting-card__icon .fa {
    color: inherit;
}

.leave-setting-card__title {
    font-size: 16px;
    font-weight: 600;
    line-height: 1.2;
}

.leave-setting-card__hint {
    font-size: 12px;
    color: #6c757d;
    margin-top: 4px;
    line-height: 1.4;
}

.leave-setting-card__value {
    font-size: 28px;
    font-weight: 700;
    color: #009688;
    line-height: 1.1;
}

.leave-setting-card__unit {
    font-size: 12px;
    color: #6c757d;
    text-transform: uppercase;
    letter-spacing: 0.4px;
    margin-top: 4px;
}

.leave-setting-card .input-group-text {
    min-width: 70px;
    justify-content: center;
}

.leave-setting-card .form-group label {
    display: block;
    font-size: 12px;
    font-weight: 600;
    color: #6c757d;
    margin-bottom: 4px;
}

.leave-setting-card__head>div:not(.leave-setting-card__icon):not(.leave-setting-switch) {
    flex: 1;
    min-width: 0;
}

.leave-setting-switch {
    position: relative;
    display: inline-flex;
    margin: 0 0 0 12px;
    align-self: flex-start;
    font-size: 12px;
    font-weight: 600;
    color: #6c757d;
}

.leave-setting-switch__btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin: 0;
    padding: 0;
    border: 0;
    background: transparent;
    cursor: pointer;
    color: inherit;
    font-size: inherit;
    font-weight: inherit;
    line-height: inherit;
}

.leave-setting-switch input[type="checkbox"] {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    border: 0;
}

.leave-setting-switch__track {
    width: 40px;
    height: 22px;
    border-radius: 11px;
    background: #dee2e6;
    position: relative;
    flex-shrink: 0;
    transition: background 0.2s ease;
}

.leave-setting-switch__track::after {
    content: "";
    position: absolute;
    top: 2px;
    left: 2px;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background: #fff;
    transition: transform 0.2s ease;
}

.leave-setting-switch input:checked+.leave-setting-switch__btn .leave-setting-switch__track {
    background: #009688;
}

.leave-setting-switch input:checked+.leave-setting-switch__btn .leave-setting-switch__track::after {
    transform: translateX(18px);
}

.leave-setting-switch__btn:focus-visible .leave-setting-switch__track {
    box-shadow: 0 0 0 3px rgba(0, 150, 136, 0.28);
}

.leave-setting-switch__on {
    display: none;
}

.leave-setting-switch input:checked+.leave-setting-switch__btn .leave-setting-switch__on {
    display: inline;
}

.leave-setting-switch input:checked+.leave-setting-switch__btn .leave-setting-switch__off {
    display: none;
}

.leave-setting-switch__state {
    margin-left: 12px;
    align-self: flex-start;
    font-size: 12px;
    font-weight: 600;
    color: #6c757d;
}

.leave-setting-card.is-off .form-row {
    opacity: 0.45;
    pointer-events: none;
}

@media (max-width: 767.98px) {
    .leave-schedule-grid {
        grid-template-columns: minmax(0, 1fr);
    }
}

@media (max-width: 575px) {
    .leave-setting-grid {
        grid-template-columns: 1fr;
    }
}

[data-theme="dark"] .leave-setting-card {
    background: #2d2d2d;
    border-color: #3a3a3a;
    color: #fff;
}

[data-theme="dark"] .leave-setting-card__title {
    color: #fff;
}

[data-theme="dark"] .leave-setting-card__hint,
[data-theme="dark"] .leave-setting-card__unit,
[data-theme="dark"] .leave-setting-card .form-group label,
[data-theme="dark"] .leave-setting-switch,
[data-theme="dark"] .leave-setting-switch__state {
    color: #adb5bd;
}

[data-theme="dark"] .leave-setting-switch__track {
    background: #3a3a3a;
}

[data-theme="dark"] .leave-setting-switch input:checked+.leave-setting-switch__btn .leave-setting-switch__track {
    background: #009688;
}

[data-theme="dark"] .leave-setting-card__value {
    color: #4db6ac;
}

/* ==================== LEAVE APPLY / TIME OFF / APPROVE ==================== */
.leave-app-back {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin: 0 0 16px;
    padding: 8px 14px;
    border-radius: 999px;
    border: 1px solid #e0e0e0;
    background: #fff;
    color: #333;
    font-size: 0.85rem;
    font-weight: 600;
    text-decoration: none !important;
    transition: border-color 0.2s ease, background-color 0.2s ease, color 0.2s ease;
}

.leave-app-toolbar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px;
    margin: 0 0 16px;
}

.leave-app-toolbar .leave-app-back {
    margin: 0;
}

.leave-app-toolbar__actions {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-left: auto;
}

.leave-app-back:hover {
    border-color: var(--primary, #009688);
    color: var(--primary, #009688);
    background: #f7fffe;
}

.leave-app-aside {
    margin-bottom: 16px;
}

@media (min-width: 992px) {
    .leave-app-aside {
        position: sticky;
        top: 16px;
        align-self: flex-start;
        margin-bottom: 0;
    }
}

.leave-app-summary {
    background: #fff;
    border: 1px solid #e0e0e0;
    border-radius: 12px;
    padding: 18px 16px;
}

.leave-app-summary__top {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    margin-bottom: 14px;
    padding-bottom: 14px;
    border-bottom: 1px solid #e9ecef;
}

.leave-app-summary__icon {
    width: 40px;
    height: 40px;
    border-radius: 10px;
    background: var(--primary-light, #b8e2de);
    color: var(--info, #17a2b8);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    font-size: 1.15rem;
}

.leave-app-summary__title {
    font-size: 1.05rem;
    font-weight: 700;
    letter-spacing: -0.01em;
    color: #24302f;
    margin: 0 0 3px;
    line-height: 1.25;
}

.leave-app-summary__hint {
    margin: 0;
    font-size: 0.82rem;
    line-height: 1.4;
    color: var(--secondary, #6c757d);
}

.leave-app-summary__photo {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    margin-bottom: 14px;
    padding-bottom: 14px;
    border-bottom: 1px solid #e9ecef;
}
.leave-app-summary__photo img,
.leave-app-summary__photo .usr-ava {
    width: 72px;
    height: 72px;
    border-radius: 50%;
    object-fit: cover;
    font-size: 22px;
    border: 2px solid #e0e0e0;
}

.leave-app-summary__photo img {
    cursor: pointer;
}

.staff-identity-photo #preview {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.staff-identity-photo .usr-ava {
    width: 100%;
    height: 100%;
    font-size: 22px;
}
.leave-app-summary__name {
    margin: 10px 0 0;
    font-size: 1.05rem;
    font-weight: 700;
    color: #24302f;
    line-height: 1.3;
}

.leave-app-summary__photo+.leave-app-summary__top {
    border-bottom: 0;
    margin-bottom: 12px;
    padding-bottom: 0;
}

.leave-app-summary__taken {
    display: none;
    align-items: center;
    gap: 6px;
    margin-left: auto;
    flex: 0 0 auto;
    font-weight: 700;
    line-height: 1.2;
    white-space: nowrap;
}

.leave-app-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 999px;
    padding: 4px 9px;
    font-size: 0.7rem;
    font-weight: 600;
    line-height: 1.2;
    text-align: center;
    white-space: nowrap;
}

.leave-app-badge--ok {
    background: var(--primary-light, #b8e2de);
    color: var(--primary-back, #00635a);
}

.leave-app-badge--warn {
    background: rgba(255, 193, 7, 0.22);
    color: #856404;
}

.leave-app-badge--neutral {
    background: var(--slight-dark-back, #e9ecef);
    color: var(--secondary, #6c757d);
}

.leave-app-badge--danger {
    background: rgba(220, 53, 69, 0.14);
    color: #a71d2a;
}

.leave-app-stats {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.leave-app-stat {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 10px;
}

.leave-app-stat__label {
    font-size: 0.8rem;
    color: var(--secondary, #6c757d);
}

.leave-app-stat__value {
    font-size: 0.95rem;
    font-weight: 700;
    color: #24302f;
    text-align: right;
}

.leave-app-stat__value.is-danger {
    color: #dc3545;
}

.leave-app-stat.is-active {
    margin: 0 -8px;
    padding: 6px 8px;
    border-radius: 8px;
    background: rgba(0, 150, 136, 0.12);
}

.leave-app-stat__limit {
    font-weight: 600;
    color: var(--secondary, #6c757d);
}

.leave-app-stats .leave-app-badge {
    align-self: flex-start;
    width: auto;
    max-width: max-content;
    margin-top: 0;
    margin-left: 6px;
    vertical-align: middle;
}

.leave-app-stats--kpis {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
    align-items: stretch;
}

.leave-app-stats--kpis .leave-app-stat {
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-start;
    gap: 4px;
    padding: 8px 10px;
    border-radius: 10px;
    background: #f8fafb;
    border: 1px solid #eef2f4;
}

.leave-app-stats--kpis .leave-app-stat--avail,
.leave-app-stats--kpis .leave-app-stat--span {
    grid-column: 1 / -1;
}

.leave-app-stats--kpis .leave-app-stat--avail {
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 12px 12px;
    border-left: 3px solid var(--primary, #009688);
}

.leave-app-stats--kpis .leave-app-stat__label {
    font-size: 0.72rem;
    font-weight: 600;
    letter-spacing: 0.02em;
    text-transform: uppercase;
}

.leave-app-stats--kpis .leave-app-stat__value {
    font-size: 0.98rem;
    text-align: left;
    width: 100%;
    word-break: break-word;
}

.leave-app-stats--kpis .leave-app-stat--avail .leave-app-stat__value {
    font-size: 1.35rem;
    line-height: 1.1;
    text-align: right;
    width: auto;
    color: var(--primary, #009688);
}

.leave-app-stats--kpis .leave-app-stat.is-muted .leave-app-stat__value {
    color: #9aa0a6;
    font-weight: 500;
}

.leave-app-stats--kpis .leave-app-stat.is-danger .leave-app-stat__value,
.leave-app-stats--kpis .leave-app-stat--avail.is-danger .leave-app-stat__value {
    color: #dc3545;
    font-weight: 700;
}

.leave-app-main.tile {
    margin-bottom: 24px;
    padding: 20px 22px;
}

.leave-app-head {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    margin: 0 0 18px;
    padding-bottom: 14px;
    border-bottom: 1px solid #e9ecef;
}

.leave-app-head__icon {
    width: 40px;
    height: 40px;
    border-radius: 10px;
    background: var(--primary-light, #b8e2de);
    color: var(--info, #17a2b8);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    font-size: 1.15rem;
}

.leave-app-head__title {
    font-size: 1.15rem;
    font-weight: 700;
    letter-spacing: -0.01em;
    color: #24302f;
    margin: 0 0 3px;
    line-height: 1.25;
}

.leave-app-head__hint {
    margin: 0;
    font-size: 0.88rem;
    line-height: 1.4;
    color: var(--secondary, #6c757d);
}

.leave-app-dates {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 12px;
    margin-bottom: 12px;
}

.leave-app-date-alerts {
    margin: 0 0 14px;
}

.leave-app-date-alerts[hidden] {
    display: none;
}

.leave-app-date-alerts .leave-app-alert:last-child {
    margin-bottom: 0;
}

.leave-app-field.is-invalid .form-control {
    border-color: #dc3545;
}

.leave-app-actions .btn-primary:disabled {
    opacity: 1;
    cursor: not-allowed;
    background: #cfd8dc;
    border-color: #cfd8dc;
    color: #607d8b;
}

.leave-app-times {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
    margin-bottom: 12px;
}

.leave-app-mc-type {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
}

.leave-app-mc-type__option {
    position: relative;
    margin: 0;
    cursor: pointer;
}

.leave-app-mc-type__input {
    position: absolute;
    inset: 0;
    opacity: 0;
    margin: 0;
    cursor: pointer;
    z-index: 1;
}

.leave-app-mc-type__card {
    display: flex;
    align-items: center;
    gap: 10px;
    min-height: 48px;
    padding: 10px 12px;
    border: 1px solid #e0e0e0;
    border-radius: 12px;
    background: #fff;
    color: #24302f;
    transition: border-color 0.2s ease, background-color 0.2s ease, box-shadow 0.2s ease;
}

.leave-app-mc-type__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border-radius: 8px;
    background: rgba(0, 150, 136, 0.12);
    color: var(--primary, #009688);
    flex: 0 0 32px;
}

.leave-app-mc-type__title {
    font-size: 0.92rem;
    font-weight: 600;
    line-height: 1.2;
}

.leave-app-mc-type__option:hover .leave-app-mc-type__card {
    border-color: var(--primary, #009688);
}

.leave-app-mc-type__input:focus-visible+.leave-app-mc-type__card {
    border-color: var(--primary, #009688);
    box-shadow: 0 0 0 2px rgba(0, 150, 136, 0.22);
}

.leave-app-mc-type__input:checked+.leave-app-mc-type__card {
    border-color: var(--primary, #009688);
    background: rgba(0, 150, 136, 0.08);
    box-shadow: inset 0 0 0 1px var(--primary, #009688);
}

.leave-app-field {
    display: block;
    margin-bottom: 14px;
}

.leave-app-field__label {
    display: block;
    font-size: 0.8rem;
    font-weight: 600;
    color: #24302f;
    margin-bottom: 6px;
}

.leave-app-field__req {
    color: #dc3545;
    margin-left: 2px;
}

.leave-app-file {
    display: block;
    border: 1px dashed #cfd8dc;
    border-radius: 12px;
    padding: 14px;
    background: #fafafa;
    margin-bottom: 16px;
}

.leave-app-file .form-control {
    background: #fff;
}

.leave-app-file--drop {
    border: 0;
    background: transparent;
    padding: 0;
}

.leave-app-file--drop .leave-app-field__label {
    display: block;
    margin-bottom: 8px;
}

.leave-app-file--drop .upload-drop-zone {
    position: relative;
    border: 1px dashed #d1d5db;
    border-radius: 11px;
    padding: 8px 10px;
    text-align: center;
    background: #fafbfc;
    transition: border-color .2s, background .2s;
    cursor: pointer;
    min-height: 56px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

.leave-app-file--drop .upload-drop-zone:hover,
.leave-app-file--drop .upload-drop-zone.drag-over {
    border-color: var(--primary, #009688);
    background: #eef4fb;
}

.leave-app-file--drop .upload-drop-zone .upload-drop-input {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    cursor: pointer;
}

.leave-app-file--drop .upload-drop-placeholder {
    position: relative;
    z-index: 1;
    pointer-events: none;
}

.leave-app-file--drop .upload-drop-placeholder p {
    margin: 0;
    font-size: 0.88rem;
    font-weight: 600;
    color: var(--info, #17a2b8);
    word-break: break-word;
}

.leave-app-file--drop .upload-drop-icon-accent {
    color: var(--info, #17a2b8);
    margin-bottom: 4px;
}

.leave-app-file__hint {
    display: block;
    margin-top: 8px;
    font-size: 0.78rem;
    color: var(--secondary, #6c757d);
}

.leave-app-drop-preview {
    margin-top: 10px;
}

.leave-app-attachment .leave-app-drop-preview {
    margin-top: 0;
}

.leave-app-drop-preview[hidden] {
    display: none !important;
}

.leave-app-drop-preview__card {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 8px;
    width: 100%;
    margin: 0;
    padding: 10px;
    border: 1px solid #e9ecef;
    border-radius: 12px;
    background: #f8fafb;
    cursor: pointer;
    text-align: left;
    color: inherit;
    font: inherit;
}

.leave-app-drop-preview__card:hover,
.leave-app-drop-preview__card:focus {
    border-color: var(--primary, #009688);
    outline: none;
}

.leave-app-drop-preview.is-file .leave-app-drop-preview__card {
    flex-direction: row;
    align-items: center;
}

.leave-app-drop-preview__frame {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    border-radius: 10px;
    background: #fff;
    border: 1px solid #e9ecef;
    min-height: 88px;
}

.leave-app-drop-preview.is-image .leave-app-drop-preview__frame {
    width: 100%;
}

.leave-app-drop-preview.is-file .leave-app-drop-preview__frame {
    width: 88px;
    height: 88px;
    flex: 0 0 88px;
}

.leave-app-drop-preview__img,
.leave-app-drop-preview__file {
    display: none;
}

.leave-app-drop-preview.is-image .leave-app-drop-preview__img {
    display: block;
    width: 100%;
    max-height: 280px;
    object-fit: contain;
    background: #fff;
}

.leave-app-drop-preview.is-file .leave-app-drop-preview__file {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    font-size: 2.2rem;
    color: var(--info, #17a2b8);
}

.leave-app-drop-preview__caption {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}

.leave-app-drop-preview__name {
    font-size: 0.88rem;
    font-weight: 600;
    color: #24302f;
    word-break: break-word;
}

.leave-app-drop-preview__action {
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--info, #17a2b8);
}

.leave-app-review {
    display: flex;
    flex-direction: column;
    gap: 0;
    margin-bottom: 16px;
}

.leave-app-review__row {
    display: grid;
    grid-template-columns: 140px 1fr;
    gap: 12px;
    padding: 10px 0;
    border-bottom: 1px solid #e9ecef;
}

.leave-app-review__label {
    font-size: 0.82rem;
    font-weight: 600;
    color: var(--secondary, #6c757d);
    padding-top: 2px;
}

.leave-app-review__value {
    font-size: 0.95rem;
    font-weight: 600;
    color: #24302f;
    word-break: break-word;
}

.leave-app-review__value.is-accent {
    color: #c0392b;
}

.leave-app-review__value.is-muted {
    color: #9aa0a6;
    font-weight: 500;
}

.leave-app-person {
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

.leave-app-person img {
    width: 22px;
    height: 22px;
    border-radius: 50%;
    object-fit: cover;
}

.leave-app-alert {
    border-radius: 12px;
    padding: 12px 14px;
    margin-bottom: 10px;
    font-size: 0.9rem;
    line-height: 1.45;
}

.leave-app-alert--danger {
    background: rgba(220, 53, 69, 0.1);
    color: #a71d2a;
}

.leave-app-alert--hint {
    background: rgba(0, 150, 136, 0.1);
    color: #00635a;
}

.leave-app-alert--warn {
    background: rgba(255, 193, 7, 0.18);
    color: #856404;
}

.leave-app-alert i {
    margin-right: 6px;
}

.leave-app-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 8px;
}

.leave-app-actions .btn {
    flex: 1 1 160px;
    min-height: 42px;
}

.leave-app-attachment {
    margin: 8px 0 16px;
}

.leave-app-attachment>a>img,
.leave-app-attachment img.focus-img {
    border-radius: 12px;
    max-width: 100%;
    max-height: 280px;
    width: auto;
    object-fit: contain;
    display: block;
    cursor: pointer;
}

.leave-app-warn {
    border-radius: 12px;
    padding: 10px 12px;
    margin-top: 8px;
    background: rgba(220, 53, 69, 0.1);
    color: #a71d2a;
    font-size: 0.85rem;
    line-height: 1.4;
}

.leave-app-warn a {
    color: #a71d2a;
    font-weight: 700;
    text-decoration: underline;
}

@media (max-width: 991.98px) {
    .leave-app-summary {
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        gap: 8px 12px;
        padding: 12px 14px;
    }

    .leave-app-summary__photo {
        flex: 1 0 100%;
        flex-direction: row;
        align-items: center;
        text-align: left;
        gap: 10px;
        margin: 0;
        padding: 0;
        border-bottom: 0;
    }

    .leave-app-summary__photo img,
    .leave-app-summary__photo .usr-ava {
        width: 40px;
        height: 40px;
        font-size: 13px;
        flex-shrink: 0;
    }

    .leave-app-summary__name {
        margin: 0;
        font-size: 0.95rem;
        text-align: left;
        min-width: 0;
    }

    .leave-app-summary__top,
    .leave-app-summary__photo+.leave-app-summary__top {
        flex: 1 1 auto;
        min-width: 0;
        margin: 0;
        padding: 0;
        border-bottom: 0;
        align-items: center;
    }

    .leave-app-summary__icon {
        width: 32px;
        height: 32px;
        font-size: 0.95rem;
        border-radius: 8px;
    }

    .leave-app-summary__top>div {
        display: flex;
        align-items: center;
        flex-wrap: wrap;
        gap: 4px 8px;
        min-width: 0;
    }

    .leave-app-summary__title {
        margin: 0;
        font-size: 0.95rem;
    }

    .leave-app-summary__hint {
        display: none;
    }

    .leave-app-summary__hint:has(.leave-app-badge) {
        display: inline-flex;
        margin: 0;
    }

    .leave-app-stats {
        flex: 0 1 auto;
        margin-left: auto;
        align-items: flex-end;
    }

    .leave-app-stat--aside {
        display: none;
    }

    .leave-app-stat:first-child {
        justify-content: flex-end;
    }

    .leave-app-stat:first-child .leave-app-stat__label {
        position: absolute;
        width: 1px;
        height: 1px;
        padding: 0;
        margin: -1px;
        overflow: hidden;
        clip: rect(0, 0, 0, 0);
        white-space: nowrap;
        border: 0;
    }

    .leave-app-stat:not(:first-child) {
        flex: 1 0 100%;
    }

    .leave-app-summary:has(.leave-app-stat--aside) .leave-app-stats:not(.leave-app-stats--kpis) > .leave-app-stat:not(.leave-app-stat--aside) {
        flex: 0 0 auto;
        width: auto;
        justify-content: flex-end;
    }

    .leave-app-summary:has(.leave-app-stat--aside) .leave-app-stats:not(.leave-app-stats--kpis) > .leave-app-stat:not(.leave-app-stat--aside) .leave-app-stat__label {
        position: absolute;
        width: 1px;
        height: 1px;
        padding: 0;
        margin: -1px;
        overflow: hidden;
        clip: rect(0, 0, 0, 0);
        white-space: nowrap;
        border: 0;
    }

    .leave-app-summary:has(.leave-app-stat--aside) .leave-app-stats:not(.leave-app-stats--kpis) > .leave-app-stat:not(.leave-app-stat--aside) ~ .leave-app-stat:not(.leave-app-stat--aside) {
        flex: 1 0 100%;
        width: 100%;
        justify-content: space-between;
    }

    .leave-app-summary:has(.leave-app-stat--aside) .leave-app-stats:not(.leave-app-stats--kpis) > .leave-app-stat:not(.leave-app-stat--aside) ~ .leave-app-stat:not(.leave-app-stat--aside) .leave-app-stat__label {
        position: static;
        width: auto;
        height: auto;
        padding: 0;
        margin: 0;
        overflow: visible;
        clip: auto;
        white-space: normal;
        border: 0;
    }

    .leave-app-stats>.leave-app-summary__hint,
    .leave-app-stats>.leave-app-badge {
        flex: 1 0 auto;
    }

    /* Detail summaries with several figures need a full-width list.
	   Department and site are hidden here, so the first figure stays beside the type. */
    .leave-app-summary:has(.leave-app-stat:not(.leave-app-stat--aside) ~ .leave-app-stat:not(.leave-app-stat--aside) ~ .leave-app-stat:not(.leave-app-stat--aside)) .leave-app-stats:not(.leave-app-stats--kpis) {
        flex: 1 0 100%;
        width: 100%;
        margin-left: 0;
        align-items: stretch;
        gap: 8px;
        margin-top: 2px;
        padding-top: 10px;
        border-top: 1px solid #e9ecef;
    }

    .leave-app-summary:has(.leave-app-stat:not(.leave-app-stat--aside) ~ .leave-app-stat:not(.leave-app-stat--aside) ~ .leave-app-stat:not(.leave-app-stat--aside)) .leave-app-stats:not(.leave-app-stats--kpis) .leave-app-stat,
    .leave-app-summary:has(.leave-app-stat:not(.leave-app-stat--aside) ~ .leave-app-stat:not(.leave-app-stat--aside) ~ .leave-app-stat:not(.leave-app-stat--aside)) .leave-app-stats:not(.leave-app-stats--kpis) .leave-app-stat:first-child,
    .leave-app-summary:has(.leave-app-stat:not(.leave-app-stat--aside) ~ .leave-app-stat:not(.leave-app-stat--aside) ~ .leave-app-stat:not(.leave-app-stat--aside)) .leave-app-stats:not(.leave-app-stats--kpis) .leave-app-stat:not(:first-child) {
        flex: 0 0 auto;
        width: 100%;
        justify-content: space-between;
        align-items: baseline;
        gap: 8px 12px;
    }

    .leave-app-summary:has(.leave-app-stat:not(.leave-app-stat--aside) ~ .leave-app-stat:not(.leave-app-stat--aside) ~ .leave-app-stat:not(.leave-app-stat--aside)) .leave-app-stats:not(.leave-app-stats--kpis) .leave-app-stat__label {
        position: static;
        width: auto;
        height: auto;
        padding: 0;
        margin: 0;
        overflow: visible;
        clip: auto;
        white-space: normal;
        border: 0;
        flex: 1 1 auto;
    }

    .leave-app-summary:has(.leave-app-stat:not(.leave-app-stat--aside) ~ .leave-app-stat:not(.leave-app-stat--aside) ~ .leave-app-stat:not(.leave-app-stat--aside)) .leave-app-stats:not(.leave-app-stats--kpis) .leave-app-stat__value {
        flex: 0 1 auto;
        max-width: 58%;
        text-align: right;
        overflow-wrap: anywhere;
    }

    .leave-app-summary__taken {
        display: inline-flex;
    }

    .leave-app-summary:has(.leave-app-summary__taken) .leave-app-summary__top,
    .leave-app-summary:has(.leave-app-summary__taken) .leave-app-summary__photo+.leave-app-summary__top {
        flex: 1 0 100%;
        width: 100%;
    }

    .leave-app-summary:has(.leave-app-summary__taken) .leave-app-summary__top>div {
        flex: 1 1 auto;
    }

    .leave-app-summary:has(.leave-app-summary__taken) .leave-app-stats:not(.leave-app-stats--kpis) {
        flex: 1 0 100%;
        width: 100%;
        margin-left: 0;
        align-items: stretch;
        gap: 8px;
        margin-top: 2px;
        padding-top: 10px;
        border-top: 1px solid #e9ecef;
    }

    .leave-app-summary:has(.leave-app-summary__taken) .leave-app-stats:not(.leave-app-stats--kpis)>.leave-app-stat,
    .leave-app-summary:has(.leave-app-summary__taken) .leave-app-stats:not(.leave-app-stats--kpis)>.leave-app-stat:first-child,
    .leave-app-summary:has(.leave-app-summary__taken) .leave-app-stats:not(.leave-app-stats--kpis)>.leave-app-stat:not(.leave-app-stat--aside),
    .leave-app-summary:has(.leave-app-summary__taken) .leave-app-stats:not(.leave-app-stats--kpis)>.leave-app-stat:not(.leave-app-stat--aside)~.leave-app-stat:not(.leave-app-stat--aside) {
        flex: 1 0 100%;
        width: 100%;
        justify-content: space-between;
    }

    .leave-app-summary:has(.leave-app-summary__taken) .leave-app-stats:not(.leave-app-stats--kpis) .leave-app-stat__label,
    .leave-app-summary:has(.leave-app-summary__taken):has(.leave-app-stat--aside) .leave-app-stats:not(.leave-app-stats--kpis) > .leave-app-stat:not(.leave-app-stat--aside) .leave-app-stat__label,
    .leave-app-summary:has(.leave-app-summary__taken) .leave-app-stats:not(.leave-app-stats--kpis) > .leave-app-stat:first-child .leave-app-stat__label {
        position: static;
        width: auto;
        height: auto;
        padding: 0;
        margin: 0;
        overflow: visible;
        clip: auto;
        white-space: normal;
        border: 0;
    }

    .leave-app-stats--kpis {
        flex: 1 0 100%;
        width: 100%;
        margin-left: 0;
        align-items: stretch;
    }

    .leave-app-stats--kpis .leave-app-stat:first-child {
        justify-content: space-between;
    }

    .leave-app-stats--kpis .leave-app-stat:first-child .leave-app-stat__label {
        position: static;
        width: auto;
        height: auto;
        padding: 0;
        margin: 0;
        overflow: visible;
        clip: auto;
        white-space: normal;
        border: 0;
    }

    .leave-app-stats--kpis .leave-app-stat:not(:first-child) {
        flex: none;
    }
}

@media (max-width: 900px) {

    .leave-app-dates,
    .leave-app-times {
        grid-template-columns: 1fr;
    }

    .leave-app-review__row {
        grid-template-columns: 1fr;
        gap: 4px;
    }
}

[data-theme="dark"] .leave-app-back {
    background: #333;
    border-color: #444;
    color: #e2e8f0;
}

[data-theme="dark"] .leave-app-back:hover {
    background: #3a3a3a;
    border-color: var(--primary, #009688);
    color: var(--primary, #009688);
}

[data-theme="dark"] .leave-app-summary {
    background: #333;
    border-color: #444;
}

[data-theme="dark"] .leave-app-summary__top,
[data-theme="dark"] .leave-app-summary__photo,
[data-theme="dark"] .leave-app-head,
[data-theme="dark"] .leave-app-review__row,
[data-theme="dark"] .leave-app-summary:has(.leave-app-stat:not(.leave-app-stat--aside) ~ .leave-app-stat:not(.leave-app-stat--aside) ~ .leave-app-stat:not(.leave-app-stat--aside)) .leave-app-stats:not(.leave-app-stats--kpis) {
    border-bottom-color: #444;
    border-top-color: #444;
}

[data-theme="dark"] .leave-app-summary__icon,
[data-theme="dark"] .leave-app-head__icon {
    background: rgba(0, 150, 136, 0.28);
    color: #7ee0d4;
}

[data-theme="dark"] .leave-app-summary:has(.leave-app-summary__taken) .leave-app-stats:not(.leave-app-stats--kpis) {
    border-top-color: #444;
}

[data-theme="dark"] .leave-app-summary__title,
[data-theme="dark"] .leave-app-summary__taken,
[data-theme="dark"] .leave-app-summary__name,
[data-theme="dark"] .leave-app-head__title,
[data-theme="dark"] .leave-app-field__label,
[data-theme="dark"] .leave-app-stat__value,
[data-theme="dark"] .leave-app-review__value {
    color: #e2e8f0;
}

[data-theme="dark"] .leave-app-stat.is-active {
    background: rgba(0, 150, 136, 0.22);
}

[data-theme="dark"] .leave-app-stat__value .leave-app-stat__limit {
    color: #c2c2c2;
}

[data-theme="dark"] .leave-app-mc-type__card {
    background: #333;
    border-color: #444;
    color: #e2e8f0;
}

[data-theme="dark"] .leave-app-mc-type__icon {
    background: rgba(0, 150, 136, 0.28);
    color: #7ee0d4;
}

[data-theme="dark"] .leave-app-mc-type__option:hover .leave-app-mc-type__card,
[data-theme="dark"] .leave-app-mc-type__input:focus-visible+.leave-app-mc-type__card {
    border-color: var(--primary, #009688);
}

[data-theme="dark"] .leave-app-mc-type__input:checked+.leave-app-mc-type__card {
    background: rgba(0, 150, 136, 0.22);
    border-color: var(--primary, #009688);
    box-shadow: inset 0 0 0 1px var(--primary, #009688);
}

[data-theme="dark"] .leave-app-review__value.is-muted {
    color: #a0aec0;
}

[data-theme="dark"] .leave-app-summary__hint,
[data-theme="dark"] .leave-app-head__hint,
[data-theme="dark"] .leave-app-stat__label,
[data-theme="dark"] .leave-app-review__label,
[data-theme="dark"] .leave-app-file__hint {
    color: #a0aec0;
}

[data-theme="dark"] .leave-app-stats--kpis .leave-app-stat {
    background: #2d2d2d;
    border-color: #444;
}

[data-theme="dark"] .leave-app-stats--kpis .leave-app-stat--avail {
    border-left-color: var(--primary, #009688);
}

[data-theme="dark"] .leave-app-stats--kpis .leave-app-stat--avail .leave-app-stat__value {
    color: #7ee0d4;
}

[data-theme="dark"] .leave-app-stats--kpis .leave-app-stat.is-muted .leave-app-stat__value {
    color: #a0aec0;
}

[data-theme="dark"] .leave-app-stats--kpis .leave-app-stat.is-danger .leave-app-stat__value,
[data-theme="dark"] .leave-app-stats--kpis .leave-app-stat--avail.is-danger .leave-app-stat__value {
    color: #f8b4b4;
}

[data-theme="dark"] .leave-app-badge--ok {
    background: rgba(0, 150, 136, 0.28);
    color: #7ee0d4;
}

[data-theme="dark"] .leave-app-badge--warn {
    background: rgba(255, 193, 7, 0.22);
    color: #ffd666;
}

[data-theme="dark"] .leave-app-badge--neutral {
    background: #444;
    color: #cbd5e0;
}

[data-theme="dark"] .leave-app-badge--danger {
    background: rgba(220, 53, 69, 0.28);
    color: #f8b4b4;
}

[data-theme="dark"] .leave-app-file {
    background: #2d2d2d;
    border-color: #444;
}

[data-theme="dark"] .leave-app-file--drop {
    background: transparent;
    border-color: transparent;
}

[data-theme="dark"] .leave-app-drop-preview__card {
    background: #2d2d2d;
    border-color: #3a3a3a;
    color: #fff;
}

[data-theme="dark"] .leave-app-drop-preview__card:hover,
[data-theme="dark"] .leave-app-drop-preview__card:focus {
    border-color: #009688;
}

[data-theme="dark"] .leave-app-drop-preview__frame {
    background: #262626;
    border-color: #3a3a3a;
}

[data-theme="dark"] .leave-app-drop-preview.is-image .leave-app-drop-preview__img {
    background: #262626;
}

[data-theme="dark"] .leave-app-drop-preview.is-file .leave-app-drop-preview__file {
    color: #17a2b8;
}

[data-theme="dark"] .leave-app-drop-preview__name {
    color: #e2e8f0;
}

[data-theme="dark"] .leave-app-drop-preview__action {
    color: #02b3a2;
}

[data-theme="dark"] .leave-app-file .form-control {
    background: #333;
    border-color: #444;
    color: #e2e8f0;
}

[data-theme="dark"] .leave-app-field.is-invalid .form-control {
    border-color: #e57373;
}

[data-theme="dark"] .leave-app-actions .btn-primary:disabled {
    background: #423e3e;
    border-color: #3a3a3a;
    color: #c2c2c2;
}

[data-theme="dark"] .leave-app-alert--danger {
    background: rgba(220, 53, 69, 0.2);
    color: #f8b4b4;
}

[data-theme="dark"] .leave-app-alert--hint {
    background: rgba(0, 150, 136, 0.2);
    color: #7ee0d4;
}

[data-theme="dark"] .leave-app-alert--warn {
    background: rgba(255, 193, 7, 0.18);
    color: #ffd666;
}

[data-theme="dark"] .leave-app-warn {
    background: rgba(220, 53, 69, 0.2);
    color: #f8b4b4;
}

[data-theme="dark"] .leave-app-warn a {
    color: #f8b4b4;
}
[data-theme="dark"] .leave-app-summary__photo img,
[data-theme="dark"] .leave-app-summary__photo .usr-ava,
body[data-theme="dark"] .leave-app-summary__photo .usr-ava {
	border-color: #444;
}

.leave-app-section {
    margin-top: 18px;
    padding-top: 16px;
    border-top: 1px solid #e9ecef;
}

.leave-app-section__title {
    font-size: 0.95rem;
    font-weight: 700;
    color: #24302f;
    margin: 0 0 12px;
}

.leave-app-field .select2-container {
    width: 100% !important;
}

.leave-app-notify {
    position: relative;
    flex: 1 1 160px;
}

.leave-app-notify .btn {
    width: 100%;
    min-height: 42px;
}

.leave-app-notify .dropdown-menu {
    width: 100%;
}

[data-theme="dark"] .leave-app-section {
    border-top-color: #444;
}

[data-theme="dark"] .leave-app-section__title {
    color: #e2e8f0;
}

.leave-admin-edit__modes {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 10px;
}

.leave-admin-edit__mode {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 6px;
    margin: 0;
    padding: 14px 12px;
    border-radius: 12px;
    border: 1px solid #e9ecef;
    background: #f8fafb;
    cursor: pointer;
    min-height: 96px;
    transition: border-color 0.15s ease, background 0.15s ease, box-shadow 0.15s ease;
}

.leave-admin-edit__mode input {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}

.leave-admin-edit__mode i {
    width: 32px;
    height: 32px;
    border-radius: 8px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: #fff;
    color: var(--primary, #009688);
    border: 1px solid #e9ecef;
}

.leave-admin-edit__mode span {
    font-weight: 700;
    color: #24302f;
    font-size: 0.92rem;
}

.leave-admin-edit__mode small {
    color: #6c757d;
    font-size: 0.75rem;
    line-height: 1.3;
}

.leave-admin-edit__mode.is-on,
.leave-admin-edit__mode:has(input:checked) {
    border-color: var(--primary, #009688);
    background: rgba(0, 150, 136, 0.08);
    box-shadow: inset 0 0 0 1px var(--primary, #009688);
}

.leave-admin-edit__panel.is-hidden {
    display: none !important;
}

.leave-admin-edit__counts {
    display: grid;
    grid-column: 1 / -1;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 8px;
}

.leave-admin-edit__aside-icon {
    width: 56px;
    height: 56px;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: rgba(0, 150, 136, 0.12);
    color: var(--primary, #009688);
    font-size: 1.6rem;
    margin-bottom: 8px;
}

@media (max-width: 767px) {
    .leave-admin-edit__modes {
        grid-template-columns: 1fr;
    }

    .leave-admin-edit__counts {
        grid-template-columns: 1fr;
    }
}

[data-theme="dark"] .leave-admin-edit__mode {
    background: #2d2d2d;
    border-color: #3a3a3a;
}

[data-theme="dark"] .leave-admin-edit__mode i {
    background: #333;
    border-color: #3a3a3a;
    color: #02b3a2;
}

[data-theme="dark"] .leave-admin-edit__mode span {
    color: #fff;
}

[data-theme="dark"] .leave-admin-edit__mode small {
    color: #c2c2c2;
}

[data-theme="dark"] .leave-admin-edit__mode.is-on,
[data-theme="dark"] .leave-admin-edit__mode:has(input:checked) {
    background: #333;
    border-color: #009688;
    box-shadow: inset 0 0 0 1px #009688;
}

[data-theme="dark"] .leave-admin-edit__aside-icon {
    background: #333;
    color: #02b3a2;
}

.leave-app-review--meta {
    margin-bottom: 4px;
}

.leave-app-period {
    border: 1px solid #e0e0e0;
    border-radius: 12px;
    padding: 16px 16px 14px;
    margin-bottom: 16px;
    background: linear-gradient(145deg, rgba(0, 150, 136, 0.08) 0%, #fff 55%);
}

.leave-app-period__top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    flex-wrap: wrap;
    margin-bottom: 14px;
}

.leave-app-period__title {
    margin: 0;
    font-size: 0.78rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--secondary, #6c757d);
}

.leave-app-period__duration {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 12px;
    border-radius: 999px;
    background: var(--primary-light, #b8e2de);
    color: var(--primary-back, #00635a);
    font-size: 0.92rem;
    font-weight: 700;
    white-space: nowrap;
}

.leave-app-period__dates {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
    gap: 10px 12px;
    align-items: stretch;
    margin-bottom: 12px;
}

.leave-app-period__date {
    text-align: center;
    padding: 12px 10px;
    border-radius: 10px;
    background: #fff;
    border: 1px solid #e9ecef;
}

.leave-app-period__date--from {
    border-left: 3px solid var(--primary, #009688);
}

.leave-app-period__date--to {
    border-left: 3px solid #17a2b8;
}

.leave-app-period__label {
    display: block;
    font-size: 0.72rem;
    font-weight: 600;
    color: var(--secondary, #6c757d);
    margin-bottom: 4px;
    text-transform: uppercase;
    letter-spacing: 0.03em;
}

.leave-app-period__value {
    display: block;
    font-size: 1.08rem;
    font-weight: 700;
    color: #24302f;
    line-height: 1.25;
}

.leave-app-period__sep {
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--primary, #009688);
    font-size: 1.2rem;
    padding-top: 14px;
}

.leave-app-period__warn {
    margin-top: 10px;
    text-align: left;
    font-size: 0.78rem;
}

.leave-app-period__resume {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 8px 12px;
    padding: 10px 12px;
    margin-bottom: 12px;
    border-radius: 10px;
    background: #f8f9fa;
    border: 1px dashed #cfd8dc;
}

.leave-app-period__resume .leave-app-period__label {
    margin: 0;
    text-transform: none;
    font-size: 0.8rem;
}

.leave-app-period__resume .leave-app-period__value {
    font-size: 1rem;
}

.leave-app-period__reason {
    padding: 12px 14px;
    border-radius: 10px;
    background: #fff;
    border: 1px solid #e9ecef;
}

.leave-app-period__reason-text {
    margin: 6px 0 0;
    font-size: 0.98rem;
    font-weight: 600;
    color: #24302f;
    line-height: 1.45;
    word-break: break-word;
}

.leave-app-period__reason-text.is-muted,
.leave-app-period__value.is-muted {
    color: #9aa0a6;
    font-weight: 500;
}

.leave-app-period__reason--stack {
    margin-top: 10px;
}

@media (max-width: 991.98px) {
    .leave-app-main.tile {
        overflow: visible;
    }

    .leave-app-main .leave-app-period {
        margin-left: -12px;
        margin-right: -12px;
        width: calc(100% + 24px);
    }
}

@media (max-width: 900px) {
    .leave-app-period__dates {
        grid-template-columns: 1fr;
    }

    .leave-app-period__sep {
        padding: 0;
        transform: rotate(90deg);
    }

    .leave-app-period__date {
        text-align: left;
    }
}

[data-theme="dark"] .leave-app-period {
    background: linear-gradient(145deg, rgba(0, 150, 136, 0.14) 0%, #333 55%);
    border-color: #444;
}

[data-theme="dark"] .leave-app-period__date,
[data-theme="dark"] .leave-app-period__reason {
    background: #2d2d2d;
    border-color: #444;
}

[data-theme="dark"] .leave-app-period__value,
[data-theme="dark"] .leave-app-period__reason-text {
    color: #e2e8f0;
}

[data-theme="dark"] .leave-app-period__reason-text.is-muted,
[data-theme="dark"] .leave-app-period__value.is-muted {
    color: #a0aec0;
}

[data-theme="dark"] .leave-app-period__duration {
    background: rgba(0, 150, 136, 0.28);
    color: #7ee0d4;
}

[data-theme="dark"] .leave-app-period__resume {
    background: #2d2d2d;
    border-color: #444;
}

[data-theme="dark"] .leave-app-period__title,
[data-theme="dark"] .leave-app-period__label {
    color: #a0aec0;
}

/* Leave application print / preview document (Admin_Leave_Application, Leave_Preview) */
.leave-print-toolbar {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-bottom: 20px;
}

.leave-print-doc-wrap.tile {
    background: transparent;
    border: none;
    box-shadow: none;
    padding: 0;
}

[data-theme="dark"] .leave-print-doc-wrap.tile {
    background: transparent !important;
    background-color: transparent !important;
    border: none !important;
    box-shadow: none !important;
}

.leave-print-doc {
    max-width: 880px;
    margin: 0 auto;
    padding: 28px 28px 32px;
    background: #fff;
    border: 1px solid #e8ecef;
    border-radius: 16px;
    box-shadow: 0 8px 32px rgba(15, 23, 42, 0.06);
    color: #24302f;
    font-size: 0.96rem;
    line-height: 1.5;
}

.leave-print-doc__letterhead {
    margin-bottom: 20px;
    padding-bottom: 16px;
    border-bottom: 1px solid #e8ecef;
}

.leave-print-doc__logo {
    display: block;
    max-height: 100px;
    max-width: 100%;
    width: auto;
    height: auto;
    object-fit: contain;
    object-position: left center;
}

.leave-print-doc__head {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 16px 24px;
    margin-bottom: 24px;
}

.leave-print-doc__head-main {
    display: flex;
    align-items: flex-start;
    gap: 14px;
    min-width: 0;
    flex: 1 1 240px;
}

.leave-print-doc__type-icon {
    flex-shrink: 0;
    width: 48px;
    height: 48px;
    border-radius: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.25rem;
    color: var(--primary-back, #00635a);
    background: linear-gradient(145deg, rgba(0, 150, 136, 0.16) 0%, rgba(184, 226, 222, 0.5) 100%);
}

.leave-print-doc__type-icon--time {
    color: #0d6efd;
    background: linear-gradient(145deg, rgba(13, 110, 253, 0.12) 0%, rgba(146, 203, 211, 0.45) 100%);
}

.leave-print-doc__head-text {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px 12px;
    min-width: 0;
}

.leave-print-doc__title {
    margin: 0;
    font-size: 1.45rem;
    font-weight: 700;
    color: #1a2e2c;
    letter-spacing: -0.02em;
    line-height: 1.25;
}

.leave-print-doc__status {
    display: inline-flex;
    align-items: center;
    padding: 5px 14px;
    border-radius: 999px;
    font-size: 0.78rem;
    font-weight: 700;
    letter-spacing: 0.02em;
    background: rgba(255, 193, 7, 0.18);
    color: #856404;
    border: 1px solid rgba(255, 193, 7, 0.35);
}

.leave-print-doc__status.is-approved {
    background: rgba(40, 167, 69, 0.14);
    color: #155724;
    border-color: rgba(40, 167, 69, 0.35);
}

.leave-print-doc__status.is-rejected {
    background: rgba(220, 53, 69, 0.12);
    color: #721c24;
    border-color: rgba(220, 53, 69, 0.3);
}

.leave-print-doc__head-meta {
    text-align: right;
    flex-shrink: 0;
    padding: 10px 14px;
    border-radius: 12px;
    background: #f8fafb;
    border: 1px solid #eef2f4;
}

.leave-print-doc__meta-k {
    display: block;
    font-size: 0.72rem;
    font-weight: 600;
    color: var(--secondary, #6c757d);
    margin-bottom: 4px;
    letter-spacing: 0.03em;
}

.leave-print-doc__meta-v {
    display: block;
    font-size: 0.95rem;
    font-weight: 700;
    color: #24302f;
    word-break: break-word;
}

.leave-print-doc__meta-v--accent {
    color: var(--primary, #009688);
}

.leave-print-doc__section {
    margin-bottom: 22px;
}

.leave-print-doc__section-title {
    margin: 0 0 14px;
    font-size: 0.8rem;
    font-weight: 700;
    color: var(--secondary, #6c757d);
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

.leave-print-doc__section-head {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 10px 14px;
    margin-bottom: 14px;
}

.leave-print-doc__section-head .leave-print-doc__section-title {
    margin: 0;
}

.leave-print-doc__section--accent {
    padding: 18px 18px 16px;
    border-radius: 14px;
    border: 1px solid rgba(0, 150, 136, 0.12);
    background: linear-gradient(160deg, rgba(0, 150, 136, 0.07) 0%, #fff 48%, #fafcfd 100%);
}

.leave-print-doc__pill {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 14px;
    border-radius: 999px;
    font-size: 0.88rem;
    font-weight: 700;
    color: var(--primary-back, #00635a);
    background: var(--primary-light, #b8e2de);
    white-space: nowrap;
}

.leave-print-doc__meta-grid {
    display: grid;
    gap: 12px;
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.leave-print-doc__meta-grid--4 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.leave-print-doc__meta-item {
    padding: 12px 14px;
    border-radius: 12px;
    background: #f8fafb;
    border: 1px solid #eef2f4;
}

.leave-print-doc__range {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
    gap: 10px 12px;
    align-items: stretch;
    margin-bottom: 12px;
}

.leave-print-doc__range--time {
    grid-template-columns: 1fr;
}

.leave-print-doc__range-node {
    text-align: center;
    padding: 14px 12px;
    border-radius: 12px;
    background: #fff;
    border: 1px solid #e9ecef;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04);
}

.leave-print-doc__range-node--from {
    border-left: 3px solid var(--primary, #009688);
}

.leave-print-doc__range-node--to {
    border-left: 3px solid #17a2b8;
}

.leave-print-doc__range-val {
    display: block;
    margin-top: 4px;
    font-size: 1.08rem;
    font-weight: 700;
    color: #24302f;
    line-height: 1.3;
}

.leave-print-doc__range-sub {
    display: block;
    margin-top: 6px;
    font-size: 0.88rem;
    font-weight: 600;
    color: var(--secondary, #6c757d);
}

.leave-print-doc__range-arrow {
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--primary, #009688);
    font-size: 1.15rem;
    padding-top: 18px;
}

.leave-print-doc__range-footer {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    padding: 12px 14px;
    margin-bottom: 14px;
    border-radius: 12px;
    background: rgba(255, 255, 255, 0.85);
    border: 1px dashed #cfd8dc;
}

.leave-print-doc__range-footer--solo {
    margin-bottom: 12px;
}

.leave-print-doc__range-foot-item {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 8px 12px;
}

.leave-print-doc__copy-grid {
    display: grid;
    gap: 12px;
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.leave-print-doc__copy-card {
    padding: 14px 16px;
    border-radius: 12px;
    background: #fff;
    border: 1px solid #e9ecef;
}

.leave-print-doc__copy-card--muted .leave-print-doc__copy-body {
    color: #5c6670;
    font-weight: 500;
}

.leave-print-doc__copy-body {
    margin-top: 8px;
    font-weight: 600;
    color: #24302f;
    word-break: break-word;
    line-height: 1.45;
}

.leave-print-doc__flow {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px;
}

.leave-print-doc__flow-step {
    display: flex;
    gap: 12px;
    align-items: flex-start;
    padding: 16px;
    border-radius: 14px;
    background: #f8fafb;
    border: 1px solid #eef2f4;
}

.leave-print-doc__flow-icon {
    flex-shrink: 0;
    width: 40px;
    height: 40px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.2rem;
    color: var(--primary, #009688);
    background: rgba(0, 150, 136, 0.12);
}

.leave-print-doc__flow-icon--approve {
    color: #17a2b8;
    background: rgba(23, 162, 184, 0.12);
}

.leave-print-doc__flow-body {
    min-width: 0;
}

.leave-print-doc__flow-name {
    display: block;
    margin: 4px 0 8px;
    font-size: 1.05rem;
    font-weight: 700;
    color: #24302f;
}

.leave-print-doc__flow-date {
    display: block;
    font-size: 0.84rem;
    font-weight: 500;
    color: var(--secondary, #6c757d);
}

.leave-print-doc__split {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 18px;
    align-items: start;
}

.leave-print-doc__split:has(.leave-print-doc__aside) {
    grid-template-columns: minmax(0, 1fr) minmax(0, 260px);
}

.leave-print-doc__aside {
    border-radius: 14px;
    padding: 16px;
    background: #f8fafb;
    border: 1px solid #eef2f4;
    font-size: 0.9rem;
}

.leave-print-doc__aside-title {
    margin: 0 0 12px;
    font-size: 0.78rem;
    font-weight: 700;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: var(--secondary, #6c757d);
}

.leave-print-doc__stats {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.leave-print-doc__stat {
    padding: 12px 14px;
    border-radius: 12px;
    background: #fff;
    border: 1px solid #eef2f4;
}

.leave-print-doc__stat--remain {
    border-left: 3px solid var(--primary, #009688);
}

.leave-print-doc__stat--taken {
    border-left: 3px solid #92cbd3;
}

.leave-print-doc__stat-k {
    display: block;
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: var(--secondary, #6c757d);
}

.leave-print-doc__stat-period {
    display: block;
    margin-top: 2px;
    font-size: 0.82rem;
    font-weight: 600;
    color: #5c6670;
}

.leave-print-doc__stat-val {
    display: flex;
    align-items: baseline;
    gap: 6px;
    margin-top: 8px;
    font-size: 1.4rem;
    font-weight: 700;
    color: #24302f;
    line-height: 1.1;
}

.leave-print-doc__stat-val--accent {
    color: var(--primary, #009688);
}

.leave-print-doc__stat-unit {
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--secondary, #6c757d);
}

.leave-print-doc__stat-hint {
    display: block;
    margin-top: 4px;
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--secondary, #6c757d);
}

.leave-print-doc__copy-body.is-muted {
    color: #9aa0a6;
    font-weight: 500;
}

.leave-print-doc__attachment-body {
    padding: 4px 0;
}

.leave-print-doc__attach-img {
    max-width: 100%;
    width: auto;
    max-height: 280px;
    border-radius: 12px;
    border: 1px solid #e9ecef;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.06);
}

.leave-print-doc__attach-btn {
    max-width: 100%;
    border-radius: 10px;
}

@media screen and (max-width: 767.98px) {
    .leave-print-doc {
        padding: 20px 16px 24px;
        border-radius: 12px;
    }

    .leave-print-doc__meta-grid,
    .leave-print-doc__meta-grid--4,
    .leave-print-doc__copy-grid,
    .leave-print-doc__flow,
    .leave-print-doc__split {
        grid-template-columns: 1fr;
    }

    .leave-print-doc__range {
        grid-template-columns: 1fr;
    }

    .leave-print-doc__range-arrow {
        padding: 0;
        transform: rotate(90deg);
    }

    .leave-print-doc__range-node {
        text-align: left;
    }

    .leave-print-doc__head-meta {
        text-align: left;
        width: 100%;
    }
}

@media print {
    .leave-print-doc {
        max-width: none;
        margin: 0;
        padding: 0;
        border: none;
        border-radius: 0;
        box-shadow: none;
        background: #fff !important;
        color: #24302f !important;
        -webkit-print-color-adjust: exact;
        print-color-adjust: exact;
    }

    .leave-print-doc .leave-print-doc__section.d-print-block {
        display: block !important;
    }

    .leave-print-doc__head {
        flex-direction: row;
        align-items: center;
    }

    .leave-print-doc__head-meta {
        text-align: right;
        width: auto;
    }

    .leave-print-doc__meta-grid,
    .leave-print-doc__meta-grid--4 {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    }

    .leave-print-doc__range {
        grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr) !important;
    }

    .leave-print-doc__range--time {
        grid-template-columns: 1fr !important;
    }

    .leave-print-doc__range-arrow {
        display: flex !important;
        padding-top: 18px !important;
        transform: none !important;
    }

    .leave-print-doc__range-node {
        text-align: center !important;
    }

    .leave-print-doc__copy-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    }

    .leave-print-doc__flow {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    }

    .leave-print-doc__split {
        grid-template-columns: minmax(0, 1fr) !important;
    }

    .leave-print-doc__split:has(.leave-print-doc__aside) {
        grid-template-columns: minmax(0, 1fr) minmax(0, 260px) !important;
    }

    .leave-print-doc__aside {
        display: block !important;
        background: #f8fafb !important;
        border: 1px solid #eef2f4 !important;
        color: #24302f !important;
        -webkit-print-color-adjust: exact;
        print-color-adjust: exact;
    }

    .leave-print-doc__section--accent {
        background: linear-gradient(160deg, rgba(0, 150, 136, 0.06) 0%, #fff 100%) !important;
        border-color: #ccc !important;
        color: #24302f !important;
        -webkit-print-color-adjust: exact;
        print-color-adjust: exact;
    }

    .leave-print-doc__pill,
    .leave-print-doc__type-icon,
    .leave-print-doc__flow-icon {
        -webkit-print-color-adjust: exact;
        print-color-adjust: exact;
    }

    .leave-print-doc__status,
    .leave-print-toolbar,
    .app-sidebar,
    .app-header,
    .app-title,
    .d-print-none {
        display: none !important;
    }

    .leave-print-doc a {
        color: #000 !important;
        text-decoration: none;
    }

    .leave-print-doc__attach-img {
        max-height: 240px;
        box-shadow: none;
    }

    main.app-content {
        padding: 0 !important;
        margin: 0 !important;
    }

    .leave-print-doc-wrap.tile,
    .tile {
        border: none !important;
        box-shadow: none !important;
        padding: 0 !important;
        background: #fff !important;
    }

    /* Force light print while dark theme is on (same idea as pay-doc print). */
    html[data-theme="dark"] .leave-print-doc-wrap.tile,
    html[data-theme="dark"] .leave-print-doc,
    html[data-theme="dark"] .leave-print-doc__head-meta,
    html[data-theme="dark"] .leave-print-doc__meta-item,
    html[data-theme="dark"] .leave-print-doc__range-node,
    html[data-theme="dark"] .leave-print-doc__copy-card,
    html[data-theme="dark"] .leave-print-doc__flow-step,
    html[data-theme="dark"] .leave-print-doc__stat,
    [data-theme="dark"] .leave-print-doc-wrap.tile,
    [data-theme="dark"] .leave-print-doc,
    [data-theme="dark"] .leave-print-doc__head-meta,
    [data-theme="dark"] .leave-print-doc__meta-item,
    [data-theme="dark"] .leave-print-doc__range-node,
    [data-theme="dark"] .leave-print-doc__copy-card,
    [data-theme="dark"] .leave-print-doc__flow-step,
    [data-theme="dark"] .leave-print-doc__stat {
        background: #fff !important;
        background-color: #fff !important;
        color: #24302f !important;
        border-color: #e8ecef !important;
        box-shadow: none !important;
        -webkit-print-color-adjust: exact !important;
        print-color-adjust: exact !important;
    }

    html[data-theme="dark"] .leave-print-doc__section--accent,
    [data-theme="dark"] .leave-print-doc__section--accent {
        background: linear-gradient(160deg, rgba(0, 150, 136, 0.06) 0%, #fff 100%) !important;
        border-color: #ccc !important;
        color: #24302f !important;
    }

    html[data-theme="dark"] .leave-print-doc__aside,
    [data-theme="dark"] .leave-print-doc__aside {
        display: block !important;
        background: #f8fafb !important;
        border-color: #eef2f4 !important;
        color: #24302f !important;
    }

    html[data-theme="dark"] .leave-print-doc__range-footer,
    [data-theme="dark"] .leave-print-doc__range-footer {
        background: #fff !important;
        border-color: #cfd8dc !important;
        color: #24302f !important;
    }

    html[data-theme="dark"] .leave-print-doc__title,
    html[data-theme="dark"] .leave-print-doc__meta-v,
    html[data-theme="dark"] .leave-print-doc__range-val,
    html[data-theme="dark"] .leave-print-doc__copy-body,
    html[data-theme="dark"] .leave-print-doc__flow-name,
    html[data-theme="dark"] .leave-print-doc__stat-val,
    html[data-theme="dark"] .leave-print-doc__aside-title,
    [data-theme="dark"] .leave-print-doc__title,
    [data-theme="dark"] .leave-print-doc__meta-v,
    [data-theme="dark"] .leave-print-doc__range-val,
    [data-theme="dark"] .leave-print-doc__copy-body,
    [data-theme="dark"] .leave-print-doc__flow-name,
    [data-theme="dark"] .leave-print-doc__stat-val,
    [data-theme="dark"] .leave-print-doc__aside-title {
        color: #24302f !important;
    }

    html[data-theme="dark"] .leave-print-doc__meta-k,
    html[data-theme="dark"] .leave-print-doc__section-title,
    html[data-theme="dark"] .leave-print-doc__range-sub,
    html[data-theme="dark"] .leave-print-doc__flow-date,
    html[data-theme="dark"] .leave-print-doc__stat-k,
    html[data-theme="dark"] .leave-print-doc__stat-period,
    html[data-theme="dark"] .leave-print-doc__stat-hint,
    html[data-theme="dark"] .leave-print-doc__stat-unit,
    html[data-theme="dark"] .leave-print-doc__copy-card--muted .leave-print-doc__copy-body,
    [data-theme="dark"] .leave-print-doc__meta-k,
    [data-theme="dark"] .leave-print-doc__section-title,
    [data-theme="dark"] .leave-print-doc__range-sub,
    [data-theme="dark"] .leave-print-doc__flow-date,
    [data-theme="dark"] .leave-print-doc__stat-k,
    [data-theme="dark"] .leave-print-doc__stat-period,
    [data-theme="dark"] .leave-print-doc__stat-hint,
    [data-theme="dark"] .leave-print-doc__stat-unit,
    [data-theme="dark"] .leave-print-doc__copy-card--muted .leave-print-doc__copy-body {
        color: #6c757d !important;
    }

    html[data-theme="dark"] .leave-print-doc__letterhead,
    [data-theme="dark"] .leave-print-doc__letterhead {
        border-color: #e8ecef !important;
    }

    html[data-theme="dark"] .leave-print-doc__logo,
    [data-theme="dark"] .leave-print-doc__logo {
        filter: none !important;
    }

    html[data-theme="dark"] .leave-print-doc__stat-val--accent,
    html[data-theme="dark"] .leave-print-doc__meta-v--accent,
    [data-theme="dark"] .leave-print-doc__stat-val--accent,
    [data-theme="dark"] .leave-print-doc__meta-v--accent {
        color: #009688 !important;
    }

    html[data-theme="dark"] .leave-print-doc__type-icon,
    [data-theme="dark"] .leave-print-doc__type-icon {
        color: #00635a !important;
        background: linear-gradient(145deg, rgba(0, 150, 136, 0.16) 0%, rgba(184, 226, 222, 0.5) 100%) !important;
    }

    html[data-theme="dark"] .leave-print-doc__type-icon--time,
    [data-theme="dark"] .leave-print-doc__type-icon--time {
        color: #0d6efd !important;
        background: linear-gradient(145deg, rgba(13, 110, 253, 0.12) 0%, rgba(146, 203, 211, 0.45) 100%) !important;
    }
}

[data-theme="dark"] .leave-print-doc {
    background: #2d2d2d;
    border-color: #3a3a3a;
    box-shadow: none;
    color: #e2e8f0;
}

[data-theme="dark"] .leave-print-doc__title,
[data-theme="dark"] .leave-print-doc__meta-v,
[data-theme="dark"] .leave-print-doc__range-val,
[data-theme="dark"] .leave-print-doc__copy-body,
[data-theme="dark"] .leave-print-doc__flow-name {
    color: #e2e8f0;
}

[data-theme="dark"] .leave-print-doc__head-meta,
[data-theme="dark"] .leave-print-doc__meta-item,
[data-theme="dark"] .leave-print-doc__flow-step,
[data-theme="dark"] .leave-print-doc__aside {
    background: #262626;
    border-color: #444;
}

[data-theme="dark"] .leave-print-doc__stat {
    background: #2d2d2d;
    border-color: #444;
}

[data-theme="dark"] .leave-print-doc__stat--remain {
    border-left-color: var(--primary, #009688);
}

[data-theme="dark"] .leave-print-doc__stat--taken {
    border-left-color: #5a9aa3;
}

[data-theme="dark"] .leave-print-doc__stat-val {
    color: #e2e8f0;
}

[data-theme="dark"] .leave-print-doc__stat-period,
[data-theme="dark"] .leave-print-doc__copy-body.is-muted {
    color: #a0aec0;
}

[data-theme="dark"] .leave-print-doc__section--accent {
    background: linear-gradient(160deg, rgba(0, 150, 136, 0.12) 0%, #333 55%);
    border-color: #444;
}

[data-theme="dark"] .leave-print-doc__range-node,
[data-theme="dark"] .leave-print-doc__copy-card {
    background: #2d2d2d;
    border-color: #444;
}

[data-theme="dark"] .leave-print-doc__range-footer {
    background: rgba(38, 38, 38, 0.9);
    border-color: #444;
}

[data-theme="dark"] .leave-print-doc__letterhead {
    border-color: #444;
}

[data-theme="dark"] .leave-print-doc__copy-card--muted .leave-print-doc__copy-body {
    color: #a0aec0;
}

[data-theme="dark"] .leave-print-doc__type-icon {
    color: #7ee0d4;
    background: linear-gradient(145deg, rgba(0, 150, 136, 0.28) 0%, #333 100%);
}

[data-theme="dark"] .leave-print-doc__type-icon--time {
    color: #92cbd3;
    background: linear-gradient(145deg, rgba(13, 110, 253, 0.22) 0%, #333 100%);
}

[data-theme="dark"] .leave-print-doc__status {
    background: rgba(244, 196, 76, 0.2);
    color: #f4c44c;
    border-color: rgba(244, 196, 76, 0.45);
}

[data-theme="dark"] .leave-print-doc__status.is-approved {
    background: rgba(88, 166, 92, 0.2);
    color: #7ecf82;
    border-color: rgba(88, 166, 92, 0.45);
}

[data-theme="dark"] .leave-print-doc__status.is-rejected {
    background: rgba(220, 53, 69, 0.22);
    color: #f5a0a8;
    border-color: rgba(220, 53, 69, 0.4);
}

.leave-sum .leave-app-head {
    gap: 8px;
    margin: 0 0 10px;
    padding-bottom: 8px;
}

.leave-sum .leave-app-head__icon {
    width: 32px;
    height: 32px;
    border-radius: 8px;
    font-size: 0.95rem;
}

.leave-sum .leave-app-head__title {
    font-size: 1rem;
    margin: 0 0 1px;
}

.leave-sum .leave-app-head__hint {
    font-size: 0.78rem;
    line-height: 1.3;
}

.leave-sum__hero,
.leave-sum__taken {
    margin-bottom: 14px;
    padding: 14px 16px;
}

.leave-sum__aside {
    margin-bottom: 14px;
    padding: 14px 16px;
}

.leave-sum__avails {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 6px 16px;
    margin: 0 0 10px;
}

.leave-sum__avail {
    margin: 0;
    min-width: 0;
}

.leave-sum__avail--year {
    padding-left: 16px;
    border-left: 1px solid #eef2f4;
}

.leave-sum__avail-k,
.leave-sum__avail-sub,
.leave-sum__kpi-k,
.leave-sum__aside-title,
.leave-sum__stat-k,
.leave-sum__stat-hint,
.leave-sum__type-code,
.leave-sum__type-name {
    color: var(--secondary, #6c757d);
}

.leave-sum__avail-k,
.leave-sum__aside-title,
.leave-sum__stat-k,
.leave-sum__type-code {
    display: block;
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.05em;
    text-transform: uppercase;
}

.leave-sum__avail-val {
    display: flex;
    align-items: baseline;
    gap: 6px;
    margin-top: 2px;
    font-size: 1.85rem;
    font-weight: 700;
    line-height: 1.1;
    color: var(--primary, #009688);
}

.leave-sum__avail.is-danger .leave-sum__avail-val {
    color: #dc3545;
}

.leave-sum__avail.is-muted .leave-sum__avail-val {
    color: #9aa0a6;
}

.leave-sum__avail-unit {
    font-size: 0.85rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--secondary, #6c757d);
}

.leave-sum__avail-sub {
    display: block;
    margin-top: 1px;
    font-size: 0.75rem;
    font-weight: 600;
}

.leave-sum__bar {
    height: 5px;
    border-radius: 999px;
    background: #eef2f4;
    overflow: hidden;
    margin-bottom: 12px;
}

.leave-sum__bar-fill {
    display: block;
    height: 100%;
    border-radius: 999px;
    background: var(--primary, #009688);
}

.leave-sum__kpis {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 10px;
}

.leave-sum__kpi {
    padding: 8px 10px;
    border-radius: 10px;
    background: #f8fafb;
    border: 1px solid #eef2f4;
}

.leave-sum__kpi-k {
    display: block;
    font-size: 0.72rem;
    font-weight: 600;
    margin-bottom: 4px;
}

.leave-sum__kpi-v {
    display: block;
    font-size: 0.98rem;
    font-weight: 700;
    color: #24302f;
    word-break: break-word;
}

.leave-sum__kpi.is-muted .leave-sum__kpi-v {
    color: #9aa0a6;
    font-weight: 500;
}

.leave-sum__aside-title {
    margin: 0 0 8px;
}

.leave-sum__aside-title--gap {
    margin-top: 12px;
}

.leave-sum__stats {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.leave-sum__stat {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 8px 10px;
    border-radius: 10px;
    background: #f8fafb;
    border: 1px solid #eef2f4;
}

.leave-sum__stat--remain {
    border-left: 3px solid var(--primary, #009688);
}

.leave-sum__stat--taken {
    border-left: 3px solid #92cbd3;
}

.leave-sum__stat-copy {
    min-width: 0;
}

.leave-sum__stat-period {
    display: block;
    margin-top: 1px;
    font-size: 0.8rem;
    font-weight: 600;
    color: #5c6670;
}

.leave-sum__stat-num {
    text-align: right;
    flex-shrink: 0;
}

.leave-sum__stat-val {
    display: flex;
    align-items: baseline;
    justify-content: flex-end;
    gap: 4px;
    margin: 0;
    font-size: 1.05rem;
    font-weight: 700;
    color: #24302f;
    line-height: 1.1;
}

.leave-sum__stat-val--accent {
    color: var(--primary, #009688);
}

.leave-sum__stat-val.is-muted {
    color: #9aa0a6;
}

.leave-sum__stat-unit {
    font-size: 0.65rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--secondary, #6c757d);
}

.leave-sum__stat-hint {
    display: block;
    margin-top: 1px;
    font-size: 0.68rem;
    font-weight: 600;
}

.leave-sum__types {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 8px;
}

.leave-sum__type {
    display: grid;
    grid-template-columns: auto 1fr auto;
    align-items: center;
    gap: 8px;
    padding: 8px 10px;
    border-radius: 10px;
    background: #f8fafb;
    border: 1px solid #eef2f4;
}

.leave-sum__type-code {
    min-width: 28px;
}

.leave-sum__type-name {
    font-size: 0.82rem;
    font-weight: 600;
    color: #5c6670;
}

.leave-sum__type-val {
    font-size: 1.05rem;
    font-weight: 700;
    color: #24302f;
}

.leave-sum__type.is-muted .leave-sum__type-val {
    color: #9aa0a6;
    font-weight: 500;
}

a.leave-sum__type,
a.leave-sum__stat-link {
    color: inherit;
    text-decoration: none;
    cursor: pointer;
}

a.leave-sum__type:hover,
a.leave-sum__type:focus,
a.leave-sum__stat-link:hover,
a.leave-sum__stat-link:focus {
    border-color: #009688;
    text-decoration: none;
    outline: none;
}

@media (max-width: 991.98px) {

    .leave-sum__kpis,
    .leave-sum__types {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .leave-sum__types.leave-sum__types--edit {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 575.98px) {

    .leave-sum__hero,
    .leave-sum__taken,
    .leave-sum__aside {
        padding: 12px;
    }

    .leave-sum__avails {
        gap: 6px 10px;
    }

    .leave-sum__avail-val {
        font-size: 1.45rem;
    }

    .leave-sum__avail--year {
        padding-left: 10px;
    }

    .leave-sum__kpis {
        gap: 8px;
    }
}

[data-theme="dark"] .leave-sum__kpi,
[data-theme="dark"] .leave-sum__stat,
[data-theme="dark"] .leave-sum__type {
    background: #2d2d2d;
    border-color: #444;
}

[data-theme="dark"] a.leave-sum__type:hover,
[data-theme="dark"] a.leave-sum__type:focus,
[data-theme="dark"] a.leave-sum__stat-link:hover,
[data-theme="dark"] a.leave-sum__stat-link:focus {
    border-color: #7ee0d4;
    background: #333;
}

[data-theme="dark"] .leave-sum__stat--remain {
    border-left-color: var(--primary, #009688);
}

[data-theme="dark"] .leave-sum__stat--taken {
    border-left-color: #5a9aa3;
}

[data-theme="dark"] .leave-sum__bar {
    background: #333;
}

[data-theme="dark"] .leave-sum__avail--year {
    border-left-color: #444;
}

[data-theme="dark"] .leave-sum__kpi-v,
[data-theme="dark"] .leave-sum__stat-val,
[data-theme="dark"] .leave-sum__type-val {
    color: #e2e8f0;
}

[data-theme="dark"] .leave-sum__stat-val--accent {
    color: #7ee0d4;
}

[data-theme="dark"] .leave-sum__avail .leave-sum__avail-val {
    color: #7ee0d4;
}

[data-theme="dark"] .leave-sum__avail .leave-sum__avail-val.text-info {
    color: var(--info, #17a2b8);
}

[data-theme="dark"] .leave-sum__avail.is-danger .leave-sum__avail-val {
    color: #f8a5a5;
}

[data-theme="dark"] .leave-sum__avail.is-muted .leave-sum__avail-val,
[data-theme="dark"] .leave-sum__kpi.is-muted .leave-sum__kpi-v,
[data-theme="dark"] .leave-sum__stat-val.is-muted,
[data-theme="dark"] .leave-sum__type.is-muted .leave-sum__type-val {
    color: #a0aec0;
}

[data-theme="dark"] .leave-sum__avail-k,
[data-theme="dark"] .leave-sum__avail-sub,
[data-theme="dark"] .leave-sum__avail-unit,
[data-theme="dark"] .leave-sum__kpi-k,
[data-theme="dark"] .leave-sum__aside-title,
[data-theme="dark"] .leave-sum__stat-k,
[data-theme="dark"] .leave-sum__stat-hint,
[data-theme="dark"] .leave-sum__stat-period,
[data-theme="dark"] .leave-sum__stat-unit,
[data-theme="dark"] .leave-sum__type-code,
[data-theme="dark"] .leave-sum__type-name {
    color: #a0aec0;
}

/* Booking Title Only — style modifiers (default = no modifier = current look) */
.booking-af-title-only {
    display: block;
    width: 100%;
}

.booking-af-title-only--center {
    text-align: center;
}

.booking-af-title-only--right {
    text-align: right;
}

.booking-af-title-only--bold {
    font-weight: 700;
}

.booking-af-title-only--italic {
    font-style: italic;
}

/* Title Style toolbar — one compact tool row (Custom Form-like). */
.booking-af-style-toolbar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px;
}

.booking-af-style-toolbar .btn-group {
    margin-right: 0;
    margin-bottom: 0;
}

.booking-af-style-toolbar .booking-af-style-size {
    width: 120px;
    min-width: 120px;
    display: inline-block;
    vertical-align: middle;
    margin-bottom: 0;
}

/* Select2 closed box: match btn-sm height, sit inline with Align/Bold/Italic. */
.booking-af-style-toolbar .select2-container {
    vertical-align: middle;
    margin-bottom: 0;
    display: inline-block !important;
    flex: 0 0 120px;
}

.booking-af-style-toolbar .select2-container--default .select2-selection--single {
    height: 31px;
    border-radius: 0.2rem;
    border-color: #6c757d;
}

.booking-af-style-toolbar .select2-container--default.select2-container--focus .select2-selection--single,
.booking-af-style-toolbar .select2-container--default.select2-container--open .select2-selection--single {
    border-color: var(--primary, #009688);
}

.booking-af-style-toolbar .select2-container--default .select2-selection--single .select2-selection__rendered {
    line-height: 29px;
    padding-left: 8px;
    padding-right: 24px;
    font-size: 0.8125rem;
    color: #495057;
}

.booking-af-style-toolbar .select2-container--default .select2-selection--single .select2-selection__arrow {
    height: 29px;
}

/* Open list: compact overlay on body — height fits options only (no modal stretch). */
body>.select2-container--open {
    z-index: 2000 !important;
}

.select2-dropdown.booking-af-style-size-dropdown {
    width: 120px !important;
    min-width: 120px !important;
    max-width: 120px !important;
    height: auto !important;
    max-height: none !important;
    z-index: 2000 !important;
}

.select2-dropdown.booking-af-style-size-dropdown .select2-results>.select2-results__options {
    max-height: none !important;
    height: auto !important;
    overflow: visible !important;
}

.select2-dropdown.booking-af-style-size-dropdown .select2-results__option {
    padding: 4px 8px;
    font-size: 0.8125rem;
}

.booking-af-style-toolbar .booking-af-style-btn.is-active {
    background: var(--primary, #009688);
    border-color: var(--primary, #009688);
    color: #fff;
}

[data-theme="dark"] .booking-af-style-toolbar .booking-af-style-btn.is-active {
    background: #009688;
    border-color: #009688;
    color: #fff;
}

[data-theme="dark"] .booking-af-style-toolbar .select2-container--default .select2-selection--single {
    background: #1e1e1e;
    border-color: #4a4a4a;
    color: #fff;
}

[data-theme="dark"] .booking-af-style-toolbar .select2-container--default .select2-selection--single .select2-selection__rendered {
    color: #eee;
}

/* Booking AF option preview (caption + image under Select2) — light #fafafa box vs [data-theme=dark] div { color:#fff } made captions invisible */
[data-theme="dark"] .booking-af-option-preview {
    background: #2d2d2d;
    border-color: #3a3a3a;
}

[data-theme="dark"] .booking-af-option-preview__title {
    color: #e2e8f0;
}

[data-theme="dark"] .booking-af-option-preview__hint,
[data-theme="dark"] .booking-af-option-preview__nav-counter,
[data-theme="dark"] .booking-af-option-preview .text-muted {
    color: #adb5bd !important;
}

/* Booking AF resource usage hours (under venue Start/End) */
#oneoff-dates:has(+ #booking-resource-schedules)>[class*="col-"] {
    margin-bottom: 0.35rem !important;
}

#booking-resource-schedules {
    margin-top: 0.15rem !important;
}

.booking-resource-schedules-readonly .booking-af-option-schedule-row {
    background: #fafafa;
}

[data-theme="dark"] .booking-resource-schedules-readonly .booking-af-option-schedule-row {
    background: #262626;
    border-color: #3a3a3a !important;
    color: #e2e8f0;
}

[data-theme="dark"] .booking-resource-schedules-readonly .text-muted {
    color: #adb5bd !important;
}

.booking-resource-schedules-toggle {
    color: var(--primary, #009688);
    text-decoration: none !important;
}

.booking-resource-schedules-toggle:hover,
.booking-resource-schedules-toggle:focus {
    color: #02b3a2;
}

.booking-af-option-schedule-row {
    background: #fafafa;
    border-color: #dee2e6 !important;
}

[data-theme="dark"] .booking-resource-schedules-toggle {
    color: #02b3a2;
}

[data-theme="dark"] .booking-resource-schedules-hint,
[data-theme="dark"] .booking-resource-schedules-field-label,
[data-theme="dark"] .booking-af-option-schedule-row .text-muted,
[data-theme="dark"] .booking-af-option-schedule-row label {
    color: #adb5bd !important;
}

[data-theme="dark"] .booking-af-option-schedule-row {
    background: #262626;
    border-color: #3a3a3a !important;
    color: #e2e8f0;
}

/* Attendance — shared clock / edit location address cards */
.atn-loc-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
    margin-bottom: 0.75rem;
}

.atn-loc-card,
.atn-loc-display-card {
    flex: 1 1 280px;
    min-width: 0;
    padding: 0.85rem 1rem;
    border: 1px solid var(--default-line, #e0e0e0);
    border-radius: 8px;
    background: rgba(0, 150, 136, 0.04);
}

.atn-loc-display-card {
    margin-bottom: 0.75rem;
}

.atn-loc-heading {
    font-weight: 600;
    color: var(--main-text-color, #333);
    line-height: 1.45;
    margin-bottom: 0.5rem;
}

.atn-loc-heading .fa {
    margin-right: 0.35rem;
}

.atn-loc-body {
    line-height: 1.5;
}

.atn-loc-wl-name {
    font-size: 1.05rem;
    margin-bottom: 0.2rem;
}

.atn-loc-address {
    font-size: 0.95rem;
    color: var(--main-text-color, #444);
}

.atn-loc-map,
.atn-edit-location-map {
    height: 400px;
    width: 100%;
    border-radius: 8px;
    z-index: 1;
    margin-top: 0.25rem;
    border: 1px solid var(--default-line, #e0e0e0);
    position: relative;
}

img.atn-edit-clock-photo {
    max-width: 250px;
    max-height: 320px;
    width: auto;
    height: auto;
    object-fit: contain;
    border-radius: 10px;
    cursor: pointer;
    vertical-align: middle;
}

.ae-preview-img-wrap img.ae-preview-img {
    width: auto;
    max-width: 100%;
    max-height: 65vh;
    height: auto;
    object-fit: contain;
    vertical-align: middle;
}

.atn-loc-map--compact {
    height: 260px;
    margin-top: 10px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.atn-loc-map-wrap {
    position: relative;
}

.atn-loc-map-loader {
    position: absolute;
    inset: 0;
    z-index: 500;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    background: rgba(255, 255, 255, 0.72);
    border-radius: 8px;
    color: var(--main-text-color, #333);
    font-weight: 600;
    pointer-events: none;
}

.atn-loc-map-loader .fa {
    font-size: 22px;
    color: var(--primary, #009688);
}

.atn-loc-map-loader.is-hidden {
    display: none;
}

[data-theme="dark"] .atn-loc-card,
[data-theme="dark"] .atn-loc-display-card {
    background: #2a2a2a;
    border-color: #3a3a3a;
}

[data-theme="dark"] .atn-loc-heading,
[data-theme="dark"] .atn-loc-address {
    color: #fff;
}

[data-theme="dark"] .atn-loc-map,
[data-theme="dark"] .atn-edit-location-map {
    border-color: #3a3a3a;
}

[data-theme="dark"] .atn-loc-map-loader {
    background: rgba(31, 31, 31, 0.78);
    color: #fff;
}

[data-theme="dark"] .atn-loc-map-loader .fa {
    color: #009688;
}

[data-theme="dark"] .clock-geofence-map .leaflet-control-zoom a {
    background-color: #2d2d2d;
    color: #e0e0e0;
    border-color: #3a3a3a;
}

[data-theme="dark"] .clock-geofence-map .leaflet-control-zoom a:hover {
    background-color: #333;
}

.atn-map-pin-wrap {
    background: none !important;
    border: none !important;
}

.atn-map-pin {
    display: block;
    width: 18px;
    height: 18px;
    border-radius: 50% 50% 50% 0;
    transform: rotate(-45deg);
    border: 2px solid #fff;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.4);
}

.atn-map-pin--user,
.atn-map-pin--in {
    background: #009688;
}

.atn-map-pin--out {
    background: #dc3545;
}

.atn-clock-session-stats {
    display: flex;
    flex-wrap: wrap;
    gap: 0.45rem;
    margin-bottom: 0.5rem;
}

.atn-clock-stat-card {
    flex: 1 1 130px;
    min-width: 0;
    padding: 0.4rem 0.7rem;
    border: 1px solid var(--default-line, #e0e0e0);
    border-radius: 6px;
    background: rgba(0, 150, 136, 0.04);
}

.atn-clock-stat-label {
    font-size: 0.72rem;
    font-weight: 600;
    margin-bottom: 0;
    line-height: 1.25;
    color: var(--main-text-color, #333);
}

.atn-clock-stat-label .fa {
    margin-right: 0.25rem;
}

.atn-clock-stat-value {
    font-size: 0.95rem;
    font-weight: 600;
    line-height: 1.25;
    color: var(--main-text-color, #333);
}

[data-theme="dark"] .atn-clock-stat-card {
    background: #2a2a2a;
    border-color: #3a3a3a;
}

[data-theme="dark"] .atn-clock-stat-label,
[data-theme="dark"] .atn-clock-stat-value {
    color: #fff;
}

.atn-edit-form-stats .atn-clock-stat-card {
    flex: 1 1 180px;
}

.atn-edit-time-input {
    margin-top: 0.2rem;
    height: calc(1.6rem + 8px);
    padding: 0.2rem 0.45rem;
    font-size: 0.9rem;
}

.atn-edit-duration-values {
    display: flex;
    flex-direction: column;
    gap: 0.05rem;
}

.atn-edit-duration-live {
    display: none;
    font-size: 0.82rem;
    font-weight: 600;
    line-height: 1.2;
    color: var(--primary, #009688);
}

.atn-edit-duration-live.is-changed {
    display: block;
}

[data-theme="dark"] .atn-edit-duration-live.is-changed {
    color: #02b3a2;
}

.atn-edit-linked-wo {
    font-size: 0.85rem;
}

.atn-edit-form-actions {
    display: flex;
    justify-content: flex-end;
    flex-wrap: wrap;
    gap: 0.5rem;
}

.atn-edit-form-actions .btn {
    min-width: 110px;
}

[data-theme="dark"] .atn-loc-map .leaflet-tooltip,
[data-theme="dark"] .atn-loc-map .clock-geofence-zone-label,
[data-theme="dark"] .atn-edit-location-map .leaflet-tooltip,
[data-theme="dark"] .atn-edit-location-map .clock-geofence-zone-label {
    background-color: #2d2d2d;
    color: #e0e0e0;
    border: 1px solid rgba(255, 255, 255, 0.2);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.45);
}

/* Setting > Company modal - Attachment / logo surfaces were light-only (#f8f9fa);
   dark theme text stayed light so the Attachment heading was unreadable. */
[data-theme="dark"] .company-modal-attachments {
    background: #2d2d2d;
    border: 1px solid #3a3a3a;
}

[data-theme="dark"] .company-modal-attachments h6 {
    color: #fff;
}

[data-theme="dark"] .company-modal-logo-card {
    background: #2d2d2d;
    border-color: #3a3a3a;
}

[data-theme="dark"] .company-modal-logo-top {
    border-bottom-color: #3a3a3a;
}

[data-theme="dark"] .company-modal-section {
    border-bottom-color: #3a3a3a;
}

[data-theme="dark"] .company-modal-section-heading,
[data-theme="dark"] .company-modal-field-label {
    color: #adb5bd;
}

[data-theme="dark"] .company-logo-preview {
    background: #262626;
}

[data-theme="dark"] .company-logo-preview h2 {
    color: #adb5bd;
}

/* Setting > SLA / SLA_Resolution timer modal - START/STOP labels were inline color:#343a40 (light-only). */
.sla-timer-label {
    color: #343a40;
}

[data-theme="dark"] .sla-timer-label {
    color: #e2e8f0;
}

/* Dashboard widget List chart: sortable column headers */
table.widget-list-sortable thead th {
    cursor: pointer;
    user-select: none;
    position: relative;
    padding-right: 1.1rem;
}

table.widget-list-sortable thead th::after {
    content: "\f0dc";
    font-family: FontAwesome;
    position: absolute;
    right: 0.35rem;
    top: 50%;
    transform: translateY(-50%);
    font-size: 0.7rem;
    opacity: 0.35;
}

table.widget-list-sortable thead th[data-sort-dir="asc"]::after {
    content: "\f0de";
    opacity: 0.9;
}

table.widget-list-sortable thead th[data-sort-dir="desc"]::after {
    content: "\f0dd";
    opacity: 0.9;
}

table.widget-list-sortable thead th:hover {
    background-color: rgba(0, 150, 136, 0.08);
}

[data-theme="dark"] table.widget-list-sortable thead th:hover {
    background-color: #333;
}

[data-theme="dark"] table.widget-list-sortable thead th[data-sort-dir]::after {
    color: #02b3a2;
}

/* Setting > Company List - user count pill beside company name */
.company-name-cell {
    display: inline-flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.4rem;
}

.company-name-link {
    display: inline;
}

.company-user-count {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    padding: 0.12rem 0.5rem;
    border-radius: 999px;
    font-size: 0.75rem;
    font-weight: 600;
    line-height: 1.2;
    white-space: nowrap;
    vertical-align: middle;
}

.company-user-count .fa {
    font-size: 0.8rem;
}

.company-user-count--link {
    color: #fff;
    background: var(--primary, #009688);
    text-decoration: none;
}

.company-user-count--link:hover,
.company-user-count--link:focus {
    color: #fff;
    background: #00796b;
    text-decoration: none;
}

.company-user-count--muted {
    color: #6c757d;
    background: rgba(0, 0, 0, 0.06);
    cursor: default;
}

[data-theme="dark"] .company-user-count--link {
    color: #fff;
    background: #009688;
}

[data-theme="dark"] .company-user-count--link:hover,
[data-theme="dark"] .company-user-count--link:focus {
    color: #fff;
    background: #00796b;
}

[data-theme="dark"] .company-user-count--muted {
    color: #adb5bd;
    background: #2d2d2d;
    border: 1px solid #3a3a3a;
}

/* Custom Schedule — Completion mode exclusive cards */
[data-theme="dark"] .cs-completion-card {
    background: #262626;
    border-color: #3a3a3a;
    color: #fff;
}

[data-theme="dark"] .cs-completion-card:hover {
    border-color: #009688;
    box-shadow: 0 0 0 1px rgba(0, 150, 136, 0.25);
}

[data-theme="dark"] .cs-completion-card.is-on {
    background: rgba(0, 150, 136, 0.12);
    border-color: #009688;
}

[data-theme="dark"] .cs-completion-card-icon {
    background: #333;
    color: #adb5bd;
}

[data-theme="dark"] .cs-completion-card.is-on .cs-completion-card-icon {
    background: rgba(0, 150, 136, 0.25);
    color: #02b3a2;
}

[data-theme="dark"] .cs-completion-card-label {
    color: #fff;
}

[data-theme="dark"] .cs-completion-card-hint {
    color: #adb5bd;
}

[data-theme="dark"] .cs-completion-card-tick {
    background: #333;
    border-color: #3a3a3a;
}

[data-theme="dark"] .cs-completion-card.is-on .cs-completion-card-tick {
    background: #009688;
    border-color: #009688;
    color: #fff;
}

/* Attendance List advance filter: Select2 stacking + scroll height */
#Advance-Filter.atn-attend-list-filter .atn-advance-filter-body {
    max-height: 70vh;
    overflow-y: auto;
    overflow-x: hidden;
}

#Advance-Filter.atn-attend-list-filter .modal-content {
    overflow: hidden;
}

#Advance-Filter.atn-attend-list-filter .select2-container {
    width: 100% !important;
}

[data-theme="dark"] #Advance-Filter.atn-attend-list-filter .modal-content,
[data-theme="dark"] #Advance-Filter.atn-attend-list-filter .modal-header,
[data-theme="dark"] #Advance-Filter.atn-attend-list-filter .modal-body {
    background: #262626;
    border-color: #3a3a3a;
    color: #fff;
}

.project-card-cat-chip {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    max-width: 100%;
    margin-top: 6px;
    padding: 2px 8px;
    border-radius: 999px;
    border: 1px solid var(--default-line, #dee2e6);
    background: #f4f5f7;
    color: #333;
    font-size: 12px;
    font-weight: 600;
    line-height: 1.4;
    vertical-align: middle;
}

.project-card-cat-chip>span {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

[data-theme="dark"] .project-card-cat-chip {
    background: #333;
    border-color: #3a3a3a;
    color: #fff;
}

td .project-card-cat-chip {
    margin-top: 0;
    max-width: 220px;
}

.project-card-pri-chip {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    max-width: 100%;
    margin-top: 6px;
    padding: 2px 8px;
    border-radius: 999px;
    border: 1px solid var(--default-line, #dee2e6);
    background: #f4f5f7;
    color: #333;
    font-size: 12px;
    font-weight: 600;
    line-height: 1.4;
    vertical-align: middle;
}

.project-card-pri-chip>span {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

[data-theme="dark"] .project-card-pri-chip {
    background: #333;
    border-color: #3a3a3a;
    color: #fff;
}

td .project-card-pri-chip {
    margin-top: 0;
    max-width: 220px;
}

/* Tenant theme: notification settings headers, save buttons, classic tab */
.noti-type-nx-head,
.noti-group-nx-head,
.fin-noti-card-head {
	background: linear-gradient(90deg, var(--primary-back, #0f766e) 0%, var(--primary, #14b8a6) 100%);
}
.noti-type-nx-btn,
.noti-group-nx-btn {
	background: var(--primary, #009688);
	color: #fff;
}
.noti-type-nx-btn:hover,
.noti-group-nx-btn:hover {
	background: var(--primary-btn-hover, #00796b);
	color: #fff;
}
#nr-classic-noti-btn {
	color: var(--primary, #009688);
}
#nr-classic-noti-btn:hover,
#nr-classic-noti-btn:focus {
	color: var(--a-href-hover, #004a43);
}
.nmail-provider-card > i {
	color: var(--primary, #009688);
}
.nmail-provider-opt input:checked + .nmail-provider-card {
	border-color: var(--primary, #009688);
	background: var(--primary-light, #e8f5f3);
	color: var(--primary-back, #00695c);
	box-shadow: 0 0 0 1px var(--primary, #009688);
}
.nr-switch input:checked + .nr-switch-track {
	background: var(--primary, #20c997);
}
[data-theme="dark"] #nr-classic-noti-btn {
	color: var(--primary, #02b3a2);
}
[data-theme="dark"] #nr-classic-noti-btn:hover,
[data-theme="dark"] #nr-classic-noti-btn:focus {
	color: var(--primary-hover, #02d9c4);
}
[data-theme="dark"] .noti-type-nx-btn,
[data-theme="dark"] .noti-group-nx-btn {
	background: var(--primary, #009688);
}
[data-theme="dark"] .noti-type-nx-btn:hover,
[data-theme="dark"] .noti-group-nx-btn:hover {
	background: var(--primary-btn-hover, #00796b);
}
[data-theme="dark"] .nmail-provider-card > i {
	color: var(--primary-hover, #80cbc4);
}
[data-theme="dark"] .nmail-provider-opt input:checked + .nmail-provider-card {
	border-color: var(--primary, #009688);
	box-shadow: 0 0 0 1px var(--primary, #009688);
}
[data-theme="dark"] .nr-switch input:checked + .nr-switch-track {
	background: var(--primary, #2dd4bf);
}
/* AI Predictive Maintenance */
.ai-pred-disclaimer {
	border-color: var(--primary, #009688);
	background: color-mix(in srgb, var(--primary, #009688) 12%, transparent);
	color: inherit;
}

.ai-pred-list {
    display: grid;
    gap: 12px;
}

.ai-pred-card {
    border: 1px solid var(--default-line, #dee2e6);
    border-radius: 8px;
    padding: 14px 16px;
    background: #fff;
}

.ai-pred-card__head {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 10px;
    margin-bottom: 8px;
}

.ai-pred-card__code {
	font-weight: 700;
	color: var(--primary, #009688);
	margin-right: 8px;
}

.ai-pred-card__name {
    font-weight: 600;
}

.ai-pred-card__score-row {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 6px;
    flex-wrap: wrap;
}

.ai-pred-card__score-lbl {
    font-size: 12px;
    color: #6c757d;
}

.ai-pred-bar {
    height: 8px;
    border-radius: 4px;
    background: #e9ecef;
    overflow: hidden;
}

.ai-pred-bar__fill {
	height: 100%;
	border-radius: 4px;
	background: var(--primary, #009688);
}

.ai-pred-band {
    display: inline-block;
    padding: 3px 10px;
    border-radius: 999px;
    font-size: 11px;
    font-weight: 700;
    white-space: nowrap;
}

.ai-pred-band--critical,
.ai-pred-bar__fill.ai-pred-band--critical {
    background: #c62828;
    color: #fff;
}

.ai-pred-band--high,
.ai-pred-bar__fill.ai-pred-band--high {
    background: #ef6c00;
    color: #fff;
}

.ai-pred-band--medium,
.ai-pred-bar__fill.ai-pred-band--medium {
    background: #f9a825;
    color: #1f1f1f;
}

.ai-pred-band--low,
.ai-pred-bar__fill.ai-pred-band--low {
    background: #2e7d32;
    color: #fff;
}

.ai-pred-prompts {
    padding-left: 1.25rem;
}

.ai-pred-prompts li {
    margin-bottom: 4px;
}

[data-theme="dark"] .ai-pred-disclaimer {
    background: #333;
    border-color: #3a3a3a;
    color: #fff;
}

[data-theme="dark"] .ai-pred-card {
    background: #262626;
    border-color: #3a3a3a;
    color: #fff;
}

[data-theme="dark"] .ai-pred-card__code {
	color: var(--primary, #02b3a2);
}

[data-theme="dark"] .ai-pred-card__score-lbl,
[data-theme="dark"] .ai-pred-card__meta {
    color: #bbb !important;
}

[data-theme="dark"] .ai-pred-bar {
    background: #1c1b1b;
}

[data-theme="dark"] .ai-pred-band--medium,
[data-theme="dark"] .ai-pred-bar__fill.ai-pred-band--medium {
    color: #1f1f1f;
}

.ai-pred-detail-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
}

@media (max-width: 767px) {
    .ai-pred-detail-grid {
        grid-template-columns: 1fr;
    }
}

.ai-pred-horizons .badge {
    font-weight: 600;
}

[data-theme="dark"] .ai-pred-filters .btn-outline-secondary {
    border-color: #3a3a3a;
    color: #fff;
}

[data-theme="dark"] .ai-pred-filters .btn-outline-secondary.active,
[data-theme="dark"] .ai-pred-filters .btn-outline-secondary:hover {
	background: var(--primary, #009688);
	border-color: var(--primary, #009688);
	color: #fff;
}

[data-theme="dark"] #aiPredBand {
    background: #333;
    border-color: #3a3a3a;
    color: #fff;
}

.ai-pred-work {
    display: inline-block;
    padding: 3px 10px;
    border-radius: 999px;
    font-size: 11px;
    font-weight: 700;
    white-space: nowrap;
}

.ai-pred-work--pm {
	background: color-mix(in srgb, var(--primary, #009688) 15%, transparent);
	color: var(--primary, #009688);
	border: 1px solid var(--primary, #009688);
}

.ai-pred-work--cm {
    background: rgba(198, 40, 40, 0.12);
    color: #c62828;
    border: 1px solid #c62828;
}

.ai-pred-work--both {
    background: rgba(239, 108, 0, 0.12);
    color: #ef6c00;
    border: 1px solid #ef6c00;
}

.ai-pred-work--monitor {
    background: rgba(108, 117, 125, 0.12);
    color: #6c757d;
    border: 1px solid #6c757d;
}

[data-theme="dark"] .ai-pred-work--pm {
	background: #333;
	color: var(--primary, #02b3a2);
	border-color: var(--primary, #02b3a2);
}

[data-theme="dark"] .ai-pred-work--cm {
    background: #333;
    color: #ef9a9a;
    border-color: #c62828;
}

[data-theme="dark"] .ai-pred-work--both {
    background: #333;
    color: #ffb74d;
    border-color: #ef6c00;
}

[data-theme="dark"] .ai-pred-work--monitor {
    background: #333;
    color: #bbb;
    border-color: #3a3a3a;
}

/* Tenant theme color editor */
.tts-editor {
	container-type: inline-size;
}
.tts-editor-head.line-head {
	margin-bottom: 0.85rem;
}
.tts-editor-title {
	margin: 0;
	font-size: 1.15rem;
	font-weight: 600;
	color: var(--font-color, #111827);
}
.tts-editor-title .fa {
	color: var(--primary, #009688);
	margin-right: 0.35rem;
}
.tts-editor-hint {
	margin: 0.35rem 0 0;
	max-width: 46rem;
	font-size: 0.85rem;
	line-height: 1.45;
	color: var(--secondary, #6b7280);
}
.tts-editor-actions {
	display: flex;
	flex-wrap: wrap;
	gap: 0.4rem;
	align-items: center;
	margin-bottom: 1rem;
	padding: 0.55rem;
	border: 1px solid var(--table-line, #e5e7eb);
	border-radius: 12px;
	background: var(--slight-dark-back, #fafafa);
}
.tts-editor-body {
	display: grid;
	grid-template-columns: minmax(168px, 210px) minmax(0, 1fr);
	gap: 1rem;
	align-items: start;
}
.tts-family-nav {
	display: flex;
	flex-direction: column;
	gap: 0.25rem;
	border-right: 1px solid var(--table-line, #e5e7eb);
	padding-right: 0.85rem;
}
.tts-family-nav-btn {
	display: flex;
	align-items: center;
	gap: 0.55rem;
	width: 100%;
	margin: 0;
	padding: 0.48rem 0.6rem;
	border: 1px solid transparent;
	border-radius: 10px;
	background: transparent;
	color: var(--font-color, #111827);
	text-align: left;
	font-size: 0.875rem;
	font-weight: 600;
	line-height: 1.2;
	cursor: pointer;
}
.tts-family-nav-btn:hover {
	background: rgba(var(--primary-rgb, 0, 150, 136), 0.08);
}
.tts-family-nav-btn.is-active {
	background: rgba(var(--primary-rgb, 0, 150, 136), 0.12);
	border-color: var(--primary, #009688);
}
.tts-family-nav-name {
	min-width: 0;
}
.tts-family-nav-btn.is-dirty .tts-family-nav-name::after {
	content: "";
	display: inline-block;
	width: 6px;
	height: 6px;
	margin-left: 0.4rem;
	border-radius: 50%;
	background: var(--warning, #ffc107);
	vertical-align: middle;
}
.tts-family-pip {
	width: 16px;
	height: 16px;
	flex: 0 0 16px;
	border-radius: 50%;
	box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.18);
}
.tts-editor-stage {
	min-width: 0;
	padding: 0.95rem 1rem 1.05rem;
	border: 1px solid var(--table-line, #e5e7eb);
	border-radius: 12px;
	background: var(--slight-dark-back, #fafafa);
}
.tts-editor .tts-family[hidden] {
	display: none !important;
}
.tts-family-head {
	display: flex;
	flex-wrap: wrap;
	align-items: flex-start;
	justify-content: space-between;
	gap: 0.65rem 1rem;
	margin-bottom: 0.85rem;
}
.tts-family-title {
	margin: 0;
	font-size: 1.05rem;
	font-weight: 700;
	color: var(--font-color, #111827);
}
.tts-family-blurb {
	margin: 0.15rem 0 0;
	font-size: 0.8rem;
	line-height: 1.35;
	color: var(--secondary, #6b7280);
}
.tts-reset-family {
	flex: 0 0 auto;
}
.tts-section-label {
	margin: 0.95rem 0 0.5rem;
	font-size: 0.68rem;
	font-weight: 700;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--secondary, #6c757d);
}
.tts-swatch-base {
	display: flex;
	align-items: center;
	gap: 1rem;
	margin: 0;
	padding: 0.85rem 1rem;
	border: 1px solid var(--table-line, #e5e7eb);
	border-radius: 12px;
	background: var(--white, #fff);
}
.tts-swatch-base .tts-swatch-chip {
	width: 76px;
	height: 76px;
	flex: 0 0 76px;
	border-radius: 16px;
}
.tts-swatch-base .tts-swatch-meta {
	padding: 0;
	flex: 1;
	min-width: 0;
}
.tts-swatch-base .tts-swatch-label {
	font-size: 0.95rem;
}
.tts-swatch-base .tts-hex {
	max-width: 7.5rem;
	font-size: 0.95rem;
	font-weight: 700;
	color: var(--font-color, #111827);
}
.tts-base-hint {
	margin: 0.35rem 0 0;
	max-width: 36rem;
	font-size: 0.75rem;
	line-height: 1.4;
	color: var(--secondary, #6b7280);
}
.tts-swatches {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(138px, 1fr));
	gap: 0.65rem;
}
.tts-swatch:not(.tts-swatch-base) {
	display: flex;
	flex-direction: column;
	min-width: 0;
	margin: 0;
	overflow: hidden;
	border: 1px solid var(--table-line, #e5e7eb);
	border-radius: 12px;
	background: var(--white, #fff);
}
.tts-swatch:hover {
	border-color: var(--primary, #009688);
}
.tts-swatch:focus-within {
	border-color: var(--primary, #009688);
	box-shadow: 0 0 0 2px rgba(var(--primary-rgb, 0, 150, 136), 0.22);
}
.tts-swatch.is-overridden {
	box-shadow: inset 0 0 0 2px var(--warning, #ffc107);
}
.tts-swatch.is-overridden:focus-within {
	box-shadow: inset 0 0 0 2px var(--warning, #ffc107), 0 0 0 2px rgba(var(--primary-rgb, 0, 150, 136), 0.22);
}
.tts-swatch-chip {
	position: relative;
	overflow: hidden;
}
.tts-swatch:not(.tts-swatch-base) .tts-swatch-chip {
	height: 64px;
}
.tts-editor .tts-color {
	-webkit-appearance: none;
	appearance: none;
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	margin: 0;
	padding: 0;
	border: 0;
	border-radius: 0;
	background: transparent;
	cursor: pointer;
	overflow: hidden;
}
.tts-editor .tts-color::-webkit-color-swatch-wrapper {
	padding: 0;
}
.tts-editor .tts-color::-webkit-color-swatch {
	border: none;
	border-radius: 0;
}
.tts-editor .tts-color::-moz-color-swatch {
	border: none;
}
.tts-swatch-meta {
	display: flex;
	flex-direction: column;
	gap: 0.12rem;
	padding: 0.5rem 0.65rem 0.6rem;
}
.tts-swatch-label {
	font-size: 0.75rem;
	font-weight: 600;
	line-height: 1.25;
	color: var(--font-color, #111827);
}
.tts-editor .tts-hex {
	width: 100%;
	margin: 0;
	padding: 0.12rem 0.28rem;
	border: 1px solid transparent;
	border-radius: 6px;
	background: transparent;
	color: var(--secondary, #6b7280);
	font-family: Consolas, "Courier New", monospace;
	font-size: 0.75rem;
	line-height: 1.3;
}
.tts-editor .tts-hex:hover,
.tts-editor .tts-hex:focus {
	border-color: var(--table-line, #e5e7eb);
	background: var(--slight-dark-back, #fafafa);
	color: var(--font-color, #111827);
	outline: none;
}
.tts-editor .tts-hex:focus {
	border-color: var(--primary, #009688);
}
.tts-changed {
	display: none;
	align-items: center;
	gap: 0.35rem;
	margin-top: 0.1rem;
	font-size: 0.68rem;
	font-weight: 700;
	color: var(--font-color, #111827);
}
.tts-changed::before {
	content: "";
	width: 6px;
	height: 6px;
	border-radius: 50%;
	background: var(--warning, #ffc107);
	box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.15);
}
.tts-swatch.is-overridden .tts-changed {
	display: inline-flex;
}
.tts-editor-foot {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.75rem;
	margin-top: 1rem;
	padding-top: 0.95rem;
	border-top: 1px solid var(--table-line, #e5e7eb);
}
.tts-status {
	font-size: 0.85rem;
	color: var(--secondary, #6c757d);
}
@container (max-width: 760px) {
	.tts-editor-body {
		grid-template-columns: 1fr;
	}
	.tts-family-nav {
		flex-direction: row;
		flex-wrap: wrap;
		overflow: visible;
		border-right: 0;
		border-bottom: 1px solid var(--table-line, #e5e7eb);
		padding: 0 0 0.65rem;
		gap: 0.35rem;
	}
	.tts-family-nav-btn {
		width: auto;
		flex: 0 0 auto;
		white-space: nowrap;
	}
}
@media (max-width: 991.98px) {
	.tts-editor-body {
		grid-template-columns: 1fr;
	}
	.tts-family-nav {
		flex-direction: row;
		flex-wrap: wrap;
		overflow: visible;
		border-right: 0;
		border-bottom: 1px solid var(--table-line, #e5e7eb);
		padding: 0 0 0.65rem;
		gap: 0.35rem;
	}
	.tts-family-nav-btn {
		width: auto;
		flex: 0 0 auto;
		white-space: nowrap;
	}
}
[data-theme="dark"] .tts-editor-title,
[data-theme="dark"] .tts-family-title,
[data-theme="dark"] .tts-family-nav-btn,
[data-theme="dark"] .tts-swatch-label,
[data-theme="dark"] .tts-changed,
[data-theme="dark"] .tts-swatch-base .tts-hex {
	color: #fff;
}
[data-theme="dark"] .tts-editor-hint,
[data-theme="dark"] .tts-family-blurb,
[data-theme="dark"] .tts-base-hint,
[data-theme="dark"] .tts-section-label,
[data-theme="dark"] .tts-status,
[data-theme="dark"] .tts-editor .tts-hex {
	color: #c2c2c2;
}
[data-theme="dark"] .tts-editor-actions,
[data-theme="dark"] .tts-editor-stage {
	background: #262626;
	border-color: #3a3a3a;
}
[data-theme="dark"] .tts-family-nav {
	border-color: #3a3a3a;
}
[data-theme="dark"] .tts-family-nav-btn:hover,
[data-theme="dark"] .tts-family-nav-btn.is-active {
	background: #333;
}
[data-theme="dark"] .tts-family-nav-btn.is-active {
	border-color: var(--primary, #009688);
}
[data-theme="dark"] .tts-swatch-base,
[data-theme="dark"] .tts-swatch:not(.tts-swatch-base) {
	background: #2d2d2d;
	border-color: #3a3a3a;
}
[data-theme="dark"] .tts-editor .tts-hex:hover,
[data-theme="dark"] .tts-editor .tts-hex:focus {
	background: #333;
	border-color: #3a3a3a;
	color: #fff;
}
[data-theme="dark"] .tts-editor .tts-hex:focus {
	border-color: var(--primary, #009688);
}
[data-theme="dark"] .tts-editor .tts-swatch-base .tts-hex {
	color: #fff;
}
[data-theme="dark"] .tts-editor-foot {
	border-top-color: #3a3a3a;
}

/* Theme preset picker */
.tts-presets-tile {
	display: flex;
	flex-direction: column;
}
.tts-presets-hint {
	margin: 0 0 0.9rem;
	font-size: 0.8rem;
	line-height: 1.45;
	color: var(--secondary, #6b7280);
}
.tts-presets-kicker {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 0.75rem;
	margin: 1rem 0 0.5rem;
	font-size: 0.68rem;
	font-weight: 700;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--secondary, #6c757d);
}
.tts-presets {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 0.65rem;
}
.tts-presets-custom {
	grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
}
.tts-preset-card {
	display: flex;
	flex-direction: column;
	gap: 0.55rem;
	margin: 0;
	padding: 0.5rem;
	text-align: left;
	border: 1px solid var(--table-line, #e5e7eb);
	border-radius: 12px;
	background: var(--white, #fff);
	color: inherit;
	cursor: pointer;
	transition: border-color .15s, box-shadow .15s;
}
.tts-preset-card:hover,
.tts-preset-card:focus-visible {
	border-color: var(--primary, #009688);
	outline: none;
}
.tts-preset-card.is-active {
	border-color: var(--primary, #009688);
	box-shadow: 0 0 0 2px rgba(var(--primary-rgb, 0, 150, 136), 0.22);
}
.tts-preset-canvas {
	position: relative;
	display: block;
	height: 72px;
	border-radius: 10px;
	background: linear-gradient(145deg, var(--tts-p, var(--primary, #009688)), var(--tts-p-deep, #004d40));
}
.tts-preset-card.is-active .tts-preset-canvas::after {
	content: "\f00c";
	font-family: FontAwesome;
	position: absolute;
	top: 8px;
	right: 8px;
	width: 22px;
	height: 22px;
	border-radius: 50%;
	background: #fff;
	color: #1a1a1a;
	font-size: 11px;
	line-height: 22px;
	text-align: center;
}
.tts-preset-dots {
	position: absolute;
	left: 10px;
	bottom: 10px;
	display: flex;
	gap: 5px;
}
.tts-preset-dot {
	width: 12px;
	height: 12px;
	border-radius: 50%;
	box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.92);
}
.tts-preset-copy {
	display: block;
	padding: 0 0.2rem 0.15rem;
}
.tts-preset-name {
	display: block;
	font-weight: 700;
	font-size: 0.92rem;
	line-height: 1.3;
	color: var(--font-color, #111827);
}
.tts-preset-desc {
	display: block;
	margin-top: 0.15rem;
	font-size: 0.75rem;
	line-height: 1.35;
	color: var(--secondary, #6b7280);
}
.tts-customs-empty {
	grid-column: 1 / -1;
	display: flex;
	align-items: center;
	gap: 0.7rem;
	margin: 0;
	padding: 0.8rem 0.95rem;
	border: 1px dashed var(--table-line, #e5e7eb);
	border-radius: 12px;
	background: var(--slight-dark-back, #fafafa);
	color: var(--secondary, #6b7280);
	font-size: 0.8rem;
	line-height: 1.4;
}
.tts-customs-empty .fa {
	color: var(--primary, #009688);
	font-size: 1rem;
}
.tts-palette {
	display: flex;
	flex-direction: column;
	flex: 0 0 auto;
}
.tts-palette-board {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 0.6rem;
}
.tts-palette-swatch {
	display: flex;
	flex-direction: column;
	min-height: 0;
	overflow: hidden;
	border: 1px solid var(--table-line, #e5e7eb);
	border-radius: 12px;
	background: var(--white, #fff);
}
.tts-palette-bands {
	display: flex;
	flex-direction: column;
	height: 72px;
}
.tts-palette-band {
	flex: 1 1 0;
}
.tts-palette-name {
	flex: 0 0 auto;
	padding: 0.4rem 0.65rem 0.45rem;
	font-size: 0.75rem;
	font-weight: 700;
	line-height: 1.3;
	color: var(--font-color, #111827);
}
@media (min-width: 1200px) {
	.tts-presets {
		grid-template-columns: repeat(4, minmax(0, 1fr));
	}
}
@media (max-width: 767.98px) {
	#tts-presets,
	.tts-palette-board {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}
[data-theme="dark"] .tts-presets-hint,
[data-theme="dark"] .tts-presets-kicker,
[data-theme="dark"] .tts-preset-desc,
[data-theme="dark"] .tts-customs-empty {
	color: #c2c2c2;
}
[data-theme="dark"] .tts-preset-card,
[data-theme="dark"] .tts-palette-swatch {
	background: #2d2d2d;
	border-color: #3a3a3a;
}
[data-theme="dark"] .tts-preset-name,
[data-theme="dark"] .tts-palette-name {
	color: #fff;
}
[data-theme="dark"] .tts-customs-empty {
	background: #262626;
	border-color: #3a3a3a;
}
/* Home Map Tagging (do not apply to other #map pages — low pane z-index hides markers under tiles) */
/* Keep stacking local to Home without overriding Leaflet's internal pane order. */
.home-map-tagging.leaflet-container,
#map.home-map-tagging,
#map.home-map-tagging .leaflet-pane,
#map.home-map-tagging .leaflet-tile-container,
#map.home-map-tagging .leaflet-map-pane {
    border: none !important;
    outline: none !important;
}

#map.home-map-tagging {
    position: relative;
    z-index: 1 !important;
}

.map-counts {
    display: flex;
    flex-wrap: wrap;
    gap: 5px;
    align-items: center;
    margin-top: 15px;
    margin-bottom: 20px;
    padding: 0;
}

.map-count-toggle {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px 14px;
    border: 1px solid var(--table-line);
    border-radius: 6px;
    cursor: pointer;
    user-select: none;
    transition: all 0.2s ease;
    font-size: 14px;
    color: var(--font-color);
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
}

.map-count-toggle:hover {
    background: var(--gray-back);
    border-color: var(--secondary);
    transform: translateY(-1px);
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.map-count-toggle:active {
    transform: translateY(0);
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
}

.map-count-toggle i {
    color: var(--secondary);
    font-size: 13px;
}

.map-count-toggle strong {
    color: var(--primary);
    font-weight: 600;
    margin-left: 2px;
}

.map-count-toggle.hidden {
    text-decoration: line-through;
    opacity: 0.5;
    background: var(--gray-back);
    border-color: var(--table-line);
}

.map-count-toggle.hidden strong {
    color: var(--secondary);
}

.map-count-toggle.hidden:hover {
    background: var(--gray-back);
    opacity: 0.7;
}

.map-count-total {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px 14px;
    border: 1px solid var(--table-line);
    border-radius: 6px;
    font-size: 14px;
    font-weight: 500;
}

.map-count-total i {
    color: var(--info);
    font-size: 13px;
}

.map-count-total strong {
    color: var(--primary);
    font-weight: 700;
    margin-left: 2px;
}

.polygon-hover-tooltip {
    background: rgba(0, 0, 0, 0.8);
    color: #fff;
    border: none;
    border-radius: 4px;
    padding: 4px 8px;
    font-size: 12px;
    font-weight: 600;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
}

.base-toggle-control,
.base-locate-control,
.base-rotate-control {
    display: flex;
    flex-direction: row;
    background: rgba(0, 150, 136, 0.95);
    border-radius: 8px;
    overflow: hidden;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.25);
    border: 1px solid rgba(0, 0, 0, 0.15);
}

.base-toggle-wrapper {
    display: flex;
    align-items: center;
    gap: 6px;
}

.base-toggle-btn {
    align-items: center;
    background: #009688;
    border: none;
    color: #fff;
    cursor: pointer;
    display: inline-flex;
    flex-direction: row;
    font-size: 11px;
    font-weight: 600;
    gap: 6px;
    padding: 6px 10px;
    min-width: 0;
    transition: background-color 0.2s ease, color 0.2s ease;
}

.base-toggle-btn:hover {
    background: #018779;
    color: #ffffff;
}

.base-toggle-btn+.base-toggle-btn {
    border-left: 1px solid rgba(255, 255, 255, 0.3);
    border-top: 0;
}

.base-toggle-btn:focus {
    outline: none;
    box-shadow: 0 0 0 0 rgba(0, 150, 136, 0.5);
}

.base-toggle-btn.active {
    background: #007065;
    color: #ffffff;
}

.base-toggle-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.base-toggle-label {
    white-space: nowrap;
}

.leaflet-control-rotate {
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    display: block !important;
    opacity: 1 !important;
    visibility: visible !important;
}

.leaflet-control-rotate a,
.leaflet-control-rotate button,
.leaflet-control-rotate .leaflet-control-rotate-north,
.leaflet-control-rotate .leaflet-control-rotate-marker {
    background: #009688 !important;
    color: #ffffff !important;
    border: none !important;
    border-radius: 50% !important;
    opacity: 1 !important;
    visibility: visible !important;
}

.leaflet-control-rotate a,
.leaflet-control-rotate button {
    width: 34px !important;
    height: 34px !important;
    line-height: 34px !important;
    text-align: center !important;
    display: inline-block !important;
    margin: 2px !important;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.25) !important;
    transition: background-color 0.2s ease !important;
}

.leaflet-control-rotate a:hover,
.leaflet-control-rotate button:hover,
.leaflet-control-rotate .leaflet-control-rotate-north:hover {
    background: #007065 !important;
    color: #ffffff !important;
}

.geometry-marker-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 48px;
    --marker-color: #009688;
    --marker-shadow: rgba(0, 150, 136, 0.25);
}

.geometry-marker-shell {
    position: relative;
    width: 32px;
    height: 48px;
    filter: drop-shadow(0 2px 8px rgba(0, 0, 0, 0.35));
}

.geometry-marker-shell svg {
    width: 32px;
    height: 48px;
    display: block;
}

.geometry-marker-shell path {
    fill: var(--marker-color);
    stroke: #fff;
    stroke-width: 3;
}

.geometry-marker-core {
    position: absolute;
    left: 50%;
    top: 38%;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: #fff;
    transform: translate(-50%, -50%);
    box-shadow: 0 0 0 2px var(--marker-shadow);
}

.user-location-pulse {
    width: 20px;
    height: 20px;
    position: relative;
}

.pulse-dot {
    width: 12px;
    height: 12px;
    background: #009688;
    border-radius: 50%;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

.user-location-pulse::after {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background: rgba(0, 150, 136, 0.5);
    transform: translate(-50%, -50%) scale(1);
    animation: homeMapUserPulse 2.5s ease-out infinite;
}

.user-location-pulse::before {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    width: 23px;
    height: 23px;
    border: 1px solid rgba(0, 150, 136, 0.6);
    border-radius: 50%;
    transform: translate(-50%, -50%);
    pointer-events: none;
}

@keyframes homeMapUserPulse {
    0% {
        transform: translate(-50%, -50%) scale(1);
        opacity: 0.7;
    }

    100% {
        transform: translate(-50%, -50%) scale(2.5);
        opacity: 0;
    }
}

.loading-overlay {
    position: absolute !important;
    left: 50% !important;
    top: 50% !important;
    transform: translate(-50%, -50%) !important;
    z-index: 10000 !important;
    pointer-events: none;
    background: rgba(255, 255, 255, 0.7);
    border-radius: 12px;
    padding: 32px 40px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.asset-popup-content {
    color: #333;
    border-radius: 5px;
}

.asset-popup-link {
    color: #009688 !important;
    text-decoration: none;
}

.asset-popup-link:hover {
    color: #018678 !important;
    text-decoration: underline;
}

[data-theme="dark"] .map-counts {
    border-color: #3a3a3a;
}

[data-theme="dark"] .map-count-toggle {
    border-color: #3a3a3a;
    color: #fff;
    background: #262626;
}

[data-theme="dark"] .map-count-toggle:hover {
    background: #333;
    border-color: #009688;
}

[data-theme="dark"] .map-count-toggle i {
    color: #c2c2c2;
}

[data-theme="dark"] .map-count-toggle strong {
    color: #009688;
}

[data-theme="dark"] .map-count-toggle.hidden {
    background: #262626;
    border-color: #3a3a3a;
    opacity: 0.4;
}

[data-theme="dark"] .map-count-total {
    border-color: #3a3a3a;
    color: #fff;
    background: #262626;
}

[data-theme="dark"] .base-toggle-btn.active {
    background: #007065;
    color: #ffffff;
}

[data-theme="dark"] .loading-overlay {
    background: rgba(38, 38, 38, 0.85);
    color: #fff;
}

[data-theme="dark"] .asset-popup-content {
    color: #fff;
}

[data-theme="dark"] .asset-popup-link {
    color: #02b3a2;
}

[data-theme="dark"] .asset-popup-link:hover {
    color: #02d9c4;
}

[data-theme="dark"] .leaflet-popup-content-wrapper {
    background-color: #2d2d2d;
    color: #fff;
}

[data-theme="dark"] .leaflet-popup-tip {
    background-color: #2d2d2d;
}

[data-theme="dark"] .leaflet-popup-content {
    color: #fff;
}




/* Asset List — Show Summary breakdown cards */
#ast_list_breakdown_panel {
	margin-bottom: 0.75rem;
}

/* Assets Report — Show Summary overview cards above "Summary By" tables */
.aor-summary-overview-toolbar {
	display: flex;
	justify-content: flex-end;
}
html:not(.aor-summary-overview-on) .aor-sum-row .cm-ts-overview {
	display: none !important;
}
html.aor-summary-overview-on .aor-sum-row .cm-ts-overview {
	display: block !important;
}
.aor-sum-row .cm-ts-overview {
	background: #fff;
	border: 1px solid #e0e0e0;
	border-radius: 10px;
	padding: 0.75rem 0.85rem;
	box-shadow: 0 1px 4px rgba(0, 0, 0, 0.05);
}
.aor-sum-row .cm-ts-overview-head {
	margin-bottom: 0.55rem;
}
.aor-sum-row .cm-ts-overview-sub {
	display: block;
	font-size: 0.68rem;
	color: #6c757d;
	line-height: 1.3;
}
.aor-sum-row .cm-ts-overview-stacked {
	display: flex;
	height: 6px;
	border-radius: 4px;
	overflow: hidden;
	background: #e9ecef;
	margin-bottom: 0.55rem;
}
.aor-sum-row .cm-ts-overview-seg {
	display: block;
	height: 100%;
	min-width: 0;
}
.aor-sum-row .cm-ts-overview-rows {
	display: flex;
	flex-direction: column;
	gap: 0.35rem;
}
.aor-sum-row .cm-ts-overview-row-top {
	display: flex;
	align-items: center;
	gap: 0.45rem;
	margin-bottom: 0.15rem;
}
.aor-sum-row .cm-ts-overview-dot {
	width: 7px;
	height: 7px;
	border-radius: 50%;
	flex-shrink: 0;
}
.aor-sum-row .cm-ts-overview-row-label {
	flex: 1;
	font-size: 0.68rem;
	color: #495057;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	min-width: 0;
}
.aor-sum-row .cm-ts-overview-row-value {
	font-size: 0.68rem;
	font-weight: 600;
	color: #2c3e50;
	white-space: nowrap;
	margin-left: auto;
	padding-left: 0.75rem;
	flex-shrink: 0;
}
.aor-sum-row .cm-ts-overview-row--more .cm-ts-overview-row-label,
.aor-sum-row .cm-ts-overview-row--more .cm-ts-overview-row-value {
	color: #6c757d;
}
.aor-sum-row .cm-ts-overview-more-btn {
	display: block;
	width: 100%;
	border: none !important;
	background: transparent !important;
	box-shadow: none !important;
	padding: 0;
	margin: 0;
	text-align: left;
	cursor: pointer;
	color: inherit;
	font: inherit;
	line-height: inherit;
	-webkit-appearance: none;
	appearance: none;
}
.aor-sum-row .cm-ts-overview-more-btn .cm-ts-overview-row-label {
	color: #009688 !important;
	font-weight: 600;
	text-decoration: underline;
	text-underline-offset: 2px;
}
.aor-sum-row .cm-ts-overview-more-btn:hover .cm-ts-overview-row-label,
.aor-sum-row .cm-ts-overview-more-btn:focus .cm-ts-overview-row-label {
	color: #00796b !important;
}
.aor-sum-row .cm-ts-overview-row-bar {
	height: 4px;
	background: #e9ecef;
	border-radius: 3px;
	overflow: hidden;
}
.aor-sum-row .cm-ts-overview-row-bar > span {
	display: block;
	height: 100%;
	border-radius: 3px;
}
[data-theme="dark"] .aor-sum-row .cm-ts-overview {
	background: #262626;
	border-color: #444;
}
[data-theme="dark"] .aor-sum-row .cm-ts-overview-row-value {
	color: #e2e8f0;
}
[data-theme="dark"] .aor-sum-row .cm-ts-overview-sub,
[data-theme="dark"] .aor-sum-row .cm-ts-overview-row-label {
	color: #a0aec0;
}
[data-theme="dark"] .aor-sum-row .cm-ts-overview-row--more .cm-ts-overview-row-label,
[data-theme="dark"] .aor-sum-row .cm-ts-overview-row--more .cm-ts-overview-row-value {
	color: #9aa3ab;
}
[data-theme="dark"] .aor-sum-row .cm-ts-overview-more-btn .cm-ts-overview-row-label {
	color: #4fd1c7 !important;
}
[data-theme="dark"] .aor-sum-row .cm-ts-overview-stacked,
[data-theme="dark"] .aor-sum-row .cm-ts-overview-row-bar {
	background: #3a3a3a;
}

/* Rating setting (ref_Rating) */
.ref-rating-site {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 10px;
	flex-wrap: wrap;
	margin-bottom: 8px;
}
.ref-rating-site__label {
	font-weight: 600;
}
.ref-rating-site .dropdown-toggle {
	min-width: 150px;
}
.ref-rating-site__rule {
	margin: 8px 0 4px;
	border: 0;
	border-top: 1px solid var(--default-line);
}
.ref-rating-intro {
	display: flex;
	align-items: flex-start;
	gap: 12px;
	margin-bottom: 16px;
}
.ref-rating-intro__title,
.ref-rating-section__title {
	margin: 0 0 4px;
	color: var(--main-text-color);
	font-size: 1.05rem;
	font-weight: 600;
}
.ref-rating-kicker {
	display: flex;
	align-items: flex-start;
	gap: 10px;
	margin-bottom: 14px;
}
.ref-rating-kicker__icon {
	width: 36px;
	height: 36px;
	border-radius: 8px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
	background: var(--primary-light);
	color: var(--primary);
}
.ref-rating-section {
	background: #f8f9fa;
	border: 1px solid var(--default-line);
	border-radius: 12px;
	padding: 16px;
}
.ref-rating-rules {
	margin-top: 16px;
}
.ref-rating-note,
.ref-rating-preview__caption {
	margin-top: 10px;
	font-size: 12px;
}
.ref-rating-stepper {
	display: flex;
	width: fit-content;
	margin-left: auto;
	margin-right: auto;
	align-items: stretch;
	border: 1px solid var(--default-line);
	border-radius: 8px;
	overflow: hidden;
	background: #fff;
}
.ref-rating-stepper__btn {
	width: 42px;
	border: 0;
	background: transparent;
	color: var(--primary);
	font-size: 20px;
	line-height: 1;
	cursor: pointer;
}
.ref-rating-stepper__btn:hover,
.ref-rating-stepper__btn:focus {
	background: rgba(0, 150, 136, 0.12);
	outline: none;
}
.ref-rating-stepper input {
	width: 72px;
	border: 0;
	border-left: 1px solid var(--default-line);
	border-right: 1px solid var(--default-line);
	text-align: center;
	font-size: 20px;
	font-weight: 600;
	background: transparent;
	color: var(--main-text-color);
	-moz-appearance: textfield;
	appearance: textfield;
}
.ref-rating-stepper input::-webkit-outer-spin-button,
.ref-rating-stepper input::-webkit-inner-spin-button {
	-webkit-appearance: none;
	margin: 0;
}
.ref-rating-preview {
	text-align: center;
}
.ref-rating-preview__stars,
.ref-rating-label__stars,
.ref-rating-preview__stars .fa,
.ref-rating-label__stars .fa,
.ref-rating-chip span .fa-star {
	color: #ffc107;
}
.ref-rating-preview__stars {
	display: inline-flex;
	flex-direction: column;
	align-items: flex-start;
	margin-top: 12px;
}
.ref-rating-preview__stars-row {
	display: flex;
	justify-content: flex-start;
	flex-wrap: nowrap;
	gap: 4px;
	font-size: 22px;
	line-height: 1.4;
}
.rating[data-rating-rows] {
	overflow: visible;
}
.rating[data-rating-rows] > span {
	margin: 0 !important;
}
.rating[data-rating-rows] > label,
.rating.rating-many[data-rating-rows] > label,
.rating.rating-many-more[data-rating-rows] > label {
	font-size: 3em;
	margin: 0;
	line-height: 1;
}
.rating[data-rating-rows] + #Ratings,
.rating[data-rating-rows] + #Ratings_Confirm,
.rating[data-rating-rows] + #Ratings_Confirm_SubStatus,
.rating[data-rating-rows] + .Ratings {
	margin-top: 4px !important;
}
.ref-rating-preview__stars-row + .ref-rating-preview__stars-row {
	margin-top: 6px;
}
.ref-rating-label__stars {
	letter-spacing: 2px;
	line-height: 1.4;
}
.ref-rating-label__more {
	margin-left: 4px;
	font-size: 12px;
	letter-spacing: 0;
	color: #6c757d;
	font-weight: 600;
}
.ref-rating-labels {
	margin-bottom: 8px;
}
.ref-rating-label {
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 8px 10px;
	margin-bottom: 8px;
	border-radius: 8px;
	border: 1px solid var(--default-line);
	background: #fff;
}
.ref-rating-label__meta {
	display: flex;
	align-items: center;
	gap: 8px;
	flex: 0 0 148px;
	min-width: 0;
}
.ref-rating-label__stars {
	font-size: 12px;
	white-space: nowrap;
}
.ref-rating-label__count {
	font-size: 12px;
	color: #6c757d;
	white-space: nowrap;
}
.ref-rating-label .form-control {
	flex: 1 1 auto;
	min-width: 0;
}
.ref-rating-toggle {
	margin-bottom: 12px;
}
.ref-rating-chip-label {
	font-weight: 600;
}
.ref-rating-chips {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
}
.ref-rating-chip {
	position: relative;
	margin: 0;
}
.ref-rating-chip input {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	border: 0;
}
.ref-rating-chip span {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 6px 12px;
	border-radius: 999px;
	border: 1px solid var(--default-line);
	background: #fff;
	cursor: pointer;
	color: var(--main-text-color);
	font-size: 13px;
	font-weight: 600;
}
.ref-rating-chip span .fa-star {
	color: #ffc107;
}
.ref-rating-chip input:checked + span {
	background: rgba(0, 150, 136, 0.14);
	border-color: var(--primary);
	color: var(--primary);
}
.ref-rating-chip input:focus + span,
.ref-rating-chip input:focus-visible + span {
	outline: 2px solid var(--primary);
	outline-offset: 2px;
}
.ref-rating-preview-note {
	margin-top: 12px;
}
[data-theme="dark"] .ref-rating-preview-note.alert-info {
	background: rgba(0, 150, 136, 0.22);
	border-color: #02b3a2;
	color: #fff;
}
[data-theme="dark"] .ref-rating-preview-note.alert-warning {
	background: #333;
	border-color: #3a3a3a;
	color: #fff;
}
.ref-rating-actions {
	display: flex;
	justify-content: flex-end;
	gap: 8px;
	flex-wrap: wrap;
	margin-top: 16px;
}
@media (max-width: 767px) {
	.ref-rating-label {
		flex-direction: column;
		align-items: stretch;
	}
	.ref-rating-label__meta {
		flex-basis: auto;
	}
	.ref-rating-actions .btn {
		flex: 1 1 auto;
	}
}
[data-theme="dark"] .ref-rating-kicker__icon {
	background: rgba(0, 150, 136, 0.22);
	color: #02b3a2;
}
[data-theme="dark"] .ref-rating-section {
	background: #262626;
	border-color: #3a3a3a;
}
[data-theme="dark"] .ref-rating-stepper {
	background: #1c1b1b;
	border-color: #3a3a3a;
}
[data-theme="dark"] .ref-rating-stepper input {
	color: #fff;
	border-color: #3a3a3a;
}
[data-theme="dark"] .ref-rating-stepper__btn:hover,
[data-theme="dark"] .ref-rating-stepper__btn:focus {
	background: rgba(0, 150, 136, 0.22);
}
[data-theme="dark"] .ref-rating-label {
	background: #333;
	border-color: #3a3a3a;
}
[data-theme="dark"] .ref-rating-label .form-control {
	background: #262626;
	border-color: #3a3a3a;
	color: #fff;
}
[data-theme="dark"] .ref-rating-label__count,
[data-theme="dark"] .ref-rating-label__more {
	color: #c2c2c2;
}
[data-theme="dark"] .ref-rating-chip span {
	background: #333;
	border-color: #3a3a3a;
	color: #fff;
}
[data-theme="dark"] .ref-rating-chip input:checked + span {
	background: rgba(0, 150, 136, 0.28);
	border-color: #02b3a2;
	color: #02b3a2;
}





/* Leave list name cell, week pager, export toolbar */
.leave-list-name {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 8px;
    text-align: left;
    width: 100%;
    max-width: 100%;
}

.leave-list-name__photo {
    width: 20px;
    height: 20px;
    border-radius: 50%;
    flex-shrink: 0;
    object-fit: cover;
}

.leave-list-name a,
.leave-list-name a:visited {
    color: var(--primary);
    text-decoration: none;
    background-color: transparent;
    -webkit-text-decoration-skip: objects;
}

.leave-list-name a:hover,
.leave-list-name a:focus {
    color: var(--a-href-hover);
    text-decoration: underline;
}

th.leave-list-name-cell,
.table th.leave-list-name-cell,
table.dataTable thead th.leave-list-name-cell,
div.dataTables_scrollHead th.leave-list-name-cell {
    text-align: center !important;
    vertical-align: middle;
}

td.leave-list-name-cell,
.table td.leave-list-name-cell,
table.dataTable tbody td.leave-list-name-cell {
    text-align: left !important;
    vertical-align: middle;
}

.leave-list-toolbar {
    margin-bottom: 8px;
    position: relative;
    z-index: 2;
}

.leave-grp-view-btns {
    position: relative;
    z-index: 3;
}

.leave-week-pager {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 12px 0 16px;
    padding: 6px 8px;
    border: 1px solid var(--default-line, #dee2e6);
    border-radius: 8px;
    background: #fff;
}

.leave-week-pager__label {
    flex: 1;
    text-align: center;
    font-weight: 700;
    min-width: 0;
}

.leave-week-pager__btn {
    min-width: 42px;
    line-height: 1.2;
}

.leave-grp-section-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin: 18px 0 10px;
}

@media print {
    .leave-reports-doc {
        page-break-after: always;
        break-after: page;
    }

    .leave-reports-doc:last-child {
        page-break-after: auto;
        break-after: auto;
    }
}

[data-theme="dark"] .leave-week-pager {
    background: #333;
    border-color: #444;
}

[data-theme="dark"] .leave-week-pager__label {
    color: #7ee0d4;
}

[data-theme="dark"] .leave-week-pager a.btn-default.leave-week-pager__btn {
    color: #fff;
    background: #262626;
    border-color: #3a3a3a;
}

[data-theme="dark"] .leave-week-pager a.btn-default.leave-week-pager__btn:hover,
[data-theme="dark"] .leave-week-pager a.btn-default.leave-week-pager__btn:focus {
    color: #fff;
    background: #444;
    border-color: #009688;
}

/* Group View week calendar */
.leave-grp-list-pane {
    display: none;
}

.leave-grp-view--list #leaveGrpListPane {
    display: block;
}

.leave-grp-view--list #leaveGrpCalPane {
    display: none;
}

.leave-grp-view--calendar #leaveGrpCalPane {
    display: block;
}

.leave-grp-view--calendar #leaveGrpListPane {
    display: none;
}

.leave-grp-cal {
    margin-top: 8px;
}

.leave-grp-cal__scroll {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

.leave-grp-cal__grid {
    display: grid;
    grid-template-columns: repeat(7, minmax(0, 1fr));
    gap: 8px;
    min-width: 720px;
}

.leave-grp-cal__day {
    min-height: 160px;
    border: 1px solid var(--default-line, #dee2e6);
    border-radius: 8px;
    background: #fff;
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.leave-grp-cal__day.is-weekend {
    background: #f7f7f7;
}

.leave-grp-cal__day.is-today {
    border-color: #009688;
    box-shadow: inset 0 0 0 1px #009688;
}

.leave-grp-cal__head {
    display: flex;
    align-items: baseline;
    flex-wrap: wrap;
    gap: 4px 6px;
    padding: 8px 8px 6px;
    border-bottom: 1px solid var(--default-line, #dee2e6);
}

.leave-grp-cal__dow {
    font-weight: 700;
    font-size: 0.8rem;
}

.leave-grp-cal__date {
    font-size: 0.8rem;
    color: #6c757d;
}

.leave-grp-cal__today {
    font-size: 0.68rem;
    font-weight: 700;
    color: #009688;
    text-transform: uppercase;
    letter-spacing: 0.02em;
}

.leave-grp-cal__count {
    margin-left: auto;
    font-size: 0.7rem;
    font-weight: 700;
    color: #fff;
    background: #009688;
    border-radius: 10px;
    padding: 0 6px;
    line-height: 1.5;
}

.leave-grp-cal__body {
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding: 8px;
    flex: 1;
}

.leave-grp-cal__chip {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 6px;
    width: 100%;
    border: 2px solid transparent;
    border-radius: 6px;
    padding: 4px 6px;
    font-size: 0.75rem;
    line-height: 1.25;
    text-align: left;
    cursor: pointer;
    color: #333;
    background: rgba(180, 180, 255, 0.55);
}

.leave-grp-cal__chip:hover,
.leave-grp-cal__chip:focus {
    outline: none;
    filter: brightness(0.97);
}

.leave-grp-cal__chip-name {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-weight: 700;
}

.leave-grp-cal__chip-type {
    flex-shrink: 0;
    font-weight: 700;
    opacity: 0.85;
}

.leave-grp-cal__chip--al {
    background: var(--success-light, #c3e6cb);
    border-color: var(--success, #28a745);
}

.leave-grp-cal__chip--el {
    background: var(--info-light, #bee5eb);
    border-color: var(--info, #17a2b8);
}

.leave-grp-cal__chip--up {
    background: var(--danger-light, #f5c6cb);
    border-color: var(--danger, #dc3545);
}

.leave-grp-cal__chip--mc {
    background: var(--primary-light, #b8e2de);
    border-color: var(--primary, #009688);
}

.leave-grp-cal__chip--rl {
    background: rgba(247, 255, 102, 0.55);
    border-color: rgba(255, 225, 0, 0.9);
}

.leave-grp-cal__chip--mt {
    background: rgba(202, 116, 216, 0.55);
    border-color: rgba(157, 49, 173, 0.9);
}

.leave-grp-cal__chip--cl {
    background: rgba(255, 128, 202, 0.55);
    border-color: rgba(255, 86, 106, 0.9);
}

.leave-grp-cal__chip--to {
    background: rgba(156, 242, 255, 0.55);
    border-color: rgba(0, 199, 230, 0.9);
}

.leave-grp-cal__chip--ts {
    background: rgba(203, 223, 159, 0.55);
    border-color: rgba(166, 201, 91, 0.9);
}

.leave-grp-cal__chip--other {
    background: rgba(180, 180, 255, 0.55);
    border-color: rgba(100, 100, 220, 0.9);
}

.leave-grp-cal__empty {
    text-align: center;
    padding: 28px 12px;
    color: #6c757d;
    border: 1px dashed var(--default-line, #dee2e6);
    border-radius: 8px;
    background: #fff;
}

.leave-grp-cal__legend {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px 14px;
    margin-top: 12px;
    font-size: 0.8rem;
}

.leave-grp-cal__legend-title {
    font-weight: 700;
    margin-right: 4px;
}

.leave-grp-cal__legend-item {
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.leave-grp-cal__legend-swatch {
    width: 14px;
    height: 14px;
    border-radius: 4px;
    border: 2px solid transparent;
    display: inline-block;
}

.leave-grp-cal__chip.is-type-hidden {
    display: none !important;
}

.leave-grp-cal__legend-item.is-clickable {
    cursor: pointer;
    border: 0;
    background: transparent;
    padding: 2px 4px;
    margin: 0;
    font: inherit;
    color: inherit;
    border-radius: 4px;
}

.leave-grp-cal__legend-item.is-clickable:hover .leave-grp-cal__legend-label,
.leave-grp-cal__legend-item.is-clickable:focus .leave-grp-cal__legend-label {
    color: var(--primary, #009688);
}

.leave-grp-cal__legend-item.is-clickable:focus {
    outline: 1px solid var(--primary, #009688);
    outline-offset: 2px;
}

.leave-grp-cal__legend-item.is-hidden {
    opacity: 0.45;
}

.leave-grp-cal__legend-item.is-hidden .leave-grp-cal__legend-label {
    text-decoration: line-through;
}

.leave-grp-cal-pop__row {
    display: flex;
    gap: 8px;
    margin: 0 0 4px;
    font-size: 0.85rem;
}

.leave-grp-cal-pop__row:last-child {
    margin-bottom: 0;
}

.leave-grp-cal-pop__k {
    flex: 0 0 72px;
    color: #6c757d;
    font-weight: 600;
}

.leave-grp-cal-pop__v {
    min-width: 0;
    word-break: break-word;
}

.leave-grp-cal-popover {
    max-width: 280px;
}

[data-theme="dark"] .leave-grp-cal__day {
    background: #333;
    border-color: #3a3a3a;
}

[data-theme="dark"] .leave-grp-cal__day.is-weekend {
    background: #2d2d2d;
}

[data-theme="dark"] .leave-grp-cal__day.is-today {
    border-color: #009688;
}

[data-theme="dark"] .leave-grp-cal__head {
    border-bottom-color: #3a3a3a;
}

[data-theme="dark"] .leave-grp-cal__dow {
    color: #fff;
}

[data-theme="dark"] .leave-grp-cal__date {
    color: #adb5bd;
}

[data-theme="dark"] .leave-grp-cal__today {
    color: #02b3a2;
}

[data-theme="dark"] .leave-grp-cal__chip {
    color: #1F1F1F;
}

[data-theme="dark"] .leave-grp-cal__empty {
    background: #333;
    border-color: #3a3a3a;
    color: #c2c2c2;
}

[data-theme="dark"] .leave-grp-cal__legend {
    color: #fff;
}

[data-theme="dark"] .leave-grp-cal__legend-item.is-clickable:hover .leave-grp-cal__legend-label,
[data-theme="dark"] .leave-grp-cal__legend-item.is-clickable:focus .leave-grp-cal__legend-label {
    color: #02b3a2;
}

[data-theme="dark"] .leave-grp-cal-popover {
    background: #333;
    border-color: #3a3a3a;
    color: #fff;
}

[data-theme="dark"] .leave-grp-cal-popover .popover-header {
    background: #262626;
    border-bottom-color: #3a3a3a;
    color: #fff;
}

[data-theme="dark"] .leave-grp-cal-popover .popover-body {
    color: #fff;
}

[data-theme="dark"] .leave-grp-cal-popover .arrow::after {
    border-top-color: #333;
    border-bottom-color: #333;
}

[data-theme="dark"] .leave-grp-cal-pop__k {
    color: #adb5bd;
}

[data-theme="dark"] .leave-grp-cal-pop__v {
    color: #fff;
}

[data-theme="dark"] .leave-list-name a,
[data-theme="dark"] .leave-list-name a:visited {
    color: var(--primary);
    text-decoration: none;
    background-color: transparent;
}

[data-theme="dark"] .leave-list-name a:hover,
[data-theme="dark"] .leave-list-name a:focus {
    color: #02d9c4;
    text-decoration: underline;
}

/* Staff leave record summary (Details hero staff, Edit/Add type inputs, charts) */
.leave-sum .leave-app-head {
    align-items: center;
    flex-wrap: wrap;
}

.leave-sum__staff {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-left: auto;
    text-align: right;
    min-width: 0;
}

.leave-sum__staff img {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    object-fit: cover;
    border: 2px solid #e0e0e0;
    flex-shrink: 0;
}

.leave-sum__staff-nick {
    display: block;
    font-size: 0.95rem;
    font-weight: 700;
    color: #24302f;
    line-height: 1.2;
}

.leave-sum__staff-name {
    display: block;
    margin-top: 2px;
    font-size: 0.78rem;
    color: var(--secondary, #6c757d);
}

.leave-sum__types.leave-sum__types--edit {
    grid-template-columns: 1fr;
}

.leave-sum__types--edit .leave-sum__type {
    grid-template-columns: auto minmax(0, 1fr) 5.5rem;
    min-width: 0;
    cursor: default;
    align-items: center;
}

.leave-sum__types--edit .leave-sum__type-name {
    min-width: 0;
    line-height: 1.25;
    white-space: normal;
    overflow-wrap: break-word;
}

.leave-sum__types--edit .leave-sum__type-input,
.leave-sum__type-input {
    display: block;
    width: 100%;
    min-width: 0;
    max-width: 100%;
    height: 34px;
    padding: 4px 8px;
    text-align: right;
    box-sizing: border-box;
}

@media (min-width: 768px) {
    .leave-sum__types.leave-sum__types--edit {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .leave-sum__types--edit .leave-sum__type {
        grid-template-columns: auto minmax(0, 1fr) 5rem;
    }
}

@media (max-width: 767.98px) {
    .leave-sum__types--edit .leave-sum__type {
        padding: 10px 12px;
    }

    .leave-sum__types--edit .leave-sum__type-input {
        height: 40px;
    }
}

.leave-sum__process {
    margin-bottom: 14px;
}

.leave-sum-charts {
    margin-bottom: 14px;
    padding: 14px 16px;
}

.leave-sum-charts__split {
    display: flex;
    align-items: stretch;
    gap: 12px;
}

.leave-sum-charts__pane {
    flex: 1;
    min-width: 0;
    background: #f8fafb;
    border: 1px solid #eef2f4;
    border-radius: 10px;
    padding: 12px;
}

.leave-sum-charts__sub {
    margin: 0 0 10px;
    font-size: 0.92rem;
    font-weight: 700;
    color: #24302f;
}

.leave-sum-charts__canvas {
    position: relative;
    height: 220px;
}

.leave-sum-charts__canvas--line {
    height: 260px;
}

.leave-sum-charts__note {
    margin: 8px 0 0;
    font-size: 0.78rem;
    font-style: italic;
    color: var(--secondary, #6c757d);
}

.leave-sum-charts__legend {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 6px 10px;
    margin-top: 8px;
}

.leave-sum-charts__legend-top {
    display: flex;
    align-items: center;
    gap: 5px;
    margin-bottom: 2px;
    font-size: 0.72rem;
}

.leave-sum-charts__legend-dot {
    display: inline-block;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    flex-shrink: 0;
}

.leave-sum-charts__legend-label {
    flex: 1;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    color: var(--secondary, #6c757d);
}

.leave-sum-charts__legend-val {
    flex-shrink: 0;
    font-weight: 700;
    font-size: 0.72rem;
    color: #24302f;
}

.leave-sum-charts__legend-bar-wrap {
    height: 6px;
    background: rgba(0, 0, 0, 0.07);
    border-radius: 3px;
    overflow: hidden;
}

.leave-sum-charts__legend-bar {
    height: 100%;
    border-radius: 3px;
}

.leave-sum-charts__legend-cell.is-clickable {
    cursor: pointer;
    border: 0;
    background: transparent;
    padding: 2px 0;
    margin: 0;
    width: 100%;
    text-align: left;
    font: inherit;
    color: inherit;
    border-radius: 4px;
}

.leave-sum-charts__legend-cell.is-clickable:hover .leave-sum-charts__legend-label,
.leave-sum-charts__legend-cell.is-clickable:focus .leave-sum-charts__legend-label {
    color: var(--primary, #009688);
}

.leave-sum-charts__legend-cell.is-clickable:focus {
    outline: 1px solid var(--primary, #009688);
    outline-offset: 2px;
}

.leave-sum-charts__legend-cell.is-hidden {
    opacity: 0.45;
}

.leave-sum-charts__legend-cell.is-hidden .leave-sum-charts__legend-label {
    text-decoration: line-through;
}

@media (max-width: 767px) {
    .leave-sum-charts__split {
        flex-direction: column;
    }

    .leave-sum__staff {
        margin-left: 0;
        width: 100%;
        text-align: left;
    }
}

[data-theme="dark"] .leave-sum__staff img {
    border-color: #444;
}

[data-theme="dark"] .leave-sum__staff-nick {
    color: #e2e8f0;
}

[data-theme="dark"] .leave-sum__staff-name {
    color: #a0aec0;
}

[data-theme="dark"] .leave-sum-charts__pane {
    background: #2d2d2d;
    border-color: #444;
}

[data-theme="dark"] .leave-sum-charts__sub,
[data-theme="dark"] .leave-sum-charts__legend-val {
    color: #e2e8f0;
}

[data-theme="dark"] .leave-sum-charts__note,
[data-theme="dark"] .leave-sum-charts__legend-label {
    color: #a0aec0;
}

[data-theme="dark"] .leave-sum-charts__legend-bar-wrap {
    background: rgba(255, 255, 255, 0.1);
}

[data-theme="dark"] .leave-sum-charts__legend-cell.is-clickable:hover .leave-sum-charts__legend-label,
[data-theme="dark"] .leave-sum-charts__legend-cell.is-clickable:focus .leave-sum-charts__legend-label {
    color: #02b3a2;
}

.leave-sum__taken-action {
    margin-left: auto;
    flex: 0 0 auto;
    align-self: center;
    white-space: nowrap;
}

.leave-staff-list__hero.tile {
    margin-bottom: 16px;
}

.leave-staff-list__hero .leave-app-head {
    align-items: center;
    flex-wrap: wrap;
}

.leave-staff-list__meta {
    margin-bottom: 10px;
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.leave-staff-list__kpis {
    margin-top: 4px;
}

@media (max-width: 767px) {

    .leave-staff-list__meta,
    .leave-staff-list__kpis {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .leave-sum__taken-action {
        margin-left: 0;
        width: 100%;
        text-align: center;
    }
}

[data-theme="dark"] .leave-staff-list__hero.tile {
    background: #262626;
    border-color: #3a3a3a;
}

[data-theme="dark"] .leave-staff-list__hero .leave-app-head {
    border-bottom-color: #3a3a3a;
}

[data-theme="dark"] .leave-staff-list__table.tile {
    background: #262626;
    border-color: #3a3a3a;
}

.leave-home-admin__kpis {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    margin: 0;
}

.leave-home-admin__kpi-pane {
    flex: 2;
}

.leave-home-admin__to-chart {
    flex: 1;
    max-width: 360px;
}

a.leave-home-admin__kpi-link,
a.leave-overview__kpi-link {
    color: inherit;
    text-decoration: none;
    display: block;
}

a.leave-home-admin__kpi-link:hover,
a.leave-home-admin__kpi-link:focus,
a.leave-overview__kpi-link:hover,
a.leave-overview__kpi-link:focus {
    border-color: #009688;
    text-decoration: none;
    outline: none;
}

@media (max-width: 991.98px) {
    .leave-home-admin__to-chart {
        max-width: none;
    }
}

@media (max-width: 575.98px) {
    .leave-home-admin__kpis {
        grid-template-columns: 1fr;
    }
}

[data-theme="dark"] a.leave-home-admin__kpi-link:hover,
[data-theme="dark"] a.leave-home-admin__kpi-link:focus,
[data-theme="dark"] a.leave-overview__kpi-link:hover,
[data-theme="dark"] a.leave-overview__kpi-link:focus {
    border-color: #7ee0d4;
    background: #333;
}

.leave-overview__balance-kpis {
    margin-bottom: 14px;
}

a.leave-overview__kpi-card {
    color: inherit;
    text-decoration: none;
}

a.leave-overview__kpi-card:hover,
a.leave-overview__kpi-card:focus {
    color: inherit;
    text-decoration: none;
    outline: none;
}

.leave-overview__kpi-sub {
    display: inline-block;
    margin-top: 4px;
    font-size: 13px;
    color: #6c757d;
}

.leave-overview__kpis {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    margin: 0;
}

.leave-overview__kpi-pane {
    flex: 2;
}

.leave-overview__to-chart {
    flex: 1;
    max-width: 360px;
}

@media (max-width: 991.98px) {
    .leave-overview__to-chart {
        max-width: none;
    }
}

@media (max-width: 575.98px) {
    .leave-overview__kpis {
        grid-template-columns: 1fr;
    }
}

[data-theme="dark"] a.leave-overview__kpi-card {
    color: inherit;
}

[data-theme="dark"] .leave-overview__kpi-sub {
    color: #94a3b8;
}

/* Setting > Field Settings: section heading per work order page */
.fs-mode-section-title {
	margin-bottom: 0.35rem;
	font-size: 0.72rem;
	font-weight: 700;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--primary, #009688);
}
.fs-mode-section-title a,
.fs-mode-section-title a:hover {
	color: inherit;
}
.fs-tabs {
	display: flex;
	flex-wrap: wrap;
	gap: 4px;
	margin-bottom: 14px;
	padding: 4px;
	border-radius: 10px;
	background: #f1f3f3;
}
.fs-tab {
	flex: 1 1 30%;
	min-width: 0;
	display: flex;
	flex-direction: column;
	align-items: center;
	padding: 6px 4px 5px;
	border: 0;
	border-radius: 8px;
	background: transparent;
	color: #666;
	font-size: 0.8rem;
	font-weight: 700;
	line-height: 1.2;
	cursor: pointer;
	transition: background-color 0.15s, color 0.15s, box-shadow 0.15s;
}
.fs-tab:hover {
	color: var(--primary, #009688);
}
.fs-tab:focus {
	outline: none;
}
.fs-tab:focus-visible {
	outline: 2px solid rgba(var(--primary-rgb, 0, 150, 136), 0.5);
	outline-offset: 1px;
}
.fs-tab.active {
	background: #fff;
	color: var(--primary, #009688);
	box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12);
}
.fs-tab-count {
	margin-top: 2px;
	font-size: 0.65rem;
	font-weight: 400;
	color: #888;
	white-space: nowrap;
}
.fs-tab.active .fs-tab-count {
	color: var(--primary, #009688);
}
.fs-tab-pane {
	display: none;
}
.fs-tab-pane.active {
	display: block;
}
[data-theme="dark"] .fs-tabs {
	background: #262626;
}
[data-theme="dark"] .fs-tab {
	color: #bbb;
}
[data-theme="dark"] .fs-tab.active {
	background: #333;
	color: var(--primary, #009688);
	box-shadow: none;
}
[data-theme="dark"] .fs-tab-count {
	color: #999;
}

/* Field Settings: View / Edit sub-tabs (Attend, Action, Verify, Confirm) */
.fs-subtabs {
	display: inline-flex;
	flex-wrap: wrap;
	gap: 4px;
	margin: 0 0 12px;
	padding: 3px;
	border-radius: 8px;
	background: #e8ebeb;
}
.fs-subtab {
	border: 0;
	border-radius: 6px;
	padding: 5px 14px;
	background: transparent;
	color: #666;
	font-size: 0.78rem;
	font-weight: 700;
	cursor: pointer;
	transition: background-color 0.15s, color 0.15s, box-shadow 0.15s;
}
.fs-subtab:hover {
	color: var(--primary, #009688);
}
.fs-subtab:focus {
	outline: none;
}
.fs-subtab:focus-visible {
	outline: 2px solid rgba(var(--primary-rgb, 0, 150, 136), 0.5);
	outline-offset: 1px;
}
.fs-subtab.active {
	background: #fff;
	color: var(--primary, #009688);
	box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
}
.fs-subpane {
	display: none;
}
.fs-subpane.active {
	display: block;
}
[data-theme="dark"] .fs-subtabs {
	background: #1c1b1b;
}
[data-theme="dark"] .fs-subtab {
	color: #bbb;
}
[data-theme="dark"] .fs-subtab.active {
	background: #333;
	color: var(--primary, #009688);
	box-shadow: none;
}

.cm-fs-section-toolbar {
	gap: 8px;
}
.cm-fs-default-btn {
	border-color: #ced4da;
	color: #555;
	font-weight: 600;
	white-space: nowrap;
}
.cm-fs-default-btn:hover,
.cm-fs-default-btn:focus {
	border-color: var(--primary, #009688);
	color: var(--primary, #009688);
	background: transparent;
}
[data-theme="dark"] .cm-fs-default-btn {
	border-color: #3a3a3a;
	color: #ccc;
	background: #333;
}
[data-theme="dark"] .cm-fs-default-btn:hover,
[data-theme="dark"] .cm-fs-default-btn:focus {
	border-color: var(--primary, #009688);
	color: var(--primary, #009688);
	background: #333;
}

/* Setting > Field Settings: field cards with Show / Hide and Required / Optional chips */
.row[data-cm-section] {
	margin-left: -5px;
	margin-right: -5px;
	container-type: inline-size;
}
@container (max-width: 300px) {
	.row[data-cm-section] > .cm-chip-col {
		flex: 0 0 100%;
		max-width: 100%;
	}
}
.row[data-cm-section] > .cm-chip-col {
	padding-left: 5px;
	padding-right: 5px;
	margin-bottom: 10px !important;
}
.cm-chip-col {
	display: flex;
}
.cm-chip-card {
	flex: 1 1 auto;
	min-width: 0;
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	gap: 8px;
	padding: 10px 11px;
	border: 1px solid #e3e3e3;
	border-radius: 12px;
	transition: border-color 0.2s, box-shadow 0.2s, opacity 0.2s;
}
.cm-chip-card:hover {
	border-color: rgba(var(--primary-rgb, 0, 150, 136), 0.45);
	box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
}
.cm-chip-card-title {
	font-size: 0.875rem;
	font-weight: 700;
	line-height: 1.3;
	color: #333;
}
.cm-chip-row {
	display: flex;
	flex-wrap: wrap;
	gap: 5px;
}
.cm-chip {
	position: relative;
	display: inline-flex;
	cursor: pointer;
	user-select: none;
}
.cm-chip-input {
	position: absolute;
	opacity: 0;
	width: 1px;
	height: 1px;
	pointer-events: none;
}
.cm-chip-on,
.cm-chip-off,
.cm-chip-static {
	display: inline-flex;
	align-items: center;
	gap: 4px;
	padding: 3px 8px;
	border-radius: 14px;
	border: 1px solid #d6d6d6;
	background: #fff;
	color: #777;
	font-size: 0.7rem;
	font-weight: 700;
	line-height: 1.4;
	white-space: nowrap;
	transition: background-color 0.2s, border-color 0.2s, color 0.2s;
}
.field-checkbox-container.cm-field-is-display {
	opacity: 0.92;
	border-style: dashed;
}
.cm-chip-on {
	display: none;
}
.cm-chip-input:checked ~ .cm-chip-on {
	display: inline-flex;
}
.cm-chip-input:checked ~ .cm-chip-off {
	display: none;
}
.cm-chip-show {
	color: var(--primary, #009688);
	border-color: var(--primary, #009688);
	background: rgba(var(--primary-rgb, 0, 150, 136), 0.08);
}
.cm-chip-face-show {
	color: var(--primary, #009688);
	border-color: var(--primary, #009688);
	background: rgba(var(--primary-rgb, 0, 150, 136), 0.08);
}
.cm-chip-display {
	color: #6f42c1;
	border-color: #6f42c1;
	background: rgba(111, 66, 193, 0.08);
}
.cm-chip-editable {
	color: var(--primary, #009688);
	border-color: rgba(var(--primary-rgb, 0, 150, 136), 0.45);
}
.cm-chip-req {
	color: #fff;
	border-color: var(--danger, #dc3545);
	background: var(--danger, #dc3545);
}
.cm-chip-req .fa {
	font-size: 0.6rem;
}
.cm-chip:hover .cm-chip-off {
	border-color: #bdbdbd;
	color: #555;
}
.cm-chip-input:focus-visible ~ span {
	outline: 2px solid rgba(var(--primary-rgb, 0, 150, 136), 0.5);
	outline-offset: 1px;
}
.cm-chip-input:disabled ~ span {
	opacity: 0.45;
	cursor: not-allowed;
}
.cm-chip-static {
	border-style: dashed;
	background: transparent;
	color: #888;
	cursor: help;
}
.cm-chip-counter {
	font-size: 0.72rem;
	font-weight: 400;
	letter-spacing: 0;
	text-transform: none;
	color: #777;
}
.cm-chip-counter b {
	color: var(--primary, #009688);
}
.field-checkbox-container.cm-field-is-hidden {
	border-style: dashed !important;
	background-color: #f1f1f1;
}
.cm-field-is-hidden .cm-chip-card-title {
	color: #aaa;
}
[data-theme="dark"] .cm-chip-card {
	border-color: #3a3a3a !important;
}
[data-theme="dark"] .cm-chip-card:hover {
	border-color: rgba(var(--primary-rgb, 0, 150, 136), 0.6) !important;
	box-shadow: none;
}
[data-theme="dark"] .cm-chip-card-title {
	color: #fff;
}
[data-theme="dark"] .cm-chip-off,
[data-theme="dark"] .cm-chip-static {
	background: #333;
	border-color: #3a3a3a;
	color: #bbb;
}
[data-theme="dark"] .cm-chip-show {
	background: rgba(var(--primary-rgb, 0, 150, 136), 0.18);
}
[data-theme="dark"] .cm-chip-counter {
	color: #bbb;
}
[data-theme="dark"] .field-checkbox-container.cm-field-is-hidden {
	background-color: #262626;
}
[data-theme="dark"] .cm-field-is-hidden .cm-chip-card-title {
	color: #777;
}
.cm-chip-group {
	flex: 0 0 100%;
	max-width: 100%;
}
.cm-chip-group-title {
	font-size: 0.75rem;
	font-weight: 700;
	letter-spacing: 0.02em;
	text-transform: uppercase;
	color: var(--primary, #009688);
	border-bottom: 1px solid rgba(var(--primary-rgb, 0, 150, 136), 0.25);
	padding-bottom: 4px;
	margin-top: 4px;
}
[data-theme="dark"] .cm-chip-group-title {
	color: var(--primary, #4db6ac);
	border-bottom-color: rgba(77, 182, 172, 0.35);
}

/* Work order forms: field hidden by Setting > Field Settings (kept in DOM so values still submit) */
.cm-field-hidden {
	display: none !important;
}

/* Display-only: visible but not editable (Field Settings → Display) */
.cm-field-display-only {
	position: relative;
}
.cm-field-display-only input:not([type="hidden"]),
.cm-field-display-only select,
.cm-field-display-only textarea,
.cm-field-display-only button:not(.cm-display-allow),
.cm-field-display-only .btn,
.cm-field-display-only .Select2,
.cm-field-display-only .Select21,
.cm-field-display-only .select2-container,
.cm-field-display-only .animated-checkbox,
.cm-field-display-only label.btn,
.cm-field-display-only [contenteditable="true"] {
	pointer-events: none !important;
	cursor: default !important;
}
.cm-field-display-only input:not([type="hidden"]),
.cm-field-display-only select,
.cm-field-display-only textarea {
	background-color: #f3f3f3 !important;
	opacity: 0.95;
}
.cm-field-display-only .select2-selection {
	background-color: #f3f3f3 !important;
	pointer-events: none !important;
}
[data-theme="dark"] .cm-field-display-only input:not([type="hidden"]),
[data-theme="dark"] .cm-field-display-only select,
[data-theme="dark"] .cm-field-display-only textarea,
[data-theme="dark"] .cm-field-display-only .select2-selection {
	background-color: #2a2a2a !important;
}
[data-theme="dark"] .cm-chip-display {
	color: #c4a8ff;
	border-color: #9b7dd4;
	background: rgba(156, 125, 212, 0.15);
}
[data-theme="dark"] .field-checkbox-container.cm-field-is-display {
	border-color: #5a4a72;
}

/* Dark mode .alert-success sets dark green text. Notify toasts keep the success fill, so the label stays the theme white. */
[data-theme="dark"] .notify-alert.alert-success,
[data-theme="dark"] .notify-alert.alert-success strong,
[data-theme="dark"] .notify-alert.alert-success [data-notify="title"],
[data-theme="dark"] .notify-alert.alert-success [data-notify="message"],
[data-theme="dark"] .notify-alert.alert-success [data-notify="icon"],
[data-theme="dark"] .notify-alert.alert-success .close {
	color: var(--white, #fff);
}

/* CM "Mark Shutdown" note (Corrective / Assets CM forms, cm_shutdown_downtime_helpers.php)
   Outer wrapper is spacing-only; tint lives on .cm-sd-info / .cm-sd-legacy so it does not
   look like a danger alert around the info text. */
.cm-sd-block {
	margin-top: 8px;
	padding: 0;
	border: none;
	border-radius: 0;
	background: transparent;
}
.cm-sd-block-label {
	font-size: 12px;
	font-weight: 700;
	color: #495057;
	margin-bottom: 8px;
}
.cm-sd-options {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 10px;
}
.cm-sd-option {
	display: flex;
	align-items: flex-start;
	gap: 8px;
	margin: 0;
	padding: 10px 12px;
	border: 1.5px solid #e5e9f2;
	border-radius: 12px;
	background: #fff;
	cursor: pointer;
	transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.cm-sd-option:hover {
	border-color: var(--primary-light, #b8e2de);
}
.cm-sd-option.is-selected {
	border-color: var(--primary, #009688);
	box-shadow: 0 0 0 3px rgba(var(--primary-rgb, 0, 150, 136), 0.12);
}
.cm-sd-option-input {
	margin-top: 3px;
	flex-shrink: 0;
	accent-color: var(--primary, #009688);
}
.cm-sd-option-input:focus-visible {
	outline: 2px solid var(--primary, #009688);
	outline-offset: 2px;
}
.cm-sd-option-body {
	display: flex;
	flex-direction: column;
	gap: 3px;
	min-width: 0;
}
.cm-sd-option-title {
	font-weight: 700;
	font-size: 13px;
	color: #212529;
}
.cm-sd-option-title .fa {
	color: var(--primary, #009688);
}
.cm-sd-option-help {
	font-size: 11.5px;
	line-height: 1.4;
	color: var(--secondary, #6c757d);
}
.cm-sd-legacy,
.cm-sd-info {
	margin-top: 0;
	padding: 7px 10px;
	border-radius: 10px;
	font-size: 11.5px;
	line-height: 1.4;
}
.cm-sd-legacy {
	background: #fff8e6;
	color: #8a5a00;
}
.cm-sd-legacy-detail {
	display: block;
	margin-top: 3px;
	font-weight: 400;
}
.cm-sd-info {
	background: rgba(var(--primary-rgb, 0, 150, 136), 0.08);
	color: #2f4f4b;
}
.cm-sd-info .fa {
	color: var(--primary, #009688);
}
@media (max-width: 575.98px) {
	.cm-sd-options {
		grid-template-columns: 1fr;
	}
}

/* Read-only shutdown type next to the CM Event Date */
.cm-sd-badge {
	display: inline-block;
	padding: 1px 8px;
	border-radius: 999px;
	font-size: 11px;
	font-weight: 700;
	vertical-align: middle;
	background: var(--danger-light, #f5c6cb);
	color: #8b1d29;
}
.cm-sd-badge--repair_only {
	background: #e9ecef;
	color: #495057;
}
.cm-sd-badge-link {
	font-size: 11px;
	font-weight: 600;
	white-space: nowrap;
	color: var(--primary, #009688);
}
.cm-sd-badge-link:hover {
	color: var(--a-href-hover, #004a43);
}

/* Asset Downtime page: rows created by a CM */
.dt-cm-pill,
.dt-cm-status-pill {
	display: inline-flex;
	align-items: center;
	gap: 4px;
	padding: 2px 9px;
	border-radius: 999px;
	font-size: 11px;
	font-weight: 700;
	font-style: normal;
	white-space: nowrap;
}
.dt-cm-pill {
	background: var(--primary, #009688);
	color: #fff;
}
.dt-cm-pill a,
.dt-cm-pill a:hover {
	color: #fff;
	text-decoration: underline;
}
.dt-cm-status-pill {
	background: var(--info-light, #bee5eb);
	color: #0c5460;
}
.dt-cm-status-pill--done {
	background: var(--primary-light, #b8e2de);
	color: #00564e;
}
.dt-cm-head-pills {
	display: inline-flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 6px;
}
.dt-cm-lock-note {
	font-size: 11px;
	color: var(--secondary, #6c757d);
	white-space: nowrap;
}
.downtime-row--cm-locked {
	border-left-color: var(--primary, #009688);
}

/* CM Action — Option B Downtime Log embed (under Working Time)
 * Row layout mirrored from Asset_Downtime.php page styles (those stay page-local).
 */
.cm-dt-embed {
	border: 1px solid #e9edf5;
	border-radius: 10px;
	padding: 12px 14px;
	background: #fff;
}
.cm-dt-embed__title {
	font-size: 14px;
	color: #212529;
}
.cm-dt-embed__title-row {
	gap: 8px;
	margin-bottom: 2px;
}
.cm-dt-embed__subtitle {
	display: block;
	margin-top: 2px;
	max-width: 36rem;
}
.cm-dt-embed__head {
	gap: 8px;
}
.cm-dt-embed__actions {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: flex-end;
}
.cm-dt-embed__actions .btn {
	margin-left: 4px;
	margin-bottom: 4px;
}
/* Plain text link (same idea as .cm-sd-badge-link) — top-right of DT Log card, not a pill button */
.cm-dt-embed-view-link {
	font-size: 11px;
	font-weight: 600;
	white-space: nowrap;
	color: var(--primary, #009688);
	text-decoration: none;
	line-height: 1.2;
}
.cm-dt-embed-view-link:hover,
.cm-dt-embed-view-link:focus {
	color: var(--a-href-hover, #004a43);
	text-decoration: underline;
}
[data-theme="dark"] .cm-dt-embed-view-link {
	color: var(--primary-light, #80cbc4);
}
[data-theme="dark"] .cm-dt-embed-view-link:hover,
[data-theme="dark"] .cm-dt-embed-view-link:focus {
	color: var(--primary-hover, #4db6ac);
}
.cm-dt-embed__list {
	margin-top: 4px;
	/* Keep CM Action page short when many DT rows — same idea as Asset .downtime-repeater */
	max-height: min(50vh, 420px);
	overflow-y: auto;
	overflow-x: hidden;
	-webkit-overflow-scrolling: touch;
	padding-right: 2px;
}
.cm-dt-embed .downtime-row,
.cm-dt-embed-row {
	background: linear-gradient(180deg, #ffffff 0%, #f9fbff 100%);
	border: 1px solid #e5e9f2;
	border-left: 5px solid #adb5bd;
	border-radius: 14px;
	padding: 12px;
	box-shadow: 0 5px 16px rgba(15, 23, 42, 0.04);
	margin-bottom: 10px;
}
.cm-dt-embed .downtime-row--planned {
	border-left-color: var(--success, #28a745);
}
.cm-dt-embed .downtime-row--unplanned {
	border-left-color: var(--danger, #dc3545);
}
.cm-dt-embed .downtime-row--open {
	border-left-color: var(--warning, #ffc107);
	background: linear-gradient(180deg, #fffdf5 0%, #fff8e6 100%);
}
.cm-dt-embed .downtime-row-head {
	display: flex;
	justify-content: space-between;
	align-items: center;
	flex-wrap: wrap;
	gap: 10px;
	margin-bottom: 10px;
}
.cm-dt-embed .downtime-row-title,
.cm-dt-embed .dt-cm-head-pills {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 6px;
	min-width: 0;
	flex: 1;
}
.cm-dt-embed .downtime-row-type-dd,
.cm-dt-embed .cm-dt-embed-type {
	max-width: 260px;
	width: 100%;
	height: 34px;
	padding-top: 4px;
	padding-bottom: 4px;
	font-size: 13px;
	border-radius: 10px;
}
.cm-dt-embed .downtime-row-actions {
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
	align-items: center;
	flex-shrink: 0;
}
.cm-dt-embed .downtime-open-shell {
	display: block;
}
.cm-dt-embed .downtime-form-grid {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 10px;
}
.cm-dt-embed .downtime-field {
	background: rgba(255, 255, 255, 0.78);
	border: 1px solid #e9edf5;
	border-radius: 12px;
	padding: 10px 11px;
}
.cm-dt-embed .downtime-field label {
	display: block;
	margin-bottom: 5px;
	font-size: 10px;
	font-weight: 700;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	color: var(--secondary, #6c757d);
}
.cm-dt-embed .downtime-field textarea {
	resize: vertical;
	min-height: 64px;
}
.cm-dt-embed .downtime-row .form-control,
.cm-dt-embed .downtime-row .btn {
	border-radius: 10px;
}
.cm-dt-embed .downtime-row .form-control:disabled,
.cm-dt-embed .downtime-row .form-control[disabled] {
	background: #f8f9fa;
	opacity: 1;
}
.cm-dt-embed-pill {
	font-weight: 600;
	font-size: 11px;
	margin-right: 4px;
}
.cm-dt-embed-elapsed {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	font-weight: 700;
	color: #dc3545;
}
.cm-dt-embed-running {
	font-weight: 600;
}
/* Autosave status — sits left next to Edited/Auto pill; hidden when empty so no gap */
.cm-dt-embed .dt-cm-head-pills .cm-dt-embed-save-status {
	margin-left: 2px;
}
.cm-dt-embed-save-status {
	display: inline-flex;
	align-items: center;
	gap: 4px;
	font-size: 11px;
	font-weight: 600;
	line-height: 1.2;
	color: #6c757d;
	vertical-align: middle;
}
.cm-dt-embed-save-status:empty {
	display: none;
}
.cm-dt-embed-save-status.is-saving {
	color: var(--primary, #009688);
}
.cm-dt-embed-save-status.is-saved {
	color: #28a745;
	animation: cm-dt-embed-save-pop 0.45s ease-out;
}
.cm-dt-embed-save-status.is-error {
	color: #dc3545;
}
@keyframes cm-dt-embed-save-pop {
	0% { transform: scale(0.92); }
	55% { transform: scale(1.06); }
	100% { transform: scale(1); }
}
[data-theme="dark"] .cm-dt-embed-save-status {
	color: #adb5bd;
}
[data-theme="dark"] .cm-dt-embed-save-status.is-saving {
	color: var(--primary-light, #80cbc4);
}
[data-theme="dark"] .cm-dt-embed-save-status.is-saved {
	color: #81c784;
}
[data-theme="dark"] .cm-dt-embed-save-status.is-error {
	color: #e57373;
}
@media (max-width: 991.98px) {
	.cm-dt-embed .downtime-form-grid {
		grid-template-columns: 1fr;
	}
	.cm-dt-embed .downtime-row-head {
		flex-direction: column;
		align-items: stretch;
	}
	.cm-dt-embed .downtime-row-actions {
		width: 100%;
	}
	.cm-dt-embed .downtime-row-actions .btn {
		flex: 1 1 auto;
	}
}
[data-theme="dark"] .cm-dt-embed {
	background: #262626;
	border-color: #3a3a3a;
}
[data-theme="dark"] .cm-dt-embed__title {
	color: #fff;
}
[data-theme="dark"] .cm-dt-embed .downtime-row {
	background: #333;
	border-color: #1c1b1b;
}
[data-theme="dark"] .cm-dt-embed .downtime-row--open {
	background: #333;
	border-left-color: var(--warning, #ffc107);
}
[data-theme="dark"] .cm-dt-embed .downtime-field {
	background: #262626;
	border-color: #3a3a3a;
}
[data-theme="dark"] .cm-dt-embed .downtime-field label {
	color: #94a3b8;
}
[data-theme="dark"] .cm-dt-embed .downtime-row .form-control,
[data-theme="dark"] .cm-dt-embed .downtime-row .form-control:disabled,
[data-theme="dark"] .cm-dt-embed .downtime-row .form-control[disabled] {
	background: #1f1f1f;
	border-color: #3a3a3a;
	color: #fff;
}
/* Match manual .downtime-row-type-dd (max-width 260px) so Planned/Unplanned looks the same width. */
.downtime-row--cm-locked .dt-cm-type-select {
	max-width: 260px;
	width: 100%;
	margin-right: 6px;
	flex: 0 1 260px;
}
.downtime-row--cm-locked .dt-cm-readonly {
	display: block;
	min-height: 34px;
	padding: 6px 10px;
	border: 1px solid #e9edf5;
	border-radius: 10px;
	background: #f8f9fa;
	font-size: 13px;
	color: #212529;
	word-break: break-word;
}
.downtime-row--cm-locked .dt-cm-duration {
	font-weight: 700;
	font-size: 15px;
}
/* CM trail: who started a CM downtime row and which CMs took it over */
.dt-cm-trail-field {
	margin-top: 8px;
}
.dt-cm-trail-field[hidden] {
	display: none !important;
}
.dt-cm-trail-toggle {
	display: inline-flex;
	align-items: center;
	gap: 5px;
	padding: 2px 10px;
	border: 1px solid #e9edf5;
	border-radius: 999px;
	background: #fff;
	color: var(--secondary, #6c757d);
	font-size: 11px;
	font-weight: 700;
	line-height: 1.6;
	white-space: nowrap;
	cursor: pointer;
	transition: border-color .15s, color .15s, background .15s;
}
.dt-cm-trail-toggle:hover,
.dt-cm-trail-toggle:focus-visible,
.dt-cm-trail-toggle.is-open {
	border-color: var(--primary, #009688);
	color: var(--primary, #009688);
	outline: none;
}
.dt-cm-trail-toggle__chevron {
	font-size: 9px;
	transition: transform .2s;
}
.dt-cm-trail-toggle.is-open .dt-cm-trail-toggle__chevron {
	transform: rotate(180deg);
}
@media (prefers-reduced-motion: reduce) {
	.dt-cm-trail-toggle,
	.dt-cm-trail-toggle__chevron {
		transition: none;
	}
}
.dt-cm-trail {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 6px;
}
.dt-cm-trail__part {
	display: inline-flex;
	align-items: center;
	gap: 6px;
}
.dt-cm-trail__folded,
.dt-cm-trail.is-expanded .dt-cm-trail__more-wrap {
	display: none;
}
.dt-cm-trail.is-expanded .dt-cm-trail__folded {
	display: inline-flex;
}
.dt-cm-trail__step {
	display: inline-flex;
	align-items: center;
	gap: 4px;
	padding: 3px 10px;
	border: 1px solid #e9edf5;
	border-radius: 999px;
	background: #f8f9fa;
	color: #212529;
	font-size: 12px;
	font-weight: 600;
	white-space: nowrap;
	text-decoration: none;
}
.dt-cm-trail__step:hover,
.dt-cm-trail__step:focus {
	border-color: var(--primary, #009688);
	color: #212529;
	text-decoration: none;
}
.dt-cm-trail__step .fa {
	font-size: 10px;
	color: var(--secondary, #6c757d);
}
.dt-cm-trail__step.is-current {
	border-color: var(--primary, #009688);
	background: var(--primary-light, #b8e2de);
	color: #00564e;
}
.dt-cm-trail__step.is-current .fa {
	color: inherit;
}
.dt-cm-trail__now {
	font-weight: 700;
}
.dt-cm-trail__arrow,
.dt-cm-trail__gap {
	color: var(--secondary, #6c757d);
	font-size: 12px;
}
.dt-cm-trail__gap {
	cursor: help;
	font-weight: 700;
}
.dt-cm-trail__more {
	padding: 2px 9px;
	border: 1px dashed #ced4da;
	border-radius: 999px;
	background: transparent;
	color: var(--secondary, #6c757d);
	font-size: 12px;
	cursor: pointer;
}
.dt-cm-trail__more:hover,
.dt-cm-trail__more:focus-visible {
	border-color: var(--primary, #009688);
	color: var(--primary, #009688);
	outline: none;
}
.downtime-row--cm-locked.downtime-row--open .dt-cm-duration {
	color: var(--danger, #dc3545);
}
.downtime-status-note--cm {
	border-color: var(--danger-light, #f5c6cb);
	background: rgba(220, 53, 69, 0.05);
}
.downtime-status-note--cm a {
	font-weight: 700;
}

/* Asset Downtime: 2+ open "Down Since Reported" CMs share one downtime (info, not an error) */
.dt-cm-shared-banner {
	display: flex;
	align-items: flex-start;
	gap: 10px;
	margin: 0 0 12px;
	padding: 10px 14px;
	border: 1px solid rgba(23, 162, 184, 0.35);
	border-left: 4px solid #17a2b8;
	border-radius: 10px;
	background: rgba(23, 162, 184, 0.08);
	color: #117a8b;
}
.dt-cm-shared-banner__icon {
	margin-top: 2px;
	font-size: 16px;
}
.dt-cm-shared-banner__body {
	display: flex;
	flex-direction: column;
	gap: 6px;
	min-width: 0;
}
.dt-cm-shared-banner__title {
	font-size: 13px;
}
.dt-cm-shared-banner__chips {
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
}
.dt-cm-shared-banner__chip {
	display: inline-flex;
	align-items: center;
	gap: 4px;
	padding: 2px 10px;
	border: 1px solid rgba(23, 162, 184, 0.45);
	border-radius: 999px;
	background: #fff;
	color: #117a8b;
	font-size: 12px;
	font-weight: 600;
	white-space: nowrap;
	text-decoration: none;
}
.dt-cm-shared-banner__chip:hover,
.dt-cm-shared-banner__chip:focus {
	border-color: #117a8b;
	color: #0c5460;
	text-decoration: none;
}
.dt-cm-shared-banner__chip.is-owner {
	border-color: #17a2b8;
	background: #17a2b8;
	color: #fff;
}
.dt-cm-shared-banner__owner {
	font-weight: 700;
}
.dt-cm-shared-banner__text {
	color: #3d6f78;
}
.dt-cm-shared-banner--stopped {
	border-color: #e9edf5;
	border-left-color: #adb5bd;
	background: #f8f9fa;
	color: #495057;
}
.dt-cm-shared-banner--stopped .dt-cm-shared-banner__chip {
	border-color: #ced4da;
	color: #495057;
}
.dt-cm-shared-banner--stopped .dt-cm-shared-banner__text {
	color: var(--secondary, #6c757d);
}

/* Assets Maintenance > Operational Uptime card */
#assetMaintenanceMetricsColumnRoot .asset-maintenance-uptime-card {
	border: 1px solid #e0e0e0;
	overflow: hidden;
}
#assetMaintenanceMetricsColumnRoot .asset-maintenance-uptime-card .am-uptime-head {
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	gap: 0.75rem;
	margin-bottom: 0.55rem;
}
#assetMaintenanceMetricsColumnRoot .asset-maintenance-uptime-card .am-uptime-kicker {
	font-size: 0.62rem;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.08em;
	color: var(--secondary, #6c757d);
	margin: 0 0 0.15rem;
}
#assetMaintenanceMetricsColumnRoot .asset-maintenance-uptime-card .am-uptime-title {
	font-size: 1.05rem;
	font-weight: 600;
	margin: 0;
	color: #2c3e50;
}
#assetMaintenanceMetricsColumnRoot .asset-maintenance-uptime-card .am-uptime-title i {
	color: var(--primary, #009688);
	margin-right: 0.35rem;
}
#assetMaintenanceMetricsColumnRoot .asset-maintenance-uptime-card .am-uptime-pair {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 8px;
}
#assetMaintenanceMetricsColumnRoot .asset-maintenance-uptime-card .am-uptime-pair__tile {
	min-width: 0;
	padding: 8px 10px 10px;
	border: 1px solid #e0e0e0;
	border-radius: 8px;
	background: #f8f9fa;
	cursor: help;
}
#assetMaintenanceMetricsColumnRoot .asset-maintenance-uptime-card .am-uptime-pair__tile span {
	display: block;
	font-size: 0.68rem;
	font-weight: 600;
	line-height: 1.25;
	color: var(--secondary, #6c757d);
}
#assetMaintenanceMetricsColumnRoot .asset-maintenance-uptime-card .am-uptime-pair__tile strong {
	display: block;
	margin: 4px 0 8px;
	font-size: 1.35rem;
	font-weight: 700;
	line-height: 1;
	color: var(--primary, #009688);
	white-space: nowrap;
}
#assetMaintenanceMetricsColumnRoot .asset-maintenance-uptime-card .am-uptime-pair__tile strong.is-warn {
	color: var(--warning-back, #d39e00);
}
#assetMaintenanceMetricsColumnRoot .asset-maintenance-uptime-card .am-uptime-pair__tile strong.is-danger {
	color: var(--danger, #dc3545);
}
#assetMaintenanceMetricsColumnRoot .asset-maintenance-uptime-card .am-uptime-pair__tile .progress {
	margin: 0;
}
#assetMaintenanceMetricsColumnRoot .asset-maintenance-uptime-card .progress {
	height: 6px;
	border-radius: 999px;
	background: #e9ecef;
	overflow: hidden;
}
#assetMaintenanceMetricsColumnRoot .asset-maintenance-uptime-card .progress-bar {
	border-radius: 999px;
	background: var(--primary, #009688);
}
#assetMaintenanceMetricsColumnRoot .asset-maintenance-uptime-card .progress-bar.is-warn {
	background: var(--warning, #ffc107);
}
#assetMaintenanceMetricsColumnRoot .asset-maintenance-uptime-card .progress-bar.is-danger {
	background: var(--danger, #dc3545);
}
#assetMaintenanceMetricsColumnRoot .asset-maintenance-uptime-card .am-uptime-range {
	display: flex;
	justify-content: space-between;
	gap: 10px;
	margin-top: 0.45rem;
	font-size: 0.72rem;
	color: var(--secondary, #6c757d);
}
#assetMaintenanceMetricsColumnRoot .asset-maintenance-uptime-card .am-uptime-range__to {
	white-space: nowrap;
}
#assetMaintenanceMetricsColumnRoot .asset-maintenance-uptime-card .am-uptime-section {
	margin: 0.75rem 0 0.35rem;
	font-size: 0.62rem;
	font-weight: 700;
	letter-spacing: 0.07em;
	text-transform: uppercase;
	color: var(--secondary, #6c757d);
}
#assetMaintenanceMetricsColumnRoot .asset-maintenance-uptime-card .am-uptime-op {
	border: 1px solid #e0e0e0;
	border-left: 3px solid var(--primary, #009688);
	border-radius: 8px;
	background: #f8f9fa;
	overflow: hidden;
}
#assetMaintenanceMetricsColumnRoot .asset-maintenance-uptime-card .am-uptime-op__main {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 10px;
	padding: 8px 10px 8px 12px;
	cursor: help;
}
#assetMaintenanceMetricsColumnRoot .asset-maintenance-uptime-card .am-uptime-op__label {
	font-size: 0.75rem;
	line-height: 1.25;
	color: var(--secondary, #6c757d);
}
#assetMaintenanceMetricsColumnRoot .asset-maintenance-uptime-card .am-uptime-op__value {
	font-size: 0.95rem;
	font-weight: 700;
	line-height: 1.2;
	color: var(--primary, #009688);
	white-space: nowrap;
}
#assetMaintenanceMetricsColumnRoot .asset-maintenance-uptime-card .am-uptime-per {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 8px;
}
#assetMaintenanceMetricsColumnRoot .asset-maintenance-uptime-card .am-uptime-per > div {
	min-width: 0;
	padding: 8px 10px;
	border: 1px solid #e0e0e0;
	border-radius: 8px;
	background: #f8f9fa;
	cursor: help;
}
#assetMaintenanceMetricsColumnRoot .asset-maintenance-uptime-card .am-uptime-per span {
	display: block;
	font-size: 0.68rem;
	color: var(--secondary, #6c757d);
}
#assetMaintenanceMetricsColumnRoot .asset-maintenance-uptime-card .am-uptime-per strong {
	display: block;
	margin-top: 2px;
	font-size: 0.92rem;
	line-height: 1.2;
	color: var(--primary, #009688);
}
#assetMaintenanceMetricsColumnRoot .asset-maintenance-uptime-card .am-uptime-per strong.is-down {
	color: var(--danger, #dc3545);
}
#assetMaintenanceMetricsColumnRoot .asset-maintenance-uptime-card .am-uptime-list {
	padding: 2px 10px;
	border: 1px solid #e0e0e0;
	border-radius: 8px;
	background: #f8f9fa;
}
#assetMaintenanceMetricsColumnRoot .asset-maintenance-uptime-card .am-uptime-row {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 8px;
	margin: 0;
	padding: 7px 0;
	border-bottom: 1px solid #e9ecef;
	font-size: 0.8rem;
}
#assetMaintenanceMetricsColumnRoot .asset-maintenance-uptime-card .am-uptime-list .am-uptime-row:last-child,
#assetMaintenanceMetricsColumnRoot .asset-maintenance-uptime-card .am-uptime-list .am-uptime-row:nth-last-child(2) {
	border-bottom: 0;
}
#assetMaintenanceMetricsColumnRoot .asset-maintenance-uptime-card .am-uptime-row__label {
	color: var(--secondary, #6c757d);
	cursor: help;
	min-width: 0;
}
#assetMaintenanceMetricsColumnRoot .asset-maintenance-uptime-card .am-uptime-row__value {
	color: #2c3e50;
	font-weight: 600;
	white-space: nowrap;
}
#assetMaintenanceMetricsColumnRoot .asset-maintenance-uptime-card .am-uptime-row__value.is-zero {
	color: var(--secondary, #6c757d);
	font-weight: 500;
}
#assetMaintenanceMetricsColumnRoot .asset-maintenance-uptime-card .am-uptime-row--loss {
	border-top: 1px solid #e0e0e0;
	border-bottom: 0;
}
#assetMaintenanceMetricsColumnRoot .asset-maintenance-uptime-card .am-uptime-row--loss .am-uptime-row__label {
	font-weight: 700;
	color: #2c3e50;
}
#assetMaintenanceMetricsColumnRoot .asset-maintenance-uptime-card .am-uptime-row--loss .am-uptime-row__value {
	color: var(--danger, #dc3545);
	font-weight: 700;
}
#assetMaintenanceMetricsColumnRoot .asset-maintenance-uptime-card .am-uptime-dot {
	display: inline-block;
	width: 7px;
	height: 7px;
	margin-right: 6px;
	border-radius: 50%;
	vertical-align: 1px;
}
#assetMaintenanceMetricsColumnRoot .asset-maintenance-uptime-card .am-uptime-dot.is-planned {
	background: var(--warning, #ffc107);
}
#assetMaintenanceMetricsColumnRoot .asset-maintenance-uptime-card .am-uptime-dot.is-unplanned {
	background: var(--danger, #dc3545);
}
#assetMaintenanceMetricsColumnRoot .asset-maintenance-uptime-card .am-uptime-trend {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 8px;
}
#assetMaintenanceMetricsColumnRoot .asset-maintenance-uptime-card .am-uptime-trend__tile {
	min-width: 0;
	padding: 8px 10px;
	border: 1px solid #e0e0e0;
	border-radius: 8px;
	background: #f8f9fa;
	cursor: help;
}
#assetMaintenanceMetricsColumnRoot .asset-maintenance-uptime-card .am-uptime-trend__tile span {
	display: block;
	font-size: 0.68rem;
	color: var(--secondary, #6c757d);
	cursor: help;
}
#assetMaintenanceMetricsColumnRoot .asset-maintenance-uptime-card .am-uptime-trend__tile strong {
	display: block;
	margin-top: 2px;
	font-size: 1.15rem;
	line-height: 1.15;
	font-weight: 700;
	color: var(--primary, #009688);
}
#assetMaintenanceMetricsColumnRoot .asset-maintenance-uptime-card .am-uptime-trend__tile.is-warn strong {
	color: var(--info, #17a2b8);
}
#assetMaintenanceMetricsColumnRoot .asset-maintenance-uptime-card .am-uptime-trend__tile.is-danger strong {
	color: var(--danger, #dc3545);
}
#assetMaintenanceMetricsColumnRoot .asset-maintenance-uptime-card .am-uptime-trend__tile.is-muted strong {
	color: var(--secondary, #6c757d);
	font-weight: 600;
}
#assetMaintenanceMetricsColumnRoot .asset-maintenance-uptime-card .am-uptime-meta-foot {
	margin: 0.75rem 0 0;
	font-size: 0.68rem;
	line-height: 1.35;
	color: var(--secondary, #6c757d);
}
#assetMaintenanceMetricsColumnRoot .asset-maintenance-uptime-card .am-uptime-unset {
	margin-top: 0.45rem;
}

/* Assets Maintenance > Uptime card: "Asset Down" strip (open downtime row, live timer, owner CM) */
.am-down-strip {
	display: flex;
	align-items: flex-start;
	gap: 10px;
	margin-top: 0.65rem;
	padding: 8px 12px;
	border: 1px solid rgba(220, 53, 69, 0.25);
	border-left: 4px solid #dc3545;
	border-radius: 8px;
	background: rgba(220, 53, 69, 0.06);
	color: #842029;
	font-size: 0.8rem;
}
.am-down-strip__pulse {
	flex-shrink: 0;
	width: 9px;
	height: 9px;
	margin-top: 5px;
	border-radius: 50%;
	background: #dc3545;
	box-shadow: 0 0 0 0 rgba(220, 53, 69, 0.55);
	animation: am-down-strip-pulse 1.8s ease-out infinite;
}
@keyframes am-down-strip-pulse {
	0% { box-shadow: 0 0 0 0 rgba(220, 53, 69, 0.55); }
	70% { box-shadow: 0 0 0 7px rgba(220, 53, 69, 0); }
	100% { box-shadow: 0 0 0 0 rgba(220, 53, 69, 0); }
}
@media (prefers-reduced-motion: reduce) {
	.am-down-strip__pulse { animation: none; }
}
.am-down-strip__body {
	display: flex;
	flex: 1 1 auto;
	flex-direction: column;
	gap: 4px;
	min-width: 0;
}
.am-down-strip__head {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: 6px;
	font-size: 0.85rem;
}
.am-down-strip__timer {
	font-variant-numeric: tabular-nums;
	font-weight: 600;
	white-space: nowrap;
}
.am-down-strip__meta {
	color: var(--secondary, #6c757d);
}
.am-down-strip__chips {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 6px;
	margin-top: 2px;
}
.am-down-strip__chip {
	display: inline-flex;
	align-items: center;
	gap: 4px;
	padding: 1px 9px;
	border: 1px solid var(--primary, #009688);
	border-radius: 999px;
	background: #fff;
	color: var(--primary, #009688);
	font-size: 0.75rem;
	font-weight: 600;
	white-space: nowrap;
}
a.am-down-strip__chip:hover,
a.am-down-strip__chip:focus {
	background: var(--primary, #009688);
	color: #fff;
	text-decoration: none;
}
.am-down-strip__tag {
	display: inline-flex;
	align-items: center;
	padding: 1px 9px;
	border: 1px solid rgba(220, 53, 69, 0.3);
	border-radius: 999px;
	background: #fff;
	color: #842029;
	font-size: 0.75rem;
	white-space: nowrap;
	cursor: help;
}
.am-down-strip__link {
	margin-left: auto;
	color: #842029;
	font-weight: 600;
	white-space: nowrap;
}
.am-down-strip__link:hover,
.am-down-strip__link:focus {
	color: #dc3545;
	text-decoration: none;
}

/* Assets Detail > identity header: live "Down · 4h 18m" badge beside the Exh_Status badge */
.asset-down-badge {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 3px 10px;
	border: 1px solid rgba(220, 53, 69, 0.35);
	border-radius: 999px;
	background: rgba(220, 53, 69, 0.08);
	color: #842029;
	font-size: 0.75rem;
	font-weight: 600;
	line-height: 1.4;
	white-space: nowrap;
}
a.asset-down-badge:hover,
a.asset-down-badge:focus {
	border-color: #dc3545;
	background: #dc3545;
	color: #fff;
	text-decoration: none;
}
.asset-down-badge__dot {
	flex-shrink: 0;
	width: 8px;
	height: 8px;
	border-radius: 50%;
	background: #dc3545;
	box-shadow: 0 0 0 0 rgba(220, 53, 69, 0.55);
	animation: am-down-strip-pulse 1.8s ease-out infinite;
}
a.asset-down-badge:hover .asset-down-badge__dot,
a.asset-down-badge:focus .asset-down-badge__dot {
	background: #fff;
}
.asset-down-badge__timer {
	font-variant-numeric: tabular-nums;
}
@media (prefers-reduced-motion: reduce) {
	.asset-down-badge__dot { animation: none; }
}
/* "Faulty": open CM while the asset still runs — Live Status Faulty orange, steady dot (nothing is stopped) */
.asset-down-badge--faulty {
	border-color: rgba(251, 140, 0, 0.4);
	background: rgba(251, 140, 0, 0.1);
	color: #e65100;
}
.asset-down-badge--faulty .asset-down-badge__dot {
	background: #fb8c00;
	box-shadow: none;
	animation: none;
}
a.asset-down-badge--faulty:hover,
a.asset-down-badge--faulty:focus {
	border-color: #fb8c00;
	background: #fb8c00;
	color: #fff;
}
/* "Under PM": active preventive work — same blue as Live Status --alv-pm, steady dot */
.asset-down-badge--pm {
	border-color: rgba(30, 136, 229, 0.4);
	background: rgba(30, 136, 229, 0.1);
	color: #1565c0;
}
.asset-down-badge--pm .asset-down-badge__dot {
	background: #1e88e5;
	box-shadow: none;
	animation: none;
}
a.asset-down-badge--pm:hover,
a.asset-down-badge--pm:focus {
	border-color: #1e88e5;
	background: #1e88e5;
	color: #fff;
}

/* Assets List: smaller Down / Faulty / Under PM pill under the Asset No */
.ast-list-live-pill {
	gap: 5px;
	margin-top: 3px;
	padding: 1px 8px;
	font-size: 0.7rem;
}
.ast-list-live-pill .asset-down-badge__dot {
	width: 7px;
	height: 7px;
}
/* Card view: the Asset No cell is the brand-coloured card header, so the pill needs a solid face */
#sampleTable.table-cards .ast-list-live-pill {
	margin: 2px 0 4px;
	background: #fff;
}
/* Down / Faulty / Under PM rows: coloured card border (card view and mobile), left accent in table view */
#sampleTable.table-cards tbody tr.ast-list-row--down {
	border: 2px solid #dc3545;
}
#sampleTable.table-cards tbody tr.ast-list-row--faulty {
	border: 2px solid #fb8c00;
}
#sampleTable.table-cards tbody tr.ast-list-row--pm {
	border: 2px solid #1e88e5;
}
#sampleTable:not(.table-cards) tbody tr.ast-list-row--down td:first-child {
	box-shadow: inset 3px 0 0 #dc3545;
}
#sampleTable:not(.table-cards) tbody tr.ast-list-row--faulty td:first-child {
	box-shadow: inset 3px 0 0 #fb8c00;
}
#sampleTable:not(.table-cards) tbody tr.ast-list-row--pm td:first-child {
	box-shadow: inset 3px 0 0 #1e88e5;
}

/* Assets List: Live chips in the table toolbar next to "Show entries" (click toggles the Live State filter).
   Idle = neutral face with a coloured dot / icon / count; active = solid colour with a × to clear.
   Desktop: keep Show entries, Live chips, and Search on one vertical midline (not stuck to the top rule). */
#sampleTable_wrapper > .row:first-child {
	align-items: center;
}
#sampleTable_wrapper > .row:first-child > [class*="col-"] {
	display: flex;
	align-items: center;
	min-height: 38px;
}
#sampleTable_wrapper > .row:first-child > [class*="col-"]:last-child {
	justify-content: flex-end;
}
#sampleTable_wrapper .dataTables_length,
#sampleTable_wrapper .dataTables_filter {
	margin-top: 0;
	margin-bottom: 0;
}
#sampleTable_wrapper .dataTables_length label,
#sampleTable_wrapper .dataTables_filter label {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	margin-bottom: 0;
}
.ast-list-dt-toolbar {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 6px 16px;
	width: 100%;
}
.ast-list-live-chips {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 6px;
	margin: 0 0 8px;
}
.ast-list-dt-toolbar .ast-list-live-chips {
	margin: 0;
}
@media (max-width: 767px) {
	/* Mobile: length menu is often off; let columns stack without forcing a tall empty midline. */
	#sampleTable_wrapper > .row:first-child > [class*="col-"] {
		min-height: 0;
	}
}
.ast-list-live-chips[hidden] {
	display: none;
}
.ast-list-live-chips__label {
	color: #6c757d;
	font-size: 0.75rem;
	font-weight: 600;
}
.ast-list-live-chip {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 3px 12px;
	border: 1px solid #dee2e6;
	border-radius: 999px;
	background: #fff;
	color: #495057;
	font-size: 0.8rem;
	font-weight: 600;
	line-height: 1.5;
	white-space: nowrap;
	cursor: pointer;
	transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}
.ast-list-live-chip:focus {
	outline: none;
	box-shadow: 0 0 0 2px rgba(220, 53, 69, 0.25);
}
.ast-list-live-chip__dot {
	width: 8px;
	height: 8px;
	border-radius: 50%;
	background: #dc3545;
}
.ast-list-live-chip__count {
	font-variant-numeric: tabular-nums;
}
.ast-list-live-chip__clear {
	display: none;
	font-size: 1rem;
	line-height: 1;
}
.ast-list-live-chip.is-active .ast-list-live-chip__clear {
	display: inline;
}
.ast-list-live-chip--down .ast-list-live-chip__count {
	color: #dc3545;
}
.ast-list-live-chip--down:hover:not(:disabled) {
	border-color: rgba(220, 53, 69, 0.55);
	background: rgba(220, 53, 69, 0.06);
}
.ast-list-live-chip--down.is-active,
.ast-list-live-chip--down.is-active:hover {
	border-color: #dc3545;
	background: #dc3545;
	color: #fff;
}
.ast-list-live-chip--down.is-active .ast-list-live-chip__dot {
	background: #fff;
}
.ast-list-live-chip--faulty:focus {
	box-shadow: 0 0 0 2px rgba(251, 140, 0, 0.3);
}
.ast-list-live-chip--faulty .ast-list-live-chip__icon,
.ast-list-live-chip--faulty .ast-list-live-chip__count {
	color: #e65100;
}
.ast-list-live-chip--faulty:hover:not(:disabled) {
	border-color: rgba(251, 140, 0, 0.6);
	background: rgba(251, 140, 0, 0.08);
}
.ast-list-live-chip--faulty.is-active,
.ast-list-live-chip--faulty.is-active:hover {
	border-color: #fb8c00;
	background: #fb8c00;
	color: #fff;
}
.ast-list-live-chip--pm:focus {
	box-shadow: 0 0 0 2px rgba(30, 136, 229, 0.3);
}
.ast-list-live-chip--pm .ast-list-live-chip__icon,
.ast-list-live-chip--pm .ast-list-live-chip__count {
	color: #1565c0;
}
.ast-list-live-chip--pm:hover:not(:disabled) {
	border-color: rgba(30, 136, 229, 0.55);
	background: rgba(30, 136, 229, 0.08);
}
.ast-list-live-chip--pm.is-active,
.ast-list-live-chip--pm.is-active:hover {
	border-color: #1e88e5;
	background: #1e88e5;
	color: #fff;
}
.ast-list-live-chip.is-active .ast-list-live-chip__icon,
.ast-list-live-chip.is-active .ast-list-live-chip__count {
	color: inherit;
}
/* Count 0 and not the active filter: the chip (and the "Live:" label when none are left) is hidden */
.ast-list-live-chip[hidden],
.ast-list-live-chips__label[hidden] {
	display: none;
}
.ast-list-live-chip--link {
	color: var(--primary, #009688);
	text-decoration: none;
}
.ast-list-live-chip--link:hover,
.ast-list-live-chip--link:focus {
	border-color: var(--primary, #009688);
	background: var(--primary, #009688);
	color: #fff;
	text-decoration: none;
}
/* Eye = main Live pill; panel to its right holds Down / Faulty / Under PM */
.ast-list-live-chips__panel {
	display: inline-flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 6px;
}
/* Collapse: stash non-active filters inside the eye; keep the active chip visible so × can clear it */
.ast-list-live-chips.is-collapsed .ast-list-live-chips__panel > [data-live-filter]:not(.is-active) {
	display: none !important;
}
/* Empty panel still sits in the flex gap (eye → gap → panel → gap → Live Status). Hide it when nothing active. */
.ast-list-live-chips.is-collapsed .ast-list-live-chips__panel:not(:has(> .is-active)) {
	display: none !important;
}
.ast-list-live-chip--panel-toggle {
	justify-content: center;
	min-width: 2.4em;
}
.ast-list-live-chip--panel-toggle:focus {
	box-shadow: 0 0 0 2px rgba(var(--primary-rgb, 0, 150, 136), 0.3);
}
.ast-list-live-chip--panel-toggle .ast-list-live-chip__icon {
	color: var(--primary, #009688);
	margin: 0;
	font-size: 0.95em;
	line-height: 1.5;
	width: 1em;
	text-align: center;
}
.ast-list-live-chip--panel-toggle:hover:not(:disabled) {
	border-color: rgba(var(--primary-rgb, 0, 150, 136), 0.55);
	background: rgba(var(--primary-rgb, 0, 150, 136), 0.08);
}
.ast-list-live-chip--panel-toggle.is-active,
.ast-list-live-chip--panel-toggle.is-active:hover {
	border-color: var(--primary, #009688);
	background: var(--primary, #009688);
	color: #fff;
}
.ast-list-live-chip--panel-toggle.is-active .ast-list-live-chip__icon {
	color: #fff;
}
/* Collapsed: also hide row pills under Asset No + left accent / card border cue */
#sampleTable.ast-list-hide-row-pills .ast-list-live-pill {
	display: none !important;
}
#sampleTable.ast-list-hide-row-pills:not(.table-cards) tbody tr.ast-list-row--down td:first-child,
#sampleTable.ast-list-hide-row-pills:not(.table-cards) tbody tr.ast-list-row--faulty td:first-child,
#sampleTable.ast-list-hide-row-pills:not(.table-cards) tbody tr.ast-list-row--pm td:first-child {
	box-shadow: none;
}
#sampleTable.ast-list-hide-row-pills.table-cards tbody tr.ast-list-row--down,
#sampleTable.ast-list-hide-row-pills.table-cards tbody tr.ast-list-row--faulty,
#sampleTable.ast-list-hide-row-pills.table-cards tbody tr.ast-list-row--pm {
	border-color: transparent;
}

/* Downtime Health (Assets_Downtime_Health.php): one card per check, then a table per check with problems */
.adh-head-row {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 10px;
	margin-bottom: 14px;
}
.adh-head-start {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 10px;
}
.adh-intro {
	color: #6c757d;
	font-size: 0.85rem;
}
.adh-cards {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(170px, 1fr));
	gap: 10px;
}
.adh-card {
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 10px 12px;
	border: 1px solid #dee2e6;
	border-left-width: 4px;
	border-radius: 6px;
	background: #fff;
	color: #495057;
	text-decoration: none;
	transition: box-shadow 0.15s ease, border-color 0.15s ease;
}
.adh-card:hover,
.adh-card:focus {
	color: #495057;
	text-decoration: none;
	box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
}
.adh-card:focus {
	outline: none;
	box-shadow: 0 0 0 2px var(--primary, #009688);
}
.adh-card__icon {
	font-size: 1.25rem;
	width: 24px;
	text-align: center;
}
.adh-card__body {
	display: flex;
	flex-direction: column;
	min-width: 0;
}
.adh-card__label {
	font-size: 0.75rem;
	font-weight: 600;
	color: #6c757d;
}
.adh-card__count {
	font-size: 1.15rem;
	font-weight: 700;
	font-variant-numeric: tabular-nums;
}
.adh-card--issue {
	border-left-color: #fb8c00;
}
.adh-card--issue .adh-card__icon,
.adh-card--issue .adh-card__count {
	color: #e65100;
}
.adh-card--ok {
	border-left-color: #28a745;
}
.adh-card--ok .adh-card__icon,
.adh-card--ok .adh-card__count {
	color: #28a745;
	font-size: 0.95rem;
}
.adh-card--na {
	border-left-color: #dee2e6;
	opacity: 0.7;
}
.adh-card--na .adh-card__count {
	font-size: 0.8rem;
	font-weight: 600;
	color: #6c757d;
}
.adh-allclear {
	display: flex;
	align-items: center;
	gap: 14px;
}
.adh-allclear > .fa {
	font-size: 2.2rem;
	color: #28a745;
}
.adh-section {
	scroll-margin-top: 70px;
}
.adh-section__title {
	display: flex;
	align-items: center;
	gap: 8px;
	margin-bottom: 6px;
}
.adh-section__title > .fa {
	color: #e65100;
}
.adh-section__badge {
	background: #fb8c00;
	color: #fff;
}
.adh-section__why {
	margin-bottom: 6px;
	color: #6c757d;
}
.adh-section__fix {
	padding: 8px 12px;
	border-left: 3px solid var(--primary, #009688);
	border-radius: 4px;
	background: rgba(0, 0, 0, 0.03);
	font-size: 0.875rem;
}
.adh-detail {
	color: #e65100;
	font-weight: 600;
}
.adh-diff {
	font-size: 0.85rem;
	line-height: 1.5;
}
/* Card explanations are a few sentences: wider than the default 200px, read left to right,
   and pre-line keeps the blank line before the "Click to..." hint. Default black box is kept. */
.adh-tooltip .tooltip-inner {
	max-width: 300px;
	padding: 8px 12px;
	text-align: left;
	line-height: 1.45;
	white-space: pre-line;
}
.adh-diff__label {
	color: #6c757d;
	margin-right: 4px;
}
.adh-diff__old {
	color: #e65100;
	text-decoration: line-through;
	word-break: break-word;
}
.adh-diff__arrow {
	margin: 0 4px;
	color: #6c757d;
}
.adh-diff__new {
	font-weight: 600;
	word-break: break-word;
}
.adh-passed__title {
	margin-bottom: 8px;
}
.adh-passed__list {
	margin: 0;
	padding: 0;
	list-style: none;
}
.adh-passed__list li {
	padding: 3px 0;
}
/* Negative margin keeps the text where it was while giving the highlight some room. */
.adh-passed__list .adh-passed__item {
	margin: 0 -6px;
	padding: 3px 6px;
	border-radius: 4px;
	scroll-margin-top: 70px;
}
/* Card click: short ring (and row tint in Other Checks) on the target, so the jump is visible. */
@keyframes adh-flash-ring {
	0%, 40% { box-shadow: 0 0 0 3px var(--primary, #009688); }
	100% { box-shadow: 0 0 0 3px transparent; }
}
@keyframes adh-flash-row {
	0%, 40% { background-color: rgba(0, 0, 0, 0.06); }
	100% { background-color: transparent; }
}
.adh-flash {
	animation: adh-flash-ring 1.8s ease-out;
}
.adh-passed__item.adh-flash {
	animation: adh-flash-ring 1.8s ease-out, adh-flash-row 1.8s ease-out;
}
.adh-passed__ok {
	color: #28a745;
}
.adh-passed__na {
	color: #6c757d;
}

/* Working Time card: per-session "Machine Shutdown" checkbox + preview chip (repair_only CMs) */
.cm-sd-session {
	margin-top: 6px;
	padding-top: 8px;
	border-top: 1px dashed #e5e9f2;
}
.cm-sd-session-check {
	display: inline-flex;
	align-items: center;
	gap: 7px;
	margin: 0;
	font-size: 12.5px;
	font-weight: 600;
	color: #495057;
	cursor: pointer;
}
.cm-sd-session-input {
	width: 15px;
	height: 15px;
	margin: 0;
	accent-color: var(--danger, #dc3545);
	cursor: pointer;
}
.cm-sd-session-input:focus-visible {
	outline: 2px solid var(--primary, #009688);
	outline-offset: 2px;
}
.cm-sd-session.is-on .cm-sd-session-check {
	color: var(--danger, #dc3545);
}
.cm-sd-session-chip {
	display: flex;
	align-items: center;
	gap: 6px;
	margin-top: 6px;
	padding: 5px 10px;
	border-radius: 8px;
	font-size: 11.5px;
	font-weight: 600;
	line-height: 1.35;
}
.cm-sd-session-chip:empty {
	display: none;
}
.cm-sd-session-chip.is-on {
	background: rgba(220, 53, 69, 0.08);
	color: #b02a37;
}
.cm-sd-session-chip.is-pending {
	background: #fff8e6;
	color: #8a5a00;
}
.cm-sd-session-chip.is-off {
	background: #eef1f5;
	color: var(--secondary, #6c757d);
}
/* Read-only per-session flag on the CM Preview Multiple Timer cards (same tones as .cm-sd-session-chip.is-on,
   so a session ticked in the edit form looks the same here; grey there means "off") */
.cm-sd-session-flag {
	margin-top: 0.4rem;
}
.cm-sd-badge--session {
	white-space: nowrap;
	background: rgba(220, 53, 69, 0.08);
	color: #b02a37;
}
.cm-sd-badge--session .fa {
	margin-right: 2px;
}
/* Ticked session that has not ended yet: no downtime row until it ends (same tones as .cm-sd-session-chip.is-pending) */
.cm-sd-badge--session-pending {
	background: #fff8e6;
	color: #8a5a00;
}
/* Left accent so ticked sessions stand out in a long list; the double class beats the card's :hover border colour */
.report-timer-entry-card.report-timer-entry-card--shutdown {
	border-left: 3px solid rgba(220, 53, 69, 0.45);
}
.report-timer-entry-card.report-timer-entry-card--shutdown-pending {
	border-left-color: #f6c343;
}
/* "Machine Shutdown" line inside the Multiple Timer total card */
.cm-sd-session-total {
	display: flex;
	align-items: center;
	justify-content: space-between;
	flex-wrap: wrap;
	gap: 0.25rem 0.75rem;
	margin-top: 0.5rem;
	padding-top: 0.5rem;
	border-top: 1px dashed rgba(0, 0, 0, 0.12);
}
.cm-sd-session-total__label {
	font-size: 0.6875rem;
	font-weight: 700;
	letter-spacing: 0.05em;
	text-transform: uppercase;
	color: #6b7280;
}
.cm-sd-session-total__value {
	font-size: 0.8125rem;
	font-weight: 700;
	color: #b02a37;
}

[data-theme="dark"] .cm-sd-session {
	border-top-color: #3a3a3a;
}
[data-theme="dark"] .cm-sd-session-check {
	color: #c2c2c2;
}
[data-theme="dark"] .cm-sd-session.is-on .cm-sd-session-check {
	color: #f1b0b7;
}
[data-theme="dark"] .cm-sd-session-chip.is-on {
	background: rgba(220, 53, 69, 0.25);
	color: #f1b0b7;
}
[data-theme="dark"] .cm-sd-session-chip.is-pending {
	background: #333;
	color: #f6c343;
}
[data-theme="dark"] .cm-sd-session-chip.is-off {
	background: #333;
	color: #adb5bd;
}

[data-theme="dark"] .cm-sd-block {
	background: transparent;
	border: none;
}
[data-theme="dark"] .cm-sd-block-label,
[data-theme="dark"] .cm-sd-option-title {
	color: #fff;
}
[data-theme="dark"] .cm-sd-option {
	background: #262626;
	border-color: #3a3a3a;
}
[data-theme="dark"] .cm-sd-option.is-selected {
	border-color: var(--primary, #009688);
}
[data-theme="dark"] .cm-sd-option-help {
	color: #adb5bd;
}
[data-theme="dark"] .cm-sd-legacy {
	background: #333;
	color: #f6c343;
}
[data-theme="dark"] .cm-sd-info {
	background: #333;
	color: #c2c2c2;
}
[data-theme="dark"] .cm-sd-badge {
	background: rgba(220, 53, 69, 0.25);
	color: #f1b0b7;
}
[data-theme="dark"] .cm-sd-badge--repair_only {
	background: #333;
	color: #c2c2c2;
}
[data-theme="dark"] .cm-sd-badge--session {
	background: rgba(220, 53, 69, 0.25);
	color: #f1b0b7;
}
[data-theme="dark"] .cm-sd-badge--session-pending {
	background: #333;
	color: #f6c343;
}
[data-theme="dark"] .report-timer-entry-card.report-timer-entry-card--shutdown {
	border-left-color: rgba(220, 53, 69, 0.6);
}
[data-theme="dark"] .report-timer-entry-card.report-timer-entry-card--shutdown-pending {
	border-left-color: #f6c343;
}
[data-theme="dark"] .cm-sd-session-total {
	border-top-color: rgba(255, 255, 255, 0.14);
}
[data-theme="dark"] .cm-sd-session-total__label {
	color: #9ca3af;
}
[data-theme="dark"] .cm-sd-session-total__value {
	color: #f1b0b7;
}

/* Downtime status of a "Down Since Reported" CM under the report's Event Date (cm_sd_status_html) */
.cm-sd-status {
	display: block;
	/* Hug the content (one short line when folded) instead of stretching across the column */
	width: -moz-fit-content;
	width: fit-content;
	max-width: 100%;
	margin-top: 0.35rem;
	padding: 0.3rem 0.6rem;
	border-left: 3px solid #adb5bd;
	border-radius: 6px;
	background: #eef1f5;
	color: #495057;
	font-size: 12px;
	font-weight: 600;
	line-height: 1.45;
	text-align: left;
}
.cm-sd-status__icon {
	margin-right: 2px;
}
.cm-sd-status__elapsed {
	margin-left: 0.25rem;
	font-variant-numeric: tabular-nums;
	white-space: nowrap;
}
.cm-sd-status__detail {
	font-weight: 400;
	opacity: 0.9;
}
/* Static snapshot (PDF / batch): the detail follows the label on the same line */
.cm-sd-status__detail--inline::before {
	content: "· ";
}
/* Extra explanation lives in the card's title tooltip; the small icon says there is one */
.cm-sd-status--has-hint {
	cursor: help;
}
.cm-sd-status__hint-icon {
	margin-left: 0.2rem;
	opacity: 0.7;
}
/* Foldable card (live pages): the label is a button, the detail line sits in a panel below it */
.cm-sd-status__toggle {
	display: inline;
	padding: 0;
	border: 0;
	background: transparent;
	color: inherit;
	font: inherit;
	text-align: left;
	cursor: pointer;
}
.cm-sd-status__toggle:hover .cm-sd-status__label {
	text-decoration: underline;
}
.cm-sd-status__toggle:focus {
	outline: none;
}
.cm-sd-status__toggle:focus-visible {
	outline: 2px solid currentColor;
	outline-offset: 2px;
	border-radius: 3px;
}
.cm-sd-status__chevron {
	margin-left: 0.3rem;
	font-size: 10px;
	opacity: 0.7;
	transition: transform 0.2s ease;
}
.cm-sd-status.is-open .cm-sd-status__chevron {
	transform: rotate(180deg);
}
.cm-sd-status__panel {
	margin-top: 0.2rem;
	padding-top: 0.2rem;
	border-top: 1px dashed currentColor;
	border-top-color: rgba(0, 0, 0, 0.12);
}
/* Live re-check changed the state (e.g. stopped on the Asset Downtime page): brief highlight */
.cm-sd-status--changed {
	animation: cm-sd-status-changed 0.8s ease-in-out 3;
}
@keyframes cm-sd-status-changed {
	0%, 100% { box-shadow: 0 0 0 0 transparent; }
	50% { box-shadow: 0 0 0 3px rgba(246, 195, 67, 0.55); }
}
@media (prefers-reduced-motion: reduce) {
	.cm-sd-status__chevron {
		transition: none;
	}
	.cm-sd-status--changed {
		animation: none;
	}
}
[data-theme="dark"] .cm-sd-status__panel {
	border-top-color: rgba(255, 255, 255, 0.14);
}
/* Running: same soft red as the shutdown chips; the dot pulses so it reads as live */
.cm-sd-status--running {
	border-left-color: rgba(220, 53, 69, 0.6);
	background: rgba(220, 53, 69, 0.08);
	color: #b02a37;
}
.cm-sd-status--running .cm-sd-status__icon {
	animation: cm-sd-status-pulse 1.6s ease-in-out infinite;
}
@keyframes cm-sd-status-pulse {
	0%, 100% { opacity: 1; }
	50% { opacity: 0.25; }
}
@media (prefers-reduced-motion: reduce) {
	.cm-sd-status--running .cm-sd-status__icon {
		animation: none;
	}
}
/* Stopped by Start operational, or by another CM completed with "Running Again": the asset is running again */
.cm-sd-status--stopped_operational,
.cm-sd-status--stopped_running_again {
	border-left-color: #28a745;
	background: rgba(40, 167, 69, 0.1);
	color: #1e7e34;
}
/* Stopped on the downtime page / waiting for another CM: needs attention, not an error */
.cm-sd-status--stopped_on_page,
.cm-sd-status--waiting {
	border-left-color: #f6c343;
	background: #fff8e6;
	color: #8a5a00;
}
/* Downtime held by another row / CM: informational, not a problem */
.cm-sd-status--handed_over,
.cm-sd-status--covered {
	border-left-color: #17a2b8;
	background: rgba(23, 162, 184, 0.1);
	color: #117a8b;
}
[data-theme="dark"] .cm-sd-status {
	border-left-color: #6c757d;
	background: #333;
	color: #c2c2c2;
}
[data-theme="dark"] .cm-sd-status--running {
	border-left-color: rgba(220, 53, 69, 0.7);
	background: rgba(220, 53, 69, 0.25);
	color: #f1b0b7;
}
[data-theme="dark"] .cm-sd-status--stopped_operational,
[data-theme="dark"] .cm-sd-status--stopped_running_again {
	border-left-color: #28a745;
	background: rgba(40, 167, 69, 0.2);
	color: #8fd19e;
}
[data-theme="dark"] .cm-sd-status--stopped_on_page,
[data-theme="dark"] .cm-sd-status--waiting {
	border-left-color: #f6c343;
	background: #333;
	color: #f6c343;
}
[data-theme="dark"] .cm-sd-status--handed_over,
[data-theme="dark"] .cm-sd-status--covered {
	border-left-color: #17a2b8;
	background: rgba(23, 162, 184, 0.2);
	color: #7fd3e0;
}
/* Corrective List: downtime pill next to the shutdown icon (same tones as the status card states above) */
.cm-sd-list-pill {
	display: inline-block;
	padding: 1px 8px;
	border-radius: 999px;
	font-size: 11px;
	font-weight: 600;
	line-height: 1.6;
	white-space: nowrap;
	vertical-align: middle;
	cursor: help;
}
.cm-sd-list-pill .fa {
	margin-right: 2px;
}
.cm-sd-list-pill--running {
	background: rgba(220, 53, 69, 0.08);
	color: #b02a37;
}
.cm-sd-list-pill--running .fa {
	font-size: 8px;
	vertical-align: middle;
	animation: cm-sd-status-pulse 1.6s ease-in-out infinite;
}
@media (prefers-reduced-motion: reduce) {
	.cm-sd-list-pill--running .fa {
		animation: none;
	}
}
.cm-sd-list-pill--waiting {
	background: #fff8e6;
	color: #8a5a00;
}
.cm-sd-list-pill--stopped {
	background: rgba(40, 167, 69, 0.1);
	color: #1e7e34;
}
.cm-sd-list-pill--sessions {
	background: #e9ecef;
	color: #495057;
}
[data-theme="dark"] .cm-sd-list-pill--running {
	background: rgba(220, 53, 69, 0.25);
	color: #f1b0b7;
}
[data-theme="dark"] .cm-sd-list-pill--waiting {
	background: #333;
	color: #f6c343;
}
[data-theme="dark"] .cm-sd-list-pill--stopped {
	background: rgba(40, 167, 69, 0.2);
	color: #8fd19e;
}
[data-theme="dark"] .cm-sd-list-pill--sessions {
	background: #333;
	color: #c2c2c2;
}
/* "Auto From CM" / "Linked To CM": the dark theme's link colour (primary) would otherwise
   match the pill background, and flex parents could stretch the pill across the row. */
[data-theme="dark"] .dt-cm-pill,
[data-theme="dark"] a.dt-cm-pill,
[data-theme="dark"] a.dt-cm-pill:visited {
	display: inline-flex;
	width: auto;
	max-width: max-content;
	flex: 0 0 auto;
	align-self: flex-start;
	background: var(--primary, #009688);
	color: #fff;
}
[data-theme="dark"] a.dt-cm-pill:hover,
[data-theme="dark"] a.dt-cm-pill:focus {
	color: #fff;
	text-decoration: underline;
}
[data-theme="dark"] .dt-cm-status-pill {
	width: auto;
	max-width: max-content;
	flex: 0 0 auto;
	background: #333;
	color: #9fd8e2;
}
[data-theme="dark"] .dt-cm-status-pill--done {
	color: #8fe0d6;
}
[data-theme="dark"] .dt-cm-lock-note {
	color: #94a3b8;
}
[data-theme="dark"] .downtime-row--cm-locked .dt-cm-readonly {
	background: #262e33;
	border-color: #1c1b1b;
	color: #fff;
}
[data-theme="dark"] .dt-cm-trail-toggle {
	background: #262626;
	border-color: #3a3a3a;
	color: #94a3b8;
}
[data-theme="dark"] .dt-cm-trail-toggle:hover,
[data-theme="dark"] .dt-cm-trail-toggle:focus-visible,
[data-theme="dark"] .dt-cm-trail-toggle.is-open {
	border-color: var(--primary, #009688);
	color: #fff;
}
[data-theme="dark"] .dt-cm-trail__step {
	background: #262e33;
	border-color: #3a3a3a;
	color: #fff;
}
[data-theme="dark"] .dt-cm-trail__step:hover,
[data-theme="dark"] .dt-cm-trail__step:focus {
	border-color: var(--primary, #009688);
	color: #fff;
}
[data-theme="dark"] .dt-cm-trail__step .fa,
[data-theme="dark"] .dt-cm-trail__arrow,
[data-theme="dark"] .dt-cm-trail__gap {
	color: #94a3b8;
}
[data-theme="dark"] .dt-cm-trail__step.is-current {
	background: #333;
	border-color: var(--primary, #009688);
	color: #8fe0d6;
}
[data-theme="dark"] .dt-cm-trail__step.is-current .fa {
	color: inherit;
}
[data-theme="dark"] .dt-cm-trail__more {
	border-color: #3a3a3a;
	color: #94a3b8;
}
[data-theme="dark"] .downtime-status-note--cm {
	background: #333;
	border-color: #3a3a3a;
}
[data-theme="dark"] .dt-cm-shared-banner {
	border-color: #3a3a3a;
	border-left-color: #17a2b8;
	background: rgba(23, 162, 184, 0.15);
	color: #7fd3e0;
}
[data-theme="dark"] .dt-cm-shared-banner__chip {
	border-color: #3a3a3a;
	background: #262626;
	color: #7fd3e0;
}
[data-theme="dark"] .dt-cm-shared-banner__chip:hover,
[data-theme="dark"] .dt-cm-shared-banner__chip:focus {
	border-color: #17a2b8;
	color: #fff;
}
[data-theme="dark"] .dt-cm-shared-banner__chip.is-owner {
	border-color: #17a2b8;
	background: #17a2b8;
	color: #fff;
}
[data-theme="dark"] .dt-cm-shared-banner__text {
	color: #c2c2c2;
}
[data-theme="dark"] .dt-cm-shared-banner--stopped {
	border-color: #3a3a3a;
	border-left-color: #6c757d;
	background: #333;
	color: #c2c2c2;
}
[data-theme="dark"] .dt-cm-shared-banner--stopped .dt-cm-shared-banner__chip {
	color: #c2c2c2;
}
[data-theme="dark"] #assetMaintenanceMetricsColumnRoot .asset-maintenance-uptime-card {
	border-color: #3a3a3a;
}
[data-theme="dark"] #assetMaintenanceMetricsColumnRoot .asset-maintenance-uptime-card .am-uptime-kicker,
[data-theme="dark"] #assetMaintenanceMetricsColumnRoot .asset-maintenance-uptime-card .am-uptime-section,
[data-theme="dark"] #assetMaintenanceMetricsColumnRoot .asset-maintenance-uptime-card .am-uptime-range,
[data-theme="dark"] #assetMaintenanceMetricsColumnRoot .asset-maintenance-uptime-card .am-uptime-row__label,
[data-theme="dark"] #assetMaintenanceMetricsColumnRoot .asset-maintenance-uptime-card .am-uptime-trend__tile span,
[data-theme="dark"] #assetMaintenanceMetricsColumnRoot .asset-maintenance-uptime-card .am-uptime-per span,
[data-theme="dark"] #assetMaintenanceMetricsColumnRoot .asset-maintenance-uptime-card .am-uptime-pair__tile span,
[data-theme="dark"] #assetMaintenanceMetricsColumnRoot .asset-maintenance-uptime-card .am-uptime-meta-foot {
	color: #c2c2c2;
}
[data-theme="dark"] #assetMaintenanceMetricsColumnRoot .asset-maintenance-uptime-card .am-uptime-title,
[data-theme="dark"] #assetMaintenanceMetricsColumnRoot .asset-maintenance-uptime-card .am-uptime-row__value,
[data-theme="dark"] #assetMaintenanceMetricsColumnRoot .asset-maintenance-uptime-card .am-uptime-row--loss .am-uptime-row__label {
	color: #fff;
}
[data-theme="dark"] #assetMaintenanceMetricsColumnRoot .asset-maintenance-uptime-card .am-uptime-op,
[data-theme="dark"] #assetMaintenanceMetricsColumnRoot .asset-maintenance-uptime-card .am-uptime-list,
[data-theme="dark"] #assetMaintenanceMetricsColumnRoot .asset-maintenance-uptime-card .am-uptime-per > div,
[data-theme="dark"] #assetMaintenanceMetricsColumnRoot .asset-maintenance-uptime-card .am-uptime-pair__tile {
	background: #262626;
	border-color: #3a3a3a;
}
[data-theme="dark"] #assetMaintenanceMetricsColumnRoot .asset-maintenance-uptime-card .am-uptime-op {
	border-left-color: var(--primary, #009688);
}
[data-theme="dark"] #assetMaintenanceMetricsColumnRoot .asset-maintenance-uptime-card .am-uptime-pair__tile strong.is-warn {
	color: var(--warning, #ffc107);
}
[data-theme="dark"] #assetMaintenanceMetricsColumnRoot .asset-maintenance-uptime-card .am-uptime-op__value {
	color: var(--primary, #009688);
}
[data-theme="dark"] #assetMaintenanceMetricsColumnRoot .asset-maintenance-uptime-card .am-uptime-row {
	border-bottom-color: #3a3a3a;
}
[data-theme="dark"] #assetMaintenanceMetricsColumnRoot .asset-maintenance-uptime-card .am-uptime-row--loss {
	border-top-color: #3a3a3a;
}
[data-theme="dark"] #assetMaintenanceMetricsColumnRoot .asset-maintenance-uptime-card .am-uptime-row__value.is-zero {
	color: #c2c2c2;
}
[data-theme="dark"] #assetMaintenanceMetricsColumnRoot .asset-maintenance-uptime-card .am-uptime-row--loss .am-uptime-row__value {
	color: var(--danger, #dc3545);
}
[data-theme="dark"] #assetMaintenanceMetricsColumnRoot .asset-maintenance-uptime-card .progress {
	background: #262626;
}
[data-theme="dark"] #assetMaintenanceMetricsColumnRoot .asset-maintenance-uptime-card .am-uptime-trend__tile {
	background: #262626;
	border-color: #3a3a3a;
}
[data-theme="dark"] #assetMaintenanceMetricsColumnRoot .asset-maintenance-uptime-card .am-uptime-trend__tile.is-warn strong {
	color: var(--info, #17a2b8);
}
[data-theme="dark"] .am-down-strip {
	border-color: #3a3a3a;
	border-left-color: #dc3545;
	background: rgba(220, 53, 69, 0.15);
	color: #f8d7da;
}
[data-theme="dark"] .am-down-strip__meta {
	color: #c2c2c2;
}
[data-theme="dark"] .am-down-strip__chip,
[data-theme="dark"] .am-down-strip__tag {
	border-color: #3a3a3a;
	background: #262626;
}
[data-theme="dark"] .am-down-strip__tag,
[data-theme="dark"] .am-down-strip__link {
	color: #f8d7da;
}
[data-theme="dark"] a.am-down-strip__chip:hover,
[data-theme="dark"] a.am-down-strip__chip:focus {
	border-color: var(--primary, #009688);
	background: var(--primary, #009688);
	color: #fff;
}
[data-theme="dark"] .am-down-strip__link:hover,
[data-theme="dark"] .am-down-strip__link:focus {
	color: #fff;
}
[data-theme="dark"] .asset-down-badge {
	border-color: rgba(220, 53, 69, 0.45);
	background: rgba(220, 53, 69, 0.15);
	color: #f8d7da;
}
[data-theme="dark"] a.asset-down-badge:hover,
[data-theme="dark"] a.asset-down-badge:focus {
	border-color: #dc3545;
	background: #dc3545;
	color: #fff;
}
[data-theme="dark"] .asset-down-badge--faulty {
	border-color: rgba(251, 140, 0, 0.5);
	background: rgba(251, 140, 0, 0.16);
	color: #ffcc80;
}
[data-theme="dark"] a.asset-down-badge--faulty:hover,
[data-theme="dark"] a.asset-down-badge--faulty:focus {
	border-color: #fb8c00;
	background: #fb8c00;
	color: #fff;
}
[data-theme="dark"] .asset-down-badge--pm {
	border-color: rgba(30, 136, 229, 0.5);
	background: rgba(30, 136, 229, 0.18);
	color: #90caf9;
}
[data-theme="dark"] a.asset-down-badge--pm:hover,
[data-theme="dark"] a.asset-down-badge--pm:focus {
	border-color: #1e88e5;
	background: #1e88e5;
	color: #fff;
}
[data-theme="dark"] #sampleTable.table-cards .ast-list-live-pill {
	background: #262626;
}
[data-theme="dark"] .ast-list-live-chips__label {
	color: #9ca3af;
}
[data-theme="dark"] .ast-list-live-chip {
	border-color: #3a3a3a;
	background: #262626;
	color: #fff;
}
[data-theme="dark"] .adh-intro,
[data-theme="dark"] .adh-card__label,
[data-theme="dark"] .adh-section__why {
	color: #bdbdbd;
}
[data-theme="dark"] .adh-card,
[data-theme="dark"] .adh-card:hover,
[data-theme="dark"] .adh-card:focus {
	border-color: #3a3a3a;
	background: #262626;
	color: #fff;
}
[data-theme="dark"] .adh-card--issue {
	border-left-color: #fb8c00;
}
[data-theme="dark"] .adh-card--ok {
	border-left-color: #28a745;
}
[data-theme="dark"] .adh-card--issue .adh-card__icon,
[data-theme="dark"] .adh-card--issue .adh-card__count,
[data-theme="dark"] .adh-section__title > .fa,
[data-theme="dark"] .adh-detail,
[data-theme="dark"] .adh-diff__old {
	color: #ffcc80;
}
[data-theme="dark"] .adh-diff__label,
[data-theme="dark"] .adh-diff__arrow {
	color: #bdbdbd;
}
[data-theme="dark"] .adh-diff__new {
	color: #fff;
}
@keyframes adh-flash-row-dark {
	0%, 40% { background-color: rgba(255, 255, 255, 0.08); }
	100% { background-color: transparent; }
}
[data-theme="dark"] .adh-passed__item.adh-flash {
	animation: adh-flash-ring 1.8s ease-out, adh-flash-row-dark 1.8s ease-out;
}
[data-theme="dark"] .adh-card--na .adh-card__count {
	color: #bdbdbd;
}
[data-theme="dark"] .adh-section__fix {
	background: #333;
	color: #fff;
}
[data-theme="dark"] .ast-list-live-chip--down .ast-list-live-chip__count {
	color: #f8d7da;
}
[data-theme="dark"] .ast-list-live-chip--faulty .ast-list-live-chip__icon,
[data-theme="dark"] .ast-list-live-chip--faulty .ast-list-live-chip__count {
	color: #ffcc80;
}
[data-theme="dark"] .ast-list-live-chip--pm .ast-list-live-chip__icon,
[data-theme="dark"] .ast-list-live-chip--pm .ast-list-live-chip__count {
	color: #90caf9;
}
[data-theme="dark"] .ast-list-live-chip--down:hover:not(:disabled) {
	border-color: rgba(220, 53, 69, 0.45);
	background: rgba(220, 53, 69, 0.15);
}
[data-theme="dark"] .ast-list-live-chip--faulty:hover:not(:disabled) {
	border-color: rgba(251, 140, 0, 0.5);
	background: rgba(251, 140, 0, 0.16);
}
[data-theme="dark"] .ast-list-live-chip--pm:hover:not(:disabled) {
	border-color: rgba(30, 136, 229, 0.5);
	background: rgba(30, 136, 229, 0.18);
}
[data-theme="dark"] .ast-list-live-chip--down.is-active,
[data-theme="dark"] .ast-list-live-chip--down.is-active:hover {
	border-color: #dc3545;
	background: #dc3545;
	color: #fff;
}
[data-theme="dark"] .ast-list-live-chip--faulty.is-active,
[data-theme="dark"] .ast-list-live-chip--faulty.is-active:hover {
	border-color: #fb8c00;
	background: #fb8c00;
	color: #fff;
}
[data-theme="dark"] .ast-list-live-chip--pm.is-active,
[data-theme="dark"] .ast-list-live-chip--pm.is-active:hover {
	border-color: #1e88e5;
	background: #1e88e5;
	color: #fff;
}
[data-theme="dark"] .ast-list-live-chip.is-active .ast-list-live-chip__icon,
[data-theme="dark"] .ast-list-live-chip.is-active .ast-list-live-chip__count {
	color: inherit;
}
[data-theme="dark"] .ast-list-live-chip--link {
	color: var(--primary, #009688);
}
[data-theme="dark"] .ast-list-live-chip--link:hover,
[data-theme="dark"] .ast-list-live-chip--link:focus {
	border-color: var(--primary, #009688);
	background: var(--primary, #009688);
	color: #fff;
}
[data-theme="dark"] .ast-list-live-chip--panel-toggle .ast-list-live-chip__icon {
	color: var(--primary, #009688);
}
[data-theme="dark"] .ast-list-live-chip--panel-toggle:hover:not(:disabled) {
	border-color: rgba(var(--primary-rgb, 0, 150, 136), 0.55);
	background: rgba(var(--primary-rgb, 0, 150, 136), 0.16);
}
[data-theme="dark"] .ast-list-live-chip--panel-toggle.is-active,
[data-theme="dark"] .ast-list-live-chip--panel-toggle.is-active:hover {
	border-color: var(--primary, #009688);
	background: var(--primary, #009688);
	color: #fff;
}
[data-theme="dark"] .ast-list-live-chip--panel-toggle.is-active .ast-list-live-chip__icon {
	color: #fff;
}

/* Catalog gap Video / Attachment Reported upload drop zones (Attend/Action/Verify/Confirm) */
.cm-catalog-gap-media-tile .cm-gap-upload-drop-zone {
	position: relative;
	border: 1px dashed #d1d5db;
	border-radius: 11px;
	padding: 8px 10px;
	text-align: center;
	background: #fafbfc;
	transition: border-color .2s, background .2s;
	cursor: pointer;
	min-height: 48px;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	margin-top: 6px;
}
.cm-catalog-gap-media-tile .cm-gap-upload-drop-zone:hover,
.cm-catalog-gap-media-tile .cm-gap-upload-drop-zone.drag-over {
	border-color: var(--primary, #009688);
	background: rgba(0, 150, 136, 0.06);
}
.cm-catalog-gap-media-tile .cm-gap-upload-drop-zone .upload-drop-input {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	opacity: 0;
	cursor: pointer;
}
.cm-catalog-gap-media-tile .cm-gap-upload-drop-zone .upload-drop-placeholder p {
	margin: 0;
}
.cm-catalog-gap-media-tile .upload-drop-icon-accent {
	color: var(--primary, #009688);
	margin-bottom: 4px;
}
.cm-catalog-gap-media-tile .upload-drop-label-accent {
	font-size: 12px;
	color: #6c757d;
}
.cm-catalog-gap-media-tile .cm-gap-video-preview,
.cm-catalog-gap-media-tile .cm-gap-attach-preview {
	margin-top: 6px;
}
[data-theme="dark"] .cm-catalog-gap-media-tile .cm-gap-upload-drop-zone {
	border-color: #3a3a3a;
	background: #2a2a2a;
}
[data-theme="dark"] .cm-catalog-gap-media-tile .cm-gap-upload-drop-zone:hover,
[data-theme="dark"] .cm-catalog-gap-media-tile .cm-gap-upload-drop-zone.drag-over {
	border-color: var(--primary, #009688);
	background: #333;
}
[data-theme="dark"] .cm-catalog-gap-media-tile .upload-drop-label-accent {
	color: #c2c2c2;
}

#template_table.css-jkr-q-table .css-jkr-q-rate-cell {
    font-size: 0.875rem;
}

#template_table.css-jkr-q-table .css-jkr-q-rate-cell .form-control,
#template_table.css-jkr-q-table .css-jkr-q-rate-cell .css-jkr-q-rate-input {
    font-size: 0.875rem;
}

#template_table.css-jkr-q-table .css-jkr-q-rate-cell .select2-container--default .select2-selection--single {
    min-height: 2rem;
    height: auto;
}

#template_table.css-jkr-q-table .css-jkr-q-rate-cell .select2-container--default .select2-selection--single .select2-selection__rendered {
    font-size: 0.875rem;
    line-height: 1.85rem;
    padding-left: 0.5rem;
    padding-right: 1.75rem;
}

#template_table.css-jkr-q-table .css-jkr-q-rate-cell .select2-container--default .select2-selection--single .select2-selection__arrow {
    height: 1.85rem;
}

.css-jkr-q-extras-icons {
    margin-top: 8px;
    line-height: 1;
}

.css-jkr-q-extras-icons>span,
.css-jkr-q-extras-icons>label {
    margin-right: 10px;
    vertical-align: middle;
}

.css-jkr-q-extras-icons a.text-info,
.css-jkr-q-extras-icons label.text-info {
    font-size: 0.92em;
    line-height: 1;
}

.css-jkr-q-extras-icons .fa {
    font-size: 1em;
}

.css-jkr-q-attach-preview.preview {
    text-align: center;
}

.css-jkr-q-attach-tile-grid.attachment-grid {
    display: inline-flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 0.35rem;
    max-width: 100%;
}

.css-jkr-q-attach-preview-item {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.4rem;
    max-width: 100%;
    margin: 0 0.25rem 0.5rem;
    vertical-align: top;
}

.css-jkr-q-attach-preview-item--doc {
    text-align: left;
}

.css-jkr-q-attach-preview-item--doc small {
    flex: 1 1 auto;
    min-width: 0;
    word-break: break-word;
}

.css-jkr-q-attach-preview-item--image {
    position: relative;
    flex-direction: column;
}

.css-jkr-q-attach-preview-item--image .css-jkr-q-attach-remove {
    position: absolute;
    top: 2px;
    right: 2px;
    padding: 0 5px;
    line-height: 1.2;
    z-index: 2;
}

.css-jkr-q-attach-preview-item--doc .css-jkr-q-attach-remove {
    position: static;
    flex-shrink: 0;
    padding: 0 6px;
    line-height: 1.2;
}

@media screen and (max-width: 767.98px) {
    .css-jkr-q-table-wrap {
        overflow: visible;
    }

    #template_table.css-jkr-q-table,
    #template_table.css-jkr-q-table tbody {
        display: block;
        width: 100%;
    }

    #template_table.css-jkr-q-table tr.tpl-row {
        display: block;
        width: 100%;
        background: #fff;
        border: 1px solid #e0e0e0;
        border-radius: 12px;
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
        margin-bottom: 16px;
        padding: 16px 14px;
        box-sizing: border-box;
    }

    #template_table.css-jkr-q-table tr.tpl-row td {
        display: block;
        width: 100% !important;
        border: none !important;
        padding: 0 !important;
    }

    #template_table.css-jkr-q-table tr.tpl-row .cell-no {
        font-size: 1.15em;
        font-weight: 700;
        margin-bottom: 8px;
    }

    #template_table.css-jkr-q-table tr.tpl-row .cell-data .view-data {
        font-weight: 700;
        line-height: 1.45;
    }

    #template_table.css-jkr-q-table tr.tpl-row .css-jkr-q-subdata {
        padding-left: 12px !important;
        margin-top: 6px;
    }

    #template_table.css-jkr-q-table tr.tpl-row .css-jkr-q-rate-cell {
        margin-top: 14px;
    }

    #template_table.css-jkr-q-table tr.tpl-row .css-jkr-q-rate-cell .form-control,
    #template_table.css-jkr-q-table tr.tpl-row .css-jkr-q-rate-cell .select2-container {
        width: 100% !important;
        max-width: 100%;
    }

    #template_table.css-jkr-q-table tr.css-jkr-q-row--section .css-jkr-q-rate-cell {
        display: none !important;
    }
}

@media print {
    .css-jkr-q-table-header.d-none.d-md-flex {
        display: flex !important;
    }

    .css-jkr-q-table-wrap {
        overflow: visible !important;
    }

    #template_table.css-jkr-q-table {
        display: table !important;
        width: 100% !important;
        border-collapse: collapse;
    }

    #template_table.css-jkr-q-table tbody {
        display: table-row-group !important;
        width: 100% !important;
    }

    #template_table.css-jkr-q-table tr.tpl-row {
        display: table-row !important;
        background: transparent !important;
        border: none !important;
        border-radius: 0 !important;
        box-shadow: none !important;
        margin-bottom: 0 !important;
        padding: 0 !important;
        page-break-inside: avoid;
    }

    #template_table.css-jkr-q-table tr.tpl-row td {
        display: table-cell !important;
        vertical-align: top !important;
        border-top: 1px solid #ccc !important;
        padding: 8px 6px !important;
    }

    #template_table.css-jkr-q-table tr.tpl-row .cell-no {
        width: 90px !important;
        font-weight: normal;
        margin-bottom: 0;
    }

    #template_table.css-jkr-q-table tr.tpl-row .cell-data .view-data {
        font-weight: normal;
    }

    #template_table.css-jkr-q-table tr.tpl-row .css-jkr-q-rate-cell {
        width: 260px !important;
        margin-top: 0 !important;
    }

    #template_table.css-jkr-q-table tr.css-jkr-q-row--section .css-jkr-q-rate-cell {
        display: table-cell !important;
    }

    .css-jkr-q-extras-icons {
        display: none !important;
    }
}

@media (min-width: 768px) {
    #template_table.css-jkr-q-table tr.tpl-row td {
        border-top: none;
    }
}

[data-theme="dark"] #template_table.css-jkr-q-table tr.tpl-row {
    background: #262626;
    border-color: #3a3a3a;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.35);
}

[data-theme="dark"] #template_table.css-jkr-q-table tr.tpl-row .css-jkr-q-subdata {
    color: #ccc;
}

/* CSS Template settings — scope / multi-active list */
.css-tpl-scope-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.css-tpl-name-input[readonly] {
    background-color: transparent;
    border-color: transparent;
    box-shadow: none;
    padding-left: 0;
    font-weight: 600;
    font-size: 1.15rem;
    color: inherit;
    cursor: default;
}

body.editing .css-tpl-name-input {
    background-color: #fff;
    border-color: #ced4da;
    padding-left: 0.75rem;
    font-weight: 400;
    font-size: 1rem;
    cursor: text;
}

[data-theme="dark"] .css-tpl-name-input[readonly] {
    background-color: transparent;
    color: var(--main-text-color, #fff);
}

[data-theme="dark"] body.editing .css-tpl-name-input {
    background-color: #333;
    border-color: #3a3a3a;
    color: var(--main-text-color, #fff);
}

.css-tpl-scope-collapse-btn {
    color: var(--primary, #009688);
    line-height: 1;
}

.css-tpl-scope-collapse-btn:hover,
.css-tpl-scope-collapse-btn:focus {
    color: #00796b;
    text-decoration: none;
}

.css-tpl-scope-panel.is-collapsed .css-tpl-scope-body {
    display: none;
}

.css-tpl-scope-panel.is-collapsed .css-tpl-scope-chevron {
    transform: rotate(-90deg);
}

.css-tpl-scope-chevron {
    display: inline-block;
    transition: transform 0.2s ease;
    font-size: 14px;
}

.css-tpl-scope-toggle {
    flex-shrink: 0;
    margin-left: auto;
}

.css-tpl-scope-delete {
    flex-shrink: 0;
    line-height: 1;
    min-width: 28px;
    opacity: 0.75;
}

.css-tpl-scope-delete:hover,
.css-tpl-scope-delete:focus {
    opacity: 1;
    text-decoration: none !important;
}

[data-theme="dark"] .css-tpl-scope-delete {
    color: #f48fb1 !important;
}

.css-tpl-scope-row {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 14px;
    border: 1px solid #e0e0e0;
    border-radius: 8px;
    background: #fff;
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.css-tpl-scope-row.is-enabled .css-tpl-scope-rank {
    color: var(--primary, #009688);
    font-weight: 700;
}

.css-tpl-scope-row.is-editing {
    border-color: var(--primary, #009688);
    box-shadow: 0 0 0 1px rgba(0, 150, 136, 0.25);
}

.css-tpl-scope-row.is-draft {
    opacity: 0.92;
}

.css-tpl-scope-rank {
    min-width: 28px;
    text-align: center;
    font-weight: 700;
    color: #666;
    font-size: 13px;
}

.css-tpl-scope-drag {
    color: #999;
    cursor: grab;
    padding: 4px 6px;
}

.css-tpl-scope-row:not(.is-enabled) .css-tpl-scope-drag {
    visibility: hidden;
    pointer-events: none;
}

.css-tpl-scope-main {
    flex: 1;
    display: flex;
    align-items: flex-start;
    gap: 10px;
    min-width: 0;
    color: inherit;
    text-decoration: none !important;
}

.css-tpl-scope-main:hover .css-tpl-scope-title {
    color: var(--primary, #009688);
}

.css-tpl-scope-icon {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: rgba(0, 150, 136, 0.12);
    color: var(--primary, #009688);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.css-tpl-scope-text {
    min-width: 0;
}

.css-tpl-scope-title {
    display: block;
    font-weight: 600;
    font-size: 15px;
    line-height: 1.3;
}

.css-tpl-scope-meta {
    display: block;
    font-size: 12px;
    margin-top: 2px;
}

.css-tpl-badge-inherited {
    font-size: 10px;
    vertical-align: middle;
    margin-left: 6px;
}

.css-tpl-scope-help {
    background: rgba(0, 150, 136, 0.08);
    border-color: rgba(0, 150, 136, 0.25);
}

[data-theme="dark"] .css-tpl-scope-row {
    background: #262626;
    border-color: #3a3a3a;
}

[data-theme="dark"] .css-tpl-scope-rank {
    color: #bbb;
}

[data-theme="dark"] .css-tpl-scope-help {
    background: rgba(0, 150, 136, 0.12);
    border-color: #3a3a3a;
    color: var(--main-text-color, #fff);
}

[data-theme="dark"] .css-tpl-scope-main:hover .css-tpl-scope-title {
    color: #02b3a2;
}

/* Asset List — Show Summary breakdown cards */
#ast_list_breakdown_panel {
    margin-bottom: 0.75rem;
}

/* Assets Report — Show Summary overview cards above "Summary By" tables */
.aor-summary-overview-toolbar {
    display: flex;
    justify-content: flex-end;
}

html:not(.aor-summary-overview-on) .aor-sum-row .cm-ts-overview {
    display: none !important;
}

html.aor-summary-overview-on .aor-sum-row .cm-ts-overview {
    display: block !important;
}

.aor-sum-row .cm-ts-overview {
    background: #fff;
    border: 1px solid #e0e0e0;
    border-radius: 10px;
    padding: 0.75rem 0.85rem;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.05);
}

.aor-sum-row .cm-ts-overview-head {
    margin-bottom: 0.55rem;
}

.aor-sum-row .cm-ts-overview-sub {
    display: block;
    font-size: 0.68rem;
    color: #6c757d;
    line-height: 1.3;
}

.aor-sum-row .cm-ts-overview-stacked {
    display: flex;
    height: 6px;
    border-radius: 4px;
    overflow: hidden;
    background: #e9ecef;
    margin-bottom: 0.55rem;
}

.aor-sum-row .cm-ts-overview-seg {
    display: block;
    height: 100%;
    min-width: 0;
}

.aor-sum-row .cm-ts-overview-rows {
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
}

.aor-sum-row .cm-ts-overview-row-top {
    display: flex;
    align-items: center;
    gap: 0.45rem;
    margin-bottom: 0.15rem;
}

.aor-sum-row .cm-ts-overview-dot {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    flex-shrink: 0;
}

.aor-sum-row .cm-ts-overview-row-label {
    flex: 1;
    font-size: 0.68rem;
    color: #495057;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    min-width: 0;
}

.aor-sum-row .cm-ts-overview-row-value {
    font-size: 0.68rem;
    font-weight: 600;
    color: #2c3e50;
    white-space: nowrap;
    margin-left: auto;
    padding-left: 0.75rem;
    flex-shrink: 0;
}

.aor-sum-row .cm-ts-overview-row--more .cm-ts-overview-row-label,
.aor-sum-row .cm-ts-overview-row--more .cm-ts-overview-row-value {
    color: #6c757d;
}

.aor-sum-row .cm-ts-overview-more-btn {
    display: block;
    width: 100%;
    border: none !important;
    background: transparent !important;
    box-shadow: none !important;
    padding: 0;
    margin: 0;
    text-align: left;
    cursor: pointer;
    color: inherit;
    font: inherit;
    line-height: inherit;
    -webkit-appearance: none;
    appearance: none;
}

.aor-sum-row .cm-ts-overview-more-btn .cm-ts-overview-row-label {
    color: #009688 !important;
    font-weight: 600;
    text-decoration: underline;
    text-underline-offset: 2px;
}

.aor-sum-row .cm-ts-overview-more-btn:hover .cm-ts-overview-row-label,
.aor-sum-row .cm-ts-overview-more-btn:focus .cm-ts-overview-row-label {
    color: #00796b !important;
}

.aor-sum-row .cm-ts-overview-row-bar {
    height: 4px;
    background: #e9ecef;
    border-radius: 3px;
    overflow: hidden;
}

.aor-sum-row .cm-ts-overview-row-bar>span {
    display: block;
    height: 100%;
    border-radius: 3px;
}

[data-theme="dark"] .aor-sum-row .cm-ts-overview {
    background: #262626;
    border-color: #444;
}

[data-theme="dark"] .aor-sum-row .cm-ts-overview-row-value {
    color: #e2e8f0;
}

[data-theme="dark"] .aor-sum-row .cm-ts-overview-sub,
[data-theme="dark"] .aor-sum-row .cm-ts-overview-row-label {
    color: #a0aec0;
}

[data-theme="dark"] .aor-sum-row .cm-ts-overview-row--more .cm-ts-overview-row-label,
[data-theme="dark"] .aor-sum-row .cm-ts-overview-row--more .cm-ts-overview-row-value {
    color: #9aa3ab;
}

[data-theme="dark"] .aor-sum-row .cm-ts-overview-more-btn .cm-ts-overview-row-label {
    color: #4fd1c7 !important;
}

[data-theme="dark"] .aor-sum-row .cm-ts-overview-stacked,
[data-theme="dark"] .aor-sum-row .cm-ts-overview-row-bar {
    background: #3a3a3a;
}

/* Rating setting (ref_Rating) */
.ref-rating-site {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    flex-wrap: wrap;
    margin-bottom: 8px;
}

.ref-rating-site__label {
    font-weight: 600;
}

.ref-rating-site .dropdown-toggle {
    min-width: 150px;
}

.ref-rating-site__rule {
    margin: 8px 0 4px;
    border: 0;
    border-top: 1px solid var(--default-line);
}

.ref-rating-intro {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    margin-bottom: 16px;
}

.ref-rating-intro__title,
.ref-rating-section__title {
    margin: 0 0 4px;
    color: var(--main-text-color);
    font-size: 1.05rem;
    font-weight: 600;
}

.ref-rating-kicker {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    margin-bottom: 14px;
}

.ref-rating-kicker__icon {
    width: 36px;
    height: 36px;
    border-radius: 8px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    background: var(--primary-light);
    color: var(--primary);
}

.ref-rating-section {
    background: #f8f9fa;
    border: 1px solid var(--default-line);
    border-radius: 12px;
    padding: 16px;
}

.ref-rating-rules {
    margin-top: 16px;
}

.ref-rating-note,
.ref-rating-preview__caption {
    margin-top: 10px;
    font-size: 12px;
}

.ref-rating-stepper {
    display: flex;
    width: fit-content;
    margin-left: auto;
    margin-right: auto;
    align-items: stretch;
    border: 1px solid var(--default-line);
    border-radius: 8px;
    overflow: hidden;
    background: #fff;
}

.ref-rating-stepper__btn {
    width: 42px;
    border: 0;
    background: transparent;
    color: var(--primary);
    font-size: 20px;
    line-height: 1;
    cursor: pointer;
}

.ref-rating-stepper__btn:hover,
.ref-rating-stepper__btn:focus {
    background: rgba(0, 150, 136, 0.12);
    outline: none;
}

.ref-rating-stepper input {
    width: 72px;
    border: 0;
    border-left: 1px solid var(--default-line);
    border-right: 1px solid var(--default-line);
    text-align: center;
    font-size: 20px;
    font-weight: 600;
    background: transparent;
    color: var(--main-text-color);
    -moz-appearance: textfield;
    appearance: textfield;
}

.ref-rating-stepper input::-webkit-outer-spin-button,
.ref-rating-stepper input::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

.ref-rating-preview {
    text-align: center;
}

.ref-rating-preview__stars,
.ref-rating-label__stars,
.ref-rating-preview__stars .fa,
.ref-rating-label__stars .fa,
.ref-rating-chip span .fa-star {
    color: #ffc107;
}


/* Cloudy Predict (app/AI/AI_Predictive) — scoped. Shared .cfp-* / .cp-* bits are also used by the asset Cloudy Health Score tab. */
.cloudy-prediction {
    --cp-bg: #fff;
    --cp-ink: #203735;
    --cp-muted: #687c78;
    --cp-line: #e0e9e6;
    --cp-soft: #f5f8f7;
    --cp-accent: var(--primary, #009688);
    --cp-accent-rgb: var(--primary-rgb, 0, 150, 136);
    color: var(--cp-ink);
}

.cloudy-prediction * {
    box-sizing: border-box;
}

.cloudy-prediction h1,
.cloudy-prediction h2,
.cloudy-prediction h3,
.cloudy-prediction h4,
.cloudy-prediction p {
    margin: 0;
}

.cloudy-prediction button,
.cloudy-prediction input,
.cloudy-prediction select {
    font: inherit;
}

.cloudy-prediction button,
.cloudy-prediction summary {
    cursor: pointer;
}

.cloudy-prediction :focus-visible {
    outline: 3px solid rgba(var(--cp-accent-rgb), .45);
    outline-offset: 3px;
}

.cloudy-prediction h2 {
    font-size: 17px;
    font-weight: 700;
    letter-spacing: -.3px;
    margin-bottom: 5px;
}

.cloudy-prediction h4 {
    font-size: 12px;
    font-weight: 700;
    margin: 0 0 10px;
    color: var(--cp-ink);
}

.cloudy-prediction .cp-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    border: 1px solid var(--cp-line);
    background: var(--cp-bg);
    color: var(--cp-ink);
    border-radius: 9px;
    padding: 9px 13px;
    font-size: 12px !important;
    font-weight: 600 !important;
    line-height: 1.4;
    text-decoration: none !important;
    transition: background .15s, border-color .15s;
    white-space: nowrap;
}

.cloudy-prediction .cp-button:hover {
    background: var(--cp-soft);
    border-color: var(--cp-accent);
    color: var(--cp-accent);
}

.cloudy-prediction .cp-button-primary {
    background: var(--cp-accent);
    color: #fff;
    border-color: var(--cp-accent);
    box-shadow: 0 3px 8px rgba(var(--cp-accent-rgb), .12);
}

.cloudy-prediction .cp-button-primary:hover {
    background: var(--primary-btn-hover, #007065);
    border-color: var(--primary-btn-hover, #007065);
    color: #fff;
}

.cloudy-prediction .cp-button:disabled {
    opacity: .55;
    cursor: wait;
}

.cloudy-prediction .cp-link-button {
    border: 0;
    background: none;
    padding: 0;
    color: var(--cp-accent);
    font-weight: 600;
    text-decoration: underline;
}

.cloudy-prediction .cp-label {
    display: block;
    color: var(--cp-muted);
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .05em;
    margin-bottom: 4px;
}

.cloudy-prediction .cp-muted {
    color: var(--cp-muted);
    font-size: 11px;
}

.cloudy-prediction .cp-draft-note {
    color: var(--cp-muted);
    font-size: 11px;
    line-height: 1.6;
    margin-top: 12px !important;
}

/* How it works */
.cloudy-prediction .cp-howto {
    margin-bottom: 20px;
    padding: 18px 20px;
    border: 1px solid rgba(var(--cp-accent-rgb), .25);
    border-radius: 13px;
    background: rgba(var(--cp-accent-rgb), .06);
}

.cloudy-prediction .cp-howto[hidden] {
    display: none;
}

.cloudy-prediction .cp-howto-head {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
    margin-bottom: 12px;
}

.cloudy-prediction .cp-howto-head h2 {
    font-size: 15px;
    margin: 0;
}

.cloudy-prediction .cp-howto ol {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 14px;
}

.cloudy-prediction .cp-howto li {
    display: flex;
    gap: 10px;
    align-items: flex-start;
}

.cloudy-prediction .cp-howto li>i {
    flex: 0 0 32px;
    height: 32px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 9px;
    background: var(--cp-bg);
    color: var(--cp-accent);
}

.cloudy-prediction .cp-howto strong {
    display: block;
    font-size: 13px;
}

.cloudy-prediction .cp-howto span {
    display: block;
    color: var(--cp-muted);
    font-size: 12px;
    line-height: 1.5;
    margin-top: 2px;
}

/* Summary tiles */
.cloudy-prediction .cp-summary {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 16px;
    margin-bottom: 16px;
}

.cloudy-prediction .cp-stat {
    background: var(--cp-bg);
    border: 1px solid var(--cp-line);
    border-radius: 13px;
    padding: 17px 19px 14px;
}

.cloudy-prediction .cp-stat-top {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 10px;
    color: var(--cp-muted);
    font-size: 12px;
    font-weight: 600;
    margin-bottom: 10px;
}

.cloudy-prediction .cp-stat-top i {
    font-size: 16px;
}

.cloudy-prediction .cp-stat>strong {
    display: block;
    font-size: 30px;
    letter-spacing: -1px;
    line-height: 1.2;
    margin-bottom: 8px;
    font-variant-numeric: tabular-nums;
}

.cloudy-prediction .cp-stat-line {
    height: 3px;
    width: 38px;
    border-radius: 4px;
    background: currentColor;
}

.cloudy-prediction .cp-stat-attention .cp-stat-top i,
.cloudy-prediction .cp-stat-attention .cp-stat-line {
    color: #c96545;
}

.cloudy-prediction .cp-stat-watch .cp-stat-top i,
.cloudy-prediction .cp-stat-watch .cp-stat-line {
    color: #bd923c;
}

.cloudy-prediction .cp-stat-stable .cp-stat-top i,
.cloudy-prediction .cp-stat-stable .cp-stat-line {
    color: #31947c;
}

.cloudy-prediction .cp-stat-window .cp-stat-top i {
    color: var(--cp-accent);
}

.cloudy-prediction .cp-trust {
    display: flex;
    gap: 9px;
    align-items: flex-start;
    margin: 0 0 16px;
    padding: 11px 14px;
    border-radius: 10px;
    background: var(--cp-soft);
    border: 1px solid var(--cp-line);
    font-size: 12px;
    line-height: 1.55;
}

.cloudy-prediction .cp-trust[hidden] {
    display: none;
}

.cloudy-prediction .cp-trust i {
    color: var(--cp-accent);
    margin-top: 3px;
}

/* Workspace */
.cloudy-prediction .cp-workspace {
    background: var(--cp-bg);
    border: 1px solid var(--cp-line);
    border-radius: 15px;
    overflow: hidden;
}

.cloudy-prediction .cp-workspace-heading {
    padding: 22px 24px 16px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 16px;
}

.cloudy-prediction .cp-workspace-heading p,
.cloudy-prediction .cp-help p {
    font-size: 13px;
    color: var(--cp-muted);
    line-height: 1.6;
}

.cloudy-prediction .cp-workspace-actions {
    display: flex;
    align-items: center;
    gap: 10px;
}

.cloudy-prediction .cp-count {
    color: var(--cp-muted);
    background: var(--cp-soft);
    padding: 6px 10px;
    border-radius: 7px;
    font-size: 11px;
    white-space: nowrap;
}

.cloudy-prediction .cp-count:empty {
    display: none;
}

.cloudy-prediction .cp-toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 0 24px 18px;
    flex-wrap: wrap;
}

.cloudy-prediction .cp-window {
    display: flex;
    align-items: center;
    gap: 10px;
}

.cloudy-prediction .cp-window>span {
    color: var(--cp-muted);
    font-size: 12px;
    font-weight: 600;
    white-space: nowrap;
}

.cloudy-prediction .cp-segments {
    display: flex;
    padding: 4px;
    background: var(--cp-soft);
    border: 1px solid var(--cp-line);
    border-radius: 10px;
    gap: 3px;
}

.cloudy-prediction .cp-segments button {
    background: transparent;
    border: 0;
    color: var(--cp-muted);
    padding: 7px 12px;
    border-radius: 7px;
    font-size: 12px;
    font-weight: 600;
    white-space: nowrap;
}

.cloudy-prediction .cp-segments button.active {
    color: var(--cp-accent);
    background: var(--cp-bg);
    box-shadow: 0 1px 5px rgba(0, 0, 0, .08);
}

.cloudy-prediction .cp-filter-group {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
}

.cloudy-prediction .cp-search {
    position: relative;
}

.cloudy-prediction .cp-search i {
    position: absolute;
    left: 12px;
    top: 13px;
    color: var(--cp-muted);
    font-size: 12px;
}

.cloudy-prediction .cp-search input,
.cloudy-prediction .cp-filter-group select,
.cloudy-prediction .cp-feedback select,
.cloudy-prediction .cp-feedback input {
    border: 1px solid var(--cp-line);
    border-radius: 9px;
    background: var(--cp-bg);
    color: var(--cp-ink);
    padding: 8px 12px;
    font-size: 12px;
    height: 39px;
}

.cloudy-prediction .cp-search input {
    padding-left: 32px;
    width: 260px;
}

.cloudy-prediction .cp-search input::placeholder {
    color: var(--cp-muted);
}

.cloudy-prediction .cp-notice {
    margin: 0 24px 16px;
    background: var(--cp-soft);
    padding: 12px;
    border-radius: 8px;
    font-size: 12px;
}

.cloudy-prediction .cp-notice[hidden],
.cloudy-prediction .cp-hidden-note[hidden] {
    display: none;
}

.cloudy-prediction .cp-list {
    border-top: 1px solid var(--cp-line);
}

.cloudy-prediction .cp-empty {
    text-align: center;
    padding: 50px 24px;
    color: var(--cp-muted);
    font-size: 13px;
}

.cloudy-prediction .cp-empty>i {
    display: block;
    font-size: 26px;
    margin-bottom: 15px;
    opacity: .55;
}

.cloudy-prediction .cp-empty .cp-button {
    margin-top: 15px;
}

/* Asset row */
.cloudy-prediction .cp-critical {
    --cp-risk: #c34c48;
}

.cloudy-prediction .cp-high {
    --cp-risk: #b56325;
}

.cloudy-prediction .cp-medium {
    --cp-risk: #a67a21;
}

.cloudy-prediction .cp-low {
    --cp-risk: #25866c;
}

.cloudy-prediction .cp-unknown {
    --cp-risk: #607780;
}

.cloudy-prediction .cp-row {
    display: grid;
    grid-template-columns: 96px minmax(150px, 1fr) minmax(180px, 1.4fr) minmax(180px, 1.3fr) auto;
    gap: 20px;
    align-items: start;
    padding: 18px 24px;
    border-bottom: 1px solid var(--cp-line);
    border-left: 4px solid var(--cp-risk, var(--cp-line));
}

.cloudy-prediction .cp-row:last-child {
    border-bottom: 0;
}

.cloudy-prediction .cp-row-expanded {
    background: var(--cp-soft);
}

.cloudy-prediction .cp-row-hidden {
    opacity: .75;
}

.cloudy-prediction .cp-row>div {
    min-width: 0;
}

.cloudy-prediction .cp-pill {
    display: inline-block;
    padding: 4px 10px;
    border-radius: 999px;
    font-size: 11px;
    font-weight: 700;
    color: var(--cp-risk);
    background: color-mix(in srgb, var(--cp-risk) 12%, transparent);
    border: 1px solid color-mix(in srgb, var(--cp-risk) 35%, transparent);
}

.cloudy-prediction .cp-row-risk small {
    display: block;
    margin-top: 7px;
    color: var(--cp-muted);
    font-size: 11px;
}

.cloudy-prediction .cp-row-asset>a {
    color: var(--cp-accent);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .3px;
    overflow-wrap: anywhere;
}

.cloudy-prediction .cp-row-asset h3 {
    font-size: 14px;
    font-weight: 650;
    line-height: 1.45;
    margin: 2px 0 4px;
    overflow-wrap: anywhere;
}

.cloudy-prediction .cp-location {
    color: var(--cp-muted);
    font-size: 11px;
    overflow-wrap: anywhere;
}

.cloudy-prediction .cp-row p {
    font-size: 13px;
    line-height: 1.5;
    font-weight: 600;
    overflow-wrap: anywhere;
}

.cloudy-prediction .cp-row-issue small {
    display: block;
    margin-top: 5px;
    color: var(--cp-muted);
    font-size: 11px;
    line-height: 1.5;
    overflow-wrap: anywhere;
}

.cloudy-prediction .cp-row-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 6px 10px;
    align-items: center;
    margin-top: 7px;
    color: var(--cp-muted);
    font-size: 11px;
}

.cloudy-prediction .cp-chip {
    display: inline-block;
    padding: 3px 8px;
    border-radius: 6px;
    font-size: 11px;
    font-weight: 600;
    background: var(--cp-soft);
    color: var(--cp-muted);
    border: 1px solid var(--cp-line);
}

.cloudy-prediction .cp-chip-info {
    color: var(--cp-accent);
    border-color: rgba(var(--cp-accent-rgb), .3);
    background: rgba(var(--cp-accent-rgb), .07);
}

.cloudy-prediction .cp-chip-warn {
    color: #9a6412;
    border-color: #ecd3a2;
    background: #fdf6e7;
}

.cloudy-prediction .cp-chip-ok {
    color: #25866c;
    border-color: #bfe1d5;
    background: #eef8f4;
}

.cloudy-prediction .cp-row-buttons {
    display: flex;
    flex-direction: column;
    gap: 8px;
    align-items: stretch;
}

.cloudy-prediction .cp-detail {
    grid-column: 1/-1;
}

.cloudy-prediction .cp-detail[hidden] {
    display: none;
}

.cloudy-prediction .cp-hidden-note {
    display: flex;
    gap: 8px;
    align-items: center;
    flex-wrap: wrap;
    padding: 12px 24px;
    border-top: 1px solid var(--cp-line);
    color: var(--cp-muted);
    font-size: 12px;
}

.cloudy-prediction .cp-footnote {
    padding: 14px 24px;
    border-top: 1px solid var(--cp-line);
    display: flex;
    gap: 9px;
    color: var(--cp-muted);
    font-size: 11px;
    line-height: 1.6;
}

.cloudy-prediction .cp-footnote i {
    margin-top: 3px;
}

/* Detail */
.cloudy-prediction .cp-detail-grid {
    display: grid;
    grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr);
    gap: 14px;
    margin-top: 4px;
}

.cloudy-prediction .cp-panel {
    padding: 18px;
    background: var(--cp-bg);
    border: 1px solid var(--cp-line);
    border-radius: 10px;
    min-width: 0;
}

.cloudy-prediction .cp-panel ul {
    padding-left: 18px;
    margin: 0;
    font-size: 12px;
    color: var(--cp-muted);
    line-height: 1.8;
}

.cloudy-prediction .cp-action-objective {
    font-size: 13px;
    margin: 0 0 10px;
}

.cloudy-prediction .cp-action-tasks {
    padding-left: 22px;
    margin: 0;
}

.cloudy-prediction .cp-action-tasks>li {
    margin: 10px 0;
    padding: 10px 12px;
    border: 1px solid var(--cp-line);
    border-radius: 8px;
    background: var(--cp-soft);
}

.cloudy-prediction .cp-action-tasks strong {
    font-size: 13px;
}

.cloudy-prediction .cp-action-tasks p {
    font-size: 12px;
    margin: 6px 0;
    line-height: 1.6;
}

.cloudy-prediction .cp-action-tasks small {
    display: block;
    color: var(--cp-muted);
    line-height: 1.5;
}

.cloudy-prediction .cp-action-outcome {
    border-top: 1px solid var(--cp-line);
    padding-top: 7px;
}

.cloudy-prediction .cp-action-work {
    color: var(--cp-accent);
    font-size: 12px;
    margin-top: 12px;
}

.cloudy-prediction .cp-ai-plan-status {
    color: var(--cp-accent);
    font-size: 12px;
    margin: 0 0 10px;
}

.cloudy-prediction .cp-ai-plan-status:empty {
    display: none;
}

.cloudy-prediction .cp-ai-refine {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px 12px;
    margin: 14px 0;
    padding: 10px 12px;
    border: 1px dashed rgba(var(--cp-accent-rgb), .45);
    border-radius: 9px;
}

.cloudy-prediction .cp-ai-refine small {
    flex: 1 1 220px;
    color: var(--cp-muted);
    font-size: 11px;
    line-height: 1.5;
}

.cloudy-prediction .cp-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 14px;
}

.cloudy-prediction .cp-facts {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px 16px;
    margin: 0 0 6px;
}

.cloudy-prediction .cp-facts dt {
    color: var(--cp-muted);
    font-size: 10px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .04em;
}

.cloudy-prediction .cp-facts dd {
    margin: 3px 0 0;
    font-size: 12px;
    font-weight: 600;
    line-height: 1.45;
    overflow-wrap: anywhere;
}

.cloudy-prediction .cp-parts {
    list-style: none;
    padding: 0 !important;
}

.cloudy-prediction .cp-parts li {
    padding: 7px 0;
    border-top: 1px solid var(--cp-line);
    color: var(--cp-ink);
    line-height: 1.45;
}

.cloudy-prediction .cp-parts strong {
    color: var(--cp-accent);
}

.cloudy-prediction .cp-parts small {
    display: block;
    color: var(--cp-muted);
    font-size: 11px;
}

.cloudy-prediction .cp-panel>h4:not(:first-child),
.cloudy-prediction aside.cp-panel h4 {
    margin-top: 16px;
}

.cloudy-prediction .cp-analysis-details {
    margin-top: 12px;
    padding: 12px 14px;
    border: 1px solid var(--cp-line);
    border-radius: 9px;
    background: var(--cp-bg);
}

.cloudy-prediction .cp-analysis-details>summary {
    color: var(--cp-accent);
    font-weight: 600;
    font-size: 13px;
}

.cloudy-prediction .cp-analysis-details[open]>summary {
    margin-bottom: 14px;
}

.cloudy-prediction .cp-stage-section {
    border-top: 1px solid var(--cp-line);
    margin-top: 16px;
    padding-top: 14px;
}

.cloudy-prediction .cp-plan-text {
    font-size: 12px;
    line-height: 1.65;
    color: var(--cp-muted);
    margin-bottom: 10px !important;
}

.cloudy-prediction .cp-quick-summary {
    padding: 14px;
    border-radius: 10px;
    background: var(--cp-soft);
}

.cloudy-prediction .cp-quick-cards {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 16px;
}

.cloudy-prediction .cp-quick-card p,
.cloudy-prediction .cp-quick-why {
    font-size: 12px;
    line-height: 1.6;
    overflow-wrap: anywhere;
}

.cloudy-prediction .cp-quick-why {
    margin-top: 12px !important;
    padding-top: 10px;
    border-top: 1px solid var(--cp-line);
}

/* "What this could lead to" — failure chain + learned follow-on issues */
.cloudy-prediction .cp-chain {
    margin-top: 12px;
}

.cloudy-prediction .cp-chain-steps {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 10px;
}

.cloudy-prediction .cp-chain-step {
    --cp-risk: var(--cp-accent);
    position: relative;
    padding: 10px 12px;
    border: 1px solid var(--cp-line);
    border-top: 3px solid var(--cp-risk);
    border-radius: 8px;
    background: var(--cp-soft);
    font-size: 12px;
    line-height: 1.5;
    overflow-wrap: anywhere;
}

.cloudy-prediction .cp-chain-step.cp-medium { --cp-risk: #a67a21; }
.cloudy-prediction .cp-chain-step.cp-high { --cp-risk: #b56325; }
.cloudy-prediction .cp-chain-step.cp-critical { --cp-risk: #c34c48; }

.cloudy-prediction .cp-chain-step:not(:last-child)::after {
    content: "\f105";
    font-family: FontAwesome;
    position: absolute;
    right: -9px;
    top: 50%;
    transform: translateY(-50%);
    color: var(--cp-muted);
    font-size: 13px;
}

.cloudy-prediction .cp-chain-tag {
    display: block;
    color: var(--cp-risk);
    font-size: 10px;
    font-weight: 700;
    letter-spacing: .04em;
    text-transform: uppercase;
    margin-bottom: 3px;
}

.cloudy-prediction .cp-chain-step .cp-chip {
    display: table;
    margin-top: 6px;
}

.cloudy-prediction .cp-chain-learned {
    margin-top: 14px;
    padding-top: 12px;
    border-top: 1px solid var(--cp-line);
}

.cloudy-prediction .cp-chain-learned h5 {
    margin: 0 0 4px;
    font-size: 13px;
    font-weight: 600;
}

.cloudy-prediction .cp-chain-followups {
    margin: 0;
    padding-left: 18px;
    font-size: 12px;
    line-height: 1.7;
}

.cloudy-prediction .cp-chain-followups small {
    color: var(--cp-muted);
    margin-left: 4px;
}

.cloudy-prediction .cp-chain h4 .cp-chip {
    margin-left: 6px;
    vertical-align: middle;
    font-weight: 600;
}

.cloudy-prediction .cp-chain-impact {
    display: block;
    margin-top: 5px;
    color: var(--cp-muted);
    font-size: 11px;
}

.cloudy-prediction .cp-chain-waiting {
    display: flex;
    gap: 10px;
    align-items: flex-start;
    margin-top: 12px;
    padding: 10px 12px;
    border: 1px solid #ecd3a2;
    border-radius: 8px;
    background: #fdf6e7;
    color: #7a4f0e;
    font-size: 12px;
    line-height: 1.6;
}

.cloudy-prediction .cp-chain-waiting > i {
    margin-top: 3px;
}

.cloudy-prediction .cp-chain-waiting p {
    margin: 2px 0 0 !important;
}

[data-theme="dark"] .cloudy-prediction .cp-chain-waiting {
    border-color: rgba(255, 193, 7, 0.45);
    background: rgba(255, 193, 7, 0.12);
    color: #ffe08a;
}

.cloudy-prediction .cp-chain-connected {
    margin-top: 14px;
    padding-top: 12px;
    border-top: 1px solid var(--cp-line);
}

.cloudy-prediction .cp-chain-connected h5 {
    margin: 0 0 4px;
    font-size: 13px;
    font-weight: 600;
}

.cloudy-prediction .cp-followup-compare {
    color: var(--cp-muted);
    font-size: 11px;
}

.cloudy-prediction .cp-chain-followups small {
    display: block;
    margin-left: 0;
}

.cloudy-prediction .cp-followup-usual {
    opacity: .7;
}

/* Collapsible "learned" / "connected" parts of the chain */
.cloudy-prediction .cp-chain-more > summary {
    cursor: pointer;
    font-size: 13px;
    font-weight: 600;
    color: var(--cp-ink);
}

.cloudy-prediction .cp-chain-more[open] > summary {
    margin-bottom: 6px;
}

.cloudy-prediction .cp-chain-summary-note {
    margin-left: 6px;
    color: var(--cp-muted);
    font-weight: 400;
    font-size: 12px;
}

.cloudy-prediction .cp-chain-track {
    margin-top: 10px !important;
    color: var(--cp-muted);
    font-size: 12px;
}

.cloudy-prediction .cp-chain-fb {
    display: flex;
    flex-wrap: wrap;
    gap: 6px 8px;
    align-items: center;
    margin-top: 12px;
    padding-top: 10px;
    border-top: 1px solid var(--cp-line);
    font-size: 12px;
}

.cloudy-prediction .cp-chain-fb .cp-button {
    padding: 3px 10px;
    font-size: 12px;
}

.cloudy-prediction .cp-chain-fb-summary {
    color: var(--cp-muted);
}

.cloudy-prediction .cp-chain-fb-note {
    display: flex;
    gap: 6px;
    flex-basis: 100%;
}

.cloudy-prediction .cp-chain-fb-note input {
    flex: 1;
    min-width: 0;
    padding: 4px 8px;
    border: 1px solid var(--cp-line);
    border-radius: 6px;
    background: var(--cp-bg);
    color: var(--cp-ink);
    font-size: 12px;
}

/* List row: what the issue could lead to */
.cloudy-prediction .cp-row-chain {
    margin-top: 6px;
    padding-left: 8px;
    border-left: 3px solid var(--cp-risk);
    font-size: 12px;
    line-height: 1.5;
    color: var(--cp-ink);
}

.cloudy-prediction .cp-row-chain > i {
    color: var(--cp-risk);
}

.cloudy-prediction .cp-row-chain span {
    color: var(--cp-muted);
}

/* Admin: failure chain editor */
.cloudy-prediction .cp-chains-ai {
    margin-bottom: 18px;
    padding-bottom: 14px;
    border-bottom: 1px solid var(--cp-line);
}

.cloudy-prediction .cp-chains-switch {
    display: flex;
    gap: 8px;
    align-items: center;
    margin: 8px 0;
    font-weight: 600;
}

.cloudy-prediction .cp-chains-pick {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
    margin: 10px 0;
}

.cloudy-prediction .cp-chains-pick label,
.cloudy-prediction .cp-chains-stage label {
    display: flex;
    flex-direction: column;
    gap: 4px;
    font-size: 12px;
    font-weight: 600;
}

.cloudy-prediction .cp-chains-pick select,
.cloudy-prediction .cp-chains-stage select,
.cloudy-prediction .cp-chains-stage textarea {
    padding: 6px 8px;
    border: 1px solid var(--cp-line);
    border-radius: 6px;
    background: var(--cp-bg);
    color: var(--cp-ink);
    font-weight: 400;
    font-size: 13px;
}

.cloudy-prediction .cp-chains-stage {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 140px;
    gap: 8px;
    padding: 10px 0;
    border-top: 1px solid var(--cp-line);
}

.cloudy-prediction .cp-chains-stage small {
    grid-column: 1 / -1;
    color: var(--cp-muted);
}

.cloudy-prediction .cp-chains-fb {
    margin-top: 8px;
    padding: 10px 12px;
    border-radius: 8px;
    background: var(--cp-soft);
    font-size: 12px;
}

.cloudy-prediction .cp-chains-fb ul {
    margin: 6px 0 0;
    padding-left: 18px;
}

@media (max-width: 767px) {
    .cloudy-prediction .cp-chains-pick,
    .cloudy-prediction .cp-chains-stage {
        grid-template-columns: minmax(0, 1fr);
    }
}

.cloudy-prediction .cp-chain-note {
    margin-top: 8px !important;
    color: var(--cp-muted);
    font-size: 11px;
}

[data-theme="dark"] .cloudy-prediction .cp-chain-step.cp-medium { --cp-risk: #d8b76a; }
[data-theme="dark"] .cloudy-prediction .cp-chain-step.cp-high { --cp-risk: #e9a369; }
[data-theme="dark"] .cloudy-prediction .cp-chain-step.cp-critical { --cp-risk: #f48b88; }

@media (max-width: 767px) {
    .cloudy-prediction .cp-chain-steps {
        grid-template-columns: minmax(0, 1fr);
    }

    .cloudy-prediction .cp-chain-step:not(:last-child)::after {
        content: "\f107";
        right: 50%;
        top: auto;
        bottom: -12px;
        transform: translateX(50%);
    }
}

.cloudy-prediction .cp-risk-grid {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 14px;
}

.cloudy-prediction .cp-risk-item>span {
    color: var(--cp-muted);
    display: block;
    font-size: 10px;
    margin-bottom: 4px;
}

.cloudy-prediction .cp-risk-item strong {
    font-size: 17px;
    font-weight: 600;
}

.cloudy-prediction .cp-risk-item strong small {
    font-size: 10px;
    color: var(--cp-muted);
}

.cloudy-prediction .cp-risk-item .cp-unknown {
    font-size: 12px;
    color: var(--cp-muted);
}

.cloudy-prediction .cp-meter {
    height: 4px;
    background: var(--cp-line);
    border-radius: 9px;
    overflow: hidden;
    margin: 6px 0;
}

.cloudy-prediction .cp-meter span {
    height: 100%;
    display: block;
    background: var(--cp-risk, var(--cp-accent));
    border-radius: 9px;
}

.cloudy-prediction .cp-horizons {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 8px;
    margin: 14px 0;
    padding-top: 12px;
    border-top: 1px dashed var(--cp-line);
}

.cloudy-prediction .cp-horizons>div {
    font-size: 10px;
    color: var(--cp-muted);
}

.cloudy-prediction .cp-horizons strong {
    display: block;
    margin-top: 3px;
    font-size: 14px;
    color: var(--cp-ink);
}

.cloudy-prediction .cp-explanation-evidence summary {
    color: var(--cp-accent);
    font-size: 12px;
}

.cloudy-prediction .cp-explanation-evidence p {
    font-size: 12px;
    line-height: 1.55;
    margin: 6px 0;
}

.cloudy-prediction .cp-explanation-evidence a,
.cloudy-prediction .pmw-timeline a {
    color: var(--cp-accent);
}

.cloudy-prediction .pmw-timeline {
    padding-left: 20px;
    font-size: 12px;
    margin: 0;
}

.cloudy-prediction .pmw-timeline li {
    padding: 10px 0;
    border-bottom: 1px solid var(--cp-line);
}

.cloudy-prediction .pmw-timeline p {
    margin: 3px 0;
    line-height: 1.5;
}

.cloudy-prediction .pmw-timeline small {
    color: #9a6412;
}

.cloudy-prediction .cp-detail-footer {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
    margin-top: 12px;
}

.cloudy-prediction .cp-feedback {
    font-size: 12px;
    color: var(--cp-muted);
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.cloudy-prediction div.cp-feedback {
    flex-direction: row;
    align-items: center;
}

.cloudy-prediction .cp-feedback>summary {
    color: var(--cp-muted);
    text-decoration: underline;
    text-align: right;
}

.cloudy-prediction .cp-feedback-form {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    align-items: flex-end;
    margin-top: 8px;
    padding: 12px;
    border: 1px solid var(--cp-line);
    border-radius: 9px;
    background: var(--cp-bg);
}

.cloudy-prediction .cp-feedback-form label {
    display: flex;
    flex-direction: column;
    gap: 4px;
    font-size: 11px;
}

.cloudy-prediction .cp-feedback-note {
    flex: 1 1 180px;
}

.cloudy-prediction .cp-feedback-form .cp-draft-note {
    flex-basis: 100%;
    margin: 0 !important;
}

/* Ask Cloudy */
.cloudy-prediction .cp-help {
    display: flex;
    gap: 14px;
    margin-top: 20px;
    padding: 20px;
    border: 1px solid var(--cp-line);
    border-radius: 13px;
    background: var(--cp-bg);
}

.cloudy-prediction .cp-help-icon {
    font-size: 21px;
    color: var(--cp-accent);
}

.cloudy-prediction .cp-help h2 {
    font-size: 14px;
}

.cloudy-prediction .cp-help ul {
    color: var(--cp-muted);
    padding-left: 16px;
    font-size: 12px;
    line-height: 1.8;
    margin: 8px 0 0;
}

/* Dark mode — match app surfaces (#1F1F1F page, #262626 cards, #2d2d2d raised, #3a3a3a borders) */
[data-theme="dark"] .cloudy-prediction {
    color-scheme: dark;
    --cp-bg: #262626;
    --cp-ink: #fff;
    --cp-muted: #adb5bd;
    --cp-line: #3a3a3a;
    --cp-soft: #2d2d2d;
    --cp-accent: #009688;
    --cp-accent-rgb: 0, 150, 136;
}

[data-theme="dark"] .cloudy-prediction a {
    color: #02b3a2;
}

[data-theme="dark"] .cloudy-prediction a:hover {
    color: #02d9c4;
}

[data-theme="dark"] .cloudy-prediction .cp-stat-attention .cp-stat-top i,
[data-theme="dark"] .cloudy-prediction .cp-stat-attention .cp-stat-line {
    color: #f48b88;
}

[data-theme="dark"] .cloudy-prediction .cp-stat-watch .cp-stat-top i,
[data-theme="dark"] .cloudy-prediction .cp-stat-watch .cp-stat-line {
    color: #d8b76a;
}

[data-theme="dark"] .cloudy-prediction .cp-stat-stable .cp-stat-top i,
[data-theme="dark"] .cloudy-prediction .cp-stat-stable .cp-stat-line {
    color: #70c5a9;
}

[data-theme="dark"] .cloudy-prediction .cp-critical {
    --cp-risk: #f48b88;
}

[data-theme="dark"] .cloudy-prediction .cp-high {
    --cp-risk: #e9a369;
}

[data-theme="dark"] .cloudy-prediction .cp-medium {
    --cp-risk: #d8b76a;
}

[data-theme="dark"] .cloudy-prediction .cp-low {
    --cp-risk: #70c5a9;
}

[data-theme="dark"] .cloudy-prediction .cp-unknown {
    --cp-risk: #94a3a8;
}

[data-theme="dark"] .cloudy-prediction .cp-chip-warn {
    color: #ffe08a;
    border-color: #ffc107;
    background: rgba(255, 193, 7, 0.15);
}

[data-theme="dark"] .cloudy-prediction .cp-chip-ok {
    color: #9fdfb4;
    border-color: #28a745;
    background: rgba(40, 167, 69, 0.18);
}

[data-theme="dark"] .cloudy-prediction .pmw-timeline small {
    color: #ffe08a;
}

[data-theme="dark"] .cloudy-prediction .cp-meter-list .cp-meter-outside {
    border-left-color: #f48b88;
}

[data-theme="dark"] .cloudy-prediction .cp-meter-list .cp-meter-approaching {
    border-left-color: #d8b76a;
}

[data-theme="dark"] .cloudy-prediction .cp-meter-list .cp-meter-normal {
    border-left-color: #70c5a9;
}

/* Responsive */
@media(max-width:1200px) {
    .cloudy-prediction .cp-row {
        grid-template-columns: 96px minmax(0, 1fr) minmax(0, 1fr);
    }

    .cloudy-prediction .cp-row-issue {
        grid-column: 2;
    }

    .cloudy-prediction .cp-row-action {
        grid-column: 3;
    }

    .cloudy-prediction .cp-row-asset {
        grid-column: 2 / span 2;
        grid-row: 1;
    }

    .cloudy-prediction .cp-row-buttons {
        grid-column: 2 / span 2;
        flex-direction: row;
        flex-wrap: wrap;
    }

    .cloudy-prediction .cp-risk-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

@media(max-width:900px) {
    .cloudy-prediction .cp-summary {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .cloudy-prediction .cp-howto ol,
    .cloudy-prediction .cp-detail-grid {
        grid-template-columns: 1fr;
    }

    .cloudy-prediction .cp-filter-group,
    .cloudy-prediction .cp-search {
        flex: 1;
    }

    .cloudy-prediction .cp-search input {
        width: 100%;
    }
}

@media(max-width:600px) {
    .cloudy-prediction .cp-summary {
        gap: 10px;
    }

    .cloudy-prediction .cp-stat {
        padding: 14px;
    }

    .cloudy-prediction .cp-stat>strong {
        font-size: 26px;
    }

    .cloudy-prediction .cp-workspace-heading {
        flex-direction: column;
        align-items: flex-start;
        padding: 18px 16px 14px;
    }

    .cloudy-prediction .cp-workspace-actions {
        width: 100%;
        justify-content: space-between;
    }

    .cloudy-prediction .cp-toolbar {
        padding: 0 16px 16px;
    }

    .cloudy-prediction .cp-window {
        width: 100%;
        flex-direction: column;
        align-items: stretch;
        gap: 6px;
    }

    .cloudy-prediction .cp-segments button {
        flex: 1;
        padding: 8px 4px;
    }

    .cloudy-prediction .cp-filter-group {
        min-width: 100%;
    }

    .cloudy-prediction .cp-filter-group select {
        max-width: 130px;
    }

    .cloudy-prediction .cp-row {
        grid-template-columns: minmax(0, 1fr);
        gap: 12px;
        padding: 16px;
    }

    .cloudy-prediction .cp-row>div,
    .cloudy-prediction .cp-row-asset,
    .cloudy-prediction .cp-row-issue,
    .cloudy-prediction .cp-row-action,
    .cloudy-prediction .cp-row-buttons {
        grid-column: 1;
        grid-row: auto;
    }

    .cloudy-prediction .cp-row-risk {
        display: flex;
        align-items: center;
        gap: 10px;
    }

    .cloudy-prediction .cp-row-risk small {
        margin: 0;
    }

    .cloudy-prediction .cp-row-buttons .cp-button {
        flex: 1;
    }

    .cloudy-prediction .cp-facts,
    .cloudy-prediction .cp-quick-cards {
        grid-template-columns: 1fr;
    }

    .cloudy-prediction .cp-risk-grid,
    .cloudy-prediction .cp-horizons {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .cloudy-prediction .cp-panel {
        padding: 14px;
    }

    .cloudy-prediction .cp-notice {
        margin: 0 16px 14px;
    }

    .cloudy-prediction .cp-footnote,
    .cloudy-prediction .cp-hidden-note {
        padding: 12px 16px;
    }
}

@media(prefers-reduced-motion:reduce) {
    .cloudy-prediction * {
        transition: none !important;
    }
}

/* Component prediction panel (also rendered on Assets_Health_Score) */
.cloudy-prediction .cfp-panel {
    margin: 18px 0;
    min-width: 0;
}

.cloudy-prediction .cfp-component,
.cloudy-prediction .cfp-validation {
    border: 1px solid var(--cp-line);
    border-radius: 10px;
    margin: 10px 0;
    padding: 12px;
    background: var(--cp-soft);
}

.cloudy-prediction .cfp-component-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    color: var(--cp-ink);
}

.cloudy-prediction .cfp-component-head>span:first-child {
    flex: 1;
    min-width: 0;
}

.cloudy-prediction .cfp-wo-history {
    margin-top: 12px;
    padding-top: 10px;
    border-top: 1px solid var(--cp-line);
}

.cloudy-prediction .cfp-wo-history h5 {
    margin: 0 0 6px;
    color: var(--cp-muted);
    font-size: 11px;
}

.cloudy-prediction .cfp-component>summary {
    display: flex;
    align-items: center;
    gap: 12px;
    cursor: pointer;
    color: var(--cp-ink);
}

.cloudy-prediction .cfp-component>summary>span:first-child {
    flex: 1;
    min-width: 0;
}

.cloudy-prediction .cfp-component small {
    display: block;
    color: var(--cp-muted);
    margin-top: 4px;
}

.cloudy-prediction .cfp-band {
    padding: 5px 8px;
    border-radius: 6px;
    border: 1px solid currentColor;
    font-size: 12px;
    white-space: nowrap;
}

.cloudy-prediction .cfp-low {
    color: var(--cp-accent);
}

.cloudy-prediction .cfp-medium {
    color: #966500;
}

.cloudy-prediction .cfp-high,
.cloudy-prediction .cfp-critical {
    color: #b83232;
}

[data-theme="dark"] .cloudy-prediction .cfp-medium {
    color: #f4d06f;
}

[data-theme="dark"] .cloudy-prediction .cfp-high,
[data-theme="dark"] .cloudy-prediction .cfp-critical {
    color: #ffaaaa;
}

.cloudy-prediction .cfp-panel p,
.cloudy-prediction .cfp-panel li {
    font-size: 13px;
    line-height: 1.6;
    overflow-wrap: anywhere;
}

.cloudy-prediction .cfp-panel ul {
    padding-left: 20px;
}

.cloudy-prediction .cfp-panel h4 {
    font-size: 13px;
    margin-top: 16px;
}

.cloudy-prediction .cfp-evidence summary,
.cloudy-prediction .cfp-validation>summary {
    cursor: pointer;
    color: var(--cp-accent);
}

.cloudy-prediction .cfp-outcome {
    border-top: 1px solid var(--cp-line);
    padding-top: 10px;
}

@media(max-width:575px) {
    .cloudy-prediction .cfp-component>summary {
        flex-wrap: wrap;
    }

    .cloudy-prediction .cfp-component>summary>span:first-child {
        flex-basis: 100%;
    }

    .cloudy-prediction .cfp-expand {
        margin-left: auto;
    }
}

/* App password visibility toggle (login-style overlay on form-control) */
.input-password-wrap {
    position: relative;
}

.input-password-wrap>.form-control {
    padding-right: 2.75rem;
}

.input-password-wrap>.password-visibility-toggle {
    position: absolute;
    right: 6px;
    top: 50%;
    transform: translateY(-50%);
    z-index: 3;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    padding: 0;
    border: 0;
    border-radius: 8px;
    background: transparent;
    color: #6c757d;
    cursor: pointer;
    line-height: 1;
    transition: color 0.2s, background-color 0.2s;
}

.input-password-wrap>.password-visibility-toggle:hover,
.input-password-wrap>.password-visibility-toggle:focus {
    color: #009688;
    background: rgba(0, 150, 136, 0.08);
    outline: none;
}

.input-password-wrap>.password-visibility-toggle:focus-visible {
    box-shadow: 0 0 0 2px rgba(0, 150, 136, 0.35);
}

[data-theme="dark"] .input-password-wrap>.password-visibility-toggle {
    color: #adb5bd;
}

[data-theme="dark"] .input-password-wrap>.password-visibility-toggle:hover,
[data-theme="dark"] .input-password-wrap>.password-visibility-toggle:focus {
    color: #02b3a2;
    background: rgba(0, 150, 136, 0.16);
}

.ref-rating-preview__stars {
    display: inline-flex;
    flex-direction: column;
    align-items: flex-start;
    margin-top: 12px;
}

.ref-rating-preview__stars-row {
    display: flex;
    justify-content: flex-start;
    flex-wrap: nowrap;
    gap: 4px;
    font-size: 22px;
    line-height: 1.4;
}

.rating[data-rating-rows] {
    overflow: visible;
}

.rating[data-rating-rows]>span {
    margin: 0 !important;
}

.rating[data-rating-rows]>label,
.rating.rating-many[data-rating-rows]>label,
.rating.rating-many-more[data-rating-rows]>label {
    font-size: 3em;
    margin: 0;
    line-height: 1;
}

.rating[data-rating-rows]+#Ratings,
.rating[data-rating-rows]+#Ratings_Confirm,
.rating[data-rating-rows]+#Ratings_Confirm_SubStatus,
.rating[data-rating-rows]+.Ratings {
    margin-top: 4px !important;
}

.ref-rating-preview__stars-row+.ref-rating-preview__stars-row {
    margin-top: 6px;
}

.ref-rating-label__stars {
    letter-spacing: 2px;
    line-height: 1.4;
}

.ref-rating-label__more {
    margin-left: 4px;
    font-size: 12px;
    letter-spacing: 0;
    color: #6c757d;
    font-weight: 600;
}

.ref-rating-labels {
    margin-bottom: 8px;
}

.ref-rating-label {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 8px 10px;
    margin-bottom: 8px;
    border-radius: 8px;
    border: 1px solid var(--default-line);
    background: #fff;
}

.ref-rating-label__meta {
    display: flex;
    align-items: center;
    gap: 8px;
    flex: 0 0 148px;
    min-width: 0;
}

.ref-rating-label__stars {
    font-size: 12px;
    white-space: nowrap;
}

.ref-rating-label__count {
    font-size: 12px;
    color: #6c757d;
    white-space: nowrap;
}

.ref-rating-label .form-control {
    flex: 1 1 auto;
    min-width: 0;
}

.ref-rating-toggle {
    margin-bottom: 12px;
}

.ref-rating-chip-label {
    font-weight: 600;
}

.ref-rating-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.ref-rating-chip {
    position: relative;
    margin: 0;
}

.ref-rating-chip input {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    border: 0;
}

.ref-rating-chip span {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 12px;
    border-radius: 999px;
    border: 1px solid var(--default-line);
    background: #fff;
    cursor: pointer;
    color: var(--main-text-color);
    font-size: 13px;
    font-weight: 600;
}

.ref-rating-chip span .fa-star {
    color: #ffc107;
}

.ref-rating-chip input:checked+span {
    background: rgba(0, 150, 136, 0.14);
    border-color: var(--primary);
    color: var(--primary);
}

.ref-rating-chip input:focus+span,
.ref-rating-chip input:focus-visible+span {
    outline: 2px solid var(--primary);
    outline-offset: 2px;
}

.ref-rating-preview-note {
    margin-top: 12px;
}

[data-theme="dark"] .ref-rating-preview-note.alert-info {
    background: rgba(0, 150, 136, 0.22);
    border-color: #02b3a2;
    color: #fff;
}

[data-theme="dark"] .ref-rating-preview-note.alert-warning {
    background: #333;
    border-color: #3a3a3a;
    color: #fff;
}

.ref-rating-actions {
    display: flex;
    justify-content: flex-end;
    gap: 8px;
    flex-wrap: wrap;
    margin-top: 16px;
}

@media (max-width: 767px) {
    .ref-rating-label {
        flex-direction: column;
        align-items: stretch;
    }

    .ref-rating-label__meta {
        flex-basis: auto;
    }

    .ref-rating-actions .btn {
        flex: 1 1 auto;
    }
}

[data-theme="dark"] .ref-rating-kicker__icon {
    background: rgba(0, 150, 136, 0.22);
    color: #02b3a2;
}

[data-theme="dark"] .ref-rating-section {
    background: #262626;
    border-color: #3a3a3a;
}

[data-theme="dark"] .ref-rating-stepper {
    background: #1c1b1b;
    border-color: #3a3a3a;
}

[data-theme="dark"] .ref-rating-stepper input {
    color: #fff;
    border-color: #3a3a3a;
}

[data-theme="dark"] .ref-rating-stepper__btn:hover,
[data-theme="dark"] .ref-rating-stepper__btn:focus {
    background: rgba(0, 150, 136, 0.22);
}

[data-theme="dark"] .ref-rating-label {
    background: #333;
    border-color: #3a3a3a;
}

[data-theme="dark"] .ref-rating-label .form-control {
    background: #262626;
    border-color: #3a3a3a;
    color: #fff;
}

[data-theme="dark"] .ref-rating-label__count,
[data-theme="dark"] .ref-rating-label__more {
    color: #c2c2c2;
}

[data-theme="dark"] .ref-rating-chip span {
    background: #333;
    border-color: #3a3a3a;
    color: #fff;
}

[data-theme="dark"] .ref-rating-chip input:checked+span {
    background: rgba(0, 150, 136, 0.28);
    border-color: #02b3a2;
    color: #02b3a2;
}


/* ═══════════════════════════════════════════════════════════════════════════
   Dashboard Template setting — gallery cards + Print Studio
   app/Setting/Widget_Template.php
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── Gallery toolbar ── */
.tpl-gallery-tile {
    padding: 0;
    overflow: hidden;
}

.tpl-toolbar {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
    padding: 16px 18px 12px;
    border-bottom: 1px solid var(--default-line);
}

.tpl-toolbar__title {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 0;
    font-size: 16px;
    font-weight: 700;
    color: var(--main-text-color);
}

.tpl-toolbar__title .fa {
    color: var(--primary);
}

.tpl-toolbar__count {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 24px;
    height: 20px;
    padding: 0 7px;
    border-radius: 999px;
    background: rgba(var(--primary-rgb, 0, 150, 136), 0.12);
    color: var(--primary);
    font-size: 12px;
    font-weight: 700;
}

.tpl-toolbar__sub {
    margin: 4px 0 0;
    font-size: 12px;
    color: #6c757d;
}

.tpl-toolbar__actions {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}

.tpl-search {
    position: relative;
}

.tpl-search .fa {
    position: absolute;
    top: 50%;
    left: 10px;
    transform: translateY(-50%);
    color: #adb5bd;
    font-size: 12px;
    pointer-events: none;
}

.tpl-search input {
    width: 220px;
    padding-left: 30px;
    border-radius: 999px;
}

/* ── Filter chips ── */
.tpl-filterbar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 10px 18px;
    background: #f8f9fa;
    border-bottom: 1px solid var(--default-line);
}

.tpl-chip-group {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.tpl-chip {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 4px 12px;
    border: 1px solid var(--default-line);
    border-radius: 999px;
    background: #fff;
    color: #6c757d;
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
    transition: background .15s ease, color .15s ease, border-color .15s ease;
}

.tpl-chip:hover {
    border-color: var(--primary);
    color: var(--primary);
}

.tpl-chip.active {
    background: var(--primary);
    border-color: var(--primary);
    color: #fff;
}

.tpl-filterbar__right {
    display: flex;
    align-items: center;
    gap: 8px;
}

.tpl-ghost-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 12px;
    border: 1px solid var(--default-line);
    border-radius: 6px;
    background: #fff;
    color: var(--main-text-color);
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
}

.tpl-ghost-btn:hover:not(:disabled) {
    border-color: var(--primary);
    color: var(--primary);
}

.tpl-ghost-btn.active {
    background: rgba(var(--primary-rgb, 0, 150, 136), 0.12);
    border-color: var(--primary);
    color: var(--primary);
}

.tpl-ghost-btn:disabled {
    opacity: .55;
    cursor: not-allowed;
}

.tpl-ghost-btn--danger:hover:not(:disabled) {
    border-color: var(--danger, #dc3545);
    color: var(--danger, #dc3545);
}

.tpl-ghost-btn__count {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 18px;
    height: 18px;
    padding: 0 5px;
    border-radius: 999px;
    background: rgba(var(--danger-rgb, 220, 53, 69), 0.14);
    color: var(--danger, #dc3545);
    font-size: 11px;
    font-weight: 700;
}

/* ── Template cards ── */
.tpl-card-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(290px, 1fr));
    gap: 12px;
    padding: 16px 18px;
}

.tpl-card {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: 14px;
    border: 1px solid var(--default-line);
    border-left: 3px solid rgba(var(--primary-rgb, 0, 150, 136), 0.35);
    border-radius: 10px;
    background: #fff;
    box-shadow: 0 1px 3px rgba(0, 0, 0, .05);
    transition: box-shadow .15s ease, transform .15s ease, border-color .15s ease;
}

.tpl-card:hover {
    box-shadow: 0 4px 14px rgba(0, 0, 0, .09);
    transform: translateY(-1px);
    border-left-color: var(--primary);
}

.tpl-card--active {
    border-left-color: var(--primary);
    background: rgba(var(--primary-rgb, 0, 150, 136), 0.04);
    box-shadow: 0 0 0 1px var(--primary) inset;
}

.tpl-card--picked {
    background: rgba(var(--primary-rgb, 0, 150, 136), 0.08);
}

.tpl-card__pick {
    display: none;
    position: absolute;
    top: 10px;
    right: 10px;
    margin: 0;
    z-index: 2;
}

.tpl-card-grid--selecting .tpl-card {
    cursor: pointer;
}

.tpl-card-grid--selecting .tpl-card__pick {
    display: block;
}

.tpl-card-grid--selecting .tpl-card__tools {
    visibility: hidden;
}

.tpl-card {
    cursor: pointer;
}

.tpl-card-grid--selecting .tpl-card {
    cursor: default;
}

.tpl-card__open {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    color: inherit;
    text-decoration: none;
    border: 0;
    background: transparent;
    padding: 0;
    margin: 0;
    width: 100%;
    text-align: left;
    font: inherit;
    cursor: inherit;
}

.tpl-card__open:hover,
.tpl-card__open:focus {
    color: inherit;
    text-decoration: none;
    outline: none;
}

.tpl-card__avatar {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 34px;
    width: 34px;
    height: 34px;
    border-radius: 9px;
    background: rgba(var(--primary-rgb, 0, 150, 136), 0.12);
    color: var(--primary);
    font-size: 15px;
}

.tpl-card__body {
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.tpl-card__name {
    font-size: 14px;
    font-weight: 700;
    line-height: 1.3;
    color: var(--main-text-color);
    overflow-wrap: anywhere;
}

.tpl-card__open:hover .tpl-card__name {
    color: var(--primary);
}

.tpl-card__site,
.tpl-card__remark {
    font-size: 11.5px;
    color: #6c757d;
    line-height: 1.4;
}

.tpl-card__remark {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.tpl-card__meta {
    display: flex;
    flex-wrap: wrap;
    gap: 5px;
}

.tpl-card__tools {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    padding-top: 8px;
    border-top: 1px dashed var(--default-line);
}

.tpl-card-tool-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 5px;
    flex: 1 1 calc(50% - 3px);
    min-width: 0;
    min-height: 28px;
    padding: 4px 8px;
    border: 1px solid var(--default-line);
    border-radius: 6px;
    background: #fff;
    color: #6c757d;
    font-size: 11px;
    font-weight: 600;
    line-height: 1.2;
    cursor: pointer;
    text-decoration: none;
    white-space: nowrap;
}

.tpl-card-tool-btn .fa {
    flex-shrink: 0;
    font-size: 12px;
}

.tpl-card-tool-btn span {
    overflow: hidden;
    text-overflow: ellipsis;
}

.tpl-card-tool-btn:hover {
    border-color: var(--primary);
    background: rgba(var(--primary-rgb, 0, 150, 136), 0.1);
    color: var(--primary);
    text-decoration: none;
}

.tpl-pill {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 2px 8px;
    border: 1px solid var(--default-line);
    border-radius: 999px;
    background: #f8f9fa;
    color: #6c757d;
    font-size: 11px;
    font-weight: 600;
    white-space: nowrap;
}

.tpl-pill--ok {
    background: rgba(var(--primary-rgb, 0, 150, 136), 0.12);
    border-color: rgba(var(--primary-rgb, 0, 150, 136), 0.35);
    color: var(--primary);
}

.tpl-pill--warn {
    background: rgba(var(--warning-rgb, 255, 193, 7), 0.16);
    border-color: rgba(var(--warning-rgb, 255, 193, 7), 0.45);
    color: #8a6100;
}

.tpl-icon-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    border: 1px solid var(--default-line);
    border-radius: 6px;
    background: #fff;
    color: #6c757d;
    font-size: 12px;
    cursor: pointer;
    text-decoration: none;
}

.tpl-icon-btn:hover {
    border-color: var(--primary);
    background: rgba(var(--primary-rgb, 0, 150, 136), 0.1);
    color: var(--primary);
    text-decoration: none;
}

.tpl-empty {
    padding: 48px 18px;
    text-align: center;
    color: #6c757d;
}

.tpl-empty .fa {
    font-size: 34px;
    opacity: .28;
}

.tpl-empty p {
    margin: 12px 0;
    font-size: 13px;
}

/* ── Detail panel ── */
.tpl-detail {
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.tpl-detail--loading {
    align-items: center;
    justify-content: center;
    min-height: 120px;
    padding: 24px;
}

.tpl-detail-root--loading .tpl-detail--loading {
    opacity: 0.85;
}

.tpl-detail__head {
    display: flex;
    align-items: flex-start;
    gap: 10px;
}

.tpl-detail__avatar {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 40px;
    width: 40px;
    height: 40px;
    border-radius: 10px;
    background: rgba(var(--primary-rgb, 0, 150, 136), 0.12);
    color: var(--primary);
    font-size: 17px;
}

.tpl-detail__headtext {
    flex: 1 1 auto;
    min-width: 0;
}

.tpl-detail__headtext h5 {
    margin: 0;
    font-size: 15.5px;
    font-weight: 700;
    color: var(--main-text-color);
    overflow-wrap: anywhere;
}

.tpl-detail__headtext p {
    margin: 2px 0 0;
    font-size: 12px;
    color: #6c757d;
}

.tpl-detail__remark {
    font-style: italic;
}

.tpl-stat-row {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 8px;
}

.tpl-stat {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
    padding: 10px 6px;
    border: 1px solid var(--default-line);
    border-radius: 8px;
    background: #f8f9fa;
}

.tpl-stat__value {
    font-size: 19px;
    font-weight: 700;
    line-height: 1;
    color: var(--primary);
}

.tpl-stat__label {
    font-size: 11px;
    font-weight: 600;
    color: #6c757d;
    text-align: center;
}

.tpl-panel {
    padding: 12px;
    border: 1px solid var(--default-line);
    border-radius: 9px;
    background: #f8f9fa;
}

.tpl-panel__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    margin-bottom: 8px;
}

.tpl-panel__head h6 {
    display: flex;
    align-items: center;
    gap: 6px;
    margin: 0;
    font-size: 11.5px;
    font-weight: 700;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: #6c757d;
}

.tpl-panel__head h6 .fa {
    color: var(--primary);
}

.tpl-panel__empty {
    margin: 0;
    font-size: 12px;
    font-style: italic;
    color: #6c757d;
}

.tpl-kv {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 5px 12px;
    margin: 0;
    font-size: 12.5px;
}

.tpl-kv dt {
    font-weight: 500;
    color: #6c757d;
}

.tpl-kv dd {
    margin: 0;
    color: var(--main-text-color);
}

.tpl-flagrow {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.tpl-flag {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 3px 9px;
    border: 1px solid var(--default-line);
    border-radius: 6px;
    background: #fff;
    color: #adb5bd;
    font-size: 11.5px;
    font-weight: 600;
}

.tpl-flag--on {
    border-color: rgba(var(--primary-rgb, 0, 150, 136), 0.35);
    background: rgba(var(--primary-rgb, 0, 150, 136), 0.1);
    color: var(--primary);
}

.tpl-reclist+.tpl-reclist {
    margin-top: 8px;
}

.tpl-reclist small {
    display: block;
    margin-bottom: 4px;
    font-size: 11px;
    font-weight: 600;
    color: #6c757d;
}

.tpl-reclist>div {
    display: flex;
    flex-wrap: wrap;
    gap: 5px;
}

.tpl-chip-static {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 3px 9px;
    border: 1px solid var(--default-line);
    border-radius: 999px;
    background: #fff;
    color: var(--main-text-color);
    font-size: 11.5px;
    overflow-wrap: anywhere;
}

.tpl-chip-static .fa {
    color: var(--primary);
}

.tpl-detail__actions {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

/* ── Print Studio modal ── */
.tpl-ps-dialog {
    max-width: 1180px;
    width: 96vw;
    margin: 1.4rem auto;
}

#Modal_Print_Studio .modal-content {
    max-height: calc(100vh - 2.8rem);
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.tpl-ps__header {
    align-items: flex-start;
    flex: 0 0 auto;
}

.tpl-ps__subtitle {
    display: block;
    margin-top: 2px;
    font-size: 12px;
    color: #6c757d;
}

.tpl-ps__body {
    display: flex;
    align-items: stretch;
    gap: 0;
    padding: 0;
    flex: 1 1 auto;
    max-height: none;
    height: calc(100vh - 11rem);
    min-height: 0;
    overflow: hidden;
}

#Modal_Print_Studio .tpl-ps__footer {
    flex: 0 0 auto;
}

.tpl-ps__rail {
    flex: 0 0 292px;
    max-width: 292px;
    padding: 14px 16px;
    overflow-y: auto;
    border-right: 1px solid var(--default-line);
    background: #f8f9fa;
}

.tpl-ps-group+.tpl-ps-group {
    margin-top: 16px;
    padding-top: 14px;
    border-top: 1px solid var(--default-line);
}

.tpl-ps-group__title {
    display: flex;
    align-items: center;
    gap: 6px;
    margin: 0 0 9px;
    font-size: 11.5px;
    font-weight: 700;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: #6c757d;
}

.tpl-ps-group__title .fa {
    color: var(--primary);
}

.tpl-ps-hint {
    margin: 7px 0 0;
    font-size: 11.5px;
    line-height: 1.45;
    color: #6c757d;
}

.tpl-ps-label {
    display: block;
    margin-bottom: 3px;
    font-size: 11.5px;
    font-weight: 600;
    color: #6c757d;
}

.tpl-ps-sub {
    margin-top: 10px;
    padding-left: 10px;
    border-left: 2px solid var(--default-line);
    transition: opacity .15s ease;
}

.tpl-ps-sub--off {
    opacity: .42;
    pointer-events: none;
}

/* Switch + checkbox controls */
.tpl-switch {
    display: flex;
    align-items: center;
    gap: 9px;
    margin: 0;
    cursor: pointer;
}

.tpl-switch input {
    position: absolute;
    opacity: 0;
    width: 0;
    height: 0;
}

.tpl-switch__track {
    position: relative;
    flex: 0 0 34px;
    width: 34px;
    height: 18px;
    border-radius: 999px;
    background: #ced4da;
    transition: background .15s ease;
}

.tpl-switch__track::after {
    content: "";
    position: absolute;
    top: 2px;
    left: 2px;
    width: 14px;
    height: 14px;
    border-radius: 50%;
    background: #fff;
    box-shadow: 0 1px 2px rgba(0, 0, 0, .25);
    transition: transform .15s ease;
}

.tpl-switch input:checked+.tpl-switch__track {
    background: var(--primary);
}

.tpl-switch input:checked+.tpl-switch__track::after {
    transform: translateX(16px);
}

.tpl-switch input:focus-visible+.tpl-switch__track {
    outline: 2px solid var(--primary);
    outline-offset: 2px;
}

.tpl-switch__label {
    font-size: 12.5px;
    font-weight: 600;
    color: var(--main-text-color);
    line-height: 1.35;
}

.tpl-check {
    display: flex;
    align-items: center;
    gap: 7px;
    margin: 0 0 6px;
    font-size: 12px;
    color: var(--main-text-color);
    cursor: pointer;
}

.tpl-check input {
    margin: 0;
}

.tpl-radio-row {
    display: flex;
    gap: 8px;
}

.tpl-radio {
    flex: 1 1 0;
    margin: 0;
    cursor: pointer;
}

.tpl-radio input {
    position: absolute;
    opacity: 0;
    width: 0;
    height: 0;
}

.tpl-radio span {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 5px;
    padding: 9px 6px;
    border: 1px solid var(--default-line);
    border-radius: 8px;
    background: #fff;
    font-size: 11.5px;
    font-weight: 600;
    color: #6c757d;
    text-align: center;
}

.tpl-radio span .fa {
    font-size: 16px;
}

.tpl-radio input:checked+span {
    border-color: var(--primary);
    background: rgba(var(--primary-rgb, 0, 150, 136), 0.12);
    color: var(--primary);
}

/* Preview stage */
.tpl-ps__stage {
    flex: 1 1 auto;
    min-width: 0;
    min-height: 0;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.tpl-ps-stagebar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 11px 16px;
    border-bottom: 1px solid var(--default-line);
}

.tpl-ps-stagebar__lead strong {
    display: block;
    font-size: 13px;
    color: var(--main-text-color);
}

.tpl-ps-stagebar__hint {
    font-size: 11.5px;
    color: #6c757d;
}

.tpl-ps-stagebar__tools {
    display: flex;
    gap: 7px;
}

.tpl-ps-scroll {
    flex: 1 1 auto;
    min-height: 0;
    overflow-x: hidden;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;
    padding: 16px;
    background: #eceff1;
}

.tpl-ps-loading,
.tpl-ps-empty {
    padding: 56px 18px;
    text-align: center;
    color: #6c757d;
}

.tpl-ps-loading .fa,
.tpl-ps-empty .fa {
    font-size: 28px;
    opacity: .4;
}

.tpl-ps-loading p,
.tpl-ps-empty p {
    margin: 10px 0 0;
    font-size: 12.5px;
}

.tpl-ps__footer {
    flex-wrap: wrap;
    gap: 8px;
}

.tpl-ps__footnote {
    flex: 1 1 260px;
    display: inline-flex;
    align-items: flex-start;
    gap: 6px;
    margin: 0;
    padding: 6px 10px;
    border: 1px solid rgba(var(--warning-rgb, 255, 193, 7), 0.45);
    border-radius: 6px;
    background: rgba(var(--warning-rgb, 255, 193, 7), 0.14);
    font-size: 11.5px;
    font-weight: 600;
    line-height: 1.35;
    color: #8a6100;
}

.tpl-ps__footnote .fa {
    flex-shrink: 0;
    margin-top: 1px;
    color: #d39e00;
}

/* Page sheets */
.ps-page+.ps-page {
    margin-top: 18px;
}

.ps-page__bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    margin-bottom: 5px;
}

.ps-page__label {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-size: 11.5px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .05em;
    color: #6c757d;
}

.ps-page__label b {
    color: var(--primary);
}

.ps-page__right {
    display: inline-flex;
    align-items: center;
    gap: 7px;
}

.ps-page__count {
    font-size: 11px;
    color: #6c757d;
}

.ps-page__remove {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 20px;
    height: 20px;
    border: 1px solid var(--default-line);
    border-radius: 5px;
    background: #fff;
    color: #adb5bd;
    font-size: 10px;
    cursor: pointer;
}

.ps-page__remove:hover {
    border-color: var(--danger, #dc3545);
    color: var(--danger, #dc3545);
}

.ps-sheet {
    display: flex;
    flex-direction: column;
    /* Grow with widgets so bottom cards stay reachable via .tpl-ps-scroll;
       min-height approximates A4 landscape / portrait proportions. */
    width: 100%;
    height: auto;
    min-height: clamp(280px, 38vw, 560px);
    padding: 12px;
    border: 1px solid #cfd8dc;
    border-radius: 4px;
    background: #fff;
    box-shadow: 0 2px 8px rgba(0, 0, 0, .12);
    overflow: hidden;
    isolation: isolate;
    position: relative;
}

#ps-pages[data-orientation="portrait"] .ps-sheet {
    min-height: clamp(420px, 56vw, 820px);
}

#ps-pages[data-orientation="landscape"] .ps-sheet {
    min-height: clamp(280px, 38vw, 560px);
}

.ps-page--overflow .ps-sheet {
    border-color: rgba(255, 152, 0, .7);
    box-shadow: 0 0 0 2px rgba(255, 152, 0, .22), 0 2px 8px rgba(0, 0, 0, .12);
}

.ps-sheet__header {
    display: flex;
    align-items: center;
    gap: 8px;
    padding-bottom: 6px;
    margin-bottom: 8px;
    border-bottom: 2px solid rgba(var(--primary-rgb, 0, 150, 136), 0.35);
}

.ps-chrome__logo {
    flex: 0 0 22px;
    width: 22px;
    height: 22px;
    border-radius: 4px;
    background: rgba(var(--primary-rgb, 0, 150, 136), 0.18);
}

.ps-chrome__text {
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 1px;
}

.ps-chrome__title {
    font-size: 11px;
    font-weight: 700;
    color: #212529;
    line-height: 1.25;
    overflow-wrap: anywhere;
}

.ps-chrome__note {
    font-size: 9px;
    color: #6c757d;
    overflow-wrap: anywhere;
}

.ps-chrome__meta {
    display: block;
    width: 120px;
    max-width: 60%;
    height: 5px;
    border-radius: 3px;
    background: #e9ecef;
}

.ps-sheet__footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    margin-top: auto;
    padding-top: 6px;
    border-top: 1px solid #e9ecef;
}

.ps-chrome__footer-text {
    font-size: 9px;
    color: #6c757d;
    overflow-wrap: anywhere;
}

.ps-sheet__slots {
    display: flex;
    flex-direction: column;
    flex-wrap: nowrap;
    align-content: flex-start;
    align-items: stretch;
    flex: 1 1 auto;
    min-height: 60px;
    margin: 0;
    gap: 8px;
}

.ps-sheet__placeholder {
    padding: 24px 10px;
    border: 1px dashed #cfd8dc;
    border-radius: 6px;
    color: #adb5bd;
    font-size: 11.5px;
    text-align: center;
}

/* Widget blocks */
.ps-widget {
    padding: 0 3px 6px;
    min-width: 0;
}

.ps-widget__inner {
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    gap: 6px;
    height: 100%;
    min-height: 120px;
    padding: 7px 8px;
    border: 1px solid rgba(var(--primary-rgb, 0, 150, 136), 0.3);
    border-left: 3px solid rgba(var(--primary-rgb, 0, 150, 136), 0.7);
    border-radius: 6px;
    background: rgba(var(--primary-rgb, 0, 150, 136), 0.05);
}

.ps-widget--locked .ps-widget__inner {
    border-color: #ced4da;
    border-left-color: #adb5bd;
    background: #f1f3f5;
}

.ps-widget--print-overflow .ps-widget__inner {
    border-color: rgba(255, 152, 0, 0.65);
    border-left-color: #ff9800;
    box-shadow: 0 0 0 1px rgba(255, 152, 0, 0.25);
}

.ps-widget__overflow-warn {
    display: flex;
    align-items: flex-start;
    gap: 5px;
    margin: 0 0 4px;
    padding: 4px 6px;
    border-radius: 4px;
    font-size: 10px;
    font-weight: 700;
    line-height: 1.35;
    color: #8a6100;
    background: rgba(var(--warning-rgb, 255, 193, 7), 0.22);
    border: 1px solid rgba(255, 152, 0, 0.45);
}

.ps-widget__overflow-warn .fa {
    flex-shrink: 0;
    margin-top: 1px;
    color: #ff9800;
}

.ps-widget__top {
    display: flex;
    align-items: flex-start;
    gap: 5px;
    cursor: move;
    font-size: 11px;
    line-height: 1.3;
    color: #37474f;
}

.ps-widget__top .fa {
    flex: 0 0 auto;
    margin-top: 1px;
    color: var(--primary);
}

.ps-widget__name {
    flex: 1 1 auto;
    min-width: 0;
    font-weight: 600;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.ps-widget__filter {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 22px;
    height: 22px;
    padding: 0;
    border: 1px solid rgba(var(--primary-rgb, 0, 150, 136), 0.35);
    border-radius: 4px;
    background: #fff;
    color: #90a4ae;
    font-size: 10px;
    cursor: pointer;
}

.ps-widget__filter--on {
    background: rgba(var(--primary-rgb, 0, 150, 136), 0.12);
    border-color: var(--primary);
    color: var(--primary);
}

.ps-widget__preview {
    flex: 1 1 auto;
    position: relative;
    min-height: 100px;
    max-height: 168px;
    border-radius: 4px;
    overflow: hidden;
    background: #fff;
    border: 1px solid rgba(0, 0, 0, 0.06);
    overscroll-behavior: contain;
    cursor: default;
    isolation: isolate;
    contain: paint;
}

.ps-widget__frame {
    display: block;
    width: 100%;
    height: 520px;
    min-height: 520px;
    max-width: 100%;
    border: 0;
    pointer-events: auto;
    background: #fff;
}

.ps-dragging .ps-widget__preview {
    overflow: hidden;
    pointer-events: none;
}

.ps-dragging .ps-widget__frame {
    pointer-events: none;
}

.ps-widget__meta {
    font-size: 9.5px;
    font-weight: 700;
    color: #78909c;
}

.tpl-ps-swatches {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-top: 4px;
}

.tpl-ps-swatches--text {
    margin-top: 6px;
}

.tpl-ps-swatch {
    width: 22px;
    height: 22px;
    padding: 0;
    border: 2px solid transparent;
    border-radius: 50%;
    cursor: pointer;
    box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.12);
}

.tpl-ps-swatch.is-active {
    border-color: var(--primary);
    box-shadow: 0 0 0 1px var(--primary);
}

.tpl-ps-color-input-row {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 6px;
}

.tpl-ps-color-native {
    flex: 0 0 32px;
    width: 32px;
    height: 28px;
    padding: 0;
    border: 1px solid var(--default-line);
    border-radius: 4px;
    cursor: pointer;
    background: #fff;
}

.tpl-ps-hex {
    flex: 1 1 auto;
    min-width: 0;
    font-family: ui-monospace, monospace;
    font-size: 11px;
}

.tpl-ps-logo-preview img {
    max-height: 40px;
    max-width: 120px;
    object-fit: contain;
}

.ps-section {
    flex: 0 0 100%;
    width: 100%;
    margin: 0 0 10px;
    border: 1px solid var(--default-line);
    border-radius: 8px;
    background: rgba(var(--primary-rgb, 0, 150, 136), 0.04);
    overflow: hidden;
}

.ps-section__head {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 6px 8px;
    background: rgba(var(--primary-rgb, 0, 150, 136), 0.08);
    border-bottom: 1px solid rgba(var(--primary-rgb, 0, 150, 136), 0.2);
}

.ps-section__drag-handle {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 22px;
    height: 22px;
    color: #90a4ae;
    cursor: move;
}

.ps-section__icon {
    color: var(--primary);
    font-size: 12px;
}

.ps-section__title {
    flex: 1 1 auto;
    min-width: 0;
    font-size: 11px;
    font-weight: 700;
    border-color: rgba(var(--primary-rgb, 0, 150, 136), 0.25);
}

.ps-section__clear-title {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    padding: 0;
    border: 0;
    border-radius: 4px;
    background: transparent;
    color: #90a4ae;
    cursor: pointer;
}

.ps-section__clear-title:hover,
.ps-section__delete:hover {
    background: rgba(var(--danger-rgb, 220, 53, 69), 0.12);
    color: var(--danger, #dc3545);
}

.ps-section__delete {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    padding: 0;
    border: 0;
    border-radius: 4px;
    background: transparent;
    color: #90a4ae;
    cursor: pointer;
}

.ps-section__style {
    display: flex;
    flex-wrap: nowrap;
    align-items: center;
    gap: 5px;
    padding: 5px 8px;
    border-bottom: 1px solid rgba(var(--primary-rgb, 0, 150, 136), 0.12);
    background: #fff;
}

.ps-section__size-row {
    flex: 0 0 auto;
    width: 92px;
    max-width: 92px;
    min-width: 0;
    margin: 0;
    gap: 4px;
}

.ps-section__size-row .tpl-ps-range {
    flex: 1 1 auto;
    min-width: 0;
    width: auto;
    margin: 4px 0;
}

.ps-section__size-val {
    flex: 0 0 auto;
    min-width: 30px;
    font-size: 9px;
    font-weight: 700;
    color: var(--primary);
    text-align: right;
    white-space: nowrap;
}

.ps-section__style-seg {
    flex: 1 1 auto;
    display: inline-flex;
    min-width: 0;
    max-width: none;
}

.ps-section__style-seg .tpl-ps-seg__btn {
    flex: 1 1 0;
    min-width: 0;
    padding: 4px 5px;
    font-size: 9px;
    line-height: 1.2;
}

.ps-section__style-btn {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 26px;
    height: 26px;
    padding: 0;
    border: 1px solid var(--default-line);
    border-radius: 4px;
    background: #fff;
    color: #546e7a;
    font-size: 11px;
    cursor: pointer;
}

.ps-section__style-btn.is-active {
    background: rgba(var(--primary-rgb, 0, 150, 136), 0.14);
    border-color: var(--primary);
    color: var(--primary);
}

.ps-section__title-preview {
    margin: 0;
    padding: 8px 10px 4px;
    font-size: 14px;
    font-weight: 700;
    color: #37474f;
    border-bottom: 2px solid rgba(var(--primary-rgb, 0, 150, 136), 0.25);
}

.ps-page__loose,
.ps-section__slots {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    align-content: flex-start;
    align-self: stretch;
    width: 100%;
    min-height: 44px;
    padding: 4px 2px 2px;
    box-sizing: border-box;
}

.ps-page__loose {
    flex: 0 0 auto;
    margin: 0;
    border: 1px dashed rgba(var(--primary-rgb, 0, 150, 136), 0.28);
    border-radius: 6px;
    background: rgba(255, 255, 255, 0.85);
}

.ps-page__loose:not(:has(> .ps-widget)) {
    min-height: 32px;
    padding: 6px 8px;
}

.ps-page__loose:has(> .ps-widget) {
    min-height: 48px;
    border-style: solid;
    border-color: rgba(var(--primary-rgb, 0, 150, 136), 0.15);
    background: transparent;
}

.ps-section__slots {
    border-top: 1px solid rgba(var(--primary-rgb, 0, 150, 136), 0.1);
    background: rgba(255, 255, 255, 0.5);
}

.ps-section__empty {
    flex: 0 0 100%;
    width: 100%;
    margin: 0;
    padding: 10px 8px;
    text-align: center;
    font-size: 10px;
    color: #90a4ae;
    pointer-events: none;
}

.ps-page__loose>.ps-widget,
.ps-section__slots>.ps-widget {
    box-sizing: border-box;
}

.ps-section-placeholder {
    flex: 0 0 100%;
    height: 56px;
    margin: 4px 0;
    border: 2px dashed rgba(var(--primary-rgb, 0, 150, 136), 0.45);
    border-radius: 8px;
    background: rgba(var(--primary-rgb, 0, 150, 136), 0.06);
}

.ps-chrome-h {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 10px;
    border-bottom-width: 3px;
    border-bottom-style: solid;
    border-radius: 6px 6px 0 0;
}

.ps-chrome-h--logo-above {
    flex-direction: column;
    align-items: center;
    text-align: center;
}

.ps-chrome-h--logo-right {
    flex-direction: row-reverse;
}

.ps-chrome-h--align-center .ps-chrome__text {
    text-align: center;
    width: 100%;
}

.ps-chrome-h--align-right .ps-chrome__text {
    text-align: right;
    width: 100%;
}

.tpl-ps-seg {
    display: inline-flex;
    border: 1px solid var(--default-line);
    border-radius: 8px;
    overflow: hidden;
    background: #fff;
}

.tpl-ps-seg--block {
    display: flex;
    width: 100%;
}

.tpl-ps-seg--block .tpl-ps-seg__btn {
    flex: 1 1 0;
    min-width: 0;
    padding: 8px 6px;
    font-size: 10.5px;
    line-height: 1.25;
    text-align: center;
}

.tpl-ps-seg__btn {
    min-width: 32px;
    padding: 4px 10px;
    border: 0;
    background: #fff;
    font-size: 11px;
    font-weight: 700;
    color: #546e7a;
    cursor: pointer;
}

.tpl-ps-seg__btn+.tpl-ps-seg__btn {
    border-left: 1px solid var(--default-line);
}

.tpl-ps-seg__btn.is-active {
    background: rgba(var(--primary-rgb, 0, 150, 136), 0.14);
    color: var(--primary);
}

.tpl-ps-seg__btn:hover:not(.is-active) {
    background: #f4f6f7;
}

.tpl-ps-range-row {
    display: flex;
    align-items: center;
    gap: 10px;
}

.tpl-ps-range {
    flex: 1 1 auto;
    min-width: 0;
    height: 6px;
    margin: 6px 0;
    -webkit-appearance: none;
    appearance: none;
    background: linear-gradient(to right, rgba(var(--primary-rgb, 0, 150, 136), 0.25), rgba(var(--primary-rgb, 0, 150, 136), 0.55));
    border-radius: 999px;
    outline: none;
}

.tpl-ps-range::-webkit-slider-thumb {
    -webkit-appearance: none;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    background: var(--primary);
    border: 2px solid #fff;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.25);
    cursor: pointer;
}

.tpl-ps-range::-moz-range-thumb {
    width: 16px;
    height: 16px;
    border-radius: 50%;
    background: var(--primary);
    border: 2px solid #fff;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.25);
    cursor: pointer;
}

.tpl-ps-range::-moz-range-track {
    height: 6px;
    background: rgba(var(--primary-rgb, 0, 150, 136), 0.35);
    border-radius: 999px;
}

.tpl-ps-range-val {
    flex: 0 0 auto;
    min-width: 44px;
    font-size: 11px;
    font-weight: 700;
    color: #546e7a;
    text-align: right;
}

.ps-chrome__logo--img {
    border-radius: 6px;
    object-fit: contain;
    flex: 0 0 auto;
}

.ps-widget__foot {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 6px;
}

.ps-widget__span {
    font-size: 9.5px;
    font-weight: 700;
    color: #78909c;
}

.ps-widget__lock {
    color: #adb5bd;
    font-size: 9.5px;
}

.ps-widget__resize {
    display: inline-flex;
    flex: 0 0 auto;
}

.ps-span-select {
    width: auto;
    min-width: 56px;
    max-width: 72px;
    height: 22px;
    padding: 0 18px 0 6px;
    font-size: 9.5px;
    font-weight: 700;
    line-height: 20px;
    border-color: rgba(var(--primary-rgb, 0, 150, 136), 0.45);
    border-radius: 4px;
    color: var(--primary);
    background-color: #fff;
    cursor: pointer;
}

.ps-span-select:focus {
    border-color: var(--primary);
    box-shadow: 0 0 0 0.12rem rgba(var(--primary-rgb, 0, 150, 136), 0.28);
}

.ps-widget-placeholder {
    min-height: 54px;
    margin: 0 3px 6px;
    border: 1px dashed var(--primary);
    border-radius: 6px;
    background: rgba(var(--primary-rgb, 0, 150, 136), 0.09);
}

.ps-dragging .ps-page__loose,
.ps-dragging .ps-section__slots {
    outline: 1px dashed rgba(var(--primary-rgb, 0, 150, 136), 0.45);
    outline-offset: 2px;
}

@media (max-width: 991px) {
    .tpl-ps__body {
        flex-direction: column;
        height: auto;
        max-height: calc(100vh - 11rem);
        overflow-y: auto;
    }

    .tpl-ps__rail {
        flex: 0 0 auto;
        max-width: none;
        max-height: 40vh;
        border-right: 0;
        border-bottom: 1px solid var(--default-line);
    }

    .tpl-ps__stage {
        min-height: 50vh;
    }

    .tpl-ps-scroll {
        min-height: 240px;
    }

    .tpl-search input {
        width: 100%;
    }

    .tpl-toolbar__actions {
        width: 100%;
    }

    .tpl-search {
        flex: 1 1 auto;
    }
}

/* ── Dark mode ── */
[data-theme="dark"] .tpl-toolbar,
[data-theme="dark"] .tpl-filterbar,
[data-theme="dark"] .tpl-ps-stagebar {
    border-color: #3a3a3a;
}

[data-theme="dark"] .tpl-filterbar {
    background: #262626;
}

[data-theme="dark"] .tpl-toolbar__sub,
[data-theme="dark"] .tpl-toolbar__count {
    color: #c2c2c2;
}

[data-theme="dark"] .tpl-toolbar__count {
    background: rgba(var(--primary-rgb, 0, 150, 136), 0.22);
    color: var(--primary, #009688);
}

[data-theme="dark"] .tpl-chip,
[data-theme="dark"] .tpl-ghost-btn,
[data-theme="dark"] .tpl-icon-btn,
[data-theme="dark"] .tpl-card-tool-btn,
[data-theme="dark"] .tpl-radio span,
[data-theme="dark"] .tpl-flag,
[data-theme="dark"] .tpl-chip-static,
[data-theme="dark"] .ps-page__remove {
    background: #333;
    border-color: #3a3a3a;
    color: #fff;
}

[data-theme="dark"] .tpl-chip:hover,
[data-theme="dark"] .tpl-ghost-btn:hover:not(:disabled),
[data-theme="dark"] .tpl-icon-btn:hover,
[data-theme="dark"] .tpl-card-tool-btn:hover {
    border-color: var(--primary, #009688);
    color: var(--primary, #009688);
}

[data-theme="dark"] .tpl-chip.active {
    background: var(--primary);
    border-color: var(--primary, #009688);
    color: #fff;
}

[data-theme="dark"] .tpl-ghost-btn.active,
[data-theme="dark"] .tpl-flag--on,
[data-theme="dark"] .tpl-radio input:checked+span {
    background: rgba(var(--primary-rgb, 0, 150, 136), 0.28);
    border-color: var(--primary, #009688);
    color: var(--primary, #009688);
}

[data-theme="dark"] .tpl-card {
    background: #262626;
    border-color: #3a3a3a;
    border-left-color: rgba(var(--primary-rgb, 0, 150, 136), 0.5);
}

[data-theme="dark"] .tpl-card--active {
    background: #2d2d2d;
    border-left-color: var(--primary, #009688);
    box-shadow: 0 0 0 1px var(--primary, #009688) inset;
}

[data-theme="dark"] .tpl-card--picked {
    background: rgba(var(--primary-rgb, 0, 150, 136), 0.18);
}

[data-theme="dark"] .tpl-card__site,
[data-theme="dark"] .tpl-card__remark,
[data-theme="dark"] .tpl-detail__headtext p,
[data-theme="dark"] .tpl-stat__label,
[data-theme="dark"] .tpl-panel__head h6,
[data-theme="dark"] .tpl-panel__empty,
[data-theme="dark"] .tpl-kv dt,
[data-theme="dark"] .tpl-reclist small,
[data-theme="dark"] .tpl-empty,
[data-theme="dark"] .tpl-ps__subtitle,
[data-theme="dark"] .tpl-ps-group__title,
[data-theme="dark"] .tpl-ps-hint,
[data-theme="dark"] .tpl-ps-label,
[data-theme="dark"] .tpl-ps-stagebar__hint,
[data-theme="dark"] .tpl-ps-loading,
[data-theme="dark"] .tpl-ps-empty,
[data-theme="dark"] .ps-page__label,
[data-theme="dark"] .ps-page__count,
[data-theme="dark"] .tpl-ps-range-val {
    color: #c2c2c2;
}

[data-theme="dark"] .tpl-ps-range {
    background: linear-gradient(to right, rgba(var(--primary-rgb, 0, 150, 136), 0.2), rgba(var(--primary-rgb, 0, 150, 136), 0.45));
}

[data-theme="dark"] .tpl-ps-range::-moz-range-track {
    background: rgba(var(--primary-rgb, 0, 150, 136), 0.35);
}

[data-theme="dark"] .tpl-ps__footnote {
    background: rgba(var(--warning-rgb, 255, 193, 7), 0.12);
    border-color: rgba(var(--warning-rgb, 255, 193, 7), 0.38);
    color: var(--warning, #ffc107);
}

[data-theme="dark"] .tpl-ps__footnote .fa {
    color: var(--warning, #ffc107);
}

[data-theme="dark"] .tpl-card__avatar,
[data-theme="dark"] .tpl-detail__avatar {
    background: rgba(var(--primary-rgb, 0, 150, 136), 0.22);
    color: var(--primary, #009688);
}

[data-theme="dark"] .tpl-card__tools,
[data-theme="dark"] .tpl-ps-sub {
    border-color: #3a3a3a;
}

[data-theme="dark"] .tpl-ps-seg {
    background: #262626;
    border-color: #3a3a3a;
}

[data-theme="dark"] .tpl-ps-seg__btn {
    background: #262626;
    color: #c2c2c2;
}

[data-theme="dark"] .tpl-ps-seg__btn:hover:not(.is-active) {
    background: #333;
}

[data-theme="dark"] .tpl-ps-seg__btn.is-active {
    background: rgba(var(--primary-rgb, 0, 150, 136), 0.22);
    color: var(--primary, #009688);
}

[data-theme="dark"] .tpl-pill {
    background: #333;
    border-color: #3a3a3a;
    color: #c2c2c2;
}

[data-theme="dark"] .tpl-pill--ok {
    background: rgba(var(--primary-rgb, 0, 150, 136), 0.28);
    border-color: var(--primary, #009688);
    color: var(--primary, #009688);
}

[data-theme="dark"] .tpl-pill--warn {
    background: rgba(var(--warning-rgb, 255, 193, 7), 0.22);
    border-color: rgba(var(--warning-rgb, 255, 193, 7), 0.5);
    color: var(--warning, #ffc107);
}

[data-theme="dark"] .tpl-stat,
[data-theme="dark"] .tpl-panel {
    background: #262626;
    border-color: #3a3a3a;
}

[data-theme="dark"] .tpl-stat__value {
    color: var(--primary, #009688);
}

[data-theme="dark"] .tpl-ps__rail {
    background: #262626;
    border-color: #3a3a3a;
}

[data-theme="dark"] .tpl-ps-group+.tpl-ps-group {
    border-color: #3a3a3a;
}

[data-theme="dark"] .tpl-switch__track {
    background: #423e3e;
}

[data-theme="dark"] .tpl-switch__label,
[data-theme="dark"] .tpl-check {
    color: #fff;
}

[data-theme="dark"] .tpl-ps-scroll {
    background: #1F1F1F;
}

[data-theme="dark"] .ps-sheet {
    background: #2d2d2d;
    border-color: #3a3a3a;
}

[data-theme="dark"] .ps-sheet__header {
    border-bottom-color: rgba(var(--primary-rgb, 0, 150, 136), 0.5);
}

[data-theme="dark"] .ps-sheet__footer {
    border-top-color: #3a3a3a;
}

[data-theme="dark"] .ps-chrome__title {
    color: #fff;
}

[data-theme="dark"] .ps-chrome__note,
[data-theme="dark"] .ps-chrome__footer-text {
    color: #c2c2c2;
}

[data-theme="dark"] .ps-chrome__meta {
    background: #423e3e;
}

[data-theme="dark"] .ps-chrome__logo {
    background: rgba(var(--primary-rgb, 0, 150, 136), 0.28);
}

[data-theme="dark"] .ps-sheet__placeholder {
    border-color: #3a3a3a;
    color: #c2c2c2;
}

[data-theme="dark"] .ps-section {
    background: #262626;
    border-color: #3a3a3a;
}

[data-theme="dark"] .ps-section__head {
    background: rgba(var(--primary-rgb, 0, 150, 136), 0.12);
    border-bottom-color: #3a3a3a;
}

[data-theme="dark"] .ps-section__title {
    background: #333;
    border-color: #3a3a3a;
    color: #fff;
}

[data-theme="dark"] .ps-section__style {
    background: #262626;
    border-bottom-color: #3a3a3a;
}

[data-theme="dark"] .ps-section__style-btn {
    background: #333;
    border-color: #3a3a3a;
    color: #c2c2c2;
}

[data-theme="dark"] .ps-section__style-btn.is-active {
    background: rgba(var(--primary-rgb, 0, 150, 136), 0.22);
    color: var(--primary, #009688);
}

[data-theme="dark"] .ps-section__title-preview {
    color: #fff;
    border-bottom-color: rgba(var(--primary-rgb, 0, 150, 136), 0.35);
}

[data-theme="dark"] .ps-section__empty {
    color: #c2c2c2;
}

[data-theme="dark"] .ps-page__loose {
    background: rgba(38, 38, 38, 0.9);
    border-color: #3a3a3a;
}

[data-theme="dark"] .ps-page__loose:has(> .ps-widget) {
    background: transparent;
    border-color: rgba(var(--primary-rgb, 0, 150, 136), 0.2);
}

[data-theme="dark"] .ps-section__slots {
    background: rgba(38, 38, 38, 0.45);
    border-top-color: #3a3a3a;
}

[data-theme="dark"] .ps-section__size-val {
    color: var(--primary, #009688);
}

[data-theme="dark"] .ps-widget__inner {
    background: rgba(var(--primary-rgb, 0, 150, 136), 0.14);
    border-color: rgba(var(--primary-rgb, 0, 150, 136), 0.45);
    border-left-color: var(--primary, #009688);
}

[data-theme="dark"] .ps-widget--locked .ps-widget__inner {
    background: #333;
    border-color: #3a3a3a;
    border-left-color: #808080;
}

[data-theme="dark"] .ps-widget--print-overflow .ps-widget__inner {
    border-color: rgba(255, 152, 0, 0.55);
    border-left-color: #ffb74d;
    box-shadow: 0 0 0 1px rgba(255, 152, 0, 0.2);
}

[data-theme="dark"] .ps-widget__overflow-warn {
    color: #ffcc80;
    background: rgba(255, 152, 0, 0.18);
    border-color: rgba(255, 152, 0, 0.4);
}

[data-theme="dark"] .ps-widget__top {
    color: #fff;
}

[data-theme="dark"] .ps-widget__top .fa {
    color: var(--primary, #009688);
}

[data-theme="dark"] .ps-span-select {
    background-color: #262626;
    border-color: rgba(var(--primary-rgb, 0, 150, 136), 0.45);
    color: var(--primary, #009688);
}

[data-theme="dark"] .ps-widget__span,
[data-theme="dark"] .ps-widget__lock {
    color: #c2c2c2;
}

[data-theme="dark"] .ps-widget__preview {
    background: #262626;
    border-color: #3a3a3a;
}

[data-theme="dark"] .ps-widget__frame {
    background: #262626;
}

[data-theme="dark"] .ps-widget-placeholder {
    border-color: var(--primary, #009688);
    background: rgba(var(--primary-rgb, 0, 150, 136), 0.18);
}

/* ═══════════════════════════════════════════════════════════════════════════
   Dashboard Template setting — Add / Edit template modal
   app/Setting/Widget_Template.php
   ═══════════════════════════════════════════════════════════════════════════ */

.tpl-fm-dialog {
    max-width: 760px;
}

.tpl-fm {
    border: 0;
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 18px 48px rgba(0, 0, 0, .22);
}

/* ── Header ── */
.tpl-fm__header {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 16px 18px;
    border-bottom: 1px solid var(--default-line);
    border-top-left-radius: 12px;
    border-top-right-radius: 12px;
    background: linear-gradient(180deg, #fbfcfc 0%, #f4f6f7 100%);
}

.tpl-fm__icon {
    display: flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 38px;
    width: 38px;
    height: 38px;
    border-radius: 10px;
    background: rgba(var(--primary-rgb, 0, 150, 136), .12);
    color: var(--primary);
    font-size: 16px;
}

.tpl-fm__heading {
    flex: 1 1 auto;
    min-width: 0;
}

.tpl-fm__heading .modal-title {
    margin: 0;
    font-size: 17px;
    font-weight: 700;
    line-height: 1.25;
    color: var(--main-text-color);
}

.tpl-fm__subtitle {
    display: block;
    margin-top: 2px;
    font-size: 12px;
    line-height: 1.4;
    color: #6c757d;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.tpl-fm__header .close {
    flex: 0 0 auto;
    margin: -4px -4px 0 0;
    padding: 4px 8px;
    font-size: 22px;
    line-height: 1;
    opacity: .5;
}

.tpl-fm__header .close:hover {
    opacity: .9;
}

/* ── Segmented tabs ── */
.tpl-fm__body {
    padding: 0;
    max-height: 72vh;
    overflow-y: auto;
}

.tpl-fm__tabs {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    gap: 4px;
    padding: 14px 18px;
    border-bottom: 1px solid var(--default-line);
    background: #fff;
    position: sticky;
    top: 0;
    z-index: 3;
}

.tpl-fm__tabs::before {
    content: none;
}

.tpl-fm__tab {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    flex: 1 1 0;
    justify-content: center;
    padding: 9px 12px;
    border: 1px solid var(--default-line);
    border-radius: 8px;
    font-size: 12.5px;
    font-weight: 600;
    color: #6c757d;
    text-decoration: none;
    background: #f4f6f7;
    transition: color .14s ease, background .14s ease, border-color .14s ease, box-shadow .14s ease;
}

.tpl-fm__tab:hover {
    color: var(--primary);
    background: rgba(var(--primary-rgb, 0, 150, 136), .08);
    border-color: rgba(var(--primary-rgb, 0, 150, 136), .35);
    text-decoration: none;
}

.tpl-fm__tab.active {
    color: #fff;
    background: var(--primary);
    border-color: var(--primary);
    box-shadow: 0 2px 8px rgba(var(--primary-rgb, 0, 150, 136), .35);
}

.tpl-fm__tab.active .fa {
    color: #fff;
}

.tpl-fm__tabdot {
    display: inline-block;
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: #adb5bd;
    flex: 0 0 auto;
}

.tpl-fm__tabdot--on {
    background: #28a745;
    box-shadow: 0 0 0 2px rgba(40, 167, 69, .25);
}

.tpl-fm__tab.active .tpl-fm__tabdot--on {
    background: #fff;
    box-shadow: 0 0 0 2px rgba(255, 255, 255, .45);
}

.tpl-fm__tab .fa {
    font-size: 13px;
}

.tpl-fm__tabpill {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 18px;
    height: 18px;
    padding: 0 5px;
    border-radius: 999px;
    background: var(--primary);
    color: #fff;
    font-size: 10.5px;
    font-weight: 700;
}

.tpl-fm__content {
    padding: 18px;
}

/* ── At-a-glance strip (edit only) ── */
.tpl-fm-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 18px;
}

.tpl-fm-meta__item {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 11px;
    border: 1px solid var(--default-line);
    border-radius: 999px;
    background: #f8f9fa;
    font-size: 11.5px;
    font-weight: 600;
    color: #6c757d;
}

.tpl-fm-meta__item .fa {
    color: var(--primary);
    font-size: 12px;
}

.tpl-fm-meta__item b {
    font-size: 13.5px;
    font-weight: 700;
    color: var(--main-text-color);
}

/* ── Field groups ── */
.tpl-fm-group {
    padding: 14px 14px 16px;
    border: 1px solid var(--default-line);
    border-radius: 10px;
    background: #fafbfc;
}

.tpl-fm-group+.tpl-fm-group {
    margin-top: 14px;
}

.tpl-fm-grouptitle {
    display: flex;
    align-items: center;
    gap: 7px;
    margin: 0 0 12px;
    font-size: 11.5px;
    font-weight: 700;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: #6c757d;
}

.tpl-fm-grouptitle .fa {
    color: var(--primary);
    font-size: 13px;
}

.tpl-fm-grouptitle__count {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 20px;
    height: 20px;
    padding: 0 6px;
    margin-left: 4px;
    border-radius: 999px;
    background: rgba(var(--primary-rgb, 0, 150, 136), .14);
    color: var(--primary);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0;
    text-transform: none;
}

.tpl-fm-callout {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    margin-top: 8px;
    padding: 9px 11px;
    border-radius: 8px;
    font-size: 12px;
    line-height: 1.45;
}

.tpl-fm-callout--warn {
    border: 1px solid rgba(var(--warning-rgb, 255, 193, 7), .55);
    background: rgba(var(--warning-rgb, 255, 193, 7), .12);
    color: #856404;
}

.tpl-fm-callout--warn .fa {
    margin-top: 2px;
    color: #b8860b;
}

.tpl-fm-emptyhint {
    margin: 0 0 12px;
    padding: 8px 10px;
    border-radius: 7px;
    border: 1px dashed var(--default-line);
    background: #fff;
    font-size: 11.5px;
    color: #6c757d;
}

/* ── Fields ── */
.tpl-fm-field+.tpl-fm-field {
    margin-top: 14px;
}

.tpl-fm-row {
    display: flex;
    flex-wrap: wrap;
    gap: 14px;
}

.tpl-fm-row>.tpl-fm-field {
    flex: 1 1 220px;
    min-width: 0;
    margin-top: 0;
}

.tpl-fm-label {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-bottom: 5px;
    font-size: 12px;
    font-weight: 600;
    color: var(--main-text-color);
}

.tpl-fm-label .fa {
    color: #adb5bd;
    font-size: 12px;
}

.tpl-fm-req {
    color: var(--danger, #dc3545);
    font-weight: 700;
}

.tpl-fm-input {
    height: auto;
    padding: 8px 11px;
    border: 1px solid var(--default-line);
    border-radius: 7px;
    font-size: 13px;
    background: #fff;
    transition: border-color .14s ease, box-shadow .14s ease;
}

.tpl-fm-input:focus {
    border-color: var(--primary);
    box-shadow: 0 0 0 3px rgba(var(--primary-rgb, 0, 150, 136), .13);
}

.tpl-fm-input--title {
    font-size: 14.5px;
    font-weight: 600;
    resize: vertical;
}

textarea.tpl-fm-input {
    resize: vertical;
}

.tpl-fm-input[readonly] {
    background: #f1f3f5;
    color: #6c757d;
    cursor: not-allowed;
}

select.tpl-fm-input {
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    padding-right: 28px;
    background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='%236c757d' d='M4 6l4 4 4-4z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 9px center;
    background-size: 14px 14px;
}

.tpl-fm-split {
    display: flex;
    gap: 8px;
}

.tpl-fm-split>input {
    flex: 0 0 90px;
    width: 90px;
    text-align: center;
}

.tpl-fm-split>select {
    flex: 1 1 auto;
    min-width: 0;
}

.tpl-fm-hint {
    margin: 6px 0 0;
    font-size: 11.5px;
    line-height: 1.5;
    color: #6c757d;
}

.tpl-fm-hint .fa {
    margin-right: 3px;
}

.tpl-fm-static {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin: 0;
    padding: 8px 11px;
    border: 1px dashed var(--default-line);
    border-radius: 7px;
    font-size: 12.5px;
    color: #6c757d;
}

.tpl-fm-static .fa {
    color: var(--primary);
}

/* The select2 widgets inside the modal need to match .tpl-fm-input metrics. */
.tpl-fm .select2-container--default .select2-selection--multiple {
    min-height: 38px;
    border: 1px solid var(--default-line);
    border-radius: 7px;
    padding: 2px 4px;
}

.tpl-fm .select2-container--default.select2-container--focus .select2-selection--multiple {
    border-color: var(--primary);
    box-shadow: 0 0 0 3px rgba(var(--primary-rgb, 0, 150, 136), .13);
}

/* ── Schedule toggle card + collapse ── */
.tpl-fm-toggle {
    padding: 12px 14px;
    border: 1px solid var(--default-line);
    border-radius: 9px;
    background: #f8f9fa;
}

.tpl-fm-toggle .tpl-fm-hint {
    margin-top: 6px;
    padding-left: 43px;
}

.tpl-fm-collapse {
    margin-top: 16px;
}

.tpl-fm-collapse--off {
    display: none;
}

.tpl-fm-summary {
    display: flex;
    align-items: center;
    gap: 7px;
    margin: 12px 0 0;
    padding: 9px 12px;
    border-left: 3px solid var(--primary);
    border-radius: 0 7px 7px 0;
    background: rgba(var(--primary-rgb, 0, 150, 136), .07);
    font-size: 12.5px;
    font-weight: 600;
    color: var(--main-text-color);
}

.tpl-fm-summary:empty {
    display: none;
}

.tpl-fm-summary .fa {
    color: var(--primary);
}

/* ── Cross-link to the Print Studio ── */
.tpl-fm-crosslink {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-top: 20px;
    padding: 12px 14px;
    border: 1px dashed var(--default-line);
    border-radius: 9px;
    background: #f8f9fa;
}

.tpl-fm-crosslink>div {
    flex: 1 1 auto;
    min-width: 0;
}

.tpl-fm-crosslink strong {
    display: block;
    font-size: 12.5px;
    color: var(--main-text-color);
}

.tpl-fm-crosslink p {
    margin: 2px 0 0;
    font-size: 11.5px;
    line-height: 1.45;
    color: #6c757d;
}

/* ── Footer ── */
.tpl-fm__footer {
    padding: 13px 18px;
    border-top: 1px solid var(--default-line);
    border-bottom-left-radius: 12px;
    border-bottom-right-radius: 12px;
    background: #f8f9fa;
}

.sso-idp-edit-dialog {
    max-width: 960px;
    width: 96vw;
}

#sso_edit_provider_modal .tpl-fm__body {
    padding: 0;
    max-height: none;
    overflow: hidden;
}

.sso-idp-edit-frame {
    display: block;
    width: 100%;
    height: min(72vh, 760px);
    border: 0;
    background: #fff;
    border-bottom-left-radius: 12px;
    border-bottom-right-radius: 12px;
}

.sso-idp-embed {
    background: #fff;
}

.sso-idp-embed__main {
    padding: 16px 18px 8px;
    min-height: 0;
}

[data-theme="dark"] .sso-idp-edit-frame,
[data-theme="dark"] .sso-idp-embed,
[data-theme="dark"] .sso-idp-embed__main {
    background: #262626;
    color: #fff;
}

.tpl-fm__footer .btn {
    padding: 7px 15px;
    border-radius: 7px;
    font-size: 12.5px;
    font-weight: 600;
}

.tpl-fm__delete {
    border: 1px solid rgba(var(--danger-rgb, 220, 53, 69), .4);
    background: transparent;
    color: var(--danger, #dc3545);
}

.tpl-fm__delete:hover,
.tpl-fm__delete:focus {
    border-color: var(--danger, #dc3545);
    background: var(--danger, #dc3545);
    color: #fff;
}

@media (max-width: 575px) {
    .tpl-fm__content {
        padding: 14px;
    }

    .tpl-fm__tabs {
        padding: 10px 14px;
    }

    .tpl-fm-row>.tpl-fm-field {
        flex: 1 1 100%;
    }

    .tpl-fm-crosslink {
        flex-direction: column;
        align-items: flex-start;
    }
}

/* ─────────────────────────────── Dark mode ─────────────────────────────── */

[data-theme="dark"] .tpl-fm {
    background: #262626;
    box-shadow: 0 18px 48px rgba(0, 0, 0, .5);
}

[data-theme="dark"] .tpl-fm__header {
    border-bottom-color: #1c1b1b;
    background: linear-gradient(180deg, #2d2d2d 0%, #262626 100%);
}

[data-theme="dark"] .tpl-fm__icon {
    background: rgba(var(--primary-rgb, 0, 150, 136), .2);
    color: var(--primary, #009688);
}

[data-theme="dark"] .tpl-fm__heading .modal-title {
    color: #fff;
}

[data-theme="dark"] .tpl-fm__subtitle,
[data-theme="dark"] .tpl-fm-meta__item,
[data-theme="dark"] .tpl-fm-grouptitle,
[data-theme="dark"] .tpl-fm-hint,
[data-theme="dark"] .tpl-fm-static,
[data-theme="dark"] .tpl-fm-crosslink p,
[data-theme="dark"] .tpl-fm__tab {
    color: #c2c2c2;
}

[data-theme="dark"] .tpl-fm__header .close {
    color: #fff;
    text-shadow: none;
}

[data-theme="dark"] .tpl-fm__tabs {
    border-bottom-color: #1c1b1b;
    background: #262626;
}

[data-theme="dark"] .tpl-fm__tab {
    border-color: #3a3a3a;
    background: #333;
}

[data-theme="dark"] .tpl-fm__tab:hover {
    color: var(--primary, #009688);
    background: rgba(var(--primary-rgb, 0, 150, 136), .16);
    border-color: rgba(var(--primary-rgb, 0, 150, 136), .45);
}

[data-theme="dark"] .tpl-fm__tab.active {
    color: #fff;
    background: var(--primary);
    border-color: var(--primary);
}

[data-theme="dark"] .tpl-fm__tab.active .fa {
    color: #fff;
}

[data-theme="dark"] .tpl-fm-group {
    border-color: #3a3a3a;
    background: #2d2d2d;
}

[data-theme="dark"] .tpl-fm-callout--warn {
    border-color: rgba(var(--warning-rgb, 255, 193, 7), .45);
    background: rgba(var(--warning-rgb, 255, 193, 7), .14);
    color: var(--warning, #ffc107);
}

[data-theme="dark"] .tpl-fm-emptyhint {
    border-color: #3a3a3a;
    background: #262626;
    color: #c2c2c2;
}

[data-theme="dark"] .tpl-fm-grouptitle__count {
    background: rgba(var(--primary-rgb, 0, 150, 136), .28);
    color: var(--primary, #009688);
}

[data-theme="dark"] .tpl-fm-meta__item {
    border-color: #3a3a3a;
    background: #2d2d2d;
}

[data-theme="dark"] .tpl-fm-meta__item .fa,
[data-theme="dark"] .tpl-fm-grouptitle .fa,
[data-theme="dark"] .tpl-fm-static .fa,
[data-theme="dark"] .tpl-fm-summary .fa {
    color: var(--primary, #009688);
}

[data-theme="dark"] .tpl-fm-meta__item b,
[data-theme="dark"] .tpl-fm-label,
[data-theme="dark"] .tpl-fm-summary,
[data-theme="dark"] .tpl-fm-crosslink strong {
    color: #fff;
}

[data-theme="dark"] .tpl-fm-group+.tpl-fm-group {
    border-top-color: #1c1b1b;
}

[data-theme="dark"] .tpl-fm-input {
    border-color: #3a3a3a;
    background: #333;
    color: #fff;
}

[data-theme="dark"] .tpl-fm-input::placeholder {
    color: #8a8a8a;
}

[data-theme="dark"] .tpl-fm-input:focus {
    border-color: var(--primary, #009688);
    box-shadow: 0 0 0 3px rgba(var(--primary-rgb, 0, 150, 136), .22);
}

[data-theme="dark"] .tpl-fm-input[readonly] {
    background: #423e3e;
    color: #c2c2c2;
}

[data-theme="dark"] select.tpl-fm-input {
    background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='%23c2c2c2' d='M4 6l4 4 4-4z'/%3E%3C/svg%3E");
}

[data-theme="dark"] .tpl-fm .select2-container--default .select2-selection--multiple {
    border-color: #3a3a3a;
    background: #333;
}

[data-theme="dark"] .tpl-fm .select2-container--default.select2-container--focus .select2-selection--multiple {
    border-color: var(--primary, #009688);
    box-shadow: 0 0 0 3px rgba(var(--primary-rgb, 0, 150, 136), .22);
}

[data-theme="dark"] .tpl-fm-toggle,
[data-theme="dark"] .tpl-fm-crosslink,
[data-theme="dark"] .tpl-fm-static {
    border-color: #3a3a3a;
    background: #2d2d2d;
}

[data-theme="dark"] .tpl-fm-summary {
    border-left-color: var(--primary, #009688);
    background: rgba(var(--primary-rgb, 0, 150, 136), .14);
}

[data-theme="dark"] .tpl-fm__footer {
    border-top-color: #1c1b1b;
    background: #2d2d2d;
}

[data-theme="dark"] .tpl-fm__delete {
    border-color: rgba(var(--danger-rgb, 220, 53, 69), .55);
    color: #ef7b85;
}

[data-theme="dark"] .tpl-fm__delete:hover,
[data-theme="dark"] .tpl-fm__delete:focus {
    border-color: var(--danger, #dc3545);
    background: var(--danger, #dc3545);
    color: #fff;
}

/* E-Form list: application type chips next to Running No */
.eform-running-cell {
    display: inline-flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px;
    max-width: 100%;
}

.eform-running-link {
    display: inline;
    font-weight: 600;
}

.eform-type-chip {
    display: inline-block;
    padding: 3px 10px;
    border-radius: 999px;
    font-size: 11px;
    font-weight: 600;
    line-height: 1.35;
    white-space: nowrap;
    vertical-align: middle;
    border: 1px solid transparent;
}

.eform-type-chip--scp {
    background: rgba(146, 203, 211, 0.45);
    border-color: rgba(60, 138, 150, 0.35);
    color: #1f5f6a;
}

.eform-type-chip--ld {
    background: rgba(255, 200, 100, 0.4);
    border-color: rgba(200, 140, 0, 0.35);
    color: #8a5a00;
}

.eform-type-chip--step {
    background: rgba(202, 116, 216, 0.35);
    border-color: rgba(157, 49, 173, 0.3);
    color: #6b2a78;
}

[data-theme="dark"] .eform-type-chip--scp {
    background: rgba(146, 203, 211, 0.22);
    border-color: rgba(60, 138, 150, 0.4);
    color: #9edce6;
}

[data-theme="dark"] .eform-type-chip--ld {
    background: rgba(255, 200, 100, 0.22);
    border-color: rgba(200, 140, 0, 0.4);
    color: #ffd78a;
}

[data-theme="dark"] .eform-type-chip--step {
    background: rgba(202, 116, 216, 0.22);
    border-color: rgba(157, 49, 173, 0.4);
    color: #e0b0ea;
}

/* E-Form list: top form-type filter chips (same row as bulk delete) */
.eform-list-toolbar {
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
}

.eform-list-toolbar-chips {
    display: flex;
    align-items: center;
    min-width: 0;
    flex: 1 1 auto;
    padding: 4px 0;
}

.eform-type-filter-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin: 0;
}

.eform-type-filter-chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 12px;
    border: 1px solid var(--default-line, #d5dadf);
    border-radius: 999px;
    background: #fff;
    color: var(--main-text-color, #495057);
    font-size: 0.8rem;
    line-height: 1.6;
    cursor: pointer;
    transition: background-color .15s, border-color .15s, color .15s;
}

.eform-type-filter-chip:hover,
.eform-type-filter-chip:focus {
    border-color: #009688;
    color: #00796b;
    outline: none;
}

.eform-type-filter-chip.active {
    background: #009688;
    border-color: #009688;
    color: #fff;
}

.eform-type-filter-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #adb5bd;
}

.eform-type-filter-chip--scp .eform-type-filter-dot {
    background: #3c8a96;
}

.eform-type-filter-chip--ld .eform-type-filter-dot {
    background: #c88c00;
}

.eform-type-filter-chip--step .eform-type-filter-dot {
    background: #9d31ad;
}

.eform-type-filter-chip.active .eform-type-filter-dot {
    background: #fff;
}

[data-theme="dark"] .eform-type-filter-chip {
    background: rgba(255, 255, 255, 0.04);
    border-color: rgba(255, 255, 255, 0.14);
    color: #d0d6dc;
}

[data-theme="dark"] .eform-type-filter-chip:hover,
[data-theme="dark"] .eform-type-filter-chip:focus {
    border-color: #02b3a2;
    color: #9edce6;
}

[data-theme="dark"] .eform-type-filter-chip.active {
    background: #009688;
    border-color: #009688;
    color: #fff;
}

@media (max-width: 767px) {
    .eform-list-toolbar-chips {
        flex: 1 1 100%;
        order: 1;
    }

    .eform-list-toolbar .ml-auto {
        order: 0;
        margin-left: auto !important;
    }

    .eform-type-filter-chips {
        flex-wrap: nowrap;
        overflow-x: auto;
        padding-bottom: 4px;
        -webkit-overflow-scrolling: touch;
        max-width: 100%;
    }

    .eform-type-filter-chip {
        flex: 0 0 auto;
    }
}

/* Progress fills — same ease-out as .alv-fleet-seg (width 0 → target, 0.9s).
   Inline width is already final, so the intro scales from the left.
   Width changes after load use the same curve. */
@keyframes app-bar-grow {
    from {
        transform: scaleX(0);
    }

    to {
        transform: scaleX(1);
    }
}

:is([class*="progress-fill"],
    [class*="-bar-fill"],
    .summary-progress-overdue,
    .leave-progress-bar,
    .progress-bar-mini,
    .lic-legend-bar:not([data-width]),
    .apd-cap-bar,
    .pay-rep-funnel-bar,
    .pay-rep-split-paid,
    .plan-board-progress-bar,
    .asset-cost-split-dep,
    .asset-cost-split-nbv,
    .hr-ov-bar > span,
    .hr-ov-meter > span,
    .uas-bar > span,
    .wo-timeline-connector-progress,
    .wfl-progress > span,
    .wfl-heat__tot > span,
    .progress > .progress-bar:not(.progress-bar-animated):not([data-width])) {
    transform-origin: left center;
    transform: scaleX(0);
    animation: app-bar-grow 0.9s cubic-bezier(0.22, 1, 0.36, 1) forwards;
    transition: width 0.9s cubic-bezier(0.22, 1, 0.36, 1);
}

.progress>.progress-bar.progress-bar-animated {
    transform-origin: left center;
    transform: scaleX(0);
    animation: progress-bar-stripes 1s linear infinite, app-bar-grow 0.9s cubic-bezier(0.22, 1, 0.36, 1) forwards;
    transition: width 0.9s cubic-bezier(0.22, 1, 0.36, 1);
}

:is(.wfl-pulse__seg,
    .hwfl__bar > span,
    .pay-need-bar > span,
    .alv-loc-bar > div,
    .alv-fleet-seg,
    .olf-progress > span > i,
    .olf-factors em,
    .progress > .progress-bar) {
    transition: width 0.9s cubic-bezier(0.22, 1, 0.36, 1);
}

@media (prefers-reduced-motion: reduce) {

    :is([class*="progress-fill"],
        [class*="-bar-fill"],
        .summary-progress-overdue,
        .leave-progress-bar,
        .progress-bar-mini,
        .lic-legend-bar:not([data-width]),
        .apd-cap-bar,
        .pay-rep-funnel-bar,
        .pay-rep-split-paid,
        .plan-board-progress-bar,
        .asset-cost-split-dep,
        .asset-cost-split-nbv,
        .hr-ov-bar > span,
        .hr-ov-meter > span,
        .uas-bar > span,
        .wo-timeline-connector-progress,
        .wfl-progress > span,
        .wfl-heat__tot > span,
        .progress > .progress-bar:not(.progress-bar-animated):not([data-width])) {
        transform: none;
        animation: none;
        transition: none;
    }

    .progress>.progress-bar.progress-bar-animated {
        transform: none;
        animation: progress-bar-stripes 1s linear infinite;
        transition: none;
    }
}

/* Person initials circle. Sizes: xs 16, sm 20, md 32, lg 48, xl 80. */
.usr-ava {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	position: relative;
	overflow: hidden;
	box-sizing: border-box;
	width: 32px;
	height: 32px;
	border: 1px solid #fff;
	border-radius: 50%;
	background-color: hsl(var(--ava, 188), 62%, 52%);
	background-image: linear-gradient(135deg, hsl(var(--ava, 188), 62%, 52%), hsl(var(--ava2, 228), 62%, 40%));
	color: #fff;
	font-weight: 700;
	font-size: 11px;
	letter-spacing: .3px;
	line-height: 1;
	vertical-align: middle;
	flex: 0 0 auto;
	user-select: none;
}
.usr-ava > img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	border-radius: inherit;
	display: block;
}
.usr-ava::before {
	content: attr(data-ini);
}
.usr-ava[data-ini="?"]::before {
	font-family: FontAwesome;
	font-weight: normal;
	font-style: normal;
	letter-spacing: 0;
	content: "\f007";
}
.usr-ava--xl[data-ini="?"]::before,
.staff-identity-photo .usr-ava[data-ini="?"]::before {
	font-size: 34px;
}
.usr-ava--xs { width: 16px; height: 16px; font-size: 7px; letter-spacing: 0; }
.usr-ava--sm { width: 20px; height: 20px; font-size: 8px; letter-spacing: 0; }
.usr-ava--md { width: 32px; height: 32px; font-size: 11px; }
.usr-ava--lg { width: 48px; height: 48px; font-size: 14px; letter-spacing: .4px; }
img.app-sidebar__user-avatar {
	width: 48px;
	height: 48px;
	object-fit: cover;
	background-color: hsl(var(--ava, 188), 62%, 52%);
	background-image: linear-gradient(135deg, hsl(var(--ava, 188), 62%, 52%), hsl(var(--ava2, 228), 62%, 40%));
}
.usr-ava--xl { width: 80px; height: 80px; font-size: 22px; letter-spacing: .5px; }
.usr-ava.is-muted { opacity: .45; }
.usr-ava--grp {
	background-image: none;
	letter-spacing: 0;
}
.usr-ava--grp::before { content: none; }
.usr-ava.usr-ava--team { background-color: #0ea5e9; background-image: none; }
.usr-ava.usr-ava--vendor { background-color: #f59e0b; background-image: none; }
.usr-ava--grp i { font-size: 10px; line-height: 1; }
.usr-ava--sm.usr-ava--grp i { font-size: 9px; }
.usr-ava--xs.usr-ava--grp i { font-size: 8px; }
body:not([data-theme="dark"]) .usr-ava {
	border-color: rgba(0, 0, 0, 0.15);
}
[data-theme="dark"] .usr-ava,
body[data-theme="dark"] .usr-ava {
	border-color: #fff;
}
.select2-results__option > span > i.fa-users,
.select2-selection__choice > span > i.fa-users,
.select2-selection__rendered > span > i.fa-users {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 20px;
	height: 20px;
	border-radius: 50%;
	background: #0ea5e9;
	color: #fff;
	font-size: 9px;
	vertical-align: middle;
}
.select2-results__option > span > i.fa-truck,
.select2-selection__choice > span > i.fa-truck,
.select2-selection__rendered > span > i.fa-truck {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 20px;
	height: 20px;
	border-radius: 50%;
	background: #f59e0b;
	color: #fff;
	font-size: 9px;
	vertical-align: middle;
}

@media print {

    :is([class*="progress-fill"],
        [class*="-bar-fill"],
        .summary-progress-overdue,
        .leave-progress-bar,
        .progress-bar-mini,
        .lic-legend-bar,
        .apd-cap-bar,
        .pay-rep-funnel-bar,
        .pay-rep-split-paid,
        .plan-board-progress-bar,
        .asset-cost-split-dep,
        .asset-cost-split-nbv,
        .hr-ov-bar > span,
        .hr-ov-meter > span,
        .uas-bar > span,
        .wo-timeline-connector-progress,
        .wfl-progress > span,
        .wfl-heat__tot > span,
        .progress > .progress-bar) {
        transform: none;
        animation: none;
    }
}

/* Assets QR Code — customize + live preview */
.ast-qr-label-preview {
    margin-top: 10px;
    padding: 10px;
    background: #f8f9fa;
    border-left: 4px solid #007bff;
}

.ast-qr-view-note {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    margin-bottom: 12px;
    padding: 10px 12px;
    background: #f8f9fa;
    border: 1px solid #e9ecef;
    border-left: 4px solid #009688;
    border-radius: 8px;
    color: #212529;
}

.ast-qr-view-note__badge {
    flex: 0 0 auto;
    font-weight: 700;
    color: #009688;
    white-space: nowrap;
}

.ast-qr-view-note__text {
    color: #495057;
    font-size: 13px;
    line-height: 1.4;
}

.ast-qr-live-preview {
    background: #f8f9fa;
    border: 1px solid #dee2e6;
    border-radius: 8px;
    padding: 12px;
    text-align: center;
    min-height: 220px;
}

.ast-qr-live-preview-title {
    font-weight: 600;
    font-size: 12px;
    margin-bottom: 8px;
    color: #495057;
}

.ast-qr-live-preview-slot {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 200px;
    max-height: 320px;
    overflow: hidden;
    background: #fff;
    border-radius: 6px;
    border: 1px dashed #ced4da;
    margin-bottom: 8px;
    padding: 10px;
    box-sizing: border-box;
    width: 100%;
}

.ast-qr-live-scale-stage {
    display: block;
    margin: 0 auto;
    overflow: hidden;
    flex: 0 0 auto;
}

.ast-qr-live-scale-inner {
    display: block;
    transform-origin: top center;
    will-change: transform;
}

/* Same card chrome as generated labels; only used inside live preview. */
.ast-qr-live-preview-slot .ast-qr-live-card.tile {
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
}

.ast-qr-live-preview-slot .ast-qr-live-card .print_qr img {
    display: block;
    image-rendering: pixelated;
}

.ast-qr-live-preview-slot .ast-qr-mini-label {
    margin: 0 auto;
    flex: 0 0 auto;
    max-width: 100%;
}

.ast-qr-live-preview-slot img {
    display: block;
    image-rendering: pixelated;
}

.ast-qr-mini-label {
    background: #fff;
    border: 1px solid #ced4da;
    border-radius: 4px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
    overflow: hidden;
    box-sizing: border-box;
}

.ast-qr-mini-label-inner {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    width: 100%;
    height: 100%;
    box-sizing: border-box;
}

.ast-qr-mini-qr {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-left: auto;
    margin-right: auto;
}

.ast-qr-mini-qr img {
    display: block;
    image-rendering: pixelated;
}

.ast-qr-mini-text {
    flex: 1 1 auto;
    min-width: 0;
    overflow: visible;
    text-align: left;
    font-size: 10px;
    line-height: 1.25;
    color: #212529;
}

.ast-qr-mini-label.is-vertical .ast-qr-mini-text {
    text-align: center;
    flex: 0 1 auto;
    width: 100%;
}

.ast-qr-mini-brand {
    font-weight: 700;
    margin-bottom: 2px;
    word-break: break-word;
    overflow-wrap: anywhere;
}

.ast-qr-mini-line {
    display: flex;
    flex-direction: column;
    margin-bottom: 2px;
    min-width: 0;
}

.ast-qr-mini-k {
    font-size: 9px;
    font-style: italic;
    color: #6c757d;
}

.ast-qr-mini-v {
    font-weight: 600;
    white-space: normal;
    overflow: visible;
    word-break: break-word;
    overflow-wrap: anywhere;
}

/* Generated QR cards — full-width row, balanced in the tile */
.qr-desktop-view.tile {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    justify-content: center;
    box-sizing: border-box;
    padding: 14px 16px;
}

.ast-qr-labels-grid {
    display: grid;
    width: 100%;
}

.ast-qr-labels-grid>.qr-label-item {
    min-width: 0;
    width: 100%;
}

.ast-qr-sheet-break {
    grid-column: 1 / -1;
    height: 0;
    margin: 0;
    padding: 0;
    border: 0;
}

.qr-desktop-view .ast-qr-card-row {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: flex-start;
    gap: 14px;
    width: 100%;
    flex: 1 1 auto;
    align-self: stretch;
    box-sizing: border-box;
}

.qr-desktop-view.ast-qr-arr-row .ast-qr-card-row {
    flex-direction: row;
}

.qr-desktop-view.ast-qr-arr-row-reverse .ast-qr-card-row {
    flex-direction: row-reverse;
}

.qr-desktop-view.ast-qr-arr-column .ast-qr-card-row,
.qr-desktop-view.ast-qr-arr-qr-only .ast-qr-card-row {
    flex-direction: column;
}

.qr-desktop-view.ast-qr-arr-column .ast-qr-card-qr,
.qr-desktop-view.ast-qr-arr-qr-only .ast-qr-card-qr {
    max-width: 100%;
}

.qr-desktop-view .ast-qr-card-qr {
    flex: 0 0 auto;
    max-width: 42%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.qr-desktop-view .ast-qr-card-text {
    flex: 1 1 auto;
    min-width: 0;
    width: 100%;
}

.qr-desktop-view .ast-qr-desktop-value,
.qr-desktop-view .ast-qr-desktop-note {
    display: block;
    white-space: normal;
    overflow: visible;
    word-break: break-word;
    overflow-wrap: anywhere;
    line-height: 1.2;
}

[data-theme="dark"] .ast-qr-label-preview {
    background: #262626;
    border-left-color: #009688;
    color: #fff;
}

[data-theme="dark"] .ast-qr-live-preview {
    background: #262626;
    border-color: #3a3a3a;
}

[data-theme="dark"] .ast-qr-live-preview-title {
    color: #fff;
}

[data-theme="dark"] .ast-qr-live-preview-slot {
    background: #1f1f1f;
    border-color: #3a3a3a;
}

[data-theme="dark"] .ast-qr-live-preview-slot .ast-qr-live-card.tile {
    background: #333 !important;
    color: #fff;
}

[data-theme="dark"] .ast-qr-mini-label {
    background: #333;
    border-color: #3a3a3a;
}

[data-theme="dark"] .ast-qr-mini-text {
    color: #fff;
}

[data-theme="dark"] .ast-qr-mini-k {
    color: #adb5bd;
}

/* Asset QR Label Designer studio */
.ast-qr-studio-dialog {
    max-width: 1120px;
}

.ast-qr-studio-modal .modal-header {
    align-items: flex-start;
}

.ast-qr-studio-body {
    background: #f3f5f6;
    padding: 14px 16px !important;
}

.ast-qr-studio-layout {
    display: grid;
    grid-template-columns: minmax(280px, 340px) minmax(0, 1fr);
    gap: 14px;
    align-items: stretch;
    min-height: 520px;
}

.ast-qr-studio-controls {
    background: #fff;
    border: 1px solid #dde2e5;
    border-radius: 10px;
    padding: 0;
    max-height: min(68vh, 640px);
    overflow: auto;
}

.ast-qr-studio-section {
    padding: 12px 14px;
    border-bottom: 1px solid #eef1f3;
}

.ast-qr-studio-section:last-child {
    border-bottom: 0;
}

.ast-qr-studio-section-title {
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: #6c757d;
    margin-bottom: 10px;
}

.ast-qr-studio-label {
    display: block;
    font-size: 12px;
    color: #6c757d;
    margin-bottom: 4px;
}

.ast-qr-studio-label strong {
    color: #009688;
    font-weight: 700;
}

.ast-qr-studio-color {
    min-height: 31px;
    cursor: pointer;
}

.ast-qr-studio-preview {
    background: #fff;
    border: 1px solid #dde2e5;
    border-radius: 10px;
    padding: 12px 14px;
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.ast-qr-studio-sheet-toolbar {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 12px;
    margin-bottom: 10px;
}

.ast-qr-studio-preview-title {
    font-weight: 600;
    font-size: 13px;
    color: #343a40;
}

.ast-qr-studio-zoom-btns .btn.active {
    background: #009688;
    border-color: #009688;
    color: #fff;
}

.ast-qr-studio-sheet-stage {
    background: #dfe6e4;
    background-image:
        linear-gradient(45deg, rgba(255, 255, 255, 0.35) 25%, transparent 25%),
        linear-gradient(-45deg, rgba(255, 255, 255, 0.35) 25%, transparent 25%),
        linear-gradient(45deg, transparent 75%, rgba(255, 255, 255, 0.35) 75%),
        linear-gradient(-45deg, transparent 75%, rgba(255, 255, 255, 0.35) 75%);
    background-size: 16px 16px;
    background-position: 0 0, 0 8px, 8px -8px, -8px 0;
    border-radius: 8px;
    padding: 18px 14px;
    overflow: auto;
    flex: 1 1 auto;
    min-height: 420px;
    max-height: min(62vh, 580px);
    display: flex;
    justify-content: center;
    align-items: flex-start;
}

.ast-qr-studio-sheet {
    background: #fff;
    box-shadow: 0 10px 28px rgba(0, 0, 0, 0.18);
    box-sizing: border-box;
    border: 1px solid #cfd6d4;
    position: relative;
    flex: 0 0 auto;
    overflow: hidden;
}

.ast-qr-studio-controls input[readonly] {
    background: #f1f3f4;
    color: #6c757d;
    cursor: not-allowed;
}

.ast-qr-studio-controls .custom-range:disabled {
    opacity: 0.45;
}

#studio_layout_hint {
    font-size: 11px;
    line-height: 1.35;
}

.ast-qr-studio-sheet::before {
    content: attr(data-page-label);
    position: absolute;
    top: 3mm;
    right: 4mm;
    font-size: 9px;
    font-weight: 700;
    letter-spacing: 0.08em;
    color: #adb5bd;
    pointer-events: none;
}

@media (max-width: 991.98px) {
    .ast-qr-studio-layout {
        grid-template-columns: 1fr;
        min-height: 0;
    }

    .ast-qr-studio-controls {
        max-height: 42vh;
    }

    .ast-qr-studio-sheet-stage {
        min-height: 320px;
        max-height: 48vh;
    }
}

[data-theme="dark"] .ast-qr-studio-modal .modal-content {
    background: #262626;
    color: #fff;
}

[data-theme="dark"] .ast-qr-studio-modal .modal-header,
[data-theme="dark"] .ast-qr-studio-modal .modal-footer {
    border-color: #3a3a3a;
}

[data-theme="dark"] .ast-qr-studio-body {
    background: #1f1f1f;
}

[data-theme="dark"] .ast-qr-studio-controls,
[data-theme="dark"] .ast-qr-studio-preview {
    background: #262626;
    border-color: #3a3a3a;
    color: #fff;
}

[data-theme="dark"] .ast-qr-studio-section {
    border-bottom-color: #3a3a3a;
}

[data-theme="dark"] .ast-qr-studio-section-title,
[data-theme="dark"] .ast-qr-studio-label {
    color: #adb5bd;
}

[data-theme="dark"] .ast-qr-studio-preview-title {
    color: #fff;
}

[data-theme="dark"] .ast-qr-studio-sheet-stage {
    background: #333;
    background-image: none;
}

[data-theme="dark"] .ast-qr-studio-sheet {
    background: #fff;
    border-color: #555;
}

[data-theme="dark"] .ast-qr-studio-zoom-btns .btn-outline-secondary {
    color: #fff;
    border-color: #3a3a3a;
}

[data-theme="dark"] .ast-qr-studio-controls input[readonly] {
    background: #423e3e;
    color: #c2c2c2;
    border-color: #3a3a3a;
}

/* ==================== Assets Detail redesign + shared asset page nav (dark mode, progress legend) ==================== */
/* Light-mode styles live with the components (Assets_Detail.php, Assets/Assets_Page_Navigation_Styles.php). */

/* Progress-bar legend under doughnut charts (same markup as Licenses/License.php buildProgressLegend) */
.lic-legend-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 6px 10px;
}

.lic-legend-cell {
    min-width: 0;
}

.lic-legend-top {
    display: flex;
    align-items: center;
    gap: 5px;
    margin-bottom: 2px;
    font-size: .72rem;
}

.lic-legend-dot {
    display: inline-block;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    flex-shrink: 0;
}

.lic-legend-label {
    flex: 1;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.lic-legend-val {
    flex-shrink: 0;
    font-weight: 700;
    font-size: .72rem;
}

.lic-legend-bar-wrap {
    height: 6px;
    background: rgba(0, 0, 0, .07);
    border-radius: 3px;
    overflow: hidden;
}

.lic-legend-bar {
    height: 100%;
    border-radius: 3px;
    transition: width .4s;
}

[data-theme="dark"] .lic-legend-bar-wrap {
    background: rgba(255, 255, 255, .1);
}

/* Asset page nav (pills + actions; phone bottom bar) */
[data-theme="dark"] .asset-detail-subnav--primary .nav-link:not(.active) {
    color: #cbd5e1;
    background: rgba(255, 255, 255, 0.06);
    border-color: rgba(255, 255, 255, 0.1);
}

[data-theme="dark"] .asset-detail-subnav--primary .nav-link:not(.active):hover {
    background: rgba(255, 255, 255, 0.1);
    color: #fff;
    border-color: rgba(255, 255, 255, 0.14);
}

[data-theme="dark"] .asset-detail-page-nav.tile {
    background-color: #333 !important;
    border-color: #444;
}

[data-theme="dark"] .asset-detail-more-menu.dropdown-menu {
    background-color: #2c2c2c;
    border-color: #444;
    box-shadow: 0 16px 36px rgba(0, 0, 0, 0.45);
}

[data-theme="dark"] .asset-detail-more-menu .dropdown-header {
    color: #adb5bd;
}

[data-theme="dark"] .asset-detail-more-menu .dropdown-item {
    color: #e5e7eb;
}

[data-theme="dark"] .asset-detail-more-menu .dropdown-item:hover,
[data-theme="dark"] .asset-detail-more-menu .dropdown-item:focus {
    background-color: rgba(255, 255, 255, 0.07);
    color: #fff;
}

[data-theme="dark"] .asset-detail-more-menu .dropdown-item.active {
    background-color: rgba(var(--primary-rgb, 0, 150, 136), 0.28);
    color: #02d9c4;
}

[data-theme="dark"] .asset-detail-more-menu .dropdown-divider {
    border-top-color: #444;
}

@media (max-width: 767px) {
    [data-theme="dark"] .asset-detail-nav-row .asset-page-actions {
        background: #2c2c2c;
        border-color: #444;
    }
}

/* Assets_Detail page body */
[data-theme="dark"] .astd-subhead {
    color: #e5e7eb;
    border-top-color: #444;
}

[data-theme="dark"] .astd-empty-bar {
    background: rgba(var(--primary-rgb, 0, 150, 136), 0.15);
}

[data-theme="dark"] .astd-empty-toggle {
    color: #e5e7eb;
}

[data-theme="dark"] .astd-empty-complete,
[data-theme="dark"] .astd-empty-state a,
[data-theme="dark"] .asset-kpi-data-cta,
[data-theme="dark"] .astd-ops-more,
[data-theme="dark"] .astd-card-edit {
    color: #02b3a2 !important;
}

[data-theme="dark"] .astd-empty-complete:hover,
[data-theme="dark"] .astd-empty-state a:hover,
[data-theme="dark"] .astd-card-edit:hover {
    color: #02d9c4 !important;
}

[data-theme="dark"] .astd-empty-chip {
    color: #adb5bd;
    border-color: #444;
}

[data-theme="dark"] .astd-empty-state {
    color: #adb5bd;
}

/* Open CM notice is a standard .alert-warning, which stays light in dark mode (dark-mode.css): keep its text dark */
[data-theme="dark"] .astd-open-cm strong,
[data-theme="dark"] .astd-open-cm-hint,
[data-theme="dark"] .astd-open-cm-date,
[data-theme="dark"] .astd-open-cm-desc {
    color: #856404;
}

[data-theme="dark"] .astd-open-cm-all,
[data-theme="dark"] .astd-open-cm-list a {
    color: #00635a !important;
}

/* Project Progress Report (app/Projects/Project_Progress_Report.php).
   The report sheet itself stays white — it previews a printed A4 page. */
[data-theme="dark"] .ppr-preview-wrap {
    background: #1F1F1F;
}

[data-theme="dark"] .ppr-sheet {
    box-shadow: 0 2px 10px rgba(0, 0, 0, .5);
}

[data-theme="dark"] .ppr-actions {
    background: #333;
    border-top-color: #3a3a3a;
}

[data-theme="dark"] .ppr-settings .ppr-group-title,
[data-theme="dark"] .ppr-settings .ppr-hint,
[data-theme="dark"] .ppr-preview-note {
    color: #adb5bd;
}

/* ==================== Project dashboard (app/Projects/Project_Detail.php) ==================== */
/* Schedule-health tones: good / warn / bad (soft pastel borders from the chart palette). */
.pd-tone-good {
    background: rgba(110, 204, 132, 0.9);
}

.pd-tone-warn {
    background: rgba(200, 140, 0, 0.9);
}

.pd-tone-bad {
    background: rgba(243, 62, 80, 0.9);
}

.pd-tone-text-good {
    color: #1e8e3e;
}

.pd-tone-text-warn {
    color: #b26a00;
}

.pd-tone-text-bad {
    color: #d32f2f;
}

.pd-kpi-row .kpi-card {
    align-items: flex-start;
}

.pd-kpi-value-sm {
    font-size: 16px;
}

.pd-kpi-hint {
    font-size: 11.5px;
    color: #6c757d;
    margin-top: 3px;
    line-height: 1.35;
}

.pd-kpi-link,
.pd-kpi-link:hover {
    color: inherit;
    text-decoration: none;
}

.pd-kpi-bar {
    position: relative;
    height: 6px;
    background: #e9ecef;
    border-radius: 3px;
    margin-top: 5px;
}

.pd-kpi-bar-fill {
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    border-radius: 3px;
}

.pd-kpi-bar-plan {
    position: absolute;
    top: -3px;
    bottom: -3px;
    width: 2px;
    margin-left: -1px;
    background: #343a40;
    border-radius: 1px;
}

.pd-attention-list {
    max-height: 300px;
    overflow-y: auto;
    scrollbar-width: thin;
}

.pd-attention-item {
    padding: 7px 10px;
    margin-bottom: 6px;
    border-radius: 8px;
    background: #f8f9fa;
    border-left: 4px solid #ced4da;
}

.pd-tone-border-good {
    border-left-color: rgba(110, 204, 132, 0.9) !important;
}

.pd-tone-border-warn {
    border-left-color: rgba(200, 140, 0, 0.9) !important;
}

.pd-tone-border-bad {
    border-left-color: rgba(243, 62, 80, 0.9) !important;
}

.pd-attention-title {
    font-weight: 600;
    color: #212529;
    min-width: 0;
}

.pd-attention-pct {
    font-weight: 700;
    font-size: 12px;
    margin-left: 8px;
    flex-shrink: 0;
}

.pd-attention-meta>span:first-child {
    white-space: nowrap;
    flex-shrink: 0;
}

.pd-attention-meta>span:last-child {
    min-width: 0;
}

.pd-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 180px;
    text-align: center;
    color: #6c757d;
}

.pd-empty .fa {
    font-size: 30px;
    color: rgba(110, 204, 132, 0.9);
    margin-bottom: 6px;
}

.pd-board-row {
    display: grid;
    grid-template-columns: minmax(160px, 30%) 1fr 90px;
    gap: 14px;
    align-items: center;
    padding: 9px 0;
    border-bottom: 1px solid rgba(0, 0, 0, 0.06);
}

.pd-board-row:last-child {
    border-bottom: 0;
}

.pd-board-name {
    min-width: 0;
}

.pd-board-name a {
    color: #212529;
}

.pd-board-bar {
    position: relative;
    height: 10px;
    background: #e9ecef;
    border-radius: 5px;
    margin-bottom: 3px;
}

.pd-board-bar-fill {
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    border-radius: 5px;
}

.pd-board-bar-plan {
    position: absolute;
    top: -3px;
    bottom: -3px;
    width: 2px;
    margin-left: -1px;
    background: #343a40;
    border-radius: 1px;
}

.pd-board-figs {
    text-align: right;
    line-height: 1.25;
}

.pd-board-figs strong {
    display: block;
    font-size: 15px;
}

.pd-board-figs span {
    font-size: 12px;
}

.pd-legend-plan {
    display: inline-block;
    width: 2px;
    height: 12px;
    background: #343a40;
    vertical-align: middle;
    margin-right: 3px;
}

.pd-fin-callout {
    border-left: 4px solid #ced4da;
    background: #f8f9fa;
    border-radius: 6px;
    padding: 6px 9px;
}

.pd-details-card .downtime-meta-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    grid-template-rows: none;
    grid-auto-flow: row;
}

@media (max-width: 767.98px) {
    .pd-board-row {
        grid-template-columns: 1fr 70px;
    }

    .pd-board-bar-wrap {
        grid-column: 1 / -1;
        grid-row: 2;
    }

    .pd-details-card .downtime-meta-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

[data-theme="dark"] .pd-kpi-hint {
    color: #adb5bd;
}

[data-theme="dark"] .pd-kpi-bar,
[data-theme="dark"] .pd-board-bar {
    background: #444;
}

[data-theme="dark"] .pd-kpi-bar-plan,
[data-theme="dark"] .pd-board-bar-plan,
[data-theme="dark"] .pd-legend-plan {
    background: #f1f1f1;
}

[data-theme="dark"] .pd-attention-item,
[data-theme="dark"] .pd-fin-callout {
    background: #262626;
}

[data-theme="dark"] .pd-attention-title,
[data-theme="dark"] .pd-board-name a {
    color: #02b3a2;
}

[data-theme="dark"] .pd-board-row {
    border-bottom-color: #3a3a3a;
}

[data-theme="dark"] .pd-tone-text-good {
    color: #6ecc84;
}

[data-theme="dark"] .pd-tone-text-warn {
    color: #ffc864;
}

[data-theme="dark"] .pd-tone-text-bad {
    color: #ff6b7a;
}

/* SSO Attribute Mapping — Last Received Attributes */
.sso-last-attrs-panel .card-header {
    background: #f6f8f8;
    border-bottom: 1px solid var(--default-line, #dee2e6);
}

.sso-last-attrs-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.sso-last-attrs-chip {
    border: 1px solid #009688;
    color: #00695c;
    background: #fff;
    border-radius: 999px;
    padding: 4px 12px;
    font-size: 12px;
    line-height: 1.4;
    cursor: pointer;
}

.sso-last-attrs-chip:hover {
    background: rgba(0, 150, 136, 0.1);
}

.sso-last-attrs-chip.used {
    opacity: 0.45;
    cursor: default;
}

.sso-last-attrs-json {
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: 12px;
    min-height: 200px;
    white-space: pre;
}

[data-theme="dark"] .sso-last-attrs-panel .card-header {
    background: #333;
    border-bottom-color: #3a3a3a;
}

[data-theme="dark"] .sso-last-attrs-chip {
    background: #262626;
    border-color: #009688;
    color: #02b3a2;
}

[data-theme="dark"] .sso-last-attrs-chip:hover {
    background: #333;
}

[data-theme="dark"] .sso-last-attrs-json {
    background: #262626;
    color: #fff;
    border-color: #3a3a3a;
}

/* SSO Value Rules — Test Rules panel */
.sso-rules-test-panel .card-header {
    background: #f6f8f8;
    border-bottom: 1px solid var(--default-line, #dee2e6);
}

.sso-rules-test-json {
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: 12px;
    min-height: 260px;
    white-space: pre;
}

.sso-rules-test-changed td {
    background: rgba(255, 225, 0, 0.35);
}

.sso-rules-test-log {
    max-height: 180px;
    overflow: auto;
    border: 1px solid var(--default-line, #dee2e6);
    border-radius: 6px;
    padding: 8px 10px;
    background: #fafafa;
}

.sso-rules-test-log-fired {
    color: #00695c;
}

.sso-rules-test-log-nomatch {
    color: #6c757d;
}

.sso-rules-test-log-skipped {
    color: #a67c00;
}

[data-theme="dark"] .sso-rules-test-panel .card-header {
    background: #333;
    border-bottom-color: #3a3a3a;
}

[data-theme="dark"] .sso-rules-test-json {
    background: #262626;
    color: #fff;
    border-color: #3a3a3a;
}

[data-theme="dark"] .sso-rules-test-changed td {
    background: rgba(255, 225, 0, 0.18);
}

[data-theme="dark"] .sso-rules-test-log {
    background: #262626;
    border-color: #3a3a3a;
    color: #ddd;
}

[data-theme="dark"] .sso-rules-test-log-fired {
    color: #6ecc84;
}

[data-theme="dark"] .sso-rules-test-log-nomatch {
    color: #adb5bd;
}

[data-theme="dark"] .sso-rules-test-log-skipped {
    color: #ffc864;
}

.login-page-opt-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
    margin-bottom: 16px;
}

.login-page-opt {
    display: flex;
    align-items: center;
    gap: 12px;
    margin: 0;
    padding: 14px 16px;
    border: 1px solid #e9ecef;
    border-left: 4px solid var(--primary, #009688);
    border-radius: 10px;
    background: #fff;
    box-shadow: 0 6px 6px 0 rgba(0, 0, 0, 0.08), 0 1px 6px 0 rgba(0, 0, 0, 0.06);
    cursor: pointer;
    color: inherit;
    user-select: none;
}

.login-page-opt--demo {
    border-left-color: var(--info, #17a2b8);
}

.login-page-opt--sso {
    border-left-color: var(--purple);
}

.login-page-opt--install {
    border-left-color: var(--teal);
}

.login-page-opt__icon {
    width: 42px;
    height: 42px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    color: #fff;
    font-size: 18px;
    background: var(--primary, #009688);
}

.login-page-opt--demo .login-page-opt__icon {
    background: var(--info, #17a2b8);
}

.login-page-opt--sso .login-page-opt__icon {
    background: var(--purple);
}

.login-page-opt--install .login-page-opt__icon {
    background: var(--teal);
}

.login-page-opt__copy {
    flex: 1;
    min-width: 0;
}

.login-page-opt__title {
    display: block;
    font-size: 15px;
    font-weight: 600;
    line-height: 1.25;
}

.login-page-opt__hint {
    display: block;
    margin-top: 3px;
    font-size: 12px;
    line-height: 1.35;
    color: #6c757d;
}

.login-page-opt__switch {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    flex-shrink: 0;
    position: relative;
}

.login-page-opt__switch input[type="checkbox"] {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    border: 0;
}

.login-page-opt__track {
    width: 40px;
    height: 22px;
    border-radius: 11px;
    background: #dee2e6;
    position: relative;
    flex-shrink: 0;
    transition: background 0.2s ease;
}

.login-page-opt__track::after {
    content: "";
    position: absolute;
    top: 2px;
    left: 2px;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background: #fff;
    transition: transform 0.2s ease;
}

.login-page-opt input:checked~.login-page-opt__track {
    background: var(--primary, #009688);
}

.login-page-opt input:checked~.login-page-opt__track::after {
    transform: translateX(18px);
}

.login-page-opt input:focus-visible~.login-page-opt__track {
    box-shadow: 0 0 0 3px rgba(var(--primary-rgb, 0, 150, 136), 0.28);
}

.login-page-opt__state {
    min-width: 52px;
    font-size: 12px;
    font-weight: 600;
    color: #6c757d;
}

.login-page-opt__on {
    display: none;
}

.login-page-opt input:checked~.login-page-opt__state .login-page-opt__on {
    display: inline;
}

.login-page-opt input:checked~.login-page-opt__state .login-page-opt__off {
    display: none;
}

@media (max-width: 767.98px) {
    .login-page-opt-grid {
        grid-template-columns: minmax(0, 1fr);
    }
}

[data-theme="dark"] .login-page-opt {
    background: #2d2d2d;
    border-top-color: #3a3a3a;
    border-right-color: #3a3a3a;
    border-bottom-color: #3a3a3a;
    color: #fff;
}

[data-theme="dark"] .login-page-opt__title {
    color: #fff;
}

[data-theme="dark"] .login-page-opt__hint,
[data-theme="dark"] .login-page-opt__state {
    color: #adb5bd;
}

[data-theme="dark"] .login-page-opt__track {
    background: #3a3a3a;
}

[data-theme="dark"] .login-page-opt input:checked~.login-page-opt__track {
    background: var(--primary, #009688);
}

[data-theme="dark"] .new-user-welcome-preview .new-user-welcome-preview__body,
[data-theme="dark"] .new-user-welcome-preview .new-user-welcome-preview__body div,
[data-theme="dark"] .new-user-welcome-preview .new-user-welcome-preview__body p,
[data-theme="dark"] .new-user-welcome-preview .new-user-welcome-preview__body span,
[data-theme="dark"] .new-user-welcome-preview .new-user-welcome-preview__body b,
[data-theme="dark"] .new-user-welcome-preview .new-user-welcome-preview__body strong {
    color: var(--black);
}

[data-theme="dark"] .ticket-status-filter[data-status="Open"] {
    color: var(--info);
    background: transparent;
    border-color: var(--info);
}

[data-theme="dark"] .ticket-status-filter[data-status="Open"].active {
    color: #fff;
    background: var(--info);
    border-color: var(--info);
}

[data-theme="dark"] .ticket-status-filter[data-status="In-Progress"] {
    color: var(--warning);
    background: transparent;
    border-color: var(--warning);
}

[data-theme="dark"] .ticket-status-filter[data-status="In-Progress"].active {
    color: var(--font-color);
    background: var(--warning-back);
    border-color: var(--warning-back);
}

[data-theme="dark"] .ticket-status-filter[data-status="Closed"] {
    color: #fff;
    background: transparent;
    border-color: var(--secondary);
}

[data-theme="dark"] .ticket-status-filter[data-status="Closed"].active {
    color: #fff;
    background: var(--secondary);
    border-color: var(--secondary);
}

[data-theme="dark"] #supportTicketModal .support-modal-tabs {
    border-bottom-color: #3a3a3a;
}

[data-theme="dark"] #supportTicketModal .support-modal-tab {
    color: #c2c2c2;
}

[data-theme="dark"] #supportTicketModal .support-modal-tab.is-active,
[data-theme="dark"] #supportTicketModal .support-modal-tab:hover {
    color: #02b3a2;
}

[data-theme="dark"] #supportTicketModal .support-modal-tab.is-active {
    border-bottom-color: #009688;
}

[data-theme="dark"] #supportTicketModal .support-upload-hint {
    color: #c2c2c2;
}

/* Analytics decision pages (app/Analytic/Include/analytics_kit.php) — dark mode */
[data-theme="dark"] .ak-kpi {
    --ak-kpi-bg: #262626;
}

[data-theme="dark"] .ak-sub {
    border-color: #3a3a3a;
}

[data-theme="dark"] .ak-table tr.ak-detail>td {
    background: #2b2b2b;
}

[data-theme="dark"] .ak-good {
    color: #5bd17a;
}

[data-theme="dark"] .ak-warn {
    color: #f2b45a;
}

[data-theme="dark"] .ak-bad {
    color: #ff7b72;
}

[data-theme="dark"] .ak-insights {
    background: rgba(0, 150, 136, .12);
}

[data-theme="dark"] .atb-help {
    --atb-help-bg: #262626;
    border-color: #3a3a3a;
}

[data-theme="dark"] .atb-help .atb-help-read,
[data-theme="dark"] .atb-help ul {
    color: #c9c9c9;
}

/* Report summary: Average Rating card (Corrective_Report / Preventive_Report) */
.summary-card-rating .summary-rating-row {
    display: grid;
    grid-template-columns: auto 1fr;
    align-items: baseline;
    column-gap: 0.5rem;
    row-gap: 0.2rem;
    margin-top: 0.35rem;
}

.summary-card-rating .summary-rating-row+.summary-rating-row {
    margin-top: 0.55rem;
}

.summary-card-rating .summary-rating-label {
    font-size: 0.7rem;
    font-weight: 600;
    color: var(--secondary, #6c757d);
}

.summary-card-rating .summary-rating-score {
    justify-self: end;
    font-size: 1.05rem;
    font-weight: 700;
    color: #2c3e50;
    line-height: 1.1;
    font-variant-numeric: tabular-nums;
}

.summary-card-rating .summary-rating-max {
    font-size: 0.7rem;
    font-weight: 500;
    color: var(--secondary, #6c757d);
}

.summary-card-rating .summary-rating-star {
    font-size: 0.8rem;
    color: var(--warning, #ffc107);
}

.summary-card-rating .summary-rating-track {
    grid-column: 1 / -1;
    height: 4px;
    border-radius: 2px;
    background: #e9ecef;
    overflow: hidden;
}

.summary-card-rating .summary-rating-fill {
    height: 100%;
    background: var(--warning, #ffc107);
    transition: width 0.3s ease;
}

.summary-card-rating .summary-rating-count {
    grid-column: 1 / -1;
    font-size: 0.68rem;
    color: var(--secondary, #6c757d);
}

[data-theme="dark"] .summary-card-rating .summary-rating-score {
    color: #e2e8f0;
}

[data-theme="dark"] .summary-card-rating .summary-rating-label,
[data-theme="dark"] .summary-card-rating .summary-rating-max,
[data-theme="dark"] .summary-card-rating .summary-rating-count {
    color: #a0aec0;
}

[data-theme="dark"] .summary-card-rating .summary-rating-track {
    background: #334155;
}


/* Report Help tour (app/Include/report_tour.js) */
.rt-spotlight {
    position: absolute;
    z-index: 100000;
    border-radius: 10px;
    pointer-events: none;
    box-shadow: 0 0 0 3px var(--primary, #009688), 0 0 0 9999px rgba(15, 23, 42, 0.55);
    transition: top 0.25s ease, left 0.25s ease, width 0.25s ease, height 0.25s ease;
}

.rt-pop {
    position: fixed;
    z-index: 100001;
    width: 320px;
    max-width: calc(100vw - 24px);
    background: #fff;
    color: #2c3e50;
    border-radius: 12px;
    padding: 0.85rem 1rem 0.8rem;
    box-shadow: 0 12px 32px rgba(15, 23, 42, 0.25);
    font-size: 0.85rem;
    outline: none;
}

.rt-pop--center {
    top: 50% !important;
    left: 50% !important;
    transform: translate(-50%, -50%);
    width: 360px;
}

.rt-pop__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 0.35rem;
}

.rt-pop__progress {
    font-size: 0.7rem;
    font-weight: 600;
    letter-spacing: 0.3px;
    text-transform: uppercase;
    color: var(--secondary, #6c757d);
}

.rt-pop__skip {
    border: 0;
    background: none;
    padding: 0;
    font-size: 0.75rem;
    color: var(--secondary, #6c757d);
    cursor: pointer;
}

.rt-pop__skip:hover {
    color: var(--primary, #009688);
    text-decoration: underline;
}

.rt-pop__title {
    font-size: 1rem;
    font-weight: 700;
    margin-bottom: 0.3rem;
    line-height: 1.25;
}

.rt-pop__text {
    line-height: 1.45;
    color: #4a5568;
}

.rt-pop__bar {
    height: 3px;
    border-radius: 2px;
    background: #e9ecef;
    margin: 0.75rem 0 0.65rem;
    overflow: hidden;
}

.rt-pop__fill {
    display: block;
    height: 100%;
    background: var(--primary, #009688);
    transition: width 0.25s ease;
}

.rt-pop__actions {
    display: flex;
    justify-content: flex-end;
    gap: 0.4rem;
}

[data-theme="dark"] .rt-pop {
    background: #1e293b;
    color: #e2e8f0;
    box-shadow: 0 12px 32px rgba(0, 0, 0, 0.5);
}

[data-theme="dark"] .rt-pop__text {
    color: #cbd5e1;
}

[data-theme="dark"] .rt-pop__progress,
[data-theme="dark"] .rt-pop__skip {
    color: #94a3b8;
}

[data-theme="dark"] .rt-pop__bar {
    background: #334155;
}

[data-theme="dark"] .rt-spotlight {
    box-shadow: 0 0 0 3px var(--primary, #009688), 0 0 0 9999px rgba(0, 0, 0, 0.65);
}

@media (max-width: 575.98px) {

    .rt-pop,
    .rt-pop--center {
        top: auto !important;
        left: 12px !important;
        right: 12px;
        bottom: 12px;
        transform: none;
        width: auto;
        max-width: none;
    }
}

/* Report summary tables: worker metrics + rating distribution (report_summary_metrics.php) */
.report-rating-avg {
    font-weight: 600;
    white-space: nowrap;
}

.report-star {
    color: var(--warning, #ffc107);
}

.report-rating-level {
    font-weight: 600;
    white-space: nowrap;
}

.report-metric-overdue a {
    color: var(--danger, #dc3545);
    font-weight: 600;
}

.report-rating-bar {
    height: 4px;
    margin-top: 3px;
    border-radius: 2px;
    background: #e9ecef;
    overflow: hidden;
}

.report-rating-bar>span {
    display: block;
    height: 100%;
    background: var(--warning, #ffc107);
}

.report-rating-summary {
    display: flex;
    flex-wrap: wrap;
    gap: 0.35rem 1.25rem;
    margin-bottom: 0.6rem;
    font-size: 0.85rem;
}

[data-theme="dark"] .report-rating-bar {
    background: #334155;
}

[data-theme="dark"] .report-metric-overdue a {
    color: #f87171;
}

/* Staff field setting chips (Administration > Staff Fields) */
.sf-chip-col {
    display: flex;
    padding-left: 5px;
    padding-right: 5px;
    margin-bottom: 10px;
}

.sf-chip-card {
    flex: 1 1 auto;
    min-width: 0;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    gap: 8px;
    padding: 10px 11px;
    border: 1px solid var(--default-line, #e3e3e3);
    border-radius: 12px;
    transition: border-color 0.2s, box-shadow 0.2s, opacity 0.2s;
}

.sf-chip-card:hover {
    border-color: rgba(0, 150, 136, 0.45);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
}

.sf-chip-card-title {
    font-size: 0.875rem;
    font-weight: 700;
    line-height: 1.3;
    color: var(--main-text-color, #333);
}

.sf-chip-row {
    display: flex;
    flex-wrap: wrap;
    gap: 5px;
}

.sf-chip {
    position: relative;
    display: inline-flex;
    cursor: pointer;
    user-select: none;
    margin-bottom: 0;
}

.sf-chip-input {
    position: absolute;
    opacity: 0;
    width: 1px;
    height: 1px;
    pointer-events: none;
}

.sf-chip-on,
.sf-chip-off {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 3px 8px;
    border-radius: 14px;
    border: 1px solid #d6d6d6;
    background: #fff;
    color: #777;
    font-size: 0.7rem;
    font-weight: 700;
    line-height: 1.4;
    white-space: nowrap;
}

.sf-chip-on {
    display: none;
}

.sf-chip-input:checked~.sf-chip-on {
    display: inline-flex;
}

.sf-chip-input:checked~.sf-chip-off {
    display: none;
}

.sf-chip-show,
.sf-chip-editable {
    color: var(--primary, #009688);
    border-color: var(--primary, #009688);
    background: rgba(0, 150, 136, 0.08);
}

.sf-chip-display {
    color: #6f42c1;
    border-color: #6f42c1;
    background: rgba(111, 66, 193, 0.08);
}

.sf-chip-req {
    color: #fff;
    border-color: var(--danger, #dc3545);
    background: var(--danger, #dc3545);
}

.sf-chip-input:disabled~span {
    opacity: 0.45;
    cursor: not-allowed;
}

.sf-chip-card.sf-field-is-hidden {
    border-style: dashed;
    background: #f1f1f1;
}

.sf-chip-card.sf-field-is-hidden .sf-chip-card-title {
    color: #aaa;
}

.sf-chip-card.sf-field-is-display {
    border-style: dashed;
}

.sf-chip-group {
    flex: 0 0 100%;
    max-width: 100%;
}

.sf-chip-group-title {
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.02em;
    text-transform: uppercase;
    color: var(--primary, #009688);
    border-bottom: 1px solid rgba(0, 150, 136, 0.25);
    padding-bottom: 4px;
    margin: 8px 0 4px;
}

tr.sf-field-hidden,
.sf-field-hidden {
    display: none !important;
}

.sf-field-display-only input:not([type="hidden"]),
.sf-field-display-only select,
.sf-field-display-only textarea,
.sf-field-display-only .select2-container {
    pointer-events: none;
    background-color: #f3f3f3;
}

[data-theme="dark"] .sf-chip-card {
    border-color: #3a3a3a;
    background: #262626;
}

[data-theme="dark"] .sf-chip-card-title {
    color: #fff;
}

[data-theme="dark"] .sf-chip-off {
    background: #333;
    border-color: #3a3a3a;
    color: #bbb;
}

[data-theme="dark"] .sf-chip-card.sf-field-is-hidden {
    background: #1f1f1f;
}

[data-theme="dark"] .sf-chip-card.sf-field-is-hidden .sf-chip-card-title {
    color: #777;
}

[data-theme="dark"] .sf-chip-group-title {
    color: #4db6ac;
    border-bottom-color: rgba(77, 182, 172, 0.35);
}

[data-theme="dark"] .sf-field-display-only input:not([type="hidden"]),
[data-theme="dark"] .sf-field-display-only select,
[data-theme="dark"] .sf-field-display-only textarea {
    background-color: #333;
    color: #fff;
}

/* Filtered Values badges on pages with a dedicated renderer (e.g. Preventive_Forecast); mirrors list_filter_summary.inc.php */
#filtered_summary .list-filter-badge .list-filter-remove {
    border: none;
    background: transparent;
    color: inherit;
    font-weight: bold;
    cursor: pointer;
    padding: 0 0.15em;
    margin-left: 0.35em;
    line-height: 1;
    opacity: 0.85;
    font-size: 1.1em;
    vertical-align: middle;
}

#filtered_summary .list-filter-badge .list-filter-remove:hover {
    opacity: 1;
}

#userDataContactEditModal .ud-profile-edit-dialog {
    max-width: 920px;
}

#userDataContactEditModal .modal-body {
    max-height: calc(100vh - 210px);
    overflow-y: auto;
}

/* PM Report — Export Data dropdown: title + one-line hint per option (theme-neutral via opacity) */
#export-data-button .pm-export-option {
    display: block;
    width: 100%;
    text-align: left;
    white-space: normal;
    line-height: 1.25;
    padding-top: .45rem;
    padding-bottom: .45rem;
    cursor: pointer;
}

#export-data-button .pm-export-option-title {
    display: block;
    font-weight: 600;
}

#export-data-button .pm-export-option-hint {
    display: block;
    font-size: 11px;
    opacity: .7;
}

#export-data-button .pm-export-option.disabled,
#export-data-button .pm-export-option[aria-disabled="true"] {
    cursor: not-allowed;
    opacity: .55;
    pointer-events: auto;
    /* keep tooltip on hover */
}

#export-data-button .dropdown-menu {
    min-width: 260px;
}

/* ==================== PM Overview heatmap (Include/pm_overview_heatmap.inc.php) ==================== */
.pmhm-tile {
    --pmhm-cell: 13px;
    --pmhm-step: 16px;
    --pmhm-empty: #ebedf0;
    --pmhm-c1: rgba(243, 62, 80, 0.62);
    --pmhm-c2: rgba(255, 200, 100, 0.9);
    --pmhm-c3: rgba(161, 222, 175, 1);
    --pmhm-c4: rgba(0, 166, 118, 0.82);
    --pmhm-v1: rgba(var(--primary-rgb, 0, 150, 136), 0.22);
    --pmhm-v2: rgba(var(--primary-rgb, 0, 150, 136), 0.42);
    --pmhm-v3: rgba(var(--primary-rgb, 0, 150, 136), 0.66);
    --pmhm-v4: rgba(var(--primary-rgb, 0, 150, 136), 0.95);
    --pmhm-od: #f33e50;
    --pmhm-chip-bg: #f8fafb;
    --pmhm-chip-bd: #e9ecef;
    padding: 16px;
}

.pmhm-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
    flex-wrap: wrap;
    margin-bottom: 12px;
}

/* Segmented Compliance / Volume toggle with sliding pill */
.pmhm-toggle {
    position: relative;
    display: inline-flex;
    padding: 3px;
    border-radius: 20px;
    background: var(--pmhm-chip-bg);
    border: 1px solid var(--pmhm-chip-bd);
}

.pmhm-toggle-pill {
    position: absolute;
    top: 3px;
    bottom: 3px;
    left: 3px;
    /* N mode buttons: --pmhm-n / --pmhm-i are set by pm_overview_heatmap.js */
    width: calc((100% - 6px) / var(--pmhm-n, 2));
    border-radius: 16px;
    background: var(--primary, #009688);
    box-shadow: 0 2px 6px rgba(var(--primary-rgb, 0, 150, 136), 0.35);
    transform: translateX(calc(var(--pmhm-i, 0) * 100%));
    transition: transform 0.35s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.pmhm-toggle-btn {
    position: relative;
    z-index: 1;
    flex: 1 1 0;
    min-width: 92px;
    border: 0;
    background: transparent;
    padding: 4px 12px;
    font-size: 12px;
    font-weight: 600;
    color: #6c757d;
    border-radius: 16px;
    cursor: pointer;
    transition: color 0.25s ease;
}

.pmhm-toggle-btn.is-active {
    color: #fff;
}

.pmhm-toggle-btn:focus-visible {
    outline: 2px solid var(--primary, #009688);
    outline-offset: 2px;
}

/* Summary stat chips */
.pmhm-stats {
    display: grid;
    grid-template-columns: repeat(6, minmax(0, 1fr));
    gap: 10px;
    margin-bottom: 14px;
}

.pmhm-stats:empty {
    display: none;
}

.pmhm-stat {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 12px;
    border-radius: 10px;
    background: var(--pmhm-chip-bg);
    border: 1px solid var(--pmhm-chip-bd);
    min-width: 0;
    opacity: 0;
    transform: translateY(8px);
    transition: opacity 0.45s ease, transform 0.45s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.pmhm-stats.is-in .pmhm-stat {
    opacity: 1;
    transform: none;
}

.pmhm-stats.is-in .pmhm-stat:nth-child(2) {
    transition-delay: 0.06s;
}

.pmhm-stats.is-in .pmhm-stat:nth-child(3) {
    transition-delay: 0.12s;
}

.pmhm-stats.is-in .pmhm-stat:nth-child(4) {
    transition-delay: 0.18s;
}

.pmhm-stats.is-in .pmhm-stat:nth-child(5) {
    transition-delay: 0.24s;
}

.pmhm-stats.is-in .pmhm-stat:nth-child(6) {
    transition-delay: 0.30s;
}

.pmhm-stat-ic {
    flex-shrink: 0;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    color: rgba(60, 138, 150, 0.95);
    background: rgba(146, 203, 211, 0.35);
}

.pmhm-stat--good .pmhm-stat-ic {
    color: rgba(0, 110, 79, 0.95);
    background: rgba(161, 222, 175, 0.45);
}

.pmhm-stat--warn .pmhm-stat-ic {
    color: rgba(200, 140, 0, 0.95);
    background: rgba(255, 200, 100, 0.35);
}

.pmhm-stat--bad .pmhm-stat-ic {
    color: rgba(243, 62, 80, 0.95);
    background: rgba(235, 151, 159, 0.35);
}

.pmhm-stat--hot .pmhm-stat-ic {
    color: rgba(255, 86, 106, 0.95);
    background: rgba(255, 128, 202, 0.25);
}

.pmhm-stat--muted .pmhm-stat-ic {
    color: #999;
    background: rgba(0, 0, 0, 0.05);
}

.pmhm-stat-tx {
    display: flex;
    flex-direction: column;
    min-width: 0;
    line-height: 1.2;
}

.pmhm-stat-lb {
    font-size: 11px;
    color: #8a8f94;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.pmhm-stat-val {
    font-size: 18px;
    font-weight: 700;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    font-variant-numeric: tabular-nums;
}

.pmhm-stat-sub {
    font-size: 11px;
    color: #aaa;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Grid */
.pmhm-body {
    position: relative;
    min-height: calc(var(--pmhm-step) * 7 + 22px);
}

.pmhm-scroll {
    overflow-x: auto;
    overflow-y: hidden;
    padding: 4px 0 8px;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: thin;
}

.pmhm-grid {
    display: grid;
    grid-template-columns: 30px max-content;
    grid-template-rows: 18px auto;
    column-gap: 4px;
    width: max-content;
}

.pmhm-months {
    grid-column: 2;
    grid-row: 1;
    position: relative;
    height: 18px;
}

.pmhm-month {
    position: absolute;
    left: calc(var(--w) * var(--pmhm-step));
    top: 0;
    font-size: 11px;
    color: #8a8f94;
    white-space: nowrap;
    opacity: 0;
    transition: opacity 0.5s ease;
    transition-delay: calc(var(--w) * 12ms);
}

.pmhm-tile.is-in .pmhm-month {
    opacity: 1;
}

.pmhm-wdays {
    grid-column: 1;
    grid-row: 1 / span 2;
    display: grid;
    grid-template-rows: repeat(7, var(--pmhm-cell));
    row-gap: calc(var(--pmhm-step) - var(--pmhm-cell));
    align-content: start;
    padding-top: 18px;
    position: sticky;
    left: 0;
    z-index: 3;
    background: #fff;
    box-shadow: 4px 0 0 #fff;
}

.pmhm-wdays span {
    font-size: 10px;
    line-height: var(--pmhm-cell);
    color: #8a8f94;
    white-space: nowrap;
}

.pmhm-weeks {
    grid-column: 2;
    grid-row: 2;
    display: flex;
    gap: calc(var(--pmhm-step) - var(--pmhm-cell));
}

.pmhm-week {
    display: flex;
    flex-direction: column;
    gap: calc(var(--pmhm-step) - var(--pmhm-cell));
}

.pmhm-cell {
    --r: 0;
    position: relative;
    display: block;
    width: var(--pmhm-cell);
    height: var(--pmhm-cell);
    border-radius: 3px;
    background: var(--pmhm-empty);
    opacity: 0;
    transform: scale(0.2);
}

.pmhm-cell:nth-child(2) {
    --r: 1;
}

.pmhm-cell:nth-child(3) {
    --r: 2;
}

.pmhm-cell:nth-child(4) {
    --r: 3;
}

.pmhm-cell:nth-child(5) {
    --r: 4;
}

.pmhm-cell:nth-child(6) {
    --r: 5;
}

.pmhm-cell:nth-child(7) {
    --r: 6;
}

.pmhm-cell--pad {
    visibility: hidden;
}

.pmhm-tile.is-in .pmhm-cell {
    animation: pmhm-pop 0.5s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
    animation-delay: calc(var(--w) * 12ms + var(--r) * 28ms);
}

.pmhm-tile.is-settled .pmhm-cell {
    animation: none;
    opacity: 1;
    transform: none;
    transition: background-color 0.4s ease calc(var(--w) * 7ms), transform 0.15s ease, box-shadow 0.15s ease, opacity 0.2s ease;
}

.pmhm-cell[data-d] {
    cursor: pointer;
}

/* Spotlight hover: dim the rest, lift the hovered day */
@media (hover: hover) {
    .pmhm-tile.is-settled .pmhm-weeks:hover .pmhm-cell[data-d] {
        opacity: 0.55;
    }

    .pmhm-tile.is-settled .pmhm-weeks .pmhm-cell[data-d]:hover {
        opacity: 1;
        transform: scale(1.45);
        z-index: 2;
        box-shadow: 0 3px 10px rgba(0, 0, 0, 0.25);
    }
}

/* Compliance colours */
.pmhm-tile[data-mode="c"] .pmhm-cell[data-c="1"],
.pmhm-sw[data-c="1"] {
    background: var(--pmhm-c1);
}

.pmhm-tile[data-mode="c"] .pmhm-cell[data-c="2"],
.pmhm-sw[data-c="2"] {
    background: var(--pmhm-c2);
}

.pmhm-tile[data-mode="c"] .pmhm-cell[data-c="3"],
.pmhm-sw[data-c="3"] {
    background: var(--pmhm-c3);
}

.pmhm-tile[data-mode="c"] .pmhm-cell[data-c="4"],
.pmhm-sw[data-c="4"] {
    background: var(--pmhm-c4);
}

/* Volume colours */
.pmhm-tile[data-mode="v"] .pmhm-cell[data-v="1"],
.pmhm-sw[data-v="1"] {
    background: var(--pmhm-v1);
}

.pmhm-tile[data-mode="v"] .pmhm-cell[data-v="2"],
.pmhm-sw[data-v="2"] {
    background: var(--pmhm-v2);
}

.pmhm-tile[data-mode="v"] .pmhm-cell[data-v="3"],
.pmhm-sw[data-v="3"] {
    background: var(--pmhm-v3);
}

.pmhm-tile[data-mode="v"] .pmhm-cell[data-v="4"],
.pmhm-sw[data-v="4"] {
    background: var(--pmhm-v4);
}

/* Upcoming (scheduled, not yet due) */
.pmhm-tile[data-mode="c"] .pmhm-cell[data-c="f"],
.pmhm-sw--future {
    background: repeating-linear-gradient(45deg, rgba(var(--primary-rgb, 0, 150, 136), 0.32) 0 2px, transparent 2px 4px), var(--pmhm-empty);
    box-shadow: inset 0 0 0 1px rgba(var(--primary-rgb, 0, 150, 136), 0.55);
}

.pmhm-tile[data-mode="v"] .pmhm-cell[data-f] {
    box-shadow: inset 0 0 0 1px rgba(var(--primary-rgb, 0, 150, 136), 0.9);
    opacity: 0.7;
}

/* Overdue marker */
.pmhm-cell[data-o]::after,
.pmhm-sw--overdue::after {
    content: '';
    position: absolute;
    top: -2px;
    right: -2px;
    width: max(5px, calc(var(--pmhm-cell) * 0.38));
    height: max(5px, calc(var(--pmhm-cell) * 0.38));
    border-radius: 50%;
    background: var(--pmhm-od);
    box-shadow: 0 0 0 1.5px #fff;
}

/* Today: soft pulsing ring */
.pmhm-cell.is-today {
    box-shadow: 0 0 0 2px var(--primary, #009688);
    z-index: 1;
}

.pmhm-tile.is-settled .pmhm-cell.is-today::before {
    content: '';
    position: absolute;
    inset: -2px;
    border-radius: 4px;
    border: 2px solid var(--primary, #009688);
    animation: pmhm-pulse 2s ease-out infinite;
    pointer-events: none;
}

/* Legend */
.pmhm-legend {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 6px 14px;
    margin-top: 6px;
    font-size: 11px;
    color: #8a8f94;
}

.pmhm-legend-set {
    display: inline-flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 4px 12px;
}

.pmhm-legend--v {
    gap: 3px;
}

.pmhm-tile[data-mode="c"] .pmhm-legend--v,
.pmhm-tile[data-mode="c"] .pmhm-legend--x,
.pmhm-tile[data-mode="v"] .pmhm-legend--c,
.pmhm-tile[data-mode="v"] .pmhm-legend--x,
.pmhm-tile[data-mode="x"] .pmhm-legend--c,
.pmhm-tile[data-mode="x"] .pmhm-legend--v {
    display: none;
}

.pmhm-lg {
    display: inline-flex;
    align-items: center;
    gap: 5px;
}

.pmhm-legend--v .pmhm-lg {
    margin: 0 4px;
}

.pmhm-sw {
    position: relative;
    display: inline-block;
    width: 11px;
    height: 11px;
    border-radius: 3px;
    background: var(--pmhm-empty);
    --pmhm-cell: 11px;
}

/* Skeleton: shimmering cell grid */
.pmhm-skel {
    height: calc(var(--pmhm-step) * 7 + 18px);
    border-radius: 6px;
    background: linear-gradient(90deg, #eceff1 25%, #f7f9fa 37%, #eceff1 63%);
    background-size: 400% 100%;
    animation: pmhm-shimmer 1.4s ease infinite;
    -webkit-mask-image: repeating-linear-gradient(90deg, #000 0 13px, transparent 13px 16px), repeating-linear-gradient(180deg, #000 0 13px, transparent 13px 16px);
    -webkit-mask-composite: source-in;
    mask-image: repeating-linear-gradient(90deg, #000 0 13px, transparent 13px 16px), repeating-linear-gradient(180deg, #000 0 13px, transparent 13px 16px);
    mask-composite: intersect;
}

.pmhm-skel[hidden] {
    display: none;
}

.pmhm-msg {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    font-size: 13px;
    color: #8a8f94;
    background: rgba(255, 255, 255, 0.6);
    border-radius: 6px;
}

.pmhm-msg[hidden] {
    display: none;
}

/* Shared floating tooltip */
.pmhm-tip {
    position: fixed;
    z-index: 1080;
    min-width: 170px;
    max-width: 260px;
    padding: 10px 12px;
    border-radius: 10px;
    background: #fff;
    color: #212529;
    border: 1px solid #e9ecef;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.16);
    font-size: 12px;
    pointer-events: none;
    opacity: 0;
    transform: translateY(6px) scale(0.96);
    transition: opacity 0.15s ease, transform 0.18s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.pmhm-tip.is-below {
    transform: translateY(-6px) scale(0.96);
}

.pmhm-tip.is-on {
    opacity: 1;
    transform: none;
}

.pmhm-tip-date {
    font-weight: 600;
    margin-bottom: 4px;
}

.pmhm-tip-today {
    display: inline-block;
    margin-left: 4px;
    padding: 0 6px;
    border-radius: 8px;
    font-size: 10px;
    color: #fff;
    background: var(--primary, #009688);
    vertical-align: 1px;
}

.pmhm-tip-big {
    font-size: 22px;
    font-weight: 700;
    line-height: 1.1;
    font-variant-numeric: tabular-nums;
}

.pmhm-tip-big[data-c="1"] {
    color: rgba(243, 62, 80, 0.95);
}

.pmhm-tip-big[data-c="2"] {
    color: rgba(200, 140, 0, 0.95);
}

.pmhm-tip-big[data-c="3"] {
    color: rgba(60, 170, 95, 0.95);
}

.pmhm-tip-big[data-c="4"] {
    color: rgba(0, 130, 92, 0.95);
}

.pmhm-tip-big--f {
    color: var(--primary, #009688);
}

.pmhm-tip-bar {
    height: 5px;
    margin: 6px 0;
    border-radius: 3px;
    background: var(--pmhm-empty, #ebedf0);
    overflow: hidden;
}

.pmhm-tip-bar span {
    display: block;
    height: 100%;
    width: 0;
    border-radius: 3px;
    transition: width 0.45s cubic-bezier(0.22, 1, 0.36, 1) 0.05s;
}

.pmhm-tip.is-on .pmhm-tip-bar span {
    width: var(--p);
}

.pmhm-tip-bar span[data-c="1"] {
    background: rgba(243, 62, 80, 0.8);
}

.pmhm-tip-bar span[data-c="2"] {
    background: rgba(255, 200, 100, 1);
}

.pmhm-tip-bar span[data-c="3"] {
    background: rgba(110, 204, 132, 1);
}

.pmhm-tip-bar span[data-c="4"] {
    background: rgba(0, 166, 118, 0.9);
}

.pmhm-tip-row {
    color: #6c757d;
}

.pmhm-tip-od {
    color: #f33e50;
}

.pmhm-tip-none {
    color: #8a8f94;
}

.pmhm-tip-foot {
    margin-top: 6px;
    padding-top: 6px;
    border-top: 1px solid #f1f3f5;
    font-size: 10px;
    color: #aaa;
}

@keyframes pmhm-pop {
    0% {
        opacity: 0;
        transform: scale(0.2);
    }

    70% {
        opacity: 1;
        transform: scale(1.18);
    }

    100% {
        opacity: 1;
        transform: scale(1);
    }
}

@keyframes pmhm-pulse {
    0% {
        opacity: 0.9;
        transform: scale(1);
    }

    100% {
        opacity: 0;
        transform: scale(1.9);
    }
}

@keyframes pmhm-shimmer {
    0% {
        background-position: 100% 50%;
    }

    100% {
        background-position: 0 50%;
    }
}

@media (max-width: 1199px) {
    .pmhm-stats {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

@media (max-width: 576px) {
    .pmhm-stats {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 8px;
    }

    .pmhm-stat {
        padding: 8px 10px;
    }

    .pmhm-stat-val {
        font-size: 16px;
    }

    .pmhm-head-r {
        width: 100%;
    }

    .pmhm-head-r .pmhm-toggle {
        flex: 1 1 auto;
    }
}

@media (prefers-reduced-motion: reduce) {

    .pmhm-cell,
    .pmhm-month,
    .pmhm-stat {
        opacity: 1;
        transform: none;
        transition: none;
    }

    .pmhm-tile.is-in .pmhm-cell,
    .pmhm-tile.is-settled .pmhm-cell.is-today::before,
    .pmhm-skel {
        animation: none;
    }

    .pmhm-toggle-pill,
    .pmhm-tip,
    .pmhm-tip-bar span {
        transition: none;
    }
}

/* Dark mode */
[data-theme="dark"] .pmhm-tile {
    --pmhm-empty: #474747;
    --pmhm-chip-bg: #2c2c2c;
    --pmhm-chip-bd: #444;
    --pmhm-c3: rgba(110, 204, 132, 0.75);
}

[data-theme="dark"] .pmhm-wdays {
    background: #333;
    box-shadow: 4px 0 0 #333;
}

[data-theme="dark"] .pmhm-toggle-btn {
    color: #bbb;
}

[data-theme="dark"] .pmhm-toggle-btn.is-active {
    color: #fff;
}

[data-theme="dark"] .pmhm-stat-lb,
[data-theme="dark"] .pmhm-month,
[data-theme="dark"] .pmhm-wdays span,
[data-theme="dark"] .pmhm-legend {
    color: #94a3b8;
}

[data-theme="dark"] .pmhm-stat-val {
    color: #fff;
}

[data-theme="dark"] .pmhm-cell[data-o]::after,
[data-theme="dark"] .pmhm-sw--overdue::after {
    box-shadow: 0 0 0 1.5px #333;
}

[data-theme="dark"] .pmhm-skel {
    background-image: linear-gradient(90deg, #333 25%, #3d3d3d 37%, #333 63%);
}

[data-theme="dark"] .pmhm-msg {
    background: rgba(38, 38, 38, 0.7);
    color: #94a3b8;
}

[data-theme="dark"] .pmhm-tip {
    background: #333;
    color: #fff;
    border-color: #3a3a3a;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.5);
    --pmhm-empty: #3a3a3a;
}

[data-theme="dark"] .pmhm-tip-row,
[data-theme="dark"] .pmhm-tip-none {
    color: #cbd5e1;
}

[data-theme="dark"] .pmhm-tip-foot {
    border-top-color: #3a3a3a;
    color: #94a3b8;
}

[data-theme="dark"] .pmhm-stat-ic {
    color: #9cf2ff;
    background: rgba(156, 242, 255, 0.12);
}

[data-theme="dark"] .pmhm-stat--good .pmhm-stat-ic {
    color: #6ecc84;
    background: rgba(110, 204, 132, 0.15);
}

[data-theme="dark"] .pmhm-stat--warn .pmhm-stat-ic {
    color: #ffc864;
    background: rgba(255, 200, 100, 0.15);
}

[data-theme="dark"] .pmhm-stat--bad .pmhm-stat-ic {
    color: #ff6672;
    background: rgba(255, 102, 114, 0.15);
}

[data-theme="dark"] .pmhm-stat--hot .pmhm-stat-ic {
    color: #ff80ca;
    background: rgba(255, 128, 202, 0.15);
}

[data-theme="dark"] .pmhm-tile[data-mode="c"] .pmhm-cell[data-c="f"],
[data-theme="dark"] .pmhm-sw--future {
    background: repeating-linear-gradient(45deg, rgba(var(--primary-rgb, 0, 150, 136), 0.7) 0 2px, transparent 2px 4px), var(--pmhm-empty);
    box-shadow: inset 0 0 0 1px rgba(var(--primary-rgb, 0, 150, 136), 1);
}

/* PM heatmap: header actions, collapsible + compact Home variant (Include/home_pm_heatmap.inc.php) */
.pmhm-head-l {
    min-width: 0;
}

.pmhm-head-r {
    display: flex;
    align-items: center;
    gap: 6px;
}

.pmhm-icon-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    border: 1px solid var(--pmhm-chip-bd);
    background: var(--pmhm-chip-bg);
    color: #6c757d;
    cursor: pointer;
    text-decoration: none;
    transition: background-color 0.2s ease, color 0.2s ease, transform 0.2s ease;
}

.pmhm-icon-btn:hover,
.pmhm-icon-btn:focus-visible {
    color: var(--primary, #009688);
    background: rgba(var(--primary-rgb, 0, 150, 136), 0.1);
    text-decoration: none;
}

.pmhm-collapse i {
    transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.pmhm-tile.is-collapsed .pmhm-collapse i {
    transform: rotate(180deg);
}

.pmhm-collapsible {
    display: grid;
    grid-template-rows: 1fr;
    transition: grid-template-rows 0.35s ease, opacity 0.25s ease;
}

.pmhm-collapsible-in {
    min-height: 0;
    overflow: hidden;
}

.pmhm-tile.is-collapsed .pmhm-collapsible {
    grid-template-rows: 0fr;
    opacity: 0;
}

.pmhm-tile.is-collapsed .pmhm-head {
    margin-bottom: 0;
}

.pmhm-tile.is-collapsed .pmhm-toggle {
    display: none;
}

.pmhm-tile--compact .pmhm-stats {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 8px;
    margin-bottom: 10px;
}

.pmhm-tile--compact .pmhm-stat {
    padding: 7px 10px;
}

.pmhm-tile--compact .pmhm-stat-ic {
    width: 26px;
    height: 26px;
    font-size: 12px;
}

.pmhm-tile--compact .pmhm-stat-val {
    font-size: 15px;
}

.pmhm-tile--compact .pmhm-stat-sub {
    display: none;
}

@media (max-width: 576px) {
    .pmhm-tile--compact .pmhm-stats {
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 6px;
    }

    .pmhm-tile--compact .pmhm-stat {
        flex-direction: column;
        align-items: flex-start;
        gap: 4px;
        padding: 6px 8px;
    }

    .pmhm-tile--compact .pmhm-stat-ic {
        display: none;
    }

    .pmhm-head-r {
        width: 100%;
    }

    .pmhm-head-r .pmhm-toggle {
        flex: 1 1 auto;
    }
}

@media (prefers-reduced-motion: reduce) {

    .pmhm-collapsible,
    .pmhm-collapse i {
        transition: none;
    }
}

[data-theme="dark"] .pmhm-icon-btn {
    color: #bbb;
}

[data-theme="dark"] .pmhm-icon-btn:hover,
[data-theme="dark"] .pmhm-icon-btn:focus-visible {
    color: #02b3a2;
    background: rgba(2, 179, 162, 0.12);
}

.pmhm-tile--compact .pmhm-grid {
    margin-left: auto;
    margin-right: auto;
}

.pmhm-tip-hint {
    margin-top: 4px;
    font-size: 11px;
    font-style: italic;
    color: var(--primary, #009688);
}

[data-theme="dark"] .pmhm-tip-hint {
    color: #02b3a2;
}

/* Corrective breakdown heatmap (Include/cm_overview_heatmap.inc.php) */
.pmhm-tile--cm {
    --pmhm-x1: rgba(243, 62, 80, 0.25);
    --pmhm-x2: rgba(243, 62, 80, 0.45);
    --pmhm-x3: rgba(243, 62, 80, 0.7);
    --pmhm-x4: rgba(243, 62, 80, 0.95);
}

.pmhm-legend--x {
    gap: 3px;
}

.pmhm-legend--x .pmhm-lg {
    margin: 0 4px;
}

.pmhm-tile[data-mode="x"] .pmhm-cell[data-x="1"],
.pmhm-sw[data-x="1"] {
    background: var(--pmhm-x1);
}

.pmhm-tile[data-mode="x"] .pmhm-cell[data-x="2"],
.pmhm-sw[data-x="2"] {
    background: var(--pmhm-x2);
}

.pmhm-tile[data-mode="x"] .pmhm-cell[data-x="3"],
.pmhm-sw[data-x="3"] {
    background: var(--pmhm-x3);
}

.pmhm-tile[data-mode="x"] .pmhm-cell[data-x="4"],
.pmhm-sw[data-x="4"] {
    background: var(--pmhm-x4);
}

/* Weekday × hour grid: always volume colours, own cell size */
.pmhm-hours {
    --pmhm-cell: var(--pmhm-hcell, 14px);
    --pmhm-step: var(--pmhm-hstep, 17px);
    margin-top: 18px;
    padding-top: 14px;
    border-top: 1px dashed var(--pmhm-chip-bd);
}

.pmhm-hours-head {
    margin-bottom: 10px;
}

.pmhm-hours-grid {
    overflow-x: auto;
    overflow-y: hidden;
    padding: 4px 0 6px;
    scrollbar-width: thin;
}

.pmhm-hgrid {
    margin-left: auto;
    margin-right: auto;
}

.pmhm-hlabels {
    grid-column: 2;
    grid-row: 1;
    position: relative;
    height: 18px;
}

.pmhm-hlabels span {
    position: absolute;
    left: calc(var(--w) * var(--pmhm-step));
    top: 0;
    font-size: 10px;
    color: #8a8f94;
    white-space: nowrap;
    font-variant-numeric: tabular-nums;
}

.pmhm-wdays--h span {
    font-size: 10px;
}

.pmhm-hours .pmhm-cell[data-v="1"] {
    background: var(--pmhm-v1);
}

.pmhm-hours .pmhm-cell[data-v="2"] {
    background: var(--pmhm-v2);
}

.pmhm-hours .pmhm-cell[data-v="3"] {
    background: var(--pmhm-v3);
}

.pmhm-hours .pmhm-cell[data-v="4"] {
    background: var(--pmhm-v4);
}

.pmhm-hours .pmhm-cell[data-h] {
    cursor: default;
}

@media (hover: hover) {
    .pmhm-tile.is-settled .pmhm-hcols:hover .pmhm-cell[data-h] {
        opacity: 0.55;
    }

    .pmhm-tile.is-settled .pmhm-hcols .pmhm-cell[data-h]:hover {
        opacity: 1;
        transform: scale(1.35);
        z-index: 2;
        box-shadow: 0 3px 10px rgba(0, 0, 0, 0.25);
    }
}

@media (max-width: 576px) {
    .pmhm-tile--cm .pmhm-toggle-btn {
        min-width: 0;
        padding: 4px 6px;
        font-size: 11px;
    }
}

[data-theme="dark"] .pmhm-hlabels span {
    color: #94a3b8;
}

[data-theme="dark"] .pmhm-tile--cm {
    --pmhm-x1: rgba(255, 102, 114, 0.3);
    --pmhm-x2: rgba(255, 102, 114, 0.5);
    --pmhm-x3: rgba(255, 102, 114, 0.72);
    --pmhm-x4: rgba(255, 102, 114, 0.95);
}

/* Booking one-off Start/End use booking-datetime-picker (not datepicker-here).
   Match dark datepicker-here surfaces so they are not stuck on mint --datepicker-disable. */
[data-theme="dark"] .form-control.booking-datetime-picker,
[data-theme="dark"] .form-control.booking-datetime-picker:disabled,
[data-theme="dark"] .form-control.booking-datetime-picker[readonly] {
    background-color: #262e33 !important;
    color: #fff;
}

.cloudy-prediction .cp-meter-list {
    list-style: none;
    padding: 0 !important;
}

.cloudy-prediction .cp-meter-list li {
    padding: 8px 0 8px 10px;
    border-left: 3px solid var(--cp-line);
    margin-bottom: 6px;
    color: var(--cp-ink);
    line-height: 1.5;
}

.cloudy-prediction .cp-meter-list li span {
    color: var(--cp-muted);
    font-size: 11px;
}

.cloudy-prediction .cp-meter-list .cp-meter-outside {
    border-left-color: #c34c48;
}

.cloudy-prediction .cp-meter-list .cp-meter-approaching {
    border-left-color: #a67a21;
}

.cloudy-prediction .cp-meter-list .cp-meter-normal {
    border-left-color: #25866c;
}

.cloudy-prediction .cp-risk-grid {
    grid-template-columns: repeat(6, minmax(0, 1fr));
}

@media(max-width:1200px) {
    .cloudy-prediction .cp-risk-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

@media(max-width:600px) {
    .cloudy-prediction .cp-risk-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

/* Cloudy Predict verdict on the asset Cloudy Health Score tab */
.cloudy-prediction .ahs-cloudy-verdict {
    padding: 18px 24px 0;
    color: var(--cp-muted);
    font-size: 12px;
}

.cloudy-prediction .cp-verdict {
    padding: 16px 18px;
    border: 1px solid var(--cp-line);
    border-left: 4px solid var(--cp-risk, var(--cp-line));
    border-radius: 12px;
    background: var(--cp-bg);
    color: var(--cp-ink);
}

.cloudy-prediction .cp-verdict-head {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px;
    margin-bottom: 12px;
}

.cloudy-prediction .cp-verdict-head .cp-label {
    margin: 0;
}

.cloudy-prediction .cp-verdict-head small {
    color: var(--cp-muted);
    font-size: 11px;
}

.cloudy-prediction .cp-verdict-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
    margin-bottom: 12px;
}

.cloudy-prediction .cp-verdict-grid p {
    font-size: 13px;
    font-weight: 600;
    line-height: 1.5;
    margin: 0 0 4px;
    overflow-wrap: anywhere;
}

.cloudy-prediction .cp-verdict-grid small {
    display: block;
    color: var(--cp-muted);
    font-size: 11px;
    line-height: 1.5;
    overflow-wrap: anywhere;
}

.cloudy-prediction .cp-verdict-alerts {
    margin-bottom: 12px;
}

@media(max-width:600px) {
    .cloudy-prediction .ahs-cloudy-verdict {
        padding: 14px 14px 0;
    }

    .cloudy-prediction .cp-verdict-grid {
        grid-template-columns: 1fr;
    }
}

/* Cloudy Predict — "What counts as a breakdown" (admin) */
.cloudy-prediction.cp-rules-modal {
    --cp-bg: #fff;
    --cp-ink: #203735;
    --cp-muted: #687c78;
    --cp-line: #e0e9e6;
    --cp-soft: #f5f8f7;
    --cp-accent: var(--primary, #009688);
    width: min(860px, calc(100% - 28px));
    max-height: calc(100% - 32px);
    overflow: auto;
    padding: 0;
    border: 1px solid var(--cp-line);
    border-radius: 16px;
    background: var(--cp-bg);
    color: var(--cp-ink);
}

.cloudy-prediction.cp-rules-modal::backdrop {
    background: rgba(16, 41, 35, .55);
}

[data-theme="dark"] .cloudy-prediction.cp-rules-modal {
    color-scheme: dark;
    --cp-bg: #262626;
    --cp-ink: #fff;
    --cp-muted: #adb5bd;
    --cp-line: #3a3a3a;
    --cp-soft: #2d2d2d;
    --cp-accent: #009688;
    --cp-accent-rgb: 0, 150, 136;
}

[data-theme="dark"] .cloudy-prediction.cp-rules-modal::backdrop {
    background: rgba(0, 0, 0, .55);
}

.cloudy-prediction .cp-rules-head {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
    padding: 18px 22px 8px;
}

.cloudy-prediction .cp-rules-head h2 {
    margin: 0;
    font-size: 18px;
}

.cloudy-prediction .cp-rules-intro {
    padding: 0 22px;
    color: var(--cp-muted);
    font-size: 13px;
    line-height: 1.6;
}

.cloudy-prediction .cp-rules-body {
    padding: 6px 22px 4px;
    font-size: 13px;
    color: var(--cp-muted);
}

.cloudy-prediction .cp-rules-body h3 {
    font-size: 13px;
    font-weight: 700;
    color: var(--cp-ink);
    margin: 16px 0 8px;
}

.cloudy-prediction .cp-rules-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 12px;
    color: var(--cp-ink);
}

.cloudy-prediction .cp-rules-table th {
    text-align: left;
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: .04em;
    color: var(--cp-muted);
    padding: 6px 8px;
    border-bottom: 1px solid var(--cp-line);
}

.cloudy-prediction .cp-rules-table td {
    padding: 6px 8px;
    border-bottom: 1px solid var(--cp-line);
    overflow-wrap: anywhere;
}

.cloudy-prediction .cp-rules-table select {
    width: 100%;
    min-width: 170px;
    height: 32px;
    border: 1px solid var(--cp-line);
    border-radius: 7px;
    background: var(--cp-bg);
    color: var(--cp-ink);
    font-size: 12px;
}

.cloudy-prediction .cp-rules-foot {
    position: sticky;
    bottom: 0;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px;
    padding: 14px 22px;
    border-top: 1px solid var(--cp-line);
    background: var(--cp-bg);
}

.cloudy-prediction .cp-rules-foot small {
    flex: 1 1 260px;
    color: var(--cp-muted);
    font-size: 11px;
}

.cloudy-prediction .cp-rules-status {
    color: var(--cp-accent);
    font-size: 12px;
}

.cloudy-prediction .cp-rules-table thead th {
    background: transparent !important;
    color: var(--cp-muted) !important;
}

.cloudy-prediction .cp-rules-table td:first-child {
    overflow-wrap: normal;
    word-break: normal;
}

@media(max-width:600px) {

    .cloudy-prediction .cp-rules-head,
    .cloudy-prediction .cp-rules-intro,
    .cloudy-prediction .cp-rules-body,
    .cloudy-prediction .cp-rules-foot {
        padding-left: 16px;
        padding-right: 16px;
    }

    .cloudy-prediction .cp-rules-table thead {
        display: none;
    }

    .cloudy-prediction .cp-rules-table,
    .cloudy-prediction .cp-rules-table tbody {
        display: block;
    }

    .cloudy-prediction .cp-rules-table tr {
        display: grid;
        grid-template-columns: minmax(0, 1fr) auto;
        gap: 4px 10px;
        padding: 10px 0;
        border-bottom: 1px solid var(--cp-line);
    }

    .cloudy-prediction .cp-rules-table td {
        border: 0;
        padding: 0;
    }

    .cloudy-prediction .cp-rules-table td:nth-child(1) {
        font-weight: 600;
    }

    .cloudy-prediction .cp-rules-table td:nth-child(2) {
        color: var(--cp-muted);
        text-align: right;
    }

    .cloudy-prediction .cp-rules-table td:nth-child(3) {
        grid-column: 1 / -1;
        color: var(--cp-muted);
        font-size: 11px;
    }

    .cloudy-prediction .cp-rules-table td:nth-child(4) {
        grid-column: 1 / -1;
    }

    .cloudy-prediction .cp-rules-table select {
        min-width: 0;
    }
}

/* Cloudy AI detailed steps */
.cloudy-prediction .cp-plan-ai {
    border-color: rgba(var(--cp-accent-rgb), .55);
    box-shadow: 0 0 0 1px rgba(var(--cp-accent-rgb), .25);
}

.cloudy-prediction .cp-plan-flash {
    animation: cp-plan-flash 1.6s ease-out;
}

@keyframes cp-plan-flash {
    0% {
        background: rgba(var(--cp-accent-rgb), .16);
    }

    100% {
        background: var(--cp-bg);
    }
}

.cloudy-prediction .cp-ai-badge {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 2px 8px;
    margin-right: 4px;
    border-radius: 999px;
    font-size: 11px;
    font-weight: 700;
    color: var(--cp-accent);
    background: rgba(var(--cp-accent-rgb), .1);
}

.cloudy-prediction .cp-ai-plan-status .cp-link-button {
    margin-left: 4px;
    font-size: 12px;
}

.cloudy-prediction .cp-ai-button.is-working {
    cursor: progress;
    opacity: 1;
}

@media(prefers-reduced-motion:reduce) {
    .cloudy-prediction .cp-plan-flash {
        animation: none;
    }
}

/* Cloudy Predict — how to read the results */
.cloudy-prediction .cp-guide {
    border-top: 1px solid var(--cp-line);
    padding: 0 24px;
}

.cloudy-prediction .cp-guide>summary {
    padding: 14px 0;
    color: var(--cp-accent);
    font-size: 13px;
    font-weight: 600;
}

.cloudy-prediction .cp-guide dl {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px 24px;
    margin: 0 0 18px;
}

.cloudy-prediction .cp-guide dt {
    font-size: 12px;
    font-weight: 700;
    color: var(--cp-ink);
}

.cloudy-prediction .cp-guide dd {
    margin: 3px 0 0;
    font-size: 12px;
    line-height: 1.6;
    color: var(--cp-muted);
}

@media(max-width:600px) {
    .cloudy-prediction .cp-guide {
        padding: 0 16px;
    }

    .cloudy-prediction .cp-guide dl {
        grid-template-columns: 1fr;
    }
}

/* Cloudy Predict — Ask Cloudy */
.cloudy-prediction .cp-help[hidden] { display:none; }
.cloudy-prediction .cp-ask-chips { display:flex; flex-wrap:wrap; gap:8px; margin-top:10px; }
.cloudy-prediction .cp-ask-chips .cp-ask-chip { display:inline-flex; align-items:center; gap:7px; padding:8px 12px; border:1px solid rgba(var(--cp-accent-rgb), .35); border-radius:999px; background:rgba(var(--cp-accent-rgb), .06); color:var(--cp-ink); font-size:12px; line-height:1.4; text-align:left; transition:background .15s, border-color .15s; }
.cloudy-prediction .cp-ask-chips .cp-ask-chip:hover { background:rgba(var(--cp-accent-rgb), .14); border-color:var(--cp-accent); }
.cloudy-prediction .cp-ask-chips .cp-ask-chip i { color:var(--cp-accent); }
.cloudy-prediction .cp-detail-links { display:flex; flex-wrap:wrap; gap:8px; }

/* Settings → Notification → Send Queue */
.nq-queue {
	--nq-card: #fff;
	--nq-line: #e6e9ee;
	--nq-text: #2c3e50;
	--nq-muted: #6c757d;
	--nq-hover: #f6f8fa;
	--nq-shadow: 0 1px 2px rgba(15, 23, 42, .06), 0 4px 16px rgba(15, 23, 42, .06);
	--nq-radius: 14px;
	--nq-accent: var(--primary, #009688);
	--nq-ease: cubic-bezier(0.22, 1, 0.36, 1);
	--nq-heat-cell: 13px;
	--nq-heat-step: 16px;
	--nq-heat-empty: #ebedf0;
	color: var(--nq-text);
}
[data-theme="dark"] .nq-queue {
	--nq-card: #262626;
	--nq-line: #3a3a3a;
	--nq-text: #fff;
	--nq-muted: #c8c8c8;
	--nq-hover: #333;
	--nq-shadow: 0 1px 2px rgba(0, 0, 0, .35), 0 8px 24px rgba(0, 0, 0, .35);
	--nq-heat-empty: #474747;
}
.nq-queue [hidden] { display: none !important; }
.nq-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 12px; }
.nq-head__title { margin: 0; font-weight: 700; color: var(--nq-text); }
.nq-head__tools { display: inline-flex; align-items: center; gap: 8px; }
.nq-live {
	display: inline-flex; align-items: center; gap: 6px;
	padding: 3px 10px 3px 8px; border-radius: 20px;
	font-size: .72rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase;
	color: var(--nq-accent); background: color-mix(in srgb, var(--nq-accent) 12%, var(--nq-card));
	border: 1px solid color-mix(in srgb, var(--nq-accent) 30%, var(--nq-line));
}
.nq-live__dot { position: relative; width: 8px; height: 8px; border-radius: 50%; background: currentColor; }
.nq-live__dot::after {
	content: ""; position: absolute; inset: 0; border-radius: 50%; background: currentColor;
	animation: nq-ping 1.8s cubic-bezier(0, 0, 0.2, 1) infinite;
}
.nq-live.is-paused .nq-live__dot::after { animation: none; }
.nq-refresh {
	width: 34px; height: 34px; border-radius: 10px; border: 1px solid var(--nq-line);
	background: var(--nq-card); color: var(--nq-text); cursor: pointer;
}
.nq-refresh:focus-visible { outline: none; box-shadow: 0 0 0 3px color-mix(in srgb, var(--nq-accent) 35%, transparent); }
.nq-refresh.is-loading .fa { animation: nq-spin .8s linear infinite; }
.nq-kpis { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; margin-bottom: 12px; }
.nq-kpi {
	position: relative; text-align: left; cursor: pointer; overflow: hidden;
	padding: 14px 16px 12px; border-radius: var(--nq-radius);
	background: var(--nq-card); border: 1px solid var(--nq-line); box-shadow: var(--nq-shadow);
	color: var(--nq-text);
	opacity: 0; transform: translateY(8px);
	animation: nq-rise .5s var(--nq-ease) forwards;
	animation-delay: calc(var(--order, 0) * 35ms);
	transition: transform .18s ease, box-shadow .18s ease, border-color .18s;
}
.nq-kpi:nth-child(1) { --order: 0; --c: #c4a35a; }
.nq-kpi:nth-child(2) { --order: 1; --c: var(--nq-accent); }
.nq-kpi:nth-child(3) { --order: 2; --c: #6ec484; }
.nq-kpi:nth-child(4) { --order: 3; --c: #e07a86; }
.nq-kpi::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 4px; background: var(--c, var(--nq-accent)); }
.nq-kpi:hover { transform: translateY(-2px); box-shadow: 0 8px 24px rgba(15, 23, 42, .12); }
.nq-kpi.is-active { border-color: var(--c, var(--nq-accent)); box-shadow: 0 0 0 3px color-mix(in srgb, var(--c, var(--nq-accent)) 25%, transparent); }
.nq-kpi:focus-visible { outline: none; box-shadow: 0 0 0 3px color-mix(in srgb, var(--nq-accent) 35%, transparent); }
.nq-kpi__label { font-size: 12px; font-weight: 600; color: var(--nq-muted); }
.nq-kpi__value { display: block; font-size: 30px; font-weight: 800; line-height: 1.1; margin-top: 6px; font-variant-numeric: tabular-nums; }
.nq-kpi__value.is-bump { animation: nq-bump .6s var(--nq-ease); }
.nq-split { display: grid; grid-template-columns: minmax(0, 1.45fr) minmax(260px, 0.9fr); gap: 12px; margin-bottom: 12px; }
.nq-panel {
	background: var(--nq-card); border: 1px solid var(--nq-line); border-radius: var(--nq-radius);
	box-shadow: var(--nq-shadow); padding: 16px; min-width: 0;
	animation: nq-in .35s var(--nq-ease) both;
}
.nq-panel__title { margin: 0 0 2px; font-weight: 700; color: var(--nq-text); }
.nq-panel__meta { margin: 0 0 10px; font-size: 12px; color: var(--nq-muted); }
.nq-chart { position: relative; height: 220px; }
.nq-flow { display: flex; flex-direction: column; gap: 6px; }
.nq-flow__ribbon {
	display: flex; height: 10px; border-radius: 999px; overflow: hidden; margin-bottom: 4px;
	background: color-mix(in srgb, var(--nq-muted) 16%, transparent);
}
.nq-flow__ribbon.is-empty { opacity: .45; }
.nq-flow__seg { min-width: 0; background: var(--c, var(--nq-accent)); }
.nq-flow__seg--inbox, .nq-flow__lane--inbox { --c: var(--nq-accent); }
.nq-flow__seg--telegram, .nq-flow__lane--telegram { --c: #5aa7b5; }
.nq-flow__seg--email, .nq-flow__lane--email { --c: #c4a35a; }
.nq-flow__seg--group, .nq-flow__lane--group { --c: #b07cc4; }
.nq-flow__lane {
	display: grid; grid-template-columns: 22px minmax(0, 1fr); grid-template-rows: auto 7px auto;
	column-gap: 8px; row-gap: 3px; align-items: center;
	width: 100%; margin: 0; padding: 6px 8px; border: 0; border-radius: 10px;
	background: transparent; color: var(--nq-text); text-align: left; cursor: pointer;
	font: inherit;
}
.nq-flow__lane > .fa { grid-row: 1 / span 3; color: var(--c, var(--nq-accent)); font-size: 14px; text-align: center; }
.nq-flow__lane:hover { background: color-mix(in srgb, var(--c, var(--nq-accent)) 10%, transparent); }
.nq-flow__lane.is-active { background: color-mix(in srgb, var(--c, var(--nq-accent)) 16%, transparent); }
.nq-flow__lane:focus-visible { outline: none; box-shadow: 0 0 0 3px color-mix(in srgb, var(--nq-accent) 35%, transparent); }
.nq-flow__top { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; min-width: 0; }
.nq-flow__name { font-size: 13px; font-weight: 700; }
.nq-flow__count { font-size: 12px; font-weight: 800; font-variant-numeric: tabular-nums; color: var(--nq-muted); white-space: nowrap; }
.nq-flow__track {
	display: flex; height: 7px; border-radius: 999px; overflow: hidden;
	background: color-mix(in srgb, var(--nq-muted) 16%, transparent);
}
.nq-flow__sent, .nq-flow__fail { height: 100%; width: 0; }
.nq-flow__sent { background: color-mix(in srgb, var(--c, var(--nq-accent)) 72%, transparent); transition: width .9s var(--nq-ease); }
.nq-flow__fail { background: #e07a86; transition: width .9s var(--nq-ease); }
.nq-flow__sub { display: flex; gap: 8px; min-height: 14px; font-size: 11px; font-weight: 700; font-variant-numeric: tabular-nums; }
.nq-flow__wait { color: #c4a35a; }
.nq-flow__bad { color: #e07a86; }
.nq-empty, .nq-empty-inline { text-align: center; padding: 28px 16px; color: var(--nq-muted); }
.nq-empty { border: 1.5px dashed var(--nq-line); border-radius: 10px; }
.nq-empty > .fa { font-size: 2rem; display: block; margin-bottom: .5rem; }
.nq-heat-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.nq-heat-head .nq-panel__meta { margin-bottom: 8px; }
.nq-heat-toggle {
	position: relative; display: inline-flex; padding: 3px; border-radius: 20px;
	background: var(--nq-hover); border: 1px solid var(--nq-line);
}
.nq-heat-toggle__pill {
	position: absolute; top: 3px; bottom: 3px; left: 3px;
	width: calc((100% - 6px) / 2); border-radius: 16px;
	background: var(--nq-accent);
	box-shadow: 0 2px 6px rgba(var(--primary-rgb, 0, 150, 136), 0.35);
	transform: translateX(calc(var(--nq-heat-i, 0) * 100%));
	transition: transform 0.35s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.nq-heat-toggle__btn {
	position: relative; z-index: 1; flex: 1 1 0; min-width: 72px;
	border: 0; background: transparent; padding: 4px 12px;
	font-size: 12px; font-weight: 600; color: var(--nq-muted);
	border-radius: 16px; cursor: pointer; transition: color 0.25s ease;
}
.nq-heat-toggle__btn.is-active { color: #fff; }
.nq-heat-toggle__btn:focus-visible { outline: 2px solid var(--nq-accent); outline-offset: 2px; }
.nq-heat { position: relative; }
.nq-heat__scroll { overflow-x: hidden; overflow-y: hidden; padding: 4px 3px 8px 0; scrollbar-width: thin; }
.nq-heat__scroll.is-scroll { overflow-x: auto; }
.nq-heat__grid {
	display: grid; grid-template-columns: 30px minmax(0, 1fr); grid-template-rows: 18px auto;
	column-gap: 4px; width: 100%;
}
.nq-heat__months { grid-column: 2; grid-row: 1; position: relative; height: 18px; }
.nq-heat__month {
	position: absolute; left: calc(var(--w) / var(--nq-heat-weeks, 26) * 100%); top: 0;
	font-size: 11px; color: var(--nq-muted); white-space: nowrap;
	opacity: 0; transition: opacity 0.5s ease; transition-delay: calc(var(--w) * 12ms);
}
.nq-heat.is-in .nq-heat__month,
.nq-heat.is-settled .nq-heat__month { opacity: 1; }
.nq-heat__wdays {
	grid-column: 1; grid-row: 1 / span 2;
	display: grid; grid-template-rows: repeat(7, var(--nq-heat-cell));
	row-gap: calc(var(--nq-heat-step) - var(--nq-heat-cell));
	align-content: start; padding-top: 18px;
	position: sticky; left: 0; z-index: 3;
	background: var(--nq-card); box-shadow: 4px 0 0 var(--nq-card);
}
.nq-heat__wdays span { font-size: 10px; line-height: var(--nq-heat-cell); color: var(--nq-muted); white-space: nowrap; }
.nq-heat__weeks { grid-column: 2; grid-row: 2; display: flex; width: 100%; gap: 3px; }
.nq-heat__week { display: flex; flex: 1 1 0; min-width: 0; flex-direction: column; gap: 3px; }
.nq-heat__cell {
	--r: 0; position: relative; display: block;
	width: 100%; height: var(--nq-heat-cell); padding: 0;
	border: 0; border-radius: 3px; background: var(--nq-heat-empty);
	opacity: 0; transform: scale(0.2);
}
.nq-heat__cell:nth-child(2) { --r: 1; }
.nq-heat__cell:nth-child(3) { --r: 2; }
.nq-heat__cell:nth-child(4) { --r: 3; }
.nq-heat__cell:nth-child(5) { --r: 4; }
.nq-heat__cell:nth-child(6) { --r: 5; }
.nq-heat__cell:nth-child(7) { --r: 6; }
.nq-heat__cell--pad { visibility: hidden; pointer-events: none; }
.nq-heat.is-in .nq-heat__cell {
	animation: pmhm-pop 0.5s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
	animation-delay: calc(var(--w) * 12ms + var(--r) * 28ms);
}
.nq-heat.is-settled .nq-heat__cell {
	animation: none; opacity: 1; transform: none;
	transition: background-color 0.4s ease calc(var(--w) * 7ms), transform 0.15s ease, box-shadow 0.15s ease, opacity 0.2s ease;
}
.nq-heat__cell[data-d] { cursor: pointer; }
.nq-heat__cell:focus-visible { outline: 2px solid var(--nq-accent); outline-offset: 1px; z-index: 2; }
@media (hover: hover) {
	.nq-heat.is-settled .nq-heat__weeks:hover .nq-heat__cell[data-d] { opacity: 0.55; }
	.nq-heat.is-settled .nq-heat__weeks .nq-heat__cell[data-d]:hover {
		opacity: 1; transform: scale(1.45); z-index: 2;
		box-shadow: 0 3px 10px rgba(0, 0, 0, 0.25);
	}
}
.nq-heat[data-mode="sent"] .nq-heat__cell[data-lv="1"],
.nq-heat[data-mode="sent"] .nq-heat__sw[data-lv="1"] { background: rgba(var(--primary-rgb, 0, 150, 136), 0.22); }
.nq-heat[data-mode="sent"] .nq-heat__cell[data-lv="2"],
.nq-heat[data-mode="sent"] .nq-heat__sw[data-lv="2"] { background: rgba(var(--primary-rgb, 0, 150, 136), 0.42); }
.nq-heat[data-mode="sent"] .nq-heat__cell[data-lv="3"],
.nq-heat[data-mode="sent"] .nq-heat__sw[data-lv="3"] { background: rgba(var(--primary-rgb, 0, 150, 136), 0.66); }
.nq-heat[data-mode="sent"] .nq-heat__cell[data-lv="4"],
.nq-heat[data-mode="sent"] .nq-heat__sw[data-lv="4"] { background: rgba(var(--primary-rgb, 0, 150, 136), 0.95); }
.nq-heat[data-mode="failed"] .nq-heat__cell[data-lv="1"],
.nq-heat[data-mode="failed"] .nq-heat__sw[data-lv="1"] { background: rgba(235, 151, 159, 0.55); }
.nq-heat[data-mode="failed"] .nq-heat__cell[data-lv="2"],
.nq-heat[data-mode="failed"] .nq-heat__sw[data-lv="2"] { background: rgba(243, 62, 80, 0.55); }
.nq-heat[data-mode="failed"] .nq-heat__cell[data-lv="3"],
.nq-heat[data-mode="failed"] .nq-heat__sw[data-lv="3"] { background: rgba(243, 62, 80, 0.75); }
.nq-heat[data-mode="failed"] .nq-heat__cell[data-lv="4"],
.nq-heat[data-mode="failed"] .nq-heat__sw[data-lv="4"] { background: rgba(243, 62, 80, 0.95); }
.nq-heat__cell.is-today { box-shadow: 0 0 0 2px var(--nq-accent); z-index: 1; }
.nq-heat.is-settled .nq-heat__cell.is-today::before {
	content: ''; position: absolute; inset: -2px; border-radius: 4px;
	border: 2px solid var(--nq-accent); animation: pmhm-pulse 2s ease-out infinite; pointer-events: none;
}
.nq-heat__legend {
	display: flex; align-items: center; flex-wrap: wrap; gap: 4px 6px;
	margin-top: 6px; font-size: 11px; color: var(--nq-muted);
}
.nq-heat__sw {
	display: inline-block; width: 11px; height: 11px; border-radius: 3px; background: var(--nq-heat-empty);
}
.nq-heat__tip {
	position: absolute; z-index: 5; transform: translate(-50%, -100%);
	padding: 4px 8px; border-radius: 6px; pointer-events: none;
	background: #2c3e50; color: #fff; font-size: 11px; font-weight: 600;
	white-space: nowrap; box-shadow: 0 6px 16px rgba(0, 0, 0, 0.2);
}
[data-theme="dark"] .nq-heat__tip { background: #333; color: #fff; border: 1px solid #3a3a3a; }
.nq-seg {
	display: flex; gap: 2px; padding: 3px; border-radius: 12px; background: var(--nq-hover);
	overflow-x: auto; margin-bottom: 12px; scrollbar-width: none;
}
.nq-seg::-webkit-scrollbar { display: none; }
.nq-seg__btn {
	border: 0; background: transparent; color: var(--nq-muted); font-weight: 700; font-size: .82rem;
	padding: 6px 14px; border-radius: 8px; cursor: pointer; white-space: nowrap;
	transition: background .2s, color .2s, box-shadow .2s;
}
.nq-seg__btn.is-active { background: var(--nq-card); color: var(--nq-text); box-shadow: 0 1px 4px rgba(0, 0, 0, .12); }
.nq-seg__btn:focus-visible { outline: none; box-shadow: 0 0 0 3px color-mix(in srgb, var(--nq-accent) 35%, transparent); }
.nq-table-wrap { transition: opacity .18s ease; overflow: visible; }
.nq-table-scroll { display: block; width: 100%; max-width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; }
.nq-list.is-cards .nq-table-scroll { overflow: visible; }
.nq-table-wrap.is-switching { opacity: .35; }
.nq-list .dataTables_wrapper.container-fluid { padding-left: 0; padding-right: 0; width: 100%; }
.nq-list .dataTables_wrapper > .row { margin-left: 0; margin-right: 0; }
.nq-list .dataTables_length,
.nq-list .dataTables_filter,
.nq-list .dataTables_info,
.nq-list .dataTables_paginate { color: var(--nq-muted); font-size: 13px; }
.nq-list .dataTables_length,
.nq-list .dataTables_filter { margin-bottom: 10px; }
.nq-list__tools {
	display: flex; align-items: center; justify-content: space-between; gap: 12px;
	margin: 0 0 12px;
}
.nq-list__tools > [class*="col-"] { width: auto; max-width: none; flex: 0 1 auto; padding-left: 0; padding-right: 0; }
.nq-list__tools .dataTables_length,
.nq-list__tools .dataTables_filter { margin-bottom: 0; }
.nq-list__tools .dataTables_filter { margin-left: auto; }
.nq-list__tools .dataTables_filter input { min-width: 220px; }
.nq-list .dataTables_info,
.nq-list .dataTables_paginate { margin-top: 10px; padding-top: 0; }
.nq-list .dataTables_length label,
.nq-list .dataTables_filter label { display: inline-flex; align-items: center; gap: 8px; margin-bottom: 0; font-weight: 600; }
.nq-list .dataTables_filter { text-align: right; }
.nq-list .dataTables_filter input { margin-left: 0; }
.nq-list .dataTables_length select,
.nq-list .dataTables_filter input {
	height: 34px; border-radius: 8px; border: 1px solid var(--nq-line);
	background: var(--nq-card); color: var(--nq-text);
}
.nq-list .dataTables_filter input { min-width: 180px; }
.nq-list .dataTables_length select:focus,
.nq-list .dataTables_filter input:focus {
	border-color: var(--nq-accent);
	box-shadow: 0 0 0 3px color-mix(in srgb, var(--nq-accent) 25%, transparent);
}
.nq-list .dataTables_wrapper > .row > [class*="col-"] { padding-left: 0; padding-right: 0; }
.nq-list__head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 8px; }
.nq-list__head .nq-panel__title { margin: 0; }
.nq-view { display: inline-flex; gap: 4px; }
.nq-view__btn {
	border: 1px solid var(--nq-line); background: var(--nq-card); color: var(--nq-text);
	border-radius: 10px; padding: 6px 10px; font-size: 12px; font-weight: 700; cursor: pointer;
}
.nq-view__btn.is-active { border-color: var(--nq-accent); box-shadow: 0 0 0 3px color-mix(in srgb, var(--nq-accent) 25%, transparent); }
.nq-view__btn:focus-visible { outline: none; box-shadow: 0 0 0 3px color-mix(in srgb, var(--nq-accent) 35%, transparent); }
.nq-cat { display: inline-flex; align-items: center; gap: 6px; max-width: 100%; min-width: 0; }
.nq-list td .nq-cat { max-width: 100%; }
.nq-cat .app-notification__icon { float: none; margin: 0; display: inline-flex; flex: none; }
.nq-cat .fa-stack { font-size: 10px; width: 2em; height: 2em; line-height: 2em; }
.nq-cat__name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 700; min-width: 0; }
.nq-cards { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; align-items: start; }
.nq-card {
	border: 1px solid var(--nq-line); border-radius: 12px; background: var(--nq-card); color: var(--nq-text);
	padding: 12px; min-width: 0;
	animation: nq-rise .45s var(--nq-ease) both;
	animation-delay: calc(var(--order, 0) * 35ms);
	transition: transform .18s ease, box-shadow .18s ease;
}
.nq-card:hover { transform: translateY(-2px); box-shadow: 0 8px 24px rgba(15, 23, 42, .12); }
[data-theme="dark"] .nq-card:hover { box-shadow: 0 8px 24px rgba(0, 0, 0, .35); }
.nq-card__top { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.nq-card__channel { display: flex; flex-wrap: wrap; align-items: center; min-width: 0; }
.nq-card__channel .nq-route { gap: 0; }
.nq-card__channel .nq-route + .nq-route { margin-left: 8px; }
.nq-card__channel .nq-route + .nq-route::before {
	content: "·"; margin-right: 8px; color: var(--nq-muted); font-weight: 500;
}
.nq-card__channel .nq-cat { display: none; }
.nq-card__channel .nq-route:not(:has(.nq-route__ch)) .nq-cat { display: inline-flex; }
.nq-card__channel .nq-route__ch {
	display: inline-flex; align-items: center; gap: 6px;
	font-size: 13px; font-weight: 650; color: var(--nq-text);
}
.nq-card__channel .nq-route__ch::before {
	font-family: FontAwesome; font-weight: normal; font-size: 13px; opacity: .8;
}
.nq-card__channel .nq-route--telegram .nq-route__ch::before { content: "\f1d8"; }
.nq-card__channel .nq-route--email .nq-route__ch::before { content: "\f0e0"; }
.nq-card__channel .nq-route--inbox .nq-route__ch::before { content: "\f01c"; }
.nq-card__channel .nq-route--group .nq-route__ch::before { content: "\f0c0"; }
.nq-card__status { display: flex; flex-wrap: wrap; gap: 4px; justify-content: flex-end; flex: none; }
.nq-card .nq-status::before {
	font-family: FontAwesome; font-weight: normal; font-size: 11px; margin-right: 5px;
}
.nq-card .nq-status--sent::before { content: "\f00c"; }
.nq-card .nq-status--processing::before { content: "\f111"; font-size: 7px; }
.nq-card .nq-status--failed::before { content: "\f00d"; }
.nq-card .nq-status--pending::before,
.nq-card .nq-status--delivery_unknown::before { content: "\f017"; }
.nq-card:has(.nq-status--processing) { border-color: color-mix(in srgb, var(--nq-accent) 55%, var(--nq-line)); }
.nq-card:has(.nq-status--failed) { border-color: color-mix(in srgb, #c45c6a 50%, var(--nq-line)); }
.nq-card__title { margin: 10px 0 6px; font-size: 15px; font-weight: 750; line-height: 1.3; }
.nq-card__who { font-size: 12px; color: var(--nq-muted); }
.nq-card .nq-recipient {
	display: flex; align-items: center; flex-wrap: wrap; gap: 6px; min-width: 0;
}
.nq-card .nq-recipient .usr-ava { grid-column: auto; grid-row: auto; width: 22px; height: 22px; font-size: 8px; }
.nq-card .nq-recipient__name { grid-column: auto; font-weight: 700; color: var(--nq-text); }
.nq-card .nq-recipient .nq-token { grid-column: auto; }
.nq-card .nq-recipient .nq-token::before { content: "·"; margin-right: 6px; }
.nq-card .nq-recipient .nq-token--email::before,
.nq-card .nq-recipient .nq-token--telegram::before {
	font-family: FontAwesome; font-weight: normal; font-style: normal; margin-right: 4px;
}
.nq-card .nq-recipient .nq-token--email::before { content: "\f0e0"; }
.nq-card .nq-recipient .nq-token--telegram::before { content: "\f1d8"; }
.nq-card__msg {
	position: relative;
	margin-top: 10px; padding: 8px 10px 8px 28px; border-radius: 8px;
	background: color-mix(in srgb, var(--nq-text) 5%, var(--nq-card));
	border: 1px solid var(--nq-line); color: var(--nq-text);
	font-size: 12.5px; line-height: 1.45; word-break: break-word;
	display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 4; overflow: hidden;
}
.nq-card__msg + .nq-card__msg { margin-top: 8px; }
.nq-card__msg::before {
	font-family: FontAwesome; font-weight: normal; content: "\f0e5";
	position: absolute; left: 10px; top: 10px; font-size: 12px; line-height: 1; color: var(--nq-muted);
}
.nq-card__msg--email::before { content: "\f0e0"; }
[data-theme="dark"] .nq-card__msg { background: #1c1b1b; }
.nq-card__foot {
	display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 8px;
	margin-top: 10px; font-size: 12px; color: var(--nq-muted);
}
.nq-card__foot .nq-card__ref { margin-left: auto; }
.nq-card__ref {
	display: inline-flex; align-items: center; gap: 6px; padding: 2px 8px 2px 4px; border-radius: 999px;
	border: 1px solid var(--nq-line); background: var(--nq-hover);
	font-weight: 700; color: var(--nq-text); font-variant-numeric: tabular-nums;
}
.nq-card__ref .app-notification__icon { float: none; margin: 0; padding: 0; display: inline-flex; flex: none; line-height: 1; }
.nq-card__ref .fa-stack { font-size: 8px; width: 2em; height: 2em; line-height: 2em; }
.nq-card__foot .nq-when { flex-direction: row; align-items: center; flex-wrap: wrap; gap: 8px; }
.nq-card__foot .nq-when__time { display: inline-flex; align-items: center; gap: 6px; font-weight: 500; }
.nq-card__foot .nq-when__time::before {
	font-family: FontAwesome; font-weight: normal; content: "\f017"; font-size: 12px; opacity: .75;
}
.nq-card__foot .nq-when__meta,
.nq-card__foot .nq-when__next { font-size: 12px; }
.nq-card__foot .nq-when__meta::before,
.nq-card__foot .nq-when__next::before { content: "·"; margin-right: 8px; }
.nq-card__foot .nq-when__err { flex: 1 0 100%; margin: 0; }
.nq-card__err { margin-top: 8px; font-size: 12px; color: #e07a86; }
.nq-list.is-cards #nqQueueTable { display: none; }
.nq-when { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; line-height: 1.3; min-width: 0; }
.nq-when__time { font-weight: 700; font-variant-numeric: tabular-nums; }
.nq-when__next, .nq-when__meta { font-size: 11px; color: var(--nq-muted); }
.nq-when__err { font-size: 11px; color: #e07a86; overflow-wrap: anywhere; }
[data-theme="dark"] .nq-when__err,
[data-theme="dark"] .nq-card__err { color: #ff8a95; }
.nq-route { display: flex; flex-direction: row; align-items: center; flex-wrap: wrap; gap: 4px 8px; min-width: 0; }
.nq-route__ch { font-size: 11px; color: var(--nq-muted); font-weight: 600; }
.nq-list table.dataTable {
	width: 100% !important; min-width: 760px; table-layout: fixed;
	margin-top: 0 !important; margin-bottom: 0 !important;
	border-color: var(--nq-line); font-size: 12px;
}
.nq-list table.dataTable thead th {
	white-space: normal; vertical-align: bottom; font-size: 12px; line-height: 1.25;
}
.nq-list table.dataTable.table-sm > thead > tr > th { padding: 8px 18px 8px 6px; }
.nq-list table.dataTable td { padding: 8px 6px; vertical-align: middle; }
.nq-list table.dataTable th:nth-child(1),
.nq-list table.dataTable td:nth-child(1) { width: 24%; }
.nq-list table.dataTable th:nth-child(2),
.nq-list table.dataTable td:nth-child(2) { width: 16%; }
.nq-list table.dataTable th:nth-child(3),
.nq-list table.dataTable td:nth-child(3) { width: 20%; }
.nq-list table.dataTable th:nth-child(4),
.nq-list table.dataTable td:nth-child(4) { width: 14%; }
.nq-list table.dataTable th:nth-child(5),
.nq-list table.dataTable td:nth-child(5) { width: 16%; }
.nq-list table.dataTable th:nth-child(6),
.nq-list table.dataTable td:nth-child(6) { width: 10%; }
.nq-list .nq-nowrap { white-space: nowrap; }
.nq-list .nq-wrap { white-space: normal; overflow-wrap: anywhere; }
.nq-list .pagination { margin-bottom: 0; justify-content: flex-end; }
.nq-list .page-link { border-radius: 8px; margin-left: 4px; }
[data-theme="dark"] .nq-list table.dataTable tbody td {
	background: var(--nq-card);
	color: var(--nq-text);
	border-color: var(--nq-line);
}
[data-theme="dark"] .nq-list table.dataTable.table-striped tbody tr:nth-of-type(odd) td {
	background: var(--nq-hover);
}
[data-theme="dark"] .nq-list table.dataTable.table-hover tbody tr:hover td {
	background: #333;
}
.nq-recipient {
	display: grid; grid-template-columns: auto minmax(0, 1fr); column-gap: 6px; row-gap: 1px;
	align-items: center; min-width: 0;
}
.nq-recipient .usr-ava { grid-column: 1; grid-row: 1; flex: none; }
.nq-recipient__name { grid-column: 2; grid-row: 1; font-weight: 700; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
.nq-recipient .nq-token { grid-column: 2; }
.nq-token { font-size: 11px; color: var(--nq-muted); font-variant-numeric: tabular-nums; letter-spacing: .04em; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.nq-status {
	display: inline-flex; align-items: center; padding: 2px 8px; border-radius: 999px;
	font-size: 12px; font-weight: 700;
	background: color-mix(in srgb, var(--c, var(--nq-muted)) 14%, var(--nq-card));
	color: var(--c, var(--nq-text));
	border: 1px solid color-mix(in srgb, var(--c, var(--nq-muted)) 30%, var(--nq-line));
}
.nq-status--pending { --c: #c4a35a; }
.nq-status--processing { --c: var(--nq-accent); }
.nq-status--sent { --c: #3d9a6a; }
.nq-status--failed { --c: #c45c6a; }
.nq-status--skipped { --c: #8a8a8a; }
.nq-status--delivery_unknown { --c: #c4a35a; }
[data-theme="dark"] .nq-queue .table { color: var(--nq-text); }
@keyframes nq-rise { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
@keyframes nq-in { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
@keyframes nq-ping { 0% { transform: scale(1); opacity: .7; } 100% { transform: scale(2.4); opacity: 0; } }
@keyframes nq-spin { to { transform: rotate(360deg); } }
@keyframes nq-bump { 0% { transform: scale(1); } 40% { transform: scale(1.08); } 100% { transform: scale(1); } }
@media (max-width: 991px) { .nq-split { grid-template-columns: 1fr; } }
@media (max-width: 600px) {
	.nq-kpis { grid-template-columns: 1fr 1fr; }
	.nq-head { align-items: flex-start; }
	.nq-cards { grid-template-columns: 1fr; }
	.nq-list__head { align-items: flex-start; flex-direction: column; }
	.nq-list__tools { align-items: stretch; flex-direction: column; }
	.nq-list__tools .dataTables_filter,
	.nq-list__tools .dataTables_filter input { width: 100%; min-width: 0; }
}
@media (prefers-reduced-motion: reduce) {
	.nq-kpi, .nq-panel, .nq-card, .nq-kpi__value.is-bump, .nq-live__dot::after, .nq-refresh.is-loading .fa,
	.nq-heat.is-in .nq-heat__cell, .nq-heat.is-settled .nq-heat__cell.is-today::before {
		animation: none;
		transition: none;
		opacity: 1;
		transform: none;
	}
	.nq-heat-toggle__pill, .nq-heat__tip, .nq-heat__month, .nq-flow__sent, .nq-flow__fail { transition: none; }
	.nq-table-wrap, .nq-table-wrap.is-switching { transition: none; opacity: 1; }
}

/* WO Sub-Status settings — live timeline preview (ref_WO_Sub_Status) */
.wo-substatus-settings-preview.tile {
    margin-bottom: 0.75rem;
}

.wo-substatus-settings-preview .wo-substatus-settings-preview-body {
    padding: 0.5rem 0.85rem 0.65rem;
}

.wo-substatus-settings-preview .line-head {
    margin-bottom: 0.5rem;
}

.wo-substatus-settings-preview .wo-timeline-container {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    position: relative;
    padding: 0 5px 14px;
}

.wo-substatus-settings-preview .wo-timeline-step {
    flex: 1;
    text-align: center;
    position: relative;
    z-index: 2;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.wo-substatus-settings-preview .wo-timeline-step-icon {
    width: 45px;
    height: 45px;
    border-radius: 50%;
    margin: 0 auto 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
    background: #f3f4f6;
    border: 3px solid #e2e8f0;
    color: #9ca3af;
    box-sizing: border-box;
}

.wo-substatus-settings-preview .wo-timeline-step.active.status-open .wo-timeline-step-icon {
    background: linear-gradient(135deg, #ef4444 0%, #dc2626 100%);
    border-color: #ef4444;
    color: #fff;
}

.wo-substatus-settings-preview .wo-timeline-step.active.status-repair .wo-timeline-step-icon,
.wo-substatus-settings-preview .wo-timeline-step.active.status-done .wo-timeline-step-icon,
.wo-substatus-settings-preview .wo-timeline-step.active.status-verified .wo-timeline-step-icon {
    background: linear-gradient(135deg, #17a2b8 0%, #138496 100%);
    border-color: #17a2b8;
    color: #fff;
}

.wo-substatus-settings-preview .wo-timeline-step-label {
    font-weight: 600;
    font-size: 10px;
    color: #64748b;
    text-transform: uppercase;
}

/* Line runs through vertical center of step icons (45px) — same math as work_order_timeline.php */
.wo-substatus-settings-preview .wo-timeline-connector {
    position: absolute;
    top: 20px;
    left: calc(100% / (var(--total-steps) - 1) / 2);
    right: calc(100% / (var(--total-steps) - 1) / 2);
    height: 5px;
    background: linear-gradient(90deg, #e2e8f0 0%, #cbd5e1 100%);
    border-radius: 10px;
    z-index: 1;
    overflow: visible;
    box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.05);
}

.wo-substatus-settings-preview .wo-timeline-connector-next {
    position: absolute;
    left: 0;
    top: 0;
    height: 100%;
    background: linear-gradient(90deg, #009688 0%, #17a2b8 100%);
    border-radius: 4px;
    transition: width 0.35s ease;
    max-width: 100%;
}

.wo-substatus-settings-preview .wo-substatus-indicator {
    position: absolute;
    top: 50%;
    transform: translate(-50%, -50%);
    width: 14px;
    height: 14px;
    border-radius: 50%;
    background: #17a2b8;
    border: 2px solid #fff;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.2);
    z-index: 3;
}

.wo-substatus-settings-preview .wo-substatus-indicator.is-preview-new {
    background: #f59e0b;
    box-shadow: 0 0 0 3px rgba(245, 158, 11, 0.25);
}

.wo-substatus-settings-preview .wo-substatus-indicator.is-flow-saved {
    background: #94a3b8;
    border-color: #fff;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.15);
    opacity: 0.85;
}

.wo-substatus-settings-preview .wo-substatus-indicator.is-flow-saved.is-highlighted,
.wo-substatus-settings-preview .wo-substatus-indicator.is-flow-saved.is-preview-new {
    background: #f59e0b;
    opacity: 1;
    width: 18px;
    height: 18px;
    border-color: #fff;
    box-shadow: 0 0 0 4px rgba(245, 158, 11, 0.35);
    z-index: 4;
}

.wo-substatus-settings-preview .wo-substatus-label {
    position: absolute;
    top: calc(50% + 12px);
    left: 50%;
    transform: translateX(-50%);
    font-size: 9px;
    font-weight: 600;
    color: #64748b;
    white-space: nowrap;
    max-width: 72px;
    overflow: hidden;
    text-overflow: ellipsis;
    z-index: 3;
    text-transform: uppercase;
    letter-spacing: 0.3px;
    opacity: 0.9;
}

.wo-substatus-settings-preview .wo-substatus-label.is-highlighted,
.wo-substatus-settings-preview .wo-substatus-label.is-preview-new {
    color: #d97706;
    opacity: 1;
    font-weight: 700;
    max-width: 96px;
    z-index: 4;
}

.wo-substatus-flow-badge.is-timeline-active {
    background: #009688 !important;
    color: #fff !important;
}

@media (max-width: 768px) {
    .wo-substatus-settings-preview .wo-timeline-step-icon {
        width: 36px;
        height: 36px;
        font-size: 14px;
        margin-bottom: 6px;
        border-width: 2px;
    }

    .wo-substatus-settings-preview .wo-timeline-connector {
        top: 15px;
        height: 3px;
    }
}

[data-theme="dark"] .wo-substatus-settings-preview .wo-timeline-step-icon {
    background: #262e33;
    border-color: var(--default-line, #3a3f44);
    color: #94a3b8;
}

[data-theme="dark"] .wo-substatus-settings-preview .wo-timeline-connector {
    background: var(--default-line, #3a3f44);
}

[data-theme="dark"] .wo-substatus-settings-preview .wo-timeline-step-label {
    color: #94a3b8;
}

[data-theme="dark"] .wo-substatus-settings-preview .wo-substatus-indicator.is-flow-saved {
    background: #64748b;
    border-color: #2d2d2d;
}

[data-theme="dark"] .wo-substatus-settings-preview .wo-substatus-indicator.is-flow-saved.is-highlighted,
[data-theme="dark"] .wo-substatus-settings-preview .wo-substatus-indicator.is-flow-saved.is-preview-new {
    background: #f59e0b;
    border-color: #fff;
    box-shadow: 0 0 0 4px rgba(245, 158, 11, 0.4);
}

[data-theme="dark"] .wo-substatus-settings-preview .wo-substatus-label {
    color: #94a3b8;
}

[data-theme="dark"] .wo-substatus-settings-preview .wo-substatus-label.is-highlighted,
[data-theme="dark"] .wo-substatus-settings-preview .wo-substatus-label.is-preview-new {
    color: #fbbf24;
}

[data-theme="dark"] .wo-substatus-flow-badge.is-timeline-active {
    background: #009688 !important;
    color: #fff !important;
}

/* General settings NX cards (Notification Type / Email Delivery pattern) */
.set-nx {
	width: 100%;
	max-width: 100%;
	box-sizing: border-box;
	background: #fff;
	border-radius: 14px;
	border: 1px solid #e2e8f0;
	box-shadow: 0 4px 24px rgba(15, 23, 42, 0.06);
	margin-bottom: 1rem;
	overflow: visible;
}
.set-nx-head {
	background: linear-gradient(90deg, var(--primary-back, #0f766e) 0%, var(--primary, #14b8a6) 100%);
	color: #fff;
	padding: 1.25rem 1.5rem;
	border-radius: 13px 13px 0 0;
}
.set-nx-head-content {
	display: flex;
	align-items: center;
	gap: 1rem;
}
.set-nx-head-content > i {
	font-size: 1.75rem;
	opacity: 0.9;
	flex-shrink: 0;
}
.set-nx-head .oauth-provider-logo {
	width: 28px;
	height: 28px;
	object-fit: contain;
	flex-shrink: 0;
}
.set-nx-title { margin: 0; font-size: 1.25rem; font-weight: 700; color: #fff; }
.set-nx-sub { margin: 0.2rem 0 0; font-size: 0.8rem; opacity: 0.85; color: #fff; }
.set-nx-body { padding: 1.5rem; background: #f8fafc; border-radius: 0 0 13px 13px; }
.set-nx-hint { font-size: 0.8rem; color: #64748b; line-height: 1.45; }
.set-nx-list { margin-bottom: 1rem; }
.set-nx-item {
	display: flex;
	align-items: center;
	width: 100%;
	background: #fff;
	border-radius: 10px;
	margin-bottom: 0.6rem;
	overflow: hidden;
	box-shadow: 0 1px 4px rgba(0, 0, 0, 0.05);
	position: relative;
	cursor: pointer;
	transition: box-shadow .2s, transform .2s;
}
.set-nx-item:hover {
	box-shadow: 0 4px 16px rgba(var(--primary-rgb, 20, 184, 166), 0.15);
	transform: translateX(4px);
}
.set-nx-item--static { cursor: default; }
.set-nx-item--static:hover { transform: none; box-shadow: 0 1px 4px rgba(0, 0, 0, 0.05); }
.set-nx-accent { width: 4px; align-self: stretch; flex-shrink: 0; background: var(--primary, #14b8a6); }
.set-nx-item--warn .set-nx-accent { background: var(--warning, #f59e0b); }
.set-nx-item--danger .set-nx-accent { background: var(--danger, #dc3545); }
.set-nx-icon {
	width: 42px;
	text-align: center;
	padding: 1rem 0;
	font-size: 1.3rem;
	color: var(--primary, #0d9488);
	flex-shrink: 0;
}
.set-nx-item--warn .set-nx-icon { color: var(--warning, #d97706); }
.set-nx-item--danger .set-nx-icon { color: var(--danger, #dc3545); }
.set-nx-info { flex: 1; min-width: 0; padding: 0.85rem 0.75rem 0.85rem 0; }
.set-nx-name { display: block; font-weight: 700; color: #1e293b; font-size: 0.95rem; }
.set-nx-desc { display: block; font-size: 0.8rem; color: #64748b; margin-top: 2px; font-weight: 400; }
.set-nx .nr-switch {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	cursor: pointer;
	user-select: none;
	margin: 0 1rem;
	flex-shrink: 0;
}
.set-nx .nr-switch input {
	position: absolute;
	opacity: 0;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	pointer-events: none;
}
.set-nx .nr-switch-track {
	width: 44px;
	height: 24px;
	background: #cbd5e0;
	border-radius: 12px;
	position: relative;
	flex-shrink: 0;
	margin: 0;
	transition: background 0.2s;
}
.set-nx .nr-switch-track::after {
	content: '';
	position: absolute;
	left: 3px;
	top: 3px;
	width: 18px;
	height: 18px;
	background: #fff;
	border-radius: 50%;
	transition: left 0.2s;
	box-shadow: 0 2px 4px rgba(0, 0, 0, 0.25);
}
.set-nx .nr-switch input:checked + .nr-switch-track { background: var(--primary, #009688); }
.set-nx .nr-switch input:checked + .nr-switch-track::after { left: 23px; }
.set-nx .nr-switch input:focus + .nr-switch-track { box-shadow: 0 0 0 3px rgba(var(--primary-rgb, 0, 150, 136), 0.28); }
.set-nx-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	padding: 0.75rem 1.25rem;
	background: var(--primary, #009688);
	color: #fff;
	border: 0;
	border-radius: 10px;
	font-weight: 700;
	font-size: 0.95rem;
	transition: background .2s, box-shadow .2s;
}
.set-nx-btn:hover,
.set-nx-btn:focus {
	color: #fff;
	background: var(--primary-btn-hover, #00796b);
	box-shadow: 0 4px 14px rgba(var(--primary-rgb, 15, 118, 110), 0.35);
}
.set-nx-btn-add {
	display: inline-flex;
	align-items: center;
	gap: 0.35rem;
	border: 1px solid var(--primary, #009688);
	background: #fff;
	color: var(--primary, #009688);
	border-radius: 10px;
	padding: 0.4rem 0.85rem;
	font-weight: 600;
	font-size: 0.85rem;
}
.set-nx-btn-add:hover,
.set-nx-btn-add:focus {
	background: var(--primary-light, #e8f5f3);
	color: var(--primary-back, #00695c);
}
.set-nx-choices { display: grid; gap: 0.75rem; margin-bottom: 1rem; }
.set-nx-choice { margin: 0; cursor: pointer; display: block; }
.set-nx-choice input {
	position: absolute;
	opacity: 0;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
}
.set-nx-choice-card {
	display: flex;
	align-items: flex-start;
	gap: 0.75rem;
	position: relative;
	padding: 0.9rem 2.75rem 0.9rem 1rem;
	border: 2px solid #e2e8f0;
	border-radius: 10px;
	background: #fff;
	color: #1e293b;
	transition: border-color .15s, background .15s, box-shadow .15s;
}
.set-nx-choice-card::after {
	content: "";
	position: absolute;
	top: 1rem;
	right: 0.95rem;
	width: 22px;
	height: 22px;
	border-radius: 50%;
	border: 2px solid #cbd5e1;
	background: #fff;
	box-sizing: border-box;
	color: transparent;
	font-family: FontAwesome;
	font-size: 11px;
	font-weight: 400;
	font-style: normal;
	line-height: 18px;
	text-align: center;
}
.set-nx-choice input:checked + .set-nx-choice-card::after {
	content: "\f00c";
	color: #fff;
	background: var(--primary, #009688);
	border-color: var(--primary, #009688);
}
.set-nx-choice-card > i {
	font-size: 1.15rem;
	color: var(--primary, #009688);
	margin-top: 0.15rem;
	flex-shrink: 0;
}
.set-nx-choice-name { display: block; font-weight: 700; }
.set-nx-choice-desc { display: block; font-size: 0.8rem; font-weight: 400; color: #64748b; margin-top: 2px; }
.set-nx-choice input:checked + .set-nx-choice-card {
	border-color: var(--primary, #009688);
	background: var(--primary-light, #e8f5f3);
	color: var(--primary-back, #00695c);
	box-shadow: 0 0 0 1px var(--primary, #009688);
}
.set-nx-choice input:focus + .set-nx-choice-card,
.set-nx-choice input:focus-visible + .set-nx-choice-card {
	box-shadow: 0 0 0 3px rgba(var(--primary-rgb, 0, 150, 136), 0.28);
}
.set-nx-choice-extra { margin: -0.25rem 0 0.25rem 1.5rem; }
.set-nx-grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
	gap: 0.75rem;
	margin-bottom: 1rem;
}
.set-nx-field { min-width: 0; }
.set-nx-field > label,
.set-nx-field > .set-nx-name { display: block; font-weight: 600; margin-bottom: 0.35rem; color: #1e293b; font-size: 0.875rem; }
.set-nx-field-card {
	background: #fff;
	border-radius: 10px;
	padding: 0.9rem;
	height: 100%;
	box-shadow: 0 1px 4px rgba(0, 0, 0, 0.05);
}
.set-nx-stats {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
	gap: 0.75rem;
	margin-bottom: 1rem;
}
.set-nx-stat {
	background: #fff;
	border-radius: 10px;
	padding: 1rem;
	text-align: center;
	box-shadow: 0 1px 4px rgba(0, 0, 0, 0.05);
}
.set-nx-stat-value { font-size: 1.75rem; font-weight: 700; line-height: 1.1; color: var(--primary, #009688); }
.set-nx-stat-value--danger { color: var(--danger, #dc3545); }
.set-nx-stat-value--success { color: var(--success, #28a745); }
.set-nx-stat-value--warning { color: var(--warning, #d97706); }
.set-nx-stat-value--muted { color: #64748b; }
.set-nx-stat-label { font-size: 0.8rem; color: #64748b; margin-top: 0.25rem; }
.set-nx-panel {
	background: #fff;
	border-radius: 10px;
	padding: 0.75rem;
	box-shadow: 0 1px 4px rgba(0, 0, 0, 0.05);
	margin-bottom: 1rem;
}
.set-nx-section { font-weight: 700; font-size: 0.95rem; color: #1e293b; margin: 0.25rem 0 0.6rem; }
.set-nx-email .set-nx-info { padding-right: 0.5rem; }
.set-nx-email .remove-email { margin-right: 0.75rem; flex-shrink: 0; }

[data-theme="dark"] .set-nx {
	background: #333;
	border-color: #1c1b1b;
	box-shadow: 0 4px 24px rgba(0, 0, 0, 0.3);
}
[data-theme="dark"] .set-nx-body { background: #262626; }
[data-theme="dark"] .set-nx-item,
[data-theme="dark"] .set-nx-field-card,
[data-theme="dark"] .set-nx-panel,
[data-theme="dark"] .set-nx-stat,
[data-theme="dark"] .set-nx-choice-card,
[data-theme="dark"] .set-nx-btn-add {
	background: #333;
	border-color: #3a3a3a;
	box-shadow: 0 1px 4px rgba(0, 0, 0, 0.2);
}
[data-theme="dark"] .set-nx-name,
[data-theme="dark"] .set-nx-field > label,
[data-theme="dark"] .set-nx-section,
[data-theme="dark"] .set-nx-choice-card { color: #fff; }
[data-theme="dark"] .set-nx-desc,
[data-theme="dark"] .set-nx-hint,
[data-theme="dark"] .set-nx-choice-desc,
[data-theme="dark"] .set-nx-stat-label { color: #c2c2c2; }
[data-theme="dark"] .set-nx-stat-value--muted { color: #c2c2c2; }
[data-theme="dark"] .set-nx .nr-switch-track { background: #475569; }
[data-theme="dark"] .set-nx .nr-switch-track::after { background: #e2e8f0; }
[data-theme="dark"] .set-nx .nr-switch input:checked + .nr-switch-track { background: var(--primary, #009688); }
[data-theme="dark"] .set-nx-choice input:checked + .set-nx-choice-card {
	background: #2d2d2d;
	border-color: var(--primary, #009688);
	color: #fff;
}
[data-theme="dark"] .set-nx-choice-card::after {
	border-color: #3a3a3a;
	background: #333;
}
[data-theme="dark"] .set-nx-choice input:checked + .set-nx-choice-card::after {
	color: #fff;
	background: var(--primary, #009688);
	border-color: var(--primary, #009688);
}
[data-theme="dark"] .set-nx-btn { background: var(--primary, #009688); }
[data-theme="dark"] .set-nx-btn:hover,
[data-theme="dark"] .set-nx-btn:focus { background: var(--primary-btn-hover, #00796b); }
.set-nx-btn:disabled,
.set-nx-btn[disabled] {
	opacity: 0.55;
	cursor: not-allowed;
	box-shadow: none;
}
.set-nx-seg {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 2px;
	padding: 3px;
	margin-bottom: 1rem;
	border-radius: 12px;
	background: #eef3f8;
	border: 1px solid #d6e0ea;
	list-style: none;
	max-width: 100%;
}
.set-nx-seg > li {
	list-style: none;
	margin: 0;
	flex: 0 0 auto;
}
.set-nx-seg-btn {
	display: inline-flex;
	align-items: center;
	border: 0;
	background: transparent;
	border-radius: 999px;
	padding: 6px 12px;
	font-size: 0.82rem;
	font-weight: 650;
	color: #5a6570;
	text-decoration: none;
	white-space: nowrap;
	line-height: 1.3;
}
.set-nx-seg-btn i { margin-right: 6px; }
.set-nx-seg-btn:hover,
.set-nx-seg-btn:focus {
	color: #1e293b;
	text-decoration: none;
}
.set-nx-seg > li.active > .set-nx-seg-btn,
.set-nx-seg > li > .set-nx-seg-btn.active {
	background: var(--primary, #009688);
	color: #fff;
}
.set-nx-seg > li.active > .set-nx-seg-btn:hover,
.set-nx-seg > li.active > .set-nx-seg-btn:focus,
.set-nx-seg > li > .set-nx-seg-btn.active:hover,
.set-nx-seg > li > .set-nx-seg-btn.active:focus {
	color: #fff;
}
.set-nx-seg .badge { margin-left: 6px; }
.set-nx-modal {
	border: 0;
	border-radius: 14px;
	overflow: hidden;
	background: #f8fafc;
}
.set-nx-modal .set-nx-head { position: relative; border-radius: 0; padding-right: 3rem; }
.set-nx-modal .set-nx-body { border-radius: 0; }
.set-nx-modal-close {
	position: absolute;
	top: 0.85rem;
	right: 0.95rem;
	color: #fff;
	opacity: 0.9;
	text-shadow: none;
	font-size: 1.6rem;
	line-height: 1;
}
.set-nx-modal-close:hover,
.set-nx-modal-close:focus { color: #fff; opacity: 1; }
[data-theme="dark"] .set-nx-seg {
	background: #262626;
	border-color: #1c1b1b;
}
[data-theme="dark"] .set-nx-seg-btn { color: #a0aec0; }
[data-theme="dark"] .set-nx-seg-btn:hover,
[data-theme="dark"] .set-nx-seg-btn:focus { color: #fff; }
[data-theme="dark"] .set-nx-seg > li.active > .set-nx-seg-btn,
[data-theme="dark"] .set-nx-seg > li > .set-nx-seg-btn.active {
	background: var(--primary, #009688);
	color: #fff;
}
[data-theme="dark"] .set-nx-modal { background: #262626; }

/* Email template modal: sample of the message the recipient receives.
   The inner card stays white because that is the sent email, not the app surface. */
#emailTemplateModal .modal-body {
    max-height: calc(100vh - 11rem);
    overflow-y: auto;
}
.email-tpl-preview {
    margin: 0.25rem 0 1rem;
}
.email-tpl-preview__label {
    font-weight: 700;
    margin-bottom: 0.5rem;
}
.email-tpl-preview__inbox {
    font-size: 13px;
    line-height: 1.6;
    margin-bottom: 0.75rem;
    padding: 0.5rem 0.75rem;
    border: 1px solid var(--default-line, #dee2e6);
    border-radius: 8px;
    background: #f8f9fa;
}
.email-tpl-preview__k {
    display: inline-block;
    min-width: 4.5rem;
    color: #6c757d;
    font-weight: 600;
}
.email-tpl-preview__frame {
    background: linear-gradient(to bottom, var(--primary, #009688) 50%, #E9E9E9 50%);
    border-radius: 16px;
    padding: 16px 8px;
}
.email-tpl-preview__card {
    background: #fff;
    color: #434245;
    border-radius: 16px;
    max-width: 520px;
    margin: 0 auto;
    padding: 16px 18px 8px;
    box-shadow: 0 10px 10px 0 rgba(0, 0, 0, 0.18);
}
.email-tpl-preview__head {
    display: flex;
    align-items: center;
    gap: 8px;
}
.email-tpl-preview__head img {
    width: 64px;
    height: auto;
    max-height: 64px;
    object-fit: contain;
    background: transparent;
}
.email-tpl-preview__head h3 {
    font-family: Arial, Helvetica, sans-serif;
    font-size: 1.35rem;
    margin: 0;
    color: #434245;
    font-weight: 500;
}
.email-tpl-preview__card h4 {
    font-size: 1.15rem;
    font-weight: 700;
    margin: 10px 0;
    color: #212529;
}
.email-tpl-preview__greet,
.email-tpl-preview__body {
    font-size: 14px;
    line-height: 1.6;
    color: #434245;
    margin-bottom: 0.35rem;
}
.email-tpl-preview__body p:last-child {
    margin-bottom: 0;
}
.email-tpl-preview__btn-wrap {
    margin: 14px 0;
}
.email-tpl-preview__btn {
    display: block;
    width: 90%;
    margin: 0 auto;
    background: var(--primary, #009688);
    color: #fff;
    text-align: center;
    font-weight: 700;
    border-radius: 16px;
    padding: 0.4rem 0.75rem;
    font-size: 0.875rem;
}
.email-tpl-preview__foot {
    font-size: 12px;
    color: #434245;
    margin: 0 0 8px;
}
.email-tpl-preview__foot a {
    color: var(--primary, #009688);
}
.email-tpl-preview__note {
    font-size: 12px;
    color: #6c757d;
    margin: 0.5rem 0 0;
}

[data-theme="dark"] .email-tpl-preview__label {
    color: #fff;
}
[data-theme="dark"] .email-tpl-preview__inbox {
    background: #2d2d2d;
    border-color: #3a3a3a;
    color: #fff;
}
[data-theme="dark"] .email-tpl-preview__k,
[data-theme="dark"] .email-tpl-preview__note {
    color: #c2c2c2;
}

/* Module analytics: shared dark surfaces and theme tokens. */
:is(html[data-theme="dark"],html [data-theme="dark"]) .am-shell{--am-bg:#2d2d2d;--am-ink:#fff;--am-muted:#c2c2c2;--am-line:#3a3a3a;--am-soft:#333;--am-accent:#02b3a2}
:is(html[data-theme="dark"],html [data-theme="dark"]) .am-brief{background:#262626;border-color:#3a3a3a}
:is(html[data-theme="dark"],html [data-theme="dark"]) .am-brief-facts{border-color:#3a3a3a}
:is(html[data-theme="dark"],html [data-theme="dark"]) .am-focus-line>strong{color:var(--am-ink)}
:is(html[data-theme="dark"],html [data-theme="dark"]) .am-tabs a[aria-current]{background:var(--primary,#009688);color:#fff}
:is(html[data-theme="dark"],html [data-theme="dark"]) .am-shell a:hover{color:#02d9c4}
:is(html[data-theme="dark"],html [data-theme="dark"]) .am-kpi-top i{background:#333;color:#c2c2c2}
:is(html[data-theme="dark"],html [data-theme="dark"]) .am-table th,:is(html[data-theme="dark"],html [data-theme="dark"]) .am-table td{border-bottom-color:var(--table-line,var(--default-line,#808080))}
:is(html[data-theme="dark"],html [data-theme="dark"]) .am-shell{--am-good:#a1deaf;--am-bad:#eb979f;--am-warm:#ffc864;--am-violet:#b4b4ff}
:is(html[data-theme="dark"],html [data-theme="dark"]) .am-insight{background:#262626;border-color:#3a3a3a}
:is(html[data-theme="dark"],html [data-theme="dark"]) .am-planning{background:#262626;border-color:#3a3a3a}
:is(html[data-theme="dark"],html [data-theme="dark"]) .am-shell a.am-insight,:is(html[data-theme="dark"],html [data-theme="dark"]) .am-shell a.am-driver{color:var(--am-ink)!important}

/* Home lazy sections: shimmer number placeholders until real values arrive */
.home-lazy-pending {
    display: inline-block;
    min-width: 2.2em;
    color: transparent !important;
    border-radius: 4px;
    background: linear-gradient(90deg, #e9ecef 0%, #f5f6f8 50%, #e9ecef 100%);
    background-size: 200% 100%;
    animation: home-lazy-shimmer 1.2s linear infinite;
}
@keyframes home-lazy-shimmer { to { background-position: -200% 0; } }
@media (prefers-reduced-motion: reduce) { .home-lazy-pending { animation: none; } }
.home-lazy-error {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    margin: 0 0 12px;
    padding: 10px 14px;
    border: 1px solid var(--default-line, #dee2e6);
    border-left: 4px solid #e0a800;
    border-radius: 6px;
    background: #fff;
    color: var(--main-text-color, #333);
    font-size: 0.9rem;
}
[data-theme="dark"] .home-lazy-pending {
    background: linear-gradient(90deg, #2b2b2b 0%, #3a3a3a 50%, #2b2b2b 100%);
    background-size: 200% 100%;
}
[data-theme="dark"] .home-lazy-error {
    background: #242424;
    border-color: var(--default-line, #404040);
    border-left-color: #e0a800;
    color: #e0e0e0;
}
/* Home KPI strip: 2x2 on phones so Pending Actions stays near the fold */
@media (max-width: 575.98px) {
    .home-kpi-strip > [class*="col-"] { flex: 0 0 50%; max-width: 50%; padding-left: 6px; padding-right: 6px; margin-bottom: 12px !important; }
    .home-kpi-strip { margin-left: -6px; margin-right: -6px; }
    .home-kpi-strip .wo-card { padding: 10px; height: 100%; }
    .home-kpi-strip .wo-stat-icon { display: none; }
    .home-kpi-strip .wo-stat-breakdown .btn { font-size: 0.7rem; padding: 1px 7px; margin-bottom: 3px; }
}

/* Home dashboard KPI pills: one neutral pill style, the status is a theme-coloured dot.
   Four tinted pills side by side read as noise; the dot keeps the cue without the clutter. */
.home-dashboard .wo-stat-breakdown .btn {
    --pill-dot: var(--secondary, #6c757d);
    display: inline-flex; align-items: center;
    border: 1px solid rgba(var(--secondary-rgb, 108, 117, 125), 0.22);
    background: rgba(var(--secondary-rgb, 108, 117, 125), 0.07);
    color: #2f3a44;
    font-weight: 600; box-shadow: none;
    transition: border-color .15s ease, background-color .15s ease;
}
.home-dashboard .wo-stat-breakdown .btn::before {
    content: ""; width: 7px; height: 7px; margin-right: 6px; border-radius: 50%; flex-shrink: 0; background: var(--pill-dot);
}
/* Flex drops the space between the count <span> and its label, so put it back */
.home-dashboard .wo-stat-breakdown .btn > span { margin-right: 0.3em; }
.home-dashboard .wo-stat-breakdown .btn-primary   { --pill-dot: var(--primary, #009688); }
.home-dashboard .wo-stat-breakdown .btn-info      { --pill-dot: var(--info, #17a2b8); }
.home-dashboard .wo-stat-breakdown .btn-success   { --pill-dot: var(--success, #28a745); }
.home-dashboard .wo-stat-breakdown .btn-danger    { --pill-dot: var(--danger, #dc3545); }
.home-dashboard .wo-stat-breakdown .btn-warning   { --pill-dot: var(--warning, #ffc107); }
.home-dashboard .wo-stat-breakdown .btn-secondary { --pill-dot: var(--secondary, #6c757d); }
/* Work order stages: one brand scale, strongest where the most work is left (New / Attend) */
.home-dashboard .wo-stage-1,
.home-dashboard .wo-stat-breakdown .btn.wo-stage-1 { --pill-dot: var(--primary, #009688); }
.home-dashboard .wo-stage-2,
.home-dashboard .wo-stat-breakdown .btn.wo-stage-2 { --pill-dot: rgba(var(--primary-rgb, 0, 150, 136), 0.68); }
.home-dashboard .wo-stage-3,
.home-dashboard .wo-stat-breakdown .btn.wo-stage-3 { --pill-dot: rgba(var(--primary-rgb, 0, 150, 136), 0.42); }
.home-dashboard .wo-stage-4,
.home-dashboard .wo-stat-breakdown .btn.wo-stage-4 { --pill-dot: rgba(var(--primary-rgb, 0, 150, 136), 0.22); }
.home-dashboard .wo-stat-split {
    display: flex; gap: 2px; height: 6px; margin: 2px 0 12px;
    border-radius: 999px; overflow: hidden;
    background: rgba(var(--secondary-rgb, 108, 117, 125), 0.12);
}
.home-dashboard .wo-stat-split > span { min-width: 4px; background: var(--pill-dot); transition: filter .15s ease; }
.home-dashboard .wo-stat-split > span:hover { filter: brightness(0.9); }
[data-theme="dark"] .home-dashboard .wo-stat-split { background: rgba(255, 255, 255, 0.08); }
[data-theme="dark"] .home-dashboard .wo-stage-4,
[data-theme="dark"] .home-dashboard .wo-stat-breakdown .btn.wo-stage-4 { --pill-dot: rgba(var(--primary-rgb, 0, 150, 136), 0.35); }
.home-dashboard .wo-stat-breakdown .btn:hover,
.home-dashboard .wo-stat-breakdown .btn:focus {
    border-color: var(--pill-dot);
    background: rgba(var(--secondary-rgb, 108, 117, 125), 0.12);
    color: #1d2327; text-decoration: none;
}
.home-dashboard .wo-stat-breakdown .btn:focus-visible { outline: 2px solid var(--primary, #009688); outline-offset: 2px; }
[data-theme="dark"] .home-dashboard .wo-stat-breakdown .btn { background: rgba(255, 255, 255, 0.06); border-color: rgba(255, 255, 255, 0.14); color: #dfe3e6; }
[data-theme="dark"] .home-dashboard .wo-stat-breakdown .btn:hover,
[data-theme="dark"] .home-dashboard .wo-stat-breakdown .btn:focus { background: rgba(255, 255, 255, 0.1); color: #fff; }

.home-dashboard .wo-stat-icon.bg-primary   { background: rgba(var(--primary-rgb, 0, 150, 136), 0.14) !important;   color: var(--primary, #009688) !important; }
.home-dashboard .wo-stat-icon.bg-info      { background: rgba(var(--info-rgb, 23, 162, 184), 0.14) !important;     color: var(--info, #17a2b8) !important; }
.home-dashboard .wo-stat-icon.bg-success   { background: rgba(var(--success-rgb, 40, 167, 69), 0.16) !important;   color: var(--success-back, #1e7e34) !important; }
.home-dashboard .wo-stat-icon.bg-danger    { background: rgba(var(--danger-rgb, 220, 53, 69), 0.13) !important;    color: var(--danger, #dc3545) !important; }
.home-dashboard .wo-stat-icon.bg-warning   { background: rgba(var(--warning-rgb, 255, 193, 7), 0.22) !important;   color: var(--warning-back, #d39e00) !important; }
.home-dashboard .wo-stat-icon.bg-secondary { background: rgba(var(--secondary-rgb, 108, 117, 125), 0.12) !important; color: var(--secondary, #6c757d) !important; }
[data-theme="dark"] .home-dashboard .wo-stat-icon[class*="bg-"] { filter: brightness(1.25); }

/* Home toolbar: section tabs + Customize menu */
.home-toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin: 0 0 16px;
}
.home-tabs {
    display: flex;
    gap: 6px;
    min-width: 0;
    overflow-x: auto;
    scrollbar-width: none;
    padding: 2px;
}
.home-tabs::-webkit-scrollbar { display: none; }
.home-tab {
    flex: 0 0 auto;
    border: 1px solid var(--default-line, #dee2e6);
    background: #fff;
    color: #495057;
    border-radius: 999px;
    padding: 5px 14px;
    font-size: 0.82rem;
    font-weight: 600;
    line-height: 1.4;
    cursor: pointer;
    transition: background-color .15s ease, color .15s ease, border-color .15s ease;
}
.home-tab:hover { border-color: var(--primary, #009688); color: var(--primary, #009688); }
.home-tab:focus-visible { outline: 2px solid var(--primary, #009688); outline-offset: 2px; }
.home-tab.is-active {
    background: var(--primary, #009688);
    border-color: var(--primary, #009688);
    color: #fff;
}
.home-customize { margin-left: auto; flex: 0 0 auto; }
.home-customize .dropdown-item .fa { color: var(--primary, #009688); margin-right: 4px; }
.home-tab-hidden { display: none !important; }
@media print { .home-toolbar { display: none !important; } }
/* The grid's own "Add Personal Widget" tile: a quiet dashed placeholder */
#widget-placements a[onclick^="openmodal("] {
    border: 1px dashed #b8c2c8;
    background: transparent;
    color: #6c757d;
    padding: 10px;
}
#widget-placements a[onclick^="openmodal("]:hover { border-color: var(--primary, #009688); color: var(--primary, #009688); background: rgba(0,150,136,0.05); }
[data-theme="dark"] .home-tab { background: #2a2a2a; border-color: var(--default-line, #404040); color: #cfd4d9; }
[data-theme="dark"] .home-tab:hover { color: #6fd3c8; border-color: #02b3a2; }
[data-theme="dark"] .home-tab.is-active { background: var(--primary, #009688); border-color: var(--primary, #009688); color: #fff; }
[data-theme="dark"] #widget-placements a[onclick^="openmodal("] { border-color: #4a4a4a; color: #aab2b9; }
@media (max-width: 575.98px) {
    .home-toolbar { flex-wrap: wrap; }
    .home-tabs { order: 2; flex: 1 1 100%; }
}
/* Home toolbar: widget filter dropdown */
.home-wfilter { flex: 0 0 auto; margin-left: auto; }
.home-wfilter + .home-customize { margin-left: 0; }
.home-wfilter__menu { width: 280px; padding: 12px 14px; }
.home-wfilter__note { font-size: 0.78rem; color: #6c757d; margin: 0 0 10px; line-height: 1.35; }
.home-wfilter__label { display: block; font-size: 0.72rem; font-weight: 600; text-transform: uppercase; letter-spacing: .4px; color: #6c757d; margin: 8px 0 4px; }
.home-wfilter__actions { display: flex; justify-content: space-between; align-items: center; margin-top: 12px; }
#home-wfilter-label { display: inline-block; max-width: 260px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; vertical-align: bottom; }
[data-theme="dark"] .home-wfilter__note,
[data-theme="dark"] .home-wfilter__label { color: #aab2b9; }
@media (max-width: 575.98px) {
    .home-wfilter__menu { width: calc(100vw - 32px); }
    #home-wfilter-label { max-width: 150px; }
}

/* ===== Home polish: one card style, calmer colour, clearer type ===== */
/* Cards: one soft elevation; no coloured side borders (colour is kept for status pills) */
.home-dashboard .wo-card,
.home-dashboard .wo-card.wo-chart-card,
.home-dashboard .tile {
    border: 1px solid rgba(16, 24, 40, 0.06);
    border-radius: 12px;
    -webkit-box-shadow: 0 1px 2px rgba(16, 24, 40, 0.05), 0 2px 6px rgba(16, 24, 40, 0.06);
    box-shadow: 0 1px 2px rgba(16, 24, 40, 0.05), 0 2px 6px rgba(16, 24, 40, 0.06);
}
.home-dashboard .wo-card:hover,
.home-dashboard .wo-card.wo-chart-card:hover {
    -webkit-box-shadow: 0 2px 4px rgba(16, 24, 40, 0.06), 0 6px 14px rgba(16, 24, 40, 0.08);
    box-shadow: 0 2px 4px rgba(16, 24, 40, 0.06), 0 6px 14px rgba(16, 24, 40, 0.08);
    transform: none;
}
[data-theme="dark"] .home-dashboard .wo-card,
[data-theme="dark"] .home-dashboard .tile { border-color: rgba(255, 255, 255, 0.06) !important; }

/* KPI strip: brand-tinted icons, the number is the hero */
.home-kpi-strip .wo-stat-icon[class*="bg-"] {
    width: 44px; height: 44px; font-size: 20px; border-radius: 12px;
    background: rgba(var(--primary-rgb, 0, 150, 136), 0.12) !important;
    color: var(--primary, #009688) !important;
}
.home-kpi-strip .wo-stat-value { font-size: 28px; line-height: 1.1; letter-spacing: -0.01em; margin-bottom: 2px; }
.home-kpi-strip .wo-stat-label { font-size: 12px; letter-spacing: 0.3px; color: #5f6b76; margin-bottom: 4px; }
.home-kpi-strip .wo-card.is-clickable { cursor: pointer; }
.home-kpi-strip .wo-card.is-clickable:focus-visible { outline: 2px solid var(--primary, #009688); outline-offset: 2px; }
[data-theme="dark"] .home-kpi-strip .wo-stat-label { color: #aab2b9; }
@media (max-width: 575.98px) {
    .home-kpi-strip .wo-stat-value { font-size: 22px; }
    .home-kpi-strip .wo-stat-label { font-size: 11px; }
}

/* Brand tints follow the tenant theme (teal_classic fallback) */
.home-dashboard .wo-stat-icon.bg-primary {
    background: rgba(var(--primary-rgb, 0, 150, 136), 0.14) !important;
    color: var(--primary, #009688) !important;
}
#widget-placements a[onclick^="openmodal("]:hover { background: rgba(var(--primary-rgb, 0, 150, 136), 0.05); }

/* Section headings: quieter, consistent rhythm */
.home-dashboard h4.line-head {
    font-size: 1.05rem;
    font-weight: 600;
    color: #2b3540 !important;
    margin: 28px 0 14px;
    padding-bottom: 8px;
    border-bottom: 1px solid rgba(16, 24, 40, 0.08);
}
.home-dashboard h4.line-head .fa { color: var(--primary, #009688); font-size: 0.95em; margin-right: 4px; }
[data-theme="dark"] .home-dashboard h4.line-head { color: #e0e0e0 !important; border-bottom-color: rgba(255, 255, 255, 0.08); }
.home-updated { font-size: 0.8rem; color: #6c757d; margin: 2px 0 0; }
.home-updated .fa { margin-right: 3px; }
[data-theme="dark"] .home-updated { color: #aab2b9; }

/* Pending Actions: compact "all caught up" and an honest load error */
#If_No_Action.is-empty #Pending_Summary_Row,
#If_No_Action.is-empty #Count_Pending,
#If_No_Action.is-empty #Pending_Action_Toggle_Icon,
#If_No_Action.is-empty .input-group:has(.pending-search-input),
#If_No_Action.is-empty .pending-search-input { display: none !important; }
.home-dashboard .tile:has(#If_No_Action.is-empty),
.home-dashboard .dashboard-quick-actions-card:has(.home-shortcuts-empty) { height: auto !important; }
.home-pending-caught-up,
.home-pending-failed { display: flex; align-items: center; gap: 8px; padding: 6px 4px; font-size: 0.88rem; }
.home-pending-caught-up { color: var(--success-back, #2e7d43); }
.home-pending-caught-up .fa { color: var(--success, #3a9a52); font-size: 1.1em; }
.home-pending-failed { color: #8a5a00; }
.home-shortcuts-empty { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; justify-content: space-between; font-size: 0.85rem; color: #6c757d; padding: 4px 0; }
[data-theme="dark"] .home-pending-caught-up { color: var(--success-hover, #9be3ad); }
[data-theme="dark"] .home-pending-failed { color: #ffd27a; }
[data-theme="dark"] .home-shortcuts-empty { color: #aab2b9; }

/* Widget grid empty state */
#widget-placements.is-empty [class*="col-"]:has(> a[onclick^="openmodal("]) { flex: 0 0 100%; max-width: 100%; }
#widget-placements.is-empty a[onclick^="openmodal("] { padding: 14px; }
.home-widgets-empty-hint { margin: 0 0 8px; color: #6c757d; font-size: 0.85rem; text-align: center; }
[data-theme="dark"] .home-widgets-empty-hint { color: #aab2b9; }
/* KPI context line ("212 Overdue") — status colour only where something needs action */
.home-kpi-strip .wo-stat-context { font-size: 12px; font-weight: 600; color: var(--danger-back, #b02a37); margin: 0 0 6px; }
[data-theme="dark"] .home-kpi-strip .wo-stat-context { color: var(--danger-hover, #ff9eaa); }

/* Live strips: status shown as a small dot instead of a heavy coloured side bar */
.home-dashboard .hwfl__stat,
.home-dashboard .hal__num {
    position: relative;
    border-left-width: 1px !important;
    border-left-color: rgba(15, 23, 42, 0.06) !important;
    padding-left: 20px;
}
.home-dashboard .hal__num { border-left-color: transparent !important; }
.home-dashboard .hwfl__stat::before,
.home-dashboard .hal__num::before {
    content: "";
    position: absolute;
    left: 8px;
    top: 13px;
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--c, #94a3b8);
}
.home-dashboard .hal__num::before { top: 10px; }
[data-theme="dark"] .home-dashboard .hwfl__stat { border-left-color: #3a3a3a !important; }

/* Pending Actions category chips: same soft palette as the KPI pills */
.home-dashboard .pending-summary-pill { box-shadow: none; font-weight: 600; }
.home-dashboard .pending-summary-pill.btn-info    { background: rgba(var(--info-rgb, 0, 199, 230), 0.12);  border-color: rgba(var(--info-rgb, 0, 199, 230), 0.40);  color: var(--info-back, #00708a); }
.home-dashboard .pending-summary-pill.btn-danger  { background: rgba(var(--danger-rgb, 255, 86, 106), 0.12);  border-color: rgba(var(--danger-rgb, 255, 86, 106), 0.40);  color: var(--danger-back, #b02a37); }
.home-dashboard .pending-summary-pill.btn-warning { background: rgba(var(--warning-rgb, 255, 200, 100), 0.20); border-color: rgba(var(--warning-rgb, 200, 140, 0), 0.40);   color: var(--alert-warning, #8a5a00); }
.home-dashboard .pending-summary-pill.btn-success { background: rgba(var(--success-rgb, 110, 204, 132), 0.16); border-color: rgba(var(--success-rgb, 110, 204, 132), 0.50); color: var(--success-back, #2e7d43); }
.home-dashboard .pending-summary-pill.btn-primary { background: rgba(var(--primary-rgb, 0, 150, 136), 0.12); border-color: rgba(var(--primary-rgb, 0, 150, 136), 0.35); color: #00695f; color: color-mix(in srgb, var(--primary, #009688) 70%, #000); }
.home-dashboard .pending-summary-pill.btn-secondary { background: rgba(108,117,125,0.10); border-color: rgba(108,117,125,0.35); color: #495057; }
.home-dashboard .pending-summary-pill.active { box-shadow: 0 0 0 2px rgba(var(--primary-rgb, 0, 150, 136), 0.45); }
[data-theme="dark"] .home-dashboard .pending-summary-pill.btn-info    { background: rgba(var(--info-rgb, 0, 199, 230), 0.20);  color: var(--info-hover, #7fdcef); }
[data-theme="dark"] .home-dashboard .pending-summary-pill.btn-danger  { background: rgba(var(--danger-rgb, 255, 86, 106), 0.20);  color: var(--danger-hover, #ff9eaa); }
[data-theme="dark"] .home-dashboard .pending-summary-pill.btn-warning { background: rgba(var(--warning-rgb, 255, 200, 100), 0.20); color: var(--warning-hover, #ffd27a); }
[data-theme="dark"] .home-dashboard .pending-summary-pill.btn-success { background: rgba(var(--success-rgb, 110, 204, 132), 0.20); color: var(--success-hover, #9be3ad); }
.home-hint-icon { color: #9aa5ae; font-size: 0.85em; margin-left: 2px; cursor: help; }
/* KPI strip: overdue line is a link to the list's own Overdue view */
.home-kpi-strip a.wo-stat-context { display: inline-block; text-decoration: none; }
.home-kpi-strip a.wo-stat-context:hover { text-decoration: underline; }
/* CM requests: not work orders yet, so shown apart from the total */
.home-kpi-strip .wo-stat-extra {
    display: inline-flex; align-items: center; gap: 6px; margin-top: 8px;
    padding: 3px 10px; border: 1px dashed rgba(108, 117, 125, 0.45); border-radius: 999px;
    font-size: 0.75rem; font-weight: 600; color: #495057; text-decoration: none;
}
.home-kpi-strip .wo-stat-extra:hover { border-color: var(--primary, #009688); color: var(--primary, #009688); text-decoration: none; }
[data-theme="dark"] .home-kpi-strip .wo-stat-extra { color: #cfd4d9; border-color: #555; }
/* Wraps on narrow cards: a rounded box, not a stretched oval */
.home-kpi-strip .wo-stat-extra { max-width: 100%; border-radius: 10px; line-height: 1.3; }

/* Widget legends: keep each colour dot next to its label (rows hold dot/label cell pairs) */
.home-dashboard .widget-modern [id^="legend-table"] tr {
    display: grid;
    grid-template-columns: repeat(auto-fill, 18px minmax(90px, 1fr));
    align-items: center;
    column-gap: 2px;
}
.home-dashboard .widget-modern [id^="legend-table"] td { padding: 2px 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.home-dashboard .widget-modern .legend-color { width: 10px; height: 10px; margin-right: 0; }

/* Home: icon spacing in the page title, gentle fade when switching tabs */
.home-dashboard .app-title h1 > .fa { margin-right: 8px; }
.home-tab-enter { animation: home-tab-enter 0.22s ease-out both; }
@keyframes home-tab-enter { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .home-tab-enter { animation: none; } }

/* ===== Home: yCloudx welcome after login (brand animation, follows the tenant theme) ===== */
/* About 2.8s end to end: the brand builds by ~1s, the greeting lands by ~1.5s, it clears at 2.25s. */
#ycx-welcome {
    /* Ink and tints come from the tenant primary so non-teal themes don't get a teal splash */
    --ycxw-ink: #1d2327; --ycxw-muted: #6b7378;
    position: fixed; inset: 0; z-index: 10000; cursor: pointer;
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    padding: 24px; text-align: center;
    background:
        radial-gradient(110% 80% at 50% 40%, rgba(var(--primary-rgb, 0, 150, 136), 0.04) 0%, rgba(var(--primary-rgb, 0, 150, 136), 0.16) 100%),
        #fff;
    color: var(--ycxw-ink);
    clip-path: circle(150% at 50% 42%);
    animation: ycxw-exit .6s cubic-bezier(.7,0,.3,1) 2.25s forwards;
}
#ycx-welcome[hidden] { display: none; }
#ycx-welcome.ycxw-skip { animation: ycxw-exit .4s cubic-bezier(.7,0,.3,1) forwards; }
@keyframes ycxw-exit { to { clip-path: circle(0% at 50% 42%); } }
#ycx-welcome .ycxw-mark { width: min(200px, 44vw); animation: ycxw-lift .6s cubic-bezier(.2,.8,.2,1) .9s both; }
#ycx-welcome svg { width: 100%; height: auto; display: block; overflow: visible; }
#ycx-welcome .ycxw-brand { fill: var(--primary, #009688); }
#ycx-welcome .ycxw-rings { stroke: var(--primary, #009688); }
@keyframes ycxw-lift { from { transform: translateY(40px) scale(1.25) } to { transform: none } }
#ycx-welcome .ycxw-lobe, #ycx-welcome .ycxw-node, #ycx-welcome .ycxw-ring { transform-box: fill-box; transform-origin: center; }
#ycx-welcome .ycxw-lobe { animation: ycxw-puff .45s cubic-bezier(.34,1.56,.64,1) both; }
#ycx-welcome .ycxw-lobe:nth-child(1) { animation-delay: .03s } #ycx-welcome .ycxw-lobe:nth-child(2) { animation-delay: .07s }
#ycx-welcome .ycxw-lobe:nth-child(3) { animation-delay: .11s } #ycx-welcome .ycxw-lobe:nth-child(4) { animation-delay: .15s }
#ycx-welcome .ycxw-lobe:nth-child(5) { animation-delay: .19s } #ycx-welcome .ycxw-lobe.ycxw-bump { animation-delay: .23s }
#ycx-welcome .ycxw-node { animation: ycxw-pop .35s ease-out both; }
#ycx-welcome .ycxw-n1 { animation-delay: .35s } #ycx-welcome .ycxw-n2 { animation-delay: .43s }
#ycx-welcome .ycxw-n3 { animation-delay: .51s } #ycx-welcome .ycxw-n4 { animation-delay: .59s }
#ycx-welcome .ycxw-edges { stroke-dasharray: 1; animation: ycxw-draw .5s cubic-bezier(.65,0,.35,1) .4s both; }
#ycx-welcome .ycxw-ring { opacity: 0; animation: ycxw-ring .7s ease-out .8s both; }
@keyframes ycxw-puff { from { transform: scale(0); opacity: 0 } to { transform: scale(1); opacity: 1 } }
@keyframes ycxw-pop { 0% { transform: scale(0) } 70% { transform: scale(1.2) } 100% { transform: scale(1) } }
@keyframes ycxw-draw { from { stroke-dashoffset: 1 } to { stroke-dashoffset: 0 } }
@keyframes ycxw-ring { from { transform: scale(1); opacity: .8 } to { transform: scale(3.2); opacity: 0 } }
#ycx-welcome .ycxw-hello { margin: 28px 0 0; font-size: clamp(15px, 2.6vw, 18px); font-weight: 400; color: var(--ycxw-muted);
    animation: ycxw-rise .45s cubic-bezier(.2,.8,.2,1) 1.05s both; }
#ycx-welcome .ycxw-name { margin: 6px 0 0; font-size: clamp(30px, 6.5vw, 52px); font-weight: 600; letter-spacing: -.02em; line-height: 1.1; color: var(--ycxw-ink); }
#ycx-welcome .ycxw-name span { display: inline-block; white-space: pre; animation: ycxw-rise .45s cubic-bezier(.2,.8,.2,1) both; }
#ycx-welcome .ycxw-name .ycxw-accent { color: var(--primary, #009688); }
@keyframes ycxw-rise { from { transform: translateY(.5em); opacity: 0 } to { transform: none; opacity: 1 } }
#ycx-welcome .ycxw-sync { margin-top: 26px; display: flex; flex-direction: column; align-items: center; gap: 10px; animation: ycxw-fade .4s ease 1.4s both; }
#ycx-welcome .ycxw-bar { width: 180px; height: 3px; border-radius: 3px; background: rgba(var(--primary-rgb, 0, 150, 136), .18); overflow: hidden; }
#ycx-welcome .ycxw-bar i { display: block; height: 100%; background: var(--primary, #009688); transform-origin: left; animation: ycxw-fill .7s cubic-bezier(.5,0,.2,1) 1.45s both; }
#ycx-welcome .ycxw-status { font-size: 11px; font-weight: 500; letter-spacing: .24em; text-transform: uppercase; color: var(--ycxw-muted); }
@keyframes ycxw-fade { from { opacity: 0 } to { opacity: 1 } }
@keyframes ycxw-fill { from { transform: scaleX(0) } to { transform: scaleX(1) } }
#ycx-welcome .ycxw-hint { position: absolute; bottom: calc(20px + env(safe-area-inset-bottom, 0px)); font-size: 11px; color: var(--ycxw-muted); opacity: .7; animation: ycxw-fade .4s ease .6s both; }
[data-theme="dark"] #ycx-welcome {
    --ycxw-ink: #eceff1; --ycxw-muted: #a3abb0;
    background:
        radial-gradient(110% 80% at 50% 40%, rgba(var(--primary-rgb, 0, 150, 136), 0.14) 0%, rgba(var(--primary-rgb, 0, 150, 136), 0.04) 100%),
        #161a1b;
}
@media (prefers-reduced-motion: reduce) {
    #ycx-welcome, #ycx-welcome * { animation-duration: .01s !important; animation-delay: 0s !important; }
    #ycx-welcome { animation: ycxw-fadeout .4s ease 1.6s forwards !important; clip-path: none; }
    @keyframes ycxw-fadeout { to { opacity: 0; visibility: hidden } }
}
@media print { #ycx-welcome { display: none !important; } }
/* Cloudy mascot in the empty widget grid */
.home-widgets-empty-hint { display: flex; flex-direction: column; align-items: center; gap: 6px; }
.home-cloudy { width: 84px; height: auto; overflow: visible; }
.home-cloudy__fill { fill: var(--primary, #00b1a7); }
.home-cloudy__body { transform-box: fill-box; transform-origin: 50% 100%; animation: home-cloudy-float 3.2s ease-in-out infinite; }
.home-cloudy__shadow { transform-box: fill-box; transform-origin: center; animation: home-cloudy-shadow 3.2s ease-in-out infinite; }
.home-cloudy__eye { transform-box: fill-box; transform-origin: center; animation: home-cloudy-blink 4.8s infinite; }
@keyframes home-cloudy-float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-50px); } }
@keyframes home-cloudy-shadow { 0%, 100% { transform: scaleX(1); opacity: .9; } 50% { transform: scaleX(.72); opacity: .45; } }
@keyframes home-cloudy-blink { 0%, 44%, 50%, 100% { transform: scaleY(1); } 47% { transform: scaleY(.08); } }
@media (prefers-reduced-motion: reduce) { .home-cloudy__body, .home-cloudy__shadow, .home-cloudy__eye { animation: none; } }
/* Zero-value cards: category badges fade instead of signalling a problem */
.home-dashboard .wo-card.is-zero .badge,
.home-dashboard .wo-card.is-zero .wo-card-badge { background: transparent !important; color: #9aa5ae !important; border: 1px solid rgba(108, 117, 125, 0.3) !important; }

/* "At a glance" strip */
.home-glance-card { display: block; color: inherit; text-decoration: none !important; cursor: pointer; }
.home-glance-card:hover { color: inherit; }
.home-glance-card:focus-visible { outline: 2px solid var(--primary, #009688); outline-offset: 2px; }
.home-glance .home-glance-sub { font-size: 12px; color: #6c757d; margin-top: 2px; }
.home-glance .is-alert:not(.is-zero) .wo-stat-value { color: var(--danger-back, #b02a37); }
[data-theme="dark"] .home-glance .home-glance-sub { color: #aab2b9; }
[data-theme="dark"] .home-glance .is-alert:not(.is-zero) .wo-stat-value { color: var(--danger-hover, #ff9eaa); }
.home-glance-flash { animation: home-glance-flash 1.2s ease-out; }
@keyframes home-glance-flash { 0% { box-shadow: 0 0 0 3px rgba(var(--primary-rgb, 0, 150, 136), 0.55); } 100% { box-shadow: 0 0 0 3px rgba(var(--primary-rgb, 0, 150, 136), 0); } }
@media (prefers-reduced-motion: reduce) { .home-glance-flash { animation: none; } }
/* Work Orders tab: the detailed cards sit right under the section heading */
.home-wo-kpis { margin-top: 4px; }

/* ===== Home: section cards (Assets, Lifecycle, Spare Parts, Asset Operations) match the soft style ===== */
.home-dashboard .wo-stat-icon-assets.bg-primary { background: rgba(var(--primary-rgb, 0, 150, 136), 0.14) !important; color: var(--primary, #009688) !important; }
.home-dashboard .wo-stat-icon-assets.bg-info    { background: rgba(0, 199, 230, 0.14) !important;  color: #0097b2 !important; }
.home-dashboard .wo-stat-icon-assets.bg-success { background: rgba(110, 204, 132, 0.18) !important; color: #3a9a52 !important; }
.home-dashboard .wo-stat-icon-assets.bg-warning { background: rgba(255, 200, 100, 0.24) !important; color: #b07a00 !important; }
.home-dashboard .wo-stat-icon-assets.bg-danger  { background: rgba(255, 86, 106, 0.14) !important;  color: #d6334a !important; }
.home-dashboard .wo-stat-icon-assets.bg-secondary { background: rgba(108, 117, 125, 0.12) !important; color: #5a6268 !important; }
.home-dashboard .wo-card-badge[class*="bg-"] { border: 1px solid transparent; font-weight: 600; }
.home-dashboard .wo-card-badge.bg-primary { background: rgba(var(--primary-rgb, 0, 150, 136), 0.12) !important; border-color: rgba(var(--primary-rgb, 0, 150, 136), 0.35); color: #00695f !important; }
.home-dashboard .wo-card-badge.bg-info    { background: rgba(0, 199, 230, 0.12) !important;  border-color: rgba(0, 199, 230, 0.40);  color: #00708a !important; }
.home-dashboard .wo-card-badge.bg-success { background: rgba(110, 204, 132, 0.16) !important; border-color: rgba(110, 204, 132, 0.50); color: #2e7d43 !important; }
.home-dashboard .wo-card-badge.bg-warning { background: rgba(255, 200, 100, 0.20) !important; border-color: rgba(200, 140, 0, 0.40);   color: #8a5a00 !important; }
.home-dashboard .wo-card-badge.bg-danger  { background: rgba(255, 86, 106, 0.12) !important;  border-color: rgba(255, 86, 106, 0.40);  color: #b02a37 !important; }
.home-dashboard .wo-card-badge.bg-secondary { background: rgba(108, 117, 125, 0.10) !important; border-color: rgba(108, 117, 125, 0.35); color: #495057 !important; }
[data-theme="dark"] .home-dashboard .wo-stat-icon-assets[class*="bg-"] { filter: brightness(1.25); }
[data-theme="dark"] .home-dashboard .wo-card-badge.bg-success { color: #9be3ad !important; }
[data-theme="dark"] .home-dashboard .wo-card-badge.bg-danger  { color: #ff9eaa !important; }
[data-theme="dark"] .home-dashboard .wo-card-badge.bg-warning { color: #ffd27a !important; }
[data-theme="dark"] .home-dashboard .wo-card-badge.bg-info    { color: #7fdcef !important; }
/* Card titles inside KPI rows read like the other KPI labels instead of large wrapping capitals */
.home-dashboard .wo-card-kpi-text .wo-card-title { font-size: 12px; font-weight: 600; letter-spacing: 0.3px; text-transform: uppercase; color: #5f6b76; line-height: 1.3; }
[data-theme="dark"] .home-dashboard .wo-card-kpi-text .wo-card-title { color: #aab2b9; }

/* Work Performance date range: wide enough for "20 Sep 2026 - 19 Oct 2026" */
.home-dashboard #homeWpDateRange { min-width: 178px; }

/* Widgets: list tables fit the card (last column stays visible) */
.home-dashboard .widget-modern table.widget-list-sortable { table-layout: fixed; width: 100% !important; }
.home-dashboard .widget-modern table.widget-list-sortable th,
.home-dashboard .widget-modern table.widget-list-sortable td { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.home-dashboard .widget-modern table.widget-list-sortable th:last-child,
.home-dashboard .widget-modern table.widget-list-sortable td:last-child { width: 64px; text-align: right; }
/* Quarter-width widgets: legend stays compact so the chart keeps most of the card */
.home-dashboard [class*="col-lg-3"] .widget-modern #legend-container,
.home-dashboard [class*="col-lg-2"] .widget-modern #legend-container { max-height: 58px; }
[data-theme="dark"] .bim-level-tabs button.is-active,
[data-theme="dark"] .bim-level-tabs button.is-active:hover {
    background: #009688;
    border-color: #009688;
    color: #fff;
}

/* Phone: Level Section sits under the viewer, same surface as the desktop dock. */
@media (max-width: 600px) {
    :is(html[data-theme="dark"], html [data-theme="dark"]) .bim-model-page .bim-viewer-layout--level-open > .bim-viewer-level-sidebar.bim-viewer-level-sidebar--open {
        background: #2d2d2d;
        border-color: #555;
    }
}

[data-theme="dark"] .bim-level-tabs button.is-active,
[data-theme="dark"] .bim-level-tabs button.is-active:hover {
    background: #009688;
    border-color: #009688;
    color: #fff;
}

/* Spare parts stockroom: canonical app dark surfaces; semantic stock/stage colors stay distinct. */
[data-theme="dark"] .spm-page {
    --spm-bg: #2d2d2d;
    --spm-soft: #262626;
    --spm-hover: #333;
    --spm-line: #3a3a3a;
    --spm-text: #fff;
    --spm-muted: #c2c2c2;
    --spm-accent: var(--primary, #009688);
    --spm-link: #02b3a2;
    --spm-teal: #49ccb0;
    --spm-amber: #f0b751;
    --spm-red: #f0858e;
    --spm-blue: #87b9ec;
    --spm-purple: #bb9be8;
    --spm-shadow: 0 1px 2px rgba(0, 0, 0, .4), 0 4px 16px rgba(0, 0, 0, .2);
    --spm-shadow-up: 0 8px 24px rgba(0, 0, 0, .4);
}
[data-theme="dark"] .spm-page.is-focus { background: #1f1f1f; }
[data-theme="dark"] .spm-page .spm-view-switch :is(button,a):not(.is-active):hover,
[data-theme="dark"] .spm-page .spm-icon-btn:hover,
[data-theme="dark"] .spm-page .spm-motion-btn:hover { background: var(--spm-hover); }
[data-theme="dark"] .spm-page .spm-view-switch a { color: var(--spm-muted); }
[data-theme="dark"] .spm-page .spm-view-switch a:hover,
[data-theme="dark"] .spm-page .spm-request-part:hover,
[data-theme="dark"] .spm-page .spm-message button:hover { color: #02d9c4; }
[data-theme="dark"] .spm-page .spm-action,
[data-theme="dark"] .spm-page .spm-view-switch .is-active { color: #fff; }
[data-theme="dark"] .spm-page .spm-view-switch [data-mode="attention"].is-active { color: #1f1f1f; }
[data-theme="dark"] .spm-page .spm-filters select,
[data-theme="dark"] .spm-page .spm-arrange select { color-scheme: dark; }
[data-theme="dark"] .spm-page .spm-filters select:disabled,
[data-theme="dark"] .spm-page .spm-arrange select:disabled,
[data-theme="dark"] .spm-page .spm-search input:disabled { background: #423e3e; color: #c2c2c2; }
[data-theme="dark"] .spm-page .spm-table th,
[data-theme="dark"] .spm-page .spm-table td { border-bottom-color: var(--table-line, var(--default-line, #808080)); }

/* Meter 3D Map: canonical dark surfaces; status, heat and scene tokens stay distinct (read by meter_map_3d.js). */
[data-theme="dark"] .mtm-page {
    --mtm-bg: #2d2d2d;
    --mtm-soft: #262626;
    --mtm-hover: #333;
    --mtm-line: #3a3a3a;
    --mtm-text: #fff;
    --mtm-muted: #c2c2c2;
    --mtm-accent: var(--primary, #009688);
    --mtm-link: #02b3a2;
    --mtm-ok: #49ccb0;
    --mtm-due: #87b9ec;
    --mtm-overdue: #f0b751;
    --mtm-alarm: #f0858e;
    --mtm-nodata: #8b8b8b;
    --mtm-plus: #49ccb0;
    --mtm-minus: #f0858e;
    --mtm-heat-low: #2f6f66;
    --mtm-heat-mid: #f0b751;
    --mtm-heat-high: #f0858e;
    --mtm-slab: #4a4a4a;
    --mtm-edge: #6b6b6b;
    --mtm-ground: #232323;
    --mtm-grid: #333;
    --mtm-pillar: #6b6b6b;
    --mtm-stage: linear-gradient(180deg, #262626 0%, #1f1f1f 100%);
    --mtm-shadow: 0 1px 2px rgba(0, 0, 0, .4), 0 4px 16px rgba(0, 0, 0, .2);
}
[data-theme="dark"] .mtm-page.is-focus { background: #1f1f1f; }
[data-theme="dark"] .mtm-page .mtm-view-switch button:not(.is-active):hover,
[data-theme="dark"] .mtm-page .mtm-icon-btn:hover,
[data-theme="dark"] .mtm-page .mtm-motion-btn:hover,
[data-theme="dark"] .mtm-page .mtm-list-link:hover { background: var(--mtm-hover); }
[data-theme="dark"] .mtm-page .mtm-list-link:hover,
[data-theme="dark"] .mtm-page .mtm-link:hover { color: #02d9c4; }
[data-theme="dark"] .mtm-page .mtm-filters select { color-scheme: dark; }
[data-theme="dark"] .mtm-page .mtm-filters select:disabled { background: #423e3e; color: #c2c2c2; }
[data-theme="dark"] .mtm-page .mtm-world-label,
[data-theme="dark"] .mtm-page .mtm-tooltip { box-shadow: 0 4px 14px rgba(0, 0, 0, .45); }
[data-theme="dark"] .mtm-page .mtm-bim-model { color-scheme: dark; }
[data-theme="dark"] .mtm-page .mtm-bim-pin { box-shadow: 0 0 0 1px rgba(0, 0, 0, .6), 0 3px 10px rgba(0, 0, 0, .6); }
[data-theme="dark"] .mtm-page .mtm-bim-pin:hover,
[data-theme="dark"] .mtm-page .mtm-bim-pin.is-selected { box-shadow: 0 0 0 3px var(--mtm-accent), 0 4px 14px rgba(0, 0, 0, .7); }

/* Live Production Floor: custom dark colors follow the canonical app palette. */
[data-theme="dark"] .olf {
    --olf-surface: #2d2d2d;
    --olf-text: #fff;
    --olf-muted: #c2c2c2;
    --olf-line: #3a3a3a;
    --olf-hover: #333;
    --olf-stage: #1f1f1f;
    --olf-primary: var(--primary, #009688);
    --olf-link: #02b3a2;
    --olf-green: #49ccb0;
    --olf-amber: #f0b751;
    --olf-red: #f0858e;
    --olf-purple: #bb9be8;
    --olf-shadow: 0 1px 2px rgba(0,0,0,.4), 0 4px 16px rgba(0,0,0,.2);
    --olf-shadow-up: 0 8px 24px rgba(0,0,0,.4);
    color-scheme: dark;
}
[data-theme="dark"] .olf :is(input,select,textarea) {
    background: #262626;
    border-color: #1c1b1b;
    color: #fff;
}
[data-theme="dark"] .olf :is(input,select,textarea):disabled {
    background: #423e3e;
    color: #c2c2c2;
}
[data-theme="dark"] .olf :is(input,select,textarea):focus-visible { border-color: var(--primary,#009688); }
[data-theme="dark"] .olf :is(.olf-floor-caption,.olf-scene-hint) { background: #262626; }
[data-theme="dark"] .olf .olf-oee { background: #262626; }
[data-theme="dark"] .olf .olf-oee-main > strong { color: var(--olf-link); }
[data-theme="dark"] .olf .olf-detail-links a { color: #02b3a2; }
[data-theme="dark"] .olf .olf-detail-links a:hover { color: #02d9c4; }
[data-theme="dark"] .olf :is(th,td) { border-color: var(--table-line,var(--default-line,#808080)); }
[data-theme="dark"] .olf .olf-machine-body {
    background: linear-gradient(135deg,#333,#262626);
    border-color: #3a3a3a;
    box-shadow: 9px 7px 0 #1c1b1b;
}
[data-theme="dark"] .olf .olf-machine-body::before {
    background: #333;
    border-color: #3a3a3a;
}
[data-theme="dark"] .olf .olf-machine-window { background: #1f1f1f; border-color: #3a3a3a; }
[data-theme="dark"] .olf .olf-machine-window i { border-color: var(--olf-green); }
[data-theme="dark"] .olf .olf-machine-feed {
    background: repeating-linear-gradient(90deg,#333 0,#333 4px,#262626 4px,#262626 8px);
    border-color: #3a3a3a;
}
[data-theme="dark"] .olf .olf-machine-feed i { background: #c2c2c2; }
[data-theme="dark"] .olf .olf-machine-shadow { background: rgba(0,0,0,.3); }
[data-theme="dark"] .olf .olf-machine[data-state="producing"] .olf-machine-lamp {
    background: var(--olf-green);
    box-shadow: 0 0 7px color-mix(in srgb,var(--olf-green) 50%,transparent);
}
[data-theme="dark"] .olf .olf-machine[data-state="breakdown"] .olf-machine-lamp { background: var(--olf-red); }
[data-theme="dark"] .olf .olf-machine:is([data-state="paused"],[data-state="changeover"]) .olf-machine-lamp { background: var(--olf-amber); }

/* ---- Booking Overview: period tags, weekday x hour heatmap, load motion ---- */
.booking-ov .booking-ov-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
}
.booking-ov .booking-ov-head > span:first-child {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.booking-ov-period {
    flex-shrink: 0;
    padding: 2px 8px;
    border-radius: 10px;
    font-size: 0.68rem;
    font-weight: 600;
    color: var(--primary);
    background: color-mix(in srgb, var(--primary) 10%, transparent);
}
.booking-ov-viewall {
    flex-shrink: 0;
    font-size: 0.78rem;
    font-weight: 600;
}
.booking-ov-kpi-sub {
    font-size: 11px;
}
.booking-ov-row {
    cursor: pointer;
}

.booking-ov-heat {
    min-height: 190px;
}
.booking-ov-heat-grid {
    display: grid;
    grid-template-columns: 30px repeat(24, minmax(0, 1fr));
    grid-auto-rows: 22px;
    gap: 2px;
    align-items: center;
}
.booking-ov-heat-day,
.booking-ov-heat-hour {
    font-size: 0.62rem;
    opacity: 0.7;
    white-space: nowrap;
    overflow: hidden;
}
.booking-ov-heat-cell {
    height: 100%;
    border-radius: 3px;
    background: rgba(0, 0, 0, 0.05);
    animation: bookingOvCellIn 0.35s ease-out backwards;
    animation-delay: calc(var(--d, 0) * 3ms);
}
.booking-ov-heat-cell:hover {
    outline: 2px solid var(--primary);
    outline-offset: -1px;
}
.booking-ov-heat-cell[data-lvl="1"] { background: color-mix(in srgb, var(--primary) 18%, transparent); }
.booking-ov-heat-cell[data-lvl="2"] { background: color-mix(in srgb, var(--primary) 34%, transparent); }
.booking-ov-heat-cell[data-lvl="3"] { background: color-mix(in srgb, var(--primary) 52%, transparent); }
.booking-ov-heat-cell[data-lvl="4"] { background: color-mix(in srgb, var(--primary) 72%, transparent); }
.booking-ov-heat-cell[data-lvl="5"] { background: var(--primary); }
.booking-ov-heat-empty {
    padding-top: 70px;
}

/* Entrance: transform only (never opacity 0) so content stays visible if animations are paused,
   e.g. a background tab; backwards fill so .kpi-card hover transforms still apply afterwards. */
.booking-ov .kpi-card,
.booking-ov .booking-ov-tile {
    animation: bookingOvIn 0.45s ease-out backwards;
    animation-delay: calc(var(--i, 0) * 60ms);
}
@keyframes bookingOvIn {
    from { transform: translateY(8px); }
    to { transform: none; }
}
@keyframes bookingOvCellIn {
    from { transform: scale(0.6); }
    to { transform: none; }
}

/* Skeleton while the overview XHR is in flight (reuses Home widget shimmer). */
.booking-ov.is-loading .kpi-value,
.booking-ov.is-loading .booking-ov-chart,
.booking-ov.is-loading .booking-ov-heat {
    color: transparent;
    border-radius: 8px;
    background: linear-gradient(90deg, #eef1f4 0%, #f7f8fa 45%, #eef1f4 100%);
    background-size: 200% 100%;
    animation: hw-skel-shimmer 1.2s ease-in-out infinite;
}
.booking-ov.is-loading .kpi-value {
    max-width: 90px;
}
.booking-ov.is-loading .booking-ov-chart canvas {
    visibility: hidden;
}

[data-theme="dark"] .booking-ov-heat-cell[data-lvl="0"] {
    background: rgba(255, 255, 255, 0.06);
}
[data-theme="dark"] .booking-ov.is-loading .kpi-value,
[data-theme="dark"] .booking-ov.is-loading .booking-ov-chart,
[data-theme="dark"] .booking-ov.is-loading .booking-ov-heat {
    background: linear-gradient(90deg, #333 0%, #3f3f3f 45%, #333 100%);
    background-size: 200% 100%;
}

@media (prefers-reduced-motion: reduce) {
    .booking-ov .kpi-card,
    .booking-ov .booking-ov-tile,
    .booking-ov-heat-cell,
    .booking-ov.is-loading .kpi-value,
    .booking-ov.is-loading .booking-ov-chart,
    .booking-ov.is-loading .booking-ov-heat {
        animation: none;
    }
}

/* ===== Cost & Budget Report (Finance/Cost_Report_Preview) — dark mode (screen only; print stays light) ===== */
@media screen {
    [data-theme="dark"] .cost-report-page .crp-sheet {
        --crp-ink: #e4e4e4;
        --crp-muted: #a8a8a8;
        --crp-line: #4a4a4a;
        --crp-soft: #3a3a3a;
        --crp-bad: #ef6c6c;
        --crp-warn: #e0a84a;
        background: #333;
        box-shadow: 0 6px 24px rgba(0, 0, 0, 0.4);
    }
    [data-theme="dark"] .cost-report-page .crp-svg-planned {
        stroke: #8e99f3;
    }
    [data-theme="dark"] .cost-report-page .crp-legend__swatch--planned {
        border-top-color: #8e99f3;
    }
    [data-theme="dark"] .cost-report-page .crp-toolbar__label {
        color: #a8a8a8;
    }
    /* Client letterheads are designed for white paper */
    [data-theme="dark"] .cost-report-page .crp-header__logo img {
        background: #fff;
        padding: 4px 8px;
        border-radius: 4px;
    }
}

/* ==========================================================================
   Assets_Sum — KPI strip, share / PM coverage cells, composition at a glance
   ========================================================================== */
.asum-kpis,
.asum-glance,
#sampleTable {
    --asum-card: #fff;
    --asum-line: #e9ecef;
    --asum-text: #2c3e50;
    --asum-muted: #6c757d;
    --asum-accent: var(--primary, #009688);
    --asum-track: #edf1f2;
    --asum-ease: cubic-bezier(0.22, 1, 0.36, 1);
}
[data-theme="dark"] .asum-kpis,
[data-theme="dark"] .asum-glance,
[data-theme="dark"] #sampleTable {
    --asum-card: #2c2c2c;
    --asum-line: #3a3a3a;
    --asum-text: #e5e7eb;
    --asum-muted: #a1a7ab;
    --asum-track: #3a3a3a;
}

.asum-kpis {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 0.75rem;
    margin: 0.75rem 0 1rem;
}
.asum-kpi {
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding: 0.7rem 0.9rem;
    background: var(--asum-card);
    border: 1px solid var(--asum-line);
    border-left: 3px solid var(--asum-accent);
    border-radius: 12px;
    color: var(--asum-text);
    text-decoration: none;
    animation: asum-rise 0.4s var(--asum-ease) both;
    animation-delay: calc(var(--order, 0) * 35ms);
    transition: transform 0.18s var(--asum-ease), box-shadow 0.18s var(--asum-ease);
}
a.asum-kpi:hover,
a.asum-kpi:focus-visible {
    color: var(--asum-text);
    text-decoration: none;
    transform: translateY(-2px);
    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.08);
}
a.asum-kpi:focus-visible,
.asum-glance-row:focus-visible,
.asum-glance-all:focus-visible {
    outline: none;
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--asum-accent) 35%, transparent);
}
.asum-kpi--warn { border-left-color: var(--warning, #ffc107); }
.asum-kpi--ok { border-left-color: var(--success, #28a745); }
.asum-kpi-label {
    font-size: 0.7rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.3px;
    color: var(--asum-muted);
}
.asum-kpi-value {
    font-size: 1.35rem;
    font-weight: 700;
    line-height: 1.15;
    font-variant-numeric: tabular-nums;
}
.asum-kpi-value small {
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--asum-muted);
}
.asum-kpi-sub {
    font-size: 0.72rem;
    color: var(--asum-muted);
}

.asum-num { font-variant-numeric: tabular-nums; }
.asum-share {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    min-width: 110px;
}
.asum-share-bar {
    flex: 1 1 auto;
    height: 6px;
    border-radius: 3px;
    background: var(--asum-track);
    overflow: hidden;
}
.asum-share-bar i,
.asum-glance-bar i {
    display: block;
    height: 100%;
    border-radius: inherit;
    background: var(--asum-accent);
    transform-origin: left center;
    animation: app-bar-grow 0.9s var(--asum-ease) both;
}
.asum-share-val {
    flex: 0 0 3.2rem;
    text-align: right;
    font-size: 0.8rem;
    font-variant-numeric: tabular-nums;
}

.asum-pm {
    --c: var(--secondary, #6c757d);
    display: inline-block;
    min-width: 3.4rem;
    padding: 1px 8px;
    border-radius: 999px;
    font-size: 0.78rem;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
    color: var(--c);
    background: color-mix(in srgb, var(--c) 14%, transparent);
}
.asum-pm--high { --c: var(--success, #28a745); }
.asum-pm--mid { --c: #c78a00; }
.asum-pm--low { --c: var(--danger, #dc3545); }
.asum-pm-count {
    color: var(--asum-muted);
    font-variant-numeric: tabular-nums;
}
[data-theme="dark"] .asum-pm--mid { --c: var(--warning, #ffc107); }

#sampleTable tfoot.asum-tfoot th {
    font-weight: 700;
    border-top: 2px solid var(--asum-accent);
    font-variant-numeric: tabular-nums;
}

.asum-glance-sub {
    font-size: 0.8rem;
    color: var(--asum-muted);
    margin: 0 0 0.9rem;
}
.asum-glance-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
    gap: 0.75rem;
}
.asum-glance-card {
    background: var(--asum-card);
    border: 1px solid var(--asum-line);
    border-radius: 12px;
    padding: 0.75rem 0.9rem 0.6rem;
    animation: asum-rise 0.4s var(--asum-ease) both;
    animation-delay: calc(var(--order, 0) * 35ms);
}
.asum-glance-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
    margin-bottom: 0.4rem;
    color: var(--asum-text);
}
.asum-glance-all {
    font-size: 0.75rem;
    white-space: nowrap;
}
.asum-glance-all .fa { transition: transform 0.15s var(--asum-ease); }
.asum-glance-all:hover .fa { transform: translateX(3px); }
.asum-glance-list {
    list-style: none;
    margin: 0;
    padding: 0;
}
.asum-glance-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    grid-template-areas: "label count" "bar bar";
    column-gap: 0.5rem;
    row-gap: 3px;
    padding: 5px 6px;
    margin: 0 -6px;
    border-radius: 8px;
    color: var(--asum-text);
    text-decoration: none;
    transition: background-color 0.15s var(--asum-ease);
}
.asum-glance-row:hover {
    color: var(--asum-text);
    text-decoration: none;
    background: color-mix(in srgb, var(--asum-accent) 8%, transparent);
}
.asum-glance-label {
    grid-area: label;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 0.84rem;
}
.asum-glance-row.is-blank .asum-glance-label {
    font-style: italic;
    color: var(--asum-muted);
}
.asum-glance-count {
    grid-area: count;
    font-size: 0.84rem;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
}
.asum-glance-count small {
    font-weight: 400;
    color: var(--asum-muted);
}
.asum-glance-bar {
    grid-area: bar;
    height: 4px;
    border-radius: 2px;
    background: var(--asum-track);
    overflow: hidden;
}
.asum-glance-row.is-blank .asum-glance-bar i { background: var(--asum-muted); }
.asum-glance-more {
    font-size: 0.75rem;
    color: var(--asum-muted);
    margin: 0.35rem 0 0;
}

.asum-toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 0.5rem 1rem;
    margin-bottom: 0.75rem;
}
.asum-filter {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    margin: 0;
    font-size: 0.85rem;
    color: var(--asum-muted, #6c757d);
}
.asum-filter select {
    width: auto;
    min-width: 11rem;
}
.asum-export { margin: 0; }
.asum-export .btn.disabled { pointer-events: none; }
.asum-muted { color: var(--asum-muted, #6c757d); }
#sampleTable thead th.asum-th-hint {
    cursor: help;
    text-decoration: underline dotted;
    text-underline-offset: 3px;
}
.asum-toolbar {
    --asum-muted: #6c757d;
}
[data-theme="dark"] .asum-toolbar {
    --asum-muted: #a1a7ab;
}

@keyframes asum-rise {
    from { opacity: 0; transform: translateY(6px); }
    to { opacity: 1; transform: none; }
}
@media (max-width: 575px) {
    .asum-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .asum-glance-grid { grid-template-columns: 1fr; }
}
@media (prefers-reduced-motion: reduce) {
    .asum-kpi,
    .asum-glance-card,
    .asum-share-bar i,
    .asum-glance-bar i {
        animation: none;
        transition: none;
    }
}

/* ==========================================================================
   Assets_Life_Cycle — KPI cards, toolbar, depreciation cells
   ========================================================================== */
.alc-kpis,
.alc-toolbar,
#sampleTable {
    --alc-card: #fff;
    --alc-line: #e9ecef;
    --alc-text: #2c3e50;
    --alc-muted: #6c757d;
    --alc-accent: var(--primary, #009688);
    --alc-track: #edf1f2;
    --alc-ease: cubic-bezier(0.22, 1, 0.36, 1);
}
[data-theme="dark"] .alc-kpis,
[data-theme="dark"] .alc-toolbar,
[data-theme="dark"] #sampleTable {
    --alc-card: #2c2c2c;
    --alc-line: #3a3a3a;
    --alc-text: #e5e7eb;
    --alc-muted: #a1a7ab;
    --alc-track: #3a3a3a;
}
.alc-kpis {
    display: grid;
    gap: 0.75rem;
    margin: 0.75rem 0 1rem;
}
.alc-kpi-row {
    display: grid;
    gap: 0.75rem;
}
.alc-kpi-row--money { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.alc-kpi-row--actions { grid-template-columns: repeat(3, minmax(0, 1fr)); }
@media (max-width: 991px) {
    .alc-kpi-row--money { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
.alc-kpi {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 2px;
    padding: 0.7rem 0.9rem;
    background: var(--alc-card);
    border: 1px solid var(--alc-line);
    border-left: 3px solid var(--alc-muted);
    border-radius: 12px;
    color: var(--alc-text);
    text-align: left;
    font: inherit;
    animation: asum-rise 0.4s var(--alc-ease) both;
    animation-delay: calc(var(--order, 0) * 35ms);
    transition: transform 0.18s var(--alc-ease), box-shadow 0.18s var(--alc-ease);
}
.alc-kpi--accent { border-left-color: var(--alc-accent); }
.alc-kpi--soon { border-left-color: var(--warning, #ffc107); }
.alc-kpi--done { border-left-color: var(--secondary, #6c757d); }
.alc-kpi--warn { border-left-color: var(--danger, #dc3545); }
button.alc-kpi { cursor: pointer; }
button.alc-kpi:hover,
button.alc-kpi:focus-visible {
    transform: translateY(-2px);
    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.08);
}
button.alc-kpi:focus-visible {
    outline: none;
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--alc-accent) 35%, transparent);
}
button.alc-kpi.is-active {
    background: color-mix(in srgb, var(--alc-accent) 10%, var(--alc-card));
    border-color: var(--alc-accent);
}
.alc-kpi-label {
    font-size: 0.7rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.3px;
    color: var(--alc-muted);
}
.alc-kpi-value {
    font-size: 1.25rem;
    font-weight: 700;
    line-height: 1.15;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}
.alc-kpi-value small { font-size: 0.75rem; font-weight: 600; color: var(--alc-muted); }
.alc-kpi-sub { font-size: 0.72rem; color: var(--alc-muted); }
.alc-kpis[aria-busy="true"] .alc-kpi-value { opacity: 0.4; }

.alc-toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 0.5rem 1rem;
    margin-bottom: 0.75rem;
}
.alc-related {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin-top: 0.25rem;
}
.alc-related-label { font-size: 0.8rem; color: var(--alc-muted, #6c757d); }
[data-theme="dark"] .alc-related { --alc-muted: #a1a7ab; }
.alc-toolbar-left { display: flex; align-items: center; flex-wrap: wrap; gap: 0.5rem; }
.alc-filter {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    margin: 0;
    font-size: 0.85rem;
    color: var(--alc-muted);
}
.alc-filter select { width: auto; min-width: 13rem; }
.alc-export { margin: 0; }
.alc-export .btn.disabled { pointer-events: none; }

.alc-num { font-variant-numeric: tabular-nums; }
.alc-muted { color: var(--alc-muted, #6c757d); }
#sampleTable thead th.alc-th-hint {
    cursor: help;
    text-decoration: underline dotted;
    text-underline-offset: 3px;
}
#sampleTable tfoot.alc-tfoot th {
    font-weight: 700;
    border-top: 2px solid var(--alc-accent);
    font-variant-numeric: tabular-nums;
}
.alc-dep { display: flex; flex-direction: column; align-items: flex-end; gap: 3px; }
.alc-dep-bar {
    display: block;
    width: 100%;
    min-width: 70px;
    height: 4px;
    border-radius: 2px;
    background: var(--alc-track);
    overflow: hidden;
}
.alc-dep-bar i {
    display: block;
    height: 100%;
    background: var(--alc-accent);
    transform-origin: left center;
    animation: app-bar-grow 0.9s var(--alc-ease) both;
}
.alc-flag {
    --c: var(--secondary, #6c757d);
    display: inline-block;
    padding: 0 7px;
    border-radius: 999px;
    font-size: 0.7rem;
    font-weight: 600;
    white-space: nowrap;
    color: var(--c);
    background: color-mix(in srgb, var(--c) 14%, transparent);
}
.alc-flag--warn { --c: var(--danger, #dc3545); }
.alc-flag--soon { --c: #c78a00; }
.alc-flag--done { --c: var(--secondary, #6c757d); }
[data-theme="dark"] .alc-flag--soon { --c: var(--warning, #ffc107); }
[data-theme="dark"] .alc-flag--done { --c: #a1a7ab; }

@media (max-width: 575px) {
    .alc-kpi-row--actions { grid-template-columns: 1fr; }
    .alc-filter select { min-width: 0; }
}
@media (prefers-reduced-motion: reduce) {
    .alc-kpi,
    .alc-dep-bar i { animation: none; transition: none; }
}

/* Assets_Depreciation_Settings + Life Cycle toolbar right side */
.alc-toolbar-right { display: flex; align-items: center; flex-wrap: wrap; gap: 0.5rem; }
.dep-section { margin-bottom: 1.5rem; }
.dep-how { margin: 0; padding-left: 1.1rem; font-size: 0.88rem; color: var(--alc-muted, #6c757d); }
.dep-how li { margin-bottom: 0.25rem; }
.dep-radio { display: flex; flex-direction: column; gap: 0.5rem; font-size: 0.9rem; }
.dep-radio input { margin-right: 0.4rem; }
.dep-search { max-width: 240px; }
.dep-table td { vertical-align: middle; }
.dep-table input.form-control-sm,
.dep-table select.form-control-sm { min-width: 90px; }
.dep-num { font-variant-numeric: tabular-nums; }
.dep-actions { display: flex; justify-content: space-between; gap: 0.5rem; flex-wrap: wrap; }
[data-theme="dark"] .dep-how { color: #a1a7ab; }
.alc-schedule { display: inline-flex; align-items: center; gap: 0.35rem; }
.alc-schedule select { width: auto; }

/* ---- Web push opt-in banner (app/Include/web_push.js) ---- */
.ycx-web-push-banner {
	position: fixed;
	right: 16px;
	bottom: 16px;
	z-index: 1060;
	display: flex;
	align-items: flex-start;
	gap: 12px;
	max-width: 380px;
	width: calc(100% - 32px);
	padding: 14px 16px;
	background: var(--white-on-white, #fff);
	color: var(--main-text-color, #212529);
	border: 1px solid var(--default-line, #eee);
	border-left: 4px solid var(--primary, #009688);
	border-radius: 8px;
	box-shadow: 0 6px 24px rgba(0, 0, 0, 0.15);
	font-size: 0.875rem;
}
.ycx-web-push-banner__icon {
	color: var(--primary, #009688);
	font-size: 1.25rem;
	margin-top: 2px;
}
.ycx-web-push-banner__text {
	display: flex;
	flex: 1;
	flex-direction: column;
	gap: 4px;
	min-width: 0;
}
.ycx-web-push-banner__actions {
	display: flex;
	flex-direction: column;
	gap: 6px;
	flex-shrink: 0;
}
@media (max-width: 480px) {
	.ycx-web-push-banner {
		flex-wrap: wrap;
	}
	.ycx-web-push-banner__actions {
		flex-direction: row;
		justify-content: flex-end;
		width: 100%;
	}
}
[data-theme="dark"] .ycx-web-push-banner {
	background: var(--white-on-white, #333);
	color: var(--main-text-color, #fff);
	border-color: var(--default-line, #808080);
	border-left-color: var(--primary, #009688);
	box-shadow: 0 6px 24px rgba(0, 0, 0, 0.5);
}

/* ==========================================================================
   Asset Finance tab (Assets_Finance.php) + Finance summary on Asset Detail
   ========================================================================== */
.afin-grid,
.afin-teaser,
.asset-ops-card {
    --afin-line: #e9ecef;
    --afin-soft: #f6f8f9;
    --afin-text: #2c3e50;
    --afin-muted: #6c757d;
    --afin-accent: var(--primary, #009688);
    --afin-track: #e3e8ea;
}
[data-theme="dark"] .afin-grid,
[data-theme="dark"] .afin-teaser,
[data-theme="dark"] .asset-ops-card {
    --afin-line: #3a3a3a;
    --afin-soft: #262626;
    --afin-text: #e5e7eb;
    --afin-muted: #a1a7ab;
    --afin-track: #3a3a3a;
}
.afin-asset-head {
    display: flex;
    align-items: baseline;
    flex-wrap: wrap;
    gap: 0.25rem 0.75rem;
    margin: 0 0 0.75rem;
    font-size: 1.05rem;
}
.afin-head-link { margin-left: auto; font-size: 0.85rem; }
.afin-grid {
    display: grid;
    grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
    gap: 1rem;
    align-items: start;
}
@media (max-width: 991px) {
    .afin-grid { grid-template-columns: 1fr; }
}
.afin-card .downtime-card-header { align-items: flex-start; }
.afin-method {
    align-self: flex-start;
    padding: 2px 10px;
    border-radius: 999px;
    font-size: 0.75rem;
    font-weight: 600;
    white-space: nowrap;
    color: var(--afin-accent);
    background: color-mix(in srgb, var(--afin-accent) 12%, transparent);
}
.afin-figures {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0.75rem;
    margin: 0.5rem 0 0.75rem;
}
.afin-figures--one { grid-template-columns: minmax(0, 1fr); max-width: 260px; }
.afin-fig {
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding: 0.6rem 0.75rem;
    border: 1px solid var(--afin-line);
    border-radius: 10px;
    background: var(--afin-soft);
    color: var(--afin-text);
}
.afin-fig span {
    font-size: 0.7rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.3px;
    color: var(--afin-muted);
}
.afin-fig strong {
    font-size: 1.15rem;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.afin-fig small { font-size: 0.75rem; color: var(--afin-muted); font-variant-numeric: tabular-nums; }
.afin-fig--accent { border-color: color-mix(in srgb, var(--afin-accent) 45%, var(--afin-line)); }
.afin-fig--accent strong { color: var(--afin-accent); }
.afin-bar {
    height: 8px;
    border-radius: 4px;
    background: color-mix(in srgb, var(--afin-accent) 22%, transparent);
    overflow: hidden;
    margin-bottom: 0.9rem;
}
.afin-bar--thin { height: 5px; margin: 0.4rem 0; }
.afin-bar-dep {
    display: block;
    height: 100%;
    background: var(--afin-muted);
    transform-origin: left center;
    animation: app-bar-grow 0.9s cubic-bezier(0.22, 1, 0.36, 1) both;
}
.afin-details {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0;
    margin: 0;
    border-top: 1px solid var(--afin-line);
}
.afin-details > div {
    display: flex;
    justify-content: space-between;
    gap: 0.75rem;
    padding: 0.45rem 0.25rem;
    border-bottom: 1px solid var(--afin-line);
    font-size: 0.85rem;
}
.afin-details > div:nth-child(odd) { padding-right: 0.9rem; }
.afin-details > div:nth-child(even) { padding-left: 0.9rem; border-left: 1px solid var(--afin-line); }
.afin-details dt { font-weight: 400; color: var(--afin-muted); margin: 0; }
.afin-details dd { margin: 0; font-weight: 600; text-align: right; font-variant-numeric: tabular-nums; color: var(--afin-text); }
@media (max-width: 575px) {
    .afin-figures { grid-template-columns: 1fr; }
    .afin-details { grid-template-columns: 1fr; }
    .afin-details > div:nth-child(even) { padding-left: 0.25rem; border-left: 0; }
}
.afin-disposal {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.75rem;
    margin-top: 0.9rem;
}
.afin-disposal > div {
    display: flex;
    flex-direction: column;
    padding: 0.5rem 0.75rem;
    border-radius: 10px;
    background: var(--afin-soft);
    font-size: 0.8rem;
    color: var(--afin-muted);
}
.afin-disposal strong { font-size: 1rem; color: var(--afin-text); font-variant-numeric: tabular-nums; }
.afin-note {
    font-size: 0.85rem;
    color: var(--afin-muted);
    margin: 0.5rem 0 0.75rem;
}
.afin-note--warn { color: #b26a00; }
[data-theme="dark"] .afin-note--warn { color: var(--warning, #ffc107); }

/* Finance summary card on Asset Detail (links to the Finance tab) */
a.afin-teaser {
    display: block;
    color: var(--afin-text);
    text-decoration: none;
    transition: transform 0.18s cubic-bezier(0.22, 1, 0.36, 1), box-shadow 0.18s cubic-bezier(0.22, 1, 0.36, 1);
}
a.afin-teaser:hover,
a.afin-teaser:focus-visible {
    color: var(--afin-text);
    text-decoration: none;
    transform: translateY(-2px);
    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.08);
}
a.afin-teaser:focus-visible { outline: none; box-shadow: 0 0 0 3px color-mix(in srgb, var(--afin-accent) 35%, transparent); }
.afin-teaser-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 0.35rem; }
.afin-teaser-link { font-size: 0.8rem; color: var(--afin-accent); }
.afin-teaser-link .fa { transition: transform 0.15s; }
a.afin-teaser:hover .afin-teaser-link .fa { transform: translateX(3px); }
.afin-teaser-row { display: flex; flex-wrap: wrap; gap: 0.5rem 1.5rem; }
.afin-teaser-row > div { display: flex; flex-direction: column; }
.afin-teaser-row span { font-size: 0.7rem; text-transform: uppercase; letter-spacing: 0.3px; color: var(--afin-muted); }
.afin-teaser-row strong { font-size: 1.05rem; font-variant-numeric: tabular-nums; }

/* Asset operations: one card, a section per request type */
.asset-ops-group + .asset-ops-group { margin-top: 0.9rem; padding-top: 0.75rem; border-top: 1px solid var(--afin-line); }
.asset-ops-group-title {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    font-weight: 600;
    font-size: 0.88rem;
    margin-bottom: 0.4rem;
}
@media (prefers-reduced-motion: reduce) {
    .afin-bar-dep { animation: none; }
    a.afin-teaser, .afin-teaser-link .fa { transition: none; }
}

/* Asset Detail (General tab): empty-field toggle, phone density, compact empty states */
.astd-hide-empty .astd-is-empty { display: none !important; }
.astd-empty-toggle {
    display: inline-block;
    padding: 0.35rem 0 0;
    font-size: 0.8rem;
}
.astd-empty-note {
    margin: 0.25rem 0 0;
    font-size: 0.85rem;
    color: var(--secondary, #6c757d);
}
[data-theme="dark"] .astd-empty-note { color: #a1a7ab; }
@media (max-width: 767px) {
    /* Two short fields per row on phones instead of one (full-width items keep their own row). */
    #assetInformationSection .downtime-meta-grid,
    #technicalInformationSection .downtime-meta-grid,
    #additionalInfoSection .downtime-meta-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 8px;
    }
    #assetInformationSection .downtime-meta-item,
    #technicalInformationSection .downtime-meta-item,
    #additionalInfoSection .downtime-meta-item {
        padding: 0.55rem 0.65rem;
        min-width: 0;
        overflow-wrap: anywhere;
    }
}
@media (max-width: 340px) {
    #assetInformationSection .downtime-meta-grid,
    #technicalInformationSection .downtime-meta-grid,
    #additionalInfoSection .downtime-meta-grid { grid-template-columns: 1fr; }
}

/* ===== Preventive Master Plan: status colours, today marker, totals ===== */
.pm-mp-legend-head { display: flex; align-items: center; gap: 6px; }
.pm-mp-legend-label { font-size: 11px; font-weight: 600; color: #333; }
.pm-mp-legend-hint { padding-left: 20px; font-size: 10px; color: #888; line-height: 1.4; margin-top: 2px; }
.pm-mp-swatch {
  position: relative; display: inline-block; width: 14px; height: 14px;
  border-radius: 3px; flex-shrink: 0; border: 1px solid rgba(0, 0, 0, 0.08);
}
.pm-mp-swatch-today { background: transparent; border: 2px solid var(--primary, #009688); }

#masterPlanTable td.pm-mp-planned,
.pm-mp-swatch.pm-mp-planned { background-color: rgba(var(--primary-rgb, 0, 150, 136), 0.12); color: var(--primary, #009688); }
#masterPlanTable td.pm-mp-progress,
.pm-mp-swatch.pm-mp-progress { background-color: #fff1cc; color: #8a6100; }
#masterPlanTable td.pm-mp-done,
.pm-mp-swatch.pm-mp-done { background-color: #d8f1e0; color: #1e6b3a; }
#masterPlanTable td.pm-mp-missed,
.pm-mp-swatch.pm-mp-missed { background-color: #fbdede; color: #9b2c2c; }
#masterPlanTable td.pm-mp-late { box-shadow: inset 3px 0 0 #e05c5c; }
#masterPlanTable td.pm-mp-not-generated { background-image: repeating-linear-gradient(135deg, transparent 0 4px, rgba(155, 44, 44, 0.12) 4px 6px); }
#masterPlanTable td.pm-mp-generated,
.pm-mp-swatch.pm-mp-planned { position: relative; }
#masterPlanTable td.pm-mp-generated::after,
.pm-mp-swatch.pm-mp-planned::after {
  content: ""; position: absolute; top: 3px; right: 3px; width: 5px; height: 5px;
  border-radius: 50%; background: var(--primary, #009688);
}
#masterPlanTable td.pm-mp-planned a,
#masterPlanTable td.pm-mp-progress a,
#masterPlanTable td.pm-mp-done a,
#masterPlanTable td.pm-mp-missed a { font-weight: 600; }

/* Today column */
.dataTables_scrollHead th.pm-mp-today,
#masterPlanTable th.pm-mp-today { background-color: #fff !important; color: var(--primary, #009688) !important; font-weight: 700; box-shadow: inset 0 -3px 0 var(--primary, #009688); }
[data-theme="dark"] .dataTables_scrollHead th.pm-mp-today,
[data-theme="dark"] #masterPlanTable th.pm-mp-today { background-color: #e9ecef !important; color: #00796b !important; }
#masterPlanTable td.pm-mp-today { box-shadow: inset 2px 0 0 var(--primary, #009688), inset -2px 0 0 var(--primary, #009688); }
#masterPlanTable td.pm-mp-today.pm-mp-late { box-shadow: inset 3px 0 0 #e05c5c, inset -2px 0 0 var(--primary, #009688); }
.dataTables_scrollFoot th.pm-mp-today { box-shadow: inset 2px 0 0 var(--primary, #009688), inset -2px 0 0 var(--primary, #009688); }

/* Totals row + summary */
.pm-mp-total-row th { font-size: 10px; font-weight: 600; text-align: center; white-space: nowrap; background: #f6f8f9; color: #555; }
.pm-mp-total-row th.pm-mp-total-label { text-align: left; }
.pm-mp-total-row th.pm-mp-total-compliance { text-align: center; font-size: 12px; }
.pm-mp-pct-good { color: #1e6b3a !important; }
.pm-mp-pct-warn { color: #8a6100 !important; }
.pm-mp-pct-bad { color: #9b2c2c !important; }
.pm-mp-total-row th.pm-mp-total-future { color: #999; font-weight: 500; }

.pm-mp-summary { margin-bottom: 10px; }
.pm-mp-summary-items { display: flex; flex-wrap: wrap; gap: 8px; }
.pm-mp-summary-item {
  display: flex; flex-direction: column; min-width: 110px; padding: 6px 12px;
  border-radius: 6px; background: #f6f8f9; border: 1px solid rgba(0, 0, 0, 0.06);
}
.pm-mp-summary-label { font-size: 10px; text-transform: uppercase; letter-spacing: 0.03em; color: #777; }
.pm-mp-summary-value { font-size: 16px; color: #333; }
.pm-mp-summary-item.pm-mp-sum-compliance { border-color: rgba(var(--primary-rgb, 0, 150, 136), 0.35); }
.pm-mp-summary-item.pm-mp-pct-good .pm-mp-summary-value { color: #1e6b3a; }
.pm-mp-summary-item.pm-mp-pct-warn .pm-mp-summary-value { color: #8a6100; }
.pm-mp-summary-item.pm-mp-pct-bad .pm-mp-summary-value { color: #9b2c2c; }
.pm-mp-summary-item.pm-mp-sum-done { box-shadow: inset 3px 0 0 #6cc28a; }
.pm-mp-summary-item.pm-mp-sum-progress { box-shadow: inset 3px 0 0 #f0c14b; }
.pm-mp-summary-item.pm-mp-sum-missed { box-shadow: inset 3px 0 0 #e05c5c; }
.pm-mp-summary-hint { font-size: 10px; color: #888; margin-top: 4px; }

[data-theme="dark"] .pm-mp-legend-label { color: #e2e8f0; }
[data-theme="dark"] .pm-mp-legend-hint,
[data-theme="dark"] .pm-mp-summary-hint,
[data-theme="dark"] .pm-mp-summary-label { color: #9aa4ae; }
[data-theme="dark"] #masterPlanTable td.pm-mp-planned,
[data-theme="dark"] .pm-mp-swatch.pm-mp-planned { background-color: rgba(var(--primary-rgb, 0, 150, 136), 0.22); color: #4db6ac; }
[data-theme="dark"] #masterPlanTable td.pm-mp-progress,
[data-theme="dark"] .pm-mp-swatch.pm-mp-progress { background-color: rgba(240, 193, 75, 0.2); color: #f3d27a; }
[data-theme="dark"] #masterPlanTable td.pm-mp-done,
[data-theme="dark"] .pm-mp-swatch.pm-mp-done { background-color: rgba(108, 194, 138, 0.2); color: #8fd6a8; }
[data-theme="dark"] #masterPlanTable td.pm-mp-missed,
[data-theme="dark"] .pm-mp-swatch.pm-mp-missed { background-color: rgba(224, 92, 92, 0.22); color: #f19a9a; }
[data-theme="dark"] .pm-mp-total-row th,
[data-theme="dark"] .pm-mp-summary-item { background: #252525; color: #ced4da; border-color: rgba(255, 255, 255, 0.08); }
[data-theme="dark"] .pm-mp-summary-value { color: #e9ecef; }
[data-theme="dark"] .pm-mp-pct-good,
[data-theme="dark"] .pm-mp-summary-item.pm-mp-pct-good .pm-mp-summary-value { color: #8fd6a8 !important; }
[data-theme="dark"] .pm-mp-pct-warn,
[data-theme="dark"] .pm-mp-summary-item.pm-mp-pct-warn .pm-mp-summary-value { color: #f3d27a !important; }
[data-theme="dark"] .pm-mp-pct-bad,
[data-theme="dark"] .pm-mp-summary-item.pm-mp-pct-bad .pm-mp-summary-value { color: #f19a9a !important; }
[data-theme="dark"] .pm-mp-total-row th.pm-mp-total-future { color: #6c757d; }

/* Master Plan: view / group toolbar, drill-down, group rows */
.pm-mp-toolbar { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 18px; margin-bottom: 12px; }
.pm-mp-toolbar-item { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.pm-mp-toolbar-label { font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.03em; color: #6c757d; }
.pm-mp-toolbar .btn-group .btn { font-size: 12px; padding: 0.2rem 0.65rem; }
.pm-mp-drill { gap: 10px; }
.pm-mp-drill-back { font-size: 12px; font-weight: 600; color: var(--primary, #009688); }
.pm-mp-drill-chip {
  font-size: 12px; padding: 3px 10px; border-radius: 999px;
  background: rgba(var(--primary-rgb, 0, 150, 136), 0.12); color: #333;
}
.pm-mp-drill-clear { margin-left: 4px; font-weight: 700; color: #6c757d; text-decoration: none; }
.pm-mp-drill-clear:hover { color: #9b2c2c; text-decoration: none; }
.pm-mp-legend-note { font-size: 10px; color: #6c757d; margin: -2px 0 8px; }
.pm-mp-group-link { color: inherit; font-size: 12px; }
.pm-mp-group-link:hover { color: var(--primary, #009688); text-decoration: none; }
.pm-mp-group-link .fa { color: var(--primary, #009688); }
.pm-mp-row-pct { display: inline-block; margin-top: 2px; font-weight: 700; }
.pm-mp-row-pct.pm-mp-pct-good { color: #1e6b3a; }
.pm-mp-row-pct.pm-mp-pct-warn { color: #8a6100; }
.pm-mp-row-pct.pm-mp-pct-bad { color: #9b2c2c; }
.pm-mp-col-sub { font-weight: 400; opacity: 0.85; font-size: 9px; white-space: nowrap; }
#masterPlanTable .pm-mp-cell-link { display: block; width: 100%; color: inherit; text-decoration: none; line-height: 1.5; }
#masterPlanTable.pm-mp-view-week td,
#masterPlanTable.pm-mp-view-month td { font-weight: 600; white-space: nowrap; }
[data-theme="dark"] .pm-mp-toolbar-label,
[data-theme="dark"] .pm-mp-legend-note { color: #9aa4ae; }
[data-theme="dark"] .pm-mp-drill-chip { background: rgba(var(--primary-rgb, 0, 150, 136), 0.22); color: #e2e8f0; }
[data-theme="dark"] .pm-mp-drill-back,
[data-theme="dark"] .pm-mp-group-link .fa { color: #02b3a2; }
[data-theme="dark"] .pm-mp-row-pct.pm-mp-pct-good { color: #8fd6a8; }
[data-theme="dark"] .pm-mp-row-pct.pm-mp-pct-warn { color: #f3d27a; }
[data-theme="dark"] .pm-mp-row-pct.pm-mp-pct-bad { color: #f19a9a; }

/* Master Plan: click-through cells + detail list */
#masterPlanTable td.pm-mp-clickable { cursor: pointer; }
#masterPlanTable td.pm-mp-clickable:hover { outline: 2px solid var(--primary, #009688); outline-offset: -2px; }
.pm-mp-detail-sub { font-size: 12px; margin-top: 2px; }
.pm-mp-detail-table { font-size: 12px; }
#pmMpDetailModal .pm-mp-detail-table thead th { font-size: 11px; text-transform: uppercase; letter-spacing: 0.02em; color: #fff !important; border-top: none; white-space: nowrap; }
.pm-mp-detail-badge { display: inline-block; padding: 2px 8px; border-radius: 999px; font-size: 11px; font-weight: 600; white-space: nowrap; }
.pm-mp-detail-badge.pm-mp-planned { background: rgba(var(--primary-rgb, 0, 150, 136), 0.12); color: var(--primary, #009688); }
.pm-mp-detail-badge.pm-mp-progress { background: #fff1cc; color: #8a6100; }
.pm-mp-detail-badge.pm-mp-done { background: #d8f1e0; color: #1e6b3a; }
.pm-mp-detail-badge.pm-mp-missed { background: #fbdede; color: #9b2c2c; }
.pm-mp-detail-badge.pm-mp-late { box-shadow: inset 3px 0 0 #e05c5c; }
[data-theme="dark"] .pm-mp-detail-badge.pm-mp-planned { background: rgba(var(--primary-rgb, 0, 150, 136), 0.22); color: #4db6ac; }
[data-theme="dark"] .pm-mp-detail-badge.pm-mp-progress { background: rgba(240, 193, 75, 0.2); color: #f3d27a; }
[data-theme="dark"] .pm-mp-detail-badge.pm-mp-done { background: rgba(108, 194, 138, 0.2); color: #8fd6a8; }
[data-theme="dark"] .pm-mp-detail-badge.pm-mp-missed { background: rgba(224, 92, 92, 0.22); color: #f19a9a; }

/* Master Plan: summary tiles as a multi-select status filter */
button.pm-mp-summary-item { font: inherit; text-align: left; cursor: pointer; transition: border-color 0.15s ease, box-shadow 0.15s ease, background-color 0.15s ease; }
button.pm-mp-summary-item:hover { border-color: rgba(var(--primary-rgb, 0, 150, 136), 0.55); }
button.pm-mp-summary-item:focus { outline: none; box-shadow: 0 0 0 2px rgba(var(--primary-rgb, 0, 150, 136), 0.35); }
button.pm-mp-summary-item.is-active {
  background: rgba(var(--primary-rgb, 0, 150, 136), 0.10);
  border-color: var(--primary, #009688);
  box-shadow: inset 0 0 0 1px var(--primary, #009688);
}
button.pm-mp-summary-item.is-active .pm-mp-summary-label::before { content: "\2713  "; color: var(--primary, #009688); font-weight: 700; }
.pm-mp-summary-item.pm-mp-sum-planned { box-shadow: inset 3px 0 0 var(--primary, #009688); }
button.pm-mp-summary-item.pm-mp-sum-planned.is-active { box-shadow: inset 3px 0 0 var(--primary, #009688), inset 0 0 0 1px var(--primary, #009688); }
.pm-mp-summary-hint.pm-mp-filter-on { color: #333; font-size: 11px; font-weight: 600; }
.pm-mp-filter-clear { margin-left: 6px; font-weight: 600; color: var(--primary, #009688); }
#masterPlanTable td.pm-mp-faded { opacity: 0.28; }
#masterPlanTable td.pm-mp-faded:hover { opacity: 0.7; }
[data-theme="dark"] button.pm-mp-summary-item { color: #ced4da; }
[data-theme="dark"] button.pm-mp-summary-item.is-active { background: rgba(var(--primary-rgb, 0, 150, 136), 0.22); }
[data-theme="dark"] .pm-mp-summary-hint.pm-mp-filter-on { color: #e2e8f0; }
[data-theme="dark"] .pm-mp-filter-clear { color: #02b3a2; }
.pm-mp-summary-items .pm-mp-summary-item { min-width: 96px; padding: 5px 10px; }

/* Home dashboard: compact lists (Booking "Next Up", Project "My Cards Due") */
.home-mini-list-row + .home-mini-list-row {
    border-top: 1px solid var(--default-line, #eee);
}
.home-mini-list-row > a {
    gap: 12px;
    padding: 8px 4px;
    border-radius: 6px;
}
.home-mini-list-row > a:hover {
    background: rgba(var(--primary-rgb, 0, 150, 136), 0.06);
}
.home-mini-list-when {
    min-width: 130px;
    font-size: 0.82rem;
    font-weight: 600;
}
.home-mini-list-what {
    min-width: 0;
    font-size: 0.85rem;
}
.home-mini-list-empty {
    padding: 12px 4px;
    font-size: 0.85rem;
}
[data-theme="dark"] .home-mini-list-row + .home-mini-list-row {
    border-top-color: var(--default-line, #808080);
}
[data-theme="dark"] .home-mini-list-row > a {
    color: var(--main-text-color, #e0e0e0) !important;
}
[data-theme="dark"] .home-mini-list-row > a:hover {
    background: rgba(var(--primary-rgb, 0, 150, 136), 0.15);
}
@media (max-width: 575.98px) {
    .home-mini-list-when {
        min-width: 100px;
    }
}

/* ---- Offline bar (app/Include/offline_ui.js) ---- */
.ycx-offline-bar {
	position: fixed;
	top: 0;
	/* left + right + auto margins centre a fit-content box at any width
	   (left:50% alone capped it at half the screen on phones). */
	left: 16px;
	right: 16px;
	margin: 0 auto;
	width: fit-content;
	z-index: 1070;
	display: flex;
	align-items: center;
	gap: 8px;
	padding: 8px 16px;
	border-radius: 0 0 8px 8px;
	font-size: 0.875rem;
	font-weight: 600;
	color: #fff;
	box-shadow: 0 4px 16px rgba(0, 0, 0, 0.2);
	transform: translateY(-110%);
	transition: transform 0.25s ease;
	pointer-events: none;
}
.ycx-offline-bar.is-visible {
	transform: translateY(0);
}
.ycx-offline-bar.is-offline {
	background: #6c757d;
}
.ycx-offline-bar.is-online {
	background: var(--primary, #009688);
}
[data-theme="dark"] .ycx-offline-bar.is-offline {
	background: #495057;
	box-shadow: 0 4px 16px rgba(0, 0, 0, 0.5);
}

/* ==================== ANNOUNCEMENT PRIORITY / OPTIONS (Operation/Announcement) ==================== */

.announcement-compose-form .announcement-options {
	background: rgba(var(--primary-rgb, 0, 150, 136), 0.03);
	border-color: rgba(0, 0, 0, 0.08) !important;
}
.announcement-compose-form .announcement-options-checks .custom-control { margin-bottom: 0.25rem; }
@media (min-width: 768px) {
	.announcement-compose-form .announcement-compose-actions .announcement-compose-send {
		flex: 0 0 236px;
	}
}
.announcement-meta-badges .badge { font-weight: 600; margin-right: 0.15rem; }
#announcementHistoryTable .announcement-history-muted .home-announcement-message-inset { opacity: 0.8; }

/* Shared inset chrome for the history cards and the preview modal */
#annPreviewBox,
#announcementHistoryTable .home-announcement-message-inset.announcement-info,
#announcementHistoryTable .home-announcement-message-inset.announcement-danger {
	border-style: solid;
	border-width: 1px 1px 1px 5px;
	border-radius: 16px;
	padding: 0.75rem 1rem 0.85rem 0.95rem;
	box-shadow: 0 2px 10px rgba(0, 0, 0, 0.08);
}
#annPreviewBox .home-announcement-title,
#announcementHistoryTable .home-announcement-message-inset .home-announcement-title { font-size: 1rem; font-weight: 700; }
#annPreviewBox .home-announcement-body img { max-width: 100%; height: auto; }
#annPreviewBox.announcement-warning { border-color: rgba(255, 193, 7, 0.55); border-left-color: #ffc107; background-color: #fffbf0; }
#annPreviewBox.announcement-warning .home-announcement-title { color: #856404; }
#annPreviewBox.announcement-info,
#announcementHistoryTable .home-announcement-message-inset.announcement-info { border-color: rgba(23, 162, 184, 0.35); border-left-color: #17a2b8; background-color: #f1fbfd; }
#annPreviewBox.announcement-info .home-announcement-title,
#announcementHistoryTable .home-announcement-message-inset.announcement-info .home-announcement-title { color: #0c5460; }
#annPreviewBox.announcement-danger,
#announcementHistoryTable .home-announcement-message-inset.announcement-danger { border-color: rgba(220, 53, 69, 0.35); border-left-color: #dc3545; background-color: #fff5f6; }
#annPreviewBox.announcement-danger .home-announcement-title,
#announcementHistoryTable .home-announcement-message-inset.announcement-danger .home-announcement-title { color: #721c24; }
#announcementHistoryTable .home-announcement-message-inset.announcement-warning .home-announcement-title.mb-2 { margin-bottom: 0.5rem; }

[data-theme="dark"] .announcement-compose-form .announcement-options {
	background: #262626;
	border-color: rgba(255, 255, 255, 0.12) !important;
}
[data-theme="dark"] #annPreviewBox { color: #e0e0e0; box-shadow: 0 2px 12px rgba(0, 0, 0, 0.3); }
[data-theme="dark"] #annPreviewBox.announcement-warning { background-color: #3d3520; border-color: #b38600; border-left-color: #ffc107; }
[data-theme="dark"] #annPreviewBox.announcement-warning .home-announcement-title { color: #ffc107; }
[data-theme="dark"] #annPreviewBox.announcement-info,
[data-theme="dark"] #announcementHistoryTable .home-announcement-message-inset.announcement-info { background-color: #1a2d33; border-color: #17a2b8; color: #e0e0e0; }
[data-theme="dark"] #annPreviewBox.announcement-info .home-announcement-title,
[data-theme="dark"] #announcementHistoryTable .home-announcement-message-inset.announcement-info .home-announcement-title { color: #5bc0de; }
[data-theme="dark"] #annPreviewBox.announcement-danger,
[data-theme="dark"] #announcementHistoryTable .home-announcement-message-inset.announcement-danger { background-color: #3d2024; border-color: #dc3545; color: #e0e0e0; }
[data-theme="dark"] #annPreviewBox.announcement-danger .home-announcement-title,
[data-theme="dark"] #announcementHistoryTable .home-announcement-message-inset.announcement-danger .home-announcement-title { color: #f5c6cb; }
[data-theme="dark"] .announcement-meta-badges .badge-light { background: #333; color: #e0e0e0; border-color: #444 !important; }

/* ==================== ANNOUNCEMENT BOARD + HOME ACTIONS (phase 2) ==================== */

@media (min-width: 768px) {
	.announcement-compose-form .announcement-compose-actions .announcement-compose-send:has(#announcementDraftBtn) {
		flex: 0 0 360px;
	}
}
.home-announcement-alert .home-announcement-dismiss { margin-left: 0.5rem; line-height: 1; }
.announcement-board-item {
	border-style: solid;
	border-width: 1px 1px 1px 5px;
	border-radius: 16px;
	padding: 0.85rem 1rem;
	box-shadow: 0 2px 10px rgba(0, 0, 0, 0.06);
}
.announcement-board-item .home-announcement-title { font-weight: 700; }
.announcement-board-item .home-announcement-body img { max-width: 100%; height: auto; }
.announcement-board-item .home-announcement-body table td,
.announcement-board-item .home-announcement-body table th { border: 1px solid rgba(0, 0, 0, 0.15); padding: 0.35rem 0.5rem; }
.announcement-board-item.announcement-warning { border-color: rgba(255, 193, 7, 0.55); border-left-color: #ffc107; background-color: #fffbf0; }
.announcement-board-item.announcement-warning .home-announcement-title { color: #856404; }
.announcement-board-item.announcement-info { border-color: rgba(23, 162, 184, 0.35); border-left-color: #17a2b8; background-color: #f1fbfd; }
.announcement-board-item.announcement-info .home-announcement-title { color: #0c5460; }
.announcement-board-item.announcement-danger { border-color: rgba(220, 53, 69, 0.35); border-left-color: #dc3545; background-color: #fff5f6; }
.announcement-board-item.announcement-danger .home-announcement-title { color: #721c24; }

[data-theme="dark"] .announcement-board-item { color: #e0e0e0; box-shadow: 0 2px 12px rgba(0, 0, 0, 0.3); }
[data-theme="dark"] .announcement-board-item.announcement-warning { background-color: #3d3520; border-color: #b38600; border-left-color: #ffc107; }
[data-theme="dark"] .announcement-board-item.announcement-warning .home-announcement-title { color: #ffc107; }
[data-theme="dark"] .announcement-board-item.announcement-info { background-color: #1a2d33; border-color: #17a2b8; }
[data-theme="dark"] .announcement-board-item.announcement-info .home-announcement-title { color: #5bc0de; }
[data-theme="dark"] .announcement-board-item.announcement-danger { background-color: #3d2024; border-color: #dc3545; }
[data-theme="dark"] .announcement-board-item.announcement-danger .home-announcement-title { color: #f5c6cb; }
[data-theme="dark"] .announcement-board-item .home-announcement-body table td,
[data-theme="dark"] .announcement-board-item .home-announcement-body table th { border-color: #555; }
[data-theme="dark"] .home-announcement-alert .home-announcement-dismiss { color: #e0e0e0; text-shadow: none; }

/* ==================== ANNOUNCEMENT MINIMIZE (Home) ==================== */

.home-announcement-alert .home-announcement-minibar { display: none; font-size: 0.9rem; }
.home-announcement-alert.is-minimized { padding-top: 0.45rem; padding-bottom: 0.45rem; }
.home-announcement-alert.is-minimized .home-announcement-minibar { display: block; }
.home-announcement-alert.is-minimized .home-announcement-full,
.home-announcement-alert.is-minimized .home-announcement-dismiss { display: none; }
.home-announcement-alert .home-announcement-dismiss { font-size: 0.95rem; opacity: 0.55; }
.home-announcement-alert .home-announcement-dismiss:hover { opacity: 0.9; }
.home-announcement-min-items.is-grouped { display: none; }
.home-announcement-minimized-group.is-open .home-announcement-min-items.is-grouped { display: block; }
.home-announcement-minimized-group.is-open .home-announcement-min-toggle .fa-chevron-down { transform: rotate(180deg); }
.announcement-history-card-meta .announcement-revision-link { font-size: 0.75rem; }
.announcement-audience-preview { font-size: 0.8rem; }
.announcement-audience-preview.is-large { color: #b02a37; font-weight: 600; }

[data-theme="dark"] .home-announcement-alert .home-announcement-minibar { color: #e0e0e0; }
[data-theme="dark"] .announcement-audience-preview.is-large { color: #f5a3ab; }

/* Preventive Checklist Report: rows whose result is a reported problem (Not OK / Fail / Faulty …) */
#sampleTable tr.pm-checklist-issue td {
  background-color: rgba(220, 53, 69, 0.07);
}
#sampleTable tr.pm-checklist-issue td:first-child {
  box-shadow: inset 3px 0 0 var(--danger, #dc3545);
}
[data-theme="dark"] #sampleTable tr.pm-checklist-issue td {
  background-color: rgba(220, 53, 69, 0.16);
}
[data-theme="dark"] #sampleTable tr.pm-checklist-issue .text-danger {
  color: #ff8a95 !important;
}

/* Preventive Checklist Report: summary tiles, view switch, missing-answer cells (page-scoped classes) */
.pm-cl-summary {
  margin: 4px 0 14px;
}
.pm-cl-tiles {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
}
.pm-cl-tile {
  display: block;
  width: 100%;
  text-align: left;
  font: inherit;
  color: var(--main-text-color, #212529);
  background: var(--white-on-white, #fff);
  border: 1px solid var(--default-line, #eee);
  border-radius: 10px;
  padding: 12px 14px;
}
.pm-cl-tile-label {
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .02em;
  text-transform: uppercase;
  color: var(--secondary-light, #6c757d);
}
.pm-cl-tile-value {
  font-size: 26px;
  font-weight: 700;
  line-height: 1.2;
  margin-top: 4px;
  font-variant-numeric: tabular-nums;
}
.pm-cl-tile-sub {
  font-size: 12px;
  color: var(--secondary-light, #6c757d);
  min-height: 1.2em;
}
.pm-cl-tile-action {
  cursor: pointer;
  transition: border-color .15s ease, box-shadow .15s ease;
}
.pm-cl-tile-action:hover,
.pm-cl-tile-action:focus {
  border-color: rgba(var(--primary-rgb, 0, 150, 136), .55);
  outline: none;
}
.pm-cl-tile-action.is-active {
  border-color: var(--primary, #009688);
  box-shadow: 0 0 0 2px rgba(var(--primary-rgb, 0, 150, 136), .18);
}
.pm-cl-tile-issues.has-value .pm-cl-tile-label i {
  color: #c0392b;
}
.pm-cl-tile-missing.has-value .pm-cl-tile-label i {
  color: #b26a00;
}
.pm-cl-top {
  margin-top: 12px;
  border: 1px solid var(--default-line, #eee);
  border-radius: 10px;
  padding: 10px 14px;
  background: var(--white-on-white, #fff);
}
.pm-cl-top-title {
  font-weight: 600;
  margin-bottom: 6px;
  color: var(--main-text-color, #212529);
}
.pm-cl-top-list {
  list-style: none;
  margin: 0;
  padding: 0;
}
.pm-cl-top-item {
  display: flex;
  gap: 10px;
  align-items: baseline;
  width: 100%;
  text-align: left;
  background: none;
  border: 0;
  border-top: 1px solid var(--default-line, #eee);
  padding: 6px 0;
  color: var(--main-text-color, #212529);
  cursor: pointer;
}
.pm-cl-top-list li:first-child .pm-cl-top-item {
  border-top: 0;
}
.pm-cl-top-item:hover .pm-cl-top-check {
  text-decoration: underline;
}
.pm-cl-top-count {
  min-width: 34px;
  font-weight: 700;
  color: #c0392b;
  font-variant-numeric: tabular-nums;
}
.pm-cl-top-check {
  flex: 1 1 auto;
  min-width: 0;
}
.pm-cl-top-asset {
  flex: 0 1 40%;
  min-width: 0;
  text-align: right;
  font-size: 12px;
  color: var(--secondary-light, #6c757d);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.pm-cl-view .btn.btn-outline-secondary.active,
.pm-cl-view .btn.btn-outline-secondary:not(:disabled):not(.disabled).active {
  color: #fff;
  background-color: var(--primary, #009688);
  border-color: var(--primary, #009688);
}
.pm-cl-view .badge:empty {
  display: none;
}
#sampleTable .pm-checklist-missing-cell {
  color: #b26a00;
  font-style: italic;
}
#sampleTable .pm-checklist-missing-photo {
  white-space: nowrap;
  font-size: 12px;
}
#sampleTable .pm-checklist-attach {
  color: var(--primary, #009688);
}
@media (max-width: 991px) {
  .pm-cl-tiles {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
@media (max-width: 575px) {
  .pm-cl-tile-value {
    font-size: 22px;
  }
  .pm-cl-top-item {
    flex-wrap: wrap;
  }
  .pm-cl-top-check {
    flex: 1 1 calc(100% - 44px);
  }
  .pm-cl-top-asset {
    flex-basis: 100%;
    text-align: left;
    padding-left: 44px;
  }
  .pm-cl-view {
    flex-wrap: wrap;
  }
}
[data-theme="dark"] .pm-cl-tile-issues.has-value .pm-cl-tile-label i,
[data-theme="dark"] .pm-cl-top-count {
  color: #ff8a95;
}
[data-theme="dark"] .pm-cl-tile-missing.has-value .pm-cl-tile-label i,
[data-theme="dark"] #sampleTable .pm-checklist-missing-cell {
  color: #ffc46b;
}
.pm-cl-focus {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  max-width: 360px;
  padding: 2px 4px 2px 10px;
  border-radius: 999px;
  font-size: 12px;
  color: var(--main-text-color, #212529);
  background: rgba(var(--primary-rgb, 0, 150, 136), .1);
  border: 1px solid rgba(var(--primary-rgb, 0, 150, 136), .35);
}
.pm-cl-focus.d-none {
  display: none;
}
.pm-cl-focus-text {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.pm-cl-focus-clear {
  border: 0;
  background: none;
  color: inherit;
  font-size: 16px;
  line-height: 1;
  padding: 0 4px;
  cursor: pointer;
}

/* =========================================================
   Visitor Media Open (Excel / deep-link in-app preview)
   ========================================================= */
.vmo-page {
	margin: 0;
	min-height: 100vh;
	background: #f4f6f7;
	color: var(--main-text-color, #212529);
	font-family: Lato, "Segoe UI", Arial, sans-serif;
}
.vmo-shell {
	max-width: 1180px;
	margin: 0 auto;
	padding: 20px 16px 32px;
}
.vmo-header {
	display: flex;
	flex-wrap: wrap;
	align-items: flex-start;
	justify-content: space-between;
	gap: 12px 16px;
	margin-bottom: 16px;
}
.vmo-header__brand {
	display: flex;
	gap: 12px;
	align-items: flex-start;
	min-width: 0;
}
.vmo-header__badge {
	width: 42px;
	height: 42px;
	border-radius: 10px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	background: linear-gradient(135deg, #009688, #00695c);
	color: #fff;
	flex-shrink: 0;
	box-shadow: 0 6px 16px rgba(0, 150, 136, 0.28);
}
.vmo-header__title {
	margin: 0;
	font-size: 1.25rem;
	font-weight: 700;
	color: var(--primary, #009688);
	line-height: 1.3;
}
.vmo-header__meta {
	margin: 4px 0 0;
	font-size: 0.85rem;
	color: #6c757d;
	max-width: 52rem;
}
.vmo-header__back { white-space: nowrap; }
.vmo-layout {
	display: grid;
	grid-template-columns: 1fr;
	gap: 14px;
	align-items: stretch;
}
.vmo-layout--multi {
	grid-template-columns: minmax(220px, 280px) minmax(0, 1fr);
}
.vmo-filmstrip {
	background: #fff;
	border: 1px solid var(--default-line, #dee2e6);
	border-radius: 10px;
	padding: 12px;
	max-height: calc(100vh - 140px);
	overflow: auto;
}
.vmo-filmstrip__label {
	font-size: 0.75rem;
	font-weight: 700;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	color: #6c757d;
	margin-bottom: 10px;
}
.vmo-filmstrip__list {
	display: flex;
	flex-direction: column;
	gap: 8px;
}
.vmo-thumb {
	display: flex;
	gap: 10px;
	align-items: center;
	width: 100%;
	text-align: left;
	border: 1px solid var(--default-line, #dee2e6);
	background: #fafbfc;
	border-radius: 8px;
	padding: 8px;
	cursor: pointer;
	transition: border-color 0.15s ease, box-shadow 0.15s ease, background 0.15s ease;
}
.vmo-thumb:hover {
	border-color: rgba(0, 150, 136, 0.55);
	background: rgba(0, 150, 136, 0.06);
}
.vmo-thumb.is-active {
	border-color: var(--primary, #009688);
	background: rgba(0, 150, 136, 0.12);
	box-shadow: inset 3px 0 0 var(--primary, #009688);
}
.vmo-thumb__preview {
	width: 56px;
	height: 56px;
	border-radius: 6px;
	overflow: hidden;
	background: #e9ecef;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
}
.vmo-thumb__preview img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}
.vmo-thumb__icon {
	color: var(--primary, #009688);
	font-size: 1.35rem;
}
.vmo-thumb__meta {
	min-width: 0;
	display: flex;
	flex-direction: column;
	gap: 2px;
}
.vmo-thumb__title {
	font-size: 0.86rem;
	font-weight: 600;
	color: var(--main-text-color, #212529);
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}
.vmo-thumb__sub {
	font-size: 0.72rem;
	color: #6c757d;
}
.vmo-stage {
	background: #fff;
	border: 1px solid var(--default-line, #dee2e6);
	border-radius: 10px;
	padding: 12px;
	display: flex;
	flex-direction: column;
	min-height: min(70vh, 640px);
}
.vmo-stage__toolbar {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 10px;
	margin-bottom: 10px;
}
.vmo-stage__caption {
	font-weight: 600;
	font-size: 0.95rem;
	color: var(--main-text-color, #212529);
	min-width: 0;
}
.vmo-stage__actions {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
}
.vmo-stage__canvas {
	flex: 1 1 auto;
	min-height: 360px;
	border-radius: 8px;
	background:
		radial-gradient(circle at top right, rgba(0, 150, 136, 0.08), transparent 40%),
		linear-gradient(180deg, #f8fafb 0%, #eef2f3 100%);
	border: 1px dashed rgba(0, 150, 136, 0.25);
	display: flex;
	align-items: center;
	justify-content: center;
	overflow: hidden;
	padding: 12px;
}
.vmo-stage__img {
	max-width: 100%;
	max-height: min(62vh, 560px);
	object-fit: contain;
	border-radius: 4px;
	box-shadow: 0 8px 28px rgba(0, 0, 0, 0.12);
	background: #fff;
}
.vmo-stage__frame {
	width: 100%;
	height: min(62vh, 560px);
	border: 0;
	border-radius: 4px;
	background: #fff;
}
.vmo-stage__fallback {
	text-align: center;
	color: #6c757d;
	padding: 24px;
	max-width: 28rem;
}
.vmo-stage__fallback i {
	font-size: 2.4rem;
	color: var(--primary, #009688);
	margin-bottom: 10px;
}
.vmo-stage__nav {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 12px;
	margin-top: 12px;
}
.vmo-stage__counter {
	font-size: 0.85rem;
	font-weight: 600;
	color: #6c757d;
	min-width: 4rem;
	text-align: center;
}
@media (max-width: 900px) {
	.vmo-layout--multi { grid-template-columns: 1fr; }
	.vmo-filmstrip { max-height: none; }
	.vmo-filmstrip__list {
		flex-direction: row;
		overflow-x: auto;
		padding-bottom: 4px;
	}
	.vmo-thumb { min-width: 210px; }
}
/* Why: theme attr may be on html and/or body (YCloudX darkSwitch). */
html[data-theme="dark"] .vmo-page,
body.vmo-page[data-theme="dark"] {
	background: #1F1F1F;
	color: #fff;
}
html[data-theme="dark"] .vmo-header__title,
body[data-theme="dark"] .vmo-header__title { color: #02b3a2; }
html[data-theme="dark"] .vmo-header__meta,
html[data-theme="dark"] .vmo-filmstrip__label,
html[data-theme="dark"] .vmo-thumb__sub,
html[data-theme="dark"] .vmo-stage__counter,
html[data-theme="dark"] .vmo-stage__fallback,
body[data-theme="dark"] .vmo-header__meta,
body[data-theme="dark"] .vmo-filmstrip__label,
body[data-theme="dark"] .vmo-thumb__sub,
body[data-theme="dark"] .vmo-stage__counter,
body[data-theme="dark"] .vmo-stage__fallback { color: #c2c2c2; }
html[data-theme="dark"] .vmo-filmstrip,
html[data-theme="dark"] .vmo-stage,
body[data-theme="dark"] .vmo-filmstrip,
body[data-theme="dark"] .vmo-stage {
	background: #262626;
	border-color: #3a3a3a;
}
html[data-theme="dark"] .vmo-thumb,
body[data-theme="dark"] .vmo-thumb {
	background: #2d2d2d;
	border-color: #3a3a3a;
}
html[data-theme="dark"] .vmo-thumb:hover,
body[data-theme="dark"] .vmo-thumb:hover {
	background: rgba(0, 150, 136, 0.16);
	border-color: #009688;
}
html[data-theme="dark"] .vmo-thumb.is-active,
body[data-theme="dark"] .vmo-thumb.is-active { background: rgba(0, 150, 136, 0.22); }
html[data-theme="dark"] .vmo-thumb__title,
html[data-theme="dark"] .vmo-stage__caption,
body[data-theme="dark"] .vmo-thumb__title,
body[data-theme="dark"] .vmo-stage__caption { color: #fff; }
html[data-theme="dark"] .vmo-thumb__preview,
body[data-theme="dark"] .vmo-thumb__preview { background: #333; }
html[data-theme="dark"] .vmo-stage__canvas,
body[data-theme="dark"] .vmo-stage__canvas {
	background:
		radial-gradient(circle at top right, rgba(0, 150, 136, 0.16), transparent 42%),
		linear-gradient(180deg, #2d2d2d 0%, #262626 100%);
	border-color: #3a3a3a;
}
html[data-theme="dark"] .vmo-stage__img,
html[data-theme="dark"] .vmo-stage__frame,
body[data-theme="dark"] .vmo-stage__img,
body[data-theme="dark"] .vmo-stage__frame {
	background: #1F1F1F;
	box-shadow: 0 8px 28px rgba(0, 0, 0, 0.45);
}

/* Assets List Setting: Select2 multiple search field defaults to ~100px and clips placeholder */
#Add_Asset .select2-selection--multiple .select2-search--inline .select2-search__field,
#Modal_Edit .select2-selection--multiple .select2-search--inline .select2-search__field {
	width: 100% !important;
}
/* Setting > Assets List Setting: readable tag chips (DB still stores pipe-separated List_Tags) */
.ref-asset-list-tags {
	display: flex;
	flex-wrap: wrap;
	gap: 4px 6px;
	align-items: center;
	max-width: 420px;
}
.ref-asset-list-tag {
	display: inline-block;
	padding: 2px 8px;
	border-radius: 999px;
	border: 1px solid rgba(var(--primary-rgb, 0, 150, 136), 0.35);
	background: rgba(var(--primary-rgb, 0, 150, 136), 0.1);
	color: var(--primary, #009688);
	font-size: 0.75rem;
	font-weight: 600;
	line-height: 1.4;
	white-space: nowrap;
	max-width: 100%;
	overflow: hidden;
	text-overflow: ellipsis;
}
[data-theme="dark"] .ref-asset-list-tag {
	border-color: rgba(var(--primary-rgb, 0, 150, 136), 0.5);
	background: rgba(var(--primary-rgb, 0, 150, 136), 0.18);
	color: #80cbc4;
}
/* Requested WO — history hint chips under WO Type / Category / SLA */
.rwo-hist-chip {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    margin-top: 6px;
    padding: 3px 10px;
    border-radius: 999px;
    border: 1px dashed color-mix(in srgb, var(--primary, #009688) 45%, transparent);
    background: color-mix(in srgb, var(--primary, #009688) 6%, transparent);
    color: var(--primary, #009688);
    font-size: 11.5px;
    line-height: 1.4;
    cursor: pointer;
    max-width: 100%;
    text-align: left;
}
.rwo-hist-chip:hover {
    background: color-mix(in srgb, var(--primary, #009688) 14%, transparent);
    border-style: solid;
}
.rwo-hist-chip__n {
    padding: 0 6px;
    border-radius: 999px;
    background: color-mix(in srgb, var(--primary, #009688) 16%, transparent);
    font-weight: 700;
}
[data-theme="dark"] .rwo-hist-chip {
    color: #02b3a2;
    border-color: color-mix(in srgb, #02b3a2 50%, transparent);
    background: color-mix(in srgb, #02b3a2 10%, transparent);
}
[data-theme="dark"] .rwo-hist-chip__n {
    background: color-mix(in srgb, #02b3a2 22%, transparent);
}
.rwo-hist-chip.is-weak {
    opacity: .7;
    border-color: color-mix(in srgb, var(--main-text-color, #6c757d) 30%, transparent);
    background: transparent;
    color: var(--main-text-color, #6c757d);
}
[data-theme="dark"] .rwo-hist-chip.is-weak {
    color: #b8c2cc;
    border-color: rgba(184, 194, 204, .35);
    background: transparent;
}

/* CM pages — "How it was fixed before" card + review flags (Include/cm_similar_ui.inc.php) */
.cms-card { border-left: 3px solid var(--primary, #009688); }
.cms-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 10px; }
.cms-title { font-weight: 700; font-size: 14px; color: var(--primary, #009688); }
.cms-sub { font-size: 11.5px; opacity: .75; margin-top: 2px; }
.cms-toggle { border: 1px solid var(--default-line, #dee2e6); background: transparent; color: inherit; border-radius: 999px; padding: 2px 10px; font-size: 11.5px; cursor: pointer; flex: 0 0 auto; }
.cms-card.is-collapsed .cms-body { display: none; }
.cms-body { margin-top: 10px; display: flex; flex-direction: column; gap: 8px; }
.cms-job { padding: 8px 10px; border-radius: 8px; border: 1px solid var(--default-line, #e5e9f0); font-size: 12.5px; }
.cms-meta { font-size: 11.5px; opacity: .85; margin-bottom: 4px; }
.cms-meta a { font-weight: 700; color: var(--primary, #009688); }
.cms-tag { padding: 0 7px; border-radius: 999px; font-size: 10.5px; font-weight: 700; color: var(--primary, #009688); background: color-mix(in srgb, var(--primary, #009688) 12%, transparent); }
.cms-row { margin-top: 2px; line-height: 1.45; word-break: break-word; }
.cms-row > span { display: inline-block; min-width: 58px; font-weight: 700; opacity: .7; margin-right: 6px; }
.cms-row--action { font-weight: 600; }
.cms-use, .cms-part { border: 1px solid color-mix(in srgb, var(--primary, #009688) 40%, transparent); background: color-mix(in srgb, var(--primary, #009688) 7%, transparent); color: var(--primary, #009688); border-radius: 999px; padding: 3px 10px; font-size: 11.5px; font-weight: 700; cursor: pointer; margin-top: 6px; }
.cms-use:hover, .cms-part:hover { background: color-mix(in srgb, var(--primary, #009688) 15%, transparent); }
.cms-parts { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.cms-parts__title { width: 100%; font-weight: 700; font-size: 12px; opacity: .8; }
.cms-part { margin-top: 0; text-align: left; }
.cms-part small { font-weight: 400; opacity: .8; }
.cms-part.is-added { opacity: .6; cursor: default; }
.cms-flags { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; font-size: 12.5px; }
.cms-flag { padding: 6px 10px; border-radius: 8px; }
.cms-flag--warn { background: rgba(245, 158, 11, .12); color: #92400e; }
.cms-flag--info { background: color-mix(in srgb, var(--primary, #009688) 8%, transparent); }
#Action_Suggestion .cms-act-n { float: right; margin-left: 8px; font-size: 10.5px; opacity: .7; }
[data-theme="dark"] .cms-title, [data-theme="dark"] .cms-meta a, [data-theme="dark"] .cms-tag, [data-theme="dark"] .cms-use, [data-theme="dark"] .cms-part { color: #02b3a2; }
[data-theme="dark"] .cms-job { border-color: rgba(255, 255, 255, .12); }
[data-theme="dark"] .cms-flag--warn { color: #fbbf24; background: rgba(245, 158, 11, .15); }

/* ── Corrective Report: Key Findings box (Corrective_Report_Findings_ui.inc.php) ── */
.cm-kf-card { background: #fff; border: 1px solid #e0e0e0; border-left: 3px solid var(--primary, #009688); border-radius: 10px; padding: .85rem 1rem; margin: 1rem 0; box-shadow: 0 1px 4px rgba(0,0,0,.06); }
.cm-kf-head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: .25rem .75rem; margin-bottom: .6rem; }
.cm-kf-title { margin: 0; font-weight: 700; font-size: .95rem; color: var(--primary, #009688); }
.cm-kf-title .fa { margin-right: .3rem; }
.cm-kf-sub { font-size: .75rem; color: #6c757d; }
.cm-kf-body { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: 1rem; align-items: start; }
.cm-kf-no-trend .cm-kf-body { grid-template-columns: 1fr; }
@media (max-width: 991px) { .cm-kf-body { grid-template-columns: 1fr; } }
.cm-kf-list { list-style: none; margin: 0; padding: 0; }
.cm-kf-item { display: flex; gap: .55rem; align-items: flex-start; padding: .38rem .55rem; margin-bottom: .3rem; border-radius: 6px; font-size: .84rem; line-height: 1.4; background: rgba(var(--primary-rgb, 0, 150, 136), .05); }
.cm-kf-item a { color: inherit; text-decoration: underline dotted; }
.cm-kf-icon { width: 1rem; text-align: center; margin-top: .15rem; flex-shrink: 0; }
.cm-kf-info .cm-kf-icon { color: var(--primary, #009688); }
.cm-kf-good { background: rgba(110,204,132,.12); } .cm-kf-good .cm-kf-icon { color: #3c9a52; }
.cm-kf-warn { background: rgba(255,200,100,.18); } .cm-kf-warn .cm-kf-icon { color: #c88c00; }
.cm-kf-bad  { background: rgba(235,151,159,.20); } .cm-kf-bad  .cm-kf-icon { color: #d9364a; }
.cm-kf-delta { font-size: .75rem; white-space: nowrap; margin-left: .15rem; }
.cm-kf-delta-good { color: #3c9a52; } .cm-kf-delta-bad { color: #d9364a; } .cm-kf-delta-flat { color: #6c757d; }
.cm-kf-skel { height: 1.6rem; margin-bottom: .35rem; border-radius: 6px; background: linear-gradient(90deg, #f1f3f5 25%, #e9ecef 37%, #f1f3f5 63%); background-size: 400% 100%; animation: cmKfSkel 1.2s ease infinite; }
@keyframes cmKfSkel { 0% { background-position: 100% 50%; } 100% { background-position: 0 50%; } }
.cm-kf-trend-title { font-size: .75rem; font-weight: 600; color: #6c757d; margin-bottom: .3rem; text-transform: uppercase; letter-spacing: .02em; }
.cm-kf-trend-canvas { position: relative; height: 200px; }
[data-theme="dark"] .cm-kf-card { background: #262626; border-color: #444; border-left-color: var(--primary, #009688); box-shadow: 0 1px 4px rgba(0,0,0,.3); }
[data-theme="dark"] .cm-kf-title { color: #02b3a2; }
[data-theme="dark"] .cm-kf-sub, [data-theme="dark"] .cm-kf-trend-title, [data-theme="dark"] .cm-kf-delta-flat { color: #a0a0a0; }
[data-theme="dark"] .cm-kf-item { color: #e2e8f0; background: rgba(255,255,255,.04); }
[data-theme="dark"] .cm-kf-good { background: rgba(110,204,132,.12); } [data-theme="dark"] .cm-kf-good .cm-kf-icon, [data-theme="dark"] .cm-kf-delta-good { color: #6ecc84; }
[data-theme="dark"] .cm-kf-warn { background: rgba(255,200,100,.12); } [data-theme="dark"] .cm-kf-warn .cm-kf-icon { color: #fbbf24; }
[data-theme="dark"] .cm-kf-bad  { background: rgba(243,62,80,.14); }   [data-theme="dark"] .cm-kf-bad .cm-kf-icon, [data-theme="dark"] .cm-kf-delta-bad { color: #f4848f; }
[data-theme="dark"] .cm-kf-info .cm-kf-icon { color: #02b3a2; }
[data-theme="dark"] .cm-kf-skel { background: linear-gradient(90deg, #2d2d2d 25%, #333 37%, #2d2d2d 63%); background-size: 400% 100%; }

/* ── Corrective Report: Summary By System Sites rate colours (same thresholds as Key Findings) ── */
#cmTableSites .cm-site-good { color: #3c9a52; font-weight: 600; }
#cmTableSites .cm-site-warn { color: #c88c00; font-weight: 600; }
#cmTableSites .cm-site-bad  { color: #d9364a; font-weight: 600; }
[data-theme="dark"] #cmTableSites .cm-site-good { color: #6ecc84; }
[data-theme="dark"] #cmTableSites .cm-site-warn { color: #fbbf24; }
[data-theme="dark"] #cmTableSites .cm-site-bad  { color: #f4848f; }

/* ── Preventive Report: site / location / section rate colours (same thresholds as Key Findings) ── */
.pm-area-good { color: #3c9a52; font-weight: 600; }
.pm-area-warn { color: #c88c00; font-weight: 600; }
.pm-area-bad  { color: #d9364a; font-weight: 600; }
[data-theme="dark"] .pm-area-good { color: #6ecc84; }
[data-theme="dark"] .pm-area-warn { color: #fbbf24; }
[data-theme="dark"] .pm-area-bad  { color: #f4848f; }

/* ── Reports (Corrective / Preventive): red text readable on dark surfaces ── */
[data-theme="dark"] .report-filter-chips-clear { color: #f4848f; }
[data-theme="dark"] #sampleTable .text-danger { color: #f4848f !important; }

/* ===== App shell motion (login.php / login-page.css: drop, slide, pop, shine, float) ===== */
@keyframes navshell-ch-drop {
  from { opacity: 0; transform: translateY(-14px) scale(0.85); }
  to { opacity: 1; transform: none; }
}
@keyframes navshell-header-in {
  from { opacity: 0; transform: translateY(-8px); }
  to { opacity: 1; transform: none; }
}
@keyframes navshell-slide {
  from { opacity: 0; transform: translateX(-18px); }
  to { opacity: 1; transform: none; }
}
@keyframes navshell-rise {
  from { opacity: 0; transform: translateY(10px); }
  to { opacity: 1; transform: none; }
}
@keyframes navshell-pop {
  0% { opacity: 0; transform: scale(0.45) rotate(-18deg); }
  70% { opacity: 1; transform: scale(1.12) rotate(6deg); }
  100% { opacity: 1; transform: none; }
}
@keyframes navshell-badge {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.16); }
}
@keyframes navshell-fade {
  from { opacity: 0; }
  to { opacity: 1; }
}
@keyframes navshell-flyout {
  from { transform: translateX(-8px); }
  to { transform: none; }
}
@keyframes navshell-page-in {
  from { opacity: 0; }
  to { opacity: 1; }
}

/*
 * main.css eases the rail and the page on 0.3s ease, and `aside { transition: 0.4s !important }`
 * animates every property on the sidebar. Share one curve so the header, rail, and page move together.
 * Open menus use a real pixel height (set in body_navigation) because max-height:100vh snaps.
 */
body.nav-anim {
  --nav-ease: cubic-bezier(0.22, 1, 0.36, 1);
}
body.nav-anim #user-header.app-sidebar,
body.nav-anim aside.app-sidebar1 {
  transition: left 0.48s var(--nav-ease), width 0.48s var(--nav-ease) !important;
}
body.nav-anim #navbar-header.app-header {
  transition: background-color 0.48s var(--nav-ease);
}
body.nav-anim #navbar-header .app-sidebar__toggle,
body.nav-anim #navbar-header .app-sidebar__toggle1,
body.nav-anim #navbar-header .app-nav__item {
  transition: background-color 0.32s var(--nav-ease), color 0.32s var(--nav-ease);
}
body.nav-anim .app-content {
  transition-property: margin-left, background-color;
  transition-duration: 0.48s;
  transition-timing-function: var(--nav-ease);
}
body.nav-anim .app-title {
  transition: background-color 0.48s var(--nav-ease), color 0.48s var(--nav-ease);
}
body.nav-anim #user-header .treeview > .treeview-menu {
  transition: max-height 0.48s var(--nav-ease);
}
body.nav-anim #user-header .treeview-indicator {
  transition-duration: 0.42s;
  transition-timing-function: var(--nav-ease);
}
@media (max-width: 1250px) {
  body.nav-anim .app-sidebar__overlay {
    opacity: 0;
    transition: opacity 0.48s var(--nav-ease), visibility 0s linear 0.48s !important;
  }
  body.nav-anim.sidenav-toggled .app-sidebar__overlay {
    opacity: 1;
    visibility: visible !important;
    transition: opacity 0.48s var(--nav-ease), visibility 0s linear 0s !important;
  }
}

body.nav-anim #navbar-header .app-sidebar__toggle > .fa,
body.nav-anim #navbar-header .app-sidebar__toggle1 > .fa,
body.nav-anim #navbar-header .app-nav__item > .fa {
  display: inline-block;
  transition: transform 0.28s cubic-bezier(0.34, 1.56, 0.64, 1);
}
/* Bell rings twice when new notifications arrive (footer_desktop.php adds .nav-bell-ring), then rests */
body.nav-anim #navbar-header #notify_show > .fa.nav-bell-ring {
  transform-origin: top center;
  animation: navshell-ring 0.9s ease-in-out 2;
}
@keyframes navshell-ring {
  0%, 100% { transform: rotate(0); }
  15% { transform: rotate(-14deg); }
  35% { transform: rotate(12deg); }
  55% { transform: rotate(-6deg); }
  75% { transform: rotate(3deg); }
}
body.nav-anim #navbar-header .support-open-badge.is-on {
  animation: navshell-badge 1.6s ease-in-out 3;
}
body.nav-anim #user-header .app-menu > li > a.app-menu__item,
body.nav-anim #user-header a.treeview-item {
  transition: border-left-color 0.36s var(--nav-ease), background-color 0.36s var(--nav-ease), color 0.36s var(--nav-ease), transform 0.36s var(--nav-ease);
}
body.nav-anim #user-header .app-menu__icon,
body.nav-anim #user-header a.treeview-item > .icon {
  transition: transform 0.3s cubic-bezier(0.22, 1, 0.36, 1);
}
body.nav-anim #user-header .app-sidebar__user-avatar {
  transition: transform 0.3s cubic-bezier(0.22, 1, 0.36, 1);
}
body.nav-anim #user-header .app-sidebar__user:hover .app-sidebar__user-avatar {
  transform: scale(1.06);
}
body.nav-anim #user-header .app-menu > li > a.app-menu__item:hover,
body.nav-anim #user-header .app-menu > li > a.app-menu__item:focus-visible,
body.nav-anim #user-header a.treeview-item:hover,
body.nav-anim #user-header a.treeview-item:focus-visible {
  transform: translateX(4px);
}
body.nav-anim #user-header a.app-menu__item:hover .app-menu__icon,
body.nav-anim #user-header a.app-menu__item:focus-visible .app-menu__icon,
body.nav-anim #user-header a.treeview-item:hover > .icon,
body.nav-anim #user-header a.treeview-item:focus-visible > .icon {
  transform: scale(1.12) rotate(-8deg);
}
body.nav-anim #user-header .treeview.is-expanded.nav-menu-opened > .treeview-menu > li:not(.treeview-menu-parent-heading) {
  animation: navshell-rise 0.34s cubic-bezier(0.22, 1, 0.36, 1) backwards;
  animation-delay: calc(var(--open-i, 0) * 30ms);
}
body.nav-anim #user-header .treeview.is-expanded > .treeview-menu > li:nth-child(2) { --open-i: 1; }
body.nav-anim #user-header .treeview.is-expanded > .treeview-menu > li:nth-child(3) { --open-i: 2; }
body.nav-anim #user-header .treeview.is-expanded > .treeview-menu > li:nth-child(4) { --open-i: 3; }
body.nav-anim #user-header .treeview.is-expanded > .treeview-menu > li:nth-child(5) { --open-i: 4; }
body.nav-anim #user-header .treeview.is-expanded > .treeview-menu > li:nth-child(6) { --open-i: 5; }
body.nav-anim #user-header .treeview.is-expanded > .treeview-menu > li:nth-child(7) { --open-i: 6; }
body.nav-anim #user-header .treeview.is-expanded > .treeview-menu > li:nth-child(n+8) { --open-i: 7; }
body.nav-anim #user-header .app-sidebar__footer-link {
  transition: color 0.25s ease, transform 0.3s cubic-bezier(0.22, 1, 0.36, 1);
}
body.nav-anim #user-header .app-sidebar__footer-link:hover,
body.nav-anim #user-header .app-sidebar__footer-link:focus-visible {
  color: #fff;
  transform: translateY(-1px);
}
body.nav-anim #navbar-header .app-header-dropdown-menu.dropdown-menu.show,
body.nav-anim #navbar-header li.app-header-dropdown--notify:hover > #notification_dropdown {
  animation: navshell-fade 0.22s ease;
}

body.nav-anim-enter:not(.page-skeleton-active) #navbar-header .app-header__logo {
  overflow: visible;
  animation: none;
  transition: none;
}
body.nav-anim-enter:not(.page-skeleton-active) #navbar-header .app-header__logo .nav-brand-ch {
  display: inline-block;
  color: inherit;
  animation: navshell-ch-drop 0.6s cubic-bezier(0.2, 0.9, 0.25, 1.2) both;
  animation-delay: calc(0.12s + var(--i) * 70ms);
}
body.nav-anim-enter:not(.page-skeleton-active) #navbar-header .app-sidebar__toggle > .fa,
body.nav-anim-enter:not(.page-skeleton-active) #navbar-header .app-sidebar__toggle1 > .fa,
body.nav-anim-enter:not(.page-skeleton-active) #navbar-header .app-nav__item > .fa {
  animation: navshell-header-in 0.45s var(--nav-ease) both;
  transition: none;
}
body.nav-anim-enter:not(.page-skeleton-active) #user-header .app-sidebar__user {
  animation: navshell-slide 0.5s cubic-bezier(0.22, 1, 0.36, 1) 0.06s backwards;
}
body.nav-anim-enter:not(.page-skeleton-active) #user-header .app-sidebar__user-avatar {
  animation: navshell-pop 0.55s cubic-bezier(0.34, 1.56, 0.64, 1) 0.16s backwards;
}
body.nav-anim-enter:not(.page-skeleton-active) #user-header .app-sidebar__footer {
  animation: navshell-rise 0.5s cubic-bezier(0.22, 1, 0.36, 1) 0.4s backwards;
}
body.nav-anim-enter:not(.page-skeleton-active) .app-content {
  animation: navshell-page-in 0.7s var(--nav-ease) both;
}

body.nav-anim #navbar-header .app-sidebar__toggle:hover > .fa,
body.nav-anim #navbar-header .app-sidebar__toggle:focus-visible > .fa,
body.nav-anim #navbar-header .app-sidebar__toggle1:hover > .fa,
body.nav-anim #navbar-header .app-sidebar__toggle1:focus-visible > .fa,
body.nav-anim #navbar-header .app-nav__item:hover > .fa,
body.nav-anim #navbar-header .app-nav__item:focus-visible > .fa {
  animation: none;
  transform: scale(1.14) rotate(-8deg);
}

@media (min-width: 1250px) {
  body.nav-anim.sidebar-mini.sidenav-toggled #user-header .app-menu > li > a.app-menu__item:hover,
  body.nav-anim.sidebar-mini.sidenav-toggled #user-header .app-menu > li > a.app-menu__item:focus-visible {
    transform: none;
  }
  body.nav-anim.sidebar-mini.sidenav-toggled #user-header .treeview.is-expanded > .treeview-menu > li,
  body.nav-anim.sidebar-mini.sidenav-toggled #user-header .treeview:hover > .treeview-menu > li {
    animation: none;
  }
  body.nav-anim.sidebar-mini.sidenav-toggled #user-header .treeview.is-expanded > ul.treeview-menu,
  body.nav-anim.sidebar-mini.sidenav-toggled #user-header .treeview:hover > ul.treeview-menu {
    animation: navshell-flyout 0.28s cubic-bezier(0.22, 1, 0.36, 1);
  }
  body.nav-anim.sidebar-mini.sidenav-toggled #user-header .app-menu__label {
    transition: opacity 0.28s var(--nav-ease);
  }
}

@media (prefers-reduced-motion: reduce) {
  body.nav-anim #navbar-header .app-header__logo .nav-brand-ch {
    opacity: 1;
    filter: none;
    transform: none;
    background: none;
    -webkit-text-fill-color: currentColor;
    color: inherit;
  }
  body.nav-anim #navbar-header .app-header__logo,
  body.nav-anim #navbar-header .app-header__logo .nav-brand-ch,
  body.nav-anim #navbar-header .app-sidebar__toggle > .fa,
  body.nav-anim #navbar-header .app-sidebar__toggle1 > .fa,
  body.nav-anim #navbar-header .app-nav__item > .fa,
  body.nav-anim #navbar-header .support-open-badge.is-on,
  body.nav-anim #user-header .app-sidebar__user,
  body.nav-anim #user-header .app-sidebar__user-avatar,
  body.nav-anim #user-header .app-menu > li,
  body.nav-anim #user-header .treeview-menu > li,
  body.nav-anim #user-header .treeview-menu,
  body.nav-anim #user-header .app-sidebar__footer,
  body.nav-anim #user-header .app-sidebar__footer-favicon,
  body.nav-anim #navbar-header .app-header-dropdown-menu,
  body.nav-anim .app-content,
  body.nav-anim .app-title,
  body.nav-anim .app-sidebar,
  body.nav-anim .app-sidebar1,
  body.nav-anim .app-sidebar__overlay,
  body.nav-anim #navbar-header.app-header,
  body.nav-anim #navbar-header .app-sidebar__toggle,
  body.nav-anim #navbar-header .app-sidebar__toggle1,
  body.nav-anim #navbar-header .app-nav__item,
  body.nav-anim #user-header .treeview-menu,
  body.nav-anim #user-header .treeview-indicator {
    animation: none !important;
    transition: none !important;
  }
}
@media print {
  body.nav-anim #user-header .app-sidebar__footer-favicon {
    animation: none !important;
  }
}
/* ── Global QR Scanner (app/Scanner.php) ── */
.qrs-tile { padding: 16px; }
.qrs-stage { position: relative; width: 100%; aspect-ratio: 1 / 1; max-height: 70vh; border-radius: 12px; overflow: hidden; background: #111; }
.qrs-stage video { width: 100%; height: 100%; object-fit: cover; display: block; }
.qrs-frame { position: absolute; inset: 15%; border: 3px solid var(--primary, #009688); border-radius: 14px; box-shadow: 0 0 0 9999px rgba(0, 0, 0, 0.35); opacity: 0; transition: opacity .2s; pointer-events: none; }
.qrs-hint { position: absolute; left: 0; right: 0; bottom: 10px; text-align: center; color: #fff; font-size: 13px; text-shadow: 0 1px 2px rgba(0, 0, 0, .6); opacity: 0; transition: opacity .2s; pointer-events: none; }
.qrs-idle { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; color: rgba(255, 255, 255, .25); font-size: 96px; }
.qrs-stage.is-live .qrs-frame, .qrs-stage.is-live .qrs-hint { opacity: 1; }
.qrs-stage.is-live .qrs-idle { display: none; }
.qrs-controls { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; margin: 12px 0; }
.qrs-result { border: 1px solid var(--default-line, #eee); border-left: 4px solid var(--secondary, #6c757d); border-radius: 8px; padding: 10px 12px; margin-bottom: 12px; }
.qrs-result--ok, .qrs-result--busy { border-left-color: var(--primary, #009688); }
.qrs-result--multiple { border-left-color: var(--label-primary, #337ab7); }
.qrs-result--denied, .qrs-result--error { border-left-color: #d9364a; }
.qrs-result--external, .qrs-result--empty { border-left-color: #f0ad4e; }
.qrs-result__code { font-size: 12px; color: var(--secondary, #6c757d); word-break: break-all; margin-bottom: 4px; }
.qrs-result__code-lbl { font-weight: 600; }
.qrs-result__msg { font-weight: 600; }
.qrs-matches { margin-top: 8px; }
.qrs-matches .list-group-item { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.qrs-matches__mod { background: var(--primary, #009688); }
.qrs-matches__title { font-weight: 600; }
.qrs-matches__sub { color: var(--secondary, #6c757d); width: 100%; }
.qrs-again, .qrs-external { margin-top: 8px; margin-right: 6px; }
.qrs-manual label { font-size: 13px; color: var(--secondary, #6c757d); }
[data-theme="dark"] .qrs-result { border-color: #3a3a3a; background: #1e1e1e; color: #e4e4e4; }
[data-theme="dark"] .qrs-result--ok, [data-theme="dark"] .qrs-result--busy { border-left-color: var(--primary, #009688); }
[data-theme="dark"] .qrs-result--multiple { border-left-color: #5b9bd5; }
[data-theme="dark"] .qrs-result--denied, [data-theme="dark"] .qrs-result--error { border-left-color: #f4848f; }
[data-theme="dark"] .qrs-result--external, [data-theme="dark"] .qrs-result--empty { border-left-color: #fbbf24; }
[data-theme="dark"] .qrs-result__code, [data-theme="dark"] .qrs-matches__sub, [data-theme="dark"] .qrs-manual label { color: #a8a8a8; }
[data-theme="dark"] .qrs-matches .list-group-item { background: #252525; border-color: #3a3a3a; color: #e4e4e4; }
.qrs-result--visitor { border-left-color: var(--primary, #009688); }
.qrs-visitor__name { font-size: 18px; font-weight: 700; }
.qrs-visitor__sub, .qrs-visitor__state { color: var(--secondary, #6c757d); font-size: 13px; }
.qrs-visitor__state { margin-top: 4px; }
.qrs-visitor__actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; }
[data-theme="dark"] .qrs-visitor__sub, [data-theme="dark"] .qrs-visitor__state { color: #a8a8a8; }

/* ── Work-order scan-to-fill popup (Include/qr_form_fill.js) ── */
.ycx-qrf-trigger { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-bottom: 8px; }
.ycx-qrf-note { color: var(--primary, #009688); font-weight: 600; }
.ycx-qrf-note:empty { display: none; }
body.ycx-qrf-open { overflow: hidden; }
.ycx-qrf { position: fixed; inset: 0; z-index: 2000; display: flex; align-items: center; justify-content: center; padding: 16px; background: rgba(0, 0, 0, 0.6); }
.ycx-qrf[hidden] { display: none; }
.ycx-qrf__panel { width: 100%; max-width: 420px; max-height: calc(100vh - 32px); overflow-y: auto; background: #fff; color: #212529; border-radius: 12px; padding: 12px; box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3); }
.ycx-qrf__head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 8px; }
.ycx-qrf__title { font-weight: 700; }
.ycx-qrf__close { border: 0; background: transparent; font-size: 18px; line-height: 1; padding: 4px 8px; color: inherit; cursor: pointer; }
.ycx-qrf__stage { position: relative; width: 100%; aspect-ratio: 1 / 1; border-radius: 10px; overflow: hidden; background: #111; }
.ycx-qrf__stage video { width: 100%; height: 100%; object-fit: cover; display: block; }
.ycx-qrf__frame { position: absolute; inset: 15%; border: 3px solid var(--primary, #009688); border-radius: 14px; box-shadow: 0 0 0 9999px rgba(0, 0, 0, 0.35); opacity: 0; transition: opacity .2s; pointer-events: none; }
.ycx-qrf__hint { position: absolute; left: 0; right: 0; bottom: 8px; text-align: center; color: #fff; font-size: 13px; text-shadow: 0 1px 2px rgba(0, 0, 0, .6); opacity: 0; pointer-events: none; }
.ycx-qrf__stage.is-live .ycx-qrf__frame, .ycx-qrf__stage.is-live .ycx-qrf__hint { opacity: 1; }
.ycx-qrf__switch { margin-top: 8px; }
.ycx-qrf__result { margin-top: 10px; border: 1px solid var(--default-line, #eee); border-left: 4px solid var(--secondary, #6c757d); border-radius: 8px; padding: 8px 10px; }
.ycx-qrf__result--ok, .ycx-qrf__result--busy { border-left-color: var(--primary, #009688); }
.ycx-qrf__result--multiple { border-left-color: var(--label-primary, #337ab7); }
.ycx-qrf__result--denied, .ycx-qrf__result--error { border-left-color: #d9364a; }
.ycx-qrf__result--empty { border-left-color: #f0ad4e; }
.ycx-qrf__msg { font-weight: 600; }
.ycx-qrf__choices { margin-top: 8px; }
.ycx-qrf__choices .list-group-item { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; text-align: left; }
.ycx-qrf__mod { background: var(--primary, #009688); }
.ycx-qrf__choice-title { font-weight: 600; }
.ycx-qrf__choice-sub { color: var(--secondary, #6c757d); width: 100%; }
.ycx-qrf__again { margin-top: 8px; }
.ycx-qrf__manual { margin-top: 10px; }
[data-theme="dark"] .ycx-qrf__panel { background: #252525; color: #e4e4e4; }
[data-theme="dark"] .ycx-qrf__result { border-color: #3a3a3a; background: #1e1e1e; }
[data-theme="dark"] .ycx-qrf__result--ok, [data-theme="dark"] .ycx-qrf__result--busy { border-left-color: var(--primary, #009688); }
[data-theme="dark"] .ycx-qrf__result--multiple { border-left-color: #5b9bd5; }
[data-theme="dark"] .ycx-qrf__result--denied, [data-theme="dark"] .ycx-qrf__result--error { border-left-color: #f4848f; }
[data-theme="dark"] .ycx-qrf__result--empty { border-left-color: #fbbf24; }
[data-theme="dark"] .ycx-qrf__choices .list-group-item { background: #2a2a2a; border-color: #3a3a3a; color: #e4e4e4; }
[data-theme="dark"] .ycx-qrf__choice-sub { color: #a8a8a8; }
.ycx-qrf__tally { margin-top: 10px; border: 1px solid var(--default-line, #eee); border-radius: 8px; padding: 6px 10px; }
.ycx-qrf__tally-head { font-size: 12px; font-weight: 600; color: var(--secondary, #6c757d); margin-bottom: 4px; }
.ycx-qrf__tally-row { display: flex; justify-content: space-between; align-items: center; gap: 8px; padding: 2px 0; }
.ycx-qrf__tally-row .badge { background: var(--primary, #009688); }
.ycx-qrf__done { margin-top: 10px; width: 100%; }
[data-theme="dark"] .ycx-qrf__tally { border-color: #3a3a3a; background: #1e1e1e; }
[data-theme="dark"] .ycx-qrf__tally-head { color: #a8a8a8; }

/* External request.php: keep wait overlay up until the POST finishes */
#Form_Loader.req-submit-lock {
  display: block !important;
}
#Form_Loader.req-submit-lock::before {
  content: '';
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.35);
  z-index: -1;
}
[data-theme="dark"] #Form_Loader.req-submit-lock::before {
  background: rgba(0, 0, 0, 0.55);
}

/* Form Overview Settings: save bar sits in document flow after all tiles */
.ov-settings-page form > .row {
    align-items: flex-start;
}
.ov-settings-page .ov-save-actions {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 10px;
    position: relative;
    z-index: 1;
    width: 100%;
    max-width: 520px;
    margin: 8px auto 32px;
    padding: 22px 18px;
    border: 1px solid var(--default-line, #e3eaf0);
    border-radius: 14px;
    background: #fff;
    text-align: center;
}
.ov-settings-page .ov-save-actions .btn {
    background: var(--primary, #009688);
    border-color: var(--primary, #009688);
}
.ov-settings-page .ov-save-actions .btn:hover {
    background: var(--a-href-hover, #004a43);
    border-color: var(--a-href-hover, #004a43);
}
[data-theme="dark"] .ov-settings-page .ov-save-actions {
    background: #262626;
    border-color: #3a3a3a;
}

/* Assets List — Delete Additional Info modal label list */
.ai-bulk-labels {
  max-height: 320px;
  overflow-y: auto;
  border-color: var(--default-line, #dee2e6) !important;
}

/* PM / CM picture timestamp caption (wo_picture_stamp.php) */
.wo-pic-stamp {
    display: block;
    margin-top: 4px;
    font-size: 11px;
    line-height: 1.3;
    text-align: center;
    color: #6c757d;
    white-space: normal;
}

.wo-pic-stamp .fa {
    color: var(--primary);
}

.wo-pic-stamp-old,
.wo-pic-stamp-old .fa {
    color: #e65100;
}

[data-theme="dark"] .wo-pic-stamp {
    color: rgba(255, 255, 255, 0.6);
}

[data-theme="dark"] .wo-pic-stamp-old,
[data-theme="dark"] .wo-pic-stamp-old .fa {
    color: #ffcc80;
}

.report-image-card > .wo-pic-stamp {
    padding: 0 8px 8px;
}

/* Blurred header banner reuses the upload response; keep the caption off it */
.img-header .wo-pic-stamp {
    display: none;
}