/* Limit the size of the company logo on the portal and other views */
.logo img,
.navbar-brand img,
.text-center.logo img {
    max-width: 200px !important;
    height: auto !important;
    display: inline-block;
}

/* Fix dashboard top logo from growing too tall and getting cut off */
#logo img {
    max-height: 36px !important;
    width: auto !important;
}

#logo a.logo {
    display: flex !important;
    align-items: center !important;
    height: 100% !important;
}

/* Ensure the logo is centered if needed */
.text-center.logo {
    margin-bottom: 20px;
}

/* Premium DataTables Styling for De Productions (Stripe/Vercel Floating Card Style) */
table.table-projects {
    border-collapse: separate !important;
    border-spacing: 0 8px !important;
    background-color: transparent !important;
    width: 100% !important;
}

table.table-projects thead th {
    background-color: #f1f5f9 !important;
    color: #475569 !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    font-size: 11px !important;
    letter-spacing: 0.05em !important;
    border: none !important;
    padding: 12px 16px !important;
}

table.table-projects tbody tr {
    background-color: #ffffff !important;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.02), 0 1px 2px rgba(0, 0, 0, 0.04) !important;
    transition: all 0.2s ease-in-out !important;
}

table.table-projects tbody tr:hover {
    background-color: #f8fafc !important;
    transform: translateY(-1px) !important;
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.05), 0 2px 4px -1px rgba(0, 0, 0, 0.03) !important;
}

table.table-projects tbody td {
    padding: 14px 16px !important;
    border-top: 1px solid #e2e8f0 !important;
    border-bottom: 1px solid #e2e8f0 !important;
    vertical-align: middle !important;
    background-color: #ffffff !important;
    transition: background-color 0.2s ease-in-out !important;
}

table.table-projects tbody tr:hover td {
    background-color: #f8fafc !important;
}

table.table-projects tbody td:first-child {
    border-left: 1px solid #e2e8f0 !important;
    border-top-left-radius: 8px !important;
    border-bottom-left-radius: 8px !important;
}

table.table-projects tbody td:last-child {
    border-right: 1px solid #e2e8f0 !important;
    border-top-right-radius: 8px !important;
    border-bottom-right-radius: 8px !important;
}

/* Row actions premium micro-animation */
table.table-projects .row-options {
    opacity: 0.1;
    transform: translateY(1px);
    transition: all 0.2s ease-in-out;
}

table.table-projects tr:hover .row-options {
    opacity: 1;
    transform: translateY(0);
}

/* Styling responsive scrollbar for DataTables */
.table-responsive,
.dataTables_wrapper,
.panel-table-full {
    overflow-x: auto !important;
    scrollbar-width: thin;
    scrollbar-color: #cbd5e1 transparent;
    -webkit-overflow-scrolling: touch;
}

.table-responsive::-webkit-scrollbar,
.dataTables_wrapper::-webkit-scrollbar,
.panel-table-full::-webkit-scrollbar {
    height: 6px;
}

.table-responsive::-webkit-scrollbar-track,
.dataTables_wrapper::-webkit-scrollbar-track,
.panel-table-full::-webkit-scrollbar-track {
    background: transparent;
}

.table-responsive::-webkit-scrollbar-thumb,
.dataTables_wrapper::-webkit-scrollbar-thumb,
.panel-table-full::-webkit-scrollbar-thumb {
    background-color: #cbd5e1;
    border-radius: 6px;
    border: 2px solid transparent;
}

/* Ensure no text-wrapping issues for status badges, tags, and financials */
table.table-projects tbody td {
    white-space: nowrap;
}

/* Allow project name cell to wrap naturally (Column 2) */
table.table-projects tbody td:nth-child(2) {
    white-space: normal !important;
    min-width: 180px;
    max-width: 250px;
}

/* Allow client cell to wrap naturally (Column 3) to prevent excessive width */
table.table-projects tbody td:nth-child(3) {
    white-space: normal !important;
    min-width: 120px;
    max-width: 160px;
}

/* Financial Summary Light Mode Defaults */
.project-financial-label {
    color: #475569;
}
.project-financial-value {
    color: #1e293b;
    font-weight: 600;
}
.project-financial-label-cost {
    color: #64748b;
}
.project-financial-cost {
    color: #475569;
}

/* ==========================================
   Dark Theme (HUD Theme) Overrides
   ========================================== */

/* Dark Theme Table Rows (Floating Card Style) */
.dark-theme table.table-projects tbody tr {
    background-color: #111424 !important; /* Slate navy card background */
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.4), 0 2px 4px -1px rgba(0, 0, 0, 0.2) !important;
}

.dark-theme table.table-projects tbody tr:hover {
    background-color: #1b1f38 !important; /* Slightly lighter on hover */
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.5), 0 4px 6px -2px rgba(0, 0, 0, 0.3) !important;
}

/* Dark Theme Table Cells */
.dark-theme table.table-projects tbody td {
    background-color: #111424 !important;
    border-top: 1px solid rgba(255, 255, 255, 0.05) !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.05) !important;
    color: #cbd5e1 !important; /* Clear Slate-300 readable text */
    transition: background-color 0.2s ease-in-out !important;
}

.dark-theme table.table-projects tbody tr:hover td {
    background-color: #1b1f38 !important;
}

.dark-theme table.table-projects tbody td:first-child {
    border-left: 1px solid rgba(255, 255, 255, 0.05) !important;
}

.dark-theme table.table-projects tbody td:last-child {
    border-right: 1px solid rgba(255, 255, 255, 0.05) !important;
}

/* Dark Theme Header */
.dark-theme table.table-projects thead th {
    background-color: #0b0c1f !important;
    color: #38bdf8 !important; /* High contrast cyan/teal header */
    border: none !important;
}

/* Dark Theme Link Styling */
.dark-theme table.table-projects a {
    color: #38bdf8 !important;
    transition: color 0.15s ease;
}

.dark-theme table.table-projects a:hover {
    color: #7dd3fc !important;
    text-decoration: underline !important;
}

/* Brighten Project Name Title Links */
.dark-theme table.table-projects tbody td:nth-child(2) a {
    color: #f8fafc !important; /* Off-white for high title emphasis */
}

.dark-theme table.table-projects tbody td:nth-child(2) a:hover {
    color: #38bdf8 !important;
    text-decoration: none !important;
}

/* Muted Subtitles & Tooltip Icons in Dark Mode */
.dark-theme table.table-projects .text-muted,
.dark-theme table.table-projects .tw-text-neutral-500 {
    color: #94a3b8 !important;
}

.dark-theme table.table-projects .fa-circle-question {
    color: #64748b !important;
}

/* Financial Classes Dark Mode Adjustments */
.dark-theme .project-financial-label {
    color: #94a3b8 !important;
}

.dark-theme .project-financial-value {
    color: #f8fafc !important;
}

.dark-theme .project-financial-label-cost {
    color: #64748b !important;
}

.dark-theme .project-financial-cost {
    color: #cbd5e1 !important;
}

/* Responsive Thin Scrollbar Glow in Dark Mode */
.dark-theme .table-responsive::-webkit-scrollbar-thumb,
.dark-theme .dataTables_wrapper::-webkit-scrollbar-thumb,
.dark-theme .panel-table-full::-webkit-scrollbar-thumb {
    background-color: #38bdf8 !important;
}

/* Custom Table Badges Styling (Free of HUD Theme .label overrides) */

/* 1. Project Profit Badge */
.project-profit-badge {
    display: inline-flex !important;
    align-items: center !important;
    gap: 4px !important;
    padding: 2px 6px !important;
    border-radius: 4px !important;
    font-weight: 700 !important;
    font-size: 11px !important;
    text-align: center !important;
    white-space: nowrap !important;
}

.project-profit-badge.profit-positive {
    background-color: #f0fdf4 !important;
    color: #16a34a !important;
    border: 1px solid #bbf7d0 !important;
}

.project-profit-badge.profit-negative {
    background-color: #fef2f2 !important;
    color: #dc2626 !important;
    border: 1px solid #fecaca !important;
}

.dark-theme .project-profit-badge.profit-positive {
    background-color: rgba(22, 163, 74, 0.15) !important;
    color: #4ade80 !important;
    border: 1px solid rgba(22, 163, 74, 0.3) !important;
}

.dark-theme .project-profit-badge.profit-negative {
    background-color: rgba(220, 38, 38, 0.15) !important;
    color: #f87171 !important;
    border: 1px solid rgba(220, 38, 38, 0.3) !important;
}

/* 2. Project Invoice Badge */
.project-invoice-badge {
    display: inline-block !important;
    padding: 2px 6px !important;
    border-radius: 4px !important;
    font-weight: 600 !important;
    font-size: 10px !important;
    text-align: center !important;
    white-space: nowrap !important;
}

.project-invoice-badge.invoice-unpaid {
    background-color: #fef3c7 !important;
    color: #d97706 !important;
    border: 1px solid #f59e0b !important;
}

.project-invoice-badge.invoice-in-progress {
    background-color: #ffedd5 !important;
    color: #c2410c !important;
    border: 1px solid #fed7aa !important;
}

.project-invoice-badge.invoice-paid {
    background-color: #f0fdf4 !important;
    color: #15803d !important;
    border: 1px solid #22c55e !important;
}

.dark-theme .project-invoice-badge.invoice-unpaid {
    background-color: rgba(217, 119, 6, 0.15) !important;
    color: #fbbf24 !important;
    border: 1px solid rgba(217, 119, 6, 0.3) !important;
}

.dark-theme .project-invoice-badge.invoice-in-progress {
    background-color: rgba(194, 65, 12, 0.15) !important;
    color: #f97316 !important;
    border: 1px solid rgba(194, 65, 12, 0.3) !important;
}

.dark-theme .project-invoice-badge.invoice-paid {
    background-color: rgba(22, 163, 74, 0.15) !important;
    color: #4ade80 !important;
    border: 1px solid rgba(22, 163, 74, 0.3) !important;
}

/* 3. General Project Status Badge Layout */
.project-status-badge {
    display: inline-block !important;
    padding: 3px 8px !important;
    border-radius: 4px !important;
    font-weight: 600 !important;
    font-size: 11px !important;
    text-align: center !important;
    white-space: nowrap !important;
}

/* Prevent table card border, shadow, and row number clipping on the left and right edges */
.panel-table-full {
    margin-left: 0 !important;
    margin-right: 0 !important;
    padding-left: 20px !important;
    padding-right: 20px !important;
    box-sizing: border-box !important;
}

.dataTables_wrapper,
.table-responsive {
    margin-left: 0 !important;
    margin-right: 0 !important;
}

/* Premium Financial Info Card */
.project-financial-info-card {
    background-color: #f8fafc !important;
    border-color: #e2e8f0 !important;
    color: #334155 !important;
}

.project-financial-info-card .financial-card-title {
    color: #1e293b !important;
}

.project-financial-info-card .financial-card-desc {
    color: #64748b !important;
}

.project-financial-info-card .financial-card-code {
    background-color: #f1f5f9 !important;
    color: #0284c7 !important;
}

/* Dark Theme overrides for Financial Info Card */
.dark-theme .project-financial-info-card {
    background-color: #111424 !important;
    border-color: rgba(255, 255, 255, 0.05) !important;
    color: #cbd5e1 !important;
}

.dark-theme .project-financial-info-card .financial-card-title {
    color: #f8fafc !important;
}

.dark-theme .project-financial-info-card .financial-card-desc {
    color: #94a3b8 !important;
}

.dark-theme .project-financial-info-card .financial-card-code {
    background-color: rgba(2, 132, 199, 0.15) !important;
    color: #38bdf8 !important;
}

/* ==========================================================================
   Modul Pengeluaran & Laba Rugi Otomatis (OPEX vs COGS) Styles
   ========================================================================== */

/* 1. Operational Expense Badge */
.project-invoice-badge.invoice-operational {
    background-color: #f1f5f9 !important;
    color: #475569 !important;
    border: 1px solid #cbd5e1 !important;
}

.dark-theme .project-invoice-badge.invoice-operational {
    background-color: rgba(71, 85, 105, 0.15) !important;
    color: #94a3b8 !important;
    border: 1px solid rgba(71, 85, 105, 0.3) !important;
}

/* ==========================================================================
   Expense Table Badge Styles (Freelancer/Partner/Staff/Creator/Updater)
   ========================================================================== */

/* Base expense badge */
.expense-badge {
    display: inline-block !important;
    font-weight: 500 !important;
    font-size: 10px !important;
    padding: 2px 6px !important;
    border-radius: 4px !important;
    white-space: nowrap !important;
}

/* Freelancer badge - blue sky */
.expense-badge-freelancer {
    background-color: #e0f2fe !important;
    color: #0369a1 !important;
    border: 1px solid #bae6fd !important;
}

/* Partner badge - indigo */
.expense-badge-partner {
    background-color: #e0e7ff !important;
    color: #4338ca !important;
    border: 1px solid #c7d2fe !important;
}

/* Staff/Admin badge - slate */
.expense-badge-staff {
    background-color: #f1f5f9 !important;
    color: #475569 !important;
    border: 1px solid #e2e8f0 !important;
}

/* System badge - neutral gray */
.expense-badge-system {
    background-color: #f1f5f9 !important;
    color: #475569 !important;
    border: 1px solid #cbd5e1 !important;
}

/* Creator badge - green */
.expense-badge-creator {
    background-color: #ecfdf5 !important;
    color: #065f46 !important;
    border: 1px solid #a7f3d0 !important;
}

/* Updater badge - orange */
.expense-badge-updater {
    background-color: #fff7ed !important;
    color: #9a3412 !important;
    border: 1px solid #fed7aa !important;
}

/* --- Dark Theme Overrides --- */
.dark-theme .expense-badge-freelancer {
    background-color: rgba(3, 105, 161, 0.2) !important;
    color: #7dd3fc !important;
    border: 1px solid rgba(3, 105, 161, 0.35) !important;
}

.dark-theme .expense-badge-partner {
    background-color: rgba(67, 56, 202, 0.2) !important;
    color: #a5b4fc !important;
    border: 1px solid rgba(67, 56, 202, 0.35) !important;
}

.dark-theme .expense-badge-staff {
    background-color: rgba(71, 85, 105, 0.2) !important;
    color: #94a3b8 !important;
    border: 1px solid rgba(71, 85, 105, 0.35) !important;
}

.dark-theme .expense-badge-system {
    background-color: rgba(71, 85, 105, 0.15) !important;
    color: #94a3b8 !important;
    border: 1px solid rgba(71, 85, 105, 0.3) !important;
}

.dark-theme .expense-badge-creator {
    background-color: rgba(6, 95, 70, 0.2) !important;
    color: #6ee7b7 !important;
    border: 1px solid rgba(6, 95, 70, 0.35) !important;
}

.dark-theme .expense-badge-updater {
    background-color: rgba(154, 52, 18, 0.2) !important;
    color: #fdba74 !important;
    border: 1px solid rgba(154, 52, 18, 0.35) !important;
}

/* 2. Premium P&L Dashboard Card Grid (Light Mode) */
.project-pl-card {
    background-color: #ffffff !important;
    border: 1px solid #cbd5e1 !important;
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1) !important;
}

.project-pl-card:hover {
    transform: translateY(-2px) !important;
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.05), 0 4px 6px -2px rgba(0, 0, 0, 0.02) !important;
}

.project-pl-card dt {
    letter-spacing: 0.05em !important;
    font-size: 10px !important;
}

.project-pl-card .financial-card-value {
    color: #1e293b !important;
}

/* Specific borders for Light Mode */
.pl-card-net_revenue {
    border-left: 4px solid #16a34a !important;
}
.pl-card-direct_expenses {
    border-left: 4px solid #ea580c !important;
}
.pl-card-gross_profit {
    border-left: 4px solid #0891b2 !important;
}
.pl-card-operational_expenses {
    border-left: 4px solid #64748b !important;
}
.pl-card-net_income {
    border-left: 4px solid #2563eb !important;
    background-color: #f8fafc !important;
}

/* Custom color overrides for labels in Light Mode */
.project-pl-card dt.text-success {
    color: #16a34a !important;
}
.project-pl-card dt.text-warning {
    color: #ea580c !important;
}
.project-pl-card dt.text-info {
    color: #0891b2 !important;
}
.project-pl-card dt.text-muted-c {
    color: #64748b !important;
}
.project-pl-card dt.text-success-bold {
    color: #2563eb !important;
    font-weight: 800 !important;
}

/* 3. Premium P&L Dashboard Card Grid (Dark Theme Overrides) */
.dark-theme .project-pl-card {
    background-color: #111424 !important;
    border: 1px solid rgba(255, 255, 255, 0.05) !important;
}

.dark-theme .project-pl-card:hover {
    background-color: #1b1f38 !important;
    border-color: rgba(255, 255, 255, 0.1) !important;
    box-shadow: 0 10px 20px -3px rgba(0, 0, 0, 0.5), 0 4px 6px -2px rgba(0, 0, 0, 0.3) !important;
}

.dark-theme .project-pl-card .financial-card-value {
    color: #f8fafc !important;
}

/* Specific borders & inner glows for Dark Theme */
.dark-theme .pl-card-net_revenue {
    border-left: 4px solid #4ade80 !important;
    box-shadow: inset 3px 0 0 0 rgba(74, 222, 128, 0.1) !important;
}
.dark-theme .pl-card-direct_expenses {
    border-left: 4px solid #f97316 !important;
    box-shadow: inset 3px 0 0 0 rgba(249, 115, 22, 0.1) !important;
}
.dark-theme .pl-card-gross_profit {
    border-left: 4px solid #22d3ee !important;
    box-shadow: inset 3px 0 0 0 rgba(34, 211, 238, 0.1) !important;
}
.dark-theme .pl-card-operational_expenses {
    border-left: 4px solid #94a3b8 !important;
    box-shadow: inset 3px 0 0 0 rgba(148, 163, 184, 0.1) !important;
}
.dark-theme .pl-card-net_income {
    border-left: 4px solid #60a5fa !important;
    box-shadow: inset 3px 0 0 0 rgba(96, 165, 250, 0.1), 0 0 15px rgba(96, 165, 250, 0.05) !important;
    background-color: #161a30 !important; /* Standout background */
}

/* Custom color overrides for labels in Dark Theme */
.dark-theme .project-pl-card dt.text-success {
    color: #4ade80 !important;
}
.dark-theme .project-pl-card dt.text-warning {
    color: #f97316 !important;
}
.dark-theme .project-pl-card dt.text-info {
    color: #22d3ee !important;
}
.dark-theme .project-pl-card dt.text-muted-c {
    color: #94a3b8 !important;
}
.dark-theme .project-pl-card dt.text-success-bold {
    color: #60a5fa !important;
    font-weight: 800 !important;
}

/* ==========================================================================
   Dashboard Profit Cards & Profitability Overview (Beranda Admin)
   ========================================================================== */

.dashboard-profit-card {
    background-color: #ffffff !important;
    border: 1px solid #e2e8f0 !important;
    border-radius: 8px !important;
    padding: 0 !important;
    min-height: 90px !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: center !important;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
}

.dashboard-profit-card:hover {
    transform: translateY(-2px) !important;
    box-shadow: 0 8px 16px rgba(0, 0, 0, 0.08) !important;
}

.dashboard-profit-card dt {
    font-family: 'Plus Jakarta Sans', sans-serif !important;
    font-size: 12px !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.5px !important;
    margin-bottom: 4px !important;
}

.dashboard-profit-card .financial-value {
    font-family: 'Outfit', sans-serif !important;
    font-size: 20px !important;
    font-weight: 800 !important;
    color: #1e293b !important;
    line-height: 1.2 !important;
}

/* Specific borders & backgrounds in Light Mode */
.profit-card-gross {
    border-left: 4px solid #0ea5e9 !important;
    border-top: 1px solid #e0f2fe !important;
    border-right: 1px solid #e0f2fe !important;
    border-bottom: 1px solid #e0f2fe !important;
    background: linear-gradient(135deg, #ffffff 0%, #f0f9ff 100%) !important;
}
.profit-card-opex {
    border-left: 4px solid #64748b !important;
    border-top: 1px solid #f1f5f9 !important;
    border-right: 1px solid #f1f5f9 !important;
    border-bottom: 1px solid #f1f5f9 !important;
    background: linear-gradient(135deg, #ffffff 0%, #f8fafc 100%) !important;
}
.profit-card-net {
    border-left: 4px solid #10b981 !important;
    border-top: 1px solid #d1fae5 !important;
    border-right: 1px solid #d1fae5 !important;
    border-bottom: 1px solid #d1fae5 !important;
    background: linear-gradient(135deg, #ffffff 0%, #ecfdf5 100%) !important;
}

/* Dark Mode (HUD Theme) Overrides for Dashboard Profit Cards */
.dark-theme .dashboard-profit-card {
    background-color: #111424 !important;
    border: 1px solid rgba(255, 255, 255, 0.05) !important;
    box-shadow: 0 4px 20 rgba(0,0,0,0.25) !important;
}

.dark-theme .dashboard-profit-card:hover {
    background-color: #1b1f38 !important;
    border-color: rgba(255, 255, 255, 0.1) !important;
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.4), 0 4px 6px -2px rgba(0, 0, 0, 0.2) !important;
}

.dark-theme .dashboard-profit-card .financial-value {
    color: #f8fafc !important;
}

.dark-theme .profit-card-gross {
    border-left: 4px solid #0ea5e9 !important;
    border-top: 1px solid rgba(14, 165, 233, 0.15) !important;
    border-right: 1px solid rgba(14, 165, 233, 0.15) !important;
    border-bottom: 1px solid rgba(14, 165, 233, 0.15) !important;
    background: linear-gradient(135deg, #111424 0%, rgba(14, 165, 233, 0.04) 100%) !important;
}
.dark-theme .profit-card-opex {
    border-left: 4px solid #64748b !important;
    border-top: 1px solid rgba(100, 116, 139, 0.15) !important;
    border-right: 1px solid rgba(100, 116, 139, 0.15) !important;
    border-bottom: 1px solid rgba(100, 116, 139, 0.15) !important;
    background: linear-gradient(135deg, #111424 0%, rgba(100, 116, 139, 0.04) 100%) !important;
}
.dark-theme .profit-card-net {
    border-left: 4px solid #10b981 !important;
    border-top: 1px solid rgba(16, 185, 129, 0.15) !important;
    border-right: 1px solid rgba(16, 185, 129, 0.15) !important;
    border-bottom: 1px solid rgba(16, 185, 129, 0.15) !important;
    background: linear-gradient(135deg, #111424 0%, rgba(16, 185, 129, 0.04) 100%) !important;
}

/* ==========================================================================
   FullCalendar Premium Glassmorphic Neon Glows for Custom Event Types
   ========================================================================== */
.fc-event, 
.fc-day-grid-event {
    border-radius: 4px !important;
    padding: 2px 4px !important;
    font-size: 11px !important;
    font-weight: 600 !important;
    border: none !important;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05) !important;
    transition: all 0.15s ease-in-out !important;
}

.fc-event:hover, 
.fc-day-grid-event:hover {
    transform: translateY(-1px) !important;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.15) !important;
    filter: brightness(1.1) !important;
}

/* Specific glows for event colors */
.fc-event[style*="background:#ef4444"],
.fc-event[style*="background: rgb(239, 68, 68)"],
.fc-event[style*="background-color:#ef4444"],
.fc-event[style*="background-color: rgb(239, 68, 68)"] {
    box-shadow: 0 0 8px rgba(239, 68, 68, 0.25) !important;
    border-left: 3px solid #ef4444 !important;
}

.fc-event[style*="background:#f97316"],
.fc-event[style*="background: rgb(249, 115, 22)"],
.fc-event[style*="background-color:#f97316"],
.fc-event[style*="background-color: rgb(249, 115, 22)"] {
    box-shadow: 0 0 8px rgba(249, 115, 22, 0.25) !important;
    border-left: 3px solid #f97316 !important;
}

.fc-event[style*="background:#06b6d4"],
.fc-event[style*="background: rgb(6, 182, 212)"],
.fc-event[style*="background-color:#06b6d4"],
.fc-event[style*="background-color: rgb(6, 182, 212)"] {
    box-shadow: 0 0 8px rgba(6, 182, 212, 0.25) !important;
    border-left: 3px solid #06b6d4 !important;
}

.fc-event[style*="background:#a855f7"],
.fc-event[style*="background: rgb(168, 85, 247)"],
.fc-event[style*="background-color:#a855f7"],
.fc-event[style*="background-color: rgb(168, 85, 247)"] {
    box-shadow: 0 0 8px rgba(168, 85, 247, 0.25) !important;
    border-left: 3px solid #a855f7 !important;
}

.fc-event[style*="background:#10b981"],
.fc-event[style*="background: rgb(16, 185, 129)"],
.fc-event[style*="background-color:#10b981"],
.fc-event[style*="background-color: rgb(16, 185, 129)"] {
    box-shadow: 0 0 8px rgba(16, 185, 129, 0.25) !important;
    border-left: 3px solid #10b981 !important;
}

/* ==========================================================================
   Dark Theme overrides for Calendar Legend
   ========================================================================== */
.dark-theme .calendar-legend {
    background: #111424 !important;
    border-color: rgba(255, 255, 255, 0.05) !important;
}

.dark-theme .calendar-legend > span:first-child {
    color: #94a3b8 !important;
}

.dark-theme .legend-item {
    background: rgba(255, 255, 255, 0.02) !important;
    border-color: rgba(255, 255, 255, 0.05) !important;
    color: #cbd5e1 !important;
}

/* ==========================================================================
   FullCalendar Dark Mode HUD & Premium Glassmorphic Styles
   ========================================================================== */
.dark-theme #calendar {
    background-color: #0b0c1f !important;
    border-radius: 12px !important;
    padding: 15px !important;
    box-shadow: 0 10px 30px -10px rgba(0, 0, 0, 0.4) !important;
}

/* Fix: Remove the white background from days of the other/previous month */
.dark-theme .fc-day-other,
.dark-theme .fc-daygrid-day-other,
.dark-theme td.fc-day-other,
.dark-theme td.fc-daygrid-day-other,
.dark-theme .fc-day-other .fc-daygrid-day-frame,
.dark-theme .fc-daygrid-day-other .fc-daygrid-day-frame {
    background-color: #0d0f1d !important; /* Elegant dark navy shade */
    background: #0d0f1d !important;
    opacity: 0.65 !important;
}

/* Sleek digital borders and high-tech lines */
.dark-theme .fc-theme-standard td,
.dark-theme .fc-theme-standard th,
.dark-theme .fc-scrollgrid,
.dark-theme .fc-theme-standard .fc-list,
.dark-theme .fc-scrollgrid-section > td,
.dark-theme .fc-scrollgrid-section > th {
    border-color: rgba(56, 189, 248, 0.08) !important; /* Soft cyan HUD lines */
}

/* High-tech Weekday Headers (Sen, Sel, Rab, etc.) */
.dark-theme .fc-col-header-cell-cushion {
    color: #38bdf8 !important; /* Neon cyan text */
    font-size: 11px !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.08em !important;
    padding: 8px 0 !important;
}

/* Modern Slate Day Numbers */
.dark-theme .fc-daygrid-day-number {
    color: #94a3b8 !important;
    font-size: 11px !important;
    font-weight: 600 !important;
    padding: 6px 8px !important;
    transition: color 0.15s ease-in-out;
}

.dark-theme .fc-daygrid-day:hover .fc-daygrid-day-number {
    color: #38bdf8 !important; /* Glow cyan on hover */
}

/* Premium Today Highlighting with Neon Cyan Border and Soft Inset Glow */
.dark-theme .fc-day-today {
    background-color: rgba(56, 189, 248, 0.03) !important;
    box-shadow: inset 0 0 10px rgba(56, 189, 248, 0.08) !important;
    border: 1px solid rgba(56, 189, 248, 0.25) !important;
}

.dark-theme .fc-day-today .fc-daygrid-day-number {
    color: #38bdf8 !important; /* Glowing blue day number */
    font-weight: 800 !important;
    text-shadow: 0 0 8px rgba(56, 189, 248, 0.4) !important;
}

/* Subtle grid cell hover floating effect */
.dark-theme .fc-daygrid-day:hover {
    background-color: rgba(255, 255, 255, 0.01) !important;
    cursor: pointer;
}

/* FullCalendar Premium Navigation & View Control Buttons (Sleek HUD Flat Glass) */
.dark-theme .fc-button-primary {
    background-color: #111424 !important;
    border: 1px solid rgba(255, 255, 255, 0.05) !important;
    color: #cbd5e1 !important;
    font-weight: 600 !important;
    font-size: 11px !important;
    text-transform: uppercase !important;
    letter-spacing: 0.04em !important;
    border-radius: 6px !important;
    padding: 6px 14px !important;
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1) !important;
}

.dark-theme .fc-button-primary:hover {
    background-color: #1b1f38 !important;
    border-color: rgba(56, 189, 248, 0.25) !important;
    color: #38bdf8 !important;
    box-shadow: 0 0 10px rgba(56, 189, 248, 0.15) !important;
}

.dark-theme .fc-button-primary:disabled {
    background-color: #0b0c1f !important;
    border-color: rgba(255, 255, 255, 0.02) !important;
    color: #475569 !important;
    opacity: 0.4 !important;
}

/* Active view button styling (e.g. Bulan, Minggu, Hari) */
.dark-theme .fc-button-active {
    background-color: rgba(56, 189, 248, 0.1) !important;
    border-color: #38bdf8 !important;
    color: #38bdf8 !important;
    box-shadow: 0 0 12px rgba(56, 189, 248, 0.2) !important;
}

/* Slick Glowing Header Title (Mei 2026) */
.dark-theme .fc-toolbar-title {
    color: #f8fafc !important;
    font-weight: 700 !important;
    font-size: 20px !important;
    letter-spacing: -0.01em !important;
    text-shadow: 0 2px 10px rgba(0, 0, 0, 0.3) !important;
}

/* Premium Dark Mode Styles for DayGrid Event Text */
.dark-theme .fc-event-title,
.dark-theme .fc-event-time {
    font-size: 11px !important;
    font-weight: 700 !important;
    color: #ffffff !important;
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.6) !important;
}

/* Premium Popover Popups (for "+3 more" events) */
.dark-theme .fc-popover {
    background-color: #111424 !important;
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
    box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.6), 0 10px 10px -5px rgba(0, 0, 0, 0.4) !important;
    border-radius: 8px !important;
}

.dark-theme .fc-popover-header {
    background-color: #0b0c1f !important;
    color: #f8fafc !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.05) !important;
    border-top-left-radius: 8px !important;
    border-top-right-radius: 8px !important;
    font-weight: 700 !important;
    padding: 8px 12px !important;
}

.dark-theme .fc-popover-body {
    background-color: #111424 !important;
    padding: 10px !important;
}


/* ==========================================================================
   Simplified Project Executive Summary Dashboard CSS
   ========================================================================== */

.project-executive-summary {
    padding: 10px 5px;
    font-family: 'Roboto', 'Inter', -apple-system, sans-serif;
}

/* KPI CARDS WITH MODERN GLASSMORPHISM & NEON GLOWS */
.summary-kpi-card {
    position: relative;
    border-radius: 12px;
    padding: 24px;
    overflow: hidden;
    transition: all 0.3s ease;
    box-shadow: 0 4px 20px -2px rgba(0, 0, 0, 0.05);
    background: #ffffff;
    border: 1px solid #e2e8f0;
}

.summary-kpi-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.1);
}

.summary-kpi-card .card-glow {
    position: absolute;
    width: 150px;
    height: 150px;
    border-radius: 50%;
    filter: blur(80px);
    opacity: 0.15;
    top: -50px;
    right: -50px;
    transition: all 0.3s ease;
    pointer-events: none;
}

.summary-kpi-card:hover .card-glow {
    opacity: 0.25;
    transform: scale(1.2);
}

/* GLOW VARIANTS */
.glass-blue {
    border-left: 5px solid #0284c7 !important;
}
.glass-blue .card-glow {
    background: #0284c7;
    background: radial-gradient(circle, rgba(2,132,199,1) 0%, rgba(2,132,199,0) 70%);
}

.glass-red {
    border-left: 5px solid #64748b !important;
}
.glass-red .card-glow {
    background: #64748b;
    background: radial-gradient(circle, rgba(100,116,139,1) 0%, rgba(100,116,139,0) 70%);
}

.glass-green {
    border-left: 5px solid #16a34a !important;
}
.glass-green .card-glow {
    background: #16a34a;
    background: radial-gradient(circle, rgba(22,163,74,1) 0%, rgba(22,163,74,0) 70%);
}

.glass-danger-red {
    border-left: 5px solid #dc2626 !important;
}
.glass-danger-red .card-glow {
    background: #dc2626;
    background: radial-gradient(circle, rgba(220,38,38,1) 0%, rgba(220,38,38,0) 70%);
}

/* CARD DETAILS */
.summary-kpi-card .card-label {
    display: block;
    font-size: 11px;
    font-weight: 700;
    color: #64748b;
    letter-spacing: 0.1em;
    margin-bottom: 8px;
    text-transform: uppercase;
}

.summary-kpi-card .card-label i {
    margin-right: 4px;
}

.summary-kpi-card .card-value {
    font-size: 26px;
    font-weight: 800;
    margin: 0 0 4px 0;
    color: #0f172a;
    letter-spacing: -0.02em;
}

.summary-kpi-card .card-subtext {
    font-size: 12px;
    color: #94a3b8;
    margin: 0;
}

.profit-margin-badge {
    background-color: #dcfce7;
    color: #15803d;
    font-size: 11px;
    font-weight: 700;
    padding: 3px 8px;
    border-radius: 9999px;
    border: 1px solid rgba(21, 128, 61, 0.1);
}

/* TIMELINE AND COUNTDOWN */
.timeline-summary {
    display: flex;
    flex-direction: column;
}

.timeline-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 6px 0;
}

.timeline-label {
    font-size: 13px;
    color: #64748b;
    font-weight: 500;
}

.timeline-value {
    font-size: 14px;
    color: #0f172a;
    font-weight: 600;
}

.countdown-circle-container {
    position: relative;
    width: 140px;
    height: 140px;
    margin: 15px auto 5px auto;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: #f8fafc;
    border: 6px solid #e2e8f0;
    box-shadow: inset 0 2px 5px rgba(0,0,0,0.05);
}

.countdown-circle-glow {
    position: absolute;
    top: -6px;
    left: -6px;
    right: -6px;
    bottom: -6px;
    border-radius: 50%;
    border: 6px solid #0284c7;
    clip-path: polygon(50% 50%, 50% 0%, 100% 0%, 100% 100%, 0% 100%, 0% 50%);
    opacity: 0.8;
}

.countdown-circle-inner {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    z-index: 2;
}

.countdown-days {
    font-size: 34px;
    font-weight: 800;
    color: #0284c7;
    line-height: 1;
}

.countdown-label {
    font-size: 11px;
    color: #64748b;
    font-weight: 600;
    margin-top: 4px;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

/* BADGES AND TABLES */
.project-status-badge {
    display: inline-block;
    padding: 4px 10px;
    font-size: 11px;
    font-weight: 700;
    border-radius: 9999px;
    line-height: 1;
    text-transform: uppercase;
    letter-spacing: 0.02em;
}

.table-summary {
    border-radius: 8px;
    overflow: hidden;
    border: 1px solid #e2e8f0 !important;
}

.table-summary th {
    background-color: #f8fafc !important;
    font-size: 11px !important;
    text-transform: uppercase !important;
    letter-spacing: 0.05em !important;
    font-weight: 700 !important;
    color: #475569 !important;
    border-bottom: 2px solid #e2e8f0 !important;
    padding: 12px 16px !important;
}

.table-summary td {
    padding: 12px 16px !important;
    vertical-align: middle !important;
    font-size: 13px !important;
    color: #334155 !important;
    border: 1px solid #e2e8f0 !important;
}

.table-summary tr:hover td {
    background-color: #f8fafc !important;
}


/* ==========================================================================
   FUTURISTIC & PREMIUM EXECUTIVE SUMMARY DASHBOARD
   ========================================================================== */

/* GENERAL LAYOUT & CONTAINER */
.project-executive-summary {
    padding: 10px 5px;
    font-family: 'Roboto', 'Inter', -apple-system, sans-serif;
}

.style-gap-row {
    margin-top: 25px;
}

/* FUTURISTIC GLASSMORPHIC KPI CARDS */
.summary-kpi-card {
    position: relative;
    border-radius: 16px;
    padding: 24px 24px 28px 24px;
    overflow: hidden;
    transition: all 0.35s cubic-bezier(0.4, 0, 0.2, 1);
    box-shadow: 0 4px 25px -4px rgba(15, 23, 42, 0.04), 0 1px 3px rgba(15, 23, 42, 0.02);
    background: #ffffff;
    border: 1px solid rgba(226, 232, 240, 0.8);
    display: flex;
    align-items: center;
    margin-bottom: 20px;
    height: 125px;
}

.summary-kpi-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 15px 35px -8px rgba(15, 23, 42, 0.08), 0 4px 10px -2px rgba(15, 23, 42, 0.04);
}

.summary-kpi-card .card-glow {
    position: absolute;
    width: 200px;
    height: 200px;
    border-radius: 50%;
    filter: blur(85px);
    opacity: 0.12;
    top: -60px;
    right: -60px;
    transition: all 0.35s ease;
    pointer-events: none;
}

.summary-kpi-card:hover .card-glow {
    opacity: 0.22;
    transform: scale(1.15);
}

/* KPI CARD ICON */
.card-icon-container {
    width: 52px;
    height: 52px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 22px;
    margin-right: 18px;
    flex-shrink: 0;
    transition: all 0.35s ease;
}

.summary-kpi-card:hover .card-icon-container {
    transform: scale(1.05);
}

/* KPI GLASS CARD VARIANTS */
.glass-blue {
    background: linear-gradient(135deg, #ffffff 0%, #f0f9ff 100%);
    border: 1px solid rgba(2, 132, 199, 0.15);
}
.glass-blue .card-icon-container {
    background: rgba(2, 132, 199, 0.08);
    color: #0284c7;
}
.glass-blue .card-glow {
    background: #0284c7;
}

.glass-amber {
    background: linear-gradient(135deg, #ffffff 0%, #fffbeb 100%);
    border: 1px solid rgba(217, 119, 6, 0.15);
}
.glass-amber .card-icon-container {
    background: rgba(217, 119, 6, 0.08);
    color: #d97706;
}
.glass-amber .card-glow {
    background: #d97706;
}

.glass-green {
    background: linear-gradient(135deg, #ffffff 0%, #f0fdf4 100%);
    border: 1px solid rgba(22, 163, 74, 0.15);
}
.glass-green .card-icon-container {
    background: rgba(22, 163, 74, 0.08);
    color: #16a34a;
}
.glass-green .card-glow {
    background: #16a34a;
}

.glass-danger-red {
    background: linear-gradient(135deg, #ffffff 0%, #fef2f2 100%);
    border: 1px solid rgba(220, 38, 38, 0.15);
}
.glass-danger-red .card-icon-container {
    background: rgba(220, 38, 38, 0.08);
    color: #dc2626;
}
.glass-danger-red .card-glow {
    background: #dc2626;
}

/* BOTTOM BAR INDICATOR */
.card-bottom-bar {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 4px;
    border-bottom-left-radius: 16px;
    border-bottom-right-radius: 16px;
    opacity: 0.8;
}
.card-bottom-bar.bg-blue { background-color: #0284c7; }
.card-bottom-bar.bg-amber { background-color: #d97706; }
.card-bottom-bar.bg-green { background-color: #16a34a; }
.card-bottom-bar.bg-danger-red { background-color: #dc2626; }

/* CARD CONTENT */
.summary-kpi-card .card-content {
    flex-grow: 1;
}

.summary-kpi-card .card-label {
    display: block;
    font-size: 10px;
    font-weight: 700;
    color: #64748b;
    letter-spacing: 0.12em;
    margin-bottom: 3px;
    text-transform: uppercase;
}

.summary-kpi-card .card-value {
    font-size: 24px;
    font-weight: 850;
    margin: 0 0 2px 0;
    color: #0f172a;
    letter-spacing: -0.03em;
    line-height: 1.1;
}

.summary-kpi-card .card-subtext {
    font-size: 11px;
    color: #94a3b8;
    margin: 0;
}

/* COST BREAKDOWN BAR & LEGEND */
.cost-breakdown-bar {
    display: flex;
    width: 100%;
    height: 6px;
    border-radius: 3px;
    background-color: #e2e8f0;
    overflow: hidden;
    margin: 6px 0;
}

.cost-bar-fr {
    background-color: #f59e0b;
    height: 100%;
    border-radius: 3px 0 0 3px;
}

.cost-bar-op {
    background-color: #64748b;
    height: 100%;
    border-radius: 0 3px 3px 0;
}

.cost-legend-container {
    display: flex;
    justify-content: space-between;
    font-size: 10.5px;
    color: #64748b;
    margin-top: 4px;
}

.cost-legend-item {
    display: flex;
    align-items: center;
}

.cost-legend-item .dot {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    margin-right: 5px;
    display: inline-block;
}

.dot-fr { background-color: #f59e0b; }
.dot-op { background-color: #64748b; }

/* PROFIT BADGES */
.profit-header-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    margin-bottom: 2px;
}

.profit-margin-badge {
    font-size: 10px;
    font-weight: 700;
    padding: 3px 9px;
    border-radius: 9999px;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    box-shadow: 0 2px 8px rgba(0,0,0,0.02);
}

.profit-positive {
    background-color: rgba(22, 163, 74, 0.12);
    color: #15803d;
    border: 1px solid rgba(22, 163, 74, 0.2);
}

.profit-negative {
    background-color: rgba(220, 38, 38, 0.12);
    color: #b91c1c;
    border: 1px solid rgba(220, 38, 38, 0.2);
}

/* PREMIUM PANELS */
.summary-panel {
    border-radius: 16px;
    border: 1px solid rgba(226, 232, 240, 0.8) !important;
    box-shadow: 0 4px 20px -2px rgba(15, 23, 42, 0.03) !important;
    background-color: #ffffff;
    overflow: hidden;
    margin-bottom: 0px !important;
}

.panel-header-custom {
    display: flex;
    align-items: center;
    margin-bottom: 20px;
    border-bottom: 1px solid #f1f5f9;
    padding-bottom: 15px;
}

.panel-icon-circle {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background-color: #f8fafc;
    color: #475569;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 16px;
    margin-right: 12px;
    border: 1px solid #e2e8f0;
}

.panel-title-custom {
    font-size: 15px;
    font-weight: 700;
    color: #1e293b;
    margin: 0;
}

/* DATE BOXES AND TIMELINE (Futuristic Approach) */
.timeline-summary-container {
    padding: 5px 0;
}

.futuristic-date-box {
    background-color: #f8fafc;
    border-radius: 12px;
    border: 1px solid #e2e8f0;
    padding: 16px;
    margin-bottom: 22px;
}

.date-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.date-lbl {
    font-size: 12px;
    color: #64748b;
    font-weight: 500;
}

.date-val {
    font-size: 13.5px;
    color: #0f172a;
    font-weight: 700;
}

.date-val.text-red {
    color: #ef4444;
}

.date-divider {
    height: 1px;
    background-color: #e2e8f0;
    margin: 12px 0;
}

/* PROGRESS TRACKS */
.futuristic-progress-container {
    position: relative;
    padding: 0 5px;
}

.timeline-ticks {
    display: flex;
    justify-content: space-between;
    font-size: 10px;
    color: #94a3b8;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin-bottom: 6px;
}

.timeline-track {
    position: relative;
    height: 8px;
    border-radius: 4px;
    background-color: #e2e8f0;
    margin-bottom: 16px;
}

.timeline-fill {
    position: absolute;
    height: 100%;
    border-radius: 4px;
    background: linear-gradient(90deg, #38bdf8 0%, #0284c7 100%);
    box-shadow: 0 0 8px rgba(2, 132, 199, 0.4);
}

.timeline-pointer {
    position: absolute;
    top: 50%;
    width: 14px;
    height: 14px;
    border-radius: 50%;
    background-color: #ffffff;
    border: 3px solid #0284c7;
    transform: translate(-50%, -50%);
    box-shadow: 0 0 10px rgba(2, 132, 199, 0.6);
    z-index: 5;
    transition: all 0.3s ease;
}

.timeline-status-info {
    text-align: center;
    font-size: 12.5px;
}

.status-days-left {
    color: #0284c7;
    font-weight: 500;
}

.status-days-left i {
    margin-right: 4px;
}

.status-days-overdue {
    color: #ef4444;
    font-weight: 600;
}

.status-days-overdue i {
    margin-right: 4px;
    animation: blinkGlow 1.5s infinite;
}

@keyframes blinkGlow {
    0% { opacity: 0.5; }
    50% { opacity: 1; filter: drop-shadow(0 0 3px #ef4444); }
    100% { opacity: 0.5; }
}

/* FUTURISTIC TABLES */
.table-futuristic {
    border-collapse: separate !important;
    border-spacing: 0 !important;
    width: 100% !important;
    border: none !important;
}

.table-futuristic th {
    background-color: #f8fafc !important;
    font-size: 10.5px !important;
    text-transform: uppercase !important;
    letter-spacing: 0.08em !important;
    font-weight: 700 !important;
    color: #475569 !important;
    border-bottom: 2px solid #edf2f7 !important;
    border-top: none !important;
    border-left: none !important;
    border-right: none !important;
    padding: 12px 14px !important;
}

.table-futuristic td {
    padding: 14px !important;
    vertical-align: middle !important;
    font-size: 13px !important;
    color: #334155 !important;
    border-bottom: 1px solid #edf2f7 !important;
    border-top: none !important;
    border-left: none !important;
    border-right: none !important;
    background-color: #ffffff !important;
    transition: all 0.2s ease;
}

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

.table-futuristic tbody tr:hover td {
    background-color: #f8fafc !important;
    color: #0f172a !important;
}

/* CELLS AND BADGES */
.job-name-cell {
    font-weight: 600;
    color: #1e293b !important;
}

.freelancer-cell {
    color: #475569;
}

.freelancer-avatar-container {
    display: flex;
    align-items: center;
}

.font-icon-user {
    margin-right: 6px;
    color: #94a3b8;
}

.cost-cell {
    font-weight: 700;
    color: #0f172a;
}

.badge-status-glow {
    display: inline-flex;
    align-items: center;
    padding: 4px 12px 4px 8px;
    font-size: 11px;
    font-weight: 700;
    border-radius: 9999px;
    line-height: 1;
    border: 1px solid transparent;
}

.status-indicator-dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    margin-right: 6px;
    display: inline-block;
}

/* DELIVERABLES COLUMN BADGE/BUTTON */
.btn-deliverable-cloud {
    display: inline-flex;
    align-items: center;
    padding: 5px 12px;
    background: linear-gradient(135deg, #0284c7 0%, #0369a1 100%);
    color: #ffffff !important;
    font-size: 11px;
    font-weight: 700;
    border-radius: 8px;
    text-decoration: none !important;
    box-shadow: 0 2px 8px rgba(2, 132, 199, 0.25);
    transition: all 0.25s ease;
    border: 1px solid rgba(2, 132, 199, 0.1);
}

.btn-deliverable-cloud:hover {
    transform: translateY(-2px);
    background: linear-gradient(135deg, #0369a1 0%, #075985 100%);
    box-shadow: 0 4px 12px rgba(2, 132, 199, 0.4);
}

.btn-deliverable-cloud i {
    margin-right: 5px;
    font-size: 12px;
}

.badge-no-deliverable {
    display: inline-flex;
    align-items: center;
    font-size: 11px;
    color: #94a3b8;
    background-color: #f1f5f9;
    padding: 4px 10px;
    border-radius: 8px;
    font-weight: 600;
}

.badge-no-deliverable i {
    margin-right: 5px;
}

/* OPERATIONAL EXPENSES STYLING */
.badge-category-opex {
    display: inline-block;
    padding: 3px 8px;
    font-size: 11px;
    font-weight: 700;
    background-color: #f1f5f9;
    color: #475569;
    border-radius: 6px;
    border: 1px solid #e2e8f0;
}

.date-cell {
    font-weight: 500;
    color: #64748b !important;
}

.category-cell {
    font-weight: 600;
}

.note-cell {
    color: #64748b;
    font-style: italic;
    font-size: 12px !important;
}

.expense-amount-cell {
    font-weight: 700;
    color: #ef4444 !important;
}

/* EMPTY STATE ILLUSTRATION */
.empty-state-container {
    text-align: center;
    padding: 30px 10px;
}

.empty-icon {
    font-size: 38px;
    color: #cbd5e1;
    margin-bottom: 12px;
}

.empty-text {
    font-size: 13px;
    color: #64748b;
    margin: 0;
}


/* ==========================================
   DASHBOARD INVOICE CARDS - PREMIUM & COLORFUL
   ========================================== */
.dashboard-invoice-card {
    background: #fff;
    border-radius: 8px;
    padding: 0 !important;
    min-height: 90px !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: center !important;
    margin-bottom: 12px;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
    position: relative;
    overflow: hidden;
}

.dashboard-invoice-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 16px rgba(0, 0, 0, 0.08);
}

/* Outstanding (Warning/Orange-Gold) */
.invoice-card-outstanding {
    border-left: 4px solid #fbbf24 !important;
    border-top: 1px solid #fef3c7 !important;
    border-right: 1px solid #fef3c7 !important;
    border-bottom: 1px solid #fef3c7 !important;
    background: linear-gradient(135deg, #ffffff 0%, #fffbeb 100%) !important;
}

.invoice-card-outstanding dt {
    color: #d97706 !important;
    font-size: 13px;
    font-weight: 700 !important;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.invoice-card-outstanding dd div {
    color: #b45309 !important;
    font-size: 20px !important;
    font-weight: 800 !important;
}

/* Past Due (Danger/Red) */
.invoice-card-overdue {
    border-left: 4px solid #f43f5e !important;
    border-top: 1px solid #ffe4e6 !important;
    border-right: 1px solid #ffe4e6 !important;
    border-bottom: 1px solid #ffe4e6 !important;
    background: linear-gradient(135deg, #ffffff 0%, #fff5f5 100%) !important;
}

.invoice-card-overdue dt {
    color: #e11d48 !important;
    font-size: 13px;
    font-weight: 700 !important;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.invoice-card-overdue dd div {
    color: #be123c !important;
    font-size: 20px !important;
    font-weight: 800 !important;
}

/* Paid (Success/Emerald) */
.invoice-card-paid {
    border-left: 4px solid #10b981 !important;
    border-top: 1px solid #d1fae5 !important;
    border-right: 1px solid #d1fae5 !important;
    border-bottom: 1px solid #d1fae5 !important;
    background: linear-gradient(135deg, #ffffff 0%, #ecfdf5 100%) !important;
}

.invoice-card-paid dt {
    color: #059669 !important;
    font-size: 13px;
    font-weight: 700 !important;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.invoice-card-paid dd div {
    color: #047857 !important;
    font-size: 20px !important;
    font-weight: 800 !important;
}

/* Dark Mode Overrides for HUD Dark Theme */
.dark-theme .dashboard-invoice-card {
    background: #111424 !important;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.25) !important;
}

.dark-theme .invoice-card-outstanding {
    border-left: 4px solid #fbbf24 !important;
    border-top: 1px solid rgba(251, 191, 36, 0.15) !important;
    border-right: 1px solid rgba(251, 191, 36, 0.15) !important;
    border-bottom: 1px solid rgba(251, 191, 36, 0.15) !important;
    background: linear-gradient(135deg, #111424 0%, rgba(251, 191, 36, 0.04) 100%) !important;
}

.dark-theme .invoice-card-outstanding dt {
    color: #fbbf24 !important;
}

.dark-theme .invoice-card-outstanding dd div {
    color: #fef3c7 !important;
}

.dark-theme .invoice-card-overdue {
    border-left: 4px solid #f43f5e !important;
    border-top: 1px solid rgba(244, 63, 94, 0.15) !important;
    border-right: 1px solid rgba(244, 63, 94, 0.15) !important;
    border-bottom: 1px solid rgba(244, 63, 94, 0.15) !important;
    background: linear-gradient(135deg, #111424 0%, rgba(244, 63, 94, 0.04) 100%) !important;
}

.dark-theme .invoice-card-overdue dt {
    color: #fb7185 !important;
}

.dark-theme .invoice-card-overdue dd div {
    color: #ffe4e6 !important;
}

.dark-theme .invoice-card-paid {
    border-left: 4px solid #10b981 !important;
    border-top: 1px solid rgba(16, 185, 129, 0.15) !important;
    border-right: 1px solid rgba(16, 185, 129, 0.15) !important;
    border-bottom: 1px solid rgba(16, 185, 129, 0.15) !important;
    background: linear-gradient(135deg, #111424 0%, rgba(16, 185, 129, 0.04) 100%) !important;
}

.dark-theme .invoice-card-paid dt {
    color: #34d399 !important;
}

.dark-theme .invoice-card-paid dd div {
    color: #d1fae5 !important;
}


/* ==========================================================================
   PREMIUM QUICK STATS BUTTONS - MODERN & COLORFUL
   ========================================================================== */
.quick-stats-btn {
    border-radius: 12px !important;
    padding: 12px 18px !important;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
    position: relative !important;
    overflow: hidden !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: center !important;
    border: 1px solid rgba(226, 232, 240, 0.8) !important;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.02) !important;
    text-align: left !important;
    cursor: pointer !important;
    outline: none !important;
}

.quick-stats-btn:hover {
    transform: translateY(-3px) !important;
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.05) !important;
}

/* Status 1: Belum Dibayar (Unpaid - Soft Red-Orange Gradient) */
.quick-stats-unpaid {
    border-left: 4px solid #ef4444 !important;
    background: linear-gradient(135deg, #ffffff 0%, #fef2f2 100%) !important;
}
.quick-stats-unpaid:hover {
    border-color: #ef4444 #e2e8f0 #e2e8f0 #ef4444 !important;
    background: linear-gradient(135deg, #ffffff 0%, #fee2e2 100%) !important;
}
.quick-stats-unpaid .status-text {
    color: #ef4444 !important;
    font-weight: 700 !important;
    font-size: 14px !important;
}
.quick-stats-unpaid .percent-text {
    color: #f87171 !important;
    font-weight: 600 !important;
}
.quick-stats-unpaid .count-text {
    color: #991b1b !important;
    font-weight: 700 !important;
    font-size: 15px !important;
}

/* Status 2: Lunas (Paid - Soft Green Emerald Gradient) */
.quick-stats-paid {
    border-left: 4px solid #10b981 !important;
    background: linear-gradient(135deg, #ffffff 0%, #ecfdf5 100%) !important;
}
.quick-stats-paid:hover {
    border-color: #10b981 #e2e8f0 #e2e8f0 #10b981 !important;
    background: linear-gradient(135deg, #ffffff 0%, #d1fae5 100%) !important;
}
.quick-stats-paid .status-text {
    color: #10b981 !important;
    font-weight: 700 !important;
    font-size: 14px !important;
}
.quick-stats-paid .percent-text {
    color: #34d399 !important;
    font-weight: 600 !important;
}
.quick-stats-paid .count-text {
    color: #065f46 !important;
    font-weight: 700 !important;
    font-size: 15px !important;
}

/* Status 3: Dibayar Sebagian (Partially Paid - Soft Amber Gradient) */
.quick-stats-partially-paid {
    border-left: 4px solid #f59e0b !important;
    background: linear-gradient(135deg, #ffffff 0%, #fffbeb 100%) !important;
}
.quick-stats-partially-paid:hover {
    border-color: #f59e0b #e2e8f0 #e2e8f0 #f59e0b !important;
    background: linear-gradient(135deg, #ffffff 0%, #fef3c7 100%) !important;
}
.quick-stats-partially-paid .status-text {
    color: #d97706 !important;
    font-weight: 700 !important;
    font-size: 14px !important;
}
.quick-stats-partially-paid .percent-text {
    color: #fbbf24 !important;
    font-weight: 600 !important;
}
.quick-stats-partially-paid .count-text {
    color: #92400e !important;
    font-weight: 700 !important;
    font-size: 15px !important;
}

/* Status 4: Terlambat (Overdue - Soft Dark Red/Rose Gradient) */
.quick-stats-overdue {
    border-left: 4px solid #f43f5e !important;
    background: linear-gradient(135deg, #ffffff 0%, #fff5f5 100%) !important;
}
.quick-stats-overdue:hover {
    border-color: #f43f5e #e2e8f0 #e2e8f0 #f43f5e !important;
    background: linear-gradient(135deg, #ffffff 0%, #ffe4e6 100%) !important;
}
.quick-stats-overdue .status-text {
    color: #e11d48 !important;
    font-weight: 700 !important;
    font-size: 14px !important;
}
.quick-stats-overdue .percent-text {
    color: #fb7185 !important;
    font-weight: 600 !important;
}
.quick-stats-overdue .count-text {
    color: #be123c !important;
    font-weight: 700 !important;
    font-size: 15px !important;
}

/* Status 6: Draf (Draft - Soft Slate Gray Gradient) */
.quick-stats-draft {
    border-left: 4px solid #64748b !important;
    background: linear-gradient(135deg, #ffffff 0%, #f8fafc 100%) !important;
}
.quick-stats-draft:hover {
    border-color: #64748b #e2e8f0 #e2e8f0 #64748b !important;
    background: linear-gradient(135deg, #ffffff 0%, #f1f5f9 100%) !important;
}
.quick-stats-draft .status-text {
    color: #475569 !important;
    font-weight: 700 !important;
    font-size: 14px !important;
}
.quick-stats-draft .percent-text {
    color: #94a3b8 !important;
    font-weight: 600 !important;
}
.quick-stats-draft .count-text {
    color: #334155 !important;
    font-weight: 700 !important;
    font-size: 15px !important;
}

/* ==========================================
   Dark Theme support for HUD Dark Theme (Quick Stats)
   ========================================== */
.dark-theme .quick-stats-btn {
    background: #111424 !important;
    border-color: rgba(255, 255, 255, 0.05) !important;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.25) !important;
}

.dark-theme .quick-stats-unpaid {
    border-left: 4px solid #ef4444 !important;
    background: linear-gradient(135deg, #111424 0%, rgba(239, 68, 68, 0.04) 100%) !important;
}
.dark-theme .quick-stats-unpaid:hover {
    border-color: #ef4444 rgba(255,255,255,0.05) rgba(255,255,255,0.05) #ef4444 !important;
    background: linear-gradient(135deg, #111424 0%, rgba(239, 68, 68, 0.08) 100%) !important;
}
.dark-theme .quick-stats-unpaid .status-text { color: #f87171 !important; }
.dark-theme .quick-stats-unpaid .percent-text { color: rgba(248, 113, 113, 0.7) !important; }
.dark-theme .quick-stats-unpaid .count-text { color: #fecaca !important; }

.dark-theme .quick-stats-paid {
    border-left: 4px solid #10b981 !important;
    background: linear-gradient(135deg, #111424 0%, rgba(16, 185, 129, 0.04) 100%) !important;
}
.dark-theme .quick-stats-paid:hover {
    border-color: #10b981 rgba(255,255,255,0.05) rgba(255,255,255,0.05) #10b981 !important;
    background: linear-gradient(135deg, #111424 0%, rgba(16, 185, 129, 0.08) 100%) !important;
}
.dark-theme .quick-stats-paid .status-text { color: #34d399 !important; }
.dark-theme .quick-stats-paid .percent-text { color: rgba(52, 211, 153, 0.7) !important; }
.dark-theme .quick-stats-paid .count-text { color: #a7f3d0 !important; }

.dark-theme .quick-stats-partially-paid {
    border-left: 4px solid #f59e0b !important;
    background: linear-gradient(135deg, #111424 0%, rgba(245, 158, 11, 0.04) 100%) !important;
}
.dark-theme .quick-stats-partially-paid:hover {
    border-color: #f59e0b rgba(255,255,255,0.05) rgba(255,255,255,0.05) #f59e0b !important;
    background: linear-gradient(135deg, #111424 0%, rgba(245, 158, 11, 0.08) 100%) !important;
}
.dark-theme .quick-stats-partially-paid .status-text { color: #fbbf24 !important; }
.dark-theme .quick-stats-partially-paid .percent-text { color: rgba(251, 191, 36, 0.7) !important; }
.dark-theme .quick-stats-partially-paid .count-text { color: #fde68a !important; }

.dark-theme .quick-stats-overdue {
    border-left: 4px solid #f43f5e !important;
    background: linear-gradient(135deg, #111424 0%, rgba(244, 63, 94, 0.04) 100%) !important;
}
.dark-theme .quick-stats-overdue:hover {
    border-color: #f43f5e rgba(255,255,255,0.05) rgba(255,255,255,0.05) #f43f5e !important;
    background: linear-gradient(135deg, #111424 0%, rgba(244, 63, 94, 0.08) 100%) !important;
}
.dark-theme .quick-stats-overdue .status-text { color: #fb7185 !important; }
.dark-theme .quick-stats-overdue .percent-text { color: rgba(251, 113, 133, 0.7) !important; }
.dark-theme .quick-stats-overdue .count-text { color: #ffe4e6 !important; }

.dark-theme .quick-stats-draft {
    border-left: 4px solid #64748b !important;
    background: linear-gradient(135deg, #111424 0%, rgba(100, 116, 139, 0.04) 100%) !important;
}
.dark-theme .quick-stats-draft:hover {
    border-color: #64748b rgba(255,255,255,0.05) rgba(255,255,255,0.05) #64748b !important;
    background: linear-gradient(135deg, #111424 0%, rgba(100, 116, 139, 0.08) 100%) !important;
}
.dark-theme .quick-stats-draft .status-text { color: #94a3b8 !important; }
.dark-theme .quick-stats-draft .percent-text { color: rgba(148, 163, 184, 0.7) !important; }
.dark-theme .quick-stats-draft .count-text { color: #e2e8f0 !important; }


/* ==========================================
   INVOICE SUMMARY CARDS - CUSTOM LABEL/VALUE CLASSES
   ========================================== */

/* Outstanding (Amber/Gold) */
.inv-label-outstanding {
    color: #b45309 !important;
    font-size: 12px;
    font-weight: 700 !important;
    text-transform: uppercase;
    letter-spacing: 0.6px;
}
.inv-value-outstanding {
    color: #92400e !important;
    font-size: 22px !important;
    font-weight: 800 !important;
    line-height: 1.2;
}

/* Past Due (Red/Rose) */
.inv-label-overdue {
    color: #be123c !important;
    font-size: 12px;
    font-weight: 700 !important;
    text-transform: uppercase;
    letter-spacing: 0.6px;
}
.inv-value-overdue {
    color: #9f1239 !important;
    font-size: 22px !important;
    font-weight: 800 !important;
    line-height: 1.2;
}

/* Paid (Emerald Green) */
.inv-label-paid {
    color: #047857 !important;
    font-size: 12px;
    font-weight: 700 !important;
    text-transform: uppercase;
    letter-spacing: 0.6px;
}
.inv-value-paid {
    color: #065f46 !important;
    font-size: 22px !important;
    font-weight: 800 !important;
    line-height: 1.2;
}

/* ==========================================================================
   Expense Table Dark Mode Overrides  
   ========================================================================== */

/* Expenses table floating card style (similar to projects table) */
table.table-expenses {
    border-collapse: separate !important;
    border-spacing: 0 6px !important;
    background-color: transparent !important;
}

table.table-expenses thead th {
    background-color: #f1f5f9 !important;
    color: #475569 !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    font-size: 11px !important;
    letter-spacing: 0.04em !important;
    border: none !important;
    padding: 10px 14px !important;
}

table.table-expenses tbody tr {
    background-color: #ffffff !important;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.02) !important;
    transition: all 0.2s ease-in-out !important;
}

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

table.table-expenses tbody td {
    padding: 10px 14px !important;
    border-top: 1px solid #e2e8f0 !important;
    border-bottom: 1px solid #e2e8f0 !important;
    vertical-align: middle !important;
    background-color: inherit !important;
    transition: background-color 0.2s ease-in-out !important;
}

table.table-expenses tbody td:first-child {
    border-left: 1px solid #e2e8f0 !important;
    border-top-left-radius: 6px !important;
    border-bottom-left-radius: 6px !important;
}

table.table-expenses tbody td:last-child {
    border-right: 1px solid #e2e8f0 !important;
    border-top-right-radius: 6px !important;
    border-bottom-right-radius: 6px !important;
}

table.table-expenses .row-options {
    opacity: 0.1;
    transform: translateY(1px);
    transition: all 0.2s ease-in-out;
}

table.table-expenses tr:hover .row-options {
    opacity: 1;
    transform: translateY(0);
}

/* Dark theme overrides for expenses table */
.dark-theme table.table-expenses thead th {
    background-color: #0b0c1f !important;
    color: #38bdf8 !important;
    border: none !important;
}

.dark-theme table.table-expenses tbody tr {
    background-color: #111424 !important;
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.4) !important;
}

.dark-theme table.table-expenses tbody tr:hover {
    background-color: #1b1f38 !important;
}

.dark-theme table.table-expenses tbody td {
    background-color: #111424 !important;
    border-top: 1px solid rgba(255, 255, 255, 0.05) !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.05) !important;
    color: #cbd5e1 !important;
}

.dark-theme table.table-expenses tbody tr:hover td {
    background-color: #1b1f38 !important;
}

.dark-theme table.table-expenses tbody td:first-child {
    border-left: 1px solid rgba(255, 255, 255, 0.05) !important;
}

.dark-theme table.table-expenses tbody td:last-child {
    border-right: 1px solid rgba(255, 255, 255, 0.05) !important;
}

.dark-theme table.table-expenses a {
    color: #38bdf8 !important;
}

.dark-theme table.table-expenses a:hover {
    color: #7dd3fc !important;
}

.dark-theme table.table-expenses .text-muted {
    color: #94a3b8 !important;
}

/* ==========================================================================
   Expense Form Dark Mode Overrides  
   ========================================================================== */

/* Fix receipt upload area background */
.dark-theme #expense-form .tw-bg-neutral-50 {
    background-color: rgba(255, 255, 255, 0.03) !important;
    border-color: rgba(255, 255, 255, 0.08) !important;
}

/* Fix amount section background */
.dark-theme #expense-form [class*="tw-bg-neutral-50"] {
    background-color: rgba(255, 255, 255, 0.03) !important;
}

.dark-theme #expense-form [class*="tw-border-neutral-200"] {
    border-color: rgba(255, 255, 255, 0.08) !important;
}

/* Fix title color in dark mode */
.dark-theme .tw-text-neutral-700 {
    color: #e2e8f0 !important;
}

/* Dark Mode Invoice Card Labels & Values */
.dark-theme .inv-label-outstanding { color: #fbbf24 !important; }
.dark-theme .inv-value-outstanding { color: #fef3c7 !important; }

.dark-theme .inv-label-overdue { color: #fb7185 !important; }
.dark-theme .inv-value-overdue { color: #ffe4e6 !important; }

.dark-theme .inv-label-paid { color: #34d399 !important; }
.dark-theme .inv-value-paid { color: #d1fae5 !important; }


/* ==========================================
   INVOICE STATUS BADGES - DARK MODE FIX
   Restore proper colors for Bootstrap .label-* classes in dark HUD theme
   ========================================== */

/* Override HUD theme .dark-theme span color for badge spans only */
.dark-theme span.label.label-danger,
.dark-theme span.label.label-success,
.dark-theme span.label.label-warning,
.dark-theme span.label.label-info,
.dark-theme span.label.label-default,
.dark-theme span.label.s-status {
    color: #fff !important;
    font-weight: 600 !important;
    font-size: 11px !important;
    padding: 3px 8px !important;
    border-radius: 4px !important;
    display: inline-block !important;
    letter-spacing: 0.3px;
}

/* Belum Dibayar / Overdue - Red/Rose */
.dark-theme span.label.label-danger,
.dark-theme span.label.invoice-status-1,
.dark-theme span.label.invoice-status-4 {
    background-color: rgba(239, 68, 68, 0.85) !important;
    border: 1px solid rgba(239, 68, 68, 0.5) !important;
    color: #fff !important;
    text-shadow: 0 0 5px rgba(0,0,0,0.4);
    box-shadow: 0 0 8px rgba(239, 68, 68, 0.25) !important;
}

/* Lunas - Emerald Green */
.dark-theme span.label.label-success,
.dark-theme span.label.invoice-status-2 {
    background-color: rgba(16, 185, 129, 0.85) !important;
    border: 1px solid rgba(16, 185, 129, 0.5) !important;
    color: #fff !important;
    text-shadow: 0 0 5px rgba(0,0,0,0.4);
    box-shadow: 0 0 8px rgba(16, 185, 129, 0.25) !important;
}

/* Dibayar Sebagian - Amber */
.dark-theme span.label.label-warning,
.dark-theme span.label.invoice-status-3 {
    background-color: rgba(245, 158, 11, 0.85) !important;
    border: 1px solid rgba(245, 158, 11, 0.5) !important;
    color: #fff !important;
    text-shadow: 0 0 5px rgba(0,0,0,0.4);
    box-shadow: 0 0 8px rgba(245, 158, 11, 0.25) !important;
}

/* Draf / Default / Dibatalkan - Slate Gray */
.dark-theme span.label.label-default,
.dark-theme span.label.invoice-status-5,
.dark-theme span.label.invoice-status-6 {
    background-color: rgba(100, 116, 139, 0.7) !important;
    border: 1px solid rgba(100, 116, 139, 0.4) !important;
    color: #e2e8f0 !important;
    box-shadow: none !important;
}

/* Cyan/Info */
.dark-theme span.label.label-info {
    background-color: rgba(6, 182, 212, 0.75) !important;
    border: 1px solid rgba(6, 182, 212, 0.4) !important;
    color: #fff !important;
    box-shadow: 0 0 8px rgba(6, 182, 212, 0.2) !important;
}

/* General .label in tables - restore visibility */
.dark-theme table .label {
    display: inline-block !important;
    padding: 3px 8px !important;
    border-radius: 4px !important;
    font-weight: 600 !important;
    font-size: 11px !important;
}

/* ==========================================================================
   Receipt (Kwitansi) Column Styling & Modal Dark Mode
   ========================================================================== */

/* Red badge for missing receipt */
.expense-receipt-missing {
    background-color: rgba(239, 68, 68, 0.15) !important;
    color: #ef4444 !important;
    border: 1px solid rgba(239, 68, 68, 0.2) !important;
    padding: 3px 8px !important;
    font-size: 11px !important;
    font-weight: 500 !important;
    border-radius: 4px !important;
    display: inline-block !important;
    text-align: center;
}

/* Green button for existing receipt */
.expense-receipt-exists-btn {
    background-color: #10b981 !important;
    border-color: #10b981 !important;
    color: #ffffff !important;
    font-weight: 500 !important;
    font-size: 11px !important;
    padding: 3px 10px !important;
    border-radius: 4px !important;
    transition: all 0.2s ease-in-out !important;
}

.expense-receipt-exists-btn:hover {
    background-color: #059669 !important;
    border-color: #059669 !important;
    color: #ffffff !important;
}

.expense-receipt-exists-btn i {
    margin-right: 3px;
}

/* Receipt Preview Modal - Light/Default Theme Styling */
#expense_receipt_preview_modal .modal-content {
    border-radius: 8px !important;
    overflow: hidden !important;
    box-shadow: 0 10px 25px -5px rgba(0,0,0,0.1) !important;
    background-color: #ffffff !important;
    border: 1px solid #e2e8f0 !important;
    color: #0f172a !important;
}

#expense_receipt_preview_modal .receipt-preview-modal-header {
    background-color: #f8fafc !important;
    border-bottom: 1px solid #e2e8f0 !important;
}

#expense_receipt_preview_modal .receipt-preview-modal-title {
    color: #0f172a !important; /* Dark Slate in light mode */
}

#expense_receipt_preview_modal .receipt-preview-modal-title i {
    color: #475569 !important; /* Icon color in light mode */
}

#expense_receipt_preview_modal .receipt-preview-close-btn {
    color: #0f172a !important;
    opacity: 0.7 !important;
    text-shadow: none !important;
}

#expense_receipt_preview_modal .receipt-preview-close-btn:hover {
    opacity: 1 !important;
}

#expense_receipt_preview_modal .modal-body {
    background-color: #f1f5f9 !important;
}

#expense_receipt_preview_modal .modal-footer {
    background-color: #f8fafc !important;
    border-top: 1px solid #e2e8f0 !important;
}

/* Receipt Preview Modal - Dark Theme Overrides */
.dark-theme #expense_receipt_preview_modal .modal-content {
    background-color: #1e293b !important;
    border: 1px solid #334155 !important;
    color: #f1f5f9 !important;
    box-shadow: 0 10px 25px -5px rgba(0,0,0,0.5) !important;
}

.dark-theme #expense_receipt_preview_modal .receipt-preview-modal-header {
    background-color: #0f172a !important;
    border-bottom: 1px solid #334155 !important;
}

.dark-theme #expense_receipt_preview_modal .receipt-preview-modal-title {
    color: #f1f5f9 !important; /* Light Slate in dark mode */
}

.dark-theme #expense_receipt_preview_modal .receipt-preview-modal-title i {
    color: #94a3b8 !important; /* Icon color in dark mode */
}

.dark-theme #expense_receipt_preview_modal .receipt-preview-close-btn {
    color: #ffffff !important;
    opacity: 0.8 !important;
}

.dark-theme #expense_receipt_preview_modal .receipt-preview-close-btn:hover {
    opacity: 1 !important;
}

.dark-theme #expense_receipt_preview_modal .modal-body {
    background-color: #0f172a !important;
}

.dark-theme #receipt_preview_frame {
    background-color: #1e293b !important;
    border-color: #334155 !important;
}

.dark-theme #expense_receipt_preview_modal .modal-footer {
    background-color: #0f172a !important;
    border-top: 1px solid #334155 !important;
}

.dark-theme #expense_receipt_preview_modal .btn-default {
    background-color: #334155 !important;
    color: #cbd5e1 !important;
    border-color: #475569 !important;
}

.dark-theme #expense_receipt_preview_modal .btn-default:hover {
    background-color: #475569 !important;
    color: #ffffff !important;
    border-color: #475569 !important;
}

/* Note Badge in Expenses Table - Light Mode */
.expense-note-badge {
    display: inline-block;
    padding: 3px 8px;
    font-size: 10px;
    font-weight: 600;
    color: #6d28d9 !important; /* Elegant Purple/Violet */
    background-color: #f5f3ff !important; /* Soft Purple Background */
    border: 1px solid #ddd6fe !important;
    border-radius: 4px;
    line-height: 1.2;
    margin-top: 4px;
}

/* Note Badge in Expenses Table - Dark Mode */
.dark-theme .expense-note-badge {
    color: #c084fc !important; /* Light Purple for readability in dark theme */
    background-color: rgba(109, 40, 217, 0.15) !important; /* Semi-transparent dark purple */
    border: 1px solid rgba(192, 132, 252, 0.3) !important;
}