/* --- CRITICAL: ROOT SCROLL & LAYOUT INTEGRITY --- */
html {
    font-size: 14px;
    scroll-behavior: smooth;
    min-height: 100%;
    height: auto !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
}

@media (min-width: 768px) {
    html {
        font-size: 15px;
    }
}

body {
    font-family: 'Cairo', 'Inter', system-ui, -apple-system, sans-serif;
    color: var(--admin-text-primary, #F8FAFC);
    background-color: var(--admin-bg, #0D1B2A);
    -webkit-font-smoothing: antialiased;
    min-height: 100vh;
    height: auto !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
    position: relative;
    margin: 0;
    padding: 0;
}

/* Sidebar structure & independent scroll */
#adminSidebar {
    position: fixed !important;
    top: 0 !important;
    bottom: 0 !important;
    height: 100vh !important;
    z-index: 50 !important;
    display: flex !important;
    flex-direction: column !important;
    width: 16rem;
    overflow: hidden !important;
    background-color: var(--admin-sidebar-bg, #0A1728) !important;
}

html[dir="rtl"] #adminSidebar {
    right: 0 !important;
    left: auto !important;
    border-left: 1px solid var(--admin-sidebar-border, rgba(148, 163, 184, 0.14)) !important;
    border-right: none !important;
}

html[dir="ltr"] #adminSidebar {
    left: 0 !important;
    right: auto !important;
    border-right: 1px solid var(--admin-sidebar-border, rgba(148, 163, 184, 0.14)) !important;
    border-left: none !important;
}

/* Sleek thin scrollbar for sidebar */
.sidebar-scroll {
    overflow-y: auto !important;
    overscroll-behavior: contain !important;
    scrollbar-width: thin !important;
    scrollbar-color: rgba(148, 163, 184, 0.20) var(--admin-sidebar-bg, #0A1728) !important;
}

.sidebar-scroll::-webkit-scrollbar {
    width: 5px !important;
}

.sidebar-scroll::-webkit-scrollbar-track {
    background: var(--admin-sidebar-bg, #0A1728) !important;
}

.sidebar-scroll::-webkit-scrollbar-thumb {
    background: rgba(148, 163, 184, 0.20) !important;
    border-radius: 9999px !important;
}

.sidebar-scroll::-webkit-scrollbar-thumb:hover {
    background: rgba(96, 165, 250, 0.40) !important;
}

/* Main content wrapper with exact non-overflowing dimensions */
#mainWrapper {
    min-height: 100vh !important;
    height: auto !important;
    display: flex !important;
    flex-direction: column !important;
    flex: 1 0 auto !important;
    overflow-x: hidden !important;
    overflow-y: visible !important;
    width: 100%;
}

@media (min-width: 1024px) {
    html[dir="rtl"] #mainWrapper {
        margin-right: 16rem !important;
        margin-left: 0 !important;
        width: calc(100% - 16rem) !important;
        max-width: calc(100% - 16rem) !important;
    }
    html[dir="ltr"] #mainWrapper {
        margin-left: 16rem !important;
        margin-right: 0 !important;
        width: calc(100% - 16rem) !important;
        max-width: calc(100% - 16rem) !important;
    }
}

main {
    flex: 1 0 auto !important;
    min-height: 0;
    width: 100% !important;
    box-sizing: border-box !important;
}

:root {
    --grc-primary: var(--color-primary, #1D4ED8);
    --grc-primary-hover: var(--color-primary-hover, #1E40AF);
    --grc-primary-light: var(--color-primary-light, #EFF6FF);
    --grc-slate-900: var(--color-secondary, #0F172A);
    --grc-slate-800: var(--color-secondary-hover, #1E293B);
    --grc-slate-700: var(--color-text-secondary, #334155);
    --grc-slate-600: #475569;
    --grc-slate-500: var(--color-text-muted, #64748B);
    --grc-slate-400: #94A3B8;
    --grc-slate-300: #CBD5E1;
    --grc-slate-200: var(--color-border, #E2E8F0);
    --grc-slate-100: #F1F5F9;
    --grc-slate-50: var(--color-background, #F8FAFC);
}

/* Missing Tailwind v2 Slate Utilities */
.bg-slate-50 { background-color: #F8FAFC !important; }
.bg-slate-100 { background-color: #F1F5F9 !important; }
.bg-slate-200 { background-color: #E2E8F0 !important; }
.bg-slate-300 { background-color: #CBD5E1 !important; }
.bg-slate-400 { background-color: #94A3B8 !important; }
.bg-slate-500 { background-color: #64748B !important; }
.bg-slate-600 { background-color: #475569 !important; }
.bg-slate-700 { background-color: #334155 !important; }
.bg-slate-800 { background-color: #1E293B !important; }
.bg-slate-900 { background-color: #0F172A !important; }
.bg-slate-950 { background-color: #0B0F19 !important; }

.text-slate-50 { color: #F8FAFC !important; }
.text-slate-100 { color: #F1F5F9 !important; }
.text-slate-200 { color: #E2E8F0 !important; }
.text-slate-300 { color: #CBD5E1 !important; }
.text-slate-400 { color: #94A3B8 !important; }
.text-slate-500 { color: #64748B !important; }
.text-slate-600 { color: #475569 !important; }
.text-slate-700 { color: #334155 !important; }
.text-slate-800 { color: #1E293B !important; }
.text-slate-900 { color: #0F172A !important; }

.border-slate-100 { border-color: #F1F5F9 !important; }
.border-slate-200 { border-color: #E2E8F0 !important; }
.border-slate-300 { border-color: #CBD5E1 !important; }
.border-slate-700 { border-color: #334155 !important; }
.border-slate-800 { border-color: #1E293B !important; }

/* Logical Utility Fallbacks */
.ps-3 { padding-inline-start: 0.75rem !important; }
.ps-9 { padding-inline-start: 2.25rem !important; }
.pe-3 { padding-inline-end: 0.75rem !important; }
.pe-8 { padding-inline-end: 2rem !important; }
.start-3 { inset-inline-start: 0.75rem !important; }
.start-3\.5 { inset-inline-start: 0.875rem !important; }
.end-2 { inset-inline-end: 0.5rem !important; }
.end-2\.5 { inset-inline-end: 0.625rem !important; }
.end-3 { inset-inline-end: 0.75rem !important; }

html[dir="rtl"] .start-3 { right: 0.75rem !important; left: auto !important; }
html[dir="rtl"] .start-3\.5 { right: 0.875rem !important; left: auto !important; }
html[dir="ltr"] .start-3 { left: 0.75rem !important; right: auto !important; }
html[dir="ltr"] .start-3\.5 { left: 0.875rem !important; right: auto !important; }

html[dir="rtl"] .ps-9 { padding-right: 2.25rem !important; padding-left: 0.75rem !important; }
html[dir="ltr"] .ps-9 { padding-left: 2.25rem !important; padding-right: 0.75rem !important; }

html[dir="rtl"] .pe-8 { padding-left: 2rem !important; padding-right: 0.75rem !important; }
html[dir="ltr"] .pe-8 { padding-right: 2rem !important; padding-left: 0.75rem !important; }

/* --- 2. CORPORATE CARDS --- */
.admin-card {
    background: #FFFFFF;
    border: 1px solid #E2E8F0;
    border-radius: 14px;
    box-shadow: 0 1px 3px rgba(15, 23, 42, 0.04);
    transition: all 0.2s ease;
}

.admin-card:hover {
    border-color: #CBD5E1;
    box-shadow: 0 4px 12px -2px rgba(15, 23, 42, 0.06);
}

.admin-card-glass {
    background: #FFFFFF;
    border: 1px solid #E2E8F0;
    border-radius: 14px;
    box-shadow: 0 1px 3px rgba(15, 23, 42, 0.04);
}

/* --- 3. PULSE STATUS DOTS --- */
.pulse-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    display: inline-block;
    position: relative;
}

.pulse-dot::before {
    content: '';
    position: absolute;
    inset: -3px;
    border-radius: 50%;
    opacity: 0.6;
    animation: pulseRing 2s cubic-bezier(0.2, 0, 0, 1) infinite;
}

.pulse-dot-blue {
    background-color: #1D4ED8;
}
.pulse-dot-blue::before {
    background-color: rgba(29, 78, 216, 0.5);
}

.pulse-dot-emerald {
    background-color: #059669;
}
.pulse-dot-emerald::before {
    background-color: rgba(5, 150, 105, 0.5);
}

.pulse-dot-amber {
    background-color: #D97706;
}
.pulse-dot-amber::before {
    background-color: rgba(217, 119, 6, 0.5);
}

.pulse-dot-rose {
    background-color: #DC2626;
}
.pulse-dot-rose::before {
    background-color: rgba(220, 38, 38, 0.5);
}

@keyframes pulseRing {
    0% { transform: scale(0.9); opacity: 0.8; }
    70% { transform: scale(2.2); opacity: 0; }
    100% { transform: scale(2.2); opacity: 0; }
}

/* --- 4. CORPORATE SIDEBAR NAVIGATION --- */
#adminSidebar {
    background-color: var(--admin-sidebar-bg, #F8F9FE) !important;
}

.sidebar-heading {
    color: var(--admin-text-muted, #8A94A6) !important;
    font-size: 0.6875rem !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.075em !important;
}

.sidebar-nav-item {
    position: relative;
    color: var(--admin-sidebar-text, #505D78) !important;
    font-weight: 600;
    transition: all 0.18s cubic-bezier(0.4, 0, 0.2, 1);
    border: 1px solid transparent;
}

.sidebar-nav-item i {
    color: #717D96 !important;
    font-size: 1.125rem;
    transition: color 0.18s ease-in-out;
}

.sidebar-nav-item:hover {
    background-color: var(--admin-sidebar-item-hover, rgba(91, 75, 219, 0.05)) !important;
    color: var(--admin-sidebar-text-hover, #172033) !important;
    border-color: var(--admin-border, #E8EBF5) !important;
}

.sidebar-nav-item:hover i {
    color: var(--admin-primary, #3B82F6) !important;
}

.sidebar-nav-item.active {
    background: var(--admin-sidebar-item-active, rgba(59, 130, 246, 0.14)) !important;
    color: var(--admin-sidebar-text-active, #FFFFFF) !important;
    font-weight: 700 !important;
    border-color: var(--admin-primary-border, rgba(59, 130, 246, 0.30)) !important;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.25) !important;
}

html[dir="ltr"] .sidebar-nav-item.active {
    border-left: 3.5px solid var(--admin-primary, #3B82F6) !important;
}

html[dir="rtl"] .sidebar-nav-item.active {
    border-right: 3.5px solid var(--admin-primary, #3B82F6) !important;
}

.sidebar-nav-item.active i {
    color: var(--admin-primary, #3B82F6) !important;
}

.sidebar-nav-item.active::after {
    display: none;
}

/* Badge Pill for Unread Counters */
.sidebar-unread-pill {
    padding: 0.15rem 0.5rem;
    font-size: 0.7rem;
    font-weight: 700;
    border-radius: 9999px;
    background: var(--admin-primary-soft, rgba(59, 130, 246, 0.12)) !important;
    border: 1px solid var(--admin-primary-border, rgba(59, 130, 246, 0.30)) !important;
    color: #93C5FD !important;
}

.sidebar-nav-item.active .sidebar-unread-pill {
    background: rgba(59, 130, 246, 0.20) !important;
    border-color: rgba(59, 130, 246, 0.40) !important;
    color: #FFFFFF !important;
}

.sidebar-nav-item:hover .sidebar-unread-pill {
    background: var(--admin-primary-soft, rgba(59, 130, 246, 0.12)) !important;
    color: #BFDBFE !important;
}

/* --- 5. TACTILE QUICK ACTION BUTTONS --- */
.btn-action-tactile {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.4rem;
    font-weight: 600;
    font-size: 0.8125rem;
    padding: 0.45rem 0.95rem;
    border-radius: 10px;
    transition: all 0.15s ease;
    cursor: pointer;
    text-decoration: none;
}

.btn-action-tactile:hover {
    transform: translateY(-1px);
}

.btn-action-tactile:active {
    transform: translateY(0) scale(0.98);
}

/* --- 6. MODERN ADMIN TABLES & CONTAINERS --- */
.table-responsive {
    border-radius: 14px;
    border: 1px solid #E2E8F0;
    background: #FFFFFF;
    box-shadow: 0 1px 3px rgba(0,0,0,0.02);
    overflow: hidden;
}

table.table {
    margin-bottom: 0 !important;
    border-collapse: collapse;
}

table.table thead {
    background-color: #F8FAFC !important;
}

table.table thead th {
    background-color: #F8FAFC !important;
    color: #475569 !important;
    font-size: 0.75rem !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.05em !important;
    padding: 12px 16px !important;
    border-bottom: 1px solid #E2E8F0 !important;
}

table.table-dark thead th {
    background-color: #0F172A !important;
    color: #F8FAFC !important;
    border-bottom: 1px solid #1E293B !important;
}

table.table tbody td {
    padding: 13px 16px !important;
    font-size: 0.875rem !important;
    color: #1E293B !important;
    vertical-align: middle !important;
    border-bottom: 1px solid #F1F5F9 !important;
}

table.table tbody tr:hover {
    background-color: #F8FAFC !important;
}

table.table-striped>tbody>tr:nth-of-type(odd)>* {
    background-color: #FAFAFA !important;
}

table.table-hover>tbody>tr:hover>* {
    background-color: #F1F5F9 !important;
}

/* --- 7. MODERN SOPHISTICATED BADGES --- */
.badge {
    font-weight: 600 !important;
    font-size: 0.75rem !important;
    padding: 0.35rem 0.75rem !important;
    border-radius: 9999px !important;
    letter-spacing: 0.02em !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 0.3rem !important;
}

.badge.bg-primary {
    background-color: #F1F5F9 !important;
    color: #0F172A !important;
    border: 1px solid #CBD5E1 !important;
}

.badge.bg-success {
    background-color: #ECFDF5 !important;
    color: #047857 !important;
    border: 1px solid #A7F3D0 !important;
}

.badge.bg-warning {
    background-color: #FEF3C7 !important;
    color: #92400E !important;
    border: 1px solid #FCD34D !important;
}

.badge.bg-danger {
    background-color: #FFE4E6 !important;
    color: #9F1239 !important;
    border: 1px solid #FECDD3 !important;
}

.badge.bg-secondary {
    background-color: #F8FAFC !important;
    color: #475569 !important;
    border: 1px solid #E2E8F0 !important;
}

.badge.bg-info {
    background-color: #EFF6FF !important;
    color: #1D4ED8 !important;
    border: 1px solid #BFDBFE !important;
}

/* --- 8. ADMIN FORM CONTROLS (Theme-Aware & Soft Borders) --- */
.form-control, .form-select {
    background-color: var(--admin-surface, #FFFFFF) !important;
    color: var(--admin-text-primary, #0F172A) !important;
    -webkit-text-fill-color: var(--admin-text-primary, #0F172A) !important;
    border: 1.5px solid var(--admin-border, #CBD5E1) !important;
    border-radius: 10px !important;
    font-size: 0.875rem !important;
    padding: 0.55rem 0.85rem !important;
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1) !important;
    box-shadow: 0 1px 2px rgba(0,0,0,0.02) !important;
}

.form-control:hover, .form-select:hover {
    border-color: var(--admin-border-hover, #94A3B8) !important;
}

.form-control:focus, .form-select:focus {
    background-color: var(--admin-surface-elevated, #FFFFFF) !important;
    color: var(--admin-text-primary, #0F172A) !important;
    -webkit-text-fill-color: var(--admin-text-primary, #0F172A) !important;
    border-color: var(--admin-primary, #1D4ED8) !important;
    box-shadow: 0 0 0 3px rgba(29, 78, 216, 0.18) !important;
    outline: none !important;
}

.form-label {
    font-size: 0.8125rem !important;
    font-weight: 600 !important;
    color: #334155 !important;
    margin-bottom: 0.4rem !important;
}

/* --- REUSABLE CORPORATE ADMIN COMPONENTS --- */
.admin-page-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 1rem;
    margin-bottom: 1.5rem;
}

.admin-title {
    font-size: 1.5rem;
    font-weight: 800;
    color: #0F172A;
    letter-spacing: -0.02em;
    margin: 0;
}

.admin-subtitle {
    font-size: 0.8125rem;
    color: #64748B;
    margin-top: 0.25rem;
}

.admin-table-container {
    border: 1px solid #E2E8F0;
    border-radius: 14px;
    background: #FFFFFF;
    box-shadow: 0 1px 3px rgba(15, 23, 42, 0.03);
    overflow-x: auto;
    width: 100%;
}

.admin-table {
    width: 100%;
    border-collapse: collapse;
    margin: 0;
}

.admin-table thead th {
    background-color: #F8FAFC;
    color: #475569;
    font-size: 0.75rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    padding: 12px 16px;
    border-bottom: 1px solid #E2E8F0;
    white-space: nowrap;
}

.admin-table tbody td {
    padding: 13px 16px;
    font-size: 0.875rem;
    color: #1E293B;
    vertical-align: middle;
    border-bottom: 1px solid #F1F5F9;
}

.admin-table tbody tr:hover {
    background-color: #F8FAFC;
}

.admin-table tbody tr:last-child td {
    border-bottom: none;
}

.admin-btn-primary {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    background-color: #1D4ED8;
    color: #FFFFFF;
    border: 1px solid #1D4ED8;
    border-radius: 10px;
    padding: 0.5rem 1rem;
    font-size: 0.875rem;
    font-weight: 600;
    text-decoration: none;
    cursor: pointer;
    transition: all 0.15s ease;
}

.admin-btn-primary:hover {
    background-color: #1E40AF;
    border-color: #1E40AF;
    color: #FFFFFF;
}

.admin-btn-secondary {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    background-color: #FFFFFF;
    color: #334155;
    border: 1px solid #CBD5E1;
    border-radius: 10px;
    padding: 0.5rem 1rem;
    font-size: 0.875rem;
    font-weight: 600;
    text-decoration: none;
    cursor: pointer;
    transition: all 0.15s ease;
}

.admin-btn-secondary:hover {
    background-color: #F8FAFC;
    border-color: #94A3B8;
    color: #0F172A;
}

.admin-btn-danger {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    background-color: #EF4444;
    color: #FFFFFF;
    border: 1px solid #EF4444;
    border-radius: 10px;
    padding: 0.5rem 1rem;
    font-size: 0.875rem;
    font-weight: 600;
    text-decoration: none;
    cursor: pointer;
    transition: all 0.15s ease;
}

.admin-btn-danger:hover {
    background-color: #DC2626;
    border-color: #DC2626;
    color: #FFFFFF;
}

.admin-btn-outline {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.4rem;
    background-color: transparent;
    color: #475569;
    border: 1px solid #E2E8F0;
    border-radius: 8px;
    padding: 0.35rem 0.75rem;
    font-size: 0.8125rem;
    font-weight: 600;
    text-decoration: none;
    cursor: pointer;
    transition: all 0.15s ease;
}

.admin-btn-outline:hover {
    background-color: #F1F5F9;
    color: #0F172A;
    border-color: #CBD5E1;
}

.admin-badge-success {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    background-color: #ECFDF5;
    color: #047857;
    border: 1px solid #A7F3D0;
    border-radius: 9999px;
    padding: 0.25rem 0.65rem;
    font-size: 0.75rem;
    font-weight: 600;
}

.admin-badge-warning {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    background-color: #FEF3C7;
    color: #92400E;
    border: 1px solid #FDE68A;
    border-radius: 9999px;
    padding: 0.25rem 0.65rem;
    font-size: 0.75rem;
    font-weight: 600;
}

.admin-badge-danger {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    background-color: #FEF2F2;
    color: #991B1B;
    border: 1px solid #FECACA;
    border-radius: 9999px;
    padding: 0.25rem 0.65rem;
    font-size: 0.75rem;
    font-weight: 600;
}

.admin-badge-info {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    background-color: #EFF6FF;
    color: #1D4ED8;
    border: 1px solid #BFDBFE;
    border-radius: 9999px;
    padding: 0.25rem 0.65rem;
    font-size: 0.75rem;
    font-weight: 600;
}

.admin-badge-neutral {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    background-color: #F1F5F9;
    color: #475569;
    border: 1px solid #E2E8F0;
    border-radius: 9999px;
    padding: 0.25rem 0.65rem;
    font-size: 0.75rem;
    font-weight: 600;
}

.admin-empty-state {
    text-align: center;
    padding: 3.5rem 1.5rem;
    color: #64748B;
}

.admin-empty-state i {
    font-size: 2.75rem;
    color: #94A3B8;
    margin-bottom: 0.75rem;
    display: inline-block;
}

.admin-empty-state h3 {
    font-size: 1rem;
    font-weight: 700;
    color: #1E293B;
    margin-bottom: 0.25rem;
}

.admin-empty-state p {
    font-size: 0.8125rem;
    color: #64748B;
    margin: 0;
}

/* --- 9. ADMIN BUTTONS (Corporate Charcoal & Warm Gold) --- */
.btn-primary, .btn-dark {
    background-color: #0F172A !important;
    border-color: #0F172A !important;
    color: #FFFFFF !important;
    font-weight: 600 !important;
    border-radius: 9px !important;
    padding: 0.5rem 1.1rem !important;
    font-size: 0.875rem !important;
    transition: all 0.2s ease !important;
}

.btn-primary:hover, .btn-dark:hover {
    background-color: #1E293B !important;
    border-color: #1E293B !important;
    color: #FFFFFF !important;
    transform: translateY(-1px);
    box-shadow: 0 4px 6px -1px rgba(0,0,0,0.08);
}

.btn-outline-primary, .btn-outline-dark {
    background-color: #FFFFFF !important;
    border-color: #CBD5E1 !important;
    color: #0F172A !important;
    font-weight: 600 !important;
    border-radius: 9px !important;
    padding: 0.45rem 1rem !important;
    font-size: 0.875rem !important;
    transition: all 0.2s ease !important;
}

.btn-outline-primary:hover, .btn-outline-dark:hover {
    background-color: #F8FAFC !important;
    border-color: #0F172A !important;
    color: #0F172A !important;
}

.btn-warning {
    background-color: #F59E0B !important;
    border-color: #D97706 !important;
    color: #0F172A !important;
    font-weight: 700 !important;
    border-radius: 9px !important;
}

.btn-warning:hover {
    background-color: #D97706 !important;
    color: #FFFFFF !important;
}

.btn-success {
    background-color: #059669 !important;
    border-color: #047857 !important;
    color: #FFFFFF !important;
    font-weight: 600 !important;
    border-radius: 9px !important;
}

/* --- 10. CARD CONTAINERS --- */
.card {
    background-color: #FFFFFF !important;
    border: 1px solid #E2E8F0 !important;
    border-radius: 14px !important;
    box-shadow: 0 1px 3px rgba(0,0,0,0.03) !important;
    overflow: hidden;
}

.card-header {
    background-color: #FFFFFF !important;
    border-bottom: 1px solid #E2E8F0 !important;
    padding: 1rem 1.25rem !important;
    font-weight: 700 !important;
    color: #0F172A !important;
}

.card-body {
    padding: 1.25rem !important;
}

.card-footer {
    background-color: #F8FAFC !important;
    border-top: 1px solid #E2E8F0 !important;
    padding: 0.85rem 1.25rem !important;
}

/* ==========================================================================
   11. GRC ADMIN LOGIN PAGE (Corporate, High-Security, Professional)
   ========================================================================== */
.grc-login-wrapper {
    flex: 1 1 auto;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 3rem 1.25rem;
    background-color: #F8FAFC;
    min-height: calc(100vh - 130px);
    width: 100%;
    box-sizing: border-box;
}

.grc-login-card {
    width: 100%;
    max-width: 460px;
    background: #FFFFFF;
    border: 1px solid #E2E8F0;
    border-radius: 18px;
    box-shadow: 0 4px 6px -1px rgba(15, 23, 42, 0.04), 0 20px 25px -5px rgba(15, 23, 42, 0.06);
    padding: 2.5rem 2.25rem;
    box-sizing: border-box;
    position: relative;
}

.grc-login-header {
    text-align: center;
    margin-bottom: 2rem;
}

.grc-logo-container {
    display: flex;
    justify-content: center;
    align-items: center;
    margin-bottom: 1.25rem;
}

.grc-login-logo {
    height: 52px;
    max-width: 220px;
    width: auto;
    object-fit: contain;
    display: block;
}

.grc-login-title {
    font-size: 1.625rem;
    font-weight: 800;
    color: #0F172A;
    margin: 0 0 0.5rem 0;
    letter-spacing: -0.025em;
    line-height: 1.25;
}

.grc-login-subtitle {
    font-size: 0.8125rem;
    font-weight: 500;
    color: #64748B;
    margin: 0;
    line-height: 1.45;
}

.grc-login-alert {
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
    background-color: #FEF2F2;
    border: 1px solid #FECACA;
    border-radius: 12px;
    padding: 0.85rem 1rem;
    margin-bottom: 1.5rem;
    color: #991B1B;
    font-size: 0.8125rem;
    line-height: 1.45;
}

.grc-alert-icon {
    font-size: 1.15rem;
    color: #DC2626;
    flex-shrink: 0;
    margin-top: 1px;
}

.grc-alert-content {
    flex: 1;
}

.grc-validation-summary ul {
    margin: 0;
    padding-inline-start: 1.1rem;
    list-style-type: disc;
}

.grc-validation-summary li {
    margin-bottom: 0.2rem;
}

.grc-validation-summary li:last-child {
    margin-bottom: 0;
}

.grc-form-group {
    margin-bottom: 1.25rem;
}

.grc-form-label {
    display: block;
    font-size: 0.8125rem;
    font-weight: 600;
    color: #334155;
    margin-bottom: 0.45rem;
}

.grc-input-wrapper {
    position: relative;
    width: 100%;
    display: flex;
    align-items: center;
}

.grc-input-icon {
    position: absolute;
    inset-inline-start: 0.95rem;
    color: #94A3B8;
    font-size: 1rem;
    pointer-events: none;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 2;
}

.grc-input {
    width: 100% !important;
    height: 46px !important;
    padding-inline-start: 2.65rem !important;
    padding-inline-end: 1rem !important;
    background-color: #FFFFFF !important;
    border: 1.5px solid #CBD5E1 !important;
    border-radius: 11px !important;
    font-size: 0.875rem !important;
    color: #0F172A !important;
    transition: all 0.18s cubic-bezier(0.4, 0, 0.2, 1) !important;
    box-sizing: border-box !important;
}

.grc-input::placeholder {
    color: #94A3B8 !important;
    opacity: 1;
}

.grc-input:hover {
    border-color: #94A3B8 !important;
}

.grc-input:focus {
    outline: none !important;
    background-color: #FFFFFF !important;
    border-color: #1D4ED8 !important;
    box-shadow: 0 0 0 3.5px rgba(29, 78, 216, 0.18) !important;
}

.grc-field-error {
    display: block;
    font-size: 0.75rem;
    color: #DC2626;
    margin-top: 0.35rem;
    font-weight: 500;
}

.grc-remember-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin: 0.5rem 0 1.5rem 0;
}

.grc-checkbox-label {
    display: inline-flex;
    align-items: center;
    gap: 0.55rem;
    cursor: pointer;
    font-size: 0.8125rem;
    font-weight: 500;
    color: #475569;
    user-select: none;
}

.grc-checkbox {
    width: 17px;
    height: 17px;
    border-radius: 5px;
    border: 1.5px solid #CBD5E1;
    accent-color: #1D4ED8;
    cursor: pointer;
    margin: 0;
}

.grc-action-row {
    margin-top: 0.5rem;
}

.grc-btn-login {
    width: 100% !important;
    height: 48px !important;
    background-color: #1D4ED8 !important;
    color: #FFFFFF !important;
    border: 1px solid #1D4ED8 !important;
    border-radius: 11px !important;
    font-size: 0.9375rem !important;
    font-weight: 700 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 0.5rem !important;
    cursor: pointer !important;
    box-shadow: 0 2px 4px rgba(29, 78, 216, 0.2), 0 1px 2px rgba(0, 0, 0, 0.05) !important;
    transition: all 0.18s cubic-bezier(0.4, 0, 0.2, 1) !important;
}

.grc-btn-login:hover {
    background-color: #1E40AF !important;
    border-color: #1E40AF !important;
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(29, 78, 216, 0.28) !important;
}

.grc-btn-login:active {
    transform: translateY(0);
    box-shadow: 0 1px 2px rgba(29, 78, 216, 0.2) !important;
}

.grc-btn-login:focus {
    outline: none !important;
    box-shadow: 0 0 0 3.5px rgba(37, 99, 235, 0.35) !important;
}

.grc-login-card-footer {
    margin-top: 1.75rem;
    padding-top: 1.25rem;
    border-top: 1px solid #F1F5F9;
    text-align: center;
}

.grc-secure-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    font-size: 0.72rem;
    color: #64748B;
    font-weight: 600;
    background-color: #F8FAFC;
    padding: 0.35rem 0.85rem;
    border-radius: 9999px;
    border: 1px solid #E2E8F0;
}

@media (max-width: 480px) {
    .grc-login-card {
        padding: 1.75rem 1.25rem;
        border-radius: 14px;
    }
    .grc-login-wrapper {
        padding: 1.5rem 1rem;
    }
    .grc-login-title {
        font-size: 1.35rem;
    }
}


/* ==========================================================================
   ULTRA-PREMIUM 2026 JOB CARD & COMPANY LOGO SYSTEM (Linear & Stripe Aesthetics)
   ========================================================================== */

/* 1. Ultra-Premium Job Card (.job-card-ultra) */
.job-card-ultra {
    background: #FFFFFF;
    border: 1px solid rgba(226, 232, 240, 0.85);
    border-radius: 20px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.02), 0 8px 24px -4px rgba(15, 23, 42, 0.04);
    transition: all 0.28s cubic-bezier(0.16, 1, 0.3, 1);
    position: relative;
    overflow: hidden;
}

.job-card-ultra:hover {
    transform: translateY(-3px);
    box-shadow: 0 20px 25px -5px rgba(15, 23, 42, 0.08), 0 0 0 1px rgba(37, 99, 235, 0.2);
    border-color: rgba(37, 99, 235, 0.3);
}

.job-card-ultra-closed {
    background: #F8FAFC !important;
    border-color: rgba(226, 232, 240, 0.9) !important;
    opacity: 0.92;
}

.job-card-ultra-closed:hover {
    transform: translateY(-2px);
    box-shadow: 0 12px 20px -4px rgba(15, 23, 42, 0.05);
}

/* 2. Company Logo Container (56px x 56px) */
.company-logo-box-56 {
    width: 56px;
    height: 56px;
    min-width: 56px;
    max-width: 56px;
    border-radius: 14px;
    background: #F8FAFC;
    border: 1px solid rgba(226, 232, 240, 0.9);
    box-shadow: inset 0 1px 2px rgba(15, 23, 42, 0.03), 0 2px 4px rgba(15, 23, 42, 0.02);
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    position: relative;
}

.company-logo-img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    padding: 6px;
    transition: transform 0.2s ease;
}

.job-card-ultra:hover .company-logo-img {
    transform: scale(1.06);
}

/* 3. Luxury Avatar Placeholder */
.company-avatar-placeholder {
    width: 100%;
    height: 100%;
    background: linear-gradient(135deg, #1E293B 0%, #0F172A 100%);
    color: #FFFFFF;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: 'Cairo', 'Inter', system-ui, sans-serif;
    font-weight: 800;
    font-size: 1.35rem;
    line-height: 1;
    letter-spacing: -0.5px;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.25);
    border-radius: 13px;
}

/* 4. Minimalist Glass Pills */
.pill-glass-meta {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0.3rem 0.75rem;
    border-radius: 9999px;
    font-size: 0.75rem;
    font-weight: 600;
    background: #F8FAFC;
    color: #475569;
    border: 1px solid rgba(226, 232, 240, 0.9);
    transition: all 0.18s ease;
}

.pill-glass-meta:hover {
    background: #F1F5F9;
    color: #0F172A;
}

.pill-glass-sector {
    background: rgba(37, 99, 235, 0.06);
    color: #1D4ED8;
    border: 1px solid rgba(37, 99, 235, 0.18);
}

.pill-glass-remote {
    background: rgba(14, 165, 233, 0.08);
    color: #0369A1;
    border: 1px solid rgba(14, 165, 233, 0.22);
}

.pill-glass-open {
    background: rgba(16, 185, 129, 0.08);
    color: #047857;
    border: 1px solid rgba(16, 185, 129, 0.22);
    font-weight: 700;
}

.pill-glass-closed {
    background: rgba(244, 63, 94, 0.07);
    color: #BE123C;
    border: 1px solid rgba(244, 63, 94, 0.2);
    font-weight: 700;
}

/* 5. Minimalist Action Button with Hover Slide */
.btn-ultra-action {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    padding: 0.65rem 1.25rem;
    border-radius: 12px;
    font-size: 0.8125rem;
    font-weight: 700;
    color: #0F172A;
    background: #F8FAFC;
    border: 1px solid #E2E8F0;
    box-shadow: 0 1px 2px rgba(15, 23, 42, 0.03);
    transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
    text-decoration: none;
}

.btn-ultra-action:hover {
    background: #0F172A;
    color: #FFFFFF !important;
    border-color: #0F172A;
    box-shadow: 0 4px 12px rgba(15, 23, 42, 0.15);
}

.btn-ultra-action .arrow-icon {
    transition: transform 0.2s ease;
}

.btn-ultra-action:hover .arrow-icon {
    transform: translateX(-4px);
}

[dir="ltr"] .btn-ultra-action:hover .arrow-icon {
    transform: translateX(4px);
}

/* ==========================================================================
   12. GRC ADMIN UNIFIED RESPONSIVE MATRIX & TOUCH COMPONENT SYSTEM 2026
   ========================================================================== */

/* 1. Viewport & Base Container Anti-Overflow Protection */
*, *::before, *::after {
    box-sizing: border-box;
}

img, svg, video {
    max-width: 100%;
    height: auto;
}

/* 2. Main Content Viewport Margin Control */
@media (max-width: 1023.98px) {
    #mainWrapper {
        margin-left: 0 !important;
        margin-right: 0 !important;
        width: 100% !important;
        max-width: 100% !important;
    }
}

/* 3. Unified Form Controls (Admin Inputs & Selects) */
.admin-input,
.admin-select {
    background-color: var(--admin-surface, #FFFFFF) !important;
    color: var(--admin-text-primary, #0F172A) !important;
    border: 1.5px solid var(--admin-border, #CBD5E1) !important;
    border-radius: 10px !important;
    font-size: 0.875rem !important;
    padding: 0.55rem 0.85rem !important;
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1) !important;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.02) !important;
}

.admin-input:hover,
.admin-select:hover {
    border-color: var(--admin-border-hover, #94A3B8) !important;
}

.admin-input:focus,
.admin-select:focus {
    background-color: var(--admin-surface-elevated, #FFFFFF) !important;
    color: var(--admin-text-primary, #0F172A) !important;
    border-color: var(--admin-primary, #1D4ED8) !important;
    box-shadow: 0 0 0 3px rgba(29, 78, 216, 0.18) !important;
    outline: none !important;
}

/* 4. Resilient Table Horizontal Scroll Containers */
.admin-table-container,
.table-responsive {
    -webkit-overflow-scrolling: touch !important;
    overflow-x: auto !important;
    max-width: 100% !important;
    border-radius: 14px !important;
    border: 1px solid var(--admin-border, #E2E8F0) !important;
    background: var(--admin-surface, #FFFFFF) !important;
    scrollbar-width: thin !important;
    scrollbar-color: var(--admin-border, #CBD5E1) var(--admin-surface-elevated, #F8FAFC) !important;
}

.admin-table-container::-webkit-scrollbar,
.table-responsive::-webkit-scrollbar {
    height: 6px !important;
}

.admin-table-container::-webkit-scrollbar-track,
.table-responsive::-webkit-scrollbar-track {
    background: #F8FAFC !important;
    border-radius: 9999px !important;
}

.admin-table-container::-webkit-scrollbar-thumb,
.table-responsive::-webkit-scrollbar-thumb {
    background-color: #CBD5E1 !important;
    border-radius: 9999px !important;
}

.admin-table-container::-webkit-scrollbar-thumb:hover,
.table-responsive::-webkit-scrollbar-thumb:hover {
    background-color: #94A3B8 !important;
}

/* 5. Touch Target Ergonomics & Button Sizing */
.admin-btn-primary,
.admin-btn-secondary,
.admin-btn-danger,
.admin-btn-outline,
.btn-action-tactile {
    min-height: 38px !important;
    touch-action: manipulation;
    user-select: none;
    box-sizing: border-box !important;
}

/* 6. Mobile Breakpoint Matrix (< 576px - Mobile Phones 320px - 430px) */
@media (max-width: 575.98px) {
    .admin-card {
        padding: 1rem !important;
        border-radius: 12px !important;
    }

    .admin-title {
        font-size: 1.25rem !important;
    }

    .admin-subtitle {
        font-size: 0.75rem !important;
    }

    .admin-btn-primary,
    .admin-btn-secondary,
    .admin-btn-danger,
    .btn-action-tactile {
        min-height: 42px !important;
        padding: 0.55rem 1rem !important;
    }

    /* Wrap filter buttons and search gracefully on phones */
    .admin-card .flex-wrap,
    .admin-card .gap-3 {
        gap: 0.5rem !important;
    }
}

/* ==========================================================================
   13. GRC EXECUTIVE BACKOFFICE DESIGN SYSTEM — UNIFIED SHELL, TABLES & FORMS
   ========================================================================== */

/* 1. High-Contrast Readable Search & Form Inputs Across Entire Admin Panel */
#globalSearchInput,
#requestsSearchInput,
#tableSearchInput,
main input[type="text"],
main input[type="search"],
main input[type="email"],
main input[type="tel"],
main input[type="url"],
main input[type="number"],
main input[type="password"],
main input[type="date"],
main select,
main textarea {
    color: var(--admin-text-primary, #111827) !important;
    -webkit-text-fill-color: var(--admin-text-primary, #111827) !important;
    caret-color: var(--admin-primary, #1D4ED8) !important;
    opacity: 1 !important;
}

#globalSearchInput::placeholder,
#requestsSearchInput::placeholder,
#tableSearchInput::placeholder,
main input::placeholder,
main textarea::placeholder {
    color: #64748B !important;
    -webkit-text-fill-color: #64748B !important;
    opacity: 1 !important;
}

#globalSearchInput:focus,
#requestsSearchInput:focus,
#tableSearchInput:focus {
    background-color: #FFFFFF !important;
    border-color: #1D4ED8 !important;
    box-shadow: 0 0 0 3px rgba(29, 78, 216, 0.16) !important;
    outline: none !important;
}

/* Prevent search icon overlap on any icon-prefixed input in LTR and RTL */
.relative > i.bi-search {
    top: 50% !important;
    transform: translateY(-50%) !important;
    inset-inline-start: 0.85rem !important;
    pointer-events: none !important;
    z-index: 2 !important;
}

html[dir="ltr"] .relative > i.bi-search {
    left: 0.85rem !important;
    right: auto !important;
}

html[dir="rtl"] .relative > i.bi-search {
    right: 0.85rem !important;
    left: auto !important;
}

#globalSearchInput,
.relative > i.bi-search ~ input,
input.ps-8,
input.ps-9,
input.ps-10,
input.pl-9,
input.pl-10,
.admin-input.ps-8,
.admin-input.ps-9,
.admin-input.ps-10 {
    padding-inline-start: 2.4rem !important;
}

html[dir="ltr"] #globalSearchInput,
html[dir="ltr"] .relative > i.bi-search ~ input,
html[dir="ltr"] .admin-input.ps-9,
html[dir="ltr"] .admin-input.ps-10 {
    padding-left: 2.4rem !important;
    padding-right: 2rem !important;
}

html[dir="rtl"] #globalSearchInput,
html[dir="rtl"] .relative > i.bi-search ~ input,
html[dir="rtl"] .admin-input.ps-9,
html[dir="rtl"] .admin-input.ps-10 {
    padding-right: 2.4rem !important;
    padding-left: 2rem !important;
}

.relative > kbd {
    top: 50% !important;
    transform: translateY(-50%) !important;
    inset-inline-end: 0.65rem !important;
}

html[dir="ltr"] .relative > kbd {
    right: 0.65rem !important;
    left: auto !important;
}

html[dir="rtl"] .relative > kbd {
    left: 0.65rem !important;
    right: auto !important;
}

/* 2. Executive Sidebar Brand Logo Plaque & Group Hierarchy */
.admin-sidebar-logo-plaque {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: #FFFFFF;
    border: 1px solid rgba(226, 232, 240, 0.95);
    border-radius: 10px;
    padding: 4px 8px;
    height: 38px;
    min-width: 54px;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.28);
    flex-shrink: 0;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.admin-sidebar-logo-plaque:hover {
    transform: translateY(-1px);
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.35);
}

.admin-sidebar-logo-img {
    height: 28px;
    width: auto;
    max-width: 96px;
    object-fit: contain;
    display: block;
}

.sidebar-domain-divider {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.95rem 0.75rem 0.35rem;
}

.sidebar-domain-divider::after {
    content: "";
    flex: 1;
    height: 1px;
    background: linear-gradient(90deg, rgba(148, 163, 184, 0.22) 0%, rgba(148, 163, 184, 0.03) 100%);
}

html[dir="rtl"] .sidebar-domain-divider::after {
    background: linear-gradient(270deg, rgba(148, 163, 184, 0.22) 0%, rgba(148, 163, 184, 0.03) 100%);
}

.sidebar-nav-item {
    border: 1px solid transparent;
}

.sidebar-nav-item.active {
    background: var(--admin-sidebar-item-active, rgba(59, 130, 246, 0.14)) !important;
    color: var(--admin-sidebar-text-active, #FFFFFF) !important;
    font-weight: 700 !important;
    border-color: var(--admin-primary-border, rgba(59, 130, 246, 0.30)) !important;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.25) !important;
}

/* 3. Executive Sticky Header & Context Breadcrumb Bar */
.admin-topbar-glass {
    background: rgba(8, 20, 38, 0.92) !important;
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border-bottom: 1px solid rgba(148, 163, 184, 0.12) !important;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.35);
}

.admin-context-breadcrumb {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    padding: 0.35rem 0.75rem;
    background: rgba(59, 130, 246, 0.12) !important;
    border: 1px solid rgba(59, 130, 246, 0.25) !important;
    border-radius: 10px;
    font-size: 0.75rem;
    font-weight: 700;
    color: #93C5FD !important;
    white-space: nowrap;
    max-width: 260px;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* 4. Quick Module Jump Dropdown on Global Search */
#globalQuickJumpMenu {
    max-height: 340px;
    overflow-y: auto;
    scrollbar-width: thin;
    background-color: #12243A !important;
    border: 1px solid rgba(148, 163, 184, 0.14) !important;
    color: #F8FAFC !important;
}

/* 5. Unified Data Tables & Hover States Across All Admin Views */
main table thead tr {
    background-color: #0A1728 !important;
    border-bottom: 1px solid rgba(148, 163, 184, 0.14) !important;
}

main table thead th {
    color: #B6C2D2 !important;
    font-weight: 700 !important;
    letter-spacing: 0.03em !important;
    white-space: nowrap;
}

main table tbody tr {
    transition: background-color 0.15s ease !important;
}

main table tbody tr:hover {
    background-color: rgba(255, 255, 255, 0.03) !important;
}

/* 6. Responsive Shell Refinements for Tablet & Mobile (320px - 1024px) */
@media (max-width: 1023.98px) {
    html[dir="ltr"] #adminSidebar:not(.mobile-open) {
        transform: translateX(-105%) !important;
    }

    html[dir="rtl"] #adminSidebar:not(.mobile-open) {
        transform: translateX(105%) !important;
    }

    #adminSidebar.mobile-open {
        transform: translateX(0) !important;
    }
}

@media (max-width: 640px) {
    main {
        padding: 0.875rem !important;
    }

    .admin-context-breadcrumb {
        display: none !important;
    }
}

/* ==========================================================================
   ALERT & CONFIRMATION NOTIFICATIONS (EMERALD / GREEN SYSTEM)
   ========================================================================== */
.bg-emerald-50 {
    background-color: #ECFDF5 !important;
}
.bg-emerald-100 {
    background-color: #D1FAE5 !important;
}
.border-emerald-200 {
    border-color: #A7F3D0 !important;
}
.border-emerald-300 {
    border-color: #6EE7B7 !important;
}
.text-emerald-800 {
    color: #065F46 !important;
}
.text-emerald-700 {
    color: #047857 !important;
}
.text-emerald-600 {
    color: #059669 !important;
}
.text-emerald-500 {
    color: #10B981 !important;
}
.hover\:text-emerald-700:hover {
    color: #047857 !important;
}
.hover\:text-emerald-900:hover {
    color: #064E3B !important;
}

/* Fallback for Bootstrap .alert-success */
.alert-success {
    background-color: #ECFDF5 !important;
    border: 1px solid #A7F3D0 !important;
    color: #065F46 !important;
    border-radius: 1rem !important;
    padding: 1rem 1.25rem !important;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    font-weight: 600 !important;
}
.alert-success .bi-check-circle-fill {
    color: #059669 !important;
}

/* Error / Rose alerts */
.bg-rose-50 {
    background-color: #FFF1F2 !important;
}
.border-rose-200 {
    border-color: #FECDD3 !important;
}
.text-rose-800 {
    color: #9F1239 !important;
}
.text-rose-600 {
    color: #E11D48 !important;
}
.text-rose-500 {
    color: #F43F5E !important;
}
.hover\:text-rose-700:hover {
    color: #BE123C !important;
}
.hover\:text-rose-900:hover {
    color: #881337 !important;
}

/* Fallback for Bootstrap .alert-danger */
.alert-danger {
    background-color: #FFF1F2 !important;
    border: 1px solid #FECDD3 !important;
    color: #9F1239 !important;
    border-radius: 1rem !important;
    padding: 1rem 1.25rem !important;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    font-weight: 600 !important;
}
.alert-danger .bi-exclamation-triangle-fill,
.alert-danger .bi-trash3-fill {
    color: #E11D48 !important;
}

/* ==========================================================================
   14. UNIFIED CORPORATE BACKOFFICE DESIGN SYSTEM — 2026 EDITION
   Harmonizes Sidebar, Headers, Cards, Tables, Badges, Buttons, Forms & Dossiers
   ========================================================================== */

/* 1. Sidebar Active Indicator Accent Bar (RTL & LTR) */
html[dir="ltr"] .sidebar-nav-item.active {
    border-left: 3.5px solid #3B82F6 !important;
}
html[dir="rtl"] .sidebar-nav-item.active {
    border-right: 3.5px solid #3B82F6 !important;
}

/* 2. Unified Badges System (Full Spectrum of Status & Metadata Badges) */
.admin-badge-success, .badge.bg-success {
    background-color: #ECFDF5;
    color: #047857;
    border: 1px solid #A7F3D0;
}

.admin-badge-warning, .badge.bg-warning {
    background-color: #FEF3C7;
    color: #92400E;
    border: 1px solid #FDE68A;
}

.admin-badge-danger, .badge.bg-danger {
    background-color: #FEF2F2;
    color: #991B1B;
    border: 1px solid #FECACA;
}

.admin-badge-info, .badge.bg-info {
    background-color: #EFF6FF;
    color: #1D4ED8;
    border: 1px solid #BFDBFE;
}

.admin-badge-primary, .badge.bg-primary {
    background-color: #EEF2FF;
    color: #3730A3;
    border: 1px solid #C7D2FE;
}

.admin-badge-secondary, .badge.bg-secondary {
    background-color: #F1F5F9;
    color: #475569;
    border: 1px solid #CBD5E1;
}

.admin-badge-purple, .badge.bg-purple {
    background-color: #FAF5FF;
    color: #6B21A8;
    border: 1px solid #E9D5FF;
}

.admin-badge-teal, .badge.bg-teal {
    background-color: #F0FDFA;
    color: #0F766E;
    border: 1px solid #99F6E4;
}

.admin-badge-amber, .badge.bg-amber {
    background-color: #FFFBEB;
    color: #B45309;
    border: 1px solid #FDE68A;
}

.admin-badge-sky, .badge.bg-sky {
    background-color: #F0F9FF;
    color: #0284C7;
    border: 1px solid #BAE6FD;
}

.admin-badge-indigo, .badge.bg-indigo {
    background-color: #EEF2FF;
    color: #4338CA;
    border: 1px solid #C7D2FE;
}

.admin-badge-neutral, .badge.bg-light, .badge.bg-dark {
    background-color: #F8FAFC;
    color: #334155;
    border: 1px solid #E2E8F0;
}

.admin-badge-success, .admin-badge-warning, .admin-badge-danger, .admin-badge-info,
.admin-badge-primary, .admin-badge-secondary, .admin-badge-purple, .admin-badge-teal,
.admin-badge-amber, .admin-badge-sky, .admin-badge-indigo, .admin-badge-neutral,
.badge {
    display: inline-flex !important;
    align-items: center !important;
    gap: 0.35rem !important;
    padding: 0.28rem 0.65rem !important;
    font-size: 0.75rem !important;
    font-weight: 700 !important;
    line-height: 1.25 !important;
    border-radius: 9999px !important;
    white-space: nowrap !important;
    letter-spacing: 0.02em !important;
}

/* 3. Unified Button Hierarchy & Ergonomics */
.admin-btn-primary, .btn-primary {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 0.45rem !important;
    background-color: #1D4ED8 !important;
    color: #FFFFFF !important;
    border: 1px solid #1D4ED8 !important;
    border-radius: 10px !important;
    padding: 0.5rem 1rem !important;
    font-size: 0.8125rem !important;
    font-weight: 700 !important;
    text-decoration: none !important;
    cursor: pointer !important;
    transition: all 0.18s cubic-bezier(0.4, 0, 0.2, 1) !important;
    box-shadow: 0 1px 2px rgba(29, 78, 216, 0.15) !important;
}

.admin-btn-primary:hover, .btn-primary:hover {
    background-color: #1E40AF !important;
    border-color: #1E40AF !important;
    color: #FFFFFF !important;
    transform: translateY(-1px);
    box-shadow: 0 4px 10px rgba(29, 78, 216, 0.25) !important;
}

.admin-btn-secondary, .btn-secondary, .btn-outline-secondary {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 0.45rem !important;
    background-color: #FFFFFF;
    color: #334155;
    border: 1.5px solid #CBD5E1;
    border-radius: 10px !important;
    padding: 0.5rem 1rem !important;
    font-size: 0.8125rem !important;
    font-weight: 700 !important;
    text-decoration: none !important;
    cursor: pointer !important;
    transition: all 0.18s cubic-bezier(0.4, 0, 0.2, 1) !important;
}

.admin-btn-secondary:hover, .btn-secondary:hover, .btn-outline-secondary:hover {
    background-color: #F8FAFC !important;
    border-color: #94A3B8 !important;
    color: #0F172A !important;
}

.admin-btn-outline, .btn-outline-primary {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 0.4rem !important;
    background-color: transparent !important;
    color: #1D4ED8 !important;
    border: 1.5px solid #BFDBFE !important;
    border-radius: 10px !important;
    padding: 0.45rem 0.9rem !important;
    font-size: 0.8125rem !important;
    font-weight: 700 !important;
    text-decoration: none !important;
    cursor: pointer !important;
    transition: all 0.18s ease !important;
}

.admin-btn-outline:hover, .btn-outline-primary:hover {
    background-color: #EFF6FF !important;
    color: #1E40AF !important;
    border-color: #93C5FD !important;
}

.admin-btn-danger, .btn-danger {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 0.45rem !important;
    background-color: #DC2626 !important;
    color: #FFFFFF !important;
    border: 1px solid #DC2626 !important;
    border-radius: 10px !important;
    padding: 0.5rem 1rem !important;
    font-size: 0.8125rem !important;
    font-weight: 700 !important;
    cursor: pointer !important;
    transition: all 0.18s ease !important;
}

.admin-btn-danger:hover, .btn-danger:hover {
    background-color: #B91C1C !important;
    border-color: #B91C1C !important;
    color: #FFFFFF !important;
}

.admin-btn-success, .btn-success {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 0.45rem !important;
    background-color: #059669 !important;
    color: #FFFFFF !important;
    border: 1px solid #059669 !important;
    border-radius: 10px !important;
    padding: 0.5rem 1rem !important;
    font-size: 0.8125rem !important;
    font-weight: 700 !important;
    cursor: pointer !important;
    transition: all 0.18s ease !important;
}

.admin-btn-success:hover, .btn-success:hover {
    background-color: #047857 !important;
    border-color: #047857 !important;
    color: #FFFFFF !important;
}

.admin-btn-warning, .btn-warning {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 0.45rem !important;
    background-color: #D97706 !important;
    color: #FFFFFF !important;
    border: 1px solid #D97706 !important;
    border-radius: 10px !important;
    padding: 0.5rem 1rem !important;
    font-size: 0.8125rem !important;
    font-weight: 700 !important;
    cursor: pointer !important;
    transition: all 0.18s ease !important;
}

.admin-btn-warning:hover, .btn-warning:hover {
    background-color: #B45309 !important;
    border-color: #B45309 !important;
    color: #FFFFFF !important;
}

.admin-btn-sm, .btn-sm {
    padding: 0.35rem 0.75rem !important;
    font-size: 0.75rem !important;
    border-radius: 8px !important;
}

/* 4. Unified Tables Styling Across Entire Admin Portal */
.admin-table-card,
.admin-table-container,
.table-responsive {
    border-radius: var(--radius-lg, 12px) !important;
    border: 1px solid var(--admin-border, #E2E8F0) !important;
    background: var(--admin-surface, #FFFFFF) !important;
    box-shadow: var(--shadow-xs, 0 1px 3px rgba(15, 23, 42, 0.03)) !important;
    overflow-x: auto !important;
}

.admin-table, table.table {
    width: 100% !important;
    border-collapse: collapse !important;
    margin: 0 !important;
}

.admin-table thead th, table.table thead th {
    background-color: var(--admin-sidebar-bg, #F8FAFC) !important;
    color: var(--admin-text-secondary, #475569) !important;
    font-size: 0.72rem !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.04em !important;
    padding: 10px 14px !important;
    border-bottom: 1px solid var(--admin-border, #E2E8F0) !important;
    white-space: nowrap !important;
}

.admin-table tbody td, table.table tbody td {
    padding: 12px 14px !important;
    font-size: 0.8125rem !important;
    color: var(--admin-text-primary, #1E293B) !important;
    vertical-align: middle !important;
    border-bottom: 1px solid var(--admin-border-subtle, #F1F5F9) !important;
}

.admin-table tbody tr:hover, table.table tbody tr:hover {
    background-color: var(--admin-surface-elevated, #F8FAFC) !important;
}

.admin-table tbody tr:last-child td, table.table tbody tr:last-child td {
    border-bottom: none !important;
}

/* 5. Dossier Details Dossier Grid Layout */
.dossier-card {
    background: #FFFFFF !important;
    border: 1px solid #E2E8F0 !important;
    border-radius: 16px !important;
    padding: 1.5rem !important;
    margin-bottom: 1.5rem !important;
    box-shadow: 0 1px 3px rgba(15, 23, 42, 0.04) !important;
}

.dossier-section-title {
    font-size: 0.9375rem !important;
    font-weight: 800 !important;
    color: #0F172A !important;
    display: flex !important;
    align-items: center !important;
    gap: 0.5rem !important;
    padding-bottom: 0.75rem !important;
    margin-bottom: 1.25rem !important;
    border-bottom: 1px solid #F1F5F9 !important;
}

.dossier-grid {
    display: grid !important;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)) !important;
    gap: 1.25rem !important;
}

.dossier-field {
    display: flex !important;
    flex-direction: column !important;
    gap: 0.25rem !important;
}

.dossier-label {
    font-size: 0.75rem !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.04em !important;
    color: #64748B !important;
}

.dossier-value {
    font-size: 0.875rem !important;
    font-weight: 600 !important;
    color: #0F172A !important;
    word-break: break-word !important;
}

/* 6. Form Controls Modern Styling */
.admin-input, .admin-select, .form-control, .form-select {
    background-color: var(--admin-surface, #FFFFFF) !important;
    color: var(--admin-text-primary, #0F172A) !important;
    border: 1.5px solid var(--admin-border, #CBD5E1) !important;
    border-radius: 10px !important;
    font-size: 0.875rem !important;
    padding: 0.55rem 0.85rem !important;
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1) !important;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.02) !important;
}

.admin-input:focus, .admin-select:focus, .form-control:focus, .form-select:focus {
    background-color: var(--admin-surface-elevated, #FFFFFF) !important;
    color: var(--admin-text-primary, #0F172A) !important;
    border-color: var(--admin-primary, #1D4ED8) !important;
    box-shadow: 0 0 0 3px rgba(29, 78, 216, 0.18) !important;
    outline: none !important;
}

.form-label, .admin-label {
    font-size: 0.8125rem !important;
    font-weight: 700 !important;
    color: var(--admin-text-secondary, #334155) !important;
    margin-bottom: 0.4rem !important;
    display: inline-block !important;
}

/* 7. Comprehensive Global Visual Clarity Rules (Contrast, Surfaces, Typography) */

/* Core Typography Hierarchy */
.admin-page-title {
    font-size: 1.5rem !important;
    font-weight: 800 !important;
    color: var(--admin-text-primary, #0F172A) !important;
    letter-spacing: -0.02em !important;
}

.admin-section-title {
    font-size: 1rem !important;
    font-weight: 800 !important;
    color: var(--admin-text-primary, #0F172A) !important;
}

.admin-label,
label.form-label,
.dossier-label,
.field-label,
span.text-label {
    font-size: 0.8125rem !important;
    font-weight: 600 !important;
    color: var(--admin-text-secondary, #475569) !important;
}

.admin-value,
.dossier-value,
.field-value,
span.text-value,
.table-cell-primary {
    font-size: 0.875rem !important;
    font-weight: 600 !important;
    color: var(--admin-text-primary, #0F172A) !important;
    word-break: break-word !important;
}

.admin-value-prominent {
    font-size: 1.125rem !important;
    font-weight: 800 !important;
    color: var(--admin-text-primary, #0F172A) !important;
}

.admin-secondary-text,
.text-secondary-muted {
    font-size: 0.8125rem !important;
    color: var(--admin-text-secondary, #475569) !important;
}

.admin-muted-hint {
    font-size: 0.75rem !important;
    color: var(--admin-text-muted, #64748B) !important;
}

/* Contrast Elevation Safety Net for Main Content Area:
   Prevents text on light cards from being washed out if hardcoded with text-slate-400 / text-gray-400 */
[data-theme="light"] #mainWrapper span.text-slate-400:not(.admin-sidebar-logo-plaque *):not(.sidebar-text),
[data-theme="light"] #mainWrapper p.text-slate-400,
[data-theme="light"] #mainWrapper div.text-slate-400:not(.pulse-dot),
[data-theme="light"] #mainWrapper label.text-slate-400,
[data-theme="light"] #mainWrapper td.text-slate-400,
[data-theme="light"] #mainWrapper th.text-slate-400,
[data-theme="light"] #mainWrapper span.text-gray-400,
[data-theme="light"] #mainWrapper p.text-gray-400,
[data-theme="light"] #mainWrapper div.text-gray-400,
[data-theme="light"] #mainWrapper label.text-gray-400,
[data-theme="light"] #mainWrapper td.text-gray-400,
[data-theme="light"] #mainWrapper th.text-gray-400 {
    color: #64748B !important; /* Minimum 4.6:1 contrast ratio against white */
}

/* Ensure empty dash placeholders are clean */
#mainWrapper span.text-slate-400:empty,
#mainWrapper span.text-gray-400:empty {
    color: #94A3B8 !important;
}

/* 8. Unified Empty States */
.admin-empty-state,
.empty-state-card {
    border: 1.5px dashed #CBD5E1 !important;
    background-color: #FFFFFF !important;
    border-radius: 16px !important;
    padding: 3rem 1.5rem !important;
    text-align: center !important;
    box-shadow: 0 1px 2px rgba(15, 23, 42, 0.02) !important;
}

.admin-empty-state-icon {
    font-size: 2.75rem !important;
    color: #94A3B8 !important;
    margin-bottom: 0.75rem !important;
    display: inline-block !important;
}

.admin-empty-state-title {
    font-size: 1rem !important;
    font-weight: 800 !important;
    color: #1E293B !important;
    margin-bottom: 0.35rem !important;
}

.admin-empty-state-desc {
    font-size: 0.875rem !important;
    color: #64748B !important;
    max-width: 28rem !important;
    margin: 0 auto !important;
    line-height: 1.5 !important;
}

/* 9. Unified Bento Metrics Strips */
.bento-metric-card,
.stat-card {
    background-color: #FFFFFF !important;
    border: 1px solid #E2E8F0 !important;
    border-radius: 14px !important;
    padding: 1rem 1.25rem !important;
    box-shadow: 0 1px 3px rgba(15, 23, 42, 0.03) !important;
    transition: all 0.18s ease !important;
}

.bento-metric-card:hover,
.stat-card:hover {
    border-color: #CBD5E1 !important;
    box-shadow: 0 4px 12px -2px rgba(15, 23, 42, 0.05) !important;
}

.bento-metric-label {
    font-size: 0.75rem !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.04em !important;
    color: #64748B !important;
}

.bento-metric-value {
    font-size: 1.35rem !important;
    font-weight: 800 !important;
    color: #0F172A !important;
    letter-spacing: -0.02em !important;
}

/* 10. Unified Breadcrumbs */
.admin-breadcrumb {
    display: flex !important;
    align-items: center !important;
    gap: 0.5rem !important;
    font-size: 0.8125rem !important;
    color: #64748B !important;
}

.admin-breadcrumb a {
    color: #475569 !important;
    font-weight: 600 !important;
    text-decoration: none !important;
    transition: color 0.15s ease !important;
}

.admin-breadcrumb a:hover {
    color: #1D4ED8 !important;
}

.admin-breadcrumb .active,
.admin-breadcrumb span.current {
    color: #0F172A !important;
    font-weight: 700 !important;
}

/* 11. Alerts Contrast & Polish */
.alert {
    border-radius: 14px !important;
    padding: 0.9rem 1.25rem !important;
    font-size: 0.875rem !important;
    font-weight: 600 !important;
    display: flex !important;
    align-items: center !important;
    gap: 0.75rem !important;
}

.alert-success {
    background-color: #ECFDF5 !important;
    border: 1px solid #A7F3D0 !important;
    color: #065F46 !important;
}

.alert-warning {
    background-color: #FFFBEB !important;
    border: 1px solid #FDE68A !important;
    color: #92400E !important;
}

.alert-info {
    background-color: #EFF6FF !important;
    border: 1px solid #BFDBFE !important;
    color: #1E40AF !important;
}

.alert-danger {
    background-color: #FEF2F2 !important;
    border: 1px solid #FECACA !important;
    color: #991B1B !important;
}

/* 12. Readonly & Disabled Controls Clarity */
input[readonly], textarea[readonly], select[disabled], input[disabled] {
    background-color: #F8FAFC !important;
    border-color: #E2E8F0 !important;
    color: #334155 !important;
    font-weight: 500 !important;
    cursor: default !important;
}

/* 13. High-Contrast Focus Ring */
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
button:focus-visible {
    outline: none !important;
    border-color: #1D4ED8 !important;
    box-shadow: 0 0 0 3px rgba(29, 78, 216, 0.18) !important;
}

/* ==========================================================================
   14. STANDARDIZED ADMIN ATTACHMENT CARD SYSTEM
   ========================================================================== */

.admin-attachment-card {
    display: flex !important;
    flex-direction: column !important;
    background-color: #FFFFFF !important;
    border: 1px solid #E2E8F0 !important;
    border-radius: 0.875rem !important; /* 14px */
    overflow: hidden !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    box-shadow: 0 1px 3px rgba(15, 23, 42, 0.04) !important;
    transition: all 0.2s ease-in-out !important;
    box-sizing: border-box !important;
}

.admin-attachment-card:hover {
    border-color: #CBD5E1 !important;
    box-shadow: 0 4px 12px -2px rgba(15, 23, 42, 0.07) !important;
}

/* Tier 1: Preview */
.admin-attachment-preview {
    position: relative !important;
    width: 100% !important;
    min-width: 0 !important;
    background-color: rgba(15, 23, 42, 0.03) !important;
    border-bottom: 1px solid #E2E8F0 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    overflow: hidden !important;
    box-sizing: border-box !important;
}

.admin-attachment-preview-img {
    height: 14rem !important; /* 224px fixed height for consistency */
    max-height: 16rem !important;
    padding: 0.75rem !important;
}

.admin-attachment-preview-img img {
    max-height: 100% !important;
    width: 100% !important;
    object-fit: contain !important;
    border-radius: 0.5rem !important;
    transition: transform 0.3s ease !important;
}

.admin-attachment-card:hover .admin-attachment-preview-img img {
    transform: scale(1.025) !important;
}

.admin-attachment-fullscreen-btn {
    position: absolute !important;
    inset-inline-end: 0.625rem !important;
    bottom: 0.625rem !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 0.375rem !important;
    padding: 0.35rem 0.65rem !important;
    background-color: rgba(15, 23, 42, 0.85) !important;
    color: #FFFFFF !important;
    font-size: 0.6875rem !important; /* 11px */
    font-weight: 700 !important;
    border-radius: 0.5rem !important;
    backdrop-filter: blur(4px) !important;
    -webkit-backdrop-filter: blur(4px) !important;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.18) !important;
    transition: all 0.2s ease !important;
    text-decoration: none !important;
    z-index: 10 !important;
}

.admin-attachment-fullscreen-btn:hover {
    background-color: #0F172A !important;
    color: #FFFFFF !important;
    transform: translateY(-1px) !important;
}

/* Tier 1 - Document Banner for non-images */
.admin-attachment-doc-banner {
    padding: 1.75rem 1rem !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 0.5rem !important;
    background: linear-gradient(180deg, #F8FAFC 0%, #F1F5F9 100%) !important;
}

.admin-attachment-doc-icon {
    width: 3.5rem !important;
    height: 3.5rem !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    border-radius: 0.875rem !important;
    font-size: 1.85rem !important;
    border: 1px solid transparent !important;
    box-shadow: 0 2px 4px rgba(15, 23, 42, 0.04) !important;
}

.admin-attachment-doc-icon.pdf {
    background-color: #FEF2F2 !important;
    color: #DC2626 !important;
    border-color: #FECACA !important;
}

.admin-attachment-doc-icon.doc {
    background-color: #EFF6FF !important;
    color: #2563EB !important;
    border-color: #BFDBFE !important;
}

.admin-attachment-doc-icon.excel {
    background-color: #ECFDF5 !important;
    color: #059669 !important;
    border-color: #A7F3D0 !important;
}

.admin-attachment-doc-icon.zip {
    background-color: #FFFBEB !important;
    color: #D97706 !important;
    border-color: #FDE68A !important;
}

.admin-attachment-doc-icon.generic {
    background-color: #F1F5F9 !important;
    color: #475569 !important;
    border-color: #CBD5E1 !important;
}

/* Tier 2: Metadata Body */
.admin-attachment-body {
    padding: 0.875rem 1rem !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 0.5rem !important;
    width: 100% !important;
    min-width: 0 !important;
    box-sizing: border-box !important;
}

.admin-attachment-filename {
    font-size: 0.75rem !important; /* 12px */
    font-weight: 700 !important;
    color: #0F172A !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    direction: auto !important;
    font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace !important;
    line-height: 1.35 !important;
}

.admin-attachment-meta-row {
    display: flex !important;
    align-items: center !important;
    flex-wrap: wrap !important;
    gap: 0.375rem !important;
    font-size: 0.6875rem !important; /* 11px */
    color: #64748B !important;
    width: 100% !important;
    min-width: 0 !important;
    line-height: 1.25 !important;
}

.admin-attachment-badge {
    display: inline-flex !important;
    align-items: center !important;
    padding: 0.125rem 0.375rem !important;
    background-color: #F1F5F9 !important;
    color: #334155 !important;
    font-weight: 700 !important;
    font-size: 0.625rem !important; /* 10px */
    text-transform: uppercase !important;
    border-radius: 0.25rem !important;
    border: 1px solid #E2E8F0 !important;
    letter-spacing: 0.025em !important;
    flex-shrink: 0 !important;
}

.admin-attachment-size {
    white-space: nowrap !important;
    font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace !important;
    color: #475569 !important;
    font-weight: 600 !important;
    flex-shrink: 0 !important;
}

.admin-attachment-label {
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
    max-width: 180px !important;
    color: #64748B !important;
    font-weight: 500 !important;
}

/* Tier 3: Actions Bar */
.admin-attachment-actions {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 0.5rem !important;
    width: 100% !important;
    padding-top: 0.625rem !important;
    border-top: 1px solid #F1F5F9 !important;
    margin-top: 0.125rem !important;
    box-sizing: border-box !important;
}

.admin-attachment-actions.single-action {
    grid-template-columns: 1fr !important;
}

.admin-attachment-btn {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 0.375rem !important;
    padding: 0.4375rem 0.5rem !important;
    font-size: 0.75rem !important; /* 12px */
    font-weight: 700 !important;
    border-radius: 0.5rem !important;
    text-align: center !important;
    text-decoration: none !important;
    white-space: nowrap !important;
    min-width: 0 !important;
    width: 100% !important;
    transition: all 0.15s ease-in-out !important;
    box-sizing: border-box !important;
    cursor: pointer !important;
}

.admin-attachment-btn span {
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
}

.admin-attachment-btn-secondary {
    background-color: #F1F5F9 !important;
    color: #334155 !important;
    border: 1px solid #E2E8F0 !important;
}

.admin-attachment-btn-secondary:hover {
    background-color: #E2E8F0 !important;
    color: #0F172A !important;
    border-color: #CBD5E1 !important;
}

.admin-attachment-btn-primary {
    background-color: #EFF6FF !important;
    color: #1D4ED8 !important;
    border: 1px solid #BFDBFE !important;
}

.admin-attachment-btn-primary:hover {
    background-color: #DBEAFE !important;
    color: #1E40AF !important;
    border-color: #93C5FD !important;
}

@media (max-width: 320px) {
    .admin-attachment-actions {
        grid-template-columns: 1fr !important;
    }
}