:root {
    --primary: #84c708;
    --primary-dark: #0b0f10;
    --secondary: #b5ed45;
    --bg: #f3f6f1;
    --card: #ffffff;
    --text: #131919;
    --muted: #697474;
    --border: #e2e8df;
    --sidebar-width: 292px;
    --sidebar-collapsed-width: 84px;
    --topbar-height: 78px;

    /* Facility Pro enterprise type system */
    --fp-font-family: "IBM Plex Sans Arabic", "IBM Plex Sans", "Segoe UI", Tahoma, Arial, sans-serif;
    --fp-font-display: "IBM Plex Sans Arabic", "IBM Plex Sans", "Segoe UI", Tahoma, Arial, sans-serif;
}
html, body {
    height: 100%;
    overflow: hidden; /* åÐÇ Ãåã ÓØÑ */
}
body {
    margin: 0;
    background: var(--bg);
    color: var(--text);
    font-family: var(--fp-font-family);
    font-weight: 400;
    line-height: 1.55;
    text-rendering: optimizeLegibility;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

button,
input,
select,
textarea,
.form-control,
.form-select,
.btn,
.dropdown-menu,
.modal,
.toast,
.tooltip,
.popover,
.saas-page-container {
    font-family: var(--fp-font-family);
}

h1, h2, h3, h4, h5, h6,
.page-title,
.card-title,
.modal-title,
.brand-title {
    font-family: var(--fp-font-display);
    font-weight: 600;
    letter-spacing: -0.015em;
}

.btn,
.nav-item,
.form-label,
.table thead th,
table thead th {
    font-weight: 500;
}

code, kbd, pre, samp {
    font-family: "IBM Plex Mono", Consolas, "Courier New", monospace;
}

.fm-number,
.metric-value,
.kpi-value,
.badge,
.table td {
    font-variant-numeric: tabular-nums;
}

/*.app-shell {
    min-height: 100vh;
    display: flex;
    background: var(--bg);
    overflow: hidden;*/ /* ãåã ÌÏÇ */
/*}*/
.app-shell {
    height: 100vh; /* ÈÏá min-height */
    display: flex;
    overflow: hidden;
    background: var(--bg);
}

    .app-shell.rtl {
        direction: rtl;
    }

    .app-shell.ltr {
        direction: ltr;
    }

/* Sidebar */
.app-sidebar {
    width: var(--sidebar-width);
    height: 100vh;
    background: linear-gradient(180deg, var(--primary-dark), var(--primary));
    color: #fff;
    position: relative;
    top: 0;
    display: flex;
    flex-direction: column;
    transition: width .25s ease;
    box-shadow: 0 15px 40px rgba(15, 61, 94, .25);
    z-index: 1000;
    overflow: hidden; /* áÇ ÊÌÚá ßá ÇáÜ sidebar íÓßÑæá */
}

.sidebar-collapsed .app-sidebar {
    width: var(--sidebar-collapsed-width);
}

.sidebar-brand {
    height: var(--topbar-height);
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 0 20px;
    border-bottom: 1px solid rgba(255,255,255,.12);
}

.brand-icon {
    width: 42px;
    height: 42px;
    border-radius: 14px;
    background: rgba(244, 182, 63, .18);
    color: var(--secondary);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 22px;
    flex-shrink: 0;
}

.brand-title {
    font-size: 17px;
    font-weight: 800;
    line-height: 1.1;
}

.brand-subtitle {
    font-size: 11px;
    color: rgba(255,255,255,.65);
    margin-top: 3px;
}

.sidebar-nav {
    padding: 16px 12px;
    flex: 1;
    overflow-y: auto;
    overflow-x: hidden;
}

.nav-section {
    font-size: 11px;
    color: rgba(255,255,255,.45);
    padding: 14px 12px 8px;
    text-transform: uppercase;
    letter-spacing: .8px;
}

.sidebar-collapsed .nav-section,
.sidebar-collapsed .nav-item span,
.sidebar-collapsed .brand-title,
.sidebar-collapsed .brand-subtitle,
.sidebar-collapsed .user-info {
    display: none;
}

.nav-item {
    height: 44px;
    color: rgba(255,255,255,.78);
    text-decoration: none;
    border-radius: 14px;
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 0 14px;
    margin-bottom: 6px;
    transition: all .2s ease;
    font-size: 14px;
}

    .nav-item i {
        font-size: 18px;
        width: 22px;
        text-align: center;
    }

    .nav-item:hover {
        background: rgba(255,255,255,.10);
        color: #fff;
    }

    .nav-item.active {
        background: linear-gradient(90deg, var(--secondary), #ffd76d);
        color: #172033;
        font-weight: 700;
        box-shadow: 0 8px 20px rgba(244, 182, 63, .28);
    }

.sidebar-footer {
    padding: 14px;
    border-top: 1px solid rgba(255,255,255,.12);
}

.collapse-btn {
    width: 100%;
    height: 42px;
    border: 0;
    border-radius: 14px;
    background: rgba(255,255,255,.10);
    color: #fff;
}

/* Main */
.app-main {
    flex: 1;
    min-width: 0;
}

.app-topbar {
    height: var(--topbar-height);
    background: rgba(255,255,255,.92);
    backdrop-filter: blur(14px);
    border-bottom: 1px solid var(--border);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
    padding: 0 24px;
    position: sticky;
    top: 0;
    z-index: 900;
    flex-shrink: 0;
}

.topbar-left,
.topbar-actions {
    display: flex;
    align-items: center;
    gap: 14px;
}

.mobile-menu-btn {
    width: 42px;
    height: 42px;
    border: 1px solid var(--border);
    background: #fff;
    border-radius: 14px;
    font-size: 22px;
}

.page-heading h5 {
    margin: 0;
    font-weight: 800;
    color: var(--text);
}

.page-heading span {
    font-size: 12px;
    color: var(--muted);
}

.topbar-center {
    flex: 1;
    max-width: 520px;
}

.global-search {
    height: 44px;
    background: #f6f8fc;
    border: 1px solid var(--border);
    border-radius: 16px;
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 0 14px;
}

    .global-search i {
        color: var(--muted);
    }

    .global-search input {
        border: 0;
        outline: none;
        background: transparent;
        width: 100%;
        font-size: 14px;
    }

.icon-btn {
    min-width: 42px;
    height: 42px;
    border: 1px solid var(--border);
    background: #fff;
    border-radius: 14px;
    color: var(--text);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    position: relative;
}

    .icon-btn:hover {
        background: #f8fafc;
    }

.notification-btn .notify-dot {
    width: 9px;
    height: 9px;
    background: #ef4444;
    border: 2px solid #fff;
    border-radius: 50%;
    position: absolute;
    top: 9px;
    right: 10px;
}

.rtl .notification-btn .notify-dot {
    right: auto;
    left: 10px;
}

.user-box {
    height: 46px;
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 4px 10px;
    border-radius: 18px;
    background: #f8fafc;
    border: 1px solid var(--border);
}

.user-avatar {
    width: 36px;
    height: 36px;
    border-radius: 13px;
    background: linear-gradient(135deg, var(--primary), var(--secondary));
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 800;
    font-size: 13px;
}

.user-info {
    display: flex;
    flex-direction: column;
    line-height: 1.1;
}

    .user-info strong {
        font-size: 13px;
    }

    .user-info span {
        font-size: 11px;
        color: var(--muted);
    }

/* Content */
.app-content {
    flex: 1;
    overflow-y: auto;
    overflow-x: hidden;
    padding: 24px;
}

/* Cards style for pages */
.fm-card {
    background: var(--card);
    border: 1px solid var(--border);
    border-radius: 22px;
    box-shadow: 0 12px 30px rgba(15, 23, 42, .05);
    padding: 20px;
}

.fm-page-title {
    font-weight: 800;
    margin-bottom: 4px;
}

.fm-page-subtitle {
    color: var(--muted);
    font-size: 13px;
}

/* Responsive */
@media (max-width: 992px) {
    .app-sidebar {
        position: fixed;
        transform: translateX(-100%);
    }

    .rtl .app-sidebar {
        transform: translateX(100%);
    }

    .sidebar-collapsed .app-sidebar {
        transform: translateX(0);
        width: var(--sidebar-width);
    }

    .topbar-center {
        display: none;
    }

    .user-info {
        display: none;
    }

    .app-content {
        padding: 16px;
    }
}

@media (max-width: 576px) {
    .page-heading span {
        display: none;
    }

    .icon-btn span {
        display: none;
    }

    .app-topbar {
        padding: 0 12px;
    }
}

.nav-parent {
    height: 44px;
    color: rgba(255,255,255,.78);
    border-radius: 14px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 14px;
    margin-bottom: 6px;
    cursor: pointer;
    transition: all .2s ease;
    font-size: 14px;
}

    .nav-parent > div {
        display: flex;
        align-items: center;
        gap: 12px;
    }

    .nav-parent i {
        font-size: 18px;
    }

    .nav-parent:hover {
        background: rgba(255,255,255,.10);
        color: #fff;
    }

.nav-children {
    margin: 2px 0 10px;
    padding-inline-start: 18px;
}

.nav-child {
    height: 36px;
    color: rgba(255,255,255,.65);
    text-decoration: none;
    border-radius: 12px;
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 0 12px;
    margin-bottom: 4px;
    font-size: 13px;
    transition: all .2s ease;
}

    .nav-child i {
        font-size: 9px;
    }

    .nav-child:hover {
        background: rgba(255,255,255,.08);
        color: #fff;
    }

    .nav-child.active {
        background: rgba(244,182,63,.18);
        color: #ffd76d;
        font-weight: 700;
    }

.sidebar-collapsed .nav-parent {
    justify-content: center;
    padding: 0;
}

    .sidebar-collapsed .nav-parent span,
    .sidebar-collapsed .nav-parent .bi-chevron-down,
    .sidebar-collapsed .nav-parent .bi-chevron-up,
    .sidebar-collapsed .nav-children {
        display: none;
    }
 

    /* ÊÍÓíä Ôßá ÇáÇÓßÑæá */
    .sidebar-nav::-webkit-scrollbar {
        width: 6px;
    }

    .sidebar-nav::-webkit-scrollbar-thumb {
        background: rgba(255,255,255,.25);
        border-radius: 10px;
    }

        .sidebar-nav::-webkit-scrollbar-thumb:hover {
            background: rgba(255,255,255,.4);
        }
.app-main {
    flex: 1;
    height: 100vh;
    display: flex;
    flex-direction: column;
    overflow: hidden; /* ãåã */
}
 

    /* Scroll Ìãíá */
    .app-content::-webkit-scrollbar {
        width: 8px;
    }

    .app-content::-webkit-scrollbar-thumb {
        background: #cbd5e1;
        border-radius: 10px;
    }

        .app-content::-webkit-scrollbar-thumb:hover {
            background: #94a3b8;
        }

 
.sidebar-nav,
.app-content {
    scroll-behavior: smooth;
}
.sidebar-nav {
    position: relative;
}

    .sidebar-nav::after {
        content: "";
        position: sticky;
        bottom: 0;
        height: 20px;
        display: block;
        background: linear-gradient(to bottom, transparent, rgba(0,0,0,0.2));
    }

.fm-page {
    animation: fadeIn .25s ease;
}

.fm-page-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 16px;
    margin-bottom: 18px;
}

    .fm-page-header h3 {
        margin: 0;
        font-weight: 900;
        color: var(--text);
    }

    .fm-page-header p {
        margin: 5px 0 0;
        color: var(--muted);
        font-size: 14px;
    }

.fm-action-btn {
    border-radius: 14px;
    padding: 10px 18px;
    font-weight: 700;
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

.fm-stats-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 14px;
}

.fm-stat-card {
    background: #fff;
    border: 1px solid var(--border);
    border-radius: 22px;
    padding: 16px;
    display: flex;
    align-items: center;
    gap: 14px;
    box-shadow: 0 12px 30px rgba(15, 23, 42, .05);
}

.stat-icon {
    width: 46px;
    height: 46px;
    border-radius: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-size: 22px;
}

.bg-blue {
    background: linear-gradient(135deg, #6b9f08, #b5ed45);
}

.bg-green {
    background: linear-gradient(135deg, #16a34a, #4ade80);
}

.bg-orange {
    background: linear-gradient(135deg, #ea580c, #fbbf24);
}

.fm-stat-card span {
    color: var(--muted);
    font-size: 13px;
}

.fm-stat-card strong {
    display: block;
    font-size: 24px;
    font-weight: 900;
}

.fm-toolbar {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 16px;
}

.fm-search-box {
    height: 44px;
    flex: 1;
    max-width: 420px;
    background: #f8fafc;
    border: 1px solid var(--border);
    border-radius: 15px;
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 0 14px;
}

    .fm-search-box i {
        color: var(--muted);
    }

    .fm-search-box input {
        border: 0;
        outline: none;
        background: transparent;
        width: 100%;
    }

.fm-table {
    margin: 0;
}

    .fm-table thead th {
        background: #f8fafc;
        color: #64748b;
        font-size: 12px;
        text-transform: uppercase;
        border-bottom: 1px solid var(--border);
    }

    .fm-table tbody td {
        padding: 14px 12px;
    }

.fm-code {
    background: #eef2ff;
    color: #3730a3;
    padding: 6px 10px;
    border-radius: 999px;
    font-weight: 700;
    font-size: 12px;
}

.fm-soft-badge {
    background: #f1f5f9;
    color: #334155;
    border-radius: 999px;
    padding: 6px 10px;
    font-size: 12px;
    font-weight: 700;
}

.fm-loading,
.fm-empty {
    min-height: 180px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    gap: 12px;
    color: var(--muted);
}

    .fm-empty i {
        font-size: 42px;
        color: #cbd5e1;
    }

@keyframes fadeIn {
    from {
        opacity: 0;
        transform: translateY(8px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@media (max-width: 992px) {
    .fm-page-header {
        flex-direction: column;
        align-items: stretch;
    }

    .fm-stats-grid {
        grid-template-columns: 1fr;
    }

    .fm-toolbar {
        flex-direction: column;
    }

    .fm-search-box {
        max-width: 100%;
    }
}
.fm-criticality {
    border-radius: 999px;
    padding: 6px 10px;
    font-size: 12px;
    font-weight: 800;
}

    .fm-criticality.low {
        background: #ecfdf5;
        color: #047857;
    }

    .fm-criticality.medium {
        background: #f5fbe9;
        color: #527900;
    }

    .fm-criticality.high {
        background: #fff7ed;
        color: #c2410c;
    }

    .fm-criticality.critical {
        background: #fef2f2;
        color: #b91c1c;
    }

    .fm-criticality.none {
        background: #f1f5f9;
        color: #64748b;
    }
.fm-preview-box {
    background: #f8fafc;
    border: 1px dashed var(--border);
    border-radius: 18px;
    padding: 16px;
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.incident-details {
    background: #fff;
}

.details-header {
    background: linear-gradient(135deg, #f8fafc, #eef2ff);
    border: 1px solid var(--border);
    border-radius: 22px;
    padding: 22px;
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 16px;
}

.details-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 14px;
}

.details-item {
    background: #f8fafc;
    border: 1px solid var(--border);
    border-radius: 18px;
    padding: 16px;
}

    .details-item span {
        display: block;
        color: var(--muted);
        font-size: 12px;
        margin-bottom: 6px;
    }

    .details-item strong {
        font-size: 14px;
        color: var(--text);
    }

@media (max-width: 992px) {
    .details-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .details-header {
        flex-direction: column;
    }
}

@media (max-width: 576px) {
    .details-grid {
        grid-template-columns: 1fr;
    }
}
.status-change-box {
    background: #fff;
}

.status-timeline {
    position: relative;
    padding-inline-start: 20px;
}

.timeline-item {
    position: relative;
    padding-bottom: 18px;
    padding-inline-start: 22px;
    border-inline-start: 2px solid #e2e8f0;
}

.timeline-dot {
    width: 12px;
    height: 12px;
    background: var(--primary);
    border: 3px solid #fff;
    box-shadow: 0 0 0 2px #cbd5e1;
    border-radius: 50%;
    position: absolute;
    inset-inline-start: -7px;
    top: 4px;
}

.timeline-content {
    background: #f8fafc;
    border: 1px solid var(--border);
    border-radius: 16px;
    padding: 14px;
}
.fm-table-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    padding-bottom: 12px;
    border-bottom: 1px solid var(--border);
}

    .fm-table-actions .btn {
        border-radius: 12px;
        font-weight: 700;
        display: inline-flex;
        align-items: center;
        gap: 7px;
    }

.fm-selected-row {
    background: #eef6ff !important;
}

    .fm-selected-row td {
        border-color: #d9f6a1;
    }

.incident-attachments-box {
    background: #f8fafc;
    border: 1px solid var(--border);
    border-radius: 20px;
    padding: 16px;
}

.attachments-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 16px;
    margin-bottom: 14px;
}

    .attachments-header h6 {
        margin: 0;
        font-weight: 900;
    }

    .attachments-header small {
        color: var(--muted);
    }

.attachment-upload-btn {
    border-radius: 12px;
    font-weight: 700;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    cursor: pointer;
}

.attachments-empty {
    min-height: 120px;
    border: 1px dashed var(--border);
    border-radius: 18px;
    background: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    gap: 8px;
    color: var(--muted);
}

    .attachments-empty i {
        font-size: 34px;
        color: #cbd5e1;
    }

.attachments-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
}

.attachment-card {
    background: #fff;
    border: 1px solid var(--border);
    border-radius: 16px;
    padding: 12px;
    display: grid;
    grid-template-columns: 42px 1fr auto;
    align-items: center;
    gap: 12px;
}

.attachment-icon {
    width: 42px;
    height: 42px;
    border-radius: 14px;
    background: #eef2ff;
    color: #3730a3;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 22px;
}

.attachment-info {
    min-width: 0;
}

    .attachment-info strong {
        display: block;
        font-size: 13px;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    .attachment-info small {
        color: var(--muted);
        font-size: 12px;
    }

.attachment-actions {
    display: flex;
    gap: 6px;
}

.small-loading {
    min-height: 100px;
}

@media (max-width: 768px) {
    .attachments-header {
        flex-direction: column;
        align-items: stretch;
    }

    .attachments-grid {
        grid-template-columns: 1fr;
    }

    .attachment-card {
        grid-template-columns: 38px 1fr;
    }

    .attachment-actions {
        grid-column: 1 / -1;
        justify-content: flex-end;
    }
}
.incident-details-layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 340px;
    gap: 18px;
}

.incident-main,
.incident-side {
    min-width: 0;
}

.fm-section-title {
    font-weight: 900;
    margin-bottom: 16px;
    display: flex;
    align-items: center;
    gap: 8px;
}

.fm-empty.compact {
    min-height: 120px;
}

.related-wo-card {
    background: #f8fafc;
    border: 1px solid var(--border);
    border-radius: 18px;
    padding: 16px;
}

.side-info {
    border-bottom: 1px solid var(--border);
    padding: 12px 0;
}

    .side-info:last-child {
        border-bottom: 0;
    }

    .side-info span {
        display: block;
        color: var(--muted);
        font-size: 12px;
        margin-bottom: 4px;
    }

    .side-info strong {
        font-size: 13px;
    }

@media (max-width: 1100px) {
    .incident-details-layout {
        grid-template-columns: 1fr;
    }
}
.fm-status-pill {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    width: auto;
    height: 32px;
    padding: 0 12px;
    border-radius: 999px;
    font-size: 12px;
    font-weight: 800;
    white-space: nowrap;
    line-height: 1;
}

    .fm-status-pill i {
        font-size: 7px;
    }

.status-new {
    background: #eef2ff;
    color: #4338ca;
}

.status-review {
    background: #fff7ed;
    color: #c2410c;
}

.status-converted {
    background: #ecfeff;
    color: #0e7490;
}

.status-closed {
    background: #ecfdf5;
    color: #047857;
}

.status-rejected {
    background: #fef2f2;
    color: #b91c1c;
}

.status-default {
    background: #f1f5f9;
    color: #475569;
}
.workorder-details-layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 340px;
    gap: 18px;
}

.workorder-main,
.workorder-side {
    min-width: 0;
}

@media (max-width: 1100px) {
    .workorder-details-layout {
        grid-template-columns: 1fr;
    }
}
.workorder-section {
    width: 100%;
}

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

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

.task-card {
    background: #f8fafc;
    border: 1px solid var(--border);
    border-radius: 18px;
    padding: 14px;
    display: grid;
    grid-template-columns: 32px 1fr auto auto;
    gap: 10px;
    align-items: center;
}

    .task-card.completed {
        background: #ecfdf5;
        border-color: #bbf7d0;
    }

.task-check input {
    width: 18px;
    height: 18px;
}

.task-content {
    min-width: 0;
}

    .task-content strong {
        display: block;
        font-size: 14px;
    }

    .task-content small {
        display: block;
        color: var(--muted);
        margin-top: 4px;
    }

.task-completed-info {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin-top: 8px;
    font-size: 12px;
    color: #047857;
    font-weight: 700;
}

@media (max-width: 768px) {
    .section-header {
        flex-direction: column;
        align-items: stretch;
    }

    .task-card {
        grid-template-columns: 32px 1fr;
    }

        .task-card .btn {
            grid-column: span 1;
        }
}
.assignment-list {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.assignment-card {
    background: #f8fafc;
    border: 1px solid var(--border);
    border-radius: 18px;
    padding: 14px;
    display: grid;
    grid-template-columns: 46px 1fr auto;
    gap: 12px;
    align-items: center;
}

.assignment-avatar {
    width: 46px;
    height: 46px;
    border-radius: 16px;
    background: #eef2ff;
    color: #3730a3;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 22px;
}

.assignment-info {
    min-width: 0;
}

    .assignment-info strong {
        display: block;
        font-size: 14px;
    }

    .assignment-info small {
        display: block;
        color: var(--muted);
        font-size: 12px;
        margin-top: 3px;
    }

    .assignment-info p {
        font-size: 13px;
        color: #475569;
    }

.assignment-accepted {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin-top: 8px;
    font-size: 12px;
    color: #047857;
    font-weight: 800;
}

.assignment-actions {
    display: flex;
    gap: 6px;
}

@media (max-width: 768px) {
    .assignment-card {
        grid-template-columns: 46px 1fr;
    }

    .assignment-actions {
        grid-column: 1 / -1;
        justify-content: flex-end;
    }
}
.approval-list {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.approval-card {
    background: #f8fafc;
    border: 1px solid var(--border);
    border-radius: 18px;
    padding: 14px;
    display: grid;
    grid-template-columns: 46px 1fr auto;
    gap: 12px;
    align-items: center;
}

.approval-icon {
    width: 46px;
    height: 46px;
    border-radius: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 22px;
    background: #f1f5f9;
    color: #475569;
}

    .approval-icon.pending {
        background: #fff7ed;
        color: #c2410c;
    }

    .approval-icon.approved {
        background: #ecfdf5;
        color: #047857;
    }

    .approval-icon.rejected {
        background: #fef2f2;
        color: #b91c1c;
    }

.approval-info {
    min-width: 0;
}

    .approval-info strong {
        display: block;
        font-size: 14px;
    }

    .approval-info small {
        display: block;
        color: var(--muted);
        font-size: 12px;
        margin-top: 3px;
    }

    .approval-info p {
        font-size: 13px;
        color: #475569;
    }

.approval-actions {
    display: flex;
    gap: 6px;
}

@media (max-width: 768px) {
    .approval-card {
        grid-template-columns: 46px 1fr;
    }

    .approval-actions {
        grid-column: 1 / -1;
        justify-content: flex-end;
    }
}
.checklist-item-list {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.checklist-item-card {
    background: #f8fafc;
    border: 1px solid var(--border);
    border-radius: 18px;
    padding: 14px;
    display: grid;
    grid-template-columns: 42px 1fr auto;
    gap: 12px;
    align-items: center;
}

.checklist-order {
    width: 42px;
    height: 42px;
    border-radius: 14px;
    background: #eef2ff;
    color: #3730a3;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 900;
}

.checklist-item-content {
    min-width: 0;
}

    .checklist-item-content strong {
        display: block;
        font-size: 14px;
    }

@media (max-width: 768px) {
    .checklist-item-card {
        grid-template-columns: 42px 1fr;
    }

        .checklist-item-card .d-flex {
            grid-column: 1 / -1;
            justify-content: flex-end;
        }
}
.checklist-results-list {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.checklist-result-card {
    background: #f8fafc;
    border: 1px solid var(--border);
    border-radius: 18px;
    padding: 14px;
    display: grid;
    grid-template-columns: 42px 1fr auto;
    gap: 12px;
    align-items: center;
}

.result-status {
    width: 42px;
    height: 42px;
    border-radius: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 22px;
    background: #f1f5f9;
    color: #64748b;
}

    .result-status.passed {
        background: #ecfdf5;
        color: #047857;
    }

    .result-status.failed {
        background: #fef2f2;
        color: #b91c1c;
    }

    .result-status.pending {
        background: #f8fafc;
        color: #64748b;
    }

.result-content {
    min-width: 0;
}

    .result-content strong {
        display: block;
        font-size: 14px;
    }

    .result-content p {
        color: #475569;
        font-size: 13px;
    }

.result-controls {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
}

@media (max-width: 768px) {
    .checklist-result-card {
        grid-template-columns: 42px 1fr;
    }

        .checklist-result-card > button {
            grid-column: 1 / -1;
            justify-self: flex-end;
        }
}
.fm-chart-box {
    height: 310px;
    position: relative;
}

.fm-list {
    display: grid;
    gap: 12px;
    margin-top: 16px;
}

.fm-list-item {
    display: flex;
    justify-content: space-between;
    gap: 14px;
    align-items: center;
    padding: 12px 0;
    border-bottom: 1px solid #eef2f7;
}

    .fm-list-item strong {
        color: #172033;
        font-weight: 800;
    }

    .fm-list-item small {
        display: block;
        color: #667085;
        margin-top: 4px;
    }

.fm-alert-item {
    display: flex;
    gap: 12px;
    align-items: flex-start;
    padding: 12px;
    border-radius: 16px;
    background: #f8fafc;
}

    .fm-alert-item i {
        width: 36px;
        height: 36px;
        border-radius: 12px;
        display: grid;
        place-items: center;
        color: white;
    }

    .fm-alert-item.danger i {
        background: #ef4444;
    }

    .fm-alert-item.warning i {
        background: #f59e0b;
    }

.bg-red {
    background: #ef4444;
}

.bg-dark {
    background: #111827;
}

.portal-loader-overlay {
    position: fixed;
    inset: 0;
    z-index: 999999;
    background: radial-gradient(circle at center, rgba(255, 214, 0, .08), transparent 35%), rgba(0, 0, 0, .92);
    display: flex;
    align-items: center;
    justify-content: center;
    backdrop-filter: blur(7px);
}

.portal-loader-box {
    width: 360px;
    text-align: center;
    color: #ffd600;
    animation: loaderFadeIn .25s ease;
}

.portal-loader-ring {
    width: 240px;
    height: 240px;
    margin: 0 auto 26px;
    border-radius: 50%;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
}

    .portal-loader-ring::before {
        content: "";
        position: absolute;
        inset: 0;
        border-radius: 50%;
        border: 3px solid rgba(255, 214, 0, .14);
        border-top-color: #ffd600;
        border-right-color: rgba(255, 214, 0, .55);
        filter: drop-shadow(0 0 12px rgba(255, 214, 0, .75));
        animation: loaderSpin 1.3s linear infinite;
    }

    .portal-loader-ring::after {
        content: "";
        position: absolute;
        inset: 22px;
        border-radius: 50%;
        border: 1px solid rgba(255, 214, 0, .18);
        animation: loaderReverseSpin 2.2s linear infinite;
    }

.portal-loader-dot {
    position: absolute;
    width: 16px;
    height: 16px;
    top: 18px;
    left: 50%;
    margin-left: -8px;
    border-radius: 50%;
    background: #ffd600;
    box-shadow: 0 0 18px rgba(255, 214, 0, 1), 0 0 35px rgba(255, 214, 0, .8);
    transform-origin: 8px 102px;
    animation: loaderDotSpin 1.3s linear infinite;
    z-index: 3;
}

.portal-loader-logo {
    width: 118px;
    max-height: 160px;
    object-fit: contain;
    z-index: 2;
    filter: drop-shadow(0 0 12px rgba(255, 214, 0, .65)) drop-shadow(0 0 28px rgba(255, 214, 0, .25));
    animation: loaderLogoPulse 1.6s ease-in-out infinite;
}

.portal-loader-title {
    font-size: 34px;
    font-weight: 900;
    letter-spacing: .5px;
    text-shadow: 0 0 18px rgba(255, 214, 0, .45);
}

.portal-loader-subtitle {
    margin-top: 8px;
    font-size: 15px;
    color: rgba(255, 255, 255, .68);
}

.portal-loader-bar {
    height: 12px;
    width: 100%;
    background: rgba(255, 255, 255, .14);
    border-radius: 999px;
    overflow: hidden;
    margin-top: 28px;
}

    .portal-loader-bar span {
        display: block;
        height: 100%;
        width: 45%;
        border-radius: inherit;
        background: linear-gradient(90deg, #ffd600, #ffea61, #ffd600);
        box-shadow: 0 0 16px rgba(255, 214, 0, .9);
        animation: loaderBarMove 1.35s ease-in-out infinite;
    }

@keyframes loaderSpin {
    to {
        transform: rotate(360deg);
    }
}

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

@keyframes loaderDotSpin {
    to {
        transform: rotate(360deg);
    }
}

@keyframes loaderLogoPulse {
    0%, 100% {
        transform: scale(1);
        opacity: .95;
    }

    50% {
        transform: scale(1.06);
        opacity: 1;
    }
}

@keyframes loaderBarMove {
    0% {
        transform: translateX(-110%);
    }

    50% {
        transform: translateX(70%);
    }

    100% {
        transform: translateX(230%);
    }
}

@keyframes loaderFadeIn {
    from {
        opacity: 0;
        transform: scale(.96);
    }

    to {
        opacity: 1;
        transform: scale(1);
    }
}
.dot {
    opacity: 0;
    animation: blinkDot 1.4s infinite;
}

.dot1 {
    animation-delay: 0s;
}

.dot2 {
    animation-delay: .2s;
}

.dot3 {
    animation-delay: .4s;
}

@keyframes blinkDot {
    0%, 20% {
        opacity: 0;
    }

    50% {
        opacity: 1;
    }

    100% {
        opacity: 0;
    }
}

.assignment-list {
    display: grid;
    gap: 12px;
    max-height: 720px;
    overflow-y: auto;
    padding-inline-end: 4px;
}

.assignment-card {
    border: 1px solid #e5e7eb;
    background: #fff;
    border-radius: 18px;
    padding: 14px;
    cursor: pointer;
    transition: .2s ease;
}

    .assignment-card:hover {
        border-color: #0d6efd;
        box-shadow: 0 8px 24px rgba(13, 110, 253, .08);
        transform: translateY(-1px);
    }

    .assignment-card.selected {
        border-color: #0d6efd;
        background: #f0f7ff;
    }

    .assignment-card h6 {
        font-weight: 800;
        margin: 12px 0 8px;
        color: #172033;
    }

.assignment-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    color: #667085;
    font-size: .85rem;
}

.selected-wo-box {
    border: 1px solid #e5e7eb;
    background: #f8fafc;
    border-radius: 18px;
    padding: 16px;
}

    .selected-wo-box h5 {
        margin: 12px 0 6px;
        font-weight: 800;
    }

.assignment-list {
    display: grid;
    gap: 8px;
    max-height: calc(100vh - 300px);
    overflow-y: auto;
    padding-inline-end: 6px;
}

.wo-list-item {
    border: 1px solid #e5e7eb;
    background: #fff;
    border-radius: 16px;
    padding: 12px 14px;
    cursor: pointer;
    transition: .18s ease;
}

    .wo-list-item:hover {
        border-color: #6b9f08;
        box-shadow: 0 8px 20px rgba(132, 199, 8, .08);
    }

    .wo-list-item.active {
        border-color: #6b9f08;
        background: #f5fbe9;
    }

.wo-main-line {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 10px;
}

.wo-number {
    display: inline-flex;
    padding: 4px 10px;
    border-radius: 999px;
    background: #eef2ff;
    color: #527900;
    font-size: .75rem;
    font-weight: 800;
    margin-bottom: 6px;
}

.wo-main-line h6 {
    margin: 0;
    font-size: .92rem;
    font-weight: 800;
    color: #111827;
    max-width: 280px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.wo-priority {
    padding: 4px 9px;
    border-radius: 999px;
    font-size: .72rem;
    font-weight: 800;
    white-space: nowrap;
}

    .wo-priority.high {
        background: #fee2e2;
        color: #b91c1c;
    }

    .wo-priority.medium {
        background: #ffedd5;
        color: #c2410c;
    }

    .wo-priority.low {
        background: #dcfce7;
        color: #15803d;
    }

    .wo-priority.default {
        background: #f1f5f9;
        color: #475569;
    }

.wo-meta-line,
.wo-footer-line {
    display: flex;
    justify-content: space-between;
    gap: 10px;
    color: #64748b;
    font-size: .78rem;
    margin-top: 9px;
}

    .wo-meta-line span,
    .wo-footer-line span {
        display: inline-flex;
        align-items: center;
        gap: 5px;
        min-width: 0;
    }

.wo-overdue {
    color: #dc2626;
    font-weight: 800;
}

.wo-pending {
    color: #d97706;
    font-weight: 800;
}

.selected-wo-box {
    border: 1px solid #e5e7eb;
    background: linear-gradient(135deg, #f8fafc, #eef6ff);
    border-radius: 20px;
    padding: 18px;
}

    .selected-wo-box h5 {
        margin: 12px 0 6px;
        font-weight: 900;
        color: #111827;
    }

.ai-recommendation-box {
    border: 1px solid #eefbd8;
    background: linear-gradient(135deg, #f5fbe9, #f5f3ff);
    border-radius: 20px;
    padding: 16px;
    margin-top: 16px;
}

    .ai-recommendation-box .ai-title {
        display: flex;
        align-items: center;
        gap: 8px;
        font-weight: 900;
        color: #527900;
        margin-bottom: 12px;
    }

.ai-reason {
    display: flex;
    gap: 8px;
    color: #475569;
    font-size: .85rem;
    margin-top: 6px;
}

.ai-confidence {
    height: 8px;
    background: #eefbd8;
    border-radius: 999px;
    overflow: hidden;
    margin-top: 12px;
}

    .ai-confidence span {
        display: block;
        height: 100%;
        width: 92%;
        background: #6b9f08;
    }

.wo-detail-header {
    display: flex;
    justify-content: space-between;
    gap: 14px;
    align-items: flex-start;
}

.wo-detail-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
}

    .wo-detail-grid div {
        background: #fff;
        border: 1px solid #e5e7eb;
        border-radius: 14px;
        padding: 12px;
    }

    .wo-detail-grid span {
        display: block;
        font-size: .75rem;
        color: #64748b;
        margin-bottom: 5px;
    }

    .wo-detail-grid strong {
        font-size: .9rem;
        color: #111827;
    }

.ai-result-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
    margin-bottom: 12px;
}

    .ai-result-grid div {
        background: rgba(255,255,255,.75);
        border: 1px solid #eefbd8;
        border-radius: 14px;
        padding: 12px;
    }

    .ai-result-grid span {
        display: block;
        font-size: .72rem;
        color: #64748b;
        margin-bottom: 4px;
    }

    .ai-result-grid strong {
        font-size: .92rem;
        color: #1e293b;
    }

.ai-score-line {
    display: flex;
    justify-content: space-between;
    margin-top: 14px;
    font-size: .85rem;
    color: #1e3a8a;
    font-weight: 800;
}
.mywo-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(360px, 1fr));
    gap: 16px;
}

.mywo-card {
    background: #fff;
    border: 1px solid #e5e7eb;
    border-radius: 20px;
    padding: 16px;
    transition: .2s ease;
}

    .mywo-card:hover {
        border-color: #6b9f08;
        box-shadow: 0 12px 28px rgba(132, 199, 8, .08);
    }

.mywo-card-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 12px;
}

    .mywo-card-header h5 {
        font-size: 1rem;
        font-weight: 900;
        margin: 10px 0 0;
        color: #111827;
    }

.mywo-info {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
    margin-top: 16px;
}

    .mywo-info div {
        background: #f8fafc;
        border: 1px solid #eef2f7;
        border-radius: 14px;
        padding: 10px;
    }

    .mywo-info span {
        display: block;
        font-size: .72rem;
        color: #64748b;
        margin-bottom: 4px;
    }

    .mywo-info strong {
        color: #111827;
        font-size: .86rem;
    }

.mywo-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 16px;
}
.wo-timeline {
    position: relative;
    display: grid;
    gap: 18px;
}

.wo-timeline-item {
    display: grid;
    grid-template-columns: 44px 1fr;
    gap: 14px;
    position: relative;
}

    .wo-timeline-item:not(:last-child)::before {
        content: "";
        position: absolute;
        top: 44px;
        bottom: -18px;
        inset-inline-start: 21px;
        width: 2px;
        background: #e5e7eb;
    }

.wo-timeline-icon {
    width: 44px;
    height: 44px;
    border-radius: 16px;
    display: grid;
    place-items: center;
    color: #fff;
    z-index: 1;
}

.wo-timeline-content {
    background: #fff;
    border: 1px solid #e5e7eb;
    border-radius: 18px;
    padding: 14px;
}

    .wo-timeline-content strong {
        color: #111827;
        font-weight: 900;
    }

.wo-timeline-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    color: #64748b;
    font-size: .85rem;
}

    .wo-timeline-meta span {
        display: inline-flex;
        align-items: center;
        gap: 6px;
    }

.wo-timeline-notes {
    margin: 10px 0 0;
    color: #475569;
    background: #f8fafc;
    border-radius: 12px;
    padding: 10px;
    font-size: .88rem;
}

.timeline-blue {
    background: #6b9f08;
}

.timeline-green {
    background: #16a34a;
}

.timeline-red {
    background: #dc2626;
}

.timeline-orange {
    background: #f59e0b;
}

.timeline-purple {
    background: #7c3aed;
}

.timeline-default {
    background: #64748b;
}

.wo-photo-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
    gap: 16px;
}

.wo-photo-card {
    border: 1px solid #e5e7eb;
    border-radius: 18px;
    overflow: hidden;
    background: #fff;
}

    .wo-photo-card img {
        width: 100%;
        height: 180px;
        object-fit: cover;
        background: #f8fafc;
    }

.wo-photo-body {
    padding: 12px;
}

    .wo-photo-body strong {
        color: #111827;
        font-weight: 800;
    }

.wo-tabs {
    display: flex;
    gap: 8px;
    overflow-x: auto;
    padding-bottom: 8px;
    border-bottom: 1px solid #e5e7eb;
}

.wo-tab {
    border: 1px solid #e5e7eb;
    background: #fff;
    color: #475569;
    padding: 10px 14px;
    border-radius: 14px;
    font-weight: 800;
    white-space: nowrap;
    display: inline-flex;
    align-items: center;
    gap: 7px;
    transition: .18s ease;
}

    .wo-tab:hover {
        border-color: #6b9f08;
        color: #6b9f08;
        background: #f5fbe9;
    }

    .wo-tab.active {
        background: #6b9f08;
        border-color: #6b9f08;
        color: #fff;
        box-shadow: 0 8px 18px rgba(132, 199, 8, .18);
    }

.wo-tab-content {
    min-height: 240px;
}

    .wo-tab-content > .fm-card {
        box-shadow: none;
        border: 0;
        padding: 0;
        margin-top: 0 !important;
    }

.wo-tabs {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    padding: 10px;
    background: #f8fafc;
    border: 1px solid #e5e7eb;
    border-radius: 22px;
    overflow: hidden;
}

.wo-tab {
    border: 1px solid transparent;
    background: #ffffff;
    color: #475569;
    padding: 11px 16px;
    border-radius: 16px;
    font-weight: 800;
    white-space: nowrap;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    transition: .18s ease;
    box-shadow: 0 4px 14px rgba(15, 23, 42, .04);
}

    .wo-tab:hover {
        color: #527900;
        background: #f5fbe9;
        border-color: #d9f6a1;
        transform: translateY(-1px);
    }

    .wo-tab.active {
        background: linear-gradient(135deg, #6b9f08, #527900);
        border-color: #6b9f08;
        color: #fff;
        box-shadow: 0 10px 22px rgba(132, 199, 8, .22);
    }

        .wo-tab.active i {
            color: #fff;
        }

.wo-tab-content {
    margin-top: 16px;
    min-height: 260px;
}

    .wo-tab-content > .fm-card {
        box-shadow: none;
        border: 0;
        padding: 0;
        margin-top: 0 !important;
    }

.supervisor-tabs {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    padding: 10px;
    background: #f8fafc;
    border: 1px solid #e5e7eb;
    border-radius: 22px;
}

.supervisor-tab {
    border: 1px solid transparent;
    background: #fff;
    color: #475569;
    padding: 11px 16px;
    border-radius: 16px;
    font-weight: 800;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    transition: .18s ease;
}

    .supervisor-tab span {
        background: #eef2ff;
        color: #527900;
        padding: 2px 8px;
        border-radius: 999px;
        font-size: .75rem;
    }

    .supervisor-tab.active {
        background: #6b9f08;
        color: #fff;
        box-shadow: 0 10px 22px rgba(132, 199, 8, .22);
    }

        .supervisor-tab.active span {
            background: rgba(255,255,255,.22);
            color: #fff;
        }

.supervisor-list {
    display: grid;
    gap: 12px;
}

.supervisor-card {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 18px;
    border: 1px solid #e5e7eb;
    background: #fff;
    border-radius: 20px;
    padding: 16px;
}

.supervisor-card-main h5 {
    margin: 10px 0;
    font-weight: 900;
    color: #111827;
}

.supervisor-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    color: #64748b;
    font-size: .85rem;
}

    .supervisor-meta span {
        display: inline-flex;
        align-items: center;
        gap: 6px;
    }

.supervisor-card-side {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 8px;
    min-width: 210px;
}

.supervisor-reason {
    margin-top: 12px;
    background: #fef2f2;
    color: #991b1b;
    border: 1px solid #fecaca;
    border-radius: 14px;
    padding: 10px;
    font-size: .85rem;
}

@media (max-width: 900px) {
    .supervisor-card {
        grid-template-columns: 1fr;
    }

    .supervisor-card-side {
        align-items: flex-start;
        min-width: auto;
    }
}

.calendar-toolbar {
    display: flex;
    justify-content: space-between;
    gap: 16px;
    flex-wrap: wrap;
    align-items: center;
}

    .calendar-toolbar h5 {
        margin: 8px 0 0;
        font-weight: 900;
        color: #111827;
    }

.calendar-legend {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

    .calendar-legend span {
        display: inline-flex;
        align-items: center;
        gap: 6px;
        color: #64748b;
        font-size: .85rem;
        font-weight: 700;
    }

.legend-dot {
    width: 11px;
    height: 11px;
    border-radius: 50%;
    display: inline-block;
}

    .legend-dot.event-critical {
        background: #dc2626;
    }

    .legend-dot.event-high {
        background: #f97316;
    }

    .legend-dot.event-medium {
        background: #eab308;
    }

    .legend-dot.event-low {
        background: #22c55e;
    }

    .legend-dot.event-pm {
        background: #6b9f08;
    }

.day-calendar {
    display: grid;
    gap: 8px;
}

.calendar-hour-row {
    display: grid;
    grid-template-columns: 82px 1fr;
    gap: 12px;
    min-height: 82px;
}

.calendar-hour-label {
    background: #f8fafc;
    border: 1px solid #e5e7eb;
    border-radius: 14px;
    display: grid;
    place-items: center;
    color: #475569;
    font-weight: 900;
}

.calendar-hour-slot {
    border: 1px dashed #dbe3ef;
    border-radius: 14px;
    background: #fbfdff;
    padding: 10px;
    display: grid;
    gap: 8px;
}

.calendar-event-card {
    background: #fff;
    border: 1px solid #e5e7eb;
    border-inline-start: 5px solid #94a3b8;
    border-radius: 14px;
    padding: 12px;
    cursor: pointer;
    transition: .18s ease;
}

    .calendar-event-card:hover {
        transform: translateY(-1px);
        box-shadow: 0 10px 22px rgba(15, 23, 42, .08);
    }

    .calendar-event-card strong {
        display: block;
        margin: 8px 0;
        color: #111827;
        font-weight: 900;
    }

.calendar-event-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    color: #64748b;
    font-size: .82rem;
}

    .calendar-event-meta span {
        display: inline-flex;
        gap: 5px;
        align-items: center;
    }

.calendar-event-card.event-critical {
    border-inline-start-color: #dc2626;
}

.calendar-event-card.event-high {
    border-inline-start-color: #f97316;
}

.calendar-event-card.event-medium {
    border-inline-start-color: #eab308;
}

.calendar-event-card.event-low {
    border-inline-start-color: #22c55e;
}

.calendar-event-card.event-pm {
    border-inline-start-color: #6b9f08;
}
.timeline-toolbar {
    display: grid;
    grid-template-columns: 230px 1fr;
    gap: 16px;
    align-items: end;
}

    .timeline-toolbar h5 {
        margin: 8px 0 0;
        font-weight: 900;
        color: #111827;
    }

.timeline-hours-header {
    display: grid;
    grid-template-columns: repeat(18, 1fr);
    gap: 0;
    color: #64748b;
    font-size: .75rem;
    font-weight: 800;
}

    .timeline-hours-header span {
        text-align: center;
    }

.tech-timeline {
    display: grid;
    gap: 10px;
    margin-top: 16px;
    overflow-x: auto;
    padding-bottom: 8px;
}

.tech-row {
    display: grid;
    grid-template-columns: 230px minmax(900px, 1fr);
    gap: 16px;
    min-height: 88px;
}

.tech-cell {
    border: 1px solid #e5e7eb;
    background: #fff;
    border-radius: 16px;
    padding: 12px;
}

    .tech-cell strong {
        display: block;
        font-weight: 900;
        color: #111827;
    }

    .tech-cell small {
        display: block;
        color: #64748b;
        margin: 4px 0 8px;
    }

.tech-time-grid {
    position: relative;
    display: grid;
    grid-template-columns: repeat(18, 1fr);
    border: 1px solid #e5e7eb;
    border-radius: 16px;
    background: #fbfdff;
    overflow: hidden;
    min-height: 88px;
}

.tech-hour-cell {
    border-inline-end: 1px dashed #dbe3ef;
}

    .tech-hour-cell:last-child {
        border-inline-end: 0;
    }

.tech-event {
    position: absolute;
    top: 12px;
    height: 64px;
    border-radius: 14px;
    padding: 8px 10px;
    background: #fff;
    border: 1px solid #e5e7eb;
    border-inline-start: 5px solid #94a3b8;
    overflow: hidden;
    cursor: pointer;
    transition: .18s ease;
}

    .tech-event:hover {
        transform: translateY(-1px);
        box-shadow: 0 12px 24px rgba(15, 23, 42, .12);
        z-index: 5;
    }

    .tech-event strong {
        display: block;
        font-size: .82rem;
        color: #111827;
        font-weight: 900;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        margin: 4px 0;
    }

    .tech-event small {
        color: #64748b;
        font-size: .72rem;
    }

    .tech-event.event-critical {
        border-inline-start-color: #dc2626;
    }

    .tech-event.event-high {
        border-inline-start-color: #f97316;
    }

    .tech-event.event-medium {
        border-inline-start-color: #eab308;
    }

    .tech-event.event-low {
        border-inline-start-color: #22c55e;
    }

    .tech-event.event-pm {
        border-inline-start-color: #6b9f08;
    }
.dispatch-board {
    display: grid;
    grid-template-columns: repeat(5, minmax(280px, 1fr));
    gap: 14px;
    overflow-x: auto;
    padding-bottom: 10px;
}

.dispatch-column {
    background: #f8fafc;
    border: 1px solid #e5e7eb;
    border-radius: 22px;
    min-height: 680px;
    display: flex;
    flex-direction: column;
}

.dispatch-column-header {
    padding: 14px;
    border-bottom: 1px solid #e5e7eb;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

    .dispatch-column-header div {
        display: flex;
        align-items: center;
        gap: 8px;
        color: #111827;
    }

    .dispatch-column-header strong {
        font-weight: 900;
    }

    .dispatch-column-header span {
        background: #eef2ff;
        color: #527900;
        font-weight: 900;
        border-radius: 999px;
        padding: 4px 10px;
    }

.dispatch-column-body {
    padding: 12px;
    display: grid;
    gap: 12px;
    align-content: start;
    max-height: 720px;
    overflow-y: auto;
}

.dispatch-card {
    background: #fff;
    border: 1px solid #e5e7eb;
    border-inline-start: 5px solid #94a3b8;
    border-radius: 18px;
    padding: 12px;
    transition: .18s ease;
}

    .dispatch-card:hover {
        transform: translateY(-1px);
        box-shadow: 0 10px 22px rgba(15, 23, 42, .08);
    }

    .dispatch-card.critical {
        border-inline-start-color: #dc2626;
    }

    .dispatch-card.high {
        border-inline-start-color: #f97316;
    }

    .dispatch-card.medium {
        border-inline-start-color: #eab308;
    }

    .dispatch-card.low {
        border-inline-start-color: #22c55e;
    }

    .dispatch-card h6 {
        margin: 10px 0;
        color: #111827;
        font-weight: 900;
        line-height: 1.35;
    }

.dispatch-priority {
    background: #f1f5f9;
    color: #475569;
    border-radius: 999px;
    padding: 4px 9px;
    font-size: .72rem;
    font-weight: 800;
}

.dispatch-meta {
    display: grid;
    gap: 6px;
    color: #64748b;
    font-size: .82rem;
}

    .dispatch-meta span {
        display: inline-flex;
        gap: 6px;
        align-items: center;
    }

.dispatch-actions {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    margin-top: 12px;
}

.dispatch-empty {
    display: grid;
    place-items: center;
    gap: 8px;
    min-height: 120px;
    color: #94a3b8;
    font-weight: 800;
}
.heatmap-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(310px, 1fr));
    gap: 16px;
}

.heatmap-card {
    border: 1px solid #e5e7eb;
    border-top: 5px solid #94a3b8;
    background: #fff;
    border-radius: 22px;
    padding: 16px;
    transition: .18s ease;
}

    .heatmap-card:hover {
        transform: translateY(-2px);
        box-shadow: 0 14px 30px rgba(15, 23, 42, .08);
    }

    .heatmap-card.load-critical {
        border-top-color: #dc2626;
    }

    .heatmap-card.load-high {
        border-top-color: #f97316;
    }

    .heatmap-card.load-medium {
        border-top-color: #eab308;
    }

    .heatmap-card.load-low {
        border-top-color: #22c55e;
    }

.heatmap-header {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    align-items: flex-start;
}

    .heatmap-header strong {
        display: block;
        color: #111827;
        font-weight: 900;
    }

    .heatmap-header small {
        display: block;
        color: #64748b;
        margin-top: 4px;
    }

.heatmap-score {
    text-align: center;
    margin: 18px 0 12px;
}

    .heatmap-score span {
        display: block;
        font-size: 2.2rem;
        font-weight: 900;
        color: #111827;
    }

    .heatmap-score small {
        color: #64748b;
        font-weight: 700;
    }

.heatmap-bar {
    height: 11px;
    background: #e5e7eb;
    border-radius: 999px;
    overflow: hidden;
}

    .heatmap-bar span {
        display: block;
        height: 100%;
        background: #6b9f08;
    }

.heatmap-card.load-critical .heatmap-bar span {
    background: #dc2626;
}

.heatmap-card.load-high .heatmap-bar span {
    background: #f97316;
}

.heatmap-card.load-medium .heatmap-bar span {
    background: #eab308;
}

.heatmap-card.load-low .heatmap-bar span {
    background: #22c55e;
}

.heatmap-metrics {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 10px;
    margin-top: 16px;
}

    .heatmap-metrics div {
        background: #f8fafc;
        border: 1px solid #eef2f7;
        border-radius: 14px;
        padding: 10px;
        text-align: center;
    }

    .heatmap-metrics span {
        display: block;
        color: #64748b;
        font-size: .72rem;
        margin-bottom: 4px;
    }

    .heatmap-metrics strong {
        color: #111827;
        font-weight: 900;
    }
.sla-filter-bar {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    flex-wrap: wrap;
}

.sla-list {
    display: grid;
    gap: 14px;
}

.sla-card {
    display: grid;
    grid-template-columns: 1fr 330px auto;
    gap: 18px;
    align-items: center;
    border: 1px solid #e5e7eb;
    border-inline-start: 6px solid #94a3b8;
    border-radius: 20px;
    background: #fff;
    padding: 16px;
}

    .sla-card.sla-within {
        border-inline-start-color: #22c55e;
    }

    .sla-card.sla-risk {
        border-inline-start-color: #f97316;
    }

    .sla-card.sla-breached {
        border-inline-start-color: #dc2626;
        background: #fff7f7;
    }

.sla-main h5 {
    margin: 10px 0;
    font-weight: 900;
    color: #111827;
}

.sla-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    color: #64748b;
    font-size: .85rem;
}

    .sla-meta span {
        display: inline-flex;
        align-items: center;
        gap: 6px;
    }

.sla-pill {
    padding: 6px 11px;
    border-radius: 999px;
    font-size: .78rem;
    font-weight: 900;
    white-space: nowrap;
}

    .sla-pill.sla-within {
        background: #dcfce7;
        color: #15803d;
    }

    .sla-pill.sla-risk {
        background: #ffedd5;
        color: #c2410c;
    }

    .sla-pill.sla-breached {
        background: #fee2e2;
        color: #b91c1c;
    }

.sla-timer strong {
    display: block;
    color: #111827;
    font-size: 1.6rem;
    font-weight: 900;
}

.sla-timer small {
    color: #64748b;
    font-weight: 700;
}

.sla-progress {
    height: 9px;
    background: #e5e7eb;
    border-radius: 999px;
    overflow: hidden;
    margin: 12px 0;
}

    .sla-progress span {
        display: block;
        height: 100%;
        background: #22c55e;
    }

.sla-card.sla-risk .sla-progress span {
    background: #f97316;
}

.sla-card.sla-breached .sla-progress span {
    background: #dc2626;
}

.sla-dates {
    display: grid;
    gap: 4px;
    color: #64748b;
    font-size: .78rem;
}

.sla-actions {
    display: flex;
    justify-content: flex-end;
}

@media (max-width: 1100px) {
    .sla-card {
        grid-template-columns: 1fr;
    }

    .sla-actions {
        justify-content: flex-start;
    }
}

.exec-kpi-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
    gap: 16px;
}

.exec-kpi-card {
    background: linear-gradient(135deg, #ffffff, #f8fafc);
    border: 1px solid #e5e7eb;
    border-radius: 24px;
    padding: 18px;
    box-shadow: 0 12px 28px rgba(15, 23, 42, .05);
}

    .exec-kpi-card span {
        display: block;
        color: #64748b;
        font-size: .85rem;
        font-weight: 800;
    }

    .exec-kpi-card strong {
        display: block;
        margin: 12px 0 6px;
        font-size: 2rem;
        font-weight: 950;
        color: #111827;
    }

    .exec-kpi-card small {
        color: #94a3b8;
        font-weight: 700;
    }

    .exec-kpi-card.success {
        border-top: 5px solid #22c55e;
    }

    .exec-kpi-card.danger {
        border-top: 5px solid #dc2626;
    }

    .exec-kpi-card.cost {
        border-top: 5px solid #7c3aed;
    }

.exec-chart-list {
    display: grid;
    gap: 14px;
}

.exec-chart-row {
    display: grid;
    gap: 8px;
}

.exec-chart-label {
    display: flex;
    justify-content: space-between;
    gap: 12px;
}

    .exec-chart-label span {
        color: #475569;
        font-weight: 800;
    }

    .exec-chart-label strong {
        color: #111827;
        font-weight: 900;
    }

.exec-chart-bar {
    height: 12px;
    background: #e5e7eb;
    border-radius: 999px;
    overflow: hidden;
}

    .exec-chart-bar span {
        display: block;
        height: 100%;
        background: linear-gradient(135deg, #6b9f08, #527900);
    }

.asset-health-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(360px, 1fr));
    gap: 16px;
}

.asset-health-card {
    background: #fff;
    border: 1px solid #e5e7eb;
    border-top: 5px solid #94a3b8;
    border-radius: 24px;
    padding: 16px;
    transition: .18s ease;
}

    .asset-health-card:hover {
        transform: translateY(-2px);
        box-shadow: 0 14px 30px rgba(15, 23, 42, .08);
    }

    .asset-health-card.risk-healthy {
        border-top-color: #22c55e;
    }

    .asset-health-card.risk-warning {
        border-top-color: #f97316;
    }

    .asset-health-card.risk-critical {
        border-top-color: #dc2626;
    }

.asset-health-header {
    display: flex;
    justify-content: space-between;
    gap: 14px;
    align-items: flex-start;
}

    .asset-health-header h5 {
        margin: 10px 0 4px;
        color: #111827;
        font-weight: 900;
    }

    .asset-health-header small {
        color: #64748b;
    }

.asset-health-score {
    width: 72px;
    height: 72px;
    border-radius: 22px;
    background: #f8fafc;
    display: grid;
    place-items: center;
    text-align: center;
}

    .asset-health-score strong {
        font-size: 1.45rem;
        color: #111827;
        font-weight: 950;
        line-height: 1;
    }

    .asset-health-score span {
        font-size: .7rem;
        color: #64748b;
        font-weight: 800;
    }

.asset-health-bar {
    height: 11px;
    background: #e5e7eb;
    border-radius: 999px;
    overflow: hidden;
    margin: 16px 0;
}

    .asset-health-bar span {
        display: block;
        height: 100%;
        background: #22c55e;
    }

.asset-health-card.risk-warning .asset-health-bar span {
    background: #f97316;
}

.asset-health-card.risk-critical .asset-health-bar span {
    background: #dc2626;
}

.asset-health-metrics {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 10px;
}

    .asset-health-metrics div {
        background: #f8fafc;
        border: 1px solid #eef2f7;
        border-radius: 14px;
        padding: 10px;
        text-align: center;
    }

    .asset-health-metrics span {
        display: block;
        color: #64748b;
        font-size: .72rem;
        margin-bottom: 4px;
    }

    .asset-health-metrics strong {
        color: #111827;
        font-weight: 900;
        font-size: .88rem;
    }

.cost-chart-list {
    display: grid;
    gap: 14px;
}

.cost-chart-row {
    display: grid;
    gap: 8px;
}

.cost-chart-label {
    display: flex;
    justify-content: space-between;
    gap: 12px;
}

    .cost-chart-label span {
        color: #475569;
        font-weight: 800;
    }

    .cost-chart-label strong {
        color: #111827;
        font-weight: 900;
    }

.cost-chart-bar {
    height: 12px;
    background: #e5e7eb;
    border-radius: 999px;
    overflow: hidden;
}

    .cost-chart-bar span {
        display: block;
        height: 100%;
        background: linear-gradient(135deg, #7c3aed, #6b9f08);
    }

.reliability-chart-list {
    display: grid;
    gap: 14px;
}

.reliability-chart-row {
    display: grid;
    gap: 8px;
}

.reliability-chart-label {
    display: flex;
    justify-content: space-between;
    gap: 12px;
}

    .reliability-chart-label span {
        color: #475569;
        font-weight: 800;
    }

    .reliability-chart-label strong {
        color: #111827;
        font-weight: 900;
    }

.reliability-chart-bar {
    height: 12px;
    background: #e5e7eb;
    border-radius: 999px;
    overflow: hidden;
}

    .reliability-chart-bar span {
        display: block;
        height: 100%;
        background: linear-gradient(135deg, #dc2626, #f97316);
    }
.asset-health-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(390px, 1fr));
    gap: 16px;
}

.asset-health-card {
    background: #fff;
    border: 1px solid #e5e7eb;
    border-top: 5px solid #94a3b8;
    border-radius: 24px;
    padding: 16px;
    transition: .18s ease;
}

    .asset-health-card:hover {
        transform: translateY(-2px);
        box-shadow: 0 14px 30px rgba(15, 23, 42, .08);
    }

    .asset-health-card.risk-healthy {
        border-top-color: #22c55e;
    }

    .asset-health-card.risk-warning {
        border-top-color: #f97316;
    }

    .asset-health-card.risk-critical {
        border-top-color: #dc2626;
    }

.asset-health-header {
    display: flex;
    justify-content: space-between;
    gap: 14px;
    align-items: flex-start;
}

    .asset-health-header h5 {
        margin: 10px 0 4px;
        color: #111827;
        font-weight: 900;
    }

    .asset-health-header small {
        color: #64748b;
    }

.asset-health-score {
    min-width: 76px;
    height: 76px;
    border-radius: 24px;
    background: #f8fafc;
    display: grid;
    place-items: center;
    text-align: center;
}

    .asset-health-score strong {
        font-size: 1.5rem;
        color: #111827;
        font-weight: 950;
        line-height: 1;
    }

    .asset-health-score span {
        font-size: .7rem;
        color: #64748b;
        font-weight: 800;
    }

.asset-health-risk {
    display: flex;
    justify-content: flex-end;
}

.asset-risk-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    border-radius: 999px;
    padding: 6px 11px;
    font-size: .78rem;
    font-weight: 900;
    background: #f1f5f9;
    color: #475569;
}

    .asset-risk-badge.healthy {
        background: #dcfce7;
        color: #15803d;
    }

    .asset-risk-badge.warning {
        background: #ffedd5;
        color: #c2410c;
    }

    .asset-risk-badge.critical {
        background: #fee2e2;
        color: #b91c1c;
    }

.asset-health-bar {
    height: 11px;
    background: #e5e7eb;
    border-radius: 999px;
    overflow: hidden;
    margin: 16px 0;
}

    .asset-health-bar span {
        display: block;
        height: 100%;
        background: #22c55e;
    }

.asset-health-card.risk-warning .asset-health-bar span {
    background: #f97316;
}

.asset-health-card.risk-critical .asset-health-bar span {
    background: #dc2626;
}

.asset-health-reason {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
    background: #f8fafc;
    border: 1px solid #e5e7eb;
    border-radius: 14px;
    padding: 10px 12px;
    color: #475569;
    font-size: .85rem;
}

    .asset-health-reason strong {
        color: #111827;
        font-weight: 900;
    }

.asset-health-subscores {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
}

    .asset-health-subscores > div {
        background: #ffffff;
        border: 1px solid #eef2f7;
        border-radius: 14px;
        padding: 10px;
    }

    .asset-health-subscores span {
        display: block;
        color: #64748b;
        font-size: .72rem;
        margin-bottom: 4px;
    }

    .asset-health-subscores strong {
        color: #111827;
        font-weight: 900;
        font-size: .86rem;
    }

.mini-score-bar {
    height: 7px;
    background: #e5e7eb;
    border-radius: 999px;
    overflow: hidden;
    margin-top: 7px;
}

    .mini-score-bar span {
        display: block;
        height: 100%;
        background: #6b9f08;
    }

.asset-health-metrics {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 10px;
}

    .asset-health-metrics div {
        background: #f8fafc;
        border: 1px solid #eef2f7;
        border-radius: 14px;
        padding: 10px;
        text-align: center;
    }

    .asset-health-metrics span {
        display: block;
        color: #64748b;
        font-size: .72rem;
        margin-bottom: 4px;
    }

    .asset-health-metrics strong {
        color: #111827;
        font-weight: 900;
        font-size: .88rem;
    }

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

    .asset-health-metrics {
        grid-template-columns: repeat(2, 1fr);
    }

    .asset-health-subscores {
        grid-template-columns: 1fr;
    }
}

/*PM Dashboard*/
.pm-score-card {
    background: #fff;
    border: 1px solid #e5e7eb;
    border-radius: 24px;
    padding: 18px;
    box-shadow: 0 12px 28px rgba(15, 23, 42, .05);
}

    .pm-score-card > span {
        color: #64748b;
        font-weight: 800;
        font-size: .85rem;
    }

    .pm-score-card > strong {
        display: block;
        margin: 12px 0;
        color: #111827;
        font-size: 2.1rem;
        font-weight: 950;
    }

.pm-score-bar {
    height: 12px;
    background: #e5e7eb;
    border-radius: 999px;
    overflow: hidden;
    margin: 16px 0;
}

    .pm-score-bar span {
        display: block;
        height: 100%;
        background: linear-gradient(135deg, #22c55e, #6b9f08);
    }

.pm-score-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 10px;
}

    .pm-score-grid div {
        background: #f8fafc;
        border: 1px solid #eef2f7;
        border-radius: 14px;
        padding: 10px;
        text-align: center;
    }

    .pm-score-grid span {
        display: block;
        color: #64748b;
        font-size: .72rem;
        margin-bottom: 4px;
    }

    .pm-score-grid strong {
        color: #111827;
        font-weight: 900;
    }

.pm-score-info {
    background: #f8fafc;
    border: 1px solid #eef2f7;
    border-radius: 16px;
    padding: 12px;
    color: #64748b;
    font-size: .85rem;
    line-height: 1.7;
}

.pm-chart-list {
    display: grid;
    gap: 14px;
}

.pm-chart-row {
    display: grid;
    gap: 8px;
}

.pm-chart-label {
    display: flex;
    justify-content: space-between;
    gap: 12px;
}

    .pm-chart-label span {
        color: #475569;
        font-weight: 800;
    }

    .pm-chart-label strong {
        color: #111827;
        font-weight: 900;
    }

.pm-chart-bar {
    height: 12px;
    background: #e5e7eb;
    border-radius: 999px;
    overflow: hidden;
}

    .pm-chart-bar span {
        display: block;
        height: 100%;
        background: linear-gradient(135deg, #22c55e, #6b9f08);
    }

.pm-list {
    display: grid;
    gap: 12px;
}

.pm-list-item {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    border: 1px solid #e5e7eb;
    border-inline-start: 5px solid #6b9f08;
    border-radius: 18px;
    padding: 12px;
    background: #fff;
}

    .pm-list-item.overdue {
        border-inline-start-color: #dc2626;
        background: #fff7f7;
    }

    .pm-list-item strong {
        display: block;
        color: #111827;
        font-weight: 900;
        margin: 7px 0;
    }

    .pm-list-item small {
        display: block;
        color: #64748b;
        margin-top: 4px;
        font-size: .78rem;
    }

@media (max-width: 700px) {
    .pm-list-item {
        flex-direction: column;
    }

    .pm-score-grid {
        grid-template-columns: 1fr;
    }
}

/*KPI dashboard */
.kpi-hero-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
    gap: 16px;
}

.kpi-hero-card {
    background: linear-gradient(135deg, #ffffff, #f8fafc);
    border: 1px solid #e5e7eb;
    border-top: 5px solid #6b9f08;
    border-radius: 24px;
    padding: 18px;
    box-shadow: 0 12px 28px rgba(15, 23, 42, .05);
}

    .kpi-hero-card.success {
        border-top-color: #22c55e;
    }

    .kpi-hero-card.warning {
        border-top-color: #f97316;
    }

    .kpi-hero-card.danger {
        border-top-color: #dc2626;
    }

    .kpi-hero-card.cost {
        border-top-color: #7c3aed;
    }

    .kpi-hero-card span {
        display: block;
        color: #64748b;
        font-size: .85rem;
        font-weight: 800;
    }

    .kpi-hero-card strong {
        display: block;
        margin: 12px 0 6px;
        font-size: 2rem;
        font-weight: 950;
        color: #111827;
    }

    .kpi-hero-card small {
        color: #94a3b8;
        font-weight: 700;
    }

.kpi-chart-list {
    display: grid;
    gap: 14px;
}

.kpi-chart-row {
    display: grid;
    gap: 8px;
}

.kpi-chart-label {
    display: flex;
    justify-content: space-between;
    gap: 12px;
}

    .kpi-chart-label span {
        color: #475569;
        font-weight: 800;
    }

    .kpi-chart-label strong {
        color: #111827;
        font-weight: 900;
    }

.kpi-chart-bar {
    height: 12px;
    background: #e5e7eb;
    border-radius: 999px;
    overflow: hidden;
}

    .kpi-chart-bar span {
        display: block;
        height: 100%;
        background: linear-gradient(135deg, #6b9f08, #7c3aed);
    }
/* benchmark dashboard*/
.benchmark-score-card {
    background: linear-gradient(135deg, #111827, #1e293b);
    color: #fff;
    border-radius: 28px;
    padding: 24px;
    display: flex;
    justify-content: space-between;
    gap: 24px;
    align-items: center;
    box-shadow: 0 16px 34px rgba(15, 23, 42, .18);
}

    .benchmark-score-card span {
        display: block;
        color: #cbd5e1;
        font-weight: 800;
    }

    .benchmark-score-card strong {
        display: block;
        font-size: 3rem;
        font-weight: 950;
        margin: 10px 0;
    }

    .benchmark-score-card small {
        color: #94a3b8;
        font-weight: 700;
    }

.benchmark-circle {
    width: 120px;
    height: 120px;
    border-radius: 50%;
    display: grid;
    place-items: center;
    font-size: 1.8rem;
    font-weight: 950;
    background: #6b9f08;
    border: 8px solid rgba(255,255,255,.14);
}

    .benchmark-circle.benchmark-passed {
        background: #16a34a;
    }

    .benchmark-circle.benchmark-warning {
        background: #f97316;
    }

    .benchmark-circle.benchmark-failed {
        background: #dc2626;
    }

.benchmark-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(360px, 1fr));
    gap: 16px;
}

.benchmark-card {
    border: 1px solid #e5e7eb;
    border-top: 5px solid #94a3b8;
    border-radius: 24px;
    background: #fff;
    padding: 16px;
    transition: .18s ease;
}

    .benchmark-card:hover {
        transform: translateY(-2px);
        box-shadow: 0 14px 30px rgba(15, 23, 42, .08);
    }

    .benchmark-card.benchmark-passed {
        border-top-color: #22c55e;
    }

    .benchmark-card.benchmark-warning {
        border-top-color: #f97316;
    }

    .benchmark-card.benchmark-failed {
        border-top-color: #dc2626;
    }

.benchmark-card-header {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    align-items: flex-start;
}

    .benchmark-card-header h5 {
        margin: 10px 0 0;
        color: #111827;
        font-weight: 900;
    }

.benchmark-status {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    border-radius: 999px;
    padding: 6px 11px;
    font-size: .78rem;
    font-weight: 900;
    white-space: nowrap;
}

    .benchmark-status.benchmark-passed {
        background: #dcfce7;
        color: #15803d;
    }

    .benchmark-status.benchmark-warning {
        background: #ffedd5;
        color: #c2410c;
    }

    .benchmark-status.benchmark-failed {
        background: #fee2e2;
        color: #b91c1c;
    }

.benchmark-values {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 10px;
    margin: 16px 0;
}

    .benchmark-values div {
        background: #f8fafc;
        border: 1px solid #eef2f7;
        border-radius: 14px;
        padding: 10px;
        text-align: center;
    }

    .benchmark-values span {
        display: block;
        color: #64748b;
        font-size: .72rem;
        margin-bottom: 4px;
    }

    .benchmark-values strong {
        color: #111827;
        font-weight: 900;
        font-size: .86rem;
    }

.benchmark-progress {
    height: 11px;
    background: #e5e7eb;
    border-radius: 999px;
    overflow: hidden;
}

    .benchmark-progress span {
        display: block;
        height: 100%;
        background: #6b9f08;
    }

.benchmark-card.benchmark-passed .benchmark-progress span {
    background: #22c55e;
}

.benchmark-card.benchmark-warning .benchmark-progress span {
    background: #f97316;
}

.benchmark-card.benchmark-failed .benchmark-progress span {
    background: #dc2626;
}

.benchmark-notes {
    margin-top: 14px;
    background: #f8fafc;
    border: 1px solid #e5e7eb;
    border-radius: 14px;
    padding: 10px 12px;
    color: #475569;
    font-size: .85rem;
    line-height: 1.6;
}

@media (max-width: 700px) {
    .benchmark-score-card {
        flex-direction: column;
        align-items: flex-start;
    }

    .benchmark-grid {
        grid-template-columns: 1fr;
    }

    .benchmark-values {
        grid-template-columns: 1fr;
    }
}

/*vendors and contrac */
/* =========================================================
   Enterprise Detail Tabs - Horizontal Hidden Scroll
   Same style as Work Order Details tabs
========================================================= */

.fm-detail-tabs-card {
    background: #ffffff;
    border: 1px solid #e2e8f0;
    border-radius: 24px;
    padding: 22px;
    box-shadow: 0 12px 35px rgba(15, 23, 42, 0.06);
}

.fm-detail-tabs {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: nowrap;
    overflow-x: auto;
    overflow-y: hidden;
    background: #f8fafc;
    border: 1px solid #dbe3ef;
    border-radius: 22px;
    padding: 12px;
    margin-bottom: 18px;
    scroll-behavior: smooth;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    -ms-overflow-style: none;
}

    .fm-detail-tabs::-webkit-scrollbar {
        display: none;
        width: 0;
        height: 0;
    }

.fm-detail-tab {
    flex: 0 0 auto;
    min-height: 54px;
    min-width: 135px;
    max-width: 190px;
    padding: 0 20px;
    border: 1px solid transparent;
    border-radius: 16px;
    background: #ffffff;
    color: #243b53;
    font-size: 0.96rem;
    font-weight: 800;
    white-space: nowrap;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 9px;
    cursor: pointer;
    box-shadow: 0 8px 20px rgba(15, 23, 42, 0.04);
    transition: background-color 0.18s ease, color 0.18s ease, border-color 0.18s ease, box-shadow 0.18s ease, transform 0.18s ease;
}

    .fm-detail-tab i {
        font-size: 1.05rem;
        color: inherit;
        flex-shrink: 0;
    }

    .fm-detail-tab:hover {
        background: #f5fbe9;
        color: #527900;
        border-color: #d9f6a1;
        transform: translateY(-2px);
        box-shadow: 0 12px 26px rgba(132, 199, 8, 0.14);
    }

    .fm-detail-tab.active {
        background: #6b9f08;
        color: #ffffff;
        border-color: #6b9f08;
        box-shadow: 0 14px 28px rgba(132, 199, 8, 0.30);
    }

        .fm-detail-tab.active:hover {
            background: #527900;
            color: #ffffff;
            border-color: #527900;
            transform: translateY(-2px);
            box-shadow: 0 16px 32px rgba(132, 199, 8, 0.35);
        }

.fm-detail-tab-content {
    padding-top: 4px;
}

/* Tablet */
@media (max-width: 1199px) {
    .fm-detail-tab {
        min-width: 140px;
        max-width: 185px;
        padding: 0 18px;
        font-size: 0.94rem;
    }
}

/* Mobile */
@media (max-width: 768px) {
    .fm-detail-tabs-card {
        padding: 14px;
        border-radius: 18px;
    }

    .fm-detail-tabs {
        border-radius: 18px;
        padding: 10px;
        gap: 8px;
    }

    .fm-detail-tab {
        min-height: 48px;
        min-width: 135px;
        max-width: 170px;
        padding: 0 14px;
        font-size: 0.9rem;
        border-radius: 14px;
    }
}

/* =========================================================
   Enterprise Add Button
   Used in Facilities detail tabs and forms
========================================================= */

.fm-add-btn {
    border: 0;
    min-height: 38px;
    padding: 0 16px;
    border-radius: 999px;
    background: linear-gradient(135deg, #6b9f08, #527900);
    color: #ffffff;
    font-weight: 800;
    font-size: 0.88rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    box-shadow: 0 10px 22px rgba(132, 199, 8, 0.26);
    transition: transform 0.18s ease, box-shadow 0.18s ease, background 0.18s ease;
}

    .fm-add-btn:hover {
        color: #ffffff;
        background: linear-gradient(135deg, #527900, #1e40af);
        transform: translateY(-2px);
        box-shadow: 0 14px 28px rgba(132, 199, 8, 0.34);
    }

    .fm-add-btn:active {
        transform: translateY(0);
        box-shadow: 0 8px 18px rgba(132, 199, 8, 0.24);
    }

    .fm-add-btn i {
        font-size: 1rem;
    }


/* Enterprise dashboard charts */
.fm-chart-card {
    background: #fff;
    border: 1px solid #e2e8f0;
    border-radius: 24px;
    padding: 20px;
    box-shadow: 0 14px 35px rgba(15, 23, 42, .06);
    height: 100%;
}

.fm-chart-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 16px;
}

    .fm-chart-header h6 {
        margin: 0;
        color: #0f172a;
        font-size: 1rem;
        font-weight: 900;
        display: flex;
        align-items: center;
        gap: 9px;
    }

        .fm-chart-header h6 i {
            color: #6b9f08;
            font-size: 1.1rem;
        }

    .fm-chart-header p {
        margin: 6px 0 0;
        color: #64748b;
        font-size: .86rem;
        font-weight: 600;
    }

.fm-chart-body {
    position: relative;
    width: 100%;
}

.fm-chart-body-sm {
    height: 240px;
}

.fm-chart-body-md {
    height: 310px;
}

.fm-chart-body-lg {
    height: 370px;
}

.fm-chart-body-xl {
    height: 430px;
}

@media (max-width: 768px) {
    .fm-chart-card {
        border-radius: 18px;
        padding: 14px;
    }

    .fm-chart-body-md,
    .fm-chart-body-lg,
    .fm-chart-body-xl {
        height: 280px;
    }
}
/* ==========================================================
   Enterprise KPI Cards - Global System Style
========================================================== */

.fm-kpi-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 18px;
}

.fm-kpi-card {
    position: relative;
    overflow: hidden;
    min-height: 158px;
    border-radius: 22px;
    padding: 20px;
    background: linear-gradient(180deg, #ffffff 0%, #fbfdff 100%);
    border: 1px solid #dbe5f1;
    box-shadow: 0 12px 28px rgba(15, 23, 42, .06);
    transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}

    .fm-kpi-card:hover {
        transform: translateY(-3px);
        box-shadow: 0 18px 40px rgba(15, 23, 42, .10);
        border-color: rgba(132, 199, 8, .25);
    }

.fm-kpi-accent {
    position: absolute;
    inset-inline-start: 0;
    top: 0;
    width: 5px;
    height: 100%;
    background: var(--kpi-color);
}

.fm-kpi-card::after {
    content: "";
    position: absolute;
    inset-inline-end: -55px;
    top: -65px;
    width: 150px;
    height: 150px;
    border-radius: 999px;
    background: var(--kpi-soft);
    opacity: .75;
}

.fm-kpi-top {
    position: relative;
    z-index: 2;
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 14px;
    margin-bottom: 18px;
}

.fm-kpi-icon {
    width: 48px;
    height: 48px;
    border-radius: 16px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: var(--kpi-soft);
    color: var(--kpi-color);
    border: 1px solid var(--kpi-border);
}

    .fm-kpi-icon i {
        font-size: 1.45rem;
    }

.fm-kpi-badge {
    min-height: 28px;
    padding: 0 11px;
    border-radius: 999px;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: var(--kpi-color);
    background: var(--kpi-soft);
    border: 1px solid var(--kpi-border);
    font-size: .76rem;
    font-weight: 850;
    white-space: nowrap;
}

.fm-kpi-content {
    position: relative;
    z-index: 2;
}

.fm-kpi-title {
    display: block;
    color: #64748b;
    font-size: .84rem;
    font-weight: 800;
    margin-bottom: 6px;
}

.fm-kpi-value {
    display: block;
    color: #0f172a;
    font-size: 2rem;
    line-height: 1.05;
    font-weight: 900;
    letter-spacing: -.035em;
    margin-bottom: 8px;
}

.fm-kpi-subtitle {
    margin: 0;
    color: #64748b;
    font-size: .82rem;
    font-weight: 600;
    line-height: 1.5;
}

.fm-kpi-progress-wrap {
    position: relative;
    z-index: 2;
    margin-top: 15px;
}

.fm-kpi-progress-info {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    margin-bottom: 7px;
    color: #64748b;
    font-size: .74rem;
    font-weight: 800;
}

    .fm-kpi-progress-info strong {
        color: var(--kpi-color);
    }

.fm-kpi-progress {
    height: 7px;
    border-radius: 999px;
    background: #eef2f7;
    overflow: hidden;
}

    .fm-kpi-progress span {
        display: block;
        height: 100%;
        border-radius: 999px;
        background: linear-gradient(90deg, var(--kpi-color), var(--kpi-color-2));
    }

/* Variants */
.fm-kpi-primary {
    --kpi-color: #6b9f08;
    --kpi-color-2: #b5ed45;
    --kpi-soft: rgba(132, 199, 8, .10);
    --kpi-border: rgba(132, 199, 8, .18);
}

.fm-kpi-success {
    --kpi-color: #059669;
    --kpi-color-2: #34d399;
    --kpi-soft: rgba(5, 150, 105, .10);
    --kpi-border: rgba(5, 150, 105, .18);
}

.fm-kpi-warning {
    --kpi-color: #d97706;
    --kpi-color-2: #fbbf24;
    --kpi-soft: rgba(217, 119, 6, .11);
    --kpi-border: rgba(217, 119, 6, .18);
}

.fm-kpi-danger {
    --kpi-color: #dc2626;
    --kpi-color-2: #fb7185;
    --kpi-soft: rgba(220, 38, 38, .10);
    --kpi-border: rgba(220, 38, 38, .18);
}

.fm-kpi-info {
    --kpi-color: #0891b2;
    --kpi-color-2: #22d3ee;
    --kpi-soft: rgba(8, 145, 178, .10);
    --kpi-border: rgba(8, 145, 178, .18);
}

.fm-kpi-purple {
    --kpi-color: #7c3aed;
    --kpi-color-2: #a78bfa;
    --kpi-soft: rgba(124, 58, 237, .10);
    --kpi-border: rgba(124, 58, 237, .18);
}

.fm-kpi-dark {
    --kpi-color: #334155;
    --kpi-color-2: #64748b;
    --kpi-soft: rgba(51, 65, 85, .09);
    --kpi-border: rgba(51, 65, 85, .16);
}

@media (max-width: 1400px) {
    .fm-kpi-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 768px) {
    .fm-kpi-grid {
        grid-template-columns: 1fr;
        gap: 14px;
    }

    .fm-kpi-card {
        min-height: 145px;
        border-radius: 18px;
        padding: 17px;
    }

    .fm-kpi-value {
        font-size: 1.7rem;
    }
}

/* ==========================================================
   Contract Dashboard Enterprise V2
========================================================== */

.fm-dashboard-shell {
    display: flex;
    flex-direction: column;
    gap: 18px;
}

.fm-executive-panel {
    background: linear-gradient(135deg, #0f172a 0%, #1e3a8a 52%, #6b9f08 100%);
    border-radius: 28px;
    padding: 26px;
    color: #fff;
    box-shadow: 0 22px 55px rgba(15, 23, 42, .20);
    position: relative;
    overflow: hidden;
}

    .fm-executive-panel::after {
        content: "";
        position: absolute;
        width: 320px;
        height: 320px;
        border-radius: 999px;
        inset-inline-end: -110px;
        top: -140px;
        background: rgba(255, 255, 255, .12);
    }

    .fm-executive-panel h4 {
        margin: 0;
        font-weight: 950;
        letter-spacing: -.03em;
    }

    .fm-executive-panel p {
        margin: 8px 0 0;
        color: rgba(255,255,255,.76);
        font-weight: 600;
    }

.fm-executive-metrics {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 14px;
    margin-top: 22px;
    position: relative;
    z-index: 2;
}

.fm-executive-metric {
    background: rgba(255,255,255,.12);
    border: 1px solid rgba(255,255,255,.18);
    border-radius: 20px;
    padding: 16px;
    backdrop-filter: blur(14px);
}

    .fm-executive-metric span {
        display: block;
        color: rgba(255,255,255,.72);
        font-size: .78rem;
        font-weight: 750;
        margin-bottom: 7px;
    }

    .fm-executive-metric strong {
        display: block;
        color: #fff;
        font-size: 1.45rem;
        font-weight: 950;
    }

.fm-chart-badge {
    border-radius: 999px;
    background: #f5fbe9;
    color: #6b9f08;
    border: 1px solid #d9f6a1;
    padding: 6px 11px;
    font-size: .76rem;
    font-weight: 850;
    white-space: nowrap;
}

.fm-chart-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    color: #64748b;
    text-align: center;
    background: radial-gradient(circle at 50% 20%, rgba(37,99,235,.08), transparent 34%), #fbfdff;
    border: 1px dashed #cbd5e1;
    border-radius: 18px;
    padding: 20px;
}

.fm-chart-empty-icon {
    width: 54px;
    height: 54px;
    border-radius: 18px;
    background: #f5fbe9;
    color: #6b9f08;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 12px;
}

    .fm-chart-empty-icon i {
        font-size: 1.55rem;
    }

.fm-chart-empty strong {
    color: #0f172a;
    font-size: 1rem;
    font-weight: 900;
}

.fm-chart-empty p {
    max-width: 310px;
    margin: 7px auto 0;
    font-size: .84rem;
    font-weight: 600;
    line-height: 1.5;
}

.fm-alert-section-title {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    margin-bottom: 14px;
}

    .fm-alert-section-title h5 {
        margin: 0;
        font-size: 1.05rem;
        font-weight: 950;
        color: #0f172a;
        display: flex;
        align-items: center;
        gap: 9px;
    }

    .fm-alert-section-title p {
        margin: 4px 0 0;
        color: #64748b;
        font-size: .84rem;
        font-weight: 600;
    }

.fm-risk-score {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 8px 13px;
    border-radius: 999px;
    font-size: .8rem;
    font-weight: 900;
}

    .fm-risk-score.low {
        color: #059669;
        background: rgba(5,150,105,.11);
    }

    .fm-risk-score.medium {
        color: #d97706;
        background: rgba(217,119,6,.12);
    }

    .fm-risk-score.high {
        color: #dc2626;
        background: rgba(220,38,38,.11);
    }

@media (max-width: 1400px) {
    .fm-executive-metrics {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 768px) {
    .fm-executive-panel {
        border-radius: 20px;
        padding: 20px;
    }

    .fm-executive-metrics {
        grid-template-columns: 1fr;
    }
}

/* ==========================================================
   Contract Alerts Page
========================================================== */

.fm-alert-icon-box {
    width: 42px;
    height: 42px;
    min-width: 42px;
    border-radius: 15px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 1px solid transparent;
}

    .fm-alert-icon-box i {
        font-size: 1.25rem;
    }

    .fm-alert-icon-box.danger {
        color: #dc2626;
        background: rgba(220, 38, 38, .10);
        border-color: rgba(220, 38, 38, .16);
    }

    .fm-alert-icon-box.warning {
        color: #d97706;
        background: rgba(217, 119, 6, .11);
        border-color: rgba(217, 119, 6, .16);
    }

    .fm-alert-icon-box.info {
        color: #0891b2;
        background: rgba(8, 145, 178, .10);
        border-color: rgba(8, 145, 178, .16);
    }

    .fm-alert-icon-box.muted {
        color: #64748b;
        background: rgba(100, 116, 139, .10);
        border-color: rgba(100, 116, 139, .16);
    }

.fm-alert-row-critical {
    background: linear-gradient(90deg, rgba(220, 38, 38, .055), transparent 55%);
}

.fm-alert-row-high {
    background: linear-gradient(90deg, rgba(217, 119, 6, .055), transparent 55%);
}

.fm-alert-row-closed {
    opacity: .72;
    background: #f8fafc;
}

/* =========================================================
   Smart Assignment Modal
========================================================= */

.fm-assignment-modal-body {
    max-height: 70vh;
    overflow-y: auto;
    padding-inline-end: 4px;
}

.fm-assignment-layout {
    display: grid;
    grid-template-columns: 440px minmax(0, 1fr);
    gap: 1rem;
    align-items: start;
}

.fm-assignment-side-card {
    border: 1px solid #e5e7eb;
    border-radius: 18px;
    padding: 1rem;
    background: #fff;
    box-shadow: 0 12px 30px rgba(15, 23, 42, 0.06);
    min-width: 0;
}

.fm-assignment-table-card {
    border: 1px solid #e5e7eb;
    border-radius: 18px;
    background: #fff;
    overflow: hidden;
    min-width: 0;
}

.fm-assignment-mini-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: .75rem;
}

.fm-assignment-mini-stat {
    border: 1px solid #e5e7eb;
    background: #f8fafc;
    border-radius: 14px;
    padding: .85rem;
    min-width: 0;
}

    .fm-assignment-mini-stat span {
        display: block;
        font-size: .78rem;
        color: #64748b;
        margin-bottom: .35rem;
        line-height: 1.35;
    }

    .fm-assignment-mini-stat strong {
        display: block;
        font-size: .95rem;
        color: #0f172a;
        line-height: 1.45;
        overflow-wrap: anywhere;
        word-break: break-word;
    }

.fm-assignment-table-scroll {
    width: 100%;
    overflow-x: auto;
    overflow-y: visible;
}

.fm-assignment-table {
    min-width: 1200px;
    margin-bottom: 0;
    border-collapse: separate;
    border-spacing: 0;
}

    .fm-assignment-table th,
    .fm-assignment-table td {
        white-space: normal;
        vertical-align: middle;
    }

        .fm-assignment-table th:nth-child(1),
        .fm-assignment-table td:nth-child(1) {
            position: sticky;
            left: 0;
            z-index: 4;
            width: 46px;
            min-width: 46px;
            max-width: 46px;
            background: #fff;
        }

        .fm-assignment-table th:nth-child(2),
        .fm-assignment-table td:nth-child(2) {
            position: sticky;
            left: 46px;
            z-index: 4;
            width: 210px;
            min-width: 210px;
            max-width: 210px;
            background: #fff;
            box-shadow: 8px 0 12px rgba(15, 23, 42, 0.05);
        }

        .fm-assignment-table th:last-child,
        .fm-assignment-table td:last-child {
            position: sticky;
            right: 0;
            z-index: 4;
            width: 160px;
            min-width: 160px;
            max-width: 160px;
            background: #fff;
            box-shadow: -8px 0 12px rgba(15, 23, 42, 0.05);
        }

    .fm-assignment-table thead th {
        background: #f8fafc !important;
        z-index: 5;
    }

        .fm-assignment-table thead th:nth-child(1),
        .fm-assignment-table thead th:nth-child(2),
        .fm-assignment-table thead th:last-child {
            z-index: 6;
            background: #f8fafc !important;
        }

.fm-assignment-score-details {
    min-width: 150px;
    line-height: 1.55;
}

.fm-assignment-score-cell strong {
    display: block;
    margin-bottom: .35rem;
}

.fm-assignment-footer {
    display: flex;
    gap: .5rem;
    justify-content: flex-end;
    flex-wrap: wrap;
    width: 100%;
}

.fm-assignment-skillings {
    display: flex;
    flex-wrap: wrap;
    gap: .5rem;
}

.fm-assignment-muted-text {
    color: #64748b;
    line-height: 1.6;
}

html[dir="rtl"] .fm-assignment-table th:nth-child(1),
html[dir="rtl"] .fm-assignment-table td:nth-child(1) {
    right: 0;
    left: auto;
}

html[dir="rtl"] .fm-assignment-table th:nth-child(2),
html[dir="rtl"] .fm-assignment-table td:nth-child(2) {
    right: 46px;
    left: auto;
    box-shadow: -8px 0 12px rgba(15, 23, 42, 0.05);
}

html[dir="rtl"] .fm-assignment-table th:last-child,
html[dir="rtl"] .fm-assignment-table td:last-child {
    left: 0;
    right: auto;
    box-shadow: 8px 0 12px rgba(15, 23, 42, 0.05);
}

@media (max-width: 1200px) {
    .fm-assignment-layout {
        grid-template-columns: 1fr;
    }

    .fm-assignment-side-card {
        width: 100%;
    }
}

/* =========================================================
   PM Dashboard
========================================================= */

.fm-dashboard-bars {
    display: flex;
    flex-direction: column;
    gap: .85rem;
}

.fm-dashboard-bar-row {
    display: grid;
    grid-template-columns: 180px minmax(0, 1fr) 70px;
    align-items: center;
    gap: .75rem;
}

.fm-dashboard-bar-label {
    display: flex;
    flex-direction: column;
    gap: .1rem;
}

    .fm-dashboard-bar-label span {
        color: #64748b;
        font-size: .82rem;
    }

    .fm-dashboard-bar-label strong {
        color: #0f172a;
        font-size: 1rem;
    }

.fm-dashboard-bar-track {
    height: 12px;
    border-radius: 999px;
    overflow: hidden;
    background: #eef2f7;
}

.fm-dashboard-bar-fill {
    height: 100%;
    border-radius: 999px;
    background: #64748b;
}

    .fm-dashboard-bar-fill.success {
        background: #16a34a;
    }

    .fm-dashboard-bar-fill.warning {
        background: #f59e0b;
    }

    .fm-dashboard-bar-fill.info {
        background: #84c708;
    }

    .fm-dashboard-bar-fill.danger {
        background: #dc2626;
    }

    .fm-dashboard-bar-fill.muted {
        background: #94a3b8;
    }

.fm-performance-list {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.fm-performance-item {
    border: 1px solid #e5e7eb;
    background: #f8fafc;
    border-radius: 16px;
    padding: .9rem;
}

    .fm-performance-item span {
        display: block;
        color: #64748b;
        font-size: .85rem;
        margin-bottom: .35rem;
    }

    .fm-performance-item strong {
        display: block;
        color: #0f172a;
        font-size: 1.25rem;
        margin-bottom: .5rem;
    }

.fm-list-panel {
    display: flex;
    flex-direction: column;
    gap: .75rem;
}

.fm-list-panel-item {
    border: 1px solid #e5e7eb;
    background: #fff;
    border-radius: 14px;
    padding: .85rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: .75rem;
}

    .fm-list-panel-item div {
        min-width: 0;
    }

    .fm-list-panel-item strong {
        display: block;
        color: #0f172a;
        overflow-wrap: anywhere;
    }

    .fm-list-panel-item small {
        display: block;
        color: #64748b;
        margin-top: .15rem;
        overflow-wrap: anywhere;
    }

@media (max-width: 768px) {
    .fm-dashboard-bar-row {
        grid-template-columns: 1fr;
    }
}

/* =========================================================
   Section Title With Action Button
========================================================= */

.fm-section-title-actions {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    width: 100%;
}

.fm-section-title-text {
    display: flex;
    align-items: center;
    gap: .55rem;
    min-width: 0;
    font-weight: 700;
    color: #0f172a;
}

    .fm-section-title-text i {
        width: 34px;
        height: 34px;
        border-radius: 12px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        background: #f1f5f9;
        color: #64748b;
        font-size: 1rem;
    }

    .fm-section-title-text span {
        overflow-wrap: anywhere;
    }

.fm-section-action-btn {
    border: 1px solid #dbe3ef;
    background: #ffffff;
    color: #0f172a;
    border-radius: 999px;
    padding: .45rem .85rem;
    font-size: .85rem;
    font-weight: 600;
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    white-space: nowrap;
    transition: all .18s ease-in-out;
    box-shadow: 0 8px 18px rgba(15, 23, 42, 0.06);
}

    .fm-section-action-btn i {
        color: #64748b;
        font-size: .95rem;
    }

    .fm-section-action-btn:hover {
        background: #64748b;
        border-color: #64748b;
        color: #ffffff;
        transform: translateY(-1px);
        box-shadow: 0 12px 22px rgba(220, 38, 38, 0.18);
    }

        .fm-section-action-btn:hover i {
            color: #ffffff;
        }

@media (max-width: 576px) {
    .fm-section-title-actions {
        align-items: flex-start;
        flex-direction: column;
    }

    .fm-section-action-btn {
        width: 100%;
        justify-content: center;
    }
}

/* =========================================================
   Premium PM KPI Cards
========================================================= */

.pm-kpi-grid {
    display: grid;
    grid-template-columns: repeat(6, minmax(0, 1fr));
    gap: 1rem;
}

.pm-kpi-card {
    position: relative;
    overflow: hidden;
    min-height: 185px;
    border: 1px solid rgba(226, 232, 240, .95);
    border-radius: 24px;
    padding: 1rem;
    background: #ffffff;
    text-align: inherit;
    cursor: pointer;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    gap: .85rem;
    box-shadow: 0 16px 35px rgba(15, 23, 42, 0.07);
    transition: all .22s ease-in-out;
}

    .pm-kpi-card:hover {
        transform: translateY(-4px);
        box-shadow: 0 22px 45px rgba(15, 23, 42, 0.12);
    }

    .pm-kpi-card:focus {
        outline: none;
        box-shadow: 0 0 0 4px rgba(132, 199, 8, .15), 0 22px 45px rgba(15, 23, 42, 0.12);
    }

.pm-kpi-top {
    position: relative;
    z-index: 2;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: .75rem;
}

.pm-kpi-icon {
    width: 48px;
    height: 48px;
    border-radius: 18px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: #ffffff;
    font-size: 1.35rem;
    box-shadow: 0 12px 24px rgba(15, 23, 42, .18);
}

.pm-kpi-badge {
    border-radius: 999px;
    padding: .35rem .65rem;
    font-size: .72rem;
    font-weight: 800;
    background: rgba(255, 255, 255, .8);
    border: 1px solid rgba(226, 232, 240, .9);
    color: #475569;
    white-space: nowrap;
    backdrop-filter: blur(8px);
}

.pm-kpi-body {
    position: relative;
    z-index: 2;
}

    .pm-kpi-body span {
        display: block;
        color: #64748b;
        font-size: .82rem;
        font-weight: 700;
        margin-bottom: .35rem;
    }

    .pm-kpi-body strong {
        display: block;
        color: #0f172a;
        font-size: 2.05rem;
        line-height: 1;
        letter-spacing: -.04em;
        margin-bottom: .45rem;
    }

    .pm-kpi-body small {
        display: flex;
        align-items: center;
        gap: .35rem;
        color: #64748b;
        font-size: .78rem;
        font-weight: 600;
    }

.pm-kpi-footer {
    position: relative;
    z-index: 2;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .75rem;
    padding-top: .75rem;
    border-top: 1px solid rgba(226, 232, 240, .85);
    color: #475569;
    font-size: .78rem;
    font-weight: 800;
}

    .pm-kpi-footer i {
        width: 28px;
        height: 28px;
        border-radius: 999px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        background: #f8fafc;
        transition: all .22s ease-in-out;
    }

.pm-kpi-card:hover .pm-kpi-footer i {
    transform: translateX(3px);
}

html[dir="rtl"] .pm-kpi-card:hover .pm-kpi-footer i {
    transform: translateX(-3px);
}

.pm-kpi-bg-icon {
    position: absolute;
    z-index: 1;
    inset-inline-end: -16px;
    bottom: -18px;
    font-size: 6.2rem;
    opacity: .06;
    transform: rotate(-12deg);
    pointer-events: none;
}

.pm-kpi-progress {
    position: relative;
    z-index: 2;
    width: 100%;
    height: 8px;
    border-radius: 999px;
    background: #eef2f7;
    overflow: hidden;
}

    .pm-kpi-progress div {
        height: 100%;
        border-radius: 999px;
        transition: width .35s ease-in-out;
    }

/* Card color themes */

.pm-kpi-card.primary {
    background: radial-gradient(circle at top right, rgba(132, 199, 8, .13), transparent 42%), #ffffff;
}

    .pm-kpi-card.primary .pm-kpi-icon,
    .pm-kpi-card.primary .pm-kpi-progress div {
        background: linear-gradient(135deg, #6b9f08, #b5ed45);
    }

    .pm-kpi-card.primary .pm-kpi-footer i {
        color: #6b9f08;
    }

.pm-kpi-card.success {
    background: radial-gradient(circle at top right, rgba(22, 163, 74, .13), transparent 42%), #ffffff;
}

    .pm-kpi-card.success .pm-kpi-icon,
    .pm-kpi-card.success .pm-kpi-progress div {
        background: linear-gradient(135deg, #16a34a, #4ade80);
    }

    .pm-kpi-card.success .pm-kpi-footer i {
        color: #16a34a;
    }

.pm-kpi-card.warning {
    background: radial-gradient(circle at top right, rgba(245, 158, 11, .17), transparent 42%), #ffffff;
}

    .pm-kpi-card.warning .pm-kpi-icon,
    .pm-kpi-card.warning .pm-kpi-progress div {
        background: linear-gradient(135deg, #f59e0b, #fbbf24);
    }

    .pm-kpi-card.warning .pm-kpi-footer i {
        color: #d97706;
    }

.pm-kpi-card.info {
    background: radial-gradient(circle at top right, rgba(132, 199, 8, .14), transparent 42%), #ffffff;
}

    .pm-kpi-card.info .pm-kpi-icon,
    .pm-kpi-card.info .pm-kpi-progress div {
        background: linear-gradient(135deg, #0284c7, #38bdf8);
    }

    .pm-kpi-card.info .pm-kpi-footer i {
        color: #0284c7;
    }

.pm-kpi-card.purple {
    background: radial-gradient(circle at top right, rgba(124, 58, 237, .14), transparent 42%), #ffffff;
}

    .pm-kpi-card.purple .pm-kpi-icon,
    .pm-kpi-card.purple .pm-kpi-progress div {
        background: linear-gradient(135deg, #7c3aed, #a78bfa);
    }

    .pm-kpi-card.purple .pm-kpi-footer i {
        color: #7c3aed;
    }

.pm-kpi-card.dark {
    background: radial-gradient(circle at top right, rgba(15, 23, 42, .14), transparent 42%), #ffffff;
}

    .pm-kpi-card.dark .pm-kpi-icon,
    .pm-kpi-card.dark .pm-kpi-progress div {
        background: linear-gradient(135deg, #0f172a, #475569);
    }

    .pm-kpi-card.dark .pm-kpi-footer i {
        color: #0f172a;
    }

/* Responsive */

@media (max-width: 1600px) {
    .pm-kpi-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

@media (max-width: 992px) {
    .pm-kpi-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 576px) {
    .pm-kpi-grid {
        grid-template-columns: 1fr;
    }

    .pm-kpi-card {
        min-height: 165px;
    }

    .pm-kpi-body strong {
        font-size: 1.75rem;
    }
}

/* =========================================================
   PM Calendar / Forecast View
========================================================= */

.pm-calendar-toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    flex-wrap: wrap;
}

.pm-calendar-month-nav {
    display: flex;
    align-items: center;
    gap: .65rem;
    flex-wrap: wrap;
}

.pm-calendar-current-month {
    display: flex;
    flex-direction: column;
    margin-inline-start: .35rem;
}

    .pm-calendar-current-month strong {
        color: #0f172a;
        font-size: 1.2rem;
        line-height: 1.2;
    }

    .pm-calendar-current-month small {
        color: #64748b;
        font-size: .82rem;
    }

.pm-calendar-filters {
    display: flex;
    align-items: center;
    gap: .65rem;
    flex-wrap: wrap;
}

    .pm-calendar-filters .form-select {
        min-width: 190px;
    }

.pm-calendar-layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 380px;
    gap: 1rem;
    align-items: start;
}

.pm-calendar-main {
    background: #ffffff;
    border: 1px solid #e5e7eb;
    border-radius: 24px;
    overflow: hidden;
    box-shadow: 0 16px 35px rgba(15, 23, 42, 0.06);
}

.pm-calendar-weekdays {
    display: grid;
    grid-template-columns: repeat(7, minmax(0, 1fr));
    background: #f8fafc;
    border-bottom: 1px solid #e5e7eb;
}

    .pm-calendar-weekdays div {
        padding: .85rem;
        text-align: center;
        font-weight: 800;
        color: #475569;
        font-size: .82rem;
    }

.pm-calendar-grid {
    display: grid;
    grid-template-columns: repeat(7, minmax(0, 1fr));
}

.pm-calendar-day {
    min-height: 150px;
    padding: .65rem;
    border-inline-end: 1px solid #e5e7eb;
    border-bottom: 1px solid #e5e7eb;
    background: #ffffff;
    transition: background .18s ease-in-out;
}

    .pm-calendar-day:hover {
        background: #f8fafc;
    }

    .pm-calendar-day.other-month {
        background: #f9fafb;
        opacity: .65;
    }

    .pm-calendar-day.today {
        background: radial-gradient(circle at top right, rgba(132, 199, 8, .12), transparent 44%), #ffffff;
    }

    .pm-calendar-day.has-items {
        background: radial-gradient(circle at top right, rgba(132, 199, 8, .07), transparent 40%), #ffffff;
    }

.pm-calendar-day-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: .5rem;
}

    .pm-calendar-day-header strong {
        width: 30px;
        height: 30px;
        border-radius: 11px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        color: #0f172a;
        font-size: .9rem;
    }

.pm-calendar-day.today .pm-calendar-day-header strong {
    background: #6b9f08;
    color: #ffffff;
}

.pm-calendar-day-header span {
    border-radius: 999px;
    background: #eefbd8;
    color: #527900;
    padding: .18rem .5rem;
    font-size: .68rem;
    font-weight: 800;
}

.pm-calendar-day-items {
    display: flex;
    flex-direction: column;
    gap: .35rem;
}

.pm-calendar-chip {
    border: 0;
    border-radius: 12px;
    padding: .4rem .45rem;
    display: flex;
    align-items: center;
    gap: .4rem;
    min-width: 0;
    text-align: inherit;
    cursor: pointer;
    font-size: .73rem;
    font-weight: 700;
    transition: all .16s ease-in-out;
}

    .pm-calendar-chip:hover {
        transform: translateY(-1px);
        box-shadow: 0 8px 16px rgba(15, 23, 42, 0.12);
    }

.pm-calendar-chip-dot {
    width: 8px;
    height: 8px;
    border-radius: 999px;
    flex: 0 0 auto;
    background: currentColor;
}

.pm-calendar-chip-text {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.pm-calendar-chip.pending {
    background: #fff7ed;
    color: #c2410c;
}

.pm-calendar-chip.generated {
    background: #edf9db;
    color: #527900;
}

.pm-calendar-chip.completed {
    background: #dcfce7;
    color: #15803d;
}

.pm-calendar-chip.overdue {
    background: #fee2e2;
    color: #b91c1c;
}

.pm-calendar-chip.skipped {
    background: #f1f5f9;
    color: #475569;
}

.pm-calendar-chip.cancelled {
    background: #ffe4e6;
    color: #be123c;
}

.pm-calendar-chip.default {
    background: #f8fafc;
    color: #475569;
}

.pm-calendar-more-btn {
    border: 1px dashed #cbd5e1;
    background: #ffffff;
    color: #475569;
    border-radius: 12px;
    padding: .35rem;
    font-size: .72rem;
    font-weight: 800;
    transition: all .16s ease-in-out;
}

    .pm-calendar-more-btn:hover {
        background: #f1f5f9;
        color: #0f172a;
    }

.pm-calendar-side {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.pm-calendar-side-card {
    margin-bottom: 0;
}

.pm-calendar-legend {
    display: grid;
    grid-template-columns: 1fr;
    gap: .65rem;
    margin-top: 1rem;
}

    .pm-calendar-legend div {
        display: flex;
        align-items: center;
        gap: .55rem;
        color: #475569;
        font-size: .86rem;
        font-weight: 700;
    }

.legend-dot {
    width: 11px;
    height: 11px;
    border-radius: 999px;
}

    .legend-dot.pending {
        background: #f97316;
    }

    .legend-dot.generated {
        background: #0284c7;
    }

    .legend-dot.completed {
        background: #16a34a;
    }

    .legend-dot.overdue {
        background: #dc2626;
    }

    .legend-dot.skipped {
        background: #64748b;
    }

    .legend-dot.cancelled {
        background: #be123c;
    }

.pm-calendar-upcoming-list,
.pm-calendar-forecast-list {
    display: flex;
    flex-direction: column;
    gap: .65rem;
    margin-top: 1rem;
}

.pm-calendar-upcoming-item,
.pm-calendar-forecast-item {
    border: 1px solid #e5e7eb;
    background: #ffffff;
    border-radius: 16px;
    padding: .75rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .75rem;
    text-align: inherit;
    transition: all .16s ease-in-out;
}

.pm-calendar-upcoming-item {
    cursor: pointer;
}

    .pm-calendar-upcoming-item:hover {
        background: #f8fafc;
        transform: translateY(-1px);
        box-shadow: 0 10px 18px rgba(15, 23, 42, 0.08);
    }

    .pm-calendar-upcoming-item div,
    .pm-calendar-forecast-item div {
        min-width: 0;
    }

    .pm-calendar-upcoming-item strong,
    .pm-calendar-forecast-item strong {
        display: block;
        color: #0f172a;
        font-size: .9rem;
    }

    .pm-calendar-upcoming-item small,
    .pm-calendar-forecast-item small {
        display: block;
        color: #64748b;
        font-size: .78rem;
        margin-top: .15rem;
        overflow-wrap: anywhere;
    }

.pm-mini-status {
    border-radius: 999px;
    padding: .25rem .55rem;
    font-size: .68rem;
    font-weight: 900;
    white-space: nowrap;
}

    .pm-mini-status.pending {
        background: #fff7ed;
        color: #c2410c;
    }

    .pm-mini-status.generated {
        background: #edf9db;
        color: #527900;
    }

    .pm-mini-status.completed {
        background: #dcfce7;
        color: #15803d;
    }

    .pm-mini-status.overdue {
        background: #fee2e2;
        color: #b91c1c;
    }

    .pm-mini-status.skipped {
        background: #f1f5f9;
        color: #475569;
    }

    .pm-mini-status.cancelled {
        background: #ffe4e6;
        color: #be123c;
    }

    .pm-mini-status.default {
        background: #f8fafc;
        color: #475569;
    }

.pm-schedule-details {
    border-radius: 22px;
    background: #ffffff;
}

.pm-schedule-details-header {
    border: 1px solid #e5e7eb;
    background: radial-gradient(circle at top right, rgba(132, 199, 8, .10), transparent 42%), #f8fafc;
    border-radius: 20px;
    padding: 1rem;
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1rem;
}

    .pm-schedule-details-header h5 {
        margin: .45rem 0 .2rem;
        color: #0f172a;
        font-weight: 900;
    }

    .pm-schedule-details-header p {
        margin: 0;
        color: #64748b;
    }

.pm-detail-box {
    border: 1px solid #e5e7eb;
    background: #ffffff;
    border-radius: 18px;
    padding: .9rem;
    min-height: 96px;
}

    .pm-detail-box span {
        display: block;
        color: #64748b;
        font-size: .8rem;
        font-weight: 800;
        margin-bottom: .4rem;
    }

    .pm-detail-box strong {
        display: block;
        color: #0f172a;
        font-size: .98rem;
        overflow-wrap: anywhere;
    }

    .pm-detail-box small {
        display: block;
        color: #64748b;
        margin-top: .25rem;
        overflow-wrap: anywhere;
    }

@media (max-width: 1400px) {
    .pm-calendar-layout {
        grid-template-columns: 1fr;
    }

    .pm-calendar-side {
        display: grid;
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

@media (max-width: 992px) {
    .pm-calendar-side {
        grid-template-columns: 1fr;
    }

    .pm-calendar-filters {
        width: 100%;
    }

        .pm-calendar-filters .form-select,
        .pm-calendar-filters .fm-search-box {
            width: 100%;
            max-width: none;
        }

    .pm-calendar-grid,
    .pm-calendar-weekdays {
        min-width: 900px;
    }

    .pm-calendar-main {
        overflow-x: auto;
    }
}

@media (max-width: 576px) {
    .pm-calendar-toolbar {
        align-items: stretch;
    }

    .pm-calendar-month-nav {
        width: 100%;
    }

        .pm-calendar-month-nav .btn {
            flex: 1;
        }

    .pm-calendar-current-month {
        width: 100%;
        margin-inline-start: 0;
        margin-top: .5rem;
    }

    .pm-schedule-details-header {
        flex-direction: column;
    }
}
/* =========================================================
   Scheduler Calendar Linked Highlight
========================================================= */

.calendar-event-selected {
    position: relative;
    border: 2px solid #6b9f08 !important;
    box-shadow: 0 0 0 4px rgba(132, 199, 8, .14), 0 16px 30px rgba(132, 199, 8, .22) !important;
    transform: translateY(-2px);
}

    .calendar-event-selected::before {
        content: "Selected";
        position: absolute;
        inset-inline-end: .65rem;
        top: -.65rem;
        background: #6b9f08;
        color: #ffffff;
        border-radius: 999px;
        padding: .15rem .55rem;
        font-size: .68rem;
        font-weight: 900;
        box-shadow: 0 8px 16px rgba(132, 199, 8, .25);
    }

html[dir="rtl"] .calendar-event-selected::before {
    content: "محدد";
}


/* =========================================================
   Facility Pro Brand System
   Enterprise Operations Intelligence
========================================================= */
:root {
    --primary: #84c708;
    --primary-dark: #0b0f10;
    --secondary: #b5ed45;
    --brand-lime: #84c708;
    --brand-lime-dark: #68a000;
    --brand-lime-soft: #effbd8;
    --brand-carbon: #0b0f10;
    --brand-carbon-2: #111718;
    --brand-slate: #263031;
    --bg: #f3f6f1;
    --card: #ffffff;
    --text: #131919;
    --muted: #697474;
    --border: #e2e8df;
    --sidebar-width: 292px;
    --sidebar-collapsed-width: 84px;
    --topbar-height: 78px;
}

body {
    background:
        radial-gradient(circle at 82% 4%, rgba(132, 199, 8, .055), transparent 25%),
        var(--bg);
    color: var(--text);
}

::selection {
    background: rgba(132, 199, 8, .30);
    color: #0b0f10;
}

.app-sidebar {
    background:
        radial-gradient(circle at 16% 3%, rgba(132, 199, 8, .18), transparent 25%),
        linear-gradient(180deg, #0a0e0f 0%, #101718 52%, #080b0c 100%) !important;
    box-shadow: 18px 0 46px rgba(5, 9, 9, .20);
    border-inline-end: 1px solid rgba(132, 199, 8, .14);
}

.rtl .app-sidebar {
    box-shadow: -18px 0 46px rgba(5, 9, 9, .20);
}

.sidebar-brand {
    min-height: var(--topbar-height);
    height: auto;
    padding: 11px 18px;
    gap: 12px;
    border-bottom-color: rgba(255, 255, 255, .09);
    background: rgba(255, 255, 255, .018);
}

.brand-icon {
    width: 50px;
    height: 50px;
    padding: 0;
    overflow: hidden;
    border-radius: 16px;
    background: #0b0f10;
    border: 1px solid rgba(181, 237, 69, .28);
    box-shadow: 0 12px 26px rgba(0, 0, 0, .30), 0 0 0 4px rgba(132, 199, 8, .055);
}

.brand-icon img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.brand-copy {
    min-width: 0;
}

.brand-title {
    display: flex;
    align-items: baseline;
    gap: 4px;
    font-size: 20px;
    letter-spacing: -.6px;
    white-space: nowrap;
}

.brand-title span {
    color: #ffffff;
    font-weight: 850;
}

.brand-title strong {
    color: var(--brand-lime);
    font-weight: 950;
}

.brand-subtitle {
    max-width: 184px;
    color: rgba(255, 255, 255, .52);
    font-size: 9.5px;
    line-height: 1.25;
    letter-spacing: .30px;
    text-transform: uppercase;
}

.nav-section {
    color: rgba(181, 237, 69, .54);
    font-weight: 850;
    letter-spacing: 1px;
}

.nav-item,
.nav-parent {
    color: rgba(255, 255, 255, .70);
    border: 1px solid transparent;
}

.nav-item:hover,
.nav-parent:hover {
    color: #ffffff;
    background: rgba(255, 255, 255, .065);
    border-color: rgba(255, 255, 255, .055);
}

.nav-item.active {
    color: #0b0f10;
    background: linear-gradient(135deg, #b7ee48, #84c708);
    border-color: rgba(210, 255, 122, .68);
    box-shadow: 0 12px 26px rgba(132, 199, 8, .22);
}

.nav-item.active i {
    color: #0b0f10;
}

.nav-child {
    color: rgba(255, 255, 255, .58);
}

.nav-child:hover {
    background: rgba(132, 199, 8, .08);
    color: #ffffff;
}

.nav-child.active {
    color: #c9ff62;
    background: rgba(132, 199, 8, .14);
    box-shadow: inset 3px 0 0 var(--brand-lime);
}

.rtl .nav-child.active {
    box-shadow: inset -3px 0 0 var(--brand-lime);
}

.sidebar-nav::-webkit-scrollbar-thumb {
    background: rgba(132, 199, 8, .30);
}

.sidebar-nav::after {
    background: linear-gradient(to bottom, transparent, rgba(5, 8, 8, .72));
}

.sidebar-footer {
    border-top-color: rgba(255, 255, 255, .08);
    background: rgba(0, 0, 0, .10);
}

.collapse-btn {
    color: #d9f7a3;
    background: rgba(132, 199, 8, .09);
    border: 1px solid rgba(132, 199, 8, .18);
    transition: .2s ease;
}

.collapse-btn:hover {
    color: #0b0f10;
    background: var(--brand-lime);
    transform: translateY(-1px);
}

.app-topbar {
    background: rgba(255, 255, 255, .90);
    border-bottom-color: rgba(214, 223, 209, .88);
    box-shadow: 0 10px 28px rgba(16, 24, 23, .035);
}

.topbar-brand-title {
    display: flex;
    align-items: baseline;
    gap: 3px;
    letter-spacing: -.55px;
}

.topbar-brand-title span {
    color: var(--brand-carbon);
    font-weight: 900;
}

.topbar-brand-title strong {
    color: var(--brand-lime-dark);
    font-weight: 950;
}

.page-heading > span {
    color: #75807d;
    letter-spacing: .08px;
}

.mobile-menu-btn,
.icon-btn {
    border-color: #dfe6dc;
    background: rgba(255, 255, 255, .92);
    color: #263030;
    box-shadow: 0 7px 18px rgba(17, 24, 24, .045);
}

.mobile-menu-btn:hover,
.icon-btn:hover {
    border-color: rgba(132, 199, 8, .52);
    background: var(--brand-lime-soft);
    color: #395400;
}

.notification-btn .notify-dot {
    background: var(--brand-lime);
    box-shadow: 0 0 0 3px rgba(132, 199, 8, .14);
}

.global-search {
    background: #f6f8f4;
    border-color: #dfe6dc;
    transition: .2s ease;
}

.global-search:focus-within {
    background: #ffffff;
    border-color: rgba(132, 199, 8, .68);
    box-shadow: 0 0 0 4px rgba(132, 199, 8, .10);
}

.global-search:focus-within i {
    color: var(--brand-lime-dark);
}

.app-content {
    background:
        linear-gradient(rgba(132, 199, 8, .018) 1px, transparent 1px),
        linear-gradient(90deg, rgba(132, 199, 8, .018) 1px, transparent 1px);
    background-size: 42px 42px;
}

.fm-card,
.fm-stat-card {
    border-color: #e1e8de;
    box-shadow: 0 14px 34px rgba(18, 28, 25, .052);
}

.fm-stat-card {
    transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}

.fm-stat-card:hover {
    transform: translateY(-3px);
    border-color: rgba(132, 199, 8, .34);
    box-shadow: 0 20px 42px rgba(18, 28, 25, .085);
}

.fm-page-header h1,
.fm-page-header h2,
.fm-page-header h3,
.fm-page-title {
    color: #111717;
    letter-spacing: -.35px;
}

.fm-section-title i,
.fm-section-title-text i {
    color: var(--brand-lime-dark) !important;
}

.btn-primary,
.btn.btn-primary,
.fm-action-btn.btn-primary {
    --bs-btn-color: #0b0f10;
    --bs-btn-bg: #84c708;
    --bs-btn-border-color: #84c708;
    --bs-btn-hover-color: #0b0f10;
    --bs-btn-hover-bg: #95db12;
    --bs-btn-hover-border-color: #95db12;
    --bs-btn-focus-shadow-rgb: 132, 199, 8;
    --bs-btn-active-color: #ffffff;
    --bs-btn-active-bg: #5f9200;
    --bs-btn-active-border-color: #5f9200;
    color: #0b0f10;
    background: linear-gradient(135deg, #98dc17, #84c708);
    border-color: #7fbe08 !important;
    font-weight: 800;
    box-shadow: 0 9px 20px rgba(132, 199, 8, .18);
}

.btn-primary:hover,
.btn.btn-primary:hover {
    color: #0b0f10;
    background: linear-gradient(135deg, #a5e72c, #91d40f);
    border-color: #86c70b !important;
    transform: translateY(-1px);
    box-shadow: 0 13px 26px rgba(132, 199, 8, .25);
}

.btn-light.border {
    border-color: #dce4d9 !important;
    background: #ffffff;
    color: #283130;
}

.btn-light.border:hover {
    border-color: rgba(132, 199, 8, .48) !important;
    background: #f5faee;
    color: #365000;
}

.text-primary {
    color: var(--brand-lime-dark) !important;
}

.bg-primary {
    background-color: var(--brand-lime) !important;
    color: #0b0f10 !important;
}

.form-control:focus,
.form-select:focus,
.form-check-input:focus {
    border-color: rgba(132, 199, 8, .70);
    box-shadow: 0 0 0 .22rem rgba(132, 199, 8, .12);
}

.form-check-input:checked {
    background-color: var(--brand-lime);
    border-color: var(--brand-lime-dark);
}

.layout-user-avatar,
.user-avatar {
    color: #ffffff;
    background: linear-gradient(145deg, #111718, #283332);
    border: 1px solid rgba(132, 199, 8, .46);
    box-shadow: 0 10px 22px rgba(15, 22, 21, .20);
}

.layout-user-arrow.open {
    color: #3f5d00;
    background: var(--brand-lime-soft);
}

.layout-user-dropdown-header {
    background: linear-gradient(135deg, #f8faf6, #eff8df);
}

.layout-user-dropdown-item i {
    color: #527900;
    background: var(--brand-lime-soft);
}

.layout-user-dropdown-item:hover i {
    background: #e4f7c1;
}

.bg-blue {
    background: linear-gradient(135deg, #111718, #384645);
}

.bg-green {
    background: linear-gradient(135deg, #68a000, #9adf19);
}

.bg-purple {
    background: linear-gradient(135deg, #51611e, #9bc82c);
}

.portal-loader-overlay {
    background:
        radial-gradient(circle at center, rgba(132, 199, 8, .14), transparent 36%),
        rgba(5, 8, 8, .94);
}

.portal-loader-box {
    color: #b9f14b;
}

.portal-loader-ring::before {
    border-color: rgba(132, 199, 8, .14);
    border-top-color: #9dde20;
    border-right-color: rgba(181, 237, 69, .60);
    filter: drop-shadow(0 0 12px rgba(132, 199, 8, .68));
}

.portal-loader-ring::after {
    border-color: rgba(132, 199, 8, .22);
}

.portal-loader-dot {
    background: #9dde20;
    box-shadow: 0 0 18px rgba(132, 199, 8, 1), 0 0 35px rgba(132, 199, 8, .72);
}

.portal-loader-logo {
    width: 116px;
    height: 110px;
    border-radius: 28px;
    filter: drop-shadow(0 16px 28px rgba(0, 0, 0, .38)) drop-shadow(0 0 20px rgba(132, 199, 8, .20));
}

.portal-loader-title {
    color: #c8f86c;
    text-shadow: 0 0 18px rgba(132, 199, 8, .34);
}

.portal-loader-bar span {
    background: linear-gradient(90deg, #68a000, #b7ef4a, #68a000);
    box-shadow: 0 0 16px rgba(132, 199, 8, .75);
}

.wo-logo-box img {
    max-width: 250px;
    max-height: 74px;
    object-fit: contain;
}

@media (max-width: 992px) {
    .app-sidebar {
        border-inline-end: 1px solid rgba(132, 199, 8, .20);
    }

    .mobile-sidebar-backdrop {
        background: rgba(5, 9, 9, .60);
        backdrop-filter: blur(4px);
    }
}

@media (max-width: 576px) {
    .topbar-brand-title {
        font-size: 1rem;
    }

    .app-content {
        background-size: 34px 34px;
    }
}

/* =========================================================
   Facility Pro Secure Login
========================================================= */
.fp-auth-page {
    position: relative;
    width: 100%;
    min-height: 100dvh;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 28px;
    color: #111717;
    background:
        radial-gradient(circle at 12% 12%, rgba(132, 199, 8, .12), transparent 25%),
        radial-gradient(circle at 90% 86%, rgba(132, 199, 8, .09), transparent 24%),
        linear-gradient(135deg, #edf2e9 0%, #f9fbf8 48%, #e9eee5 100%);
}

.fp-auth-page.rtl {
    direction: rtl;
}

.fp-auth-page.ltr {
    direction: ltr;
}

.fp-auth-grid {
    position: absolute;
    inset: 0;
    opacity: .42;
    pointer-events: none;
    background-image:
        linear-gradient(rgba(17, 23, 24, .035) 1px, transparent 1px),
        linear-gradient(90deg, rgba(17, 23, 24, .035) 1px, transparent 1px);
    background-size: 46px 46px;
    mask-image: radial-gradient(circle at center, black 22%, transparent 82%);
}

.fp-auth-glow {
    position: absolute;
    border-radius: 999px;
    filter: blur(18px);
    pointer-events: none;
    animation: fpGlowMove 9s ease-in-out infinite alternate;
}

.fp-auth-glow-one {
    width: 290px;
    height: 290px;
    top: -95px;
    inset-inline-start: -70px;
    background: rgba(132, 199, 8, .16);
}

.fp-auth-glow-two {
    width: 360px;
    height: 360px;
    bottom: -130px;
    inset-inline-end: -110px;
    background: rgba(22, 31, 30, .12);
    animation-delay: 1.5s;
}

@keyframes fpGlowMove {
    from { transform: translate3d(0, 0, 0) scale(1); }
    to { transform: translate3d(22px, -18px, 0) scale(1.07); }
}

.fp-auth-shell {
    position: relative;
    z-index: 2;
    width: min(1240px, 100%);
    min-height: 720px;
    display: grid;
    grid-template-columns: 1.08fr .92fr;
    overflow: hidden;
    border-radius: 34px;
    background: rgba(255, 255, 255, .72);
    border: 1px solid rgba(255, 255, 255, .88);
    box-shadow: 0 34px 90px rgba(17, 26, 24, .16);
    backdrop-filter: blur(24px);
}

@keyframes fpShellEnter {
    from { opacity: 0; transform: translateY(24px) scale(.988); }
    to { opacity: 1; transform: translateY(0) scale(1); }
}

.fp-auth-hero {
    position: relative;
    min-height: 720px;
    padding: 40px 44px 34px;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    color: #ffffff;
    background:
        radial-gradient(circle at 76% 21%, rgba(132, 199, 8, .22), transparent 27%),
        linear-gradient(145deg, #070a0b 0%, #111718 54%, #0b1010 100%);
}

.fp-auth-hero::before {
    content: "";
    position: absolute;
    inset: 0;
    opacity: .72;
    pointer-events: none;
    background-image:
        linear-gradient(rgba(255, 255, 255, .045) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255, 255, 255, .038) 1px, transparent 1px);
    background-size: 38px 38px;
    mask-image: linear-gradient(to bottom, black, transparent 90%);
}

.fp-auth-hero::after {
    content: "FP";
    position: absolute;
    inset-inline-end: -18px;
    bottom: -72px;
    color: rgba(132, 199, 8, .045);
    font-size: 340px;
    line-height: 1;
    font-weight: 1000;
    letter-spacing: -42px;
    pointer-events: none;
}

.fp-auth-hero-top,
.fp-auth-hero-copy,
.fp-auth-capabilities,
.fp-auth-hero-footer {
    position: relative;
    z-index: 2;
}

.fp-auth-hero-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
}

.fp-auth-brand {
    display: flex;
    align-items: center;
    gap: 13px;
}

.fp-auth-brand img,
.fp-auth-mobile-brand img {
    width: 56px;
    height: 56px;
    object-fit: cover;
    border-radius: 18px;
    flex: 0 0 auto;
    box-shadow: 0 14px 30px rgba(0, 0, 0, .30);
}

.fp-auth-brand-dark img {
    border: 1px solid rgba(181, 237, 69, .25);
}

.fp-auth-wordmark {
    display: flex;
    align-items: baseline;
    gap: 4px;
    font-size: 24px;
    letter-spacing: -.7px;
    line-height: 1;
}

.fp-auth-wordmark span {
    font-weight: 900;
}

.fp-auth-wordmark strong {
    color: var(--brand-lime);
    font-weight: 1000;
}

.fp-auth-brand small,
.fp-auth-mobile-brand small {
    display: block;
    margin-top: 6px;
    color: rgba(255, 255, 255, .50);
    font-size: 9px;
    font-weight: 750;
    line-height: 1.25;
    letter-spacing: .55px;
    text-transform: uppercase;
}

.fp-auth-live-badge {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 8px 12px;
    border-radius: 999px;
    color: #dfffa2;
    background: rgba(132, 199, 8, .10);
    border: 1px solid rgba(132, 199, 8, .20);
    font-size: 11px;
    font-weight: 850;
    white-space: nowrap;
}

.fp-auth-live-badge i {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: #a6e92b;
    box-shadow: 0 0 0 5px rgba(132, 199, 8, .12);
    animation: fpLivePulse 1.6s ease-in-out infinite;
}

@keyframes fpLivePulse {
    0%, 100% { opacity: 1; transform: scale(1); }
    50% { opacity: .62; transform: scale(.78); }
}

.fp-auth-hero-copy {
    max-width: 600px;
    margin: auto 0 34px;
    padding-top: 48px;
}

.fp-auth-eyebrow {
    display: inline-block;
    margin-bottom: 18px;
    color: #a8df38;
    font-size: 11px;
    font-weight: 950;
    letter-spacing: 1.45px;
}

.fp-auth-hero-copy h1 {
    margin: 0;
    color: #ffffff;
    font-size: clamp(38px, 4.35vw, 64px);
    line-height: 1.02;
    letter-spacing: -2.7px;
    font-weight: 820;
}

.fp-auth-hero-copy h1 span {
    display: block;
    color: #a9e33d;
}

.fp-auth-hero-copy p {
    max-width: 590px;
    margin: 22px 0 0;
    color: rgba(255, 255, 255, .64);
    font-size: 15px;
    line-height: 1.8;
}

.fp-auth-capabilities {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 10px;
    margin-bottom: 28px;
}

.fp-auth-capability {
    min-width: 0;
    padding: 13px;
    display: flex;
    align-items: center;
    gap: 10px;
    border-radius: 18px;
    background: rgba(255, 255, 255, .055);
    border: 1px solid rgba(255, 255, 255, .075);
    backdrop-filter: blur(10px);
    transition: .2s ease;
}

.fp-auth-capability:hover {
    background: rgba(132, 199, 8, .09);
    border-color: rgba(132, 199, 8, .18);
    transform: translateY(-2px);
}

.fp-auth-capability-icon {
    width: 40px;
    height: 40px;
    flex: 0 0 auto;
    display: grid;
    place-items: center;
    border-radius: 13px;
    color: #b9ef50;
    background: rgba(132, 199, 8, .10);
    border: 1px solid rgba(132, 199, 8, .14);
    font-size: 17px;
}

.fp-auth-capability strong {
    display: block;
    color: #ffffff;
    font-size: 11.5px;
    line-height: 1.2;
    font-weight: 900;
}

.fp-auth-capability span {
    display: block;
    margin-top: 4px;
    color: rgba(255, 255, 255, .44);
    font-size: 9.5px;
    line-height: 1.25;
}

.fp-auth-hero-footer {
    padding-top: 18px;
    display: flex;
    justify-content: space-between;
    gap: 16px;
    color: rgba(255, 255, 255, .38);
    border-top: 1px solid rgba(255, 255, 255, .07);
    font-size: 10px;
    font-weight: 750;
}

.fp-auth-hero-footer span {
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.fp-auth-hero-footer i {
    color: #8dcc12;
}

.fp-auth-panel {
    position: relative;
    min-height: 720px;
    padding: 48px;
    display: flex;
    align-items: center;
    justify-content: center;
    background:
        radial-gradient(circle at 100% 0%, rgba(132, 199, 8, .075), transparent 28%),
        linear-gradient(180deg, rgba(253, 254, 252, .98), rgba(246, 249, 244, .96));
}

.fp-auth-language {
    position: absolute;
    top: 24px;
    inset-inline-end: 24px;
    min-width: 48px;
    height: 40px;
    padding: 0 11px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    border-radius: 13px;
    border: 1px solid #dfe6dc;
    background: rgba(255, 255, 255, .88);
    color: #45504e;
    font-size: 12px;
    font-weight: 900;
    transition: .2s ease;
}

.fp-auth-language:hover {
    color: #304700;
    border-color: rgba(132, 199, 8, .48);
    background: #f0f9df;
}

.fp-auth-mobile-brand {
    display: none;
}

.fp-auth-card {
    width: 100%;
    max-width: 430px;
    padding: 34px;
    border-radius: 30px;
    background: rgba(255, 255, 255, .80);
    border: 1px solid rgba(221, 229, 217, .92);
    box-shadow: 0 22px 58px rgba(18, 29, 25, .085);
    backdrop-filter: blur(18px);
}

@keyframes fpCardEnter {
    from { opacity: 0; transform: translateX(24px); }
    to { opacity: 1; transform: translateX(0); }
}

@keyframes fpCardEnterRtl {
    from { opacity: 0; transform: translateX(-24px); }
    to { opacity: 1; transform: translateX(0); }
}

.fp-auth-card-icon {
    width: 66px;
    height: 66px;
    margin: 0 auto 17px;
    display: grid;
    place-items: center;
    overflow: hidden;
    position: relative;
    border-radius: 21px;
    color: #baf04f;
    background: linear-gradient(145deg, #0b0f10, #202a29);
    border: 1px solid rgba(132, 199, 8, .30);
    box-shadow: 0 16px 34px rgba(13, 20, 19, .22);
    font-size: 27px;
}

.fp-auth-card-icon::after {
    content: "";
    position: absolute;
    inset: -40%;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .22), transparent);
    transform: translateX(-110%) rotate(24deg);
    animation: fpIconShine 3.4s ease-in-out infinite;
}

@keyframes fpIconShine {
    0%, 48% { transform: translateX(-115%) rotate(24deg); }
    72%, 100% { transform: translateX(115%) rotate(24deg); }
}

.fp-auth-card-heading {
    margin-bottom: 27px;
    text-align: center;
}

.fp-auth-card-heading > span {
    color: #6a9f00;
    font-size: 10px;
    font-weight: 950;
    letter-spacing: 1.35px;
}

.fp-auth-card-heading h2 {
    margin: 8px 0 0;
    color: #111717;
    font-size: 31px;
    line-height: 1.1;
    font-weight: 950;
    letter-spacing: -.8px;
}

.fp-auth-card-heading p {
    margin: 9px 0 0;
    color: #73807d;
    font-size: 13px;
    line-height: 1.6;
    font-weight: 600;
}

.fp-auth-form {
    display: grid;
    gap: 17px;
}

.fp-auth-field label {
    display: block;
    margin-bottom: 8px;
    color: #394341;
    font-size: 12px;
    font-weight: 850;
}

.fp-auth-input {
    position: relative;
    height: 56px;
    overflow: hidden;
    border-radius: 17px;
    background: #f7f9f5;
    border: 1px solid #dce4d9;
    transition: .22s ease;
}

.fp-auth-input::after {
    content: "";
    position: absolute;
    inset-inline: 16px;
    bottom: 0;
    height: 2px;
    border-radius: 999px;
    background: linear-gradient(90deg, #567f00, #a0e025);
    transform: scaleX(0);
    transform-origin: left;
    transition: .22s ease;
}

.rtl .fp-auth-input::after {
    transform-origin: right;
}

.fp-auth-input:focus-within {
    background: #ffffff;
    border-color: rgba(132, 199, 8, .62);
    box-shadow: 0 0 0 5px rgba(132, 199, 8, .09);
    transform: translateY(-1px);
}

.fp-auth-input:focus-within::after {
    transform: scaleX(1);
}

.fp-auth-input > i {
    position: absolute;
    top: 50%;
    inset-inline-start: 17px;
    z-index: 2;
    transform: translateY(-50%);
    color: #77827f;
    font-size: 17px;
}

.fp-auth-input:focus-within > i {
    color: #648f0a;
}

.fp-auth-input input {
    width: 100%;
    height: 100%;
    border: 0;
    outline: 0;
    background: transparent;
    color: #111717;
    padding-inline-start: 48px;
    padding-inline-end: 48px;
    font-size: 14px;
    font-weight: 700;
}

.fp-auth-input input::placeholder {
    color: #9aa39f;
    font-weight: 550;
}

.fp-auth-password-toggle {
    position: absolute;
    top: 50%;
    inset-inline-end: 10px;
    z-index: 3;
    width: 38px;
    height: 38px;
    transform: translateY(-50%);
    display: grid;
    place-items: center;
    border: 0;
    border-radius: 12px;
    color: #78827f;
    background: transparent;
    transition: .18s ease;
}

.fp-auth-password-toggle:hover {
    color: #476800;
    background: #edf8d9;
}

.fp-auth-field .validation-message {
    display: block;
    margin-top: 6px;
    color: #b42318;
    font-size: 11px;
    font-weight: 750;
}

.fp-auth-submit {
    position: relative;
    width: 100%;
    height: 56px;
    margin-top: 3px;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    border: 1px solid #78b500;
    border-radius: 17px;
    color: #0b0f10;
    background: linear-gradient(135deg, #a1e326, #84c708);
    box-shadow: 0 16px 30px rgba(132, 199, 8, .23);
    font-size: 14px;
    font-weight: 950;
    transition: .23s ease;
}

.fp-auth-submit::before {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .38), transparent);
    transform: translateX(-110%);
    animation: fpButtonShine 3s ease-in-out infinite;
}

@keyframes fpButtonShine {
    0%, 50% { transform: translateX(-110%); }
    78%, 100% { transform: translateX(110%); }
}

.fp-auth-submit > * {
    position: relative;
    z-index: 2;
}

.fp-auth-submit:hover:not(:disabled) {
    color: #0b0f10;
    border-color: #88c909;
    background: linear-gradient(135deg, #b3ed42, #91d40f);
    transform: translateY(-2px);
    box-shadow: 0 20px 36px rgba(132, 199, 8, .29);
}

.fp-auth-submit:disabled {
    opacity: .74;
    cursor: not-allowed;
}

.fp-auth-form-booting .fp-auth-input,
.fp-auth-form-booting .fp-auth-submit {
    opacity: .78;
}

.fp-auth-form-booting .fp-auth-input {
    cursor: progress;
}

.fp-auth-form-booting .fp-auth-input input,
.fp-auth-form-booting .fp-auth-password-toggle,
.fp-auth-form-booting .form-check-input {
    cursor: progress;
}

.fp-auth-interactive-state {
    min-height: 20px;
    margin-top: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    color: #83908c;
    font-size: 10px;
    font-weight: 750;
    transition: color .18s ease, opacity .18s ease;
}

.fp-auth-interactive-state.ready {
    color: #60705f;
}

.fp-auth-state-dot {
    width: 7px;
    height: 7px;
    flex: 0 0 auto;
    border-radius: 50%;
    background: #aab5a7;
    box-shadow: 0 0 0 4px rgba(145, 158, 142, .10);
}

.fp-auth-interactive-state.ready .fp-auth-state-dot {
    background: #84c708;
    box-shadow: 0 0 0 4px rgba(132, 199, 8, .11);
}

.fp-auth-card-footer {
    margin-top: 22px;
    padding-top: 17px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    color: #86908d;
    border-top: 1px solid #e5ebe2;
    font-size: 10.5px;
    font-weight: 700;
    text-align: center;
}

.fp-auth-card-footer i {
    color: #75ad06;
}

@media (max-width: 1040px) {
    .fp-auth-page {
        align-items: flex-start;
        overflow-y: auto;
        padding: 18px;
    }

    .fp-auth-shell {
        grid-template-columns: 1fr;
        min-height: auto;
    }

    .fp-auth-hero {
        min-height: 480px;
        padding: 32px;
    }

    .fp-auth-hero-copy {
        margin: 62px 0 30px;
        padding: 0;
    }

    .fp-auth-hero-copy h1 {
        font-size: 48px;
    }

    .fp-auth-panel {
        min-height: 590px;
        padding: 44px 28px;
    }
}

@media (max-width: 680px) {
    .fp-auth-page {
        display: block;
        min-height: 100dvh;
        padding: 0;
        background: #f4f7f1;
    }

    .fp-auth-grid,
    .fp-auth-glow,
    .fp-auth-hero {
        display: none;
    }

    .fp-auth-shell {
        width: 100%;
        min-height: 100dvh;
        display: block;
        border: 0;
        border-radius: 0;
        box-shadow: none;
        background: #f4f7f1;
    }

    .fp-auth-panel {
        min-height: 100dvh;
        padding: 22px 16px 28px;
        display: flex;
        flex-direction: column;
        justify-content: center;
        background:
            radial-gradient(circle at 8% 5%, rgba(132, 199, 8, .13), transparent 30%),
            radial-gradient(circle at 95% 95%, rgba(17, 23, 24, .08), transparent 32%),
            #f4f7f1;
    }

    .fp-auth-language {
        top: 15px;
        inset-inline-end: 15px;
    }

    .fp-auth-mobile-brand {
        width: min(430px, 100%);
        margin: 35px auto 17px;
        padding: 12px;
        display: flex;
        align-items: center;
        gap: 11px;
        border-radius: 19px;
        background: linear-gradient(145deg, #0a0e0f, #182120);
        border: 1px solid rgba(132, 199, 8, .16);
        box-shadow: 0 15px 34px rgba(15, 23, 21, .15);
    }

    .fp-auth-mobile-brand img {
        width: 48px;
        height: 48px;
        border-radius: 15px;
    }

    .fp-auth-mobile-brand .fp-auth-wordmark {
        color: #ffffff;
        font-size: 20px;
    }

    .fp-auth-mobile-brand small {
        font-size: 7.5px;
    }

    .fp-auth-card {
        max-width: 430px;
        margin: 0 auto;
        padding: 24px 20px;
        border-radius: 24px;
        background: rgba(255, 255, 255, .88);
    }

    .fp-auth-card-icon {
        width: 60px;
        height: 60px;
        border-radius: 19px;
        margin-bottom: 14px;
        font-size: 24px;
    }

    .fp-auth-card-heading {
        margin-bottom: 22px;
    }

    .fp-auth-card-heading h2 {
        font-size: 27px;
    }

    .fp-auth-input,
    .fp-auth-submit {
        height: 53px;
        border-radius: 15px;
    }
}

@media (max-width: 390px) {
    .fp-auth-panel {
        padding-inline: 11px;
    }

    .fp-auth-card {
        padding: 21px 16px;
    }

    .fp-auth-mobile-brand {
        margin-top: 42px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .fp-auth-page *,
    .fp-auth-page *::before,
    .fp-auth-page *::after {
        animation-duration: .01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: .01ms !important;
    }
}

/* Procurement & Financial Integration - Phase 5A */
.procurement-lines-table { min-width: 1080px; }
.procurement-lines-table td { vertical-align: middle; }
.procurement-lines-table .form-control,
.procurement-lines-table .form-select { min-width: 92px; }
.procurement-description-cell { min-width: 280px; }
.procurement-summary-row { display:flex; align-items:center; justify-content:space-between; gap:1rem; padding:.75rem 0; border-bottom:1px solid var(--bs-border-color); }
.procurement-summary-row.total { font-size:1.08rem; border-bottom:0; padding-top:1rem; }
@media (max-width: 767.98px) { .procurement-description-cell { min-width: 220px; } }

/* Procurement master data, item lookup and document workflow */
.procurement-description-cell-wide { min-width: 360px; }
.procurement-uom-cell { min-width: 150px; }
.procurement-new-item-box { border: 1px solid var(--bs-border-color); border-radius: .5rem; padding: .5rem; margin-top: .5rem; background: var(--bs-light-bg-subtle); }
.procurement-item-picker-menu { z-index: 1050; max-height: 280px; overflow: auto; min-width: 360px; }
@media (max-width: 767.98px) {
    .procurement-description-cell-wide { min-width: 280px; }
    .procurement-item-picker-menu { min-width: 100%; }
}
.procurement-description-header { min-width: 260px; }

/* =========================================================
   Facility Pro Procurement UX — Enterprise refinement R2
   ========================================================= */
.fm-page .procurement-lines-card {
    overflow: visible;
}

.procurement-lines-section-title {
    align-items: flex-start;
    gap: 16px;
}
.procurement-lines-section-title small {
    display: block;
    margin-top: 3px;
    font-weight: 400;
}

.procurement-line-editor-list {
    display: grid;
    gap: 12px;
}
.procurement-line-editor {
    border: 1px solid #e2e8f0;
    border-radius: 12px;
    background: #fff;
    box-shadow: 0 1px 3px rgba(16, 24, 40, .025);
    overflow: visible;
}
.procurement-line-editor.is-new-item {
    border-color: #b9d99f;
    box-shadow: inset 3px 0 0 #83c341;
}
.procurement-line-editor-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    padding: 11px 13px;
    background: #f8fafc;
    border-bottom: 1px solid #edf1f5;
    border-radius: 12px 12px 0 0;
}
.procurement-line-number {
    width: 30px;
    height: 30px;
    border-radius: 8px;
    display: grid;
    place-items: center;
    background: #fff;
    border: 1px solid #dfe6ee;
    color: #475467;
    font-weight: 700;
    font-size: .78rem;
    flex: 0 0 auto;
}
.procurement-line-title {
    display: flex;
    align-items: center;
    gap: 7px;
    flex-wrap: wrap;
    color: #182230;
    font-size: .83rem;
    font-weight: 700;
}
.procurement-line-subtitle {
    color: #667085;
    font-size: .7rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 520px;
}
.procurement-line-source {
    display: inline-flex;
    align-items: center;
    border-radius: 999px;
    padding: 2px 7px;
    font-size: .6rem;
    font-weight: 700;
}
.procurement-line-source.existing { background: #eff8ff; color: #175cd3; }
.procurement-line-source.new { background: #ecfdf3; color: #067647; }
.procurement-line-type-select { min-width: 175px; }
.procurement-line-editor-body { padding: 13px; }
.procurement-line-item-field { margin-bottom: 12px; }
.procurement-line-item-field > .form-label { margin-bottom: 5px; font-size: .7rem; color: #667085; font-weight: 650; }
.procurement-line-financial-grid {
    display: grid;
    grid-template-columns: repeat(5, minmax(90px, 1fr)) minmax(120px, 1.1fr);
    gap: 9px;
    align-items: end;
}
.procurement-line-field label {
    display: block;
    color: #667085;
    font-size: .66rem;
    font-weight: 650;
    margin-bottom: 4px;
}
.procurement-line-total {
    min-height: 55px;
    border: 1px solid #dfe7d7;
    border-radius: 9px;
    background: #f8fcf4;
    padding: 7px 10px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    text-align: end;
}
.procurement-line-total span { color: #667085; font-size: .62rem; }
.procurement-line-total strong { color: #24410f; font-size: .93rem; line-height: 1.1; }
.procurement-line-total small { color: #7a8c6d; font-size: .6rem; }

.procurement-new-item-box.enterprise {
    border: 1px solid #cfe3bd;
    border-radius: 10px;
    background: linear-gradient(180deg, #fbfef8, #fff);
    padding: 12px;
    margin: 0 0 12px;
}
.procurement-new-item-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
    padding-bottom: 9px;
    border-bottom: 1px solid #e8f1e0;
}
.procurement-new-item-head .fw-semibold { color: #315617; }
.form-label-sm { margin-bottom: 3px; color: #667085; font-size: .65rem; font-weight: 650; }
.procurement-sticky-sidebar { position: sticky; top: 78px; }

/* Existing procurement tables remain usable, but no longer clip floating pickers. */
.fm-card > .table-responsive,
.procurement-lines-card .table-responsive {
    border-radius: 9px;
}
.procurement-description-cell,
.procurement-description-cell-wide {
    position: relative;
}
.procurement-lines-table td,
.fm-table td {
    overflow: visible;
}

/* Procurement pages: cleaner hierarchy and density. */
.fm-page .fm-card {
    border-color: #e4e9f0;
}
.fm-page .fm-section-title {
    min-height: 34px;
}
.fm-page .form-label {
    color: #475467;
    font-size: .76rem;
    font-weight: 600;
}
.fm-page .form-control,
.fm-page .form-select {
    border-color: #dbe2ea;
}
.fm-page .form-control:focus,
.fm-page .form-select:focus {
    border-color: var(--bs-primary);
    box-shadow: 0 0 0 .18rem color-mix(in srgb, var(--bs-primary) 11%, transparent);
}

@media (max-width: 1199.98px) {
    .procurement-line-financial-grid { grid-template-columns: repeat(3, minmax(100px, 1fr)); }
    .procurement-sticky-sidebar { position: static; }
}
@media (max-width: 767.98px) {
    .procurement-line-editor-head { align-items: flex-start; flex-direction: column; }
    .procurement-line-type-select { min-width: 0; width: 100%; }
    .procurement-line-subtitle { max-width: 75vw; }
    .procurement-line-financial-grid { grid-template-columns: 1fr 1fr; }
    .procurement-line-total { grid-column: 1 / -1; }
    .procurement-new-item-head { flex-direction: column; }
}
@media (max-width: 479.98px) {
    .procurement-line-financial-grid { grid-template-columns: 1fr; }
    .procurement-line-total { grid-column: auto; }
}
/* InputFile renders a child input; keep this critical rule global so CSS isolation cannot block it. */
.procurement-file-input {
    position: absolute !important;
    inset: 0 !important;
    width: 100% !important;
    height: 100% !important;
    opacity: 0 !important;
    cursor: pointer !important;
}

/* =========================================================
   Facility Pro Procurement Workspace — Enterprise UX R3
   Global fallbacks intentionally duplicate critical scoped
   component rules so Procurement never renders unstyled.
   ========================================================= */

/* Critical global fallback: process timeline */
.procurement-process-bar {
    display: grid;
    grid-template-columns: repeat(6, minmax(145px, 1fr));
    gap: 0;
    margin: 0;
    padding: 8px;
    border: 1px solid #dfe6dc;
    border-radius: 14px;
    background: #fff;
    box-shadow: 0 4px 16px rgba(16, 24, 40, .04);
    overflow-x: auto;
    scrollbar-width: thin;
}
.procurement-process-step {
    position: relative;
    display: flex;
    align-items: center;
    gap: 9px;
    min-width: 145px;
    padding: 8px 14px 8px 8px;
}
.procurement-process-step:not(:last-child)::after {
    content: "";
    position: absolute;
    inset-inline-end: -2px;
    top: 50%;
    width: 20px;
    height: 1px;
    background: #dfe5dc;
}
.procurement-process-marker {
    width: 34px;
    height: 34px;
    border-radius: 10px;
    display: grid;
    place-items: center;
    flex: 0 0 auto;
    background: #f2f4f1;
    color: #8b9590;
    border: 1px solid #e6eae4;
    font-size: .82rem;
}
.procurement-process-copy { min-width: 0; }
.procurement-process-copy span {
    display: block;
    color: #98a19d;
    font-size: .58rem;
    font-weight: 700;
    letter-spacing: .08em;
    line-height: 1.1;
}
.procurement-process-copy strong {
    display: block;
    margin-top: 2px;
    color: #616b67;
    font-size: .72rem;
    font-weight: 650;
    white-space: nowrap;
}
.procurement-process-step.completed .procurement-process-marker {
    background: #f0f9df;
    border-color: #d8edb3;
    color: #5e9300;
}
.procurement-process-step.current .procurement-process-marker {
    color: #162000;
    background: var(--brand-lime);
    border-color: var(--brand-lime-dark);
    box-shadow: 0 0 0 4px rgba(132, 199, 8, .12);
}
.procurement-process-step.current .procurement-process-copy span,
.procurement-process-step.current .procurement-process-copy strong { color: #4f7900; }

/* Workspace shell */
.procurement-workspace {
    --proc-border: #dfe6dc;
    --proc-soft-border: #e9eee7;
    --proc-surface: #ffffff;
    --proc-muted-surface: #f7f9f6;
    --proc-ink: #17201e;
    --proc-muted: #697572;
    width: 100%;
    max-width: none;
}
.procurement-workspace .fm-page-header { display: none; }

.procurement-workspace-hero {
    position: relative;
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 24px;
    padding: 22px 24px 20px;
    margin-bottom: 14px;
    border: 1px solid var(--proc-border);
    border-radius: 16px;
    background:
        radial-gradient(circle at 92% -10%, rgba(132, 199, 8, .13), transparent 30%),
        linear-gradient(180deg, #ffffff 0%, #fbfdf9 100%);
    box-shadow: 0 8px 28px rgba(22, 32, 30, .055);
    overflow: hidden;
}
.procurement-workspace-hero::before {
    content: "";
    position: absolute;
    inset-block: 0;
    inset-inline-start: 0;
    width: 4px;
    background: linear-gradient(180deg, var(--brand-lime), #5e9500);
}
.procurement-workspace-eyebrow {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 7px;
    color: #64706c;
    font-size: .68rem;
    font-weight: 700;
    letter-spacing: .085em;
    text-transform: uppercase;
}
.procurement-workspace-eyebrow .dot {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--brand-lime);
    box-shadow: 0 0 0 4px rgba(132, 199, 8, .10);
}
.procurement-workspace-title-row {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
}
.procurement-workspace-title {
    margin: 0;
    color: #111817;
    font-size: clamp(1.35rem, 1.7vw, 1.8rem);
    font-weight: 700;
    letter-spacing: -.025em;
}
.procurement-workspace-subtitle {
    max-width: 760px;
    margin: 6px 0 0;
    color: var(--proc-muted);
    font-size: .82rem;
    line-height: 1.55;
}
.procurement-document-id {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 5px 9px;
    border: 1px solid #dce4d8;
    border-radius: 8px;
    background: #f7faf4;
    color: #44513f;
    font-family: "IBM Plex Sans", sans-serif;
    font-size: .72rem;
    font-weight: 650;
}
.procurement-workspace-status {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 5px 9px;
    border-radius: 999px;
    font-size: .68rem;
    font-weight: 700;
}
.procurement-workspace-status.draft { background: #f2f4f1; color: #59635f; }
.procurement-workspace-status.info { background: #eef7ff; color: #175f8f; }
.procurement-workspace-status.warning { background: #fff8e8; color: #92610a; }
.procurement-workspace-status.success { background: #edf9df; color: #507e00; }
.procurement-workspace-status.danger { background: #fff0ee; color: #b42318; }
.procurement-workspace-status::before {
    content: "";
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: currentColor;
}
.procurement-workspace-actions {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 8px;
    flex-wrap: wrap;
    min-width: 260px;
}
.procurement-workspace-actions .btn {
    min-height: 38px;
    border-radius: 9px;
    padding-inline: 14px;
    font-weight: 600;
    box-shadow: 0 1px 2px rgba(16, 24, 40, .035);
}
.procurement-workspace-actions .btn-primary {
    color: #152000;
    background: var(--brand-lime);
    border-color: var(--brand-lime-dark) !important;
}
.procurement-workspace-actions .btn-primary:hover { background: #78b807; }

.procurement-stage-shell {
    padding: 0 0 14px;
}

/* Enterprise document tabs */
.procurement-workspace-tabs {
    position: sticky;
    top: calc(var(--topbar-height) + 2px);
    z-index: 30;
    display: flex;
    align-items: center;
    gap: 4px;
    margin-bottom: 14px;
    padding: 5px;
    border: 1px solid var(--proc-border);
    border-radius: 12px;
    background: rgba(255,255,255,.96);
    box-shadow: 0 5px 16px rgba(16, 24, 40, .045);
    backdrop-filter: blur(12px);
    overflow-x: auto;
    scrollbar-width: none;
}
.procurement-workspace-tabs::-webkit-scrollbar { display: none; }
.procurement-workspace-tab {
    appearance: none;
    display: inline-flex;
    align-items: center;
    gap: 7px;
    min-height: 38px;
    padding: 7px 13px;
    border: 0;
    border-radius: 8px;
    background: transparent;
    color: #64706c;
    font-size: .75rem;
    font-weight: 600;
    white-space: nowrap;
    transition: background .15s ease, color .15s ease, box-shadow .15s ease;
}
.procurement-workspace-tab:hover { background: #f5f8f2; color: #28322f; }
.procurement-workspace-tab.active {
    color: #273a13;
    background: #edf8dc;
    box-shadow: inset 0 0 0 1px #d7eab8;
}
.procurement-workspace-tab .count {
    display: inline-grid;
    place-items: center;
    min-width: 20px;
    height: 20px;
    padding: 0 5px;
    border-radius: 999px;
    background: rgba(0,0,0,.05);
    font-size: .62rem;
}
.procurement-workspace-tab.active .count { background: rgba(104,160,0,.11); color: #4f7900; }

.procurement-tab-panel { animation: procurementFadeIn .16s ease; }
@keyframes procurementFadeIn { from { opacity:.55; transform:translateY(2px); } to { opacity:1; transform:none; } }

/* Main cards */
.procurement-panel {
    border: 1px solid var(--proc-border);
    border-radius: 14px;
    background: var(--proc-surface);
    box-shadow: 0 4px 14px rgba(16, 24, 40, .035);
    overflow: visible;
}
.procurement-panel + .procurement-panel { margin-top: 12px; }
.procurement-panel-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
    padding: 15px 17px;
    border-bottom: 1px solid var(--proc-soft-border);
}
.procurement-panel-title {
    display: flex;
    align-items: flex-start;
    gap: 10px;
}
.procurement-panel-title-icon {
    width: 34px;
    height: 34px;
    flex: 0 0 auto;
    display: grid;
    place-items: center;
    border: 1px solid #dfe9d6;
    border-radius: 9px;
    background: #f5fbea;
    color: #5e9007;
}
.procurement-panel-title h5 { margin: 0; color: var(--proc-ink); font-size: .9rem; font-weight: 700; }
.procurement-panel-title p { margin: 2px 0 0; color: var(--proc-muted); font-size: .69rem; line-height: 1.45; }
.procurement-panel-body { padding: 17px; }
.procurement-form-grid { display:grid; grid-template-columns:repeat(12,minmax(0,1fr)); gap:13px 14px; }
.procurement-field { min-width:0; }
.procurement-field.col-12 { grid-column:span 12; }
.procurement-field.col-8 { grid-column:span 8; }
.procurement-field.col-6 { grid-column:span 6; }
.procurement-field.col-4 { grid-column:span 4; }
.procurement-field.col-3 { grid-column:span 3; }
.procurement-field.col-2 { grid-column:span 2; }
.procurement-field .form-label {
    display: flex;
    align-items: center;
    gap: 5px;
    margin-bottom: 5px;
    color: #56625e;
    font-size: .7rem;
    font-weight: 650;
}
.procurement-field .form-control,
.procurement-field .form-select {
    min-height: 39px;
    border-color: #d8e0dc;
    border-radius: 8px;
    background-color: #fff;
    font-size: .78rem;
}
.procurement-field textarea.form-control { min-height: auto; }
.procurement-field-help { margin-top:4px; color:#8a9591; font-size:.62rem; }

.procurement-overview-layout {
    display: grid;
    grid-template-columns: minmax(0, 1.75fr) minmax(300px, .65fr);
    gap: 14px;
    align-items: start;
}
.procurement-side-stack {
    display: grid;
    gap: 12px;
    position: sticky;
    top: calc(var(--topbar-height) + 64px);
}
.procurement-summary-card {
    padding: 16px;
    border: 1px solid var(--proc-border);
    border-radius: 14px;
    background: #fff;
    box-shadow: 0 4px 14px rgba(16,24,40,.035);
}
.procurement-summary-card-header {
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:10px;
    margin-bottom: 12px;
}
.procurement-summary-card-header strong { font-size:.78rem; color:#29332f; }
.procurement-summary-card-header i { color:#6b9f08; }
.procurement-kpi-amount {
    display:flex;
    align-items:flex-end;
    justify-content:space-between;
    gap:12px;
    padding: 10px 0;
    border-bottom:1px solid #edf1eb;
}
.procurement-kpi-amount:last-of-type { border-bottom:0; }
.procurement-kpi-amount span { color:#71807a; font-size:.68rem; }
.procurement-kpi-amount strong { color:#17201e; font-size:.9rem; }
.procurement-kpi-amount.total {
    margin-top: 5px;
    padding: 12px;
    border: 1px solid #dbe9cb;
    border-radius: 10px;
    background: #f7fcef;
}
.procurement-kpi-amount.total strong { color:#385807; font-size:1.08rem; }
.procurement-control-list { display:grid; gap:9px; }
.procurement-control-item {
    display:flex;
    align-items:flex-start;
    justify-content:space-between;
    gap:10px;
    padding:9px 0;
    border-bottom:1px solid #edf1eb;
}
.procurement-control-item:last-child { border-bottom:0; padding-bottom:0; }
.procurement-control-copy strong { display:block; color:#34403b; font-size:.71rem; }
.procurement-control-copy span { display:block; color:#8a9591; font-size:.62rem; margin-top:2px; }

/* Line workspace */
.procurement-lines-workspace {
    display:grid;
    grid-template-columns:minmax(0,1fr) 300px;
    gap:14px;
    align-items:start;
}
.procurement-lines-toolbar {
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:12px;
    margin-bottom:12px;
}
.procurement-lines-toolbar-copy strong { display:block; color:#25302c; font-size:.8rem; }
.procurement-lines-toolbar-copy span { display:block; color:#7c8883; font-size:.66rem; margin-top:2px; }
.procurement-lines-stat {
    display:inline-flex;
    align-items:center;
    gap:6px;
    padding:5px 9px;
    border-radius:999px;
    border:1px solid #e0e6dd;
    background:#fff;
    color:#69746f;
    font-size:.66rem;
    font-weight:650;
}
.procurement-line-editor-list { display:grid; gap:10px; }
.procurement-line-editor {
    border:1px solid #dfe6dc;
    border-radius:13px;
    background:#fff;
    box-shadow:0 3px 12px rgba(16,24,40,.032);
    overflow:visible;
    transition:border-color .15s ease, box-shadow .15s ease;
}
.procurement-line-editor:hover { border-color:#cbd5c6; box-shadow:0 6px 18px rgba(16,24,40,.05); }
.procurement-line-editor.is-new-item { border-color:#c9dfab; box-shadow:inset 3px 0 0 var(--brand-lime); }
.procurement-line-editor-head {
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:14px;
    padding:11px 13px;
    background:#f8faf7;
    border-bottom:1px solid #e9eee7;
    border-radius:13px 13px 0 0;
}
.procurement-line-editor-body { padding:13px; }
.procurement-line-financial-grid {
    display:grid;
    grid-template-columns: .7fr 1fr 1fr 1fr 1fr minmax(130px,1.15fr);
    gap:9px;
    align-items:end;
}
.procurement-line-field label { display:block; margin-bottom:4px; color:#6d7974; font-size:.64rem; font-weight:650; }
.procurement-line-field .form-control,
.procurement-line-field .form-select { min-height:37px; border-radius:8px; font-size:.75rem; border-color:#dbe2de; }
.procurement-line-total {
    min-height:52px;
    display:flex;
    flex-direction:column;
    justify-content:center;
    padding:7px 10px;
    border:1px solid #dce9cd;
    border-radius:9px;
    background:#f7fcef;
    text-align:end;
}
.procurement-line-total span { color:#788376; font-size:.61rem; }
.procurement-line-total strong { color:#344f0e; font-size:.95rem; }
.procurement-line-total small { color:#87937e; font-size:.58rem; }
.procurement-line-summary-rail {
    position:sticky;
    top:calc(var(--topbar-height) + 64px);
    display:grid;
    gap:10px;
}
.procurement-line-summary-box {
    padding:14px;
    border:1px solid var(--proc-border);
    border-radius:13px;
    background:#fff;
}
.procurement-line-summary-box h6 { margin:0 0 10px; font-size:.76rem; font-weight:700; color:#2d3833; }
.procurement-line-summary-box .summary-row { display:flex; justify-content:space-between; gap:10px; padding:7px 0; border-bottom:1px solid #edf1eb; font-size:.68rem; }
.procurement-line-summary-box .summary-row:last-child { border-bottom:0; }
.procurement-line-summary-box .summary-row span { color:#7b8681; }
.procurement-line-summary-box .summary-row strong { color:#27302d; }

/* Attachment vault global fallback */
.procurement-document-vault {
    background:#fff;
    border:1px solid #dfe6dc;
    border-radius:15px;
    box-shadow:0 5px 18px rgba(16,24,40,.045);
    padding:18px;
}
.procurement-document-vault-header { display:flex; justify-content:space-between; align-items:flex-start; gap:18px; margin-bottom:16px; }
.procurement-document-vault-icon { width:46px; height:46px; border-radius:12px; display:grid; place-items:center; background:#f0f8df; border:1px solid #dbeabf; color:#5c9000; font-size:1.15rem; flex:0 0 auto; }
.procurement-section-eyebrow { color:#74807b; font-size:.64rem; text-transform:uppercase; letter-spacing:.08em; font-weight:700; margin-bottom:2px; }
.procurement-document-count { display:inline-flex; align-items:center; gap:6px; border:1px solid #e0e6dd; border-radius:999px; padding:6px 10px; background:#f8faf7; color:#596560; font-size:.7rem; font-weight:650; }
.procurement-document-upload-panel { border:1px solid #d8e2d3; border-radius:13px; padding:16px; margin-bottom:18px; background:linear-gradient(180deg,#fbfdf9,#fff); }
.procurement-document-upload-panel-head { display:flex; align-items:flex-start; justify-content:space-between; gap:12px; margin-bottom:15px; }
.procurement-file-dropzone { position:relative; display:flex; min-height:210px; width:100%; padding:20px; flex-direction:column; align-items:center; justify-content:center; text-align:center; border:1.5px dashed #bdc9b8; border-radius:12px; background:#f8faf6; cursor:pointer; color:#69756f; transition:.15s ease; }
.procurement-file-dropzone:hover { border-color:#79b300; background:#f5faec; }
.procurement-file-dropzone.has-file { border-style:solid; border-color:#9fc878; background:#fbfdf7; }
.procurement-file-dropzone-icon { width:50px; height:50px; border-radius:13px; display:grid; place-items:center; background:#fff; border:1px solid #dfe6dc; box-shadow:0 3px 8px rgba(16,24,40,.05); font-size:1.3rem; color:#689d00; margin-bottom:10px; }
.procurement-document-upload-actions { display:flex; justify-content:space-between; align-items:center; gap:15px; margin-top:16px; padding-top:14px; border-top:1px solid #edf1eb; }
.procurement-document-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(310px,1fr)); gap:12px; }
.procurement-document-card { border:1px solid #dfe5dc; border-radius:12px; padding:14px; background:#fff; min-width:0; transition:transform .15s ease, box-shadow .15s ease, border-color .15s ease; }
.procurement-document-card:hover { transform:translateY(-1px); border-color:#c8d2c4; box-shadow:0 8px 22px rgba(16,24,40,.07); }
.procurement-document-card.is-primary { border-color:#a8cf80; box-shadow:inset 3px 0 0 var(--brand-lime); }
.procurement-document-empty { display:flex; min-height:210px; flex-direction:column; align-items:center; justify-content:center; text-align:center; padding:26px; color:#69756f; border:1px dashed #cbd4c7; border-radius:12px; background:#fbfcfa; }
.procurement-document-empty.compact { min-height:auto; flex-direction:row; justify-content:flex-start; text-align:start; gap:12px; padding:15px; }
.procurement-document-empty-icon { width:48px; height:48px; border-radius:50%; display:grid; place-items:center; background:#f0f4ee; color:#68746e; font-size:1.15rem; flex:0 0 auto; margin-bottom:8px; }
.procurement-document-empty.compact .procurement-document-empty-icon { margin-bottom:0; }

/* Picker critical fallback */
.procurement-item-picker { position:relative; width:100%; min-width:0; }
.procurement-item-picker-control { display:grid; grid-template-columns:38px minmax(0,1fr) auto auto; align-items:stretch; min-height:39px; border:1px solid #d7e0da; border-radius:9px; background:#fff; box-shadow:0 1px 2px rgba(16,24,40,.03); overflow:hidden; }
.procurement-item-picker-control.is-open { border-color:#7db300; box-shadow:0 0 0 3px rgba(132,199,8,.12); }
.procurement-item-picker-input { border:0; outline:0; min-width:0; width:100%; padding:7px 10px; background:transparent; color:#18211e; font-size:.79rem; }
.procurement-item-picker-menu { position:fixed; z-index:2090; background:#fff; border:1px solid #d6ded3; border-radius:12px; box-shadow:0 20px 50px rgba(16,24,40,.19),0 4px 12px rgba(16,24,40,.08); overflow:hidden; overscroll-behavior:contain; }
.procurement-picker-menu-head,.procurement-picker-menu-foot { display:flex; align-items:center; justify-content:space-between; gap:12px; padding:11px 13px; background:#f8faf7; }
.procurement-picker-menu-head { border-bottom:1px solid #e7ece4; }
.procurement-picker-menu-foot { border-top:1px solid #e7ece4; font-size:.7rem; color:#69756f; }
.procurement-picker-results { padding:5px; }
.procurement-picker-result { width:100%; display:flex; align-items:center; justify-content:space-between; gap:12px; text-align:start; border:0; border-bottom:1px solid #edf1eb; background:#fff; padding:10px 11px; border-radius:7px; color:inherit; }
.procurement-picker-result:hover,.procurement-picker-result:focus-visible { background:#f5f9ef; outline:none; }

/* Sticky page action bar */
.procurement-bottom-actions {
    position: sticky;
    bottom: 10px;
    z-index: 25;
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:12px;
    margin-top:14px;
    padding:9px 11px;
    border:1px solid #d9e1d6;
    border-radius:12px;
    background:rgba(255,255,255,.95);
    box-shadow:0 12px 34px rgba(16,24,40,.12);
    backdrop-filter:blur(12px);
}
.procurement-bottom-actions-copy { color:#7a8580; font-size:.67rem; }
.procurement-bottom-actions-buttons { display:flex; gap:7px; flex-wrap:wrap; justify-content:flex-end; }

/* Responsive */
@media (max-width: 1199.98px) {
    .procurement-overview-layout,
    .procurement-lines-workspace { grid-template-columns:1fr; }
    .procurement-side-stack,
    .procurement-line-summary-rail { position:static; }
    .procurement-line-financial-grid { grid-template-columns:repeat(3,minmax(110px,1fr)); }
    .procurement-process-bar { grid-template-columns:repeat(6,150px); }
}
@media (max-width: 991.98px) {
    .procurement-workspace-hero { flex-direction:column; }
    .procurement-workspace-actions { min-width:0; width:100%; justify-content:flex-start; }
    .procurement-form-grid { grid-template-columns:repeat(6,minmax(0,1fr)); }
    .procurement-field.col-12,.procurement-field.col-8,.procurement-field.col-6 { grid-column:span 6; }
    .procurement-field.col-4,.procurement-field.col-3,.procurement-field.col-2 { grid-column:span 3; }
}
@media (max-width: 767.98px) {
    .procurement-workspace-hero { padding:17px; border-radius:13px; }
    .procurement-workspace-actions .btn { flex:1 1 auto; }
    .procurement-workspace-tabs { top:calc(var(--topbar-height) + 1px); border-radius:10px; }
    .procurement-form-grid { grid-template-columns:1fr; }
    .procurement-field.col-12,.procurement-field.col-8,.procurement-field.col-6,.procurement-field.col-4,.procurement-field.col-3,.procurement-field.col-2 { grid-column:1; }
    .procurement-line-editor-head { align-items:flex-start; flex-direction:column; }
    .procurement-line-financial-grid { grid-template-columns:1fr 1fr; }
    .procurement-line-total { grid-column:1 / -1; }
    .procurement-document-vault { padding:14px; }
    .procurement-document-vault-header,.procurement-document-upload-actions { flex-direction:column; align-items:stretch; }
    .procurement-document-grid { grid-template-columns:1fr; }
    .procurement-bottom-actions { bottom:5px; align-items:stretch; flex-direction:column; }
    .procurement-bottom-actions-buttons { width:100%; }
    .procurement-bottom-actions-buttons .btn { flex:1 1 auto; }
}
@media (max-width: 479.98px) {
    .procurement-line-financial-grid { grid-template-columns:1fr; }
    .procurement-line-total { grid-column:auto; }
}

.procurement-line-field-span-2 { grid-column: span 2; }

/* Document Vault detail fallbacks */
.procurement-document-card-top { display:flex; gap:11px; align-items:flex-start; }
.procurement-document-file-icon { width:42px; height:42px; border-radius:10px; display:grid; place-items:center; flex:0 0 auto; font-size:1.1rem; background:#f2f4f1; color:#59655f; }
.procurement-document-file-icon.pdf { background:#fff1f0; color:#d92d20; }
.procurement-document-file-icon.sheet { background:#ecfdf3; color:#067647; }
.procurement-document-file-icon.word { background:#eef7ff; color:#175cd3; }
.procurement-document-file-icon.image { background:#f4f3ff; color:#6938ef; }
.procurement-document-type,.procurement-document-revision,.procurement-primary-offer { display:inline-flex; align-items:center; gap:4px; border-radius:999px; font-size:.63rem; font-weight:700; padding:3px 7px; }
.procurement-document-type { background:#f1f4ef; color:#53605a; }
.procurement-document-revision { background:#eef7ff; color:#175cd3; }
.procurement-primary-offer { background:#eef9de; color:#537f00; }
.procurement-document-name { white-space:nowrap; overflow:hidden; text-overflow:ellipsis; color:#17201e; margin:0; font-size:.82rem; }
.procurement-document-original { font-size:.67rem; color:#929d98; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.procurement-document-description { color:#68756f; font-size:.74rem; margin:11px 0 0; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }
.procurement-document-meta-grid { display:grid; grid-template-columns:1fr 1fr; gap:8px 12px; margin-top:12px; padding:10px; background:#f8faf7; border-radius:9px; }
.procurement-document-meta-grid div { min-width:0; }
.procurement-document-meta-grid span { display:block; color:#929d98; font-size:.6rem; margin-bottom:1px; }
.procurement-document-meta-grid strong { display:block; color:#52605a; font-size:.68rem; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.procurement-document-card-footer { display:flex; justify-content:space-between; align-items:center; gap:10px; margin-top:12px; }
.procurement-document-card-footer small { font-size:.64rem; }
.procurement-file-input { position:absolute !important; inset:0 !important; width:100% !important; height:100% !important; opacity:0 !important; cursor:pointer !important; }

/* Picker detail fallbacks */
.procurement-item-picker-icon { display:grid; place-items:center; color:#68756f; background:#f8faf7; border-inline-end:1px solid #e7ece4; }
.procurement-item-picker-clear,.procurement-item-picker-new { border:0; border-inline-start:1px solid #e7ece4; background:#fff; color:#52605a; padding:0 11px; display:inline-flex; align-items:center; gap:5px; font-size:.72rem; font-weight:600; }
.procurement-item-picker-clear:hover { background:#fff3f2; color:#b42318; }
.procurement-item-picker-new { color:#5f9200; }
.procurement-item-picker-new:hover { background:#f4faea; }
.procurement-picker-menu-kicker { display:block; font-size:.64rem; text-transform:uppercase; letter-spacing:.06em; color:#639700; font-weight:700; }
.procurement-picker-menu-title { color:#18211e; font-size:.8rem; font-weight:700; }
.procurement-picker-result-main { min-width:0; }
.procurement-picker-result-name { margin-top:3px; font-size:.83rem; font-weight:650; color:#18211e; }
.procurement-picker-result-meta { margin-top:3px; color:#6c7872; font-size:.69rem; white-space:normal; }
.procurement-picker-type-badge { padding:2px 7px; border-radius:999px; background:#f1f4ef; color:#52605a; font-size:.62rem; font-weight:700; }
.procurement-picker-select-icon { color:#96a09b; }
.procurement-picker-state,.procurement-picker-empty { display:flex; align-items:center; justify-content:center; gap:9px; padding:24px 16px; color:#69756f; font-size:.78rem; }
.procurement-picker-empty { flex-direction:column; text-align:center; }
.procurement-picker-empty strong { color:#34403b; }
.procurement-picker-empty-icon { width:38px; height:38px; border-radius:50%; display:grid; place-items:center; background:#f1f4ef; color:#69756f; font-size:1rem; }

/* =========================================================
   Facility Pro Procurement Workspace — UX R3.1
   Typography, rhythm and Bootstrap-grid conflict correction
   ========================================================= */

/* Procurement follows the approved Facility Pro type system:
   IBM Plex Sans for English/Latin, IBM Plex Sans Arabic for RTL Arabic. */
.procurement-workspace,
.procurement-workspace button,
.procurement-workspace input,
.procurement-workspace select,
.procurement-workspace textarea,
.procurement-workspace .form-control,
.procurement-workspace .form-select,
.procurement-workspace .btn {
    font-family: "IBM Plex Sans", "IBM Plex Sans Arabic", "Segoe UI", Arial, sans-serif;
}

html[dir="rtl"] .procurement-workspace,
html[dir="rtl"] .procurement-workspace button,
html[dir="rtl"] .procurement-workspace input,
html[dir="rtl"] .procurement-workspace select,
html[dir="rtl"] .procurement-workspace textarea,
html[dir="rtl"] .procurement-workspace .form-control,
html[dir="rtl"] .procurement-workspace .form-select,
html[dir="rtl"] .procurement-workspace .btn {
    font-family: "IBM Plex Sans Arabic", "IBM Plex Sans", "Segoe UI", Tahoma, Arial, sans-serif;
}

.procurement-workspace {
    --proc-font-xs: .6875rem;   /* 11px */
    --proc-font-sm: .75rem;     /* 12px */
    --proc-font-md: .8125rem;   /* 13px */
    --proc-font-base: .875rem;  /* 14px */
    --proc-font-lg: 1rem;       /* 16px */
    --proc-control-height: 42px;
    --proc-section-gap: 16px;
    padding-bottom: 84px;
    font-size: var(--proc-font-base);
    line-height: 1.5;
}

/* IMPORTANT: Bootstrap .col-* sets percentage widths. Inside our CSS Grid those
   percentages shrink the fields a second time. Reset the Bootstrap sizing while
   keeping the class names only as semantic grid-span hooks. */
.procurement-form-grid > .procurement-field {
    width: auto !important;
    max-width: none !important;
    flex: none !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
    margin: 0 !important;
}

.procurement-form-grid > .procurement-field > .form-control,
.procurement-form-grid > .procurement-field > .form-select,
.procurement-form-grid > .procurement-field > .input-group,
.procurement-form-grid > .procurement-field > .procurement-item-picker {
    width: 100%;
    min-width: 0;
}

/* Hero */
.procurement-workspace-hero {
    gap: 28px;
    padding: 20px 22px;
    margin-bottom: var(--proc-section-gap);
}

.procurement-workspace-eyebrow {
    margin-bottom: 8px;
    font-size: .72rem;
    letter-spacing: .075em;
}

.procurement-workspace-title-row {
    gap: 9px;
}

.procurement-workspace-title {
    font-size: clamp(1.55rem, 1.7vw, 1.9rem);
    line-height: 1.18;
    font-weight: 700;
}

.procurement-workspace-subtitle {
    max-width: 820px;
    margin-top: 7px;
    font-size: .875rem;
    line-height: 1.55;
}

.procurement-document-id,
.procurement-workspace-status {
    min-height: 28px;
    padding: 5px 10px;
    font-size: .75rem;
}

.procurement-workspace-actions {
    gap: 9px;
}

.procurement-workspace-actions .btn {
    min-height: 40px;
    padding: 8px 15px;
    font-size: .84rem;
}

/* Process timeline */
.procurement-stage-shell {
    padding-bottom: var(--proc-section-gap);
}

.procurement-process-bar {
    padding: 9px 10px;
    border-radius: 13px;
}

.procurement-process-step {
    gap: 10px;
    min-width: 150px;
    padding: 9px 14px 9px 9px;
}

.procurement-process-marker {
    width: 36px;
    height: 36px;
    border-radius: 10px;
    font-size: .86rem;
}

.procurement-process-copy span {
    font-size: .625rem;
    letter-spacing: .07em;
}

.procurement-process-copy strong {
    margin-top: 3px;
    font-size: .78rem;
    font-weight: 600;
}

/* Tabs */
.procurement-workspace-tabs {
    gap: 5px;
    margin-bottom: var(--proc-section-gap);
    padding: 6px;
}

.procurement-workspace-tab {
    min-height: 40px;
    gap: 7px;
    padding: 8px 14px;
    font-size: .8rem;
}

.procurement-workspace-tab .count {
    min-width: 21px;
    height: 21px;
    font-size: .67rem;
}

/* Main content */
.procurement-overview-layout {
    grid-template-columns: minmax(0, 1.7fr) minmax(330px, .68fr);
    gap: 16px;
}

.procurement-panel,
.procurement-summary-card,
.procurement-document-vault {
    border-radius: 14px;
}

.procurement-panel + .procurement-panel {
    margin-top: var(--proc-section-gap);
}

.procurement-panel-header {
    gap: 15px;
    padding: 16px 18px;
}

.procurement-panel-title {
    gap: 11px;
}

.procurement-panel-title-icon {
    width: 36px;
    height: 36px;
}

.procurement-panel-title h5 {
    font-size: .98rem;
    line-height: 1.3;
}

.procurement-panel-title p {
    margin-top: 3px;
    font-size: .75rem;
    line-height: 1.5;
}

.procurement-panel-body {
    padding: 20px 18px 21px;
}

.procurement-form-grid {
    gap: 16px 18px;
}

.procurement-field .form-label {
    gap: 6px;
    margin-bottom: 7px;
    color: #4c5954;
    font-size: .78rem;
    font-weight: 600;
    line-height: 1.3;
}

.procurement-field .form-control,
.procurement-field .form-select {
    width: 100%;
    min-height: var(--proc-control-height);
    padding: 8px 11px;
    border-radius: 9px;
    font-size: .84rem;
    line-height: 1.35;
}

.procurement-field textarea.form-control {
    padding-block: 10px;
    line-height: 1.5;
}

.procurement-field-help {
    margin-top: 6px;
    font-size: .72rem;
    line-height: 1.45;
}

/* Side rail */
.procurement-side-stack {
    gap: 14px;
}

.procurement-summary-card {
    padding: 18px;
}

.procurement-summary-card-header {
    margin-bottom: 12px;
}

.procurement-summary-card-header strong {
    font-size: .84rem;
    font-weight: 650;
}

.procurement-kpi-amount {
    padding: 10px 0;
}

.procurement-kpi-amount span {
    font-size: .75rem;
}

.procurement-kpi-amount strong {
    font-size: .95rem;
}

.procurement-kpi-amount.total {
    margin-top: 5px;
    padding: 12px 13px;
}

.procurement-kpi-amount.total strong {
    font-size: 1.12rem;
}

.procurement-control-list {
    gap: 11px;
}

.procurement-control-item {
    padding-bottom: 11px;
}

.procurement-control-copy strong {
    font-size: .78rem;
}

.procurement-control-copy span {
    margin-top: 3px;
    font-size: .7rem;
    line-height: 1.4;
}

/* Line workspace */
.procurement-lines-toolbar {
    padding: 15px 16px;
}

.procurement-lines-toolbar-copy strong {
    font-size: .88rem;
}

.procurement-lines-toolbar-copy span {
    margin-top: 3px;
    font-size: .74rem;
}

.procurement-lines-stat {
    font-size: .72rem;
}

.procurement-line-editor-list {
    gap: 12px;
}

.procurement-line-editor-head {
    padding: 12px 14px;
}

.procurement-line-editor-body {
    padding: 15px 14px 16px;
}

.procurement-line-financial-grid {
    gap: 11px;
}

.procurement-line-field label {
    margin-bottom: 6px;
    font-size: .74rem;
    font-weight: 600;
}

.procurement-line-field .form-control,
.procurement-line-field .form-select {
    min-height: 40px;
    padding: 7px 10px;
    font-size: .82rem;
}

.procurement-line-total {
    min-height: 58px;
    padding: 8px 11px;
}

.procurement-line-total span {
    font-size: .7rem;
}

.procurement-line-total strong {
    font-size: 1rem;
}

.procurement-line-total small {
    font-size: .66rem;
}

.procurement-line-summary-box {
    padding: 16px;
}

.procurement-line-summary-box h6 {
    margin-bottom: 11px;
    font-size: .82rem;
}

.procurement-line-summary-box .summary-row {
    padding: 8px 0;
    font-size: .75rem;
}

/* Item picker */
.procurement-item-picker-control {
    min-height: 42px;
    grid-template-columns: 40px minmax(0,1fr) auto auto;
}

.procurement-item-picker-input {
    padding: 8px 11px;
    font-size: .84rem;
}

.procurement-item-picker-clear,
.procurement-item-picker-new {
    padding-inline: 12px;
    font-size: .76rem;
}

.procurement-picker-menu-kicker {
    font-size: .67rem;
}

.procurement-picker-menu-title {
    font-size: .84rem;
}

.procurement-picker-result {
    padding: 11px 12px;
}

.procurement-picker-result-name {
    font-size: .86rem;
}

.procurement-picker-result-meta {
    font-size: .74rem;
}

/* Documents */
.procurement-document-vault {
    padding: 20px;
}

.procurement-document-vault-header {
    margin-bottom: 18px;
}

.procurement-section-eyebrow {
    font-size: .68rem;
}

.procurement-document-count {
    padding: 6px 11px;
    font-size: .74rem;
}

.procurement-document-upload-panel {
    padding: 18px;
}

.procurement-file-dropzone {
    min-height: 190px;
}

.procurement-document-name {
    font-size: .86rem;
}

.procurement-document-original,
.procurement-document-description {
    font-size: .72rem;
}

.procurement-document-meta-grid span {
    font-size: .66rem;
}

.procurement-document-meta-grid strong {
    font-size: .73rem;
}

/* Sticky actions: keep them readable and keep page content clear of the bar. */
.procurement-bottom-actions {
    bottom: 10px;
    min-height: 56px;
    margin-top: 18px;
    padding: 10px 12px;
}

.procurement-bottom-actions-copy {
    max-width: 62%;
    font-size: .73rem;
    line-height: 1.4;
}

.procurement-bottom-actions-buttons {
    gap: 8px;
}

.procurement-bottom-actions-buttons .btn {
    min-height: 38px;
    padding: 7px 13px;
    font-size: .8rem;
}

/* Desktop density correction */
@media (min-width: 1200px) {
    .procurement-form-grid > .procurement-field.col-6 { grid-column: span 6; }
    .procurement-form-grid > .procurement-field.col-4 { grid-column: span 4; }
    .procurement-form-grid > .procurement-field.col-3 { grid-column: span 3; }
    .procurement-form-grid > .procurement-field.col-2 { grid-column: span 2; }
}

@media (max-width: 1199.98px) {
    .procurement-overview-layout {
        grid-template-columns: 1fr;
    }

    .procurement-workspace {
        padding-bottom: 70px;
    }
}

@media (max-width: 767.98px) {
    .procurement-workspace {
        --proc-control-height: 44px;
        padding-bottom: 118px;
    }

    .procurement-workspace-title {
        font-size: 1.45rem;
    }

    .procurement-workspace-subtitle {
        font-size: .82rem;
    }

    .procurement-panel-body,
    .procurement-summary-card,
    .procurement-document-vault {
        padding: 16px;
    }

    .procurement-bottom-actions-copy {
        display: none;
    }
}

/* Phase 5D-B: fulfillment line KPI grid */
.procurement-line-values-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(110px, 1fr));
    gap: 10px;
    margin-bottom: 12px;
}
.procurement-line-values-grid > div {
    min-width: 0;
    padding: 10px 12px;
    border: 1px solid #e4e9e5;
    border-radius: 9px;
    background: #f8faf8;
}
.procurement-line-values-grid label {
    display: block;
    margin-bottom: 4px;
    color: #6d7974;
    font-size: .72rem;
    font-weight: 600;
}
.procurement-line-values-grid strong {
    display: block;
    color: #26332d;
    font-size: .88rem;
    font-weight: 700;
}
@media (max-width: 992px) {
    .procurement-line-values-grid { grid-template-columns: repeat(2, minmax(110px, 1fr)); }
}
@media (max-width: 576px) {
    .procurement-line-values-grid { grid-template-columns: 1fr; }
}

/* ========================================================================== */
/* Facility Pro - Crowd Management Enterprise UX Foundation (CM-0)           */
/* ========================================================================== */
.crowd-page {
    --crowd-surface: #ffffff;
    --crowd-canvas: #f5f7f7;
    --crowd-border: #e2e8e5;
    --crowd-border-strong: #d4ddd8;
    --crowd-ink: #17231e;
    --crowd-muted: #66736d;
    --crowd-soft: #eef3f0;
    --crowd-primary: var(--bs-primary, #0d6efd);
    --crowd-success: #16825d;
    --crowd-warning: #b7791f;
    --crowd-danger: #c43d4b;
    --crowd-attention: #6f5dcc;
    color: var(--crowd-ink);
    font-family: "IBM Plex Sans", "IBM Plex Sans Arabic", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    padding: 22px 22px 88px;
    min-height: calc(100vh - 74px);
    background:
        radial-gradient(circle at 100% 0, color-mix(in srgb, var(--crowd-primary) 6%, transparent) 0, transparent 360px),
        var(--crowd-canvas);
}
[dir="rtl"] .crowd-page,
html[dir="rtl"] .crowd-page { font-family: "IBM Plex Sans Arabic", "IBM Plex Sans", sans-serif; }

.crowd-hero,
.crowd-master-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 28px;
    margin-bottom: 20px;
}
.crowd-hero-copy,
.crowd-master-header > div:first-child { max-width: 860px; }
.crowd-hero h1,
.crowd-master-header h1 {
    margin: 5px 0 7px;
    font-size: clamp(1.65rem, 2.1vw, 2.05rem);
    line-height: 1.16;
    letter-spacing: -.025em;
    font-weight: 700;
    color: var(--crowd-ink);
}
.crowd-hero p,
.crowd-master-header p {
    margin: 0;
    color: var(--crowd-muted);
    max-width: 820px;
    font-size: .88rem;
    line-height: 1.72;
}
.crowd-eyebrow,
.crowd-panel-kicker {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    color: var(--crowd-primary);
    font-size: .69rem;
    font-weight: 700;
    letter-spacing: .09em;
    text-transform: uppercase;
}
.crowd-live-dot {
    width: 8px; height: 8px; border-radius: 50%;
    background: #13a271;
    box-shadow: 0 0 0 5px rgba(19,162,113,.10);
}
.crowd-hero-actions,
.crowd-header-actions { display:flex; align-items:center; gap:9px; flex-wrap:wrap; }
.crowd-hero-actions .btn,
.crowd-header-actions .btn,
.crowd-sticky-actions .btn { min-height: 40px; display:inline-flex; align-items:center; gap:7px; font-size:.8rem; font-weight:600; }
[dir="rtl"] .crowd-hero-actions .bi-arrow-left,
[dir="rtl"] .crowd-header-actions .bi-arrow-left { transform: rotate(180deg); }

.crowd-loading {
    min-height: 180px;
    border: 1px dashed var(--crowd-border-strong);
    border-radius: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    color: var(--crowd-muted);
    background: rgba(255,255,255,.72);
    font-size: .85rem;
}

/* Command center */
.crowd-kpi-grid { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:13px; margin-bottom:14px; }
.crowd-kpi-card {
    position:relative; overflow:hidden;
    display:grid; grid-template-columns:auto 1fr auto; align-items:center; gap:13px;
    min-height: 112px; padding:17px;
    background:var(--crowd-surface); border:1px solid var(--crowd-border); border-radius:16px;
    box-shadow:0 8px 28px rgba(23,35,30,.045);
}
.crowd-kpi-card::after { content:""; position:absolute; inset:auto -30px -42px auto; width:110px; height:110px; border-radius:50%; background:currentColor; opacity:.035; }
.crowd-kpi-card > div:nth-child(2) { min-width:0; }
.crowd-kpi-card span { display:block; color:var(--crowd-muted); font-size:.72rem; font-weight:600; }
.crowd-kpi-card strong { display:block; margin-top:3px; font-size:1.42rem; line-height:1.15; font-weight:700; color:var(--crowd-ink); }
.crowd-kpi-card small { display:block; margin-top:5px; color:var(--crowd-muted); font-size:.67rem; line-height:1.35; }
.crowd-kpi-icon { width:42px; height:42px; border-radius:12px; display:grid; place-items:center; font-size:1.05rem; background:currentColor; }
.crowd-kpi-icon i { color:#fff; }
.crowd-kpi-metric { align-self:start; padding:5px 8px; border-radius:999px; font-size:.69rem !important; font-weight:700; background:currentColor; color:#fff !important; }
.crowd-kpi-primary { color:var(--crowd-primary); } .crowd-kpi-success { color:var(--crowd-success); } .crowd-kpi-warning { color:var(--crowd-warning); } .crowd-kpi-danger { color:var(--crowd-danger); }
.crowd-command-grid { display:grid; grid-template-columns:minmax(0,1.75fr) minmax(300px,.65fr); gap:14px; margin-bottom:14px; }
.crowd-secondary-grid { display:grid; grid-template-columns:minmax(0,1.2fr) minmax(0,.8fr); gap:14px; margin-bottom:14px; }
.crowd-panel,
.crowd-form-panel,
.crowd-toolbar-card {
    background:var(--crowd-surface); border:1px solid var(--crowd-border); border-radius:16px;
    box-shadow:0 7px 24px rgba(23,35,30,.04);
}
.crowd-panel { padding:17px; }
.crowd-panel-header,
.crowd-form-panel > header { display:flex; justify-content:space-between; align-items:flex-start; gap:15px; padding-bottom:14px; border-bottom:1px solid #edf1ef; }
.crowd-panel-header h2,
.crowd-form-panel > header h2 { margin:2px 0 0; font-size:.96rem; font-weight:700; color:var(--crowd-ink); }
.crowd-count-badge { min-width:28px; height:28px; padding:0 7px; border-radius:999px; display:grid; place-items:center; background:#f0f4f2; color:var(--crowd-ink); font-size:.72rem; font-weight:700; }
.crowd-status-pill,
.crowd-mini-pill { display:inline-flex; align-items:center; justify-content:center; white-space:nowrap; border-radius:999px; font-weight:700; border:1px solid currentColor; }
.crowd-status-pill { padding:5px 9px; font-size:.68rem; }
.crowd-mini-pill { padding:3px 7px; font-size:.63rem; }
.risk-normal { color:#167858 !important; background:#eaf7f2 !important; border-color:#c9eadf !important; }
.risk-attention { color:#6452b5 !important; background:#f0edfb !important; border-color:#ddd6f7 !important; }
.risk-warning { color:#9a651b !important; background:#fff6df !important; border-color:#f1dfad !important; }
.risk-critical,.risk-emergency { color:#b3303f !important; background:#fff0f2 !important; border-color:#f2cdd2 !important; }
.risk-muted { color:#69756f !important; background:#f1f3f2 !important; border-color:#dde3df !important; }
.crowd-event-strip { display:grid; grid-template-columns:1fr minmax(250px,.55fr); gap:20px; padding:15px 0 12px; align-items:end; }
.crowd-event-strip span,.crowd-event-strip small { display:block; color:var(--crowd-muted); font-size:.68rem; }
.crowd-event-strip strong { display:block; margin:2px 0 3px; color:var(--crowd-ink); font-size:.94rem; }
.crowd-event-progress > div:first-child { display:flex; justify-content:space-between; align-items:center; gap:10px; margin-bottom:6px; }
.crowd-event-progress strong { font-size:.75rem; }
.crowd-progress-native { appearance:none; -webkit-appearance:none; width:100%; height:6px; display:block; border:0; border-radius:999px; overflow:hidden; background:#edf2ef; }
.crowd-progress-native::-webkit-progress-bar { background:#edf2ef; border-radius:999px; }
.crowd-progress-native::-webkit-progress-value { background:linear-gradient(90deg,var(--crowd-primary),#32a67c); border-radius:999px; }
.crowd-progress-native::-moz-progress-bar { background:linear-gradient(90deg,var(--crowd-primary),#32a67c); border-radius:999px; }
.crowd-digital-map-shell { position:relative; min-height:310px; overflow:hidden; border-radius:13px; border:1px solid #dce6e1; background:#eef4f1; }
.crowd-map-gridlines { position:absolute; inset:0; opacity:.46; background-image:linear-gradient(rgba(60,94,78,.08) 1px,transparent 1px),linear-gradient(90deg,rgba(60,94,78,.08) 1px,transparent 1px); background-size:26px 26px; }
.crowd-map-site-label { position:absolute; z-index:2; top:13px; left:13px; display:flex; align-items:center; gap:6px; border:1px solid #d7e2dc; background:rgba(255,255,255,.93); box-shadow:0 4px 14px rgba(23,35,30,.07); border-radius:9px; padding:6px 9px; color:#53615a; font-size:.66rem; font-weight:600; }
[dir="rtl"] .crowd-map-site-label { left:auto; right:13px; }
.crowd-map-zone-cloud { position:relative; z-index:1; min-height:310px; padding:58px 24px 24px; display:grid; grid-template-columns:repeat(3,minmax(110px,1fr)); align-items:center; gap:12px; }
.crowd-map-zone { min-height:92px; display:flex; flex-direction:column; justify-content:center; position:relative; padding:12px; border-radius:14px; border:1px solid currentColor; box-shadow:0 7px 18px rgba(23,35,30,.055); }
.crowd-map-zone > span { font-size:.58rem; font-weight:700; letter-spacing:.06em; opacity:.75; }.crowd-map-zone strong{margin:2px 0;font-size:.76rem;color:var(--crowd-ink)}.crowd-map-zone small{font-size:.63rem;opacity:.75}.crowd-map-zone b{position:absolute;top:8px;right:9px;font-size:.64rem}[dir="rtl"] .crowd-map-zone b{right:auto;left:9px}
.crowd-map-empty { min-height:350px; display:flex; flex-direction:column; align-items:center; justify-content:center; text-align:center; color:var(--crowd-muted); padding:30px; }.crowd-map-empty-icon,.crowd-empty-icon{width:56px;height:56px;border-radius:16px;display:grid;place-items:center;background:#edf3f0;color:var(--crowd-primary);font-size:1.25rem;margin-bottom:11px}.crowd-map-empty strong{color:var(--crowd-ink);font-size:.9rem}.crowd-map-empty p{font-size:.72rem;max-width:380px;margin:5px 0 0;line-height:1.6}
.crowd-alert-list { padding-top:4px; }.crowd-alert-row { display:grid; grid-template-columns:auto 1fr auto; gap:9px; align-items:center; padding:11px 2px; border-bottom:1px solid #eff2f0; }.crowd-alert-row:last-child{border-bottom:0}.crowd-alert-severity,.crowd-zone-dot,.crowd-gate-state{display:block;width:8px;height:8px;border-radius:50%;padding:0!important;box-shadow:0 0 0 4px currentColor}.crowd-alert-row strong{display:block;font-size:.71rem;color:var(--crowd-ink);font-weight:600}.crowd-alert-row small{display:block;margin-top:3px;font-size:.61rem;color:var(--crowd-muted)}
.crowd-compact-empty { min-height:125px; display:flex; align-items:center; justify-content:center; gap:8px; color:var(--crowd-muted); font-size:.72rem; }
.crowd-zone-table { padding-top:3px; }.crowd-zone-row { display:grid; grid-template-columns:minmax(180px,1.4fr) repeat(3,minmax(80px,.55fr)) auto; align-items:center; gap:12px; padding:11px 2px; border-bottom:1px solid #eff2f0; }.crowd-zone-row:last-child{border-bottom:0}.crowd-zone-name{display:flex;align-items:center;gap:10px;min-width:0}.crowd-zone-row span{display:block;font-size:.59rem;color:var(--crowd-muted)}.crowd-zone-row strong{font-size:.72rem;color:var(--crowd-ink)}.crowd-zone-name strong{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.crowd-gate-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:9px; padding-top:12px; }.crowd-gate-card{padding:12px;border:1px solid #e5eae7;border-radius:12px;background:#fafcfb}.crowd-gate-card>div:first-child{display:grid;grid-template-columns:auto 1fr;column-gap:9px;align-items:center}.crowd-gate-card>div:first-child small{grid-column:2}.crowd-gate-card strong{font-size:.72rem}.crowd-gate-card small{display:block;color:var(--crowd-muted);font-size:.59rem}.crowd-gate-value{display:flex;align-items:baseline;gap:3px;margin:10px 0 6px}.crowd-gate-value strong{font-size:1.13rem}.crowd-gate-value span{font-size:.59rem;color:var(--crowd-muted)}
.crowd-foundation-strip { display:flex; justify-content:space-between; align-items:center; gap:15px; padding:12px 15px; border:1px dashed #d2ded8; border-radius:13px; background:rgba(255,255,255,.62); }.crowd-foundation-strip>div:first-child{display:grid;grid-template-columns:auto 1fr;column-gap:9px;align-items:center}.crowd-foundation-strip i{grid-row:1/3;font-size:1.2rem;color:var(--crowd-primary)}.crowd-foundation-strip span{font-size:.63rem;color:var(--crowd-muted)}.crowd-foundation-strip strong{font-size:.7rem}.crowd-foundation-tags{display:flex;flex-wrap:wrap;justify-content:flex-end;gap:5px}.crowd-foundation-tags span,.crowd-tag-stack span{padding:4px 7px;border:1px solid #dce5e0;border-radius:999px;background:#fff;font-size:.58rem;font-weight:600;color:#56635d}

/* Master data lists */
.crowd-toolbar-card { padding:11px; margin-bottom:14px; display:flex; align-items:center; gap:9px; }
.crowd-search-field { position:relative; flex:1 1 360px; min-width:220px; }.crowd-search-field i{position:absolute;left:12px;top:50%;transform:translateY(-50%);color:#86918b;font-size:.77rem}[dir="rtl"] .crowd-search-field i{left:auto;right:12px}.crowd-search-field input{width:100%;height:40px;border:1px solid #dfe5e2;border-radius:10px;padding:0 12px 0 34px;background:#fbfcfc;color:var(--crowd-ink);font-size:.76rem;outline:none}[dir="rtl"] .crowd-search-field input{padding:0 34px 0 12px}.crowd-search-field input:focus{border-color:color-mix(in srgb,var(--crowd-primary) 42%,#dfe5e2);box-shadow:0 0 0 3px color-mix(in srgb,var(--crowd-primary) 8%,transparent)}
.crowd-check-control { display:inline-flex;align-items:center;gap:7px;white-space:nowrap;padding:0 7px;color:var(--crowd-muted);font-size:.7rem;font-weight:600 }.crowd-check-control input{accent-color:var(--crowd-primary)}
.crowd-zone-toolbar { display:grid; grid-template-columns:minmax(260px,1.5fr) repeat(3,minmax(145px,.6fr)); }.crowd-zone-toolbar .form-select{height:40px;font-size:.73rem;border-color:#dfe5e2;border-radius:10px;background-color:#fbfcfc}
.crowd-site-grid { display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:13px }.crowd-site-card{background:#fff;border:1px solid var(--crowd-border);border-radius:16px;padding:16px;box-shadow:0 7px 23px rgba(23,35,30,.04);transition:transform .18s ease,box-shadow .18s ease,border-color .18s ease}.crowd-site-card:hover{transform:translateY(-2px);box-shadow:0 11px 29px rgba(23,35,30,.07);border-color:#d3ddd8}.crowd-site-card.is-inactive,.crowd-zone-master-card.is-inactive{opacity:.68}.crowd-site-card>header{display:flex;justify-content:space-between;gap:10px;align-items:flex-start}.crowd-site-identity{display:flex;gap:10px;min-width:0}.crowd-site-avatar{width:39px;height:39px;border-radius:11px;display:grid;place-items:center;background:#eef4f1;color:var(--crowd-primary);flex:0 0 auto}.crowd-code{display:inline-flex;color:var(--crowd-primary)!important;background:#edf4f1;padding:3px 6px;border-radius:6px;font-size:.58rem!important;letter-spacing:.04em;font-weight:700}.crowd-site-identity h2,.crowd-zone-master-main h2{margin:5px 0 1px;font-size:.82rem;font-weight:700}.crowd-site-identity small,.crowd-zone-master-main small{display:block;color:var(--crowd-muted);font-size:.61rem}.crowd-site-capacity{padding:15px 0 12px}.crowd-site-capacity>div:first-child{display:flex;justify-content:space-between;align-items:end;margin-bottom:7px}.crowd-site-capacity span{color:var(--crowd-muted);font-size:.62rem}.crowd-site-capacity strong{font-size:1.05rem}.crowd-site-capacity small{display:block;margin-top:6px;color:var(--crowd-muted);font-size:.58rem}.crowd-site-metrics{display:grid;grid-template-columns:1fr 1fr;border-top:1px solid #edf1ef;border-bottom:1px solid #edf1ef}.crowd-site-metrics>div{display:grid;grid-template-columns:auto 1fr auto;gap:7px;align-items:center;padding:10px 6px}.crowd-site-metrics>div+div{border-inline-start:1px solid #edf1ef}.crowd-site-metrics i{color:var(--crowd-primary)}.crowd-site-metrics span{font-size:.61rem;color:var(--crowd-muted)}.crowd-site-metrics strong{font-size:.75rem}.crowd-site-card footer{display:flex;justify-content:flex-end;gap:7px;padding-top:12px}.crowd-site-card footer .btn{font-size:.67rem;min-height:34px;display:inline-flex;align-items:center;gap:5px}
.crowd-empty-state { padding:50px 20px;display:flex;flex-direction:column;align-items:center;text-align:center;border:1px dashed var(--crowd-border-strong);border-radius:16px;background:rgba(255,255,255,.68)}.crowd-empty-state h2{font-size:.98rem;margin:0 0 5px}.crowd-empty-state p{max-width:500px;color:var(--crowd-muted);font-size:.72rem;line-height:1.6;margin:0 0 14px}.crowd-pagination{display:flex;justify-content:space-between;align-items:center;gap:12px;margin-top:13px;color:var(--crowd-muted);font-size:.66rem}.crowd-pagination>div{display:flex;align-items:center;gap:8px}.crowd-pagination .btn{width:34px;height:32px;padding:0;display:grid;place-items:center}
.crowd-zone-card-list{display:flex;flex-direction:column;gap:8px}.crowd-zone-master-card{display:grid;grid-template-columns:minmax(260px,1.5fr) minmax(140px,.55fr) minmax(210px,.7fr) auto auto;align-items:center;gap:16px;padding:13px 15px;background:#fff;border:1px solid var(--crowd-border);border-radius:14px;box-shadow:0 5px 18px rgba(23,35,30,.035)}.crowd-zone-master-main{display:flex;align-items:center;gap:11px;min-width:0}.crowd-zone-type-icon{width:39px;height:39px;border-radius:11px;display:grid;place-items:center;flex:0 0 auto;background:#eef4f1;color:var(--crowd-primary)}.crowd-zone-meta{display:flex;align-items:center;gap:7px}.crowd-zone-meta>span:not(.crowd-code){font-size:.58rem;color:var(--crowd-muted)}.crowd-zone-capacity-metric span{display:block;font-size:.59rem;color:var(--crowd-muted)}.crowd-zone-capacity-metric strong{font-size:.92rem}.crowd-threshold-pair{display:grid;grid-template-columns:1fr 1fr;gap:6px}.crowd-threshold-pair>div{display:grid;grid-template-columns:auto 1fr;column-gap:6px;align-items:center;padding:6px 8px;border:1px solid #e7ebe9;border-radius:9px;background:#fafcfb}.crowd-threshold-pair small{font-size:.54rem;color:var(--crowd-muted)}.crowd-threshold-pair strong{grid-column:2;font-size:.68rem}.crowd-threshold-dot{width:7px;height:7px;border-radius:50%;grid-row:1/3}.crowd-threshold-dot.warning{background:#d6962f}.crowd-threshold-dot.critical{background:#cc4655}.crowd-icon-button{width:34px;height:34px;padding:0;display:grid;place-items:center}

/* Enterprise master-data forms */
.crowd-form-layout { display:grid; grid-template-columns:minmax(0,1fr) 310px; gap:14px; align-items:start; }.crowd-form-main{display:flex;flex-direction:column;gap:14px}.crowd-form-aside{display:flex;flex-direction:column;gap:14px;position:sticky;top:82px}.crowd-form-panel{padding:17px}.crowd-form-panel>header{margin-bottom:16px}.crowd-section-icon{width:35px;height:35px;border-radius:10px;display:grid;place-items:center;background:#eef4f1;color:var(--crowd-primary)}
.crowd-form-grid{display:grid;gap:15px 16px}.crowd-form-grid.columns-2{grid-template-columns:repeat(2,minmax(0,1fr))}.crowd-form-grid.columns-3{grid-template-columns:repeat(3,minmax(0,1fr))}.crowd-form-grid .span-2{grid-column:span 2}.crowd-form-grid .span-3{grid-column:span 3}.crowd-field{min-width:0}.crowd-field label{display:block;margin-bottom:6px;color:#39463f;font-size:.68rem;font-weight:600}.crowd-field label b{color:var(--crowd-danger)}.crowd-field small{display:block;margin-top:5px;color:#7a857f;font-size:.58rem;line-height:1.4}.crowd-field .form-control,.crowd-field .form-select{min-height:40px;border-color:#dce3df;border-radius:9px;background-color:#fcfdfd;color:var(--crowd-ink);font-size:.75rem}.crowd-field textarea.form-control{min-height:80px}.crowd-field .form-control:focus,.crowd-field .form-select:focus{border-color:color-mix(in srgb,var(--crowd-primary) 46%,#dce3df);box-shadow:0 0 0 3px color-mix(in srgb,var(--crowd-primary) 8%,transparent)}
.crowd-capacity-callout{display:flex;align-items:flex-start;gap:10px;margin:0 0 15px;padding:10px 12px;border:1px solid #dce8e2;border-radius:10px;background:#f4f9f6}.crowd-capacity-callout i{margin-top:1px;color:var(--crowd-success)}.crowd-capacity-callout strong,.crowd-capacity-callout span{display:block}.crowd-capacity-callout strong{font-size:.66rem}.crowd-capacity-callout span{margin-top:2px;color:var(--crowd-muted);font-size:.59rem;line-height:1.45}
.crowd-control-panel .crowd-field{margin-bottom:13px}.crowd-switch-row{display:flex;align-items:flex-start;gap:9px;padding:10px 0;border-bottom:1px solid #eff2f0;cursor:pointer}.crowd-switch-row input{margin-top:2px;accent-color:var(--crowd-primary)}.crowd-switch-row strong,.crowd-switch-row small{display:block}.crowd-switch-row strong{font-size:.67rem}.crowd-switch-row small{margin-top:2px;color:var(--crowd-muted);font-size:.57rem;line-height:1.4}.crowd-future-panel{background:linear-gradient(145deg,#f4f8f6,#fff)}.crowd-future-panel h2{margin:5px 0 11px;font-size:.82rem}.crowd-tag-stack{display:flex;flex-wrap:wrap;gap:5px}
.crowd-threshold-editor{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-top:16px}.crowd-threshold-editor-card{padding:13px;border:1px solid #e5e9e7;border-radius:12px}.crowd-threshold-editor-card.warning{background:#fffbf0;border-color:#f2e5c0}.crowd-threshold-editor-card.critical{background:#fff5f6;border-color:#efd3d7}.crowd-threshold-editor-card>div:first-child{display:flex;justify-content:space-between;align-items:center;margin-bottom:9px}.crowd-threshold-editor-card>div:first-child span{font-size:.59rem;font-weight:700;letter-spacing:.04em}.crowd-threshold-editor-card.warning>div:first-child span,.crowd-threshold-editor-card.warning>div:first-child strong{color:#9a651b}.crowd-threshold-editor-card.critical>div:first-child span,.crowd-threshold-editor-card.critical>div:first-child strong{color:#b3303f}.crowd-threshold-editor-card>div:first-child strong{font-size:.9rem}.crowd-threshold-editor-card>.form-control{height:38px;margin-bottom:10px;font-size:.73rem;border-radius:8px}
.crowd-sticky-actions{position:sticky;z-index:20;bottom:0;display:flex;justify-content:flex-end;gap:8px;margin:16px -22px -88px;padding:12px 22px;background:rgba(255,255,255,.94);border-top:1px solid #dfe5e2;box-shadow:0 -7px 22px rgba(23,35,30,.05);backdrop-filter:blur(10px)}

@media (max-width: 1280px){.crowd-kpi-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.crowd-site-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.crowd-zone-toolbar{grid-template-columns:1fr 1fr}.crowd-zone-master-card{grid-template-columns:minmax(250px,1.4fr) 130px minmax(180px,.7fr) auto}.crowd-zone-master-card>.crowd-icon-button{grid-column:4}.crowd-zone-master-card>.crowd-status-pill{grid-column:4;grid-row:1;transform:translateY(-20px)}}
@media (max-width: 1050px){.crowd-command-grid,.crowd-secondary-grid,.crowd-form-layout{grid-template-columns:1fr}.crowd-form-aside{position:static;display:grid;grid-template-columns:1fr 1fr}.crowd-zone-row{grid-template-columns:minmax(180px,1.4fr) repeat(2,minmax(80px,.55fr)) auto}.crowd-zone-row>div:nth-child(4){display:none}.crowd-zone-master-card{grid-template-columns:minmax(230px,1fr) repeat(2,minmax(130px,.45fr)) auto}.crowd-zone-master-card>.crowd-status-pill{grid-column:auto;grid-row:auto;transform:none}.crowd-zone-master-card>.crowd-icon-button{grid-column:auto}}
@media (max-width: 800px){.crowd-page{padding:15px 12px 82px}.crowd-hero,.crowd-master-header{flex-direction:column;gap:14px}.crowd-hero-actions,.crowd-header-actions{width:100%}.crowd-hero-actions .btn,.crowd-header-actions .btn{flex:1}.crowd-kpi-grid{grid-template-columns:1fr}.crowd-site-grid{grid-template-columns:1fr}.crowd-toolbar-card{flex-wrap:wrap}.crowd-zone-toolbar{grid-template-columns:1fr}.crowd-zone-toolbar .crowd-search-field{min-width:0}.crowd-event-strip{grid-template-columns:1fr}.crowd-map-zone-cloud{grid-template-columns:repeat(2,minmax(100px,1fr))}.crowd-gate-grid{grid-template-columns:1fr}.crowd-zone-row{grid-template-columns:1fr auto}.crowd-zone-row>div:not(:first-child):not(:last-child){display:none}.crowd-zone-master-card{grid-template-columns:1fr auto;gap:10px}.crowd-zone-capacity-metric,.crowd-threshold-pair{grid-column:1/-1}.crowd-zone-master-card>.crowd-status-pill{grid-column:1}.crowd-zone-master-card>.crowd-icon-button{grid-column:2;grid-row:1}.crowd-form-grid.columns-3,.crowd-form-grid.columns-2{grid-template-columns:1fr}.crowd-form-grid .span-2,.crowd-form-grid .span-3{grid-column:auto}.crowd-form-aside{display:flex}.crowd-threshold-editor{grid-template-columns:1fr}.crowd-foundation-strip{align-items:flex-start;flex-direction:column}.crowd-foundation-tags{justify-content:flex-start}.crowd-sticky-actions{margin-left:-12px;margin-right:-12px;padding-left:12px;padding-right:12px}}
@media (max-width: 520px){.crowd-map-zone-cloud{grid-template-columns:1fr}.crowd-digital-map-shell,.crowd-map-zone-cloud{min-height:390px}.crowd-kpi-card{grid-template-columns:auto 1fr}.crowd-kpi-metric{grid-column:2;justify-self:start}.crowd-site-card footer{display:grid;grid-template-columns:1fr 1fr}.crowd-site-card footer .btn{justify-content:center}.crowd-pagination{align-items:flex-start;flex-direction:column}.crowd-pagination>div{width:100%;justify-content:space-between}.crowd-sticky-actions .btn{flex:1;justify-content:center}}

/* =====================================================================
   Crowd Management CM-1 — Core Operations Workspace
   Event planning, live operations, queues, gates and alert control.
   ===================================================================== */
.crowd-toolbar-grid { display:grid; grid-template-columns:minmax(280px,1fr) minmax(190px,260px) auto; align-items:center; }
.crowd-event-list { display:grid; gap:12px; }
.crowd-event-card { background:var(--crowd-surface); border:1px solid var(--crowd-border); border-radius:16px; padding:16px 18px; display:grid; grid-template-columns:minmax(340px,1.3fr) minmax(320px,.9fr) auto; gap:22px; align-items:center; box-shadow:0 7px 22px rgba(24,39,32,.045); transition:transform .18s ease,box-shadow .18s ease,border-color .18s ease; }
.crowd-event-card:hover { transform:translateY(-1px); box-shadow:0 12px 30px rgba(24,39,32,.075); border-color:var(--crowd-border-strong); }
.crowd-event-card-main { display:flex; align-items:center; gap:14px; min-width:0; }
.crowd-event-date { width:62px; min-width:62px; height:66px; border:1px solid var(--crowd-border); border-radius:13px; background:var(--crowd-soft); display:flex; flex-direction:column; justify-content:center; align-items:center; line-height:1; }
.crowd-event-date strong { font-size:1.35rem; font-weight:700; color:var(--crowd-ink); }
.crowd-event-date span { margin-top:6px; font-size:.67rem; font-weight:700; color:var(--crowd-muted); letter-spacing:.08em; }
.crowd-event-card-copy { min-width:0; }
.crowd-event-card-copy h2 { margin:5px 0 5px; font-size:1rem; font-weight:700; color:var(--crowd-ink); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.crowd-event-card-copy p { margin:0; color:var(--crowd-muted); font-size:.75rem; display:flex; align-items:center; flex-wrap:wrap; gap:6px; }
.crowd-card-meta { display:flex; align-items:center; flex-wrap:wrap; gap:7px; }
.crowd-event-card-metrics { display:grid; grid-template-columns:repeat(4,minmax(72px,1fr)); gap:8px; }
.crowd-event-card-metrics > div { padding:9px 10px; border-left:1px solid var(--crowd-border); }
[dir="rtl"] .crowd-event-card-metrics > div { border-left:0; border-right:1px solid var(--crowd-border); }
.crowd-event-card-metrics span,.crowd-event-card-metrics small { display:block; color:var(--crowd-muted); font-size:.66rem; }
.crowd-event-card-metrics strong { display:block; font-size:.9rem; margin-top:3px; }
.crowd-event-card-actions { display:flex; gap:7px; justify-content:flex-end; flex-wrap:wrap; }
.crowd-event-card-actions .btn { min-height:38px; display:inline-flex; align-items:center; gap:6px; font-size:.74rem; font-weight:600; }

.crowd-title-line { display:flex; align-items:center; gap:12px; flex-wrap:wrap; }
.crowd-title-line h1 { margin-bottom:0; }
.crowd-workspace-tabs { display:flex; gap:4px; align-items:center; border:1px solid var(--crowd-border); border-radius:13px; padding:5px; margin-bottom:14px; background:#fff; overflow-x:auto; }
.crowd-workspace-tabs button { border:0; background:transparent; color:var(--crowd-muted); min-height:39px; border-radius:9px; padding:0 14px; display:inline-flex; align-items:center; gap:7px; white-space:nowrap; font-size:.76rem; font-weight:600; }
.crowd-workspace-tabs button:hover:not(:disabled) { background:var(--crowd-soft); color:var(--crowd-ink); }
.crowd-workspace-tabs button.active { background:color-mix(in srgb,var(--crowd-primary) 10%,#fff); color:var(--crowd-primary); box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--crowd-primary) 15%,transparent); }
.crowd-workspace-tabs button span { min-width:19px; height:19px; padding:0 5px; border-radius:999px; display:inline-flex; align-items:center; justify-content:center; background:var(--crowd-soft); color:var(--crowd-ink); font-size:.65rem; }
.crowd-workspace-tabs button:disabled { opacity:.42; cursor:not-allowed; }
.crowd-time-note,.crowd-inline-info { border:1px solid color-mix(in srgb,var(--crowd-primary) 18%,var(--crowd-border)); background:color-mix(in srgb,var(--crowd-primary) 5%,#fff); color:var(--crowd-muted); border-radius:10px; padding:10px 12px; display:flex; align-items:flex-start; gap:8px; font-size:.72rem; line-height:1.55; margin-bottom:14px; }
.crowd-readiness-list { display:grid; gap:9px; }
.crowd-readiness-list > div { display:flex; align-items:center; gap:9px; color:var(--crowd-muted); font-size:.75rem; padding:8px 0; border-bottom:1px solid var(--crowd-border); }
.crowd-readiness-list > div:last-child { border-bottom:0; }
.crowd-readiness-list > div.done { color:var(--crowd-success); }
.crowd-workspace-panel,.crowd-control-workspace { background:#fff; border:1px solid var(--crowd-border); border-radius:16px; box-shadow:0 8px 26px rgba(24,39,32,.045); overflow:hidden; }
.crowd-workspace-panel-head { display:flex; justify-content:space-between; gap:20px; align-items:flex-start; padding:18px 20px; border-bottom:1px solid var(--crowd-border); background:linear-gradient(180deg,#fff,var(--crowd-canvas)); }
.crowd-workspace-panel-head h2 { margin:3px 0 4px; font-size:1rem; font-weight:700; }
.crowd-workspace-panel-head p { margin:0; max-width:780px; color:var(--crowd-muted); font-size:.72rem; line-height:1.55; }
.crowd-plan-table { padding:4px 18px 18px; }
.crowd-plan-table-head,.crowd-plan-row { display:grid; grid-template-columns:38px minmax(210px,1.3fr) minmax(100px,.7fr) minmax(110px,.75fr) minmax(110px,.75fr) minmax(150px,.9fr); align-items:center; gap:12px; }
.crowd-plan-table-head { padding:12px 10px 8px; color:var(--crowd-muted); font-size:.66rem; font-weight:700; text-transform:uppercase; letter-spacing:.04em; }
.crowd-plan-row { min-height:66px; border:1px solid var(--crowd-border); border-radius:11px; padding:9px 10px; margin-top:7px; opacity:.7; transition:.15s ease; }
.crowd-plan-row.selected { opacity:1; border-color:color-mix(in srgb,var(--crowd-primary) 28%,var(--crowd-border)); background:color-mix(in srgb,var(--crowd-primary) 2.5%,#fff); }
.crowd-plan-row strong,.crowd-plan-row small { display:block; }
.crowd-plan-row small { color:var(--crowd-muted); font-size:.66rem; margin-top:3px; }
.crowd-plan-row .form-control { min-height:37px; font-size:.75rem; }
.crowd-plan-row progress { width:100%; height:6px; display:block; margin-top:6px; }
.crowd-gate-plan-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:12px; padding:18px; }
.crowd-gate-plan-card { border:1px solid var(--crowd-border); border-radius:13px; padding:14px; opacity:.7; }
.crowd-gate-plan-card.selected { opacity:1; border-color:color-mix(in srgb,var(--crowd-primary) 30%,var(--crowd-border)); background:color-mix(in srgb,var(--crowd-primary) 2.5%,#fff); }
.crowd-gate-plan-card > header { display:grid; grid-template-columns:auto 1fr auto; gap:9px; align-items:center; margin-bottom:12px; }
.crowd-gate-plan-card header strong,.crowd-gate-plan-card header small { display:block; }
.crowd-gate-plan-card header small { color:var(--crowd-muted); font-size:.66rem; }
.crowd-gate-plan-card header > span { font-size:.7rem; color:var(--crowd-muted); }
.crowd-control-workspace { padding:22px; display:grid; grid-template-columns:minmax(0,1fr) minmax(250px,.45fr); gap:28px; }
.crowd-control-state h2 { margin:5px 0; font-size:1.05rem; }
.crowd-control-state p { color:var(--crowd-muted); font-size:.76rem; max-width:760px; line-height:1.6; }
.crowd-state-flow { display:flex; flex-wrap:wrap; gap:7px; margin-top:18px; }
.crowd-state-flow span { min-height:34px; display:inline-flex; align-items:center; padding:0 11px; border:1px solid var(--crowd-border); border-radius:999px; color:var(--crowd-muted); font-size:.7rem; font-weight:600; }
.crowd-state-flow span.current { background:var(--crowd-primary); border-color:var(--crowd-primary); color:#fff; }
.crowd-control-actions { display:flex; flex-direction:column; gap:8px; justify-content:center; }
.crowd-control-actions .btn { justify-content:flex-start; display:flex; align-items:center; gap:7px; }

.crowd-gate-master-grid,.crowd-queue-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:12px; }
.crowd-gate-master-card,.crowd-queue-card { background:#fff; border:1px solid var(--crowd-border); border-radius:15px; padding:15px; box-shadow:0 7px 22px rgba(24,39,32,.04); }
.crowd-gate-master-card > header { display:grid; grid-template-columns:auto 1fr auto; gap:10px; align-items:center; }
.crowd-gate-master-icon { width:40px; height:40px; border-radius:11px; background:var(--crowd-soft); display:flex; align-items:center; justify-content:center; color:var(--crowd-primary); font-size:1rem; }
.crowd-gate-master-card h2,.crowd-queue-card h2 { margin:3px 0 2px; font-size:.92rem; font-weight:700; }
.crowd-gate-master-card header small,.crowd-queue-card header small { color:var(--crowd-muted); font-size:.66rem; }
.crowd-gate-master-metrics,.crowd-queue-live-metrics { display:grid; grid-template-columns:repeat(3,1fr); gap:7px; margin-top:14px; padding-top:12px; border-top:1px solid var(--crowd-border); }
.crowd-queue-live-metrics { grid-template-columns:repeat(4,1fr); }
.crowd-gate-master-metrics > div,.crowd-queue-live-metrics > div { min-width:0; }
.crowd-gate-master-metrics span,.crowd-queue-live-metrics span,.crowd-gate-master-metrics small,.crowd-queue-live-metrics small { display:block; color:var(--crowd-muted); font-size:.63rem; }
.crowd-gate-master-metrics strong,.crowd-queue-live-metrics strong { display:inline-block; margin-top:4px; font-size:.82rem; }
.crowd-gate-master-card footer,.crowd-queue-card footer { display:flex; justify-content:flex-end; align-items:center; gap:8px; margin-top:14px; }
.crowd-queue-card header { display:flex; justify-content:space-between; gap:12px; align-items:flex-start; }
.crowd-queue-card footer { justify-content:space-between; }
.crowd-queue-card footer small { color:var(--crowd-muted); font-size:.64rem; }
.crowd-threshold-legend { display:flex; flex-wrap:wrap; gap:7px; margin-top:12px; }
.crowd-threshold-legend span { border-radius:999px; padding:5px 9px; font-size:.66rem; font-weight:600; }

.crowd-live-page { min-height:calc(100vh - 80px); }
.crowd-live-header { display:flex; justify-content:space-between; align-items:flex-start; gap:22px; margin-bottom:14px; }
.crowd-live-header h1 { margin:5px 0 4px; font-size:1.55rem; font-weight:700; }
.crowd-live-header p { margin:0; max-width:840px; color:var(--crowd-muted); font-size:.76rem; line-height:1.55; }
.crowd-event-select { min-width:255px; max-width:340px; }
.crowd-live-event-bar { background:#fff; border:1px solid var(--crowd-border); border-radius:13px; padding:12px 15px; display:flex; align-items:center; justify-content:space-between; gap:15px; margin-bottom:12px; box-shadow:0 6px 20px rgba(24,39,32,.035); }
.crowd-live-event-bar span,.crowd-live-event-bar small { display:block; color:var(--crowd-muted); font-size:.65rem; }
.crowd-live-event-bar strong { display:block; margin:2px 0; font-size:.9rem; }
.crowd-live-kpis { margin-bottom:12px; }
.crowd-live-layout { display:grid; grid-template-columns:minmax(0,1fr) 350px; gap:12px; align-items:start; }
.crowd-live-main,.crowd-live-side { display:grid; gap:12px; min-width:0; }
.crowd-live-side { position:sticky; top:12px; }
.crowd-live-zone-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:9px; }
.crowd-live-zone-card { border:1px solid var(--crowd-border); border-radius:12px; padding:12px; background:#fff; position:relative; overflow:hidden; }
.crowd-live-zone-card::before { content:""; position:absolute; inset:0 auto 0 0; width:3px; background:currentColor; opacity:.65; }
[dir="rtl"] .crowd-live-zone-card::before { left:auto; right:0; }
.crowd-live-zone-card > header { display:flex; justify-content:space-between; gap:8px; align-items:flex-start; }
.crowd-live-zone-card header span,.crowd-live-zone-card header strong { display:block; }
.crowd-live-zone-card header > div > span { color:var(--crowd-muted); font-size:.62rem; font-weight:700; }
.crowd-live-zone-card header strong { font-size:.78rem; margin-top:2px; }
.crowd-live-zone-number { margin:13px 0 7px; display:flex; align-items:baseline; gap:4px; }
.crowd-live-zone-number strong { font-size:1.25rem; }
.crowd-live-zone-number span { color:var(--crowd-muted); font-size:.68rem; }
.crowd-live-zone-card progress { width:100%; height:7px; }
.crowd-live-zone-meta { display:flex; justify-content:space-between; gap:6px; margin-top:7px; color:var(--crowd-muted); font-size:.6rem; }
.crowd-ops-table { display:grid; }
.crowd-ops-row { display:grid; grid-template-columns:minmax(180px,1.3fr) repeat(3,minmax(80px,.65fr)) auto; gap:12px; align-items:center; min-height:58px; padding:9px 2px; border-bottom:1px solid var(--crowd-border); }
.crowd-ops-row:last-child { border-bottom:0; }
.crowd-ops-row > div:first-child { display:flex; align-items:center; gap:8px; }
.crowd-ops-row > div:first-child strong,.crowd-ops-row > div:first-child small { display:block; }
.crowd-ops-row small,.crowd-ops-row > div:not(:first-child) span { color:var(--crowd-muted); font-size:.62rem; display:block; }
.crowd-ops-row > div:not(:first-child) strong { display:block; font-size:.76rem; margin-top:2px; }
.crowd-operator-panel { border-color:color-mix(in srgb,var(--crowd-primary) 24%,var(--crowd-border)); }
.crowd-operator-tabs { display:grid; grid-template-columns:repeat(3,1fr); gap:3px; border:1px solid var(--crowd-border); background:var(--crowd-soft); padding:3px; border-radius:9px; margin-bottom:12px; }
.crowd-operator-tabs button { border:0; border-radius:7px; background:transparent; min-height:31px; font-size:.67rem; font-weight:600; color:var(--crowd-muted); }
.crowd-operator-tabs button.active { background:#fff; color:var(--crowd-primary); box-shadow:0 1px 4px rgba(24,39,32,.08); }
.crowd-operator-form { display:grid; gap:10px; }
.crowd-operator-inline { display:grid; grid-template-columns:1fr 1fr; gap:8px; }
.crowd-operator-form .crowd-field label { font-size:.66rem; }
.crowd-operator-form .form-control,.crowd-operator-form .form-select { min-height:38px; font-size:.73rem; }

.crowd-alert-toolbar { display:grid; grid-template-columns:minmax(300px,1fr) 190px 190px; gap:9px; }
.crowd-alert-center-list { display:grid; gap:9px; }
.crowd-alert-center-card { background:#fff; border:1px solid var(--crowd-border); border-radius:14px; padding:14px; display:grid; grid-template-columns:100px minmax(0,1fr) auto; gap:16px; align-items:center; position:relative; overflow:hidden; }
.crowd-alert-center-card::before { content:""; position:absolute; inset:0 auto 0 0; width:4px; background:currentColor; }
[dir="rtl"] .crowd-alert-center-card::before { left:auto; right:0; }
.crowd-alert-center-severity { display:flex; flex-direction:column; align-items:center; justify-content:center; gap:5px; min-height:72px; border-right:1px solid var(--crowd-border); font-size:.68rem; font-weight:700; }
[dir="rtl"] .crowd-alert-center-severity { border-right:0; border-left:1px solid var(--crowd-border); }
.crowd-alert-center-severity i { font-size:1.15rem; }
.crowd-alert-center-body h2 { margin:5px 0 4px; font-size:.88rem; font-weight:700; }
.crowd-alert-center-body p { margin:0; font-size:.72rem; color:var(--crowd-muted); line-height:1.5; }
.crowd-alert-center-meta { display:flex; align-items:center; flex-wrap:wrap; gap:12px; margin-top:8px; color:var(--crowd-muted); font-size:.62rem; }
.crowd-alert-center-meta span { display:inline-flex; align-items:center; gap:4px; }
.crowd-alert-center-actions { display:flex; gap:6px; flex-wrap:wrap; justify-content:flex-end; }

@media (max-width:1400px){
    .crowd-event-card { grid-template-columns:minmax(320px,1fr) minmax(300px,.8fr); }
    .crowd-event-card-actions { grid-column:1/-1; border-top:1px solid var(--crowd-border); padding-top:10px; }
    .crowd-gate-master-grid,.crowd-queue-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
    .crowd-live-layout { grid-template-columns:minmax(0,1fr) 320px; }
    .crowd-live-zone-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
}
@media (max-width:1050px){
    .crowd-toolbar-grid,.crowd-alert-toolbar { grid-template-columns:1fr 1fr; }
    .crowd-toolbar-grid .crowd-search-field,.crowd-alert-toolbar .crowd-search-field { grid-column:1/-1; }
    .crowd-event-card { grid-template-columns:1fr; }
    .crowd-event-card-actions { grid-column:auto; }
    .crowd-event-card-metrics { border-top:1px solid var(--crowd-border); padding-top:10px; }
    .crowd-gate-plan-grid { grid-template-columns:1fr; }
    .crowd-plan-table { overflow-x:auto; }
    .crowd-plan-table-head,.crowd-plan-row { min-width:860px; }
    .crowd-control-workspace { grid-template-columns:1fr; }
    .crowd-live-layout { grid-template-columns:1fr; }
    .crowd-live-side { position:static; grid-template-columns:1fr 1fr; }
    .crowd-live-header { flex-direction:column; }
}
@media (max-width:720px){
    .crowd-toolbar-grid,.crowd-alert-toolbar { grid-template-columns:1fr; }
    .crowd-toolbar-grid .crowd-search-field,.crowd-alert-toolbar .crowd-search-field { grid-column:auto; }
    .crowd-event-card { padding:13px; gap:12px; }
    .crowd-event-card-metrics { grid-template-columns:repeat(2,1fr); }
    .crowd-event-card-metrics > div:nth-child(odd) { border-left:0; border-right:0; }
    .crowd-gate-master-grid,.crowd-queue-grid,.crowd-live-zone-grid { grid-template-columns:1fr; }
    .crowd-live-side { grid-template-columns:1fr; }
    .crowd-live-zone-meta { flex-wrap:wrap; }
    .crowd-ops-row { grid-template-columns:1fr 1fr; }
    .crowd-ops-row > div:first-child { grid-column:1/-1; }
    .crowd-alert-center-card { grid-template-columns:1fr; gap:8px; }
    .crowd-alert-center-severity { flex-direction:row; justify-content:flex-start; min-height:auto; border:0; }
    .crowd-alert-center-actions { justify-content:flex-start; }
    .crowd-event-select { min-width:0; width:100%; }
}

/* CM-1 read-only event workspace guard */
.crowd-readonly-fieldset {
    min-width: 0;
    margin: 0;
    padding: 0;
    border: 0;
}

.crowd-readonly-fieldset:disabled .form-control,
.crowd-readonly-fieldset:disabled .form-select {
    background: var(--bs-tertiary-bg, #f8f9fa);
    opacity: .88;
}

/* ========================================================================== */
/* Crowd Management CM-2 — Safety, Emergency & Patrol Operations              */
/* ========================================================================== */
.crowd-incident-list,.crowd-patrol-list{display:grid;gap:12px}.crowd-incident-row{display:grid;grid-template-columns:46px minmax(0,1fr) auto auto;gap:16px;align-items:center;padding:16px 18px;background:#fff;border:1px solid #e5e9ef;border-radius:16px;box-shadow:0 5px 18px rgba(16,24,40,.035)}.crowd-incident-severity{width:44px;height:44px;border-radius:13px;display:grid;place-items:center;font-size:19px}.crowd-incident-main{min-width:0}.crowd-incident-title{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin-bottom:5px}.crowd-incident-main h2{font-size:15px;font-weight:700;margin:0 0 7px;color:#172033}.crowd-meta-line{display:flex;align-items:center;gap:14px;flex-wrap:wrap;color:#6b7280;font-size:12px}.crowd-meta-line span{display:inline-flex;align-items:center;gap:5px}.crowd-incident-stats{display:flex;align-items:center;gap:16px}.crowd-incident-stats>div{display:flex;flex-direction:column;align-items:center;min-width:66px}.crowd-incident-stats strong{font-size:15px;color:#172033}.crowd-incident-stats span{font-size:10.5px;color:#7a8493}.crowd-incident-stats .linked{color:#16794b}.crowd-linked-badge{display:inline-flex;align-items:center;gap:6px;padding:8px 11px;border-radius:10px;background:#eef9f2;color:#176d46;font-size:12px;font-weight:600}.crowd-state-hero{padding:15px;border-radius:14px;display:flex;flex-direction:column;gap:3px;margin-bottom:14px}.crowd-state-hero span{font-size:11px;opacity:.8}.crowd-state-hero strong{font-size:18px}.risk-emergency{background:#fff0f0!important;color:#b42318!important;border-color:#ffd0cc!important}.crowd-control-facts{display:grid;grid-template-columns:1fr 1fr;gap:8px}.crowd-control-facts>div{padding:10px;border:1px solid #edf0f4;border-radius:11px;display:flex;flex-direction:column}.crowd-control-facts span{font-size:10.5px;color:#7b8492}.crowd-control-facts strong{font-size:13px;color:#172033}.crowd-status-actions{display:grid;gap:8px}.crowd-inline-command{display:grid;grid-template-columns:minmax(120px,.5fr) minmax(180px,1.5fr) auto;gap:9px;align-items:end}.crowd-assignment-row{display:flex;justify-content:space-between;align-items:center;padding:11px 0;border-bottom:1px solid #edf0f4}.crowd-assignment-row>div{display:flex;flex-direction:column}.crowd-assignment-row strong{font-size:13px}.crowd-assignment-row span,.crowd-assignment-row small{font-size:11px;color:#7a8493}.crowd-upload-zone{position:relative;border:1px dashed #b8c6d8;background:#f8fbff;border-radius:16px;min-height:145px;display:grid;place-items:center;text-align:center;margin-bottom:14px}.crowd-upload-zone input[type=file]{position:absolute;inset:0;opacity:0;cursor:pointer;width:100%;height:100%}.crowd-upload-zone>div{display:flex;flex-direction:column;align-items:center;gap:4px;pointer-events:none}.crowd-upload-zone i{font-size:28px;color:#376da8}.crowd-upload-zone strong{font-size:13px}.crowd-upload-zone span{font-size:11px;color:#7a8493}.crowd-evidence-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;margin-top:16px}.crowd-evidence-card{display:grid;grid-template-columns:42px minmax(0,1fr) auto;gap:12px;align-items:start;padding:13px;border:1px solid #e7ebf0;border-radius:13px;background:#fff}.crowd-file-icon{width:40px;height:40px;border-radius:10px;background:#edf4fb;color:#376da8;display:grid;place-items:center;font-size:18px}.crowd-evidence-card h3{font-size:12.5px;margin:3px 0}.crowd-evidence-card small,.crowd-evidence-card p{font-size:10.5px;color:#7a8493;margin:0}.crowd-evidence-actions{display:flex;gap:5px}.crowd-timeline{position:relative;display:grid;gap:0}.crowd-timeline:before{content:"";position:absolute;left:17px;top:15px;bottom:15px;width:1px;background:#dfe5ec}.crowd-timeline-item{position:relative;display:grid;grid-template-columns:36px 1fr;gap:12px;padding:0 0 18px}.crowd-timeline-dot{z-index:1;width:35px;height:35px;border-radius:50%;display:grid;place-items:center;background:#f1f5f9;border:1px solid #dde4ec;color:#4f6279}.crowd-timeline-item>div:last-child>div{display:flex;justify-content:space-between;gap:10px}.crowd-timeline-item strong{font-size:12.5px}.crowd-timeline-item time,.crowd-timeline-item small{font-size:10.5px;color:#7a8493}.crowd-timeline-item p{font-size:12px;color:#566273;margin:5px 0}.crowd-plan-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px}.crowd-plan-card{background:#fff;border:1px solid #e5e9ef;border-radius:16px;padding:16px;box-shadow:0 5px 18px rgba(16,24,40,.035)}.crowd-plan-card header,.crowd-plan-card footer{display:flex;align-items:flex-start;justify-content:space-between;gap:10px}.crowd-plan-card h2{font-size:14px;margin:4px 0 2px}.crowd-plan-card header small{font-size:11px;color:#788393}.crowd-plan-card footer{align-items:center;margin-top:14px}.crowd-plan-metrics{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:7px;margin:14px 0}.crowd-plan-metrics>div{padding:9px;border-radius:10px;background:#f7f9fb;display:flex;flex-direction:column}.crowd-plan-metrics strong{font-size:13px}.crowd-plan-metrics span{font-size:10px;color:#7a8493}.crowd-line-editor{display:grid;gap:10px}.crowd-line-card{position:relative;padding:15px;border:1px solid #e7ebf0;border-radius:14px;background:#fbfcfd}.crowd-line-number{position:absolute;top:-8px;left:-8px;width:24px;height:24px;border-radius:50%;background:#223b57;color:white;display:grid;place-items:center;font-size:10px;font-weight:700}.crowd-remove-line{position:absolute;right:10px;top:10px;padding:5px 8px}.crowd-workspace-tabs{display:flex;gap:4px;padding:5px;background:#eef2f6;border:1px solid #e2e7ed;border-radius:13px;margin:0 0 15px;overflow:auto}.crowd-workspace-tabs button{border:0;background:transparent;padding:9px 13px;border-radius:9px;color:#687487;font-size:12.5px;font-weight:600;white-space:nowrap}.crowd-workspace-tabs button.active{background:white;color:#203a57;box-shadow:0 1px 5px rgba(16,24,40,.08)}.crowd-workspace-tabs button span{background:#eef3f7;border-radius:10px;padding:1px 6px;margin-inline-start:4px}.emergency-header .crowd-eyebrow{color:#b42318}.emergency-ready{border-color:#d7e8df;background:linear-gradient(180deg,#fff,#f8fcfa)}.crowd-emergency-activation-form{display:grid;grid-template-columns:1fr 1fr 1fr 1.4fr auto;gap:8px;max-width:1150px;margin:18px auto 0}.crowd-emergency-banner{display:grid;grid-template-columns:minmax(0,1fr) auto auto;gap:20px;align-items:center;padding:18px 20px;border:1px solid #f5c5bf;background:linear-gradient(135deg,#fff5f3,#fff);border-radius:17px;margin-bottom:14px}.crowd-emergency-banner>div:first-child>span{font-size:10px;font-weight:800;letter-spacing:.1em;color:#b42318}.crowd-emergency-banner h2{font-size:18px;margin:4px 0}.crowd-emergency-banner p{margin:0;font-size:12px;color:#6d7480}.crowd-emergency-clock{display:flex;flex-direction:column;text-align:right}.crowd-emergency-clock span,.crowd-emergency-clock small{font-size:10px;color:#7a8493}.crowd-emergency-clock strong{font-size:18px}.crowd-emergency-state{padding:10px 14px;border-radius:11px;background:#b42318;color:white}.crowd-kpi-grid.compact{grid-template-columns:repeat(4,minmax(0,1fr));margin-bottom:14px}.crowd-emergency-layout{display:grid;grid-template-columns:minmax(0,1.7fr) minmax(300px,.8fr);gap:14px}.crowd-emergency-layout aside{display:grid;align-content:start;gap:14px}.crowd-evac-list{display:grid;gap:10px}.crowd-evac-list>article{padding:13px;border:1px solid #e7ebf0;border-radius:13px}.crowd-evac-list>article>div:first-child,.crowd-evac-metrics{display:flex;justify-content:space-between;gap:10px;font-size:11px}.crowd-evac-list progress{width:100%;height:8px;margin:10px 0}.crowd-muster-row{display:flex;justify-content:space-between;align-items:center;padding:9px 0;border-bottom:1px solid #eef1f4}.crowd-muster-row>div{display:flex;flex-direction:column}.crowd-muster-row strong{font-size:12px}.crowd-muster-row span{font-size:10.5px;color:#7a8493}.crowd-quick-panel{margin-bottom:14px}.crowd-patrol-card{background:#fff;border:1px solid #e5e9ef;border-radius:16px;padding:15px;box-shadow:0 5px 18px rgba(16,24,40,.035)}.crowd-patrol-card header,.crowd-patrol-card footer{display:flex;align-items:flex-start;justify-content:space-between;gap:10px}.crowd-patrol-card h2{font-size:14px;margin:4px 0 2px}.crowd-patrol-card header small{font-size:11px;color:#7a8493}.crowd-patrol-card footer{justify-content:flex-end;margin-top:12px;align-items:center;flex-wrap:wrap}.crowd-modal-backdrop{position:fixed;z-index:1090;inset:0;background:rgba(17,24,39,.48);display:grid;place-items:center;padding:18px}.crowd-ops-modal{width:min(520px,100%);background:#fff;border-radius:17px;padding:18px;box-shadow:0 24px 70px rgba(0,0,0,.2)}.crowd-ops-modal header{display:flex;justify-content:space-between;align-items:flex-start;margin-bottom:14px}.crowd-ops-modal h2{font-size:16px;margin:3px 0}.crowd-ops-modal .crowd-field{margin-bottom:10px}
@media(max-width:1199px){.crowd-plan-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.crowd-emergency-activation-form{grid-template-columns:1fr 1fr}.crowd-emergency-layout{grid-template-columns:1fr}.crowd-incident-row{grid-template-columns:42px minmax(0,1fr) auto}.crowd-incident-stats{grid-column:2/4;justify-content:flex-start}}
@media(max-width:767px){.crowd-incident-row{grid-template-columns:38px minmax(0,1fr)}.crowd-incident-row>button{grid-column:1/3}.crowd-incident-stats{grid-column:1/3}.crowd-plan-grid,.crowd-evidence-grid,.crowd-kpi-grid.compact{grid-template-columns:1fr}.crowd-inline-command,.crowd-emergency-activation-form{grid-template-columns:1fr}.crowd-emergency-banner{grid-template-columns:1fr}.crowd-emergency-clock{text-align:left}.crowd-workspace-tabs{margin-inline:-4px}}

/* Crowd Management CM-2 — Notification Workflow */
.crowd-notification-toolbar{display:grid;grid-template-columns:minmax(280px,1fr) 190px 220px;gap:12px;align-items:center}.crowd-notification-summary{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px;margin:14px 0}.crowd-notification-summary>div{background:#fff;border:1px solid var(--crowd-border,#dde4ea);border-radius:14px;padding:14px 16px;display:flex;justify-content:space-between;align-items:end;box-shadow:0 4px 16px rgba(15,23,42,.04)}.crowd-notification-summary span{font-size:12px;color:#64748b}.crowd-notification-summary strong{font-size:24px;line-height:1}.crowd-notification-list{display:grid;gap:12px}.crowd-notification-card{display:grid;grid-template-columns:170px minmax(0,1fr) auto;gap:18px;align-items:center;background:#fff;border:1px solid var(--crowd-border,#dde4ea);border-left:4px solid #f59e0b;border-radius:16px;padding:16px 18px;box-shadow:0 5px 18px rgba(15,23,42,.04)}.crowd-notification-card.status-success{border-left-color:#16a34a}.crowd-notification-card.status-danger{border-left-color:#dc2626}.crowd-notification-card.status-info{border-left-color:#2563eb}.crowd-notification-card.status-muted{border-left-color:#94a3b8}.crowd-notification-status{display:grid;gap:5px}.crowd-notification-status strong{font-size:13px}.crowd-notification-status small{font-size:11px;color:#64748b}.crowd-notification-dot{width:9px;height:9px;border-radius:50%;background:#f59e0b}.status-success .crowd-notification-dot{background:#16a34a}.status-danger .crowd-notification-dot{background:#dc2626}.status-info .crowd-notification-dot{background:#2563eb}.status-muted .crowd-notification-dot{background:#94a3b8}.crowd-notification-body h2{font-size:15px;margin:5px 0 8px}.crowd-notification-actions{display:flex;gap:8px;flex-wrap:wrap;justify-content:flex-end}.crowd-notification-error{margin-top:9px;padding:8px 10px;border-radius:9px;background:#fff1f2;color:#b91c1c;font-size:12px;display:flex;gap:7px}.crowd-notification-executed{display:flex;gap:6px;color:#15803d;margin-top:8px}.crowd-notification-modal{max-width:620px}.crowd-context-panel{display:grid;gap:3px;padding:12px 14px;border:1px solid #e2e8f0;border-radius:12px;background:#f8fafc;margin-bottom:14px}.crowd-context-panel small{color:#64748b}@media(max-width:1000px){.crowd-notification-toolbar{grid-template-columns:1fr 1fr}.crowd-notification-toolbar .crowd-search-field{grid-column:1/-1}.crowd-notification-summary{grid-template-columns:1fr 1fr}.crowd-notification-card{grid-template-columns:130px 1fr}.crowd-notification-actions{grid-column:1/-1;justify-content:flex-start}}@media(max-width:640px){.crowd-notification-toolbar,.crowd-notification-summary{grid-template-columns:1fr}.crowd-notification-card{grid-template-columns:1fr}.crowd-notification-actions{grid-column:auto}.crowd-notification-summary>div{min-height:68px}}

/* ================================================================
   Crowd Management CM-3 — Integration Platform
   ================================================================ */
.crowd-integration-page { --integration-gap: 1rem; }
.crowd-integration-hero { align-items: flex-end; }
.crowd-integration-kpis { display:grid; grid-template-columns:repeat(5,minmax(0,1fr)); gap:1rem; margin-bottom:1rem; }
.crowd-integration-kpi { background:var(--bs-body-bg,#fff); border:1px solid var(--bs-border-color,#dee2e6); border-radius:18px; padding:1.05rem 1.1rem; display:flex; flex-direction:column; gap:.15rem; min-width:0; box-shadow:0 8px 24px rgba(15,23,42,.045); }
.crowd-integration-kpi span,.crowd-integration-kpi small { color:var(--bs-secondary-color,#6c757d); }
.crowd-integration-kpi strong { font-size:1.85rem; line-height:1.1; }
.crowd-integration-kpi.is-danger { border-inline-start:4px solid var(--bs-danger,#dc3545); }
.crowd-integration-connector-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:1rem; }
.crowd-integration-connector-card { border:1px solid var(--bs-border-color,#dee2e6); border-radius:18px; padding:1rem; background:var(--bs-body-bg,#fff); min-width:0; }
.crowd-integration-connector-card header { display:flex; justify-content:space-between; align-items:flex-start; gap:.75rem; }
.crowd-integration-connector-card h3 { margin:.2rem 0; font-size:1rem; }
.crowd-integration-connector-card small { overflow-wrap:anywhere; color:var(--bs-secondary-color,#6c757d); }
.crowd-integration-connector-meta { display:flex; flex-wrap:wrap; gap:.45rem; margin:.9rem 0; }
.crowd-integration-connector-meta span { border:1px solid var(--bs-border-color,#dee2e6); border-radius:999px; padding:.28rem .55rem; font-size:.78rem; }
.crowd-integration-connector-meta i { margin-inline-end:.25rem; }
.crowd-integration-connector-card footer { display:flex; flex-wrap:wrap; gap:.5rem; margin-top:.85rem; }
.crowd-integration-error { margin-top:.65rem; border-radius:10px; background:rgba(220,53,69,.08); padding:.55rem .65rem; color:var(--bs-danger-text-emphasis,#842029); font-size:.8rem; overflow-wrap:anywhere; }
.crowd-integration-error-cell { max-width:380px; white-space:normal; overflow-wrap:anywhere; }
.crowd-integration-table-wrap { overflow:auto; width:100%; }
.crowd-integration-table { min-width:840px; vertical-align:middle; margin:0; }
.crowd-integration-table code { white-space:nowrap; font-size:.78rem; }
.crowd-row-actions { display:flex; gap:.35rem; }
.crowd-integration-form .crowd-form-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:1rem; }
.crowd-integration-form label { display:flex; flex-direction:column; gap:.4rem; font-weight:500; }
.crowd-integration-form label small { color:var(--bs-secondary-color,#6c757d); font-weight:400; }
.crowd-form-span-2 { grid-column:1 / -1; }
.crowd-form-checkbox { justify-content:center; align-self:end; min-height:38px; }
.crowd-integration-adapter-strip { margin-top:1.25rem; padding-top:1rem; border-top:1px solid var(--bs-border-color,#dee2e6); display:flex; gap:.5rem; flex-wrap:wrap; align-items:center; }
.crowd-integration-adapter-strip span { background:var(--bs-tertiary-bg,#f8f9fa); border-radius:999px; padding:.35rem .65rem; font-size:.8rem; }
.crowd-form-actions { display:flex; align-items:center; gap:.7rem; margin-top:1rem; }
.crowd-integration-filters { display:grid; grid-template-columns:minmax(220px,1fr) 180px 180px auto; gap:.6rem; }
.crowd-integration-detail { margin-top:1rem; }
.crowd-integration-detail-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:.75rem; margin-bottom:1rem; }
.crowd-integration-detail-grid>div { padding:.7rem; background:var(--bs-tertiary-bg,#f8f9fa); border-radius:12px; display:flex; flex-direction:column; gap:.2rem; min-width:0; }
.crowd-integration-detail-grid code { overflow-wrap:anywhere; }
.crowd-integration-payload { max-height:360px; overflow:auto; border:1px solid var(--bs-border-color,#dee2e6); border-radius:12px; padding:1rem; direction:ltr; text-align:left; white-space:pre-wrap; word-break:break-word; }
.crowd-integration-attempts { display:grid; gap:.6rem; }
.crowd-integration-attempts>div { display:grid; grid-template-columns:1fr auto auto; gap:.65rem; border-bottom:1px solid var(--bs-border-color,#dee2e6); padding:.65rem 0; }
.crowd-integration-attempts small { grid-column:1/-1; color:var(--bs-secondary-color,#6c757d); }
.crowd-integration-tabs { display:flex; gap:.4rem; margin-bottom:1rem; overflow:auto; }
.crowd-integration-tabs button { border:1px solid var(--bs-border-color,#dee2e6); background:var(--bs-body-bg,#fff); border-radius:999px; padding:.55rem .9rem; white-space:nowrap; }
.crowd-integration-tabs button.is-active { background:var(--bs-primary,#0d6efd); color:#fff; border-color:var(--bs-primary,#0d6efd); }
.crowd-integration-inline-form { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:.55rem; margin-bottom:1rem; padding:1rem; border:1px dashed var(--bs-border-color,#dee2e6); border-radius:14px; }
.crowd-integration-inline-form-webhook { grid-template-columns:repeat(2,minmax(0,1fr)); }
@media (max-width:1199.98px){.crowd-integration-kpis{grid-template-columns:repeat(3,minmax(0,1fr))}.crowd-integration-connector-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:767.98px){.crowd-integration-kpis,.crowd-integration-connector-grid,.crowd-integration-form .crowd-form-grid,.crowd-integration-detail-grid,.crowd-integration-inline-form,.crowd-integration-inline-form-webhook{grid-template-columns:1fr}.crowd-form-span-2{grid-column:auto}.crowd-integration-filters{grid-template-columns:1fr}.crowd-integration-attempts>div{grid-template-columns:1fr}.crowd-integration-attempts small{grid-column:auto}}

/* ================================================================
   Crowd Management CM-3R1 — Hikvision ISAPI / Live Video
   ================================================================ */
.crowd-hikvision-hero{align-items:flex-end}.crowd-hikvision-summary-grid{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:1rem;margin-bottom:1rem}.crowd-hikvision-summary-grid>article{background:var(--bs-body-bg,#fff);border:1px solid var(--bs-border-color,#dee2e6);border-radius:18px;padding:1rem;display:flex;flex-direction:column;gap:.25rem;box-shadow:0 8px 24px rgba(15,23,42,.04);min-width:0}.crowd-hikvision-summary-grid span,.crowd-hikvision-summary-grid small{font-size:.78rem;color:var(--bs-secondary-color,#6c757d);overflow-wrap:anywhere}.crowd-hikvision-summary-grid strong{font-size:1rem;overflow-wrap:anywhere}.crowd-hikvision-capabilities{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:.65rem}.crowd-hikvision-capability{display:grid;grid-template-columns:30px minmax(0,1fr) auto;gap:.6rem;align-items:center;padding:.75rem;border:1px solid var(--bs-border-color,#dee2e6);border-radius:13px;background:var(--bs-body-bg,#fff)}.crowd-hikvision-capability i{width:30px;height:30px;border-radius:9px;display:grid;place-items:center;background:var(--bs-tertiary-bg,#f8f9fa)}.crowd-hikvision-capability span{font-size:.82rem;font-weight:600}.crowd-hikvision-capability strong{font-size:1rem}.crowd-hikvision-capability.is-enabled{border-color:rgba(25,135,84,.28);background:rgba(25,135,84,.035)}.crowd-hikvision-capability.is-enabled i,.crowd-hikvision-capability.is-enabled strong{color:var(--bs-success,#198754)}.crowd-hikvision-capability.is-disabled{opacity:.58}.crowd-hikvision-sync-controls{display:grid;grid-template-columns:minmax(220px,1fr) minmax(220px,1fr) auto auto;gap:.75rem;align-items:end}.crowd-hikvision-sync-controls label{display:flex;flex-direction:column;gap:.35rem;font-size:.82rem;font-weight:600}.crowd-hikvision-sync-controls .crowd-check-control{flex-direction:row;align-items:center;min-height:38px;white-space:nowrap}.crowd-hikvision-note{display:flex;align-items:flex-start;gap:.45rem;margin:.85rem 0 0;color:var(--bs-secondary-color,#6c757d);font-size:.78rem}.crowd-hikvision-channel-filter{min-width:min(360px,100%)}.crowd-hikvision-table tbody tr.is-selected{background:rgba(13,110,253,.045)}.crowd-hikvision-event-pills{display:flex;flex-wrap:wrap;gap:.25rem;max-width:290px}.crowd-hikvision-event-pills span{font-size:.68rem;padding:.2rem .4rem;border-radius:999px;background:var(--bs-tertiary-bg,#f8f9fa);border:1px solid var(--bs-border-color,#dee2e6);white-space:nowrap}.crowd-hikvision-event-pills .is-muted{color:var(--bs-secondary-color,#6c757d)}.crowd-hikvision-live-panel .crowd-panel-header{align-items:flex-start}.crowd-hikvision-live-stage{position:relative;background:#090d12;border-radius:16px;overflow:hidden;min-height:360px;display:grid;place-items:center;border:1px solid #1e293b}.crowd-hikvision-live-stage img{display:block;width:100%;max-height:72vh;min-height:360px;object-fit:contain;background:#090d12}.crowd-hikvision-live-overlay{position:absolute;top:12px;left:12px;display:flex;align-items:center;gap:.45rem;background:rgba(10,15,22,.72);color:#fff;padding:.4rem .65rem;border-radius:999px;font-size:.72rem;backdrop-filter:blur(6px)}[dir="rtl"] .crowd-hikvision-live-overlay{left:auto;right:12px}.crowd-live-dot{width:8px;height:8px;border-radius:50%;background:#ef4444;box-shadow:0 0 0 4px rgba(239,68,68,.18);animation:crowd-live-pulse 1.5s infinite}.crowd-hikvision-live-footer{display:flex;justify-content:space-between;gap:1rem;flex-wrap:wrap;margin-top:.65rem;color:var(--bs-secondary-color,#6c757d);font-size:.75rem}.crowd-hikvision-live-footer span{display:inline-flex;align-items:center;gap:.35rem}.crowd-hikvision-live-panel .btn.active{background:var(--bs-primary,#0d6efd);border-color:var(--bs-primary,#0d6efd)!important;color:#fff}@keyframes crowd-live-pulse{50%{opacity:.45}}
@media(max-width:1199.98px){.crowd-hikvision-summary-grid{grid-template-columns:repeat(3,minmax(0,1fr))}.crowd-hikvision-capabilities{grid-template-columns:repeat(2,minmax(0,1fr))}.crowd-hikvision-sync-controls{grid-template-columns:1fr 1fr}.crowd-hikvision-sync-controls .crowd-check-control,.crowd-hikvision-sync-controls button{align-self:end}}
@media(max-width:767.98px){.crowd-hikvision-summary-grid,.crowd-hikvision-capabilities,.crowd-hikvision-sync-controls{grid-template-columns:1fr}.crowd-hikvision-channel-filter{min-width:0;width:100%}.crowd-hikvision-live-stage,.crowd-hikvision-live-stage img{min-height:220px}.crowd-hikvision-live-panel .crowd-panel-header{gap:.75rem}.crowd-hikvision-live-panel .crowd-header-actions{width:100%;flex-wrap:wrap}.crowd-hikvision-live-panel .crowd-header-actions .btn{flex:1 1 auto}}
.crowd-hikvision-event-empty{display:flex;align-items:center;gap:.65rem;padding:1rem;border:1px dashed var(--bs-border-color,#dee2e6);border-radius:13px;color:var(--bs-secondary-color,#6c757d);font-size:.82rem}.crowd-hikvision-event-empty i{font-size:1.2rem;color:var(--bs-primary,#0d6efd)}

/* CM-3R3 Hikvision live analytics rule mapping */
.crowd-hikvision-rule-controls{display:grid;grid-template-columns:minmax(180px,1fr) 150px minmax(190px,1fr) minmax(220px,1fr);gap:.75rem;align-items:end}.crowd-hikvision-rule-controls label{display:flex;flex-direction:column;gap:.35rem;font-size:.82rem;font-weight:600}.crowd-hikvision-rule-controls .crowd-hikvision-rule-label{grid-column:span 3}.crowd-hikvision-rule-controls>.btn{min-height:38px}.crowd-hikvision-live-event{position:absolute;left:12px;bottom:12px;display:flex;align-items:center;gap:.6rem;max-width:min(420px,calc(100% - 24px));padding:.55rem .75rem;border-radius:12px;background:rgba(10,15,22,.82);color:#fff;backdrop-filter:blur(7px);box-shadow:0 8px 30px rgba(0,0,0,.2)}[dir="rtl"] .crowd-hikvision-live-event{left:auto;right:12px}.crowd-hikvision-live-event i{font-size:1.15rem;color:#8bd228}.crowd-hikvision-live-event div{display:flex;flex-direction:column;min-width:0}.crowd-hikvision-live-event strong{font-size:.8rem}.crowd-hikvision-live-event small{font-size:.7rem;color:rgba(255,255,255,.72)}
@media(max-width:991.98px){.crowd-hikvision-rule-controls{grid-template-columns:1fr 1fr}.crowd-hikvision-rule-controls .crowd-hikvision-rule-label{grid-column:span 1}}@media(max-width:767.98px){.crowd-hikvision-rule-controls{grid-template-columns:1fr}.crowd-hikvision-rule-controls .crowd-hikvision-rule-label{grid-column:auto}}

/* CM-3R4 · Hikvision operational occupancy */
.crowd-hikvision-operations-grid{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:.75rem}.crowd-hikvision-operations-grid>article{display:flex;flex-direction:column;gap:.28rem;padding:.9rem 1rem;border:1px solid var(--bs-border-color,#dee2e6);border-radius:14px;background:var(--bs-body-bg,#fff);min-width:0}.crowd-hikvision-operations-grid span,.crowd-hikvision-operations-grid small{font-size:.75rem;color:var(--bs-secondary-color,#6c757d)}.crowd-hikvision-operations-grid strong{font-size:1rem;overflow-wrap:anywhere}.crowd-hikvision-operations-grid .crowd-status-pill{width:max-content;max-width:100%}@media(max-width:1199.98px){.crowd-hikvision-operations-grid{grid-template-columns:repeat(3,minmax(0,1fr))}}@media(max-width:767.98px){.crowd-hikvision-operations-grid{grid-template-columns:1fr}}

/* =====================================================================
   Crowd Management CM-3R5 — Near Real-Time Command Center + CCTV vendor
   readiness (Hikvision / Dahua). Secrets are not represented in these UI
   provider settings; they remain in the encrypted credential vault.
   ===================================================================== */
.crowd-live-status-strip {
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:14px;
    margin:0 0 14px;
    padding:10px 13px;
    border:1px solid #dfe8e3;
    border-radius:13px;
    background:linear-gradient(110deg,#f6faf8,#ffffff);
    box-shadow:0 5px 18px rgba(23,35,30,.035);
}
.crowd-live-status-strip > div:first-child { display:flex; align-items:center; gap:8px; min-width:0; }
.crowd-live-status-strip strong { color:var(--crowd-ink); font-size:.72rem; }
.crowd-live-status-strip small { color:var(--crowd-muted); font-size:.63rem; white-space:nowrap; }
.crowd-provider-health { display:flex; align-items:center; justify-content:flex-end; flex-wrap:wrap; gap:6px; }
.crowd-provider-health > span {
    display:inline-flex; align-items:center; gap:5px; min-height:29px; padding:4px 8px;
    border:1px solid #dce5e0; border-radius:999px; background:#fff; color:#54625b;
    font-size:.62rem; font-weight:600;
}
.crowd-provider-health > span i { color:var(--crowd-primary); }
.crowd-provider-health > span b { color:var(--crowd-ink); font-size:.62rem; }
.crowd-sitewide-mode { border-top:0; }

.crowd-live-analytics-panel { margin-bottom:14px; }
.crowd-live-analytics-list { display:grid; padding-top:3px; }
.crowd-live-analytics-row {
    display:grid; grid-template-columns:auto minmax(180px,1fr) auto auto; align-items:center; gap:10px;
    min-height:52px; padding:9px 2px; border-bottom:1px solid #eff2f0;
}
.crowd-live-analytics-row:last-child { border-bottom:0; }
.crowd-live-analytics-row > div:nth-child(2) { min-width:0; }
.crowd-live-analytics-row strong { display:block; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; color:var(--crowd-ink); font-size:.71rem; font-weight:600; }
.crowd-live-analytics-row small { display:block; margin-top:2px; color:var(--crowd-muted); font-size:.61rem; }
.crowd-provider-chip,
.crowd-analytics-type,
.crowd-evidence-flag {
    display:inline-flex; align-items:center; justify-content:center; gap:4px; white-space:nowrap;
    border-radius:999px; min-height:26px; padding:3px 8px; font-size:.6rem; font-weight:700;
}
.crowd-provider-chip { border:1px solid #d9e4de; background:#f2f7f4; color:#426054; }
.crowd-analytics-type { border:1px solid #dfe3f1; background:#f6f6fb; color:#586080; }
.crowd-evidence-flag { border:1px solid #cfe8dd; background:#eff9f4; color:#167858; }

.crowd-provider-settings {
    margin-top:2px;
    padding:14px;
    border:1px solid #dce8e2;
    border-radius:13px;
    background:linear-gradient(140deg,#f6faf8,#fff);
}
.crowd-provider-settings-title { display:flex; align-items:flex-start; gap:10px; margin-bottom:12px; }
.crowd-provider-settings-title > i {
    width:34px; height:34px; flex:0 0 34px; display:grid; place-items:center; border-radius:10px;
    background:color-mix(in srgb,var(--crowd-primary) 10%,#fff); color:var(--crowd-primary);
}
.crowd-provider-settings-title strong { display:block; color:var(--crowd-ink); font-size:.72rem; }
.crowd-provider-settings-title small { display:block; margin-top:3px; color:var(--crowd-muted); font-size:.61rem; line-height:1.5; }

@media (max-width: 800px) {
    .crowd-live-status-strip { align-items:flex-start; flex-direction:column; }
    .crowd-provider-health { justify-content:flex-start; }
    .crowd-live-analytics-row { grid-template-columns:auto minmax(0,1fr); }
    .crowd-live-analytics-row .crowd-analytics-type,
    .crowd-live-analytics-row .crowd-evidence-flag { justify-self:start; }
}

/* --------------------------------------------------------------------------
   Crowd Management CM-3R7.1 — Unified Event Intelligence
   -------------------------------------------------------------------------- */
.crowd-security-intelligence-page{display:flex;flex-direction:column;gap:1rem}
.crowd-security-intelligence-hero{background:linear-gradient(135deg,rgba(17,40,27,.04),rgba(134,214,22,.08))}
.crowd-security-intelligence-kpis{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:.8rem}
.crowd-security-intelligence-kpis .crowd-integration-kpi{min-height:116px}
.crowd-security-provider-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:.75rem}
.crowd-security-provider-grid article{display:flex;flex-direction:column;gap:.35rem;padding:1rem;border:1px solid var(--bs-border-color);border-radius:14px;background:var(--bs-body-bg)}
.crowd-security-provider-grid article span{font-size:.78rem;font-weight:700;color:var(--bs-secondary-color);text-transform:uppercase;letter-spacing:.04em}
.crowd-security-provider-grid article strong{font-size:1.45rem;line-height:1}
.crowd-security-provider-grid article small{color:var(--bs-secondary-color)}
.crowd-security-intelligence-filters{display:grid;grid-template-columns:minmax(260px,2fr) repeat(4,minmax(145px,1fr)) auto;gap:.65rem;align-items:center}
.crowd-security-event-table td>small{display:block;margin-top:.25rem;color:var(--bs-secondary-color)}
.crowd-security-event-table td>strong{font-weight:650}
.crowd-security-evidence{display:flex!important;align-items:center;gap:.25rem;color:#4f7c13!important}
.crowd-security-event-detail h3{font-size:.9rem;margin:1rem 0 .55rem;font-weight:700}
.crowd-security-detail-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:.65rem}
.crowd-security-detail-grid>div{display:flex;flex-direction:column;gap:.25rem;padding:.8rem;border:1px solid var(--bs-border-color);border-radius:12px;background:rgba(127,127,127,.025);min-width:0}
.crowd-security-detail-grid span{font-size:.75rem;color:var(--bs-secondary-color)}
.crowd-security-detail-grid code{overflow-wrap:anywhere;white-space:normal}
.crowd-security-privacy-note{display:flex;align-items:flex-start;gap:.55rem;padding:.8rem 1rem;border:1px solid rgba(25,135,84,.2);border-radius:12px;background:rgba(25,135,84,.045);font-size:.82rem;color:var(--bs-secondary-color)}
.crowd-security-privacy-note i{color:#198754;margin-top:.1rem}
@media(max-width:1400px){.crowd-security-intelligence-kpis{grid-template-columns:repeat(3,minmax(0,1fr))}.crowd-security-intelligence-filters{grid-template-columns:repeat(3,minmax(0,1fr))}.crowd-security-intelligence-filters input{grid-column:span 2}}
@media(max-width:900px){.crowd-security-intelligence-kpis{grid-template-columns:repeat(2,minmax(0,1fr))}.crowd-security-intelligence-filters{grid-template-columns:1fr 1fr}.crowd-security-intelligence-filters input{grid-column:1/-1}.crowd-security-detail-grid{grid-template-columns:1fr 1fr}}
@media(max-width:576px){.crowd-security-intelligence-kpis,.crowd-security-intelligence-filters,.crowd-security-detail-grid{grid-template-columns:1fr}.crowd-security-intelligence-filters input{grid-column:auto}}

/* CM-3R7.2 - correlation situations + secured evidence */
.crowd-security-intelligence-kpis{grid-template-columns:repeat(4,minmax(0,1fr))}
.crowd-security-evidence-link{text-decoration:none;border:1px solid #dbe8c8;border-radius:999px;padding:.18rem .5rem;margin-top:.25rem;width:max-content;background:#fbfff5;transition:background .15s ease,border-color .15s ease,transform .15s ease}
.crowd-security-evidence-link:hover{background:#f0f9df;border-color:#b9d48d;transform:translateY(-1px)}
.crowd-security-situations-panel .crowd-integration-table td{vertical-align:middle}
.crowd-security-situations-panel .crowd-integration-table td strong{display:block}
@media(max-width:1400px){.crowd-security-intelligence-kpis{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media(max-width:900px){.crowd-security-intelligence-kpis{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:576px){.crowd-security-intelligence-kpis{grid-template-columns:1fr}}

/* CM-3R7.3 Security Policy Engine */
.crowd-policy-sequence{max-width:90px}
.crowd-security-policy-page .crowd-panel textarea{font-family:var(--bs-font-monospace);font-size:.82rem}

/* CM-3R7.4 Parking / ANPR / Vehicle Intelligence */
.crowd-parking-page{display:flex;flex-direction:column;gap:1rem}.crowd-parking-hero{background:linear-gradient(135deg,rgba(17,40,27,.04),rgba(37,99,235,.07))}.crowd-parking-kpis{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:.8rem}.crowd-parking-kpis .crowd-integration-kpi{min-height:112px}.crowd-parking-tabs{display:flex;gap:.5rem;flex-wrap:wrap;padding:.45rem;background:var(--bs-body-bg);border:1px solid var(--bs-border-color);border-radius:1rem}.crowd-parking-tabs button{border:0;background:transparent;padding:.7rem 1rem;border-radius:.75rem;font-weight:600;display:flex;gap:.45rem;align-items:center;color:var(--bs-secondary-color)}.crowd-parking-tabs button.active{background:var(--bs-primary);color:#fff}.crowd-parking-area-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1rem}.crowd-parking-area-card{border:1px solid var(--bs-border-color);border-radius:1rem;background:var(--bs-body-bg);padding:1rem;box-shadow:0 8px 24px rgba(15,23,42,.04);display:flex;flex-direction:column;gap:.8rem}.crowd-parking-area-card.warning{border-color:rgba(245,158,11,.5)}.crowd-parking-area-card.critical{border-color:rgba(220,53,69,.55)}.crowd-parking-area-card header{display:flex;justify-content:space-between;gap:1rem;align-items:flex-start}.crowd-parking-area-card header span:first-child{font-size:.75rem;font-weight:700;letter-spacing:.06em;color:var(--bs-secondary-color)}.crowd-parking-area-card h3{font-size:1rem;margin:.15rem 0 0}.crowd-parking-capacity{display:flex;align-items:baseline;gap:.35rem}.crowd-parking-capacity strong{font-size:2rem;line-height:1}.crowd-parking-capacity span{color:var(--bs-secondary-color)}.crowd-parking-card-meta{display:grid;grid-template-columns:repeat(3,1fr);gap:.5rem;font-size:.8rem;color:var(--bs-secondary-color)}.crowd-parking-card-meta span{display:flex;align-items:center;gap:.3rem}.crowd-parking-area-card footer{display:flex;gap:.5rem;border-top:1px solid var(--bs-border-color);padding-top:.75rem}.crowd-parking-editor,.crowd-parking-inline-editor{border-top:3px solid var(--bs-primary)}.crowd-parking-inline-editor{margin:0 0 1rem;padding:1rem;background:rgba(var(--bs-primary-rgb),.025);border-radius:.75rem}.crowd-parking-gate-toolbar{display:flex;align-items:center;gap:.75rem;margin-bottom:1rem}.crowd-parking-gate-toolbar label{font-weight:600;white-space:nowrap}.crowd-parking-gate-toolbar .form-select{max-width:460px}.crowd-plate-chip{display:inline-flex;align-items:center;padding:.28rem .55rem;border-radius:.45rem;background:rgba(var(--bs-primary-rgb),.08);font-family:ui-monospace,SFMono-Regular,Menlo,monospace;letter-spacing:.04em}.risk-success{background:rgba(25,135,84,.12)!important;color:var(--bs-success)!important}.risk-muted{background:rgba(108,117,125,.12)!important;color:var(--bs-secondary-color)!important}@media(max-width:1400px){.crowd-parking-kpis{grid-template-columns:repeat(3,minmax(0,1fr))}.crowd-parking-area-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}@media(max-width:768px){.crowd-parking-kpis,.crowd-parking-area-grid{grid-template-columns:1fr}.crowd-parking-tabs{display:grid;grid-template-columns:1fr 1fr}.crowd-parking-gate-toolbar{align-items:stretch;flex-direction:column}.crowd-parking-gate-toolbar .form-select{max-width:none}.crowd-parking-card-meta{grid-template-columns:1fr}}
\n\n/* CM-3R7.5.1 Face Recognition Provider & Enrollment */
.crowd-face-provider-page{display:flex;flex-direction:column;gap:1rem}
.crowd-face-capability-list{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:.35rem;min-width:250px}
.crowd-face-capability{display:flex;align-items:center;justify-content:space-between;gap:.5rem;padding:.3rem .5rem;border:1px solid var(--bs-border-color);border-radius:.55rem;background:var(--bs-tertiary-bg);font-size:.76rem;white-space:nowrap}
.crowd-face-capability i{font-size:.78rem}.crowd-face-capability.is-supported i{color:var(--bs-success)}.crowd-face-capability.is-unsupported i{color:var(--bs-secondary-color)}
.crowd-face-probe-details .crowd-integration-attempts>div{align-items:start}
.crowd-face-photo-thumb{width:46px;height:46px;object-fit:cover;border-radius:.65rem;border:1px solid var(--bs-border-color);background:var(--bs-tertiary-bg)}
.crowd-face-enrollment-stack{display:flex;flex-direction:column;gap:.3rem}.crowd-face-enrollment-stack small{color:var(--bs-secondary-color)}
.crowd-face-provider-page .crowd-integration-kpi.is-success{border-color:rgba(25,135,84,.35);background:rgba(25,135,84,.045)}
.crowd-face-provider-page .crowd-integration-kpi.is-warning{border-color:rgba(255,193,7,.45);background:rgba(255,193,7,.05)}
.crowd-face-provider-page .crowd-integration-kpi.is-danger{border-color:rgba(220,53,69,.4);background:rgba(220,53,69,.045)}
@media(max-width:768px){.crowd-face-capability-list{grid-template-columns:1fr;min-width:190px}.crowd-face-provider-page .crowd-header-actions{width:100%}.crowd-face-provider-page .crowd-header-actions .btn{flex:1 1 auto}}

/* CM-3R7.5.2A Face Capture Intake
   Uses the shared Crowd panel/KPI/table/status design system. The page intentionally adds no
   separate identity styling because capture is an evidence-intake state, not a recognition result. */

/* ============================================================================
   AI Helpdesk — AIHD-1 Enterprise Service Desk / Microsoft 365 Intake
   ============================================================================ */
.helpdesk-page{display:flex;flex-direction:column;gap:1rem;min-width:0}
.helpdesk-hero{position:relative;overflow:hidden;display:flex;align-items:center;justify-content:space-between;gap:1.25rem;padding:1.45rem 1.55rem;border:1px solid var(--bs-border-color);border-radius:1.1rem;background:linear-gradient(135deg,rgba(var(--bs-primary-rgb),.075),rgba(124,58,237,.055) 48%,rgba(13,202,240,.045));box-shadow:0 12px 34px rgba(15,23,42,.045)}
.helpdesk-hero:after{content:"";position:absolute;inset:auto -55px -75px auto;width:210px;height:210px;border-radius:50%;background:radial-gradient(circle,rgba(var(--bs-primary-rgb),.10),transparent 68%);pointer-events:none}
.helpdesk-hero.is-compact{padding:1.15rem 1.35rem}
.helpdesk-hero h1{font-size:clamp(1.35rem,2vw,2rem);margin:.25rem 0 .35rem;font-weight:700;letter-spacing:-.025em}
.helpdesk-hero p{margin:0;max-width:850px;color:var(--bs-secondary-color);line-height:1.7}
.helpdesk-eyebrow{display:flex;align-items:center;gap:.4rem;font-size:.7rem;font-weight:700;letter-spacing:.09em;color:var(--bs-primary);text-transform:uppercase}
.helpdesk-actions{display:flex;gap:.5rem;flex-wrap:wrap;position:relative;z-index:1}
.helpdesk-actions .btn,.helpdesk-form-footer .btn,.helpdesk-channel-card footer .btn{display:inline-flex;align-items:center;justify-content:center;gap:.4rem}
.helpdesk-loading{display:flex;align-items:center;justify-content:center;gap:.65rem;min-height:150px;border:1px dashed var(--bs-border-color);border-radius:1rem;color:var(--bs-secondary-color)}
.helpdesk-panel{background:var(--bs-body-bg);border:1px solid var(--bs-border-color);border-radius:1rem;padding:1.15rem;box-shadow:0 7px 22px rgba(15,23,42,.035);min-width:0}
.helpdesk-panel-header{display:flex;align-items:flex-start;justify-content:space-between;gap:1rem;margin-bottom:1rem}
.helpdesk-panel-header span:first-child{display:block;font-size:.66rem;font-weight:700;letter-spacing:.075em;color:var(--bs-secondary-color);text-transform:uppercase}
.helpdesk-panel-header h2{font-size:1rem;margin:.15rem 0 0;font-weight:700}
.helpdesk-chip{display:inline-flex!important;align-items:center;gap:.35rem;padding:.35rem .6rem;border:1px solid var(--bs-border-color);border-radius:999px;font-size:.72rem!important;font-weight:600!important;letter-spacing:0!important;text-transform:none!important;color:var(--bs-body-color)!important;background:var(--bs-tertiary-bg)}
.helpdesk-status{display:inline-flex;align-items:center;width:max-content;padding:.28rem .55rem;border-radius:999px;font-size:.72rem;font-weight:700;white-space:nowrap}
.helpdesk-status.is-success{background:rgba(25,135,84,.11);color:#198754}
.helpdesk-status.is-warning{background:rgba(255,193,7,.14);color:#8b6700}
.helpdesk-status.is-danger{background:rgba(220,53,69,.11);color:#dc3545}
.helpdesk-status.is-muted{background:rgba(108,117,125,.11);color:var(--bs-secondary-color)}
.helpdesk-kpi-grid{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:.8rem}
.helpdesk-kpi{display:flex;align-items:center;gap:.85rem;padding:1rem;border:1px solid var(--bs-border-color);border-radius:1rem;background:var(--bs-body-bg);box-shadow:0 7px 20px rgba(15,23,42,.035);min-width:0}
.helpdesk-kpi-icon{display:grid;place-items:center;flex:0 0 42px;width:42px;height:42px;border-radius:.8rem;background:rgba(var(--bs-primary-rgb),.09);color:var(--bs-primary);font-size:1.05rem}
.helpdesk-kpi div{min-width:0}.helpdesk-kpi span{display:block;font-size:.72rem;color:var(--bs-secondary-color);font-weight:600}.helpdesk-kpi strong{display:block;font-size:1.35rem;line-height:1.25;margin-top:.15rem}
.helpdesk-dashboard-grid{display:grid;grid-template-columns:minmax(0,1.35fr) minmax(320px,.65fr);gap:1rem}
.helpdesk-flow{display:flex;align-items:stretch;gap:.55rem;flex-wrap:wrap}
.helpdesk-flow-node{flex:1 1 135px;padding:.85rem;border:1px solid var(--bs-border-color);border-radius:.8rem;background:var(--bs-tertiary-bg)}
.helpdesk-flow-node strong,.helpdesk-flow-node span{display:block}.helpdesk-flow-node span{font-size:.72rem;color:var(--bs-secondary-color);margin-top:.2rem}.helpdesk-flow-arrow{align-self:center;color:var(--bs-secondary-color)}
.helpdesk-channel-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1rem}
.helpdesk-channel-card{display:flex;flex-direction:column;gap:1rem;border:1px solid var(--bs-border-color);border-radius:1rem;background:var(--bs-body-bg);padding:1rem;box-shadow:0 8px 24px rgba(15,23,42,.04);min-width:0}
.helpdesk-channel-card header{display:flex;justify-content:space-between;gap:.85rem;align-items:flex-start}
.helpdesk-channel-card-title{display:flex;align-items:flex-start;gap:.75rem;min-width:0}.helpdesk-channel-card-title>div:last-child{min-width:0}.helpdesk-channel-card-title span{display:block;color:var(--bs-primary);font-size:.68rem;font-weight:700;letter-spacing:.06em}.helpdesk-channel-card-title h2{font-size:.95rem;margin:.15rem 0}.helpdesk-channel-card-title small{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:var(--bs-secondary-color)}
.helpdesk-provider-icon{display:grid;place-items:center;flex:0 0 42px;width:42px;height:42px;border-radius:.8rem;background:rgba(0,120,212,.09);color:#0078d4;font-size:1.1rem}
.helpdesk-channel-card-body{display:grid;grid-template-columns:1fr 1fr;gap:.55rem}.helpdesk-channel-card-body>div{padding:.65rem;border-radius:.7rem;background:var(--bs-tertiary-bg);min-width:0}.helpdesk-channel-card-body span,.helpdesk-channel-card-body strong{display:block}.helpdesk-channel-card-body span{font-size:.68rem;color:var(--bs-secondary-color)}.helpdesk-channel-card-body strong{font-size:.82rem;margin-top:.15rem;overflow-wrap:anywhere}
.helpdesk-channel-timeline{display:flex;flex-direction:column;gap:.35rem;font-size:.74rem;color:var(--bs-secondary-color)}.helpdesk-channel-timeline span{display:flex;align-items:center;gap:.4rem}
.helpdesk-channel-error{display:flex;align-items:flex-start;gap:.45rem;padding:.65rem .7rem;border:1px solid rgba(220,53,69,.2);border-radius:.7rem;background:rgba(220,53,69,.045);color:#b02a37;font-size:.75rem;overflow-wrap:anywhere}
.helpdesk-channel-card footer{display:flex;gap:.45rem;flex-wrap:wrap;border-top:1px solid var(--bs-border-color);padding-top:.8rem;margin-top:auto}
.helpdesk-empty{text-align:center;padding:2.5rem 1rem}.helpdesk-empty>i{font-size:2rem;color:var(--bs-primary)}.helpdesk-empty h3{font-size:1.05rem;margin:.75rem 0 .35rem}.helpdesk-empty p{color:var(--bs-secondary-color)}
.helpdesk-ticket-filters{display:grid;grid-template-columns:minmax(260px,2fr) repeat(2,minmax(160px,1fr)) auto;gap:.65rem;align-items:center}
.helpdesk-table-wrap{overflow:auto}.helpdesk-table{margin-bottom:0;min-width:850px}.helpdesk-table th{font-size:.7rem;text-transform:uppercase;letter-spacing:.05em;color:var(--bs-secondary-color);white-space:nowrap}.helpdesk-table td{vertical-align:middle}.helpdesk-ticket-subject strong{display:block;max-width:430px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.helpdesk-ticket-subject small{display:block;color:var(--bs-secondary-color);margin-top:.2rem}
.helpdesk-badge{display:inline-flex;align-items:center;gap:.25rem;padding:.25rem .5rem;border-radius:999px;background:var(--bs-tertiary-bg);font-size:.72rem;font-weight:650;white-space:nowrap}.helpdesk-badge.is-review{background:rgba(255,193,7,.13);color:#806000}
.helpdesk-pagination{display:flex;align-items:center;justify-content:space-between;gap:1rem;padding-top:.9rem;color:var(--bs-secondary-color);font-size:.8rem}
.helpdesk-form-layout{display:grid;grid-template-columns:minmax(0,1fr) 330px;gap:1rem;align-items:start}.helpdesk-form-main{display:flex;flex-direction:column;gap:1rem}.helpdesk-form-side{min-width:0}.helpdesk-sticky-card{position:sticky;top:1rem}
.helpdesk-security-callout{display:flex;gap:.75rem;align-items:flex-start;padding:.8rem .9rem;border:1px solid rgba(25,135,84,.2);border-radius:.8rem;background:rgba(25,135,84,.045)}.helpdesk-security-callout>i{font-size:1.15rem;color:#198754}.helpdesk-security-callout strong,.helpdesk-security-callout span{display:block}.helpdesk-security-callout strong{font-size:.82rem}.helpdesk-security-callout span{font-size:.75rem;color:var(--bs-secondary-color);margin-top:.2rem;line-height:1.55}
.helpdesk-info-line{display:flex;align-items:flex-start;gap:.45rem;padding:.7rem .8rem;border:1px solid rgba(var(--bs-primary-rgb),.17);border-radius:.7rem;background:rgba(var(--bs-primary-rgb),.035);font-size:.75rem;color:var(--bs-secondary-color)}.helpdesk-info-line i{color:var(--bs-primary);margin-top:.08rem}
.helpdesk-switch-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:.75rem}.helpdesk-switch-card{display:flex;align-items:flex-start;gap:.65rem;padding:.8rem;border:1px solid var(--bs-border-color);border-radius:.8rem;background:var(--bs-tertiary-bg);cursor:pointer}.helpdesk-switch-card .form-check-input{margin-top:.2rem;flex:0 0 auto}.helpdesk-switch-card strong,.helpdesk-switch-card small{display:block}.helpdesk-switch-card strong{font-size:.82rem}.helpdesk-switch-card small{font-size:.72rem;color:var(--bs-secondary-color);margin-top:.2rem;line-height:1.5}
.helpdesk-readiness-list{display:flex;flex-direction:column;gap:.85rem}.helpdesk-readiness-list>div{display:flex;gap:.6rem;align-items:flex-start}.helpdesk-readiness-list>div>i{color:#198754;margin-top:.05rem}.helpdesk-readiness-list strong,.helpdesk-readiness-list small{display:block}.helpdesk-readiness-list strong{font-size:.8rem}.helpdesk-readiness-list small{font-size:.7rem;color:var(--bs-secondary-color);margin-top:.15rem;line-height:1.45}
.helpdesk-health-summary{display:flex;flex-direction:column;gap:.55rem}.helpdesk-health-summary>span{font-size:.72rem;color:var(--bs-secondary-color)}.helpdesk-health-summary>small{color:var(--bs-secondary-color)}
.helpdesk-form-footer{position:sticky;bottom:0;z-index:5;display:flex;justify-content:flex-end;gap:.55rem;padding:.75rem 1rem;border:1px solid var(--bs-border-color);border-radius:.85rem;background:color-mix(in srgb,var(--bs-body-bg) 94%,transparent);backdrop-filter:blur(9px);box-shadow:0 -5px 18px rgba(15,23,42,.04)}
.helpdesk-validation:empty{display:none}.helpdesk-page .validation-message{display:block;color:var(--bs-danger);font-size:.72rem;margin-top:.25rem}.helpdesk-page .form-label{font-size:.78rem;font-weight:600}.helpdesk-page .form-text{font-size:.7rem}
@media(max-width:1400px){.helpdesk-kpi-grid{grid-template-columns:repeat(3,minmax(0,1fr))}.helpdesk-channel-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.helpdesk-form-layout{grid-template-columns:minmax(0,1fr) 290px}}
@media(max-width:1050px){.helpdesk-dashboard-grid,.helpdesk-form-layout{grid-template-columns:1fr}.helpdesk-sticky-card{position:static}.helpdesk-switch-grid{grid-template-columns:1fr 1fr}.helpdesk-ticket-filters{grid-template-columns:1fr 1fr}.helpdesk-ticket-filters>*:first-child{grid-column:1/-1}}
@media(max-width:768px){.helpdesk-hero{align-items:flex-start;flex-direction:column}.helpdesk-actions{width:100%}.helpdesk-actions .btn{flex:1 1 auto}.helpdesk-kpi-grid,.helpdesk-channel-grid{grid-template-columns:1fr 1fr}.helpdesk-switch-grid{grid-template-columns:1fr}.helpdesk-form-footer{position:static}.helpdesk-channel-card footer .btn{flex:1 1 auto}}
@media(max-width:576px){.helpdesk-kpi-grid,.helpdesk-channel-grid,.helpdesk-ticket-filters{grid-template-columns:1fr}.helpdesk-ticket-filters>*:first-child{grid-column:auto}.helpdesk-panel,.helpdesk-hero{padding:.9rem}.helpdesk-channel-card-body{grid-template-columns:1fr}.helpdesk-pagination{align-items:stretch;flex-direction:column}.helpdesk-form-footer .btn{flex:1}}
/* AIHD-1 page component aliases / queue details */
.helpdesk-kpi-grid{grid-template-columns:repeat(5,minmax(0,1fr))}
.helpdesk-kpi-card{position:relative;overflow:hidden;padding:1rem 1.05rem;border:1px solid var(--bs-border-color);border-radius:1rem;background:var(--bs-body-bg);box-shadow:0 7px 20px rgba(15,23,42,.035)}
.helpdesk-kpi-card:before{content:"";position:absolute;inset:0 auto 0 0;width:3px;background:var(--bs-primary)}
.helpdesk-kpi-card.is-success:before{background:var(--bs-success)}.helpdesk-kpi-card.is-warning:before{background:var(--bs-warning)}.helpdesk-kpi-card.is-info:before{background:var(--bs-info)}.helpdesk-kpi-card.is-danger:before{background:var(--bs-danger)}
.helpdesk-kpi-card span,.helpdesk-kpi-card small{display:block;color:var(--bs-secondary-color)}.helpdesk-kpi-card span{font-size:.73rem;font-weight:650}.helpdesk-kpi-card strong{display:block;font-size:1.55rem;line-height:1.25;margin:.18rem 0}.helpdesk-kpi-card small{font-size:.68rem}
.helpdesk-grid-two{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(330px,.85fr);gap:1rem}
.helpdesk-channel-list{display:flex;flex-direction:column;gap:.65rem}.helpdesk-channel-row{display:flex;align-items:center;gap:.7rem;padding:.72rem;border:1px solid var(--bs-border-color);border-radius:.8rem;background:var(--bs-tertiary-bg)}
.helpdesk-channel-icon{display:grid;place-items:center;flex:0 0 38px;width:38px;height:38px;border-radius:.7rem;background:rgba(var(--bs-primary-rgb),.09);color:var(--bs-primary)}.helpdesk-channel-main{flex:1;min-width:0}.helpdesk-channel-main strong,.helpdesk-channel-main span{display:block}.helpdesk-channel-main strong{font-size:.82rem}.helpdesk-channel-main span{font-size:.7rem;color:var(--bs-secondary-color);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.helpdesk-channel-meta{display:flex;flex-direction:column;align-items:flex-end;gap:.25rem}.helpdesk-channel-meta small{font-size:.66rem;color:var(--bs-secondary-color)}
.helpdesk-flow>div{flex:1 1 125px;display:flex;flex-direction:column;gap:.18rem;padding:.8rem;border:1px solid var(--bs-border-color);border-radius:.8rem;background:var(--bs-tertiary-bg)}.helpdesk-flow>div>i{color:var(--bs-primary);font-size:1rem;margin-bottom:.2rem}.helpdesk-flow>div strong{font-size:.8rem}.helpdesk-flow>div span{font-size:.68rem;color:var(--bs-secondary-color)}
.helpdesk-empty.compact{padding:1.3rem}.helpdesk-empty.compact p{margin:0}
.helpdesk-filter-panel{padding:.8rem}.helpdesk-filters{display:grid;grid-template-columns:minmax(280px,2fr) repeat(2,minmax(155px,1fr)) auto auto;gap:.55rem;align-items:center}.helpdesk-filter-search{position:relative}.helpdesk-filter-search>i{position:absolute;left:.75rem;top:50%;transform:translateY(-50%);color:var(--bs-secondary-color);z-index:2}.helpdesk-filter-search .form-control{padding-left:2.25rem}
[dir="rtl"] .helpdesk-filter-search>i{left:auto;right:.75rem}[dir="rtl"] .helpdesk-filter-search .form-control{padding-left:.75rem;padding-right:2.25rem}
.helpdesk-total-badge{padding:.3rem .55rem;border-radius:999px;background:var(--bs-tertiary-bg);font-size:.72rem;font-weight:650;color:var(--bs-secondary-color)}
.helpdesk-ticket-no{display:flex;align-items:center;gap:.35rem;font-weight:700;white-space:nowrap}.helpdesk-ai-dot{display:inline-block;width:7px;height:7px;border-radius:50%;background:#7c3aed;box-shadow:0 0 0 3px rgba(124,58,237,.12)}.helpdesk-subject{max-width:410px;font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.helpdesk-linked-records{display:flex;gap:.35rem;flex-wrap:wrap}.helpdesk-linked-records .btn{display:inline-flex;align-items:center;gap:.25rem;font-size:.7rem}
.helpdesk-status.is-info{background:rgba(13,202,240,.12);color:#087990}.helpdesk-status.is-ai{background:rgba(124,58,237,.11);color:#6d28d9}.helpdesk-status.is-primary{background:rgba(var(--bs-primary-rgb),.11);color:var(--bs-primary)}
@media(max-width:1200px){.helpdesk-kpi-grid{grid-template-columns:repeat(3,minmax(0,1fr))}.helpdesk-grid-two{grid-template-columns:1fr}.helpdesk-filters{grid-template-columns:1fr 1fr 1fr}.helpdesk-filter-search{grid-column:1/-1}}
@media(max-width:768px){.helpdesk-kpi-grid{grid-template-columns:1fr 1fr}.helpdesk-filters{grid-template-columns:1fr 1fr}.helpdesk-filter-search{grid-column:1/-1}.helpdesk-channel-row{align-items:flex-start}.helpdesk-channel-meta{align-items:flex-start}}
@media(max-width:576px){.helpdesk-kpi-grid,.helpdesk-filters{grid-template-columns:1fr}.helpdesk-filter-search{grid-column:auto}.helpdesk-channel-row{flex-wrap:wrap}.helpdesk-channel-main{min-width:180px}.helpdesk-channel-meta{width:100%;padding-left:46px}[dir="rtl"] .helpdesk-channel-meta{padding-left:0;padding-right:46px}}

/* =========================================================
   AI Helpdesk AIHD-1.1 · Multi-provider email onboarding
   ========================================================= */
.helpdesk-provider-choice-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:1rem}
.helpdesk-provider-choice{display:grid;grid-template-columns:54px minmax(0,1fr) auto;align-items:center;gap:1rem;width:100%;min-height:126px;padding:1rem 1.05rem;border:1px solid var(--bs-border-color);border-radius:1rem;background:var(--bs-body-bg);color:inherit;text-align:start;transition:border-color .18s ease,transform .18s ease,box-shadow .18s ease}
.helpdesk-provider-choice:hover{transform:translateY(-2px);border-color:rgba(87,199,0,.55);box-shadow:0 14px 28px rgba(15,23,42,.08)}
.helpdesk-provider-choice>i{font-size:1.05rem;color:var(--bs-secondary-color)}
.helpdesk-provider-choice-icon{display:grid;place-items:center;width:54px;height:54px;border-radius:1rem;font-size:1.3rem;background:rgba(15,23,42,.06)}
.helpdesk-provider-choice-icon.is-microsoft,.helpdesk-provider-icon.is-microsoft{background:rgba(0,120,212,.09);color:#0078d4}
.helpdesk-provider-choice-icon.is-google,.helpdesk-provider-icon.is-google{background:rgba(66,133,244,.09);color:#4285f4}
.helpdesk-provider-choice-icon.is-smarter,.helpdesk-provider-icon.is-smarter{background:rgba(87,199,0,.11);color:#3c8d00}
.helpdesk-provider-choice-icon.is-generic,.helpdesk-provider-icon.is-generic{background:rgba(99,102,241,.09);color:#6366f1}
.helpdesk-provider-choice-content{display:flex;min-width:0;flex-direction:column;gap:.28rem}
.helpdesk-provider-choice-content strong{font-size:1rem;font-weight:700}
.helpdesk-provider-choice-content small{font-size:.79rem;color:var(--bs-secondary-color)}
.helpdesk-provider-choice-content em{font-size:.77rem;font-style:normal;color:var(--bs-secondary-color);line-height:1.45}
.helpdesk-provider-foundation{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:.8rem;margin-top:1rem}
.helpdesk-provider-foundation>div{display:flex;gap:.75rem;align-items:flex-start;padding:.9rem 1rem;border:1px solid var(--bs-border-color);border-radius:.9rem;background:var(--bs-body-bg)}
.helpdesk-provider-foundation>div>i{margin-top:.1rem;color:#57c700;font-size:1.05rem}
.helpdesk-provider-foundation span{display:flex;flex-direction:column;gap:.2rem}.helpdesk-provider-foundation strong{font-size:.85rem}.helpdesk-provider-foundation small{font-size:.75rem;color:var(--bs-secondary-color);line-height:1.45}
.helpdesk-inline-check{display:flex;align-items:center;gap:.65rem;min-height:38px;margin:0;padding:.45rem .6rem;border:1px solid var(--bs-border-color);border-radius:.65rem;background:rgba(15,23,42,.02);font-size:.82rem;font-weight:600}
@media(max-width:900px){.helpdesk-provider-choice-grid{grid-template-columns:1fr}.helpdesk-provider-foundation{grid-template-columns:1fr}}
@media(max-width:576px){.helpdesk-provider-choice{grid-template-columns:44px minmax(0,1fr) auto;padding:.85rem}.helpdesk-provider-choice-icon{width:44px;height:44px;border-radius:.8rem}}

/* AI Helpdesk AIHD-1.2 - secure ticket conversation and attachment evidence */
.helpdesk-ticket-link,.helpdesk-subject-link{appearance:none;border:0;background:transparent;padding:0;margin:0;text-align:inherit;color:inherit;cursor:pointer}.helpdesk-ticket-link{display:flex;flex-direction:column;align-items:flex-start;gap:.15rem}.helpdesk-ticket-link:hover .helpdesk-ticket-no,.helpdesk-subject-link:hover{color:var(--bs-primary)}.helpdesk-ticket-heading{display:flex;align-items:center;gap:.75rem;flex-wrap:wrap}.helpdesk-ticket-heading h1{margin:0}.helpdesk-ticket-title{font-size:1rem!important;font-weight:600!important;color:var(--bs-body-color)!important;margin-top:.5rem!important}.helpdesk-ticket-overview{display:grid;grid-template-columns:minmax(0,1fr) 320px;gap:1rem}.helpdesk-detail-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:.75rem}.helpdesk-detail-grid>div{display:flex;flex-direction:column;gap:.2rem;padding:.8rem;border:1px solid var(--bs-border-color);border-radius:.8rem;background:rgba(var(--bs-body-bg-rgb),.55)}.helpdesk-detail-grid span{font-size:.67rem;font-weight:700;text-transform:uppercase;letter-spacing:.04em;color:var(--bs-secondary-color)}.helpdesk-detail-grid strong{font-size:.88rem}.helpdesk-detail-grid small{font-size:.7rem;color:var(--bs-secondary-color);overflow-wrap:anywhere}.helpdesk-guardrail-list{display:flex;flex-direction:column;gap:.85rem}.helpdesk-guardrail-list>div{display:flex;gap:.65rem;align-items:flex-start}.helpdesk-guardrail-list>div>i{color:#1c9b65;margin-top:.15rem}.helpdesk-guardrail-list span{display:flex;flex-direction:column;gap:.15rem}.helpdesk-guardrail-list strong{font-size:.78rem}.helpdesk-guardrail-list small{font-size:.68rem;line-height:1.45;color:var(--bs-secondary-color)}.helpdesk-conversation{display:flex;flex-direction:column;gap:1rem}.helpdesk-message-card{display:grid;grid-template-columns:42px minmax(0,1fr);gap:.75rem;padding:1rem;border:1px solid var(--bs-border-color);border-radius:1rem;background:var(--bs-body-bg)}.helpdesk-message-card.is-inbound{border-inline-start:3px solid #0ea5e9}.helpdesk-message-card.is-outbound{border-inline-start:3px solid #84cc16}.helpdesk-message-avatar{width:42px;height:42px;border-radius:.85rem;display:grid;place-items:center;background:rgba(14,165,233,.09);color:#0284c7;font-size:1rem}.helpdesk-message-card.is-outbound .helpdesk-message-avatar{background:rgba(132,204,22,.12);color:#4d7c0f}.helpdesk-message-content{min-width:0}.helpdesk-message-head{display:flex;justify-content:space-between;gap:1rem;align-items:flex-start}.helpdesk-message-head>div{display:flex;flex-direction:column;min-width:0}.helpdesk-message-head strong{font-size:.83rem}.helpdesk-message-head span,.helpdesk-message-head time{font-size:.68rem;color:var(--bs-secondary-color);overflow-wrap:anywhere}.helpdesk-message-subject{font-weight:700;font-size:.9rem;margin-top:.75rem}.helpdesk-message-body{margin-top:.55rem;white-space:pre-wrap;overflow-wrap:anywhere;font-size:.82rem;line-height:1.65;color:var(--bs-body-color)}.helpdesk-attachment-zone{margin-top:1rem;padding-top:.85rem;border-top:1px dashed var(--bs-border-color)}.helpdesk-attachment-zone-title{display:flex;align-items:center;gap:.35rem;font-size:.72rem;font-weight:700;color:var(--bs-secondary-color);margin-bottom:.65rem}.helpdesk-attachment-list{display:flex;flex-direction:column;gap:.55rem}.helpdesk-attachment-card{display:grid;grid-template-columns:38px minmax(0,1fr) auto;gap:.65rem;align-items:center;padding:.7rem;border:1px solid var(--bs-border-color);border-radius:.8rem;background:rgba(var(--bs-tertiary-bg-rgb),.55)}.helpdesk-attachment-icon{width:38px;height:38px;border-radius:.65rem;display:grid;place-items:center;background:var(--bs-body-bg);border:1px solid var(--bs-border-color);font-size:1rem}.helpdesk-attachment-main{min-width:0}.helpdesk-attachment-main>strong{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:.78rem}.helpdesk-attachment-meta,.helpdesk-attachment-evidence{display:flex;align-items:center;gap:.45rem;flex-wrap:wrap;margin-top:.25rem}.helpdesk-attachment-meta span{font-size:.64rem;color:var(--bs-secondary-color)}.helpdesk-attachment-meta span+span:before{content:"·";margin-inline-end:.45rem}.helpdesk-security-state{display:inline-flex;align-items:center;gap:.25rem;border-radius:999px;padding:.18rem .45rem;font-size:.62rem;font-weight:700}.helpdesk-security-state.is-clean{background:rgba(34,197,94,.12);color:#15803d}.helpdesk-security-state.is-warning{background:rgba(245,158,11,.13);color:#b45309}.helpdesk-security-state.is-blocked{background:rgba(239,68,68,.12);color:#b91c1c}.helpdesk-security-state.is-pending{background:rgba(14,165,233,.11);color:#0369a1}.helpdesk-attachment-evidence code{font-size:.6rem;color:var(--bs-secondary-color);background:var(--bs-body-bg);border:1px solid var(--bs-border-color);border-radius:.35rem;padding:.15rem .3rem}.helpdesk-duplicate-badge{font-size:.61rem;color:#7c3aed;display:inline-flex;gap:.2rem;align-items:center}.helpdesk-attachment-reason,.helpdesk-malware-signature{display:block;margin-top:.35rem;font-size:.64rem;color:#b45309;overflow-wrap:anywhere}.helpdesk-malware-signature{color:#b91c1c}.helpdesk-attachment-actions{display:flex;align-items:center}.helpdesk-attachment-actions .btn{white-space:nowrap;font-size:.68rem}.helpdesk-attachment-actions .btn i{margin-inline-end:.25rem}
@media (max-width:1199.98px){.helpdesk-ticket-overview{grid-template-columns:1fr}.helpdesk-detail-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:767.98px){.helpdesk-detail-grid{grid-template-columns:1fr}.helpdesk-message-card{grid-template-columns:1fr}.helpdesk-message-avatar{display:none}.helpdesk-message-head{flex-direction:column;gap:.3rem}.helpdesk-attachment-card{grid-template-columns:34px minmax(0,1fr)}.helpdesk-attachment-actions{grid-column:1/-1}.helpdesk-attachment-actions .btn{width:100%;justify-content:center}}

/* AIHD-1.3 - governed outbound conversation */
.helpdesk-reply-grid{display:grid;grid-template-columns:minmax(0,1.35fr) minmax(320px,.65fr);gap:1rem}.helpdesk-reply-panel,.helpdesk-delivery-panel{min-width:0}.helpdesk-outbound-chip{display:inline-flex;align-items:center;gap:.35rem;border-radius:999px;padding:.35rem .65rem;font-size:.68rem;font-weight:700;border:1px solid var(--bs-border-color)}.helpdesk-outbound-chip.is-ready{background:rgba(34,197,94,.1);color:#15803d;border-color:rgba(34,197,94,.25)}.helpdesk-outbound-chip.is-locked{background:rgba(148,163,184,.1);color:var(--bs-secondary-color)}.helpdesk-reply-notice{display:flex;gap:.75rem;align-items:flex-start;padding:.85rem 1rem;border-radius:.8rem;border:1px solid var(--bs-border-color);background:rgba(var(--bs-tertiary-bg-rgb),.45)}.helpdesk-reply-notice.is-warning{border-color:rgba(245,158,11,.28);background:rgba(245,158,11,.07)}.helpdesk-reply-notice>i{font-size:1rem;color:#b45309;margin-top:.1rem}.helpdesk-reply-notice>div{display:flex;flex-direction:column;gap:.15rem}.helpdesk-reply-notice strong{font-size:.78rem}.helpdesk-reply-notice span{font-size:.7rem;line-height:1.5;color:var(--bs-secondary-color)}.helpdesk-reply-route{display:grid;grid-template-columns:1fr 1fr;gap:.65rem;margin-bottom:.8rem}.helpdesk-reply-route>div{display:flex;flex-direction:column;gap:.15rem;padding:.65rem .75rem;border:1px solid var(--bs-border-color);border-radius:.75rem;background:rgba(var(--bs-tertiary-bg-rgb),.4);min-width:0}.helpdesk-reply-route span{font-size:.62rem;text-transform:uppercase;letter-spacing:.04em;font-weight:700;color:var(--bs-secondary-color)}.helpdesk-reply-route strong,.helpdesk-reply-route small{overflow-wrap:anywhere}.helpdesk-reply-route strong{font-size:.76rem}.helpdesk-reply-route small{font-size:.64rem;color:var(--bs-secondary-color)}.helpdesk-reply-form{display:flex;flex-direction:column;gap:.75rem}.helpdesk-reply-editor textarea{resize:vertical;min-height:150px;font-size:.82rem;line-height:1.6}.helpdesk-reply-editor-footer{display:flex;justify-content:space-between;gap:.5rem;margin-top:.35rem;font-size:.64rem;color:var(--bs-secondary-color)}.helpdesk-reply-editor-footer .validation-message{color:#b91c1c}.helpdesk-reply-governance{display:flex;gap:.5rem;flex-wrap:wrap}.helpdesk-reply-governance span{display:inline-flex;align-items:center;gap:.3rem;border:1px solid var(--bs-border-color);border-radius:999px;padding:.28rem .5rem;font-size:.62rem;color:var(--bs-secondary-color);background:rgba(var(--bs-tertiary-bg-rgb),.4)}.helpdesk-reply-governance i{color:#15803d}.helpdesk-reply-actions{display:flex;justify-content:flex-end;gap:.5rem}.helpdesk-reply-actions .btn{display:inline-flex;align-items:center;gap:.35rem}.helpdesk-delivery-list{display:flex;flex-direction:column;gap:.6rem}.helpdesk-delivery-item{display:grid;grid-template-columns:34px minmax(0,1fr);gap:.6rem;padding:.7rem;border:1px solid var(--bs-border-color);border-radius:.8rem;background:rgba(var(--bs-tertiary-bg-rgb),.35);border-inline-start-width:3px}.helpdesk-delivery-item.is-sent{border-inline-start-color:#22c55e}.helpdesk-delivery-item.is-processing{border-inline-start-color:#0ea5e9}.helpdesk-delivery-item.is-uncertain{border-inline-start-color:#f59e0b}.helpdesk-delivery-item.is-failed{border-inline-start-color:#ef4444}.helpdesk-delivery-item.is-queued{border-inline-start-color:#94a3b8}.helpdesk-delivery-status-icon{width:34px;height:34px;border-radius:.65rem;display:grid;place-items:center;background:var(--bs-body-bg);border:1px solid var(--bs-border-color);color:var(--bs-secondary-color)}.helpdesk-delivery-main{min-width:0;display:flex;flex-direction:column;gap:.25rem}.helpdesk-delivery-main>div{display:flex;align-items:center;justify-content:space-between;gap:.5rem}.helpdesk-delivery-main strong{font-size:.74rem}.helpdesk-delivery-main time,.helpdesk-delivery-main small{font-size:.62rem;color:var(--bs-secondary-color)}.helpdesk-delivery-note{display:block;font-size:.61rem;line-height:1.45;overflow-wrap:anywhere}.helpdesk-delivery-note.is-success{color:#15803d}.helpdesk-delivery-note.is-warning{color:#b45309}.helpdesk-delivery-note.is-danger{color:#b91c1c}.helpdesk-delivery-note i{margin-inline-end:.25rem}
@media (max-width:1199.98px){.helpdesk-reply-grid{grid-template-columns:1fr}}@media (max-width:767.98px){.helpdesk-reply-route{grid-template-columns:1fr}.helpdesk-reply-actions{flex-direction:column-reverse}.helpdesk-reply-actions .btn{width:100%;justify-content:center}.helpdesk-delivery-main>div{align-items:flex-start;flex-direction:column;gap:.1rem}}

/* AIHD-1.3.1 - secure media preview + scanner-aware evidence controls */
.helpdesk-attachment-card.has-preview{grid-template-columns:92px minmax(0,1fr) auto;align-items:stretch}.helpdesk-attachment-preview{position:relative;width:92px;min-height:72px;border-radius:.7rem;overflow:hidden;border:1px solid var(--bs-border-color);background:var(--bs-body-bg);display:block}.helpdesk-attachment-preview img{width:100%;height:100%;min-height:72px;max-height:92px;object-fit:cover;display:block}.helpdesk-attachment-preview span{position:absolute;inset:auto .3rem .3rem .3rem;display:flex;align-items:center;justify-content:center;gap:.25rem;border-radius:.45rem;padding:.2rem .35rem;background:rgba(15,23,42,.78);color:#fff;font-size:.58rem;font-weight:700;backdrop-filter:blur(4px)}.helpdesk-attachment-actions{gap:.35rem;flex-wrap:wrap;justify-content:flex-end}.helpdesk-attachment-actions .spinner-border{width:.7rem;height:.7rem;border-width:.1rem}.helpdesk-evidence-policy .helpdesk-guardrail-list>div:nth-last-child(1)>i.bi-x-circle{color:#dc2626}.helpdesk-evidence-policy .helpdesk-guardrail-list>div:nth-last-child(1)>i.bi-exclamation-triangle{color:#d97706}.helpdesk-evidence-policy .helpdesk-guardrail-list>div:nth-last-child(1)>i.bi-question-circle{color:#64748b}
@media (max-width:767.98px){.helpdesk-attachment-card.has-preview{grid-template-columns:72px minmax(0,1fr)}.helpdesk-attachment-preview{width:72px;min-height:64px}.helpdesk-attachment-preview img{min-height:64px}.helpdesk-attachment-actions{grid-column:1/-1;justify-content:stretch}.helpdesk-attachment-actions .btn{flex:1}}
.helpdesk-mini-stat{height:100%;padding:.9rem 1rem;border:1px solid var(--bs-border-color);border-radius:.85rem;background:var(--bs-tertiary-bg)}
.helpdesk-mini-stat span{display:block;color:var(--bs-secondary-color);font-size:.72rem;font-weight:600;text-transform:uppercase;letter-spacing:.05em}
.helpdesk-mini-stat strong{display:block;margin-top:.2rem;font-size:1.35rem;font-weight:700}

/* AIHD-3.0.1 · governed triage review & decision UX */
.aihd-triage-state-strip{display:flex;align-items:center;justify-content:space-between;gap:1rem;padding:.8rem .9rem;margin-bottom:1rem;border:1px solid var(--bs-border-color);border-radius:.85rem;background:rgba(var(--bs-tertiary-bg-rgb),.5)}
.aihd-triage-state-main{display:flex;align-items:center;gap:.75rem;min-width:0}.aihd-triage-state-main>div{display:flex;flex-direction:column;gap:.12rem;min-width:0}.aihd-triage-state-main strong{font-size:.78rem}.aihd-triage-state-main small{font-size:.68rem;color:var(--bs-secondary-color)}
.aihd-job-state{font-size:.65rem;font-weight:700;padding:.28rem .5rem;border:1px solid var(--bs-border-color);border-radius:999px;color:var(--bs-secondary-color);white-space:nowrap}
.aihd-review-editor{padding:1rem;border:1px solid rgba(132,204,22,.35);border-radius:1rem;background:linear-gradient(135deg,rgba(132,204,22,.06),rgba(14,165,233,.035))}
.aihd-review-editor-head{display:flex;align-items:flex-start;justify-content:space-between;gap:1rem;margin-bottom:1rem}.aihd-review-editor-head>div{display:flex;flex-direction:column}.aihd-review-editor-head span{font-size:.64rem;font-weight:800;letter-spacing:.08em;color:var(--bs-secondary-color)}.aihd-review-editor-head h3{font-size:1rem;margin:.1rem 0 0}
.aihd-threshold-warning{display:inline-flex!important;align-items:center;gap:.35rem!important;padding:.3rem .55rem;border-radius:999px;background:rgba(245,158,11,.12);color:#b45309!important;letter-spacing:0!important;white-space:nowrap}
.aihd-review-actions{display:flex;justify-content:flex-end;gap:.6rem;flex-wrap:wrap;margin-top:1rem;padding-top:.85rem;border-top:1px dashed var(--bs-border-color)}
.aihd-duplicate-review{display:flex;justify-content:space-between;gap:1rem;align-items:center;padding:.85rem 1rem;border:1px solid rgba(124,58,237,.24);border-radius:.9rem;background:rgba(124,58,237,.045)}.aihd-duplicate-review>div:first-child{display:flex;flex-direction:column;gap:.12rem}.aihd-duplicate-review span{font-size:.62rem;font-weight:800;letter-spacing:.08em;color:#7c3aed}.aihd-duplicate-review strong{font-size:.9rem}.aihd-duplicate-review small{font-size:.68rem;color:var(--bs-secondary-color)}
.aihd-review-evidence{display:grid;grid-template-columns:36px minmax(0,1fr);gap:.65rem;align-items:start;padding:.75rem .85rem;border:1px solid rgba(34,197,94,.22);border-radius:.8rem;background:rgba(34,197,94,.045)}.aihd-review-evidence>i{width:36px;height:36px;border-radius:.65rem;display:grid;place-items:center;background:rgba(34,197,94,.11);color:#15803d}.aihd-review-evidence>div{display:flex;flex-direction:column;gap:.12rem}.aihd-review-evidence strong{font-size:.78rem}.aihd-review-evidence small{font-size:.65rem;color:var(--bs-secondary-color)}.aihd-review-evidence p{font-size:.7rem;margin:.3rem 0 0;color:var(--bs-secondary-color)}
.helpdesk-status.is-ai{background:rgba(124,58,237,.1);color:#6d28d9}.helpdesk-status.is-danger{background:rgba(239,68,68,.1);color:#b91c1c}
@media (max-width:767.98px){.aihd-triage-state-strip,.aihd-duplicate-review,.aihd-review-editor-head{align-items:stretch;flex-direction:column}.aihd-review-actions .btn,.aihd-duplicate-review .btn{width:100%}}

/* AIHD-3.2.6 Asset & Location Resolution Intelligence */
.aihd-resolution-review{padding:1rem;border:1px solid rgba(14,165,233,.24);border-radius:1rem;background:linear-gradient(135deg,rgba(14,165,233,.055),rgba(99,102,241,.035))}
.aihd-resolution-head{display:flex;align-items:flex-start;justify-content:space-between;gap:1rem}.aihd-resolution-head>div:first-child{display:flex;flex-direction:column}.aihd-resolution-head span{font-size:.68rem;font-weight:800;letter-spacing:.06em}.aihd-resolution-head h3{font-size:1rem;margin:.12rem 0}.aihd-resolution-head small{color:var(--bs-secondary-color)}
.aihd-resolution-group{height:100%;padding:.85rem;border:1px solid var(--bs-border-color);border-radius:.85rem;background:var(--bs-body-bg)}
.aihd-resolution-group-title{display:flex;align-items:center;justify-content:space-between;gap:.75rem;padding-bottom:.65rem;margin-bottom:.35rem;border-bottom:1px solid var(--bs-border-color)}.aihd-resolution-group-title span{font-weight:700}.aihd-resolution-group-title i{margin-inline-end:.4rem}
.aihd-resolution-candidate{display:flex;align-items:center;justify-content:space-between;gap:.75rem;padding:.65rem 0;border-bottom:1px dashed var(--bs-border-color)}.aihd-resolution-candidate:last-child{border-bottom:0}.aihd-resolution-candidate>div{min-width:0;display:flex;flex-direction:column}.aihd-resolution-candidate strong{font-size:.88rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.aihd-resolution-candidate small{font-size:.72rem;color:var(--bs-secondary-color);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.aihd-resolution-evidence-hash{margin-top:.75rem;padding-top:.7rem;border-top:1px dashed var(--bs-border-color);font-size:.72rem;color:var(--bs-secondary-color);word-break:break-all}.aihd-resolution-evidence-hash i{margin-inline-end:.35rem}
@media (max-width:767.98px){.aihd-resolution-head,.aihd-resolution-candidate{align-items:stretch;flex-direction:column}.aihd-resolution-candidate .btn{width:100%}}


/* AIHD-3.2.6 - ordered Asset -> Location resolution summary */
.aihd-resolution-selection-summary {
    height: 100%;
    padding: 0.85rem 1rem;
    border: 1px solid var(--bs-border-color);
    border-radius: 0.75rem;
    background: var(--bs-body-bg);
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}

.aihd-resolution-selection-summary > span {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    font-size: 0.78rem;
    font-weight: 600;
    color: var(--bs-secondary-color);
}

.aihd-resolution-selection-summary > strong {
    font-size: 0.95rem;
}

.aihd-resolution-selection-summary > small {
    color: var(--bs-secondary-color);
}

/* AIHD-3.2.8 · structured triage explanation & evidence */
.aihd-explanation-panel{padding:1rem;border:1px solid rgba(99,102,241,.24);border-radius:1rem;background:linear-gradient(135deg,rgba(99,102,241,.055),rgba(14,165,233,.035))}
.aihd-explanation-head{display:flex;align-items:flex-start;justify-content:space-between;gap:1rem}.aihd-explanation-head>div:first-child{display:flex;flex-direction:column;min-width:0}.aihd-explanation-head>div:first-child>span{display:inline-flex;align-items:center;gap:.35rem;font-size:.68rem;font-weight:800;letter-spacing:.06em;color:#4f46e5}.aihd-explanation-head h3{font-size:1rem;margin:.12rem 0}.aihd-explanation-head small{font-size:.72rem;line-height:1.5;color:var(--bs-secondary-color);max-width:860px}
.aihd-explanation-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:.75rem}.aihd-explanation-card{min-width:0;display:flex;flex-direction:column;border:1px solid var(--bs-border-color);border-radius:.9rem;background:var(--bs-body-bg);overflow:hidden}.aihd-explanation-card.requires-review{border-color:rgba(245,158,11,.42)}
.aihd-explanation-card-head{display:flex;align-items:flex-start;justify-content:space-between;gap:.75rem;padding:.8rem .85rem;border-bottom:1px solid var(--bs-border-color)}.aihd-explanation-field{display:flex;align-items:flex-start;gap:.6rem;min-width:0}.aihd-explanation-field>i{width:34px;height:34px;display:grid;place-items:center;flex:0 0 auto;border-radius:.65rem;background:rgba(99,102,241,.1);color:#4f46e5}.aihd-explanation-field>div{display:flex;flex-direction:column;min-width:0}.aihd-explanation-field span{font-size:.64rem;font-weight:700;text-transform:uppercase;letter-spacing:.04em;color:var(--bs-secondary-color)}.aihd-explanation-field strong{font-size:.85rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.aihd-explanation-confidence{font-size:.86rem;color:#4f46e5;white-space:nowrap}
.aihd-explanation-reason{padding:.75rem .85rem}.aihd-explanation-reason>.badge{margin-inline-end:.3rem;margin-bottom:.45rem}.aihd-explanation-reason p{font-size:.74rem;line-height:1.55;margin:.15rem 0 .45rem;color:var(--bs-body-color)}.aihd-explanation-reason code{display:inline-block;max-width:100%;font-size:.62rem;overflow-wrap:anywhere;color:var(--bs-secondary-color);background:rgba(var(--bs-tertiary-bg-rgb),.55);border:1px solid var(--bs-border-color);border-radius:.4rem;padding:.18rem .35rem}
.aihd-explanation-facts{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0;border-top:1px dashed var(--bs-border-color);margin-top:auto}.aihd-explanation-facts>div{display:flex;flex-direction:column;gap:.08rem;min-width:0;padding:.55rem .7rem;border-bottom:1px dashed var(--bs-border-color)}.aihd-explanation-facts>div:nth-child(odd){border-inline-end:1px dashed var(--bs-border-color)}.aihd-explanation-facts span{font-size:.59rem;color:var(--bs-secondary-color)}.aihd-explanation-facts strong{font-size:.67rem;overflow-wrap:anywhere}
.aihd-explanation-card footer{display:flex;align-items:center;justify-content:space-between;gap:.5rem;padding:.5rem .7rem;font-size:.58rem;color:var(--bs-secondary-color);background:rgba(var(--bs-tertiary-bg-rgb),.35)}.aihd-explanation-card footer span{display:inline-flex;align-items:center;gap:.25rem;min-width:0;overflow-wrap:anywhere}
@media (max-width:991.98px){.aihd-explanation-grid{grid-template-columns:1fr}}@media (max-width:767.98px){.aihd-explanation-head{flex-direction:column;align-items:stretch}.aihd-explanation-facts{grid-template-columns:1fr}.aihd-explanation-facts>div:nth-child(odd){border-inline-end:0}}