/* Modern CSS Design System - Royal Dark Blue Palette */

:root {

    --primary-color: #0d2b45;       /* Deep dark blue */

    --primary-light: #164670;     /* Slightly lighter dark blue */

    --accent-color: #ffaa3b;      /* Elegant gold/amber accent */

    --bg-main: #f4f6fa;           /* Clean background grey */

    --bg-card: #ffffff;           /* Pure white card bg */

    --text-main: #2b3a4a;         /* Charcoal text for readability */

    --text-muted: #708090;        /* Cool grey text */

    --border-color: #e2e8f0;      /* Soft border color */

    --success-color: #10b981;     /* Rich emerald green */

    --warning-color: #f59e0b;     /* Amber warning */

    --danger-color: #ef4444;      /* Modern red */

    --shadow-sm: 0 2px 4px rgba(13, 43, 69, 0.05);

    --shadow-md: 0 10px 15px -3px rgba(13, 43, 69, 0.08), 0 4px 6px -2px rgba(13, 43, 69, 0.05);

    --shadow-lg: 0 20px 25px -5px rgba(13, 43, 69, 0.12), 0 10px 10px -5px rgba(13, 43, 69, 0.08);

    --radius-sm: 6px;

    --radius-md: 12px;

    --radius-lg: 18px;

    --transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);



    /* Dynamic Card Color Customizer Variables */

    /* Default Row 1 (Blue) */

    --row-1-bg-start: #bae6fd;

    --row-1-bg-end: #7dd3fc;

    --row-1-border: #38bdf8;

    --row-1-border-right: #0284c7;

    --row-1-title: #0369a1;

    --row-1-value: #0c4a6e;

    --row-1-icon-bg: rgba(2, 132, 199, 0.15);

    --row-1-icon-color: #0284c7;

    --row-1-shadow-color: rgba(14, 165, 233, 0.2);

    

    /* Default Row 2 (Green) */

    --row-2-bg-start: #bbf7d0;

    --row-2-bg-end: #86efac;

    --row-2-border: #4ade80;

    --row-2-border-right: #059669;

    --row-2-title: #047857;

    --row-2-value: #064e3b;

    --row-2-icon-bg: rgba(5, 150, 105, 0.15);

    --row-2-icon-color: #059669;

    --row-2-shadow-color: rgba(16, 185, 129, 0.2);



    /* Default Row 3 (Orange) */

    --row-3-bg-start: #fde68a;

    --row-3-bg-end: #fcd34d;

    --row-3-border: #f59e0b;

    --row-3-border-right: #d97706;

    --row-3-title: #92400e;

    --row-3-value: #78350f;

    --row-3-icon-bg: rgba(217, 119, 6, 0.15);

    --row-3-icon-color: #d97706;

    --row-3-shadow-color: rgba(245, 158, 11, 0.2);

}



/* Base Styles */

* {

    margin: 0;

    padding: 0;

    box-sizing: border-box;

}



body, button, input, select, textarea, table, th, td, h1, h2, h3, h4, h5, h6, span, p, a, div {

    font-family: 'Cairo', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;

}



html, body {

    height: 100%;

    margin: 0;

    padding: 0;

    overflow: hidden;

}



body {

    background-color: var(--bg-main);

    color: var(--text-main);

    line-height: 1.6;

}



/* Scrollbar styling */

::-webkit-scrollbar {

    width: 8px;

    height: 8px;

}

::-webkit-scrollbar-track {

    background: var(--bg-main);

}

::-webkit-scrollbar-thumb {

    background: var(--primary-light);

    border-radius: 4px;

}

::-webkit-scrollbar-thumb:hover {

    background: var(--primary-color);

}



/* Layout */

.app-container {

    display: flex;

    height: 100%;

    max-height: 100%;

    overflow: hidden;

}



/* Sidebar Navigation */

.sidebar {

    width: 280px;

    height: 100%;

    background: linear-gradient(180deg, var(--primary-color) 0%, #061523 100%);

    color: #ffffff;

    display: flex;

    flex-direction: column;

    padding: 24px 0;

    box-shadow: 4px 0 20px rgba(0, 0, 0, 0.15);

    z-index: 10;

    flex-shrink: 0;

    overflow-y: auto;

    overflow-x: hidden;

}



.sidebar-header {

    padding: 0 24px 30px 24px;

    border-bottom: 1px solid rgba(255, 255, 255, 0.08);

    text-align: center;

}



.logo-icon {

    font-size: 3rem;

    color: var(--accent-color);

    margin-bottom: 12px;

    filter: drop-shadow(0 4px 6px rgba(0, 0, 0, 0.2));

    animation: pulse 3s infinite alternate;

}



.sidebar-header h2 {

    font-size: 1.25rem;

    font-weight: 700;

    letter-spacing: 0.5px;

    margin-bottom: 4px;

}



.sidebar-header .subtitle {

    font-size: 0.8rem;

    color: rgba(255, 255, 255, 0.6);

}



.sidebar-nav {

    flex-grow: 1;

    padding: 24px 12px;

}



.sidebar-nav ul {

    list-style: none;

}



.sidebar-nav li {

    padding: 14px 18px;

    margin-bottom: 8px;

    border-radius: var(--radius-md);

    cursor: pointer;

    font-weight: 600;

    font-size: 0.95rem;

    display: flex;

    align-items: center;

    gap: 12px;

    color: rgba(255, 255, 255, 0.75);

    transition: var(--transition);

    direction: rtl;

    text-align: right;

    white-space: nowrap;

}



.sidebar-nav li i {

    font-size: 1.15rem;

    width: 24px;

    display: inline-flex;

    align-items: center;

    justify-content: center;

    transition: var(--transition);

}



.sidebar-nav li:hover {

    background: rgba(255, 255, 255, 0.05);

    color: #ffffff;

    transform: translateX(-4px);

}



.sidebar-nav li.active {

    background: linear-gradient(90deg, var(--accent-color) 0%, #ff8c00 100%);

    color: #ffffff;

    box-shadow: 0 4px 15px rgba(255, 170, 59, 0.4);

    transform: translateX(-6px);

}



.sidebar-nav li.active i {

    transform: scale(1.15);

}



/* Sidebar Group Frame styling */

.sidebar-group-frame {

    background: rgba(255, 255, 255, 0.015);

    border: 1px solid rgba(255, 255, 255, 0.05);

    border-radius: var(--radius-md);

    padding: 8px;

    margin-bottom: 12px;

    transition: all 0.3s ease;

    display: block !important;

}



.sidebar-group-frame ul {

    display: block !important;

}



/* Sidebar Collapsible Group Styling */

.sidebar-group-title {

    cursor: pointer;

    user-select: none;

    display: flex;

    justify-content: space-between;

    align-items: center;

    transition: margin-bottom 0.25s ease, border-bottom-color 0.25s ease;

}



.sidebar-group-frame.collapsed .sidebar-group-title {

    margin-bottom: 0 !important;

    border-bottom-color: transparent !important;

    padding-bottom: 0 !important;

}



.sidebar-group-frame.collapsed ul {

    display: none !important;

}



.sidebar-group-frame .toggle-icon {

    font-size: 0.72rem;

    transition: transform 0.25s ease;

    opacity: 0.7;

}



.sidebar-group-frame.collapsed .toggle-icon {

    transform: rotate(90deg); /* Points sideways in RTL layout */

}



.sidebar-group-frame.resources-theme {

    background: rgba(99, 102, 241, 0.15); /* Solid premium translucent indigo */

    border: 1px solid rgba(99, 102, 241, 0.45); /* Clearly visible indigo border */

    box-shadow: 0 4px 15px rgba(99, 102, 241, 0.1);

}



.sidebar-group-frame.resources-theme .sidebar-group-title {

    color: #818cf8; /* Bright indigo title */

    font-size: 0.85rem;

    border-bottom: 1px solid rgba(99, 102, 241, 0.2);

    padding-bottom: 6px;

    margin-bottom: 10px;

}



.sidebar-group-frame.resources-theme li {

    color: #eef2ff !important; /* Distinct light indigo-white text color */

}



.sidebar-group-frame.resources-theme li:hover {

    background: rgba(99, 102, 241, 0.25) !important;

    color: #ffffff !important;

}



.sidebar-group-frame.resources-theme li.active {

    background: linear-gradient(90deg, var(--accent-color) 0%, #ff8c00 100%) !important;

    color: #ffffff !important;

    box-shadow: 0 4px 15px rgba(255, 170, 59, 0.4);

}



.sidebar-group-frame.sales-theme {

    background: rgba(16, 185, 129, 0.15); /* Solid premium translucent green */

    border: 1px solid rgba(16, 185, 129, 0.45); /* Clearly visible green border */

    box-shadow: 0 4px 15px rgba(16, 185, 129, 0.1);

}



.sidebar-group-frame.sales-theme .sidebar-group-title {

    color: #34d399; /* Bright mint green title (distinct and clear) */

    font-size: 0.85rem;

    border-bottom: 1px solid rgba(16, 185, 129, 0.2);

    padding-bottom: 6px;

    margin-bottom: 10px;

}



.sidebar-group-frame.sales-theme li {

    color: #e6fffa !important; /* Distinct light green-white text color */

}



.sidebar-group-frame.sales-theme li:hover {

    background: rgba(16, 185, 129, 0.25) !important;

    color: #ffffff !important;

}



.sidebar-group-frame.sales-theme li.active {

    background: linear-gradient(90deg, var(--accent-color) 0%, #ff8c00 100%) !important;

    color: #ffffff !important;

    box-shadow: 0 4px 15px rgba(255, 170, 59, 0.4);

}



.sidebar-group-frame.accounts-theme {

    background: rgba(56, 189, 248, 0.15); /* Solid premium translucent blue */

    border: 1px solid rgba(56, 189, 248, 0.45); /* Clearly visible blue border */

    box-shadow: 0 4px 15px rgba(56, 189, 248, 0.1);

}



.sidebar-group-frame.accounts-theme .sidebar-group-title {

    color: #38bdf8; /* Bright cyan/sky blue title (distinct and clear) */

    font-size: 0.85rem;

    border-bottom: 1px solid rgba(56, 189, 248, 0.2);

    padding-bottom: 6px;

    margin-bottom: 10px;

}



.sidebar-group-frame.accounts-theme li {

    color: #f0f9ff !important; /* Distinct light blue-white text color */

}



.sidebar-group-frame.accounts-theme li:hover {

    background: rgba(56, 189, 248, 0.25) !important;

    color: #ffffff !important;

}



.sidebar-group-frame.accounts-theme li.active {

    background: linear-gradient(90deg, var(--accent-color) 0%, #ff8c00 100%) !important;

    color: #ffffff !important;

    box-shadow: 0 4px 15px rgba(255, 170, 59, 0.4);

}



.sidebar-group-frame.settings-theme {

    background: rgba(255, 170, 59, 0.12); /* Solid premium translucent amber/gold */

    border: 1px solid rgba(255, 170, 59, 0.45); /* Clearly visible amber border */

    box-shadow: 0 4px 15px rgba(255, 170, 59, 0.1);

}



.sidebar-group-frame.settings-theme .sidebar-group-title {

    color: #ffaa3b; /* Bright amber/gold title (distinct and clear) */

    font-size: 0.85rem;

    border-bottom: 1px solid rgba(255, 170, 59, 0.2);

    padding-bottom: 6px;

    margin-bottom: 10px;

}



.sidebar-group-frame.settings-theme li {

    color: #fffbeb !important; /* Distinct light gold-white text color */

}



.sidebar-group-frame.settings-theme li:hover {

    background: rgba(255, 170, 59, 0.25) !important;

    color: #ffffff !important;

}



.sidebar-group-frame.settings-theme li.active {

    background: linear-gradient(90deg, var(--accent-color) 0%, #ff8c00 100%) !important;

    color: #ffffff !important;

    box-shadow: 0 4px 15px rgba(255, 170, 59, 0.4);

}



.sidebar-group-frame.operations-theme {

    background: rgba(244, 63, 94, 0.13); /* Glowing premium translucent Rose/Crimson */

    border: 1px solid rgba(244, 63, 94, 0.45); /* Clearly visible Crimson border */

    box-shadow: 0 4px 15px rgba(244, 63, 94, 0.15);

}



.sidebar-group-frame.operations-theme .sidebar-group-title {

    color: #fb7185; /* Bright Rose Pink title (distinct and clear) */

    font-size: 0.85rem;

    border-bottom: 1px solid rgba(244, 63, 94, 0.2);

    padding-bottom: 6px;

    margin-bottom: 10px;

}



.sidebar-group-frame.operations-theme li {

    color: #fff1f2 !important; /* Distinct light rose-white text color */

}



.sidebar-group-frame.operations-theme li:hover {

    background: rgba(244, 63, 94, 0.25) !important;

    color: #ffffff !important;

}



.sidebar-group-frame.operations-theme li.active {

    background: linear-gradient(90deg, var(--accent-color) 0%, #ff8c00 100%) !important;

    color: #ffffff !important;

    box-shadow: 0 4px 15px rgba(255, 170, 59, 0.4);

}



.sidebar-group-frame.management-theme {

    background: rgba(168, 85, 247, 0.22); /* Glowing royal purple background (very prominent) */

    border: 2px solid rgba(168, 85, 247, 0.55); /* Strong, highly visible purple border */

    box-shadow: 0 4px 20px rgba(168, 85, 247, 0.25); /* Elegant purple outer glow */

}



.sidebar-group-frame.management-theme .sidebar-group-title {

    color: #f3e8ff; /* Clean light lavender title */

    font-size: 0.85rem;

    border-bottom: 1px solid rgba(168, 85, 247, 0.3);

    padding-bottom: 6px;

    margin-bottom: 10px;

    text-shadow: 0 0 8px rgba(168, 85, 247, 0.4);

}



.sidebar-group-frame.management-theme li {

    color: #f5f3ff !important; /* Distinct light lavender-white text color (extremely readable) */

}



.sidebar-group-frame.management-theme li:hover {

    background: rgba(168, 85, 247, 0.3) !important;

    color: #ffffff !important;

}



.sidebar-group-frame.management-theme li.active {

    background: linear-gradient(90deg, var(--accent-color) 0%, #ff8c00 100%) !important;

    color: #ffffff !important;

    box-shadow: 0 4px 15px rgba(255, 170, 59, 0.4);

}



.sidebar-group-title {

    font-size: 0.8rem;

    font-weight: 800;

    margin-bottom: 6px;

    padding: 4px 10px;

    font-family: 'Cairo', sans-serif;

    display: flex;

    align-items: center;

    gap: 8px;

    direction: rtl;

    letter-spacing: 0.5px;

}



.sidebar-footer {

    padding: 20px 24px 0 24px;

    border-top: 1px solid rgba(255, 255, 255, 0.08);

    font-size: 0.75rem;

    text-align: center;

    color: rgba(255, 255, 255, 0.4);

}



/* Main Content Area */

.main-content {

    flex-grow: 1;

    display: flex;

    flex-direction: column;

    height: 100%;

    overflow-y: auto;

    overflow-x: hidden;

    position: relative;

}



/* Header */

.main-header {

    background: var(--bg-card);

    padding: 14px 24px;

    display: flex;

    justify-content: space-between;

    align-items: center;

    box-shadow: var(--shadow-sm);

    border-bottom: 1px solid var(--border-color);

}



.main-header .header-title h1 {

    font-size: 1.5rem;

    font-weight: 700;

    color: var(--primary-color);

    position: relative;

}



.main-header .header-title h1::after {

    content: '';

    position: absolute;

    bottom: -6px;

    right: 0;

    width: 40px;

    height: 3px;

    background-color: var(--accent-color);

    border-radius: 2px;

}



/* Print & PDF Clean Isolation: Prevent decorative header underlines */

@media print, .print-preview-container, .print-content-wrapper, [class*="print-"] {

    .header-title h1::after,

    .header-title h1::before,

    .pdf-report-title::after,

    .pdf-report-title::before,

    h1::after,

    h1::before {

        display: none !important;

        content: none !important;

        width: 0 !important;

        height: 0 !important;

    }

}



.header-actions {

    display: flex;

    gap: 12px;

}



/* Buttons */

.btn {

    padding: 10px 20px;

    border: none;

    border-radius: var(--radius-sm);

    cursor: pointer;

    font-weight: 600;

    font-family: 'Cairo', sans-serif;

    font-size: 0.9rem;

    display: inline-flex;

    align-items: center;

    gap: 8px;

    transition: var(--transition);

}



.btn-sm {

    padding: 6px 12px;

    font-size: 0.8rem;

}



.btn-primary {

    background: linear-gradient(135deg, var(--primary-color) 0%, var(--primary-light) 100%);

    color: #ffffff;

    box-shadow: 0 4px 10px rgba(13, 43, 69, 0.2);

}



.btn-primary:hover {

    transform: translateY(-2px);

    box-shadow: 0 6px 15px rgba(13, 43, 69, 0.3);

}



.btn-secondary {

    background: linear-gradient(135deg, var(--accent-color) 0%, #ff9500 100%);

    color: #ffffff;

    box-shadow: 0 4px 10px rgba(255, 170, 59, 0.25);

}



.btn-secondary:hover {

    transform: translateY(-2px);

    box-shadow: 0 6px 15px rgba(255, 170, 59, 0.35);

}



.btn-danger {

    background: linear-gradient(135deg, var(--danger-color) 0%, #dc2626 100%);

    color: #ffffff;

    box-shadow: 0 4px 10px rgba(239, 68, 68, 0.2);

}



.btn-danger:hover {

    background: linear-gradient(135deg, #f87171 0%, var(--danger-color) 100%);

    transform: translateY(-2px);

    box-shadow: 0 6px 15px rgba(239, 68, 68, 0.3);

}



.btn-success {

    background: linear-gradient(135deg, var(--success-color) 0%, #059669 100%);

    color: #ffffff;

    box-shadow: 0 4px 10px rgba(16, 185, 129, 0.2);

}



.btn-success:hover {

    background: linear-gradient(135deg, #34d399 0%, var(--success-color) 100%);

    transform: translateY(-2px);

    box-shadow: 0 6px 15px rgba(16, 185, 129, 0.3);

}



.btn-warning {

    background: linear-gradient(135deg, var(--warning-color) 0%, #d97706 100%);

    color: #ffffff;

    box-shadow: 0 4px 10px rgba(245, 158, 11, 0.2);

}



.btn-warning:hover {

    background: linear-gradient(135deg, #fbbf24 0%, var(--warning-color) 100%);

    transform: translateY(-2px);

    box-shadow: 0 6px 15px rgba(245, 158, 11, 0.3);

}



.btn-info {

    background: linear-gradient(135deg, #0ea5e9 0%, #0284c7 100%);

    color: #ffffff;

    box-shadow: 0 4px 10px rgba(14, 165, 233, 0.2);

}



.btn-info:hover {

    background: linear-gradient(135deg, #38bdf8 0%, #0ea5e9 100%);

    transform: translateY(-2px);

    box-shadow: 0 6px 15px rgba(14, 165, 233, 0.3);

}



.btn:disabled {

    background: #cbd5e1 !important;

    color: #94a3b8 !important;

    border-color: #cbd5e1 !important;

    cursor: not-allowed !important;

    transform: none !important;

    box-shadow: none !important;

}



/* Content Body */

.content-body {

    padding: 8px 20px 20px 20px !important;

    flex-grow: 1;

}



.tab-section {

    display: none;

}



.tab-section.active {

    display: block;

    animation: fadeIn 0.4s ease-out;

}



/* Dashboard Statistics */

.stats-grid {

    display: grid;

    grid-template-columns: repeat(4, 1fr);

    gap: 12px;

    margin-bottom: 16px;

}



@media (max-width: 1024px) {

    .stats-grid {

        grid-template-columns: repeat(2, 1fr);

    }

}



@media (max-width: 580px) {

    .stats-grid {

        grid-template-columns: 1fr;

    }

}



.stat-card {

    background: var(--bg-card);

    padding: 10px 14px;

    border-radius: var(--radius-md);

    box-shadow: var(--shadow-sm);

    border: 1px solid var(--border-color);

    display: flex;

    align-items: center;

    gap: 10px;

    transition: var(--transition);

    position: relative;

}



.stat-card:hover {

    transform: translateY(-4px);

    box-shadow: var(--shadow-md);

    border-color: rgba(13, 43, 69, 0.15);

}



.card-summary {

    transition: transform 0.25s cubic-bezier(0.4, 0, 0.2, 1), box-shadow 0.25s cubic-bezier(0.4, 0, 0.2, 1) !important;

    cursor: default;

}



.card-summary:hover {

    transform: translateY(-4px) !important;

    box-shadow: 0 10px 20px -3px rgba(0, 0, 0, 0.2) !important;

}



/* Table Action Icon Buttons */

.btn-action-icon {

    width: 32px !important;

    height: 32px !important;

    min-width: 32px !important;

    padding: 0 !important;

    margin: 0 !important;

    display: inline-flex !important;

    align-items: center !important;

    justify-content: center !important;

    border-radius: 6px !important;

    font-size: 0.88rem !important;

    cursor: pointer !important;

    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1) !important;

    border: 1px solid transparent !important;

    text-decoration: none !important;

    box-shadow: 0 1px 2px rgba(0,0,0,0.05) !important;

}

.btn-action-icon:hover {

    transform: translateY(-2px) !important;

    box-shadow: 0 3px 6px rgba(0,0,0,0.12) !important;

}

.btn-action-icon:disabled,

.btn-action-icon[disabled] {

    opacity: 0.35 !important;

    cursor: not-allowed !important;

    pointer-events: auto !important;

    transform: none !important;

    box-shadow: none !important;

    filter: grayscale(70%) !important;

}

.btn-action-icon-blue {

    background: rgba(2, 132, 199, 0.12) !important;

    color: #0284c7 !important;

    border-color: rgba(2, 132, 199, 0.25) !important;

}

.btn-action-icon-blue:hover {

    background: #0284c7 !important;

    color: #ffffff !important;

}

.btn-action-icon-purple {

    background: rgba(124, 58, 237, 0.12) !important;

    color: #7c3aed !important;

    border-color: rgba(124, 58, 237, 0.25) !important;

}

.btn-action-icon-purple:hover {

    background: #7c3aed !important;

    color: #ffffff !important;

}

.btn-action-icon-green {

    background: rgba(16, 185, 129, 0.12) !important;

    color: #10b981 !important;

    border-color: rgba(16, 185, 129, 0.25) !important;

}

.btn-action-icon-green:hover {

    background: #10b981 !important;

    color: #ffffff !important;

}

.btn-action-icon-grey {

    background: rgba(100, 116, 139, 0.12) !important;

    color: #475569 !important;

    border-color: rgba(100, 116, 139, 0.25) !important;

}

.btn-action-icon-grey:hover {

    background: #475569 !important;

    color: #ffffff !important;

}

.btn-action-icon-indigo {

    background: rgba(79, 70, 229, 0.12) !important;

    color: #4f46e5 !important;

    border-color: rgba(79, 70, 229, 0.25) !important;

}

.btn-action-icon-indigo:hover {

    background: #4f46e5 !important;

    color: #ffffff !important;

}

.btn-action-icon-red {

    background: rgba(239, 68, 68, 0.12) !important;

    color: #ef4444 !important;

    border-color: rgba(239, 68, 68, 0.25) !important;

}

.btn-action-icon-red:hover {

    background: #ef4444 !important;

    color: #ffffff !important;

}

.btn-action-icon-amber {

    background: rgba(245, 158, 11, 0.12) !important;

    color: #d97706 !important;

    border-color: rgba(245, 158, 11, 0.25) !important;

}

.btn-action-icon-amber:hover {

    background: #d97706 !important;

    color: #ffffff !important;

}



/* Operational Actions Row + Isolated Admin Delete Bottom */

.table-actions-wrapper {

    display: inline-flex !important;

    flex-direction: column !important;

    align-items: center !important;

    justify-content: center !important;

    gap: 4px !important;

    margin: 0 auto !important;

    vertical-align: middle !important;

}



.table-operational-actions {

    display: inline-flex !important;

    align-items: center !important;

    justify-content: center !important;

    gap: 5px !important;

    flex-wrap: nowrap !important;

}



.table-admin-actions {

    display: inline-flex !important;

    align-items: center !important;

    justify-content: center !important;

    margin-top: 2px !important;

    padding-top: 3px !important;

    border-top: 1px dashed rgba(239, 68, 68, 0.25) !important;

    width: 100% !important;

}



/* Reservations 3 Dropdowns Actions */

.res-actions-dropdowns {

    display: inline-flex !important;

    align-items: center !important;

    justify-content: center !important;

    gap: 4px !important;

    direction: rtl !important;

    position: relative !important;

}



.res-dropdown-wrapper {

    position: relative !important;

    display: inline-block !important;

}



.res-dropdown-btn {

    display: inline-flex !important;

    align-items: center !important;

    justify-content: center !important;

    gap: 4px !important;

    font-family: 'Cairo', sans-serif !important;

    font-size: 0.74rem !important;

    font-weight: 700 !important;

    padding: 4px 7px !important;

    border-radius: 6px !important;

    cursor: pointer !important;

    transition: all 0.2s ease !important;

    white-space: nowrap !important;

    border: 1px solid transparent !important;

    outline: none !important;

}



.res-btn-blue {

    background: rgba(37, 99, 235, 0.08) !important;

    color: #1d4ed8 !important;

    border-color: rgba(37, 99, 235, 0.25) !important;

}

.res-btn-blue:hover, .res-dropdown-wrapper.active .res-btn-blue {

    background: #2563eb !important;

    color: #ffffff !important;

    border-color: #2563eb !important;

    box-shadow: 0 2px 6px rgba(37, 99, 235, 0.3) !important;

}



.res-btn-purple {

    background: rgba(124, 58, 237, 0.08) !important;

    color: #7c3aed !important;

    border-color: rgba(124, 58, 237, 0.25) !important;

}

.res-btn-purple:hover, .res-dropdown-wrapper.active .res-btn-purple {

    background: #7c3aed !important;

    color: #ffffff !important;

    border-color: #7c3aed !important;

    box-shadow: 0 2px 6px rgba(124, 58, 237, 0.3) !important;

}



.res-btn-green {

    background: rgba(16, 185, 129, 0.08) !important;

    color: #047857 !important;

    border-color: rgba(16, 185, 129, 0.25) !important;

}

.res-btn-green:hover, .res-dropdown-wrapper.active .res-btn-green {

    background: #10b981 !important;

    color: #ffffff !important;

    border-color: #10b981 !important;

    box-shadow: 0 2px 6px rgba(16, 185, 129, 0.3) !important;

}



.res-dropdown-menu {

    display: none;

    position: absolute !important;

    top: 100% !important;

    left: 0 !important;

    right: auto !important;

    margin-top: 4px !important;

    background: #ffffff !important;

    border: 1px solid #e2e8f0 !important;

    border-radius: 8px !important;

    box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.22), 0 8px 10px -6px rgba(0, 0, 0, 0.12) !important;

    min-width: 195px !important;

    z-index: 99999 !important;

    padding: 5px 0 !important;

    text-align: right !important;

    direction: rtl !important;

}



.res-dropdown-wrapper.active .res-dropdown-menu {

    display: block !important;

}

/* ==================== CARD VIEW DROPDOWN / DROPUP FIXES ==================== */
.sales-crm-card,
.reservation-card-item {
    overflow: visible !important;
}

.sales-crm-card.card-dropdown-active,
.sales-crm-card:has(.res-dropdown-wrapper.active) {
    overflow: visible !important;
    z-index: 1050 !important;
}

.sales-crm-card .sales-crm-card-footer {
    position: relative;
    overflow: visible !important;
}

.sales-crm-card .res-actions-dropdowns {
    position: relative;
    overflow: visible !important;
}

.sales-crm-card .res-dropdown-wrapper {
    position: relative !important;
    overflow: visible !important;
}

/* Card dropup menu: opens upwards above the card footer */
.sales-crm-card .res-dropdown-menu {
    top: auto !important;
    bottom: calc(100% + 6px) !important;
    margin-top: 0 !important;
    margin-bottom: 0 !important;
    min-width: 200px !important;
    max-width: 250px !important;
    border: 1px solid #b8cde3 !important;
    border-radius: 8px !important;
    box-shadow: 0 12px 28px rgba(13, 43, 69, 0.22), 0 4px 10px rgba(0, 0, 0, 0.12) !important;
    z-index: 999999 !important;
}

/* 1. Button 1 (أولي - rightmost) */
.sales-crm-card [id^="res-drop-card-init-"] .res-dropdown-menu {
    right: 0 !important;
    left: auto !important;
    transform: none !important;
}

/* 2. Button 2 (مثبت - center) */
.sales-crm-card [id^="res-drop-card-conf-"] .res-dropdown-menu {
    right: 50% !important;
    transform: translateX(50%) !important;
    left: auto !important;
}

/* 3. Button 3 (بيع - leftmost) */
.sales-crm-card [id^="res-drop-card-sale-"] .res-dropdown-menu,
.sales-crm-card .res-dropdown-menu.res-dropdown-menu-right {
    left: 0 !important;
    right: auto !important;
    transform: none !important;
}



.res-dropdown-item {

    display: flex !important;

    align-items: center !important;

    gap: 8px !important;

    width: 100% !important;

    padding: 7px 12px !important;

    font-family: 'Cairo', sans-serif !important;

    font-size: 0.78rem !important;

    font-weight: 600 !important;

    color: #334155 !important;

    background: transparent !important;

    border: none !important;

    cursor: pointer !important;

    text-align: right !important;

    transition: all 0.15s ease !important;

    white-space: nowrap !important;

    text-decoration: none !important;

}



.res-dropdown-item i {

    font-size: 0.85rem !important;

    width: 18px !important;

    text-align: center !important;

}



.res-dropdown-item:hover:not(:disabled):not([disabled]) {

    background: #f1f5f9 !important;

    color: #0f172a !important;

}



.res-dropdown-item:disabled, .res-dropdown-item[disabled] {

    opacity: 0.4 !important;

    cursor: not-allowed !important;

    background: transparent !important;

    color: #94a3b8 !important;

    pointer-events: auto !important;

}



.res-dropdown-item-danger:hover:not(:disabled):not([disabled]) {

    background: #fef2f2 !important;

    color: #dc2626 !important;

}



/* Reservations Action Horizontal Strips Stacked Vertically */

.res-strips-stack {

    display: flex !important;

    flex-direction: column !important;

    gap: 4px !important;

    align-items: stretch !important;

    min-width: 190px !important;

    max-width: 260px !important;

    margin: 0 auto !important;

    direction: rtl !important;

}



.res-strip-row {

    display: flex !important;

    align-items: center !important;

    justify-content: space-between !important;

    background: rgba(248, 250, 252, 0.9) !important;

    border: 1px solid #e2e8f0 !important;

    border-radius: 6px !important;

    padding: 3px 6px !important;

    gap: 6px !important;

    transition: all 0.2s ease !important;

}



.res-strip-row:hover {

    border-color: #cbd5e1 !important;

    background: #ffffff !important;

    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.05) !important;

}



.res-strip-tag {

    font-family: 'Cairo', sans-serif !important;

    font-size: 0.68rem !important;

    font-weight: 700 !important;

    padding: 2px 6px !important;

    border-radius: 4px !important;

    white-space: nowrap !important;

    display: inline-flex !important;

    align-items: center !important;

    justify-content: center !important;

    min-width: 48px !important;

}



.res-tag-blue {

    background: rgba(37, 99, 235, 0.1) !important;

    color: #1d4ed8 !important;

    border: 1px solid rgba(37, 99, 235, 0.2) !important;

}



.res-tag-purple {

    background: rgba(124, 58, 237, 0.1) !important;

    color: #7c3aed !important;

    border: 1px solid rgba(124, 58, 237, 0.2) !important;

}



.res-tag-green {

    background: rgba(16, 185, 129, 0.1) !important;

    color: #047857 !important;

    border: 1px solid rgba(16, 185, 129, 0.2) !important;

}



.res-tag-red {

    background: rgba(239, 68, 68, 0.1) !important;

    color: #b91c1c !important;

    border: 1px solid rgba(239, 68, 68, 0.2) !important;

}



.res-strip-btns {

    display: flex !important;

    align-items: center !important;

    justify-content: flex-end !important;

    gap: 4px !important;

    flex-wrap: nowrap !important;

}



/* Micro Delete Button Next to Customer Name */

.btn-micro-del {

    display: inline-flex !important;

    align-items: center !important;

    justify-content: center !important;

    width: 24px !important;

    height: 24px !important;

    min-width: 24px !important;

    padding: 0 !important;

    border-radius: 4px !important;

    background: rgba(239, 68, 68, 0.08) !important;

    color: #ef4444 !important;

    border: 1px solid rgba(239, 68, 68, 0.2) !important;

    cursor: pointer !important;

    font-size: 0.72rem !important;

    transition: all 0.2s ease !important;

    opacity: 0.7 !important;

}



.btn-micro-del:hover {

    opacity: 1 !important;

    background: #ef4444 !important;

    color: #ffffff !important;

    border-color: #ef4444 !important;

    transform: scale(1.08) !important;

}



/* Contract Hub Action Buttons (Institutional 2x2 Grid) */

.contracts-action-grid {

    display: grid !important;

    grid-template-columns: repeat(2, minmax(130px, 1fr)) !important;

    gap: 6px !important;

    align-items: center !important;

    width: 100% !important;

    min-width: 270px !important;

    max-width: 320px !important;

    margin: 0 auto !important;

}



.contract-hub-btn {

    display: inline-flex !important;

    align-items: center !important;

    justify-content: center !important;

    gap: 6px !important;

    height: 30px !important;

    padding: 0 8px !important;

    font-family: 'Cairo', sans-serif !important;

    font-size: 0.76rem !important;

    font-weight: 700 !important;

    border-radius: 6px !important;

    border: 1px solid transparent !important;

    text-decoration: none !important;

    cursor: pointer !important;

    white-space: nowrap !important;

    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1) !important;

    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05) !important;

}



.contract-hub-btn i {

    font-size: 0.82rem !important;

}



.contract-hub-btn:hover {

    transform: translateY(-2px) !important;

    box-shadow: 0 3px 8px rgba(0, 0, 0, 0.12) !important;

}



.contract-hub-blue {

    background: rgba(37, 99, 235, 0.1) !important;

    color: #1d4ed8 !important;

    border-color: rgba(37, 99, 235, 0.25) !important;

}

.contract-hub-blue:hover {

    background: #2563eb !important;

    color: #ffffff !important;

    border-color: #2563eb !important;

}



.contract-hub-slate {

    background: rgba(100, 116, 139, 0.1) !important;

    color: #334155 !important;

    border-color: rgba(100, 116, 139, 0.25) !important;

}

.contract-hub-slate:hover {

    background: #475569 !important;

    color: #ffffff !important;

    border-color: #475569 !important;

}



.contract-hub-purple {

    background: rgba(124, 58, 237, 0.1) !important;

    color: #7c3aed !important;

    border-color: rgba(124, 58, 237, 0.25) !important;

}

.contract-hub-purple:hover {

    background: #7c3aed !important;

    color: #ffffff !important;

    border-color: #7c3aed !important;

}



.contract-hub-amber {

    background: rgba(245, 158, 11, 0.1) !important;

    color: #d97706 !important;

    border-color: rgba(245, 158, 11, 0.25) !important;

}

.contract-hub-amber:hover {

    background: #d97706 !important;

    color: #ffffff !important;

    border-color: #d97706 !important;

}



.contract-hub-cyan {

    background: rgba(2, 132, 199, 0.1) !important;

    color: #0284c7 !important;

    border-color: rgba(2, 132, 199, 0.25) !important;

}

.contract-hub-cyan:hover {

    background: #0284c7 !important;

    color: #ffffff !important;

    border-color: #0284c7 !important;

}



.contract-hub-red {

    background: rgba(220, 38, 38, 0.1) !important;

    color: #dc2626 !important;

    border-color: rgba(220, 38, 38, 0.25) !important;

}

.contract-hub-red:hover {

    background: #dc2626 !important;

    color: #ffffff !important;

    border-color: #dc2626 !important;

}



.stat-icon {

    width: 38px;

    height: 38px;

    border-radius: var(--radius-sm);

    display: flex;

    align-items: center;

    justify-content: center;

    font-size: 1rem;

}



.icon-blue { background: rgba(13, 43, 69, 0.1); color: var(--primary-color); }

.icon-green { background: rgba(16, 185, 129, 0.1); color: var(--success-color); }

.icon-orange { background: rgba(245, 158, 11, 0.1); color: var(--warning-color); }

.icon-purple { background: rgba(139, 92, 246, 0.1); color: #8b5cf6; }

.icon-teal { background: rgba(20, 184, 166, 0.1); color: #14b8a6; }

.icon-red { background: rgba(239, 68, 68, 0.1); color: var(--danger-color); }



.stat-info {

    flex: 1;

    display: flex;

    flex-direction: column;

    min-width: 0;

    width: 100%;

}



.stat-info h3 {

    font-size: 0.76rem;

    color: var(--text-muted);

    font-weight: 600;

}



.stat-value {

    font-size: 1.25rem;

    font-weight: 800;

    color: var(--text-main);

}



.text-green { color: var(--success-color); }

.text-orange { color: var(--warning-color); }

.text-purple { color: #8b5cf6; }

.text-teal { color: #14b8a6; }

.text-red { color: var(--danger-color); }



/* Financial Cards (Slimmed & Compact) */

.financial-grid,

.financial-grid-row-1,

.financial-grid-row-2,

.financial-grid-row-3,

.financial-grid-row-4 {

    display: grid;

    gap: 12px;

    margin-bottom: 12px;

}



.financial-grid,

.financial-grid-row-1,

.financial-grid-row-2,

.financial-grid-row-3,

.financial-grid-row-4 {

    grid-template-columns: repeat(3, 1fr);

}



@media (max-width: 1200px) {

    .financial-grid,

    .financial-grid-row-1,

    .financial-grid-row-2,

    .financial-grid-row-3,

    .financial-grid-row-4 {

        grid-template-columns: repeat(3, 1fr);

    }

}



@media (max-width: 992px) {

    .financial-grid,

    .financial-grid-row-1,

    .financial-grid-row-2,

    .financial-grid-row-3,

    .financial-grid-row-4 {

        grid-template-columns: repeat(2, 1fr);

    }

}



@media (max-width: 576px) {

    .financial-grid,

    .financial-grid-row-1,

    .financial-grid-row-2,

    .financial-grid-row-3,

    .financial-grid-row-4 {

        grid-template-columns: 1fr;

    }

}



.financial-card {

    position: relative;

    background: linear-gradient(135deg, #f0fdfa 0%, #f5f3ff 100%) !important;

    color: var(--text-main) !important;

    padding: 12px 16px !important;

    min-height: 96px !important;

    display: flex !important;

    flex-direction: column !important;

    justify-content: space-between !important;

    border-radius: var(--radius-md) !important;

    border: 1px solid var(--border-color) !important;

    box-shadow: 0 3px 10px -2px rgba(13, 43, 69, 0.08), 0 2px 4px -1px rgba(13, 43, 69, 0.04) !important;

    overflow: hidden;

    transition: var(--transition) !important;

    box-sizing: border-box !important;

    text-align: right !important;

    direction: rtl !important;

}



.financial-card:hover {

    transform: translateY(-2px) !important;

    box-shadow: 0 8px 16px -4px rgba(0, 0, 0, 0.08) !important;

}



.card-glow {

    display: none !important;

}



.financial-card h4 {

    font-size: 0.82rem !important;

    font-weight: 750 !important;

    color: var(--text-muted) !important;

    margin: 0 0 4px 0 !important;

    line-height: 1.3 !important;

}



.financial-card .amount {

    font-size: 1.30rem !important;

    font-weight: 800 !important;

    display: block !important;

    margin: 2px 0 4px 0 !important;

    letter-spacing: 0.3px !important;

    line-height: 1.2 !important;

}



.financial-card .description {

    font-size: 0.72rem !important;

    color: var(--text-muted) !important;

    margin: 0 !important;

    line-height: 1.3 !important;

    opacity: 0.85 !important;

}



.card-revenue {

    border-right: 4px solid #3b82f6 !important;

}

.card-revenue .amount {

    color: #1e3a8a !important;

}

.card-revenue:hover {

    border-color: rgba(59, 130, 246, 0.3) !important;

    box-shadow: 0 12px 20px -5px rgba(59, 130, 246, 0.1), 0 8px 12px -5px rgba(59, 130, 246, 0.03) !important;

}



.card-cash {

    border-right: 4px solid #10b981 !important;

}

.card-cash .amount {

    color: #064e3b !important;

}

.card-cash:hover {

    border-color: rgba(16, 185, 129, 0.3) !important;

    box-shadow: 0 12px 20px -5px rgba(16, 185, 129, 0.1), 0 8px 12px -5px rgba(16, 185, 129, 0.03) !important;

}



.card-remaining {

    border-right: 4px solid #64748b !important;

}

.card-remaining .amount {

    color: #334155 !important;

}

.card-remaining:hover {

    border-color: rgba(100, 116, 139, 0.3) !important;

    box-shadow: 0 12px 20px -5px rgba(100, 116, 139, 0.1), 0 8px 12px -5px rgba(100, 116, 139, 0.03) !important;

}



.card-debt-general {

    border-right: 4px solid #ef4444 !important;

}

.card-debt-general .amount {

    color: #b91c1c !important;

}

.card-debt-general:hover {

    border-color: rgba(239, 68, 68, 0.3) !important;

    box-shadow: 0 12px 20px -5px rgba(239, 68, 68, 0.1), 0 8px 12px -5px rgba(239, 68, 68, 0.03) !important;

}



.card-debt-loans {

    border-right: 4px solid #a855f7 !important;

}

.card-debt-loans .amount {

    color: #6d28d9 !important;

}

.card-debt-loans:hover {

    border-color: rgba(168, 85, 247, 0.3) !important;

    box-shadow: 0 12px 20px -5px rgba(168, 85, 247, 0.1), 0 8px 12px -5px rgba(168, 85, 247, 0.03) !important;

}



/* Tables and Cards */

.table-card {

    background: var(--bg-card);

    border-radius: var(--radius-lg);

    box-shadow: var(--shadow-sm);

    border: 1px solid var(--border-color);

    padding: 24px;

    margin-top: 24px;

}



.table-card .table-container {

    width: 100%;

    overflow-x: auto;

}



.table-card .contracts-pagination-container {

    margin-top: 12px !important;

    padding-top: 12px;

    border-top: 1px solid var(--border-color, #e2e8f0);

}



/* Elegant Compact Empty State */

.table tbody tr td.empty-state-cell,

.table tbody tr.empty-row td {

    padding: 36px 20px !important;

    text-align: center !important;

    color: #64748b !important;

    font-size: 0.95rem !important;

    font-weight: 600 !important;

    background: transparent !important;

}



.empty-state-box {

    display: flex;

    flex-direction: column;

    align-items: center;

    justify-content: center;

    gap: 10px;

    padding: 16px 20px;

    color: #64748b;

}



.empty-state-box i {

    font-size: 2rem;

    color: #94a3b8;

}



.empty-state-box span {

    font-size: 0.92rem;

    font-weight: 700;

    color: #475569;

}



.table-container {

    width: 100%;

    overflow-x: auto;

}



.table {

    width: 100%;

    border-collapse: collapse;

    text-align: right;

}



.table th {

    background-color: #f8fafc;

    padding: 16px 20px;

    font-weight: 700;

    color: var(--primary-color);

    font-size: 0.85rem;

    border-bottom: 2px solid var(--border-color);

}



.table td {

    padding: 16px 20px;

    border-bottom: 1px solid var(--border-color);

    font-size: 0.9rem;

    font-weight: 500;

    color: var(--text-main);

}



.table tr:last-child td {

    border-bottom: none;

}



.table tr:hover td {

    background-color: rgba(13, 43, 69, 0.02);

}



/* Premium Statement Tables Typography and Layout */

.premium-ledger-table {

    width: 100%;

    border-collapse: collapse;

    text-align: right;

    font-family: 'Cairo', sans-serif;

}



.premium-ledger-table th {

    background-color: #f8fafc;

    padding: 11px 14px;

    font-weight: 700;

    color: var(--primary-color);

    font-size: 0.82rem;

    border-bottom: 2px solid var(--border-color);

    white-space: nowrap;

}



.premium-ledger-table td {

    padding: 10px 14px;

    border-bottom: 1px solid var(--border-color);

    font-size: 0.84rem;

    font-weight: 500;

    color: var(--text-main);

    vertical-align: middle;

}



.premium-ledger-table tr:hover td {

    background-color: rgba(13, 43, 69, 0.03);

}



.premium-ledger-table tbody tr:nth-child(even) td {

    background-color: #f8fafc;

}



/* Alternate row coloring (Zebra Striping) for Sales and Reservation tables */

#table-sales tbody tr:nth-child(odd) td,

#table-reservations tbody tr:nth-child(odd) td {

    background-color: #ffffff;

}



#table-sales tbody tr:nth-child(even) td,

#table-reservations tbody tr:nth-child(even) td {

    background-color: #f1f5f9; /* Soft premium slate-grey tint */

}



#table-sales tbody tr:hover td,

#table-reservations tbody tr:hover td {

    background-color: #e2e8f0 !important; /* Prominent hover effect */

}



/* Badges for status */

.badge {

    padding: 4px 12px;

    border-radius: 50px;

    font-size: 0.75rem;

    font-weight: 700;

    display: inline-block;

}



.badge-available { background-color: rgba(16, 185, 129, 0.1); color: var(--success-color); }

.badge-reserved { background-color: rgba(245, 158, 11, 0.1); color: var(--warning-color); }

.badge-sold { background-color: rgba(139, 92, 246, 0.1); color: #8b5cf6; }

.badge-delivered { background-color: rgba(100, 116, 139, 0.1); color: #64748b; }

.badge-my-reservation { background-color: rgba(59, 130, 246, 0.1); color: #3b82f6; }



/* Grid Layouts */

.grid-two-columns {

    display: grid;

    grid-template-columns: repeat(auto-fit, minmax(450px, 1fr));

    gap: 24px;

}



.grid-card {

    background: var(--bg-card);

    border-radius: var(--radius-lg);

    box-shadow: var(--shadow-sm);

    border: 1px solid var(--border-color);

    padding: 24px;

}



.card-header {

    display: flex;

    justify-content: space-between;

    align-items: center;

    margin-bottom: 20px;

    border-bottom: 1px solid var(--border-color);

    padding-bottom: 12px;

}



.card-header h3 {

    font-size: 1.1rem;

    font-weight: 700;

    color: var(--primary-color);

}



.card-header i {

    color: var(--accent-color);

    font-size: 1.25rem;

}



.card-header-actions {

    display: flex;

    justify-content: space-between;

    align-items: center;

    margin-bottom: 20px;

    border-bottom: 1px solid var(--border-color);

    padding-bottom: 12px;

}



.card-header-actions h3 {

    font-size: 1.1rem;

    font-weight: 700;

    color: var(--primary-color);

}



/* Cancellation Summary Box */

.cancellation-summary {

    display: flex;

    gap: 20px;

    justify-content: center;

    padding: 30px 0;

}



.cancel-summary-box {

    flex: 1;

    background: var(--bg-main);

    border-radius: var(--radius-md);

    padding: 20px;

    text-align: center;

    display: flex;

    flex-direction: column;

    gap: 8px;

    border: 1px solid var(--border-color);

}



.cancel-summary-box .num {

    font-size: 2.2rem;

    font-weight: 800;

}



.box-sales { color: var(--danger-color); border-right: 4px solid var(--danger-color); }

.box-res { color: var(--text-muted); border-right: 4px solid var(--text-muted); }



.cancel-summary-box .label {

    font-size: 0.85rem;

    font-weight: 600;

}



.grid-vertical {

    display: flex;

    flex-direction: column;

    gap: 24px;

}



.section-actions {

    display: flex;

    justify-content: flex-end;

    margin-bottom: 20px;

}



/* Forms & Modal Inputs */

.form-group {

    margin-bottom: 18px;

}



.form-row {

    display: grid;

    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));

    gap: 16px;

    margin-bottom: 18px;

}



.form-group label {

    display: block;

    font-weight: 700;

    font-size: 0.85rem;

    margin-bottom: 6px;

    color: var(--primary-color);

}



.form-control {

    width: 100%;

    padding: 10px 14px;

    border: 1.5px solid var(--border-color);

    border-radius: var(--radius-sm);

    font-family: 'Cairo', sans-serif;

    font-size: 0.9rem;

    color: var(--text-main);

    background-color: #fdfdfd;

    transition: var(--transition);

}



:not(.portal-page) .form-control:focus {

    outline: none;

    border-color: var(--primary-light);

    box-shadow: 0 0 0 3px rgba(22, 70, 112, 0.15);

    background-color: #ffffff;

}



.form-control:disabled {

    background-color: #f1f5f9;

    color: var(--text-muted);

    cursor: not-allowed;

}



textarea.form-control {

    resize: vertical;

    min-height: 80px;

}



.form-actions {
    display: flex;
    justify-content: flex-end;
    gap: 12px;
    margin-top: 24px;
    border-top: 1px solid var(--border-color);
    padding-top: 18px;
}

/* ==========================================================================
   GLOBAL STICKY ACTION FOOTER FOR ALL MODALS / WINDOWS
   (تثبيت شريط الأزرار السفلي لكافة النوافذ والمودالات تلقائياً في أسفل النافذة)
   ========================================================================== */
.modal-body .form-actions,
.modal-body .modal-actions,
.modal-body .modal-footer,
.modal-card > .form-actions,
.modal-card > .modal-actions,
.modal-card > .modal-footer,
.modal-card .form-actions,
.modal-card .modal-actions,
.modal-card .modal-footer {
    flex: 0 0 auto !important;
    position: sticky !important;
    bottom: 0px !important;
    margin-left: -24px !important;
    margin-right: -24px !important;
    margin-bottom: 0px !important;
    margin-top: auto !important;
    padding: 14px 24px !important;
    background: rgba(255, 255, 255, 0.98) !important;
    backdrop-filter: blur(12px) !important;
    -webkit-backdrop-filter: blur(12px) !important;
    border-top: 1.5px solid var(--border-color, #cbd5e1) !important;
    box-shadow: 0 -4px 16px rgba(15, 23, 42, 0.08) !important;
    z-index: 50 !important;
    justify-content: flex-end;
    align-items: center;
    gap: 12px;
}

/* Flex display for visible action footers */
.modal-body .form-actions:not([style*="display: none"]):not(.d-none),
.modal-body .modal-actions:not([style*="display: none"]):not(.d-none),
.modal-body .modal-footer:not([style*="display: none"]):not(.d-none),
.modal-card .form-actions:not([style*="display: none"]):not(.d-none),
.modal-card .modal-actions:not([style*="display: none"]):not(.d-none),
.modal-card .modal-footer:not([style*="display: none"]):not(.d-none) {
    display: flex !important;
}

/* Explicitly honor display: none when JS toggles visibility */
.modal-body .form-actions[style*="display: none"],
.modal-body .modal-actions[style*="display: none"],
.modal-body .modal-footer[style*="display: none"],
.modal-card .form-actions[style*="display: none"],
.modal-card .modal-actions[style*="display: none"],
.modal-card .modal-footer[style*="display: none"],
.modal-body .form-actions.d-none,
.modal-body .modal-actions.d-none,
.modal-body .modal-footer.d-none {
    display: none !important;
}

/* Modal Card Large & Maximized - push footer to bottom in flex column layout */
.modal-card.modal-card-lg .modal-body .form-actions,
.modal-card.modal-card-lg .modal-body .modal-actions,
.modal-card.modal-card-lg .modal-body .modal-footer,
.modal-card.modal-maximized .modal-body .form-actions,
.modal-card.modal-maximized .modal-body .modal-actions,
.modal-card.modal-maximized .modal-body .modal-footer {
    margin-top: auto !important;
}

/* Dark Mode Theme Support for Modal Sticky Footers */
[data-theme="dark"] .modal-body .form-actions,
[data-theme="dark"] .modal-body .modal-actions,
[data-theme="dark"] .modal-body .modal-footer,
[data-theme="dark"] .modal-card .form-actions,
[data-theme="dark"] .modal-card .modal-actions,
[data-theme="dark"] .modal-card .modal-footer {
    background: rgba(30, 41, 59, 0.96) !important;
    border-top-color: #334155 !important;
    box-shadow: 0 -4px 16px rgba(0, 0, 0, 0.4) !important;
}

/* Themed Modal Color Accents for the Sticky Footers */
.modal-card.theme-reservation .form-actions,
.modal-card.theme-reservation .modal-footer {
    border-top-color: rgba(217, 119, 6, 0.35) !important;
}
.modal-card.theme-sale .form-actions,
.modal-card.theme-sale .modal-footer {
    border-top-color: rgba(5, 150, 105, 0.35) !important;
}
.modal-card.theme-crm .form-actions,
.modal-card.theme-crm .modal-footer {
    border-top-color: rgba(124, 58, 237, 0.35) !important;
}
.modal-card.theme-unit .form-actions,
.modal-card.theme-unit .modal-footer {
    border-top-color: rgba(2, 132, 199, 0.35) !important;
}
.modal-card.theme-payment .form-actions,
.modal-card.theme-payment .modal-footer {
    border-top-color: rgba(67, 56, 202, 0.35) !important;
}
.modal-card.theme-settings .form-actions,
.modal-card.theme-settings .modal-footer {
    border-top-color: rgba(71, 85, 105, 0.35) !important;
}
.modal-card.theme-danger .form-actions,
.modal-card.theme-danger .modal-footer {
    border-top-color: rgba(220, 38, 38, 0.35) !important;
}



/* Modal Overlay & Card */

.modal-overlay {

    position: fixed;

    top: 0;

    left: 0;

    width: 100%;

    height: 100%;

    background-color: rgba(6, 21, 35, 0.55);

    backdrop-filter: blur(8px) saturate(120%);

    display: none;

    align-items: center;

    justify-content: center;

    z-index: 100;

    padding: 20px;

    transition: all 0.3s ease-in-out;

}



#modal-container {

    z-index: 100000;

}



.modal-card {
    display: flex !important;
    flex-direction: column !important;
    background-color: var(--bg-card);
    width: 100%;
    max-width: 650px;
    border-radius: 18px;
    box-shadow: 
        0 0 0 1px rgba(0, 0, 0, 0.3),
        0 15px 35px -5px rgba(0, 0, 0, 0.35),
        0 30px 60px -10px rgba(0, 0, 0, 0.45),
        inset 0 1px 1px rgba(255, 255, 255, 0.15);
    border: 3px solid var(--border-color);
    overflow: hidden !important;
    max-height: 88vh !important;
    position: relative;
    animation: slideDown 0.35s cubic-bezier(0.16, 1, 0.3, 1);
}



.modal-header {

    background-color: var(--primary-color);

    color: #ffffff;

    padding: 18px 24px;

    display: flex;

    justify-content: space-between;

    align-items: center;

    border-top: 1px solid rgba(255, 255, 255, 0.35);

    border-bottom: 4px solid rgba(0, 0, 0, 0.3);

    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2), 0 2px 4px rgba(0, 0, 0, 0.15);

}



.modal-header h3 {

    font-size: 1.15rem;

    font-weight: 700;

    display: flex;

    align-items: center;

    gap: 10px;

    font-family: 'Cairo', 'Tajawal', sans-serif;

    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.15);

}



.modal-header h3 i {

    font-size: 1.25rem;

    filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.15));

    animation: pulseIcon 2s infinite ease-in-out;

}



@keyframes pulseIcon {

    0%, 100% { transform: scale(1); opacity: 0.95; }

    50% { transform: scale(1.08); opacity: 1; filter: drop-shadow(0 2px 8px rgba(255, 255, 255, 0.3)); }

}



/* ==================== DYNAMIC MODAL THEMING ==================== */



/* Base transitions and tweaks */

.modal-card {

    transition: width 0.25s ease, max-width 0.25s ease, border-color 0.3s ease, box-shadow 0.3s ease;
}

.modal-card:not(.modal-maximized):not(.modal-lg) {
    height: auto !important;

}



/* ==========================================================================
   STANDARDIZED MODAL ARCHETYPES (REOS UNIFIED 3-TIER SYSTEM)
   المنظومة المعيارية الموحدة لنوافذ ريوس - معتمدة ومحمية
   ========================================================================== */

/* 1. Small Dialogs (نوافذ التأكيد والحوار السريع - 480px) */
.modal-card.modal-sm,
.modal-card.modal-card-sm,
.modal-sm {
    max-width: 480px !important;
    width: 100% !important;
    max-height: 85vh !important;
    border-radius: 18px !important;
}

/* 2. Medium Forms (استمارات الإدخال والتعديل القياسية - 740px) */
.modal-card.modal-md,
.modal-card.modal-card-md,
.modal-md {
    max-width: 740px !important;
    width: 100% !important;
    max-height: 88vh !important;
    border-radius: 18px !important;
}

/* 3. Large Workspaces (مساحات العمل الشاملة وملفات العقود - 1180px) */
.modal-card.modal-lg,
.modal-card.modal-card-lg,
.modal-lg {
    max-width: 1180px !important;
    width: 94vw !important;
    height: 88vh !important;
    max-height: 90vh !important;
    border-radius: 20px !important;
}

/* Universal Modal Body across ALL archetypes (محتوى النافذة الموحد) */
.modal-card .modal-body,
.modal-body {
    flex: 1 1 auto !important;
    min-height: 0 !important;
    max-height: none !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
    padding: 24px 24px 0px 24px !important;
    display: flex !important;
    flex-direction: column !important;
    position: relative !important;
}

.modal-card .modal-body > form,
.modal-body > form {
    display: flex !important;
    flex-direction: column !important;
    flex: 1 1 auto !important;
    min-height: 0 !important;
    width: 100% !important;
}

/* Enhanced Modal Header Visuals & 3 Action Controls (الأزرار الثلاثة بالشريط العلوي) */
.modal-header {
    flex: 0 0 auto !important;
    border-radius: 15px 15px 0 0 !important;
}

.modal-header .modal-header-actions {
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
    direction: rtl !important;
}

.modal-header .modal-header-actions button,
.modal-header .btn-modal-minimize,
.modal-header .btn-modal-maximize,
.modal-header .btn-close,
.modal-header .btn-modal-close {
    width: 32px !important;
    height: 32px !important;
    min-width: 32px !important;
    border-radius: 8px !important;
    background: rgba(255, 255, 255, 0.18) !important;
    border: 1px solid rgba(255, 255, 255, 0.32) !important;
    color: #ffffff !important;
    font-size: 0.95rem !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    cursor: pointer !important;
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1) !important;
    padding: 0 !important;
    line-height: 1 !important;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12) !important;
    opacity: 1 !important;
}

.modal-header .btn-modal-minimize:hover,
.modal-header .btn-modal-maximize:hover {
    background: rgba(255, 255, 255, 0.35) !important;
    border-color: rgba(255, 255, 255, 0.6) !important;
    transform: translateY(-1px) scale(1.05) !important;
}

.modal-header .btn-close:hover,
.modal-header .btn-modal-close:hover {
    background: #ef4444 !important;
    border-color: #ef4444 !important;
    color: #ffffff !important;
    transform: translateY(-1px) scale(1.08) !important;
    box-shadow: 0 4px 12px rgba(239, 68, 68, 0.4) !important;
}

/* Enhanced Smooth Scrollbar for Modal Body */
.modal-body::-webkit-scrollbar {
    width: 6px;
    height: 6px;
}
.modal-body::-webkit-scrollbar-track {
    background: rgba(241, 245, 249, 0.6);
    border-radius: 4px;
}
.modal-body::-webkit-scrollbar-thumb {
    background: #cbd5e1;
    border-radius: 4px;
}
.modal-body::-webkit-scrollbar-thumb:hover {
    background: #94a3b8;
}



/* Fullscreen Maximized Modal */

.modal-card.modal-maximized {

    max-width: 98vw !important;

    width: 98vw !important;

    height: 96vh !important;

    max-height: 96vh !important;

    border-radius: 12px !important;

    display: flex !important;

    flex-direction: column !important;

    margin: 0 !important;

}



.modal-card.modal-maximized .modal-body {

    flex: 1 1 auto !important;

    max-height: none !important;

    height: 100% !important;

    overflow-y: auto !important;

}



.btn-modal-maximize, .btn-modal-minimize {

    background: none;

    border: none;

    color: #ffffff;

    cursor: pointer;

    padding: 6px 8px;

    border-radius: 6px;

    transition: all 0.2s ease;

    opacity: 0.85;

}



.btn-modal-maximize:hover, .btn-modal-minimize:hover {

    opacity: 1 !important;

    background-color: rgba(255, 255, 255, 0.2) !important;

    transform: scale(1.1);

}



/* ==================== MINIMIZED WINDOWS DOCK ==================== */

.minimized-windows-dock {

    position: fixed;

    bottom: 58px; /* Above the taskbar */

    right: 24px;

    display: flex;

    flex-wrap: wrap-reverse;

    gap: 12px;

    z-index: 999999;

    pointer-events: none;

    direction: rtl;

}



.dock-pill {

    pointer-events: auto;

    display: inline-flex;

    align-items: center;

    gap: 10px;

    padding: 9px 16px;

    background: rgba(15, 23, 42, 0.94);

    backdrop-filter: blur(10px);

    -webkit-backdrop-filter: blur(10px);

    border: 1.5px solid rgba(59, 130, 246, 0.55);

    border-radius: 12px;

    color: #ffffff;

    font-family: 'Cairo', sans-serif;

    font-size: 0.88rem;

    font-weight: 700;

    box-shadow: 0 12px 28px -5px rgba(0, 0, 0, 0.45), 0 0 18px rgba(59, 130, 246, 0.3);

    cursor: pointer;

    transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);

    animation: dockPillPop 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);

    user-select: none;

}



@keyframes dockPillPop {

    from { transform: translateY(25px) scale(0.8); opacity: 0; }

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

}



.dock-pill:hover {

    background: linear-gradient(135deg, #1e3a8a 0%, #1e40af 100%);

    border-color: #60a5fa;

    transform: translateY(-4px) scale(1.03);

    box-shadow: 0 16px 32px -5px rgba(0, 0, 0, 0.5), 0 0 24px rgba(96, 165, 250, 0.45);

}



.dock-pill-icon {

    font-size: 1.05rem;

    color: #38bdf8;

    display: inline-flex;

    align-items: center;

}



.dock-pill-title {

    max-width: 240px;

    white-space: nowrap;

    overflow: hidden;

    text-overflow: ellipsis;

}



.dock-pill-close {

    background: rgba(255, 255, 255, 0.15);

    border: none;

    color: #cbd5e1;

    width: 22px;

    height: 22px;

    border-radius: 50%;

    display: inline-flex;

    align-items: center;

    justify-content: center;

    font-size: 0.80rem;

    cursor: pointer;

    margin-right: 6px;

    transition: all 0.2s;

}



.dock-pill-close:hover {

    background: #ef4444;

    color: #ffffff;

    transform: scale(1.15);

}



/* 1. Reservation Theme (Amber/Gold) */

.modal-card.theme-reservation {

    border-color: #f59e0b !important;

    box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.3), 0 15px 35px -5px rgba(0, 0, 0, 0.35), 0 30px 60px -10px rgba(0, 0, 0, 0.45), 0 0 40px rgba(245, 158, 11, 0.25), inset 0 1px 1px rgba(255, 255, 255, 0.2) !important;

}

.modal-card.theme-reservation .modal-header {

    background: linear-gradient(135deg, rgba(255, 255, 255, 0.15) 0%, rgba(255, 255, 255, 0) 50%, rgba(0, 0, 0, 0.15) 100%), linear-gradient(135deg, #f59e0b 0%, #92400e 100%) !important;

    border-top: 1px solid rgba(255, 255, 255, 0.4);

    border-bottom: 4px solid #78350f;

}

.modal-card.theme-reservation .modal-body button.btn-primary,

.modal-card.theme-reservation .modal-actions button.btn-primary,

.modal-card.theme-reservation input[type="submit"].btn-primary {

    background: linear-gradient(135deg, #f59e0b 0%, #d97706 100%) !important;

    border-color: #d97706 !important;

    color: #ffffff !important;

}

.modal-card.theme-reservation .modal-body button.btn-primary:hover,

.modal-card.theme-reservation .modal-actions button.btn-primary:hover,

.modal-card.theme-reservation input[type="submit"].btn-primary:hover {

    background: linear-gradient(135deg, #d97706 0%, #b45309 100%) !important;

    border-color: #b45309 !important;

    box-shadow: 0 4px 12px rgba(217, 119, 6, 0.25) !important;

}



/* 2. Sales & Contracts Theme (Emerald Green) */

.modal-card.theme-sale {

    border-color: #10b981 !important;

    box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.3), 0 15px 35px -5px rgba(0, 0, 0, 0.35), 0 30px 60px -10px rgba(0, 0, 0, 0.45), 0 0 40px rgba(16, 185, 129, 0.25), inset 0 1px 1px rgba(255, 255, 255, 0.2) !important;

}

.modal-card.theme-sale .modal-header {

    background: linear-gradient(135deg, rgba(255, 255, 255, 0.15) 0%, rgba(255, 255, 255, 0) 50%, rgba(0, 0, 0, 0.15) 100%), linear-gradient(135deg, #10b981 0%, #064e3b 100%) !important;

    border-top: 1px solid rgba(255, 255, 255, 0.4);

    border-bottom: 4px solid #064e3b;

}

.modal-card.theme-sale .modal-body button.btn-primary,

.modal-card.theme-sale .modal-actions button.btn-primary,

.modal-card.theme-sale input[type="submit"].btn-primary {

    background: linear-gradient(135deg, #10b981 0%, #059669 100%) !important;

    border-color: #059669 !important;

    color: #ffffff !important;

}

.modal-card.theme-sale .modal-body button.btn-primary:hover,

.modal-card.theme-sale .modal-actions button.btn-primary:hover,

.modal-card.theme-sale input[type="submit"].btn-primary:hover {

    background: linear-gradient(135deg, #059669 0%, #047857 100%) !important;

    border-color: #047857 !important;

    box-shadow: 0 4px 12px rgba(5, 150, 105, 0.25) !important;

}



/* 3. CRM & Interactions Theme (Purple/Violet) */

.modal-card.theme-crm {

    border-color: #8b5cf6 !important;

    box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.3), 0 15px 35px -5px rgba(0, 0, 0, 0.35), 0 30px 60px -10px rgba(0, 0, 0, 0.45), 0 0 40px rgba(139, 92, 246, 0.25), inset 0 1px 1px rgba(255, 255, 255, 0.2) !important;

}

.modal-card.theme-crm .modal-header {

    background: linear-gradient(135deg, rgba(255, 255, 255, 0.15) 0%, rgba(255, 255, 255, 0) 50%, rgba(0, 0, 0, 0.15) 100%), linear-gradient(135deg, #a78bfa 0%, #4c1d95 100%) !important;

    border-top: 1px solid rgba(255, 255, 255, 0.4);

    border-bottom: 4px solid #3b0764;

}

.modal-card.theme-crm .modal-body button.btn-primary,

.modal-card.theme-crm .modal-actions button.btn-primary,

.modal-card.theme-crm input[type="submit"].btn-primary {

    background: linear-gradient(135deg, #8b5cf6 0%, #7c3aed 100%) !important;

    border-color: #7c3aed !important;

    color: #ffffff !important;

}

.modal-card.theme-crm .modal-body button.btn-primary:hover,

.modal-card.theme-crm .modal-actions button.btn-primary:hover,

.modal-card.theme-crm input[type="submit"].btn-primary:hover {

    background: linear-gradient(135deg, #7c3aed 0%, #6d28d9 100%) !important;

    border-color: #6d28d9 !important;

    box-shadow: 0 4px 12px rgba(124, 58, 237, 0.25) !important;

}



/* 4. Units & Property Theme (Sky/Ocean Blue) */

.modal-card.theme-unit {

    border-color: #0ea5e9 !important;

    box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.3), 0 15px 35px -5px rgba(0, 0, 0, 0.35), 0 30px 60px -10px rgba(0, 0, 0, 0.45), 0 0 40px rgba(14, 165, 233, 0.25), inset 0 1px 1px rgba(255, 255, 255, 0.2) !important;

}

.modal-card.theme-unit .modal-header {

    background: linear-gradient(135deg, rgba(255, 255, 255, 0.15) 0%, rgba(255, 255, 255, 0) 50%, rgba(0, 0, 0, 0.15) 100%), linear-gradient(135deg, #38bdf8 0%, #1e3a8a 100%) !important;

    border-top: 1px solid rgba(255, 255, 255, 0.4);

    border-bottom: 4px solid #1e3a8a;

}

.modal-card.theme-unit .modal-body button.btn-primary,

.modal-card.theme-unit .modal-actions button.btn-primary,

.modal-card.theme-unit input[type="submit"].btn-primary {

    background: linear-gradient(135deg, #0ea5e9 0%, #0284c7 100%) !important;

    border-color: #0284c7 !important;

    color: #ffffff !important;

}

.modal-card.theme-unit .modal-body button.btn-primary:hover,

.modal-card.theme-unit .modal-actions button.btn-primary:hover,

.modal-card.theme-unit input[type="submit"].btn-primary:hover {

    background: linear-gradient(135deg, #0284c7 0%, #0369a1 100%) !important;

    border-color: #0369a1 !important;

    box-shadow: 0 4px 12px rgba(2, 132, 199, 0.25) !important;

}



/* 5. Payments & Financials Theme (Indigo/Royal Blue) */

.modal-card.theme-payment {

    border-color: #4f46e5 !important;

    box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.3), 0 15px 35px -5px rgba(0, 0, 0, 0.35), 0 30px 60px -10px rgba(0, 0, 0, 0.45), 0 0 40px rgba(79, 70, 229, 0.25), inset 0 1px 1px rgba(255, 255, 255, 0.2) !important;

}

.modal-card.theme-payment .modal-header {

    background: linear-gradient(135deg, rgba(255, 255, 255, 0.15) 0%, rgba(255, 255, 255, 0) 50%, rgba(0, 0, 0, 0.15) 100%), linear-gradient(135deg, #6366f1 0%, #312e81 100%) !important;

    border-top: 1px solid rgba(255, 255, 255, 0.4);

    border-bottom: 4px solid #1e1b4b;

}

.modal-card.theme-payment .modal-body button.btn-primary,

.modal-card.theme-payment .modal-actions button.btn-primary,

.modal-card.theme-payment input[type="submit"].btn-primary {

    background: linear-gradient(135deg, #4f46e5 0%, #4338ca 100%) !important;

    border-color: #4338ca !important;

    color: #ffffff !important;

}

.modal-card.theme-payment .modal-body button.btn-primary:hover,

.modal-card.theme-payment .modal-actions button.btn-primary:hover,

.modal-card.theme-payment input[type="submit"].btn-primary:hover {

    background: linear-gradient(135deg, #4338ca 0%, #3730a3 100%) !important;

    border-color: #3730a3 !important;

    box-shadow: 0 4px 12px rgba(67, 56, 202, 0.25) !important;

}



/* 6. Settings & Administration Theme (Slate Steel) */

.modal-card.theme-settings {

    border-color: #64748b !important;

    box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.3), 0 15px 35px -5px rgba(0, 0, 0, 0.35), 0 30px 60px -10px rgba(0, 0, 0, 0.45), 0 0 40px rgba(100, 116, 139, 0.25), inset 0 1px 1px rgba(255, 255, 255, 0.2) !important;

}

.modal-card.theme-settings .modal-header {

    background: linear-gradient(135deg, rgba(255, 255, 255, 0.15) 0%, rgba(255, 255, 255, 0) 50%, rgba(0, 0, 0, 0.15) 100%), linear-gradient(135deg, #94a3b8 0%, #1e293b 100%) !important;

    border-top: 1px solid rgba(255, 255, 255, 0.4);

    border-bottom: 4px solid #0f172a;

}

.modal-card.theme-settings .modal-body button.btn-primary,

.modal-card.theme-settings .modal-actions button.btn-primary,

.modal-card.theme-settings input[type="submit"].btn-primary {

    background: linear-gradient(135deg, #64748b 0%, #475569 100%) !important;

    border-color: #475569 !important;

    color: #ffffff !important;

}

.modal-card.theme-settings .modal-body button.btn-primary:hover,

.modal-card.theme-settings .modal-actions button.btn-primary:hover,

.modal-card.theme-settings input[type="submit"].btn-primary:hover {

    background: linear-gradient(135deg, #475569 0%, #334155 100%) !important;

    border-color: #334155 !important;

    box-shadow: 0 4px 12px rgba(71, 85, 105, 0.25) !important;

}



/* 7. Danger & Warnings Theme (Crimson Red) */

.modal-card.theme-danger {

    border-color: #ef4444 !important;

    box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.3), 0 15px 35px -5px rgba(0, 0, 0, 0.35), 0 30px 60px -10px rgba(0, 0, 0, 0.45), 0 0 40px rgba(239, 68, 68, 0.25), inset 0 1px 1px rgba(255, 255, 255, 0.2) !important;

}

.modal-card.theme-danger .modal-header {

    background: linear-gradient(135deg, rgba(255, 255, 255, 0.15) 0%, rgba(255, 255, 255, 0) 50%, rgba(0, 0, 0, 0.15) 100%), linear-gradient(135deg, #f87171 0%, #7f1d1d 100%) !important;

    border-top: 1px solid rgba(255, 255, 255, 0.4);

    border-bottom: 4px solid #450a0a;

}

.modal-card.theme-danger .modal-body button.btn-primary,

.modal-card.theme-danger .modal-actions button.btn-primary,

.modal-card.theme-danger input[type="submit"].btn-primary {

    background: linear-gradient(135deg, #ef4444 0%, #dc2626 100%) !important;

    border-color: #dc2626 !important;

    color: #ffffff !important;

}

.modal-card.theme-danger .modal-body button.btn-primary:hover,

.modal-card.theme-danger .modal-actions button.btn-primary:hover,

.modal-card.theme-danger input[type="submit"].btn-primary:hover {

    background: linear-gradient(135deg, #dc2626 0%, #991b1b 100%) !important;

    border-color: #991b1b !important;

    box-shadow: 0 4px 12px rgba(220, 38, 38, 0.25) !important;

}



/* Label icon formatting inside dynamic modals */

.modal-card .modal-body label i {

    margin-left: 6px;

    color: var(--primary-light);

}



.modal-card.theme-reservation .modal-body label i { color: #d97706; }

.modal-card.theme-sale .modal-body label i { color: #059669; }

.modal-card.theme-crm .modal-body label i { color: #7c3aed; }

.modal-card.theme-unit .modal-body label i { color: #0284c7; }

.modal-card.theme-payment .modal-body label i { color: #4338ca; }

.modal-card.theme-settings .modal-body label i { color: #475569; }

.modal-card.theme-danger .modal-body label i { color: #dc2626; }



/* Column Visibility Dropdown Menu Styles */

.column-visibility-dropdown {

    position: relative;

    display: inline-block;

}



.column-visibility-menu {

    position: absolute;

    top: 100%;

    right: 0;

    z-index: 1050;

    display: none;

    min-width: 200px;

    padding: 12px;

    margin-top: 8px;

    background-color: var(--bg-card);

    border: 1px solid var(--border-color);

    border-radius: var(--radius-md);

    box-shadow: var(--shadow-lg);

    flex-direction: column;

    gap: 10px;

    animation: fadeIn 0.2s ease-out;

}



.column-visibility-menu.show {

    display: flex;

}



.column-visibility-item {

    display: flex;

    align-items: center;

    gap: 8px;

    padding: 6px 8px;

    border-radius: var(--radius-sm);

    transition: var(--transition);

}



.column-visibility-item:hover {

    background-color: var(--bg-main);

}



.column-visibility-item input[type="checkbox"] {

    cursor: pointer;

    width: 16px;

    height: 16px;

    accent-color: var(--primary-color);

}



.column-visibility-item label {

    margin: 0;

    font-size: 0.82rem;

    font-weight: 500;

    color: var(--text-main);

    cursor: pointer;

    user-select: none;

}



.btn-close {

    background: none;

    border: none;

    color: #ffffff;

    font-size: 1.5rem;

    cursor: pointer;

    opacity: 0.8;

    transition: var(--transition);

}



.btn-close:hover {

    opacity: 1;

    transform: scale(1.1);

}



.modal-body {
    padding: 24px 24px 0px 24px;
    flex: 1 1 auto;
    min-height: 0;
    max-height: none;
    overflow-y: auto;
}



/* Print Layout & Print-A4 styling */

.print-container-layout {

    position: fixed;

    top: 0;

    left: 0;

    width: 100%;

    height: 100%;

    background-color: rgba(0, 0, 0, 0.85);

    z-index: 200;

    overflow-y: auto;

    padding: 30px;

    display: none;

}



.print-actions {

    display: flex;

    justify-content: center;

    gap: 15px;

    margin-bottom: 24px;

}



.print-a4-page {

    background-color: #ffffff;

    width: 210mm;

    min-height: 297mm;

    margin: 0 auto;

    padding: 25mm 20mm;

    box-shadow: var(--shadow-lg);

    font-family: 'Cairo', sans-serif;

    color: #000000;

    position: relative;

    border-radius: 4px;

    -webkit-print-color-adjust: exact !important;

    print-color-adjust: exact !important;

}



.print-a4-page-landscape {

    background-color: #ffffff;

    width: 297mm;

    min-height: 210mm;

    margin: 0 auto;

    padding: 15mm 15mm;

    box-shadow: var(--shadow-lg);

    font-family: 'Cairo', sans-serif;

    color: #000000;

    position: relative;

    border-radius: 4px;

    -webkit-print-color-adjust: exact !important;

    print-color-adjust: exact !important;

}



@media print {

    .print-a4-page-landscape {

        box-shadow: none !important;

        border: none !important;

        margin: 0 !important;

        padding: 0 !important;

        width: 100% !important;

        min-height: 0 !important;

        height: auto !important;

        overflow: visible !important;

    }

}



.print-header {

    display: flex;

    justify-content: space-between;

    align-items: center;

    border-bottom: 3px solid #1e3a8a; /* Solid brand color border */

    padding-bottom: 18px;

    margin-bottom: 22px;

}



.print-logo {

    text-align: right;

}



.print-logo i {

    font-size: 2.5rem;

    color: #1e3a8a;

    margin-bottom: 8px;

}



.print-logo h2 {

    font-size: 1.3rem;

    font-weight: 800;

    color: #1e3a8a;

    margin: 0;

}



.print-logo span {

    font-size: 0.8rem;

    color: #475569;

    display: block;

    margin-top: 2px;

}



.print-title-box {

    text-align: left;

}



.print-title-box h1 {

    font-size: 1.6rem;

    font-weight: 800;

    color: #1e3a8a;

    margin: 0 0 8px 0;

}



.print-title-box p {

    font-size: 0.9rem;

    color: #334155;

    margin: 0 0 4px 0;

}



.print-divider {

    border: none;

    border-top: 2px solid #cbd5e1;

    margin: 20px 0;

}



.print-section {

    margin-bottom: 22px;

}



.print-section h3 {

    font-size: 1.05rem;

    font-weight: 800;

    padding: 10px 14px;

    margin-top: 0;

    margin-bottom: 16px;

    border-radius: 0 8px 8px 0;

    -webkit-print-color-adjust: exact !important;

    print-color-adjust: exact !important;

}



.print-table-info {

    width: 100%;

    border-collapse: collapse;

    margin-bottom: 10px;

}



.print-table-info td {

    padding: 12px 14px;

    font-size: 0.88rem;

    text-align: right; /* Clean right-aligned Arabic text */

    vertical-align: middle;

    -webkit-print-color-adjust: exact !important;

    print-color-adjust: exact !important;

}



.print-table-info td strong {

    font-size: 0.88rem;

    color: #0f172a;

}



/* --- Section-specific Color Themes (Harmonized & Premium) --- */



/* 1. Customer Section (Blue Theme) */

#print-section-customer h3 {

    border-right: 5px solid #0284c7;

    color: #0369a1;

    background-color: #f0f9ff;

}

#print-section-customer .print-table-info td {

    border: 1px solid #e0f2fe;

}

#print-section-customer .print-table-info td:nth-child(odd) {

    background-color: #f4fafe !important;

}



/* 2. Unit Details Section (Teal Theme) */

#print-section-unit h3 {

    border-right: 5px solid #0d9488;

    color: #0f766e;

    background-color: #f0fdfa;

}

#print-section-unit .print-table-info td {

    border: 1px solid #ccfbf1;

}

#print-section-unit .print-table-info td:nth-child(odd) {

    background-color: #f5fdfb !important;

}



/* 3. Financial Section (Indigo Theme) */

#print-section-financial h3 {

    border-right: 5px solid #6366f1;

    color: #4f46e5;

    background-color: #eef2ff;

}

#print-section-financial .print-table-info td {

    border: 1px solid #e0e7ff;

}

#print-section-financial .print-table-info td:nth-child(odd) {

    background-color: #f5f7ff !important;

}



/* 4. Loan Section (Orange Theme) */

#print-loan-section h3,

#print-fin-loan-section h3 {

    border-right: 5px solid #ea580c;

    color: #c2410c;

    background-color: #fff7ed;

}

#print-loan-section .print-table-info td,

#print-fin-loan-section .print-table-info td {

    border: 1px solid #ffedd5;

}

#print-loan-section .print-table-info td:nth-child(odd),

#print-fin-loan-section .print-table-info td:nth-child(odd) {

    background-color: #fffbf7 !important;

}



/* 5. Installments Section (Violet Theme) */

#print-section-installments h3 {

    border-right: 5px solid #8b5cf6;

    color: #6d28d9;

    background-color: #f5f3ff;

}

#print-section-installments .print-table-info td,

#print-section-installments .print-table-info th {

    border: 1px solid #ddd6fe;

}

#print-section-installments .print-table-info td:nth-child(odd) {

    background-color: #fcfbfe !important;

}



/* 6. Notes Section (Slate/Grey Theme) */

.print-section:not([id]) h3 {

    border-right: 5px solid #64748b;

    color: #475569;

    background-color: #f8fafc;

}



/* --- Reservation Section-specific Color Themes --- */



/* 1. Res Customer Section (Navy Theme) */

#print-res-section-customer h3 {

    border-right: 5px solid #1e3a8a;

    color: #1e3a8a;

    background-color: #eff6ff;

}

#print-res-section-customer .print-table-info td {

    border: 1px solid #dbeafe;

}

#print-res-section-customer .print-table-info td:nth-child(odd) {

    background-color: #f8fafc !important;

}



/* 2. Res Unit Details Section (Emerald Theme) */

#print-res-section-unit h3 {

    border-right: 5px solid #059669;

    color: #047857;

    background-color: #ecfdf5;

}

#print-res-section-unit .print-table-info td {

    border: 1px solid #a7f3d0;

}

#print-res-section-unit .print-table-info td:nth-child(odd) {

    background-color: #f0fdf4 !important;

}



/* 3. Res Financial Section (Violet Theme) */

#print-res-section-financial h3 {

    border-right: 5px solid #7c3aed;

    color: #6d28d9;

    background-color: #f5f3ff;

}

#print-res-section-financial .print-table-info td {

    border: 1px solid #ddd6fe;

}

#print-res-section-financial .print-table-info td:nth-child(odd) {

    background-color: #faf5ff !important;

}



/* --- Visit Section-specific Color Themes (Premium Gold & Rose) --- */



/* 1. Visit Visitor Section (Amber Theme) */

#print-visit-section-visitor h3 {

    border-right: 5px solid #d97706;

    color: #b45309;

    background-color: #fef3c7;

}

#print-visit-section-visitor .print-table-info td {

    border: 1px solid #fde68a;

}

#print-visit-section-visitor .print-table-info td:nth-child(odd) {

    background-color: #fffbeb !important;

}



/* 2. Visit Details Section (Rose Theme) */

#print-visit-section-details h3 {

    border-right: 5px solid #e11d48;

    color: #be123c;

    background-color: #ffe4e6;

}

#print-visit-section-details .print-table-info td {

    border: 1px solid #fecdd3;

}

#print-visit-section-details .print-table-info td:nth-child(odd) {

    background-color: #fff5f5 !important;

}



/* --- Call Section-specific Color Themes (Premium Cyan & Sky) --- */



/* 1. Call Caller Section (Cyan Theme) */

#print-call-section-caller h3 {

    border-right: 5px solid #0891b2;

    color: #0e7490;

    background-color: #ecfeff;

}

#print-call-section-caller .print-table-info td {

    border: 1px solid #cffafe;

}

#print-call-section-caller .print-table-info td:nth-child(odd) {

    background-color: #f0fdfa !important;

}



/* 2. Call Details Section (Sky Blue Theme) */

#print-call-section-details h3 {

    border-right: 5px solid #0284c7;

    color: #0369a1;

    background-color: #f0f9ff;

}

#print-call-section-details .print-table-info td {

    border: 1px solid #e0f2fe;

}

#print-call-section-details .print-table-info td:nth-child(odd) {

    background-color: #f4fafe !important;

}



.print-signatures {

    display: flex;

    justify-content: space-between;

    margin-top: 55px;

    margin-bottom: 35px;

    gap: 20px;

}



.sig-box {

    text-align: center;

    flex: 1;

    background: #f8fafc;

    border: 1px solid #e2e8f0;

    border-radius: 8px;

    padding: 15px 10px;

    -webkit-print-color-adjust: exact !important;

    print-color-adjust: exact !important;

}



.sig-box p {

    font-size: 0.85rem;

    font-weight: 800;

    color: #334155;

    margin-bottom: 50px;

    margin-top: 0;

}



.sig-line {

    width: 80%;

    border-top: 1.5px dashed #94a3b8;

    margin: 0 auto;

}



.print-footer {

    position: absolute;

    bottom: 15mm;

    left: 20mm;

    right: 20mm;

    text-align: center;

    border-top: 1px solid #cbd5e1;

    padding-top: 12px;

}



.print-footer p {

    font-size: 0.78rem;

    color: #64748b;

    margin: 0;

    font-weight: 500;

}



/* Animations */

@keyframes fadeIn {

    from { opacity: 0; transform: translateY(10px); }

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

}



@keyframes slideDown {

    from { opacity: 0; transform: translateY(-30px); }

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

}



@keyframes pulse {

    0% { transform: scale(1); filter: drop-shadow(0 4px 6px rgba(0, 0, 0, 0.2)); }

    100% { transform: scale(1.05); filter: drop-shadow(0 6px 12px rgba(255, 170, 59, 0.4)); }

}



/* ==================== UNIVERSAL PILL CAPSULES NAVIGATION (PATTERN A) ==================== */

.sub-tabs-container, #dashboard-subtabs {

    display: flex !important;

    gap: 12px !important;

    align-items: center !important;

    flex-wrap: wrap !important;

    border-bottom: none !important;

    margin-bottom: 22px !important;

    padding-bottom: 0 !important;

}



.sub-tab-btn, .dash-tab-btn {

    display: inline-flex !important;

    align-items: center !important;

    gap: 8px !important;

    padding: 9px 20px !important;

    border-radius: 30px !important;

    font-size: 0.9rem !important;

    font-weight: 700 !important;

    font-family: 'Cairo', sans-serif !important;

    cursor: pointer !important;

    background: #ffffff !important;

    color: #334155 !important;

    border: 1.5px solid #cbd5e1 !important;

    border-bottom: 1.5px solid #cbd5e1 !important;

    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.05) !important;

    transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1) !important;

}



.sub-tab-btn i, .dash-tab-btn i {

    font-size: 1rem !important;

    color: #0284c7 !important;

    transition: transform 0.2s ease, color 0.2s ease !important;

}



.sub-tab-btn:hover, .dash-tab-btn:hover {

    background: #f8fafc !important;

    color: #0d2b45 !important;

    border-color: #94a3b8 !important;

    border-bottom-color: #94a3b8 !important;

    transform: translateY(-2px) !important;

    box-shadow: 0 4px 12px rgba(13, 43, 69, 0.1) !important;

}



.sub-tab-btn:hover i, .dash-tab-btn:hover i {

    transform: scale(1.1) !important;

}



/* Active Pill State */

.sub-tab-btn.active, .dash-tab-btn.active {

    background: linear-gradient(135deg, #0d2b45 0%, #164670 100%) !important;

    color: #ffffff !important;

    border: 1.5px solid #0d2b45 !important;

    border-bottom: 1.5px solid #0d2b45 !important;

    box-shadow: 0 4px 14px rgba(13, 43, 69, 0.35) !important;

    transform: translateY(-1px) !important;

}



.sub-tab-btn.active i, .dash-tab-btn.active i {

    color: #ffaa3b !important; /* Gold accent */

    transform: scale(1.08) !important;

}



.sub-tab-section {

    display: none;

    background: #ffffff !important;

    border: 1px solid var(--border-color) !important;

    border-radius: var(--radius-lg) !important;

    padding: 28px !important;

    box-shadow: var(--shadow-sm) !important;

    margin-bottom: 30px !important;

}



.sub-tab-section.active {

    display: block !important;

    animation: fadeIn 0.4s ease-out;

}



/* ==================== DASHBOARD ICE NAVY CANVAS (#d8e5f3) ==================== */

.dash-tab-section {

    display: none;

    background: #d8e5f3 !important; /* Ice Navy: #d8e5f3 */

    border: 1px solid #b8cde3 !important;

    border-radius: var(--radius-lg) !important;

    padding: 26px !important;

    box-shadow: 0 4px 16px rgba(13, 43, 69, 0.05) !important;

    margin-bottom: 30px !important;

}



.dash-tab-section.active {

    display: block !important;

    animation: fadeIn 0.4s ease-out;

}



/* Elevated crisp white cards/frames inside dashboard tabs */

.dash-tab-section .grid-card {

    background: #ffffff !important;

    border: 1px solid #c8d9eb !important;

    border-radius: 14px !important;

    box-shadow: 0 4px 14px rgba(13, 43, 69, 0.08), 0 1px 3px rgba(13, 43, 69, 0.04) !important;

    transition: transform 0.2s ease, box-shadow 0.2s ease !important;

}



.dash-tab-section .grid-card:hover {

    box-shadow: 0 8px 22px rgba(13, 43, 69, 0.12), 0 2px 6px rgba(13, 43, 69, 0.06) !important;

}



.dash-tab-section .card-header-actions {

    background: #ffffff !important;

    border: 1px solid #c8d9eb !important;

    border-radius: var(--radius-md) !important;

    box-shadow: 0 3px 10px rgba(13, 43, 69, 0.06) !important;

}

/* Note: .stat-card styles preserved completely untouched to retain original background colors and customizer gradients */



/* ==================== SALES SECTION ICE NAVY TABLE CONTAINER (#d8e5f3) ==================== */

#tab-visits .table-card,

#tab-calls .table-card,

#tab-sales .table-card,

#tab-reservations .table-card,

#tab-reservations .grid-card,
#tab-approvals-center .table-card,
#tab-official-letters .table-card,
#tab-salaries-management .table-card,
#tab-marketing-commissions .table-card,
#tab-financial-vouchers .table-card,
#tab-financial-ledger .table-card,
#tab-system-logs .table-card,
#tab-projects-management .table-card {

    background: #d8e5f3 !important; /* Ice Navy: #d8e5f3 */

    border: 1px solid #b8cde3 !important;

    border-radius: var(--radius-lg) !important;

    box-shadow: 0 4px 16px rgba(13, 43, 69, 0.06) !important;

}



#tab-projects-management .sub-tab-section,
#tab-reservations .sub-tab-section,
#tab-approvals-center .sub-tab-section,
#tab-official-letters .sub-tab-section,
#tab-salaries-management .sub-tab-section,
#tab-marketing-commissions .sub-tab-section,
#tab-financial-ledger .sub-tab-section,
#tab-operations-settings .sub-tab-section,
#tab-settings .sub-tab-section {

    background: transparent !important;

    border: none !important;

    padding: 0 !important;

    box-shadow: none !important;

}



#tab-reservations .section-actions {

    display: none !important;

    margin: 0 !important;

}



#tab-reservations .table-card,

#tab-contracts .table-card,
#tab-approvals-center .table-card,
#tab-official-letters .table-card,
#tab-salaries-management .table-card,
#tab-marketing-commissions .table-card,
#tab-financial-vouchers .table-card,
#tab-financial-ledger .table-card,
#tab-system-logs .table-card,
#tab-projects-management .table-card {

    margin-top: 0 !important;

}

/* فصل الفريمين في تبويب إدارة المشاريع فقط بفراغ هوائي أنيق ومريح */
#nested-settings-proj-list-content #templates-card-wrapper,
#nested-settings-proj-list-content .table-card + .table-card {
    margin-top: 25px !important;
}

/* تصفير الحواف العلوية لجميع الفريمات المتجاورة في هوية النظام وبيانات المشاريع لضمان محاذاة أفقية متطابقة تماماً */
#nested-settings-proj-branding-content .table-card,
#nested-settings-proj-snapshots-content .table-card,
.branding-frames-row .table-card,
#subtab-ops-maintenance .table-card,
.maintenance-frames-row .table-card {
    margin-top: 0 !important;
}

@media (max-width: 992px) {
    .maintenance-frames-row {
        grid-template-columns: 1fr !important;
    }
}

/* ضبط ارتفاع وخلايا جدول المشاريع والتوسعات وقوالب المشاريع بنسق مدمج وأنيق */
#table-projects-management td,
#templates-card-wrapper .table td,
#table-settings-snapshots td {
    padding: 9px 12px !important;
    vertical-align: middle !important;
    font-size: 0.88rem !important;
}

#table-projects-management tbody tr:hover,
#templates-card-wrapper .table tbody tr:hover,
#table-settings-snapshots tbody tr:hover {
    background-color: #f8fafc !important;
}

/* شارات ومفاتيح مكونات المشاريع السكنية الأنيقة (Pill Badges) */
.proj-comp-badge {
    display: inline-flex !important;
    align-items: center !important;
    gap: 5px !important;
    padding: 4px 10px !important;
    border-radius: 6px !important;
    font-size: 0.78rem !important;
    font-weight: 700 !important;
    font-family: 'Cairo', sans-serif !important;
    border: 1px solid transparent !important;
    cursor: pointer !important;
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1) !important;
    white-space: nowrap !important;
    text-decoration: none !important;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04) !important;
    line-height: 1.4 !important;
}

.proj-comp-badge:hover {
    transform: translateY(-1px) !important;
    box-shadow: 0 3px 6px rgba(0, 0, 0, 0.08) !important;
}

.proj-comp-green {
    background: rgba(16, 185, 129, 0.12) !important;
    color: #059669 !important;
    border-color: rgba(16, 185, 129, 0.25) !important;
}
.proj-comp-green:hover {
    background: #10b981 !important;
    color: #ffffff !important;
}

.proj-comp-blue {
    background: rgba(2, 132, 199, 0.12) !important;
    color: #0284c7 !important;
    border-color: rgba(2, 132, 199, 0.25) !important;
}
.proj-comp-blue:hover {
    background: #0284c7 !important;
    color: #ffffff !important;
}

.proj-comp-amber {
    background: rgba(245, 158, 11, 0.12) !important;
    color: #d97706 !important;
    border-color: rgba(245, 158, 11, 0.25) !important;
}
.proj-comp-amber:hover {
    background: #f59e0b !important;
    color: #ffffff !important;
}

.proj-comp-purple {
    background: rgba(124, 58, 237, 0.12) !important;
    color: #7c3aed !important;
    border-color: rgba(124, 58, 237, 0.25) !important;
}
.proj-comp-purple:hover {
    background: #7c3aed !important;
    color: #ffffff !important;
}

.proj-comp-slate {
    background: rgba(100, 116, 139, 0.12) !important;
    color: #475569 !important;
    border-color: rgba(100, 116, 139, 0.25) !important;
}
.proj-comp-slate:hover {
    background: #475569 !important;
    color: #ffffff !important;
}



/* بطاقات القيود والجدول الداخلي باللون الأبيض لتبرز بوضوح تام فوق الحاوية الثلجية */

#tab-visits .table-container,

#tab-calls .table-container,

#tab-sales .table-container,

#tab-reservations .table-container,
#tab-approvals-center .table-container,
#tab-official-letters .table-container,
#tab-salaries-management .table-container,
#tab-marketing-commissions .table-container,
#tab-financial-vouchers .table-container,
#tab-financial-ledger .table-container,
#tab-system-logs .table-container,
#tab-projects-management .table-container {

    background: #ffffff !important;

    border: 1px solid #c8d9eb !important;

    border-radius: 10px !important;

    overflow: hidden !important;

    box-shadow: 0 2px 8px rgba(13, 43, 69, 0.05) !important;

}



#tab-visits .table,
#table-system-logs,
#table-projects-management,
#table-settings-snapshots {
    background: #ffffff !important;
}

#table-system-logs thead th,
#table-settings-users thead th,
#table-role-permissions thead th,
#table-projects-management thead th,
#table-settings-snapshots thead th,
#templates-card-wrapper thead th {
    background-color: #f8fafc !important;
    color: var(--primary-color) !important;
    font-weight: 700 !important;
    padding: 12px 10px !important;
    border-bottom: 2px solid #cbd5e1 !important;
    font-family: 'Cairo', sans-serif !important;
}

#tab-calls .table,

#tab-sales .table,

#tab-reservations .table,
#tab-approvals-center .table,
#tab-official-letters .table,
#tab-salaries-management .table,
#tab-marketing-commissions .table {

    background: #ffffff !important;

}



#tab-visits .sales-crm-card,

#tab-calls .sales-crm-card,

#tab-sales .sales-crm-card,

#tab-reservations .sales-crm-card {

    background: #ffffff !important;

    border: 1px solid #c8d9eb !important;

    border-radius: 8px !important;

    box-shadow: 0 2px 8px rgba(13, 43, 69, 0.06) !important;

}



/* ==================== RESOURCES SECTION ICE NAVY CONTAINER (#d8e5f3) ==================== */

#tab-customers .table-card,

#tab-block-map .grid-card {

    background: #d8e5f3 !important; /* Ice Navy: #d8e5f3 */

    border: 1px solid #b8cde3 !important;

    border-radius: var(--radius-lg) !important;

    box-shadow: 0 4px 16px rgba(13, 43, 69, 0.06) !important;

}



#tab-customers .table-container {

    background: #ffffff !important;

    border: 1px solid #c8d9eb !important;

    border-radius: 10px !important;

    overflow: hidden !important;

    box-shadow: 0 2px 8px rgba(13, 43, 69, 0.05) !important;

}



#tab-customers .table {

    background: #ffffff !important;

}



#tab-customers .search-box input,

#tab-customers #filter-customers-status,

#tab-block-map .dashboard-filter-select {

    background-color: #ffffff !important;

}



/* بطاقات الوحدات السكنية داخل مخطط الوحدات لتبرز ناصعة البياض مع حالاتها */

#tab-block-map .block-unit-card {

    background-color: #ffffff;

    box-shadow: 0 2px 8px rgba(13, 43, 69, 0.07) !important;

}



#tab-block-map .block-unit-card.unit-status-success {

    background-color: #f0fdf4 !important;

    border: 2px solid var(--success-color) !important;

}



#tab-block-map .block-unit-card.unit-status-warning {

    background-color: #fffbeb !important;

    border: 2px solid var(--accent-color) !important;

}



#tab-block-map .block-unit-card.unit-status-danger {

    background-color: #fef2f2 !important;

    border: 2px solid var(--danger-color) !important;

}



#tab-block-map .block-unit-card.unit-status-my-reservation {

    background-color: #eff6ff !important;

    border: 2px solid #3b82f6 !important;

}



#tab-block-map .block-unit-card.unit-status-info {

    background-color: #f8fafc !important;

    border: 2px solid #64748b !important;

}



/* ==================== OPERATIONS SECTION ICE NAVY CONTAINER (#d8e5f3) ==================== */

#tab-contracts .sub-tab-section {

    background: transparent !important;

    border: none !important;

    padding: 0 !important;

    box-shadow: none !important;

}



#tab-contracts .table-card,

#tab-sales-installments .table-card,

#tab-sales-installments .grid-card,

#tab-loan-installments .table-card,

#tab-loan-installments .grid-card,

#tab-unit-handovers .table-card,

#tab-unit-handovers .card,

#tab-operations-settings .table-card,
#tab-settings .table-card {
    margin-bottom: 25px !important;

    background: #d8e5f3 !important; /* Ice Navy: #d8e5f3 */

    border: 1px solid #b8cde3 !important;

    border-radius: var(--radius-lg) !important;

    box-shadow: 0 4px 16px rgba(13, 43, 69, 0.06) !important;

}



#tab-settings .table-container,
#tab-contracts .table-container,

#tab-sales-installments .table-container,

#tab-loan-installments .table-container,

#tab-unit-handovers table,

#tab-unit-handovers div[style*="overflow-x"] {

    background: #ffffff !important;

    border: 1px solid #c8d9eb !important;

    border-radius: 10px !important;

    overflow: hidden !important;

    box-shadow: 0 2px 8px rgba(13, 43, 69, 0.05) !important;

}



#tab-contracts .table,

#tab-sales-installments .table,

#tab-loan-installments .table,

#tab-unit-handovers .table {

    background: #ffffff !important;

}



#tab-contracts .sales-crm-card {

    background: #ffffff !important;

    border: 1px solid #c8d9eb !important;

    border-radius: 8px !important;

    box-shadow: 0 2px 8px rgba(13, 43, 69, 0.06) !important;

}



#tab-contracts .search-box input,

#tab-contracts select,

#tab-sales-installments select,

#tab-sales-installments input,

#tab-sales-installments .installments-date-group,

#tab-loan-installments select,

#tab-loan-installments input,

#tab-loan-installments .installments-date-group {

    background-color: #ffffff !important;

}



/* ==================== ICE NAVY CONTAINERS DIVIDERS (Dark Navy 2px) ==================== */

#tab-visits .card-header-actions,

#tab-calls .card-header-actions,

#tab-sales .card-header-actions,

#tab-reservations .card-header-actions,

#tab-customers .card-header-actions,

#tab-block-map .card-header-actions,

#tab-contracts .card-header-actions,

#tab-sales-installments .card-header-actions,

#tab-loan-installments .card-header-actions,

#tab-unit-handovers .card-header-actions,
#tab-approvals-center .card-header-actions,
#tab-official-letters .card-header-actions,
#tab-salaries-management .card-header-actions {

    border-bottom: 2px solid #0d2b45 !important;

}



#tab-visits .contracts-pagination-container,

#tab-calls .contracts-pagination-container,

#tab-sales .contracts-pagination-container,

#tab-reservations .contracts-pagination-container,

#tab-customers .contracts-pagination-container,

#tab-contracts .contracts-pagination-container,

#tab-sales-installments .contracts-pagination-container,

#tab-loan-installments .contracts-pagination-container,

#tab-unit-handovers .contracts-pagination-container,
#tab-approvals-center .contracts-pagination-container,
#tab-official-letters .contracts-pagination-container,
#tab-salaries-management .contracts-pagination-container {

    border-top: 2px solid #0d2b45 !important;

}




/* ==================== PROFESSIONAL TABLE HEADER CONTROLS ==================== */
#tab-sales .table-card,
#tab-approvals-center .table-card,
#tab-official-letters .table-card,
#tab-salaries-management .table-card {
    padding: 16px 20px !important;
    margin-top: 0 !important;
}

#tab-sales .card-header-actions,
#tab-approvals-center .card-header-actions,
#tab-official-letters .card-header-actions,
#tab-salaries-management .card-header-actions {
    padding-bottom: 12px !important;
    margin-bottom: 14px !important;
    border-bottom: 2px solid #0d2b45 !important;
}

.table-header-toolbar {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}

.filter-control-wrap {
    position: relative;
    display: inline-flex;
    align-items: center;
}

.filter-control-wrap .filter-icon {
    position: absolute;
    right: 10px;
    font-size: 0.85rem;
    color: #0284c7;
    pointer-events: none;
    z-index: 2;
    transition: all 0.2s ease;
}

.filter-control-wrap .table-filter-select {
    height: 36px !important;
    line-height: 34px !important;
    padding: 0 30px 0 26px !important; /* 30px on right for filter icon, 26px on left for custom chevron in RTL */
    background-color: #ffffff !important;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%230d2b45' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E") !important;
    background-repeat: no-repeat !important;
    background-position: left 8px center !important;
    appearance: none !important;
    -webkit-appearance: none !important;
    -moz-appearance: none !important;
    border: 1px solid #b8cde3 !important;
    border-radius: 8px !important;
    font-family: 'Cairo', sans-serif !important;
    font-weight: 600 !important;
    font-size: 0.82rem !important;
    color: #0d2b45 !important;
    cursor: pointer !important;
    box-shadow: 0 1px 3px rgba(13, 43, 69, 0.06) !important;
    transition: all 0.2s ease !important;
    outline: none !important;
}

.filter-control-wrap .table-filter-select:hover {
    border-color: #0d2b45 !important;
    background-color: #f8fafc !important;
    box-shadow: 0 2px 5px rgba(13, 43, 69, 0.1) !important;
}

.filter-control-wrap .table-filter-select:focus {
    border-color: #0d2b45 !important;
    box-shadow: 0 0 0 3px rgba(13, 43, 69, 0.15) !important;
}

/* Active Filter State */
.filter-control-wrap .table-filter-select.active-filter {
    background-color: #e0f2fe !important;
    border-color: #0d2b45 !important;
    color: #0d2b45 !important;
    font-weight: 700 !important;
    box-shadow: 0 1px 4px rgba(2, 132, 199, 0.18) !important;
}

.filter-control-wrap:has(.table-filter-select.active-filter) .filter-icon {
    color: #0d2b45 !important;
    transform: scale(1.1);
}

/* Reset Button - Global Standardized */
.table-btn-icon,
.table-header-toolbar .table-btn-icon {
    height: 36px !important;
    width: 36px !important;
    min-width: 36px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    background: #ffffff !important;
    color: #0d2b45 !important;
    border: 1px solid #b8cde3 !important;
    border-radius: 8px !important;
    cursor: pointer !important;
    box-shadow: 0 1px 3px rgba(13, 43, 69, 0.06) !important;
    transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1) !important;
}

.table-btn-icon:hover,
.table-header-toolbar .table-btn-icon:hover {
    background: #e0f2fe !important;
    color: #0d2b45 !important;
    border-color: #0284c7 !important;
    box-shadow: 0 3px 8px rgba(13, 43, 69, 0.15) !important;
    transform: translateY(-2px) !important;
}

.table-btn-icon:active,
.table-header-toolbar .table-btn-icon:active {
    transform: translateY(0px) scale(0.96) !important;
}

.table-btn-icon i,
.table-header-toolbar .table-btn-icon i {
    display: inline-block !important;
    transition: transform 0.35s cubic-bezier(0.34, 1.56, 0.64, 1) !important;
    font-size: 0.95rem !important;
}

.table-btn-icon:hover i,
.table-header-toolbar .table-btn-icon:hover i {
    transform: rotate(180deg) !important;
}

/* Search Box */
.table-header-toolbar .search-box {
    margin: 0 !important;
    min-width: 250px !important;
    flex: 1 !important;
    position: relative !important;
    display: flex !important;
    align-items: center !important;
}

.table-header-toolbar .search-box input {
    width: 100% !important;
    height: 36px !important;
    padding: 0 36px 0 12px !important;
    border: 1px solid #b8cde3 !important;
    border-radius: 8px !important;
    background-color: #ffffff !important;
    font-family: 'Cairo', sans-serif !important;
    font-size: 0.82rem !important;
    font-weight: 600 !important;
    color: #0d2b45 !important;
    box-shadow: 0 1px 3px rgba(13, 43, 69, 0.06) !important;
    transition: all 0.2s ease !important;
    outline: none !important;
}

.table-header-toolbar .search-box input::placeholder {
    color: #94a3b8 !important;
    font-weight: 500 !important;
}

.table-header-toolbar .search-box input:hover {
    border-color: #0d2b45 !important;
    box-shadow: 0 2px 5px rgba(13, 43, 69, 0.08) !important;
}

.table-header-toolbar .search-box input:focus {
    border-color: #0d2b45 !important;
    box-shadow: 0 0 0 3px rgba(13, 43, 69, 0.15) !important;
}

.table-header-toolbar .search-box i {
    position: absolute !important;
    right: 12px !important;
    color: #0284c7 !important;
    font-size: 0.88rem !important;
    pointer-events: none !important;
    z-index: 2 !important;
    transition: all 0.2s ease !important;
}

.table-header-toolbar .search-box input:focus + i {
    color: #0d2b45 !important;
    transform: scale(1.15);
}

/* ==================== TABLE ACTION BUTTONS & VIEW TOGGLE CAPSULE ==================== */
.table-btn-action {
    height: 36px !important;
    width: auto !important;
    min-width: fit-content !important;
    padding: 0 13px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 7px !important;
    background: #ffffff !important;
    color: #0d2b45 !important;
    border: 1px solid #b8cde3 !important;
    border-radius: 8px !important;
    cursor: pointer !important;
    font-family: 'Cairo', sans-serif !important;
    font-weight: 700 !important;
    font-size: 0.82rem !important;
    box-shadow: 0 1px 3px rgba(13, 43, 69, 0.06) !important;
    transition: all 0.25s ease !important;
    white-space: nowrap !important;
}

.table-btn-action:hover {
    box-shadow: 0 2px 6px rgba(13, 43, 69, 0.12) !important;
    transform: translateY(-1px);
}

.table-btn-action[onclick*="showContractFieldsGuide"]:hover {
    background: #fde68a !important;
    border-color: #f59e0b !important;
    color: #78350f !important;
}

.table-btn-action[onclick*="openContractsColCustomizer"]:hover {
    background: #ddd6fe !important;
    border-color: #8b5cf6 !important;
    color: #4c1d95 !important;
}

.table-header-toolbar .table-btn-icon[onclick*="resetContractsFilters"]:hover {
    background: #bae6fd !important;
    border-color: #0284c7 !important;
    color: #0369a1 !important;
}

.table-btn-action i {
    font-size: 0.95rem;
}

/* View Mode Toggle Capsule (Table vs Cards) */
.view-toggle-capsule {
    height: 36px;
    display: inline-flex;
    align-items: center;
    background: #f1f5f9;
    border: 1px solid #b8cde3;
    border-radius: 8px;
    padding: 2px;
    gap: 3px;
    box-sizing: border-box;
}

.view-toggle-capsule .view-toggle-pill {
    height: 30px;
    padding: 0 12px;
    border: none;
    background: transparent;
    color: #64748b;
    border-radius: 6px;
    font-family: 'Cairo', sans-serif;
    font-weight: 700;
    font-size: 0.78rem;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    cursor: pointer;
    transition: all 0.2s ease;
    white-space: nowrap;
}

.view-toggle-capsule .view-toggle-pill:hover {
    color: #0d2b45;
    background: rgba(255, 255, 255, 0.7);
}

.view-toggle-capsule .view-toggle-pill.active {
    background: #0d2b45 !important;
    color: #ffffff !important;
    box-shadow: 0 1px 3px rgba(13, 43, 69, 0.25) !important;
}

.view-toggle-capsule .view-toggle-pill.active i {
    color: #38bdf8 !important;
}




/* ==================== COMPACT SLIM STYLING FOR INSTALLMENTS & LOANS ==================== */
#tab-sales-installments .grid-card,
#tab-loan-installments .grid-card {
    padding: 14px 16px !important;
}

#tab-sales-installments .card-header-actions,
#tab-loan-installments .card-header-actions {
    margin-bottom: 10px !important;
    padding-bottom: 8px !important;
    gap: 10px !important;
}

#tab-sales-installments .card-header-actions h3,
#tab-loan-installments .card-header-actions h3 {
    font-size: 1.05rem !important;
}

#tab-sales-installments .installments-date-group,
#tab-sales-installments .contracts-filter-select,
#tab-loan-installments .search-box input {
    height: 34px !important;
    font-size: 0.84rem !important;
}

#tab-sales-installments .installments-date-group input[type="date"] {
    font-size: 0.8rem !important;
    padding: 2px 4px !important;
}

#table-monthly-payments,
#table-loan-payments {
    font-size: 0.82rem !important;
}

#table-monthly-payments th,
#table-monthly-payments td,
#table-loan-payments th,
#table-loan-payments td {
    padding: 6px 10px !important;
    font-size: 0.82rem !important;
    line-height: 1.3 !important;
}

#table-monthly-payments thead th,
#table-loan-payments thead th {
    padding: 7px 8px !important;
    font-size: 0.82rem !important;
    font-weight: 700 !important;
}

#table-monthly-payments .subth-installments,
#table-monthly-payments .subth-custom-payments,
#table-monthly-payments .subth-delivery-payment,
#table-monthly-payments .subth-loan,
#table-monthly-payments .subth-down-payment,
#table-monthly-payments .subth-admin-commission,
#table-loan-payments .subth-installments,
#table-loan-payments .subth-loan-installment {
    padding: 5px 6px !important;
    font-size: 0.78rem !important;
}

#table-monthly-payments td.cell-installments,
#table-monthly-payments td.cell-custom-payment,
#table-loan-payments td.cell-installments,
#table-loan-payments td.cell-loan-installment {
    padding: 5px 8px !important;
    text-align: center !important;
    white-space: nowrap !important;
    font-size: 0.8rem !important;
}

#table-monthly-payments td.sticky-col-1 .badge,
#table-loan-payments td.sticky-col-1 .badge {
    padding: 1px 5px !important;
    font-size: 0.62rem !important;
    margin-top: 2px !important;
}

#tab-sales-installments .contracts-pagination-container,
#tab-loan-installments .contracts-pagination-container {
    padding-top: 10px !important;
    margin-top: 10px !important;
}




#tab-installments {

    background: #ffffff !important;

    border: 1px solid var(--border-color) !important;

    border-radius: var(--radius-lg) !important;

    padding: 28px !important;

    box-shadow: var(--shadow-sm) !important;

    margin-bottom: 30px !important;

}



/* @media Print Configuration */

@media print {

    /* Hide all app interfaces completely to prevent flex/height issues */

    .app-container, .sidebar, .main-content, .modal-overlay, #modal-container {

        display: none !important;

    }

    

    html, body {

        height: auto !important;

        overflow: visible !important;

        background-color: #ffffff !important;

        margin: 0 !important;

        padding: 0 !important;

        -webkit-print-color-adjust: exact !important;

        print-color-adjust: exact !important;

    }

    

    .print-container-layout.active-print {

        display: block !important;

        position: relative !important;

        width: 100% !important;

        height: auto !important;

        overflow: visible !important;

        padding: 0 !important;

        margin: 0 !important;

        background-color: #ffffff !important;

    }

    

    .print-a4-page {

        box-shadow: none !important;

        border: none !important;

        margin: 0 !important;

        padding: 0 !important;

        width: 100% !important;

        min-height: 0 !important;

        height: auto !important;

        overflow: visible !important;

    }



    .no-print {

        display: none !important;

    }



    .print-section {

        page-break-inside: avoid !important;

        break-inside: avoid !important;

    }



    .print-table-info tr {

        page-break-inside: avoid !important;

        break-inside: avoid !important;

    }



    .print-footer {

        position: relative !important;

        bottom: auto !important;

        left: auto !important;

        right: auto !important;

        margin-top: 30px !important;

        padding-top: 12px !important;

        page-break-inside: avoid !important;

        break-inside: avoid !important;

    }



    .print-reservation-a4-page.cancelled-print-state {

        zoom: 0.90 !important;

    }

    .print-reservation-a4-page.cancelled-print-state h1#print-res-title {

        font-size: 1.4rem !important;

        margin: 6px 0 !important;

    }

    .print-reservation-a4-page.cancelled-print-state .print-header {

        margin-bottom: 6px !important;

        padding-bottom: 6px !important;

    }

    .print-reservation-a4-page.cancelled-print-state #print-res-cancellation-info {

        margin-top: 6px !important;

        padding: 6px 10px !important;

    }

    .print-reservation-a4-page.cancelled-print-state #print-res-cancellation-info h4 {

        font-size: 0.9rem !important;

        margin-bottom: 2px !important;

    }

    .print-reservation-a4-page.cancelled-print-state #print-res-cancellation-info table td {

        padding: 2px 0 !important;

        font-size: 0.8rem !important;

    }

    .print-reservation-a4-page.cancelled-print-state hr.print-divider {

        margin: 6px 0 !important;

    }

    .print-reservation-a4-page.cancelled-print-state .print-section {

        margin-bottom: 6px !important;

    }

    .print-reservation-a4-page.cancelled-print-state .print-section h3 {

        font-size: 0.9rem !important;

        padding: 5px 10px !important;

        margin-bottom: 6px !important;

    }

    .print-reservation-a4-page.cancelled-print-state table.print-table-info td {

        padding: 4px 8px !important;

        font-size: 0.8rem !important;

    }

    .print-reservation-a4-page.cancelled-print-state table.print-table-info td strong {

        font-size: 0.8rem !important;

    }

    .print-reservation-a4-page.cancelled-print-state p#print-res-notes {

        min-height: auto !important;

        margin-top: 2px !important;

        padding: 4px !important;

        font-size: 0.8rem !important;

    }

    .print-reservation-a4-page.cancelled-print-state .print-footer {

        margin-top: 10px !important;

        padding-top: 6px !important;

    }

}



/* Page numbering footer styles */

.print-page-number-footer {

    display: none;

}



@media print {

    body {

        counter-reset: page;

    }

    

    @page {

        size: A4;

        margin: 15mm 10mm 15mm 10mm;

        @bottom-center {

            content: "صفحة " counter(page) " من " counter(pages);

            font-family: 'Cairo', sans-serif;

            font-size: 9pt;

            color: #64748b;

        }

    }

    

    .print-page-number-footer {

        display: none !important;

    }

}



/* Block 12 Interactive Grid Styling */

.block-unit-card {

    background-color: var(--bg-card);

    border-radius: var(--radius-md);

    box-shadow: var(--shadow-sm);

    padding: 12px;

    text-align: center;

    cursor: pointer;

    transition: var(--transition);

    position: relative;

    overflow: hidden;

    display: flex;

    flex-direction: column;

    align-items: center;

    justify-content: space-between;

}



.block-unit-card:hover {

    transform: translateY(-5px);

    box-shadow: var(--shadow-md);

}



.unit-status-success {

    border: 2px solid var(--success-color);

    background-color: rgba(16, 185, 129, 0.04);

}



.unit-status-warning {

    border: 2px solid var(--accent-color);

    background-color: rgba(255, 170, 59, 0.04);

}



.unit-status-my-reservation {

    border: 2px solid #3b82f6;

    background-color: rgba(59, 130, 246, 0.04);

}



.unit-status-danger {

    border: 2px solid var(--danger-color);

    background-color: rgba(239, 68, 68, 0.04);

}



.unit-status-info {

    border: 2px solid #64748b;

    background-color: rgba(100, 116, 139, 0.04);

}



.unit-card-img-container {

    width: 100%;

    height: 70px;

    overflow: hidden;

    border-radius: var(--radius-sm);

    background-color: #f1f5f9;

    margin-bottom: 8px;

    display: flex;

    align-items: center;

    justify-content: center;

}



.unit-card-img {

    width: 100%;

    height: 100%;

    object-fit: cover;

    transition: var(--transition);

}



.block-unit-card:hover .unit-card-img {

    transform: scale(1.1);

}



.unit-card-info {

    width: 100%;

}



.unit-card-title {

    font-size: 0.95rem;

    font-weight: 700;

    color: var(--text-main);

    margin-bottom: 2px;

}



.unit-card-subtitle {

    font-size: 0.75rem;

    color: var(--text-muted);

    margin-bottom: 4px;

}



/* Dashboard Details Grid responsiveness */

@media (max-width: 992px) {

    .dashboard-details-grid {

        grid-template-columns: 1fr !important;

    }

}



/* ==================== COLOR-CODED FINANCIAL THEMES ==================== */



/* 1. Base price badge style */

.badge-price {

    display: inline-block;

    padding: 4px 10px;

    border-radius: var(--radius-sm);

    font-size: 0.85rem;

    font-weight: 700;

    text-align: center;

    border: 1px solid transparent;

}



/* 2. Down Payment (Shade 1 - Light Blue Theme) */

.badge-down-payment {

    background-color: #eff6ff !important;

    color: #1d4ed8 !important;

    border-color: #bfdbfe !important;

}

.form-group-down-payment label {

    color: #1d4ed8 !important;

}

.form-group-down-payment .form-control {

    border-color: #bfdbfe !important;

    background-color: #f0f7ff !important;

    font-weight: 700 !important;

    color: #1d4ed8 !important;

}

.form-group-down-payment .form-control:focus {

    border-color: #3b82f6 !important;

    box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.15) !important;

    background-color: #ffffff !important;

}

.th-down-payment {

    background-color: #eff6ff !important;

    color: #1d4ed8 !important;

    border-bottom: 2px solid #bfdbfe !important;

}

.subth-down-payment {

    background-color: #f0f7ff !important;

    color: #1e40af !important;

    border-bottom: 2px solid #bfdbfe !important;

}

.cell-deposit-payment {

    font-size: 0.85rem;

    cursor: pointer;

    text-align: center;

}

.cell-deposit-payment.paid {

    background-color: #dcfce7 !important;

    color: #15803d !important;

}

.cell-deposit-payment.unpaid {

    background-color: #ffffff !important;

    color: #1e293b !important;

}

.cell-admin-commission {

    font-size: 0.85rem;

    cursor: pointer;

    text-align: center;

}

.cell-admin-commission.paid {

    background-color: #dcfce7 !important;

    color: #15803d !important;

}

.cell-admin-commission.unpaid {

    background-color: #ffffff !important;

    color: #1e293b !important;

}

.subth-admin-commission {

    background-color: #faf5ff !important;

    color: #6b21a8 !important;

    border-bottom: 2px solid #e9d5ff !important;

}

.cell-down-payment {

    font-size: 0.85rem;

    cursor: pointer;

    text-align: center;

}

.cell-down-payment.paid {

    background-color: #dcfce7 !important;

    color: #15803d !important;

}

.cell-down-payment.unpaid {

    background-color: #fee2e2 !important;

    color: #991b1b !important;

}

.print-badge-down-payment {

    background-color: #dbeafe !important;

    color: #1e40af !important;

    padding: 3px 8px !important;

    border-radius: 4px !important;

    font-weight: 700 !important;

    display: inline-block !important;

    border: 1px solid #bfdbfe !important;

}



/* 3. Delivery Payment (Shade 2 - Medium Blue Theme) */

.badge-delivery-payment {

    background-color: #dbeafe !important;

    color: #1e40af !important;

    border-color: #93c5fd !important;

}

.form-group-delivery-payment label {

    color: #1e40af !important;

}

.form-group-delivery-payment .form-control {

    border-color: #93c5fd !important;

    background-color: #eff6ff !important;

    font-weight: 700 !important;

    color: #1e40af !important;

}

.form-group-delivery-payment .form-control:focus {

    border-color: #2563eb !important;

    box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.15) !important;

    background-color: #ffffff !important;

}

.th-delivery-payment {

    background-color: #dbeafe !important;

    color: #1e40af !important;

    border-bottom: 2px solid #93c5fd !important;

}

.subth-delivery-payment {

    background-color: #eff6ff !important;

    color: #1e3a8a !important;

    border-bottom: 2px solid #93c5fd !important;

}

.cell-delivery-payment {

    font-size: 0.85rem;

    cursor: pointer;

    text-align: center;

}

.cell-delivery-payment.paid {

    background-color: #bfdbfe !important;

    color: #1e3a8a !important;

}

.cell-delivery-payment.unpaid {

    background-color: #fee2e2 !important;

    color: #991b1b !important;

}

.cell-delivery-payment-expected {

    font-size: 0.85rem;

    cursor: pointer;

    text-align: center;

}

.cell-delivery-payment-expected.paid {

    background-color: #e6fffa !important;

    color: #0f766e !important;

}

.cell-delivery-payment-expected.overdue {

    background-color: #fee2e2 !important;

    color: #991b1b !important;

}

.cell-delivery-payment-expected.normal {

    background-color: #ffffff !important;

    color: var(--text-main) !important;

}

.print-badge-delivery-payment {

    background-color: #bfdbfe !important;

    color: #1e3a8a !important;

    padding: 3px 8px !important;

    border-radius: 4px !important;

    font-weight: 700 !important;

    display: inline-block !important;

    border: 1px solid #93c5fd !important;

}



/* 4. Loan Amount (Shade 3 - Dark Blue Theme) */

.badge-loan {

    background-color: #bfdbfe !important;

    color: #1e3a8a !important;

    border-color: #60a5fa !important;

}

.form-group-loan label {

    color: #1e3a8a !important;

}

.form-group-loan .form-control {

    border-color: #60a5fa !important;

    background-color: #e0f2fe !important;

    font-weight: 700 !important;

    color: #1e3a8a !important;

}

.form-group-loan .form-control:focus {

    border-color: #1d4ed8 !important;

    box-shadow: 0 0 0 3px rgba(29, 78, 216, 0.15) !important;

    background-color: #ffffff !important;

}

.th-loan {

    background-color: #bfdbfe !important;

    color: #1e3a8a !important;

    border-bottom: 2px solid #60a5fa !important;

}

.subth-loan {

    background-color: #e0f2fe !important;

    color: #0369a1 !important;

    border-bottom: 2px solid #60a5fa !important;

}

.cell-loan {

    font-size: 0.85rem;

    text-align: center;

}

.cell-loan:not(.empty) {

    cursor: pointer;

}

.cell-loan.paid {

    background-color: #93c5fd !important;

    color: #172554 !important;

}

.cell-loan.unpaid {

    background-color: #ffffff !important;

    color: #1e293b !important;

}

.cell-loan.empty {

    background-color: #f8fafc !important;

    color: #cbd5e1 !important;

}

.print-badge-loan {

    background-color: #93c5fd !important;

    color: #172554 !important;

    padding: 3px 8px !important;

    border-radius: 4px !important;

    font-weight: 700 !important;

    display: inline-block !important;

    border: 1px solid #60a5fa !important;

}



/* 4b. Group B - Installment Counts (Unified Purple/Indigo Theme - Shades 2, 3, 4) */

.th-total-count {

    background-color: #f3e8ff !important;

    color: #6b21a8 !important;

    border-bottom: 2px solid #e9d5ff !important;

}

.cell-total-count {

    background-color: #f3e8ff !important;

    color: #6b21a8 !important;

}



.th-overdue-count {

    background-color: #e9d5ff !important;

    color: #5b21b6 !important;

    border-bottom: 2px solid #d8b4fe !important;

}

.cell-overdue-count {

    background-color: #e9d5ff !important;

    color: #5b21b6 !important;

}



.th-paid-count {

    background-color: #d8b4fe !important;

    color: #4c1d95 !important;

    border-bottom: 2px solid #c084fc !important;

}

.cell-paid-count {

    background-color: #d8b4fe !important;

    color: #4c1d95 !important;

}



/* 5. Remaining Amount & Installments Count (Unified Purple/Indigo Theme - 4 Shades) */



/* Shade 1: المبلغ المتبقي (Very Light Purple) */

.badge-remaining {

    background-color: #faf5ff !important;

    color: #7c3aed !important;

    border-color: #e9d5ff !important;

}

.th-remaining-installments {

    background-color: #faf5ff !important;

    color: #7c3aed !important;

    border-bottom: 2px solid #e9d5ff !important;

}

.cell-installments.remaining-val {

    background-color: #faf5ff !important;

    color: #7c3aed !important;

}

.print-badge-installments {

    background-color: #faf5ff !important;

    color: #7c3aed !important;

    padding: 3px 8px !important;

    border-radius: 4px !important;

    font-weight: 700 !important;

    display: inline-block !important;

    border: 1px solid #e9d5ff !important;

}

.form-group-installments label {

    color: #7c3aed !important;

}

.form-group-installments .form-control {

    border-color: #e9d5ff !important;

    background-color: #faf5ff !important;

    font-weight: 700 !important;

    color: #7c3aed !important;

}

.form-group-installments .form-control:focus {

    border-color: #7c3aed !important;

    box-shadow: 0 0 0 3px rgba(124, 58, 237, 0.15) !important;

    background-color: #ffffff !important;

}

.badge-installments {

    background-color: #faf5ff !important;

    color: #7c3aed !important;

    border-color: #e9d5ff !important;

}

.th-installments {

    background-color: #f8fafc !important;

    color: var(--primary-color) !important;

    border-bottom: 2px solid var(--border-color) !important;

}

.subth-installments {

    background-color: #ffffff !important;

    color: var(--text-main) !important;

    border-bottom: 2px solid var(--border-color) !important;

}

.cell-installments {

    font-size: 0.85rem;

    text-align: center;

}

.cell-installments:not(.empty) {

    cursor: pointer;

}

.cell-installments.paid {

    background-color: #e6fffa !important;

    color: #0f766e !important;

}

.cell-installments.partial {

    background-color: #fff4e6 !important;

    color: #d97706 !important;

}

.cell-installments.due {

    background-color: #fee2e2 !important;

    color: #991b1b !important;

}

.cell-installments.future {

    background-color: #ffffff !important;

    color: var(--text-main) !important;

}

.cell-installments.pending {

    background-color: #fef3c7 !important;

    color: #92400e !important;

}

.cell-installments.empty {

    background-color: #f8fafc !important;

    color: #cbd5e1 !important;

}



/* 6. Discount Badge (Red/Coral Accent Theme) */

.badge-discount {

    background-color: #fff5f5 !important;

    color: #c53030 !important;

    border-color: #feb2b2 !important;

}



/* General Layout Utilities */

.underline {

    text-decoration: underline !important;

}

.border-left-heavy {

    border-left: 2px solid var(--border-color) !important;

}



#btn-quick-sale, #btn-quick-res {

    display: none;

}



/* ==================== LOGIN SCREEN & USER MANAGEMENT STYLES ==================== */



/* 1. Login Screen */

.login-overlay {

    position: fixed;

    top: 0;

    left: 0;

    width: 100%;

    height: 100%;

    background: radial-gradient(circle at 15% 20%, rgba(56, 189, 248, 0.07) 0%, transparent 45%),

                radial-gradient(circle at 85% 80%, rgba(16, 185, 129, 0.05) 0%, transparent 45%),

                radial-gradient(circle at 50% 50%, rgba(30, 41, 59, 0.95) 0%, rgba(15, 23, 42, 0.98) 100%);

    display: flex;

    align-items: center;

    justify-content: center;

    z-index: 9999;

    padding: 20px;

    font-family: 'Cairo', sans-serif;

    overflow: hidden;

}



/* Login Background Image Slideshow Slider styling - PURE CSS ANIMATED */

.login-slideshow {

    position: absolute;

    top: 0;

    left: 0;

    width: 100%;

    height: 100%;

    z-index: 1;

    overflow: hidden;

    background: #0f172a;

}



.login-slide {

    position: absolute;

    top: 0;

    left: 0;

    width: 100%;

    height: 100%;

    background-size: cover;

    background-position: center;

    opacity: 0;

    transform: scale(1.08) translate3d(0, 0, 0);

    animation: slideAnimation 18s infinite linear;

}



.login-slide.slide-1 {

    animation-delay: 0s;

}



.login-slide.slide-2 {

    animation-delay: 6s;

}



.login-slide.slide-3 {

    animation-delay: 12s;

}



@keyframes slideAnimation {

    0% {

        opacity: 0;

        transform: scale(1.08) translate3d(0, 0, 0);

    }

    4% {

        opacity: 1;

    }

    30% {

        opacity: 1;

    }

    34% {

        opacity: 0;

        transform: scale(1.02) translate3d(-30px, 0, 0);

    }

    100% {

        opacity: 0;

    }

}



.login-slideshow-overlay {

    position: absolute;

    top: 0;

    left: 0;

    width: 100%;

    height: 100%;

    background: radial-gradient(circle at 50% 50%, rgba(15, 23, 42, 0.35) 0%, rgba(15, 23, 42, 0.78) 100%);

    z-index: 2;

    pointer-events: none;

}



.login-card {

    position: relative;

    background: rgba(15, 23, 42, 0.6);

    backdrop-filter: blur(20px);

    -webkit-backdrop-filter: blur(20px);

    border: 1px solid rgba(255, 255, 255, 0.1);

    border-radius: 20px;

    width: 100%;

    max-width: 340px;

    padding: 28px 22px;

    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.4), inset 0 1px 0 rgba(255, 255, 255, 0.05);

    text-align: center;

    color: #ffffff;

    z-index: 2;

    animation: fadeIn 0.4s ease-out;

}



.login-logo {

    font-size: 2rem;

    margin-bottom: 6px;

}



.login-card h2 {

    font-size: 1.25rem;

    font-weight: 800;

    margin-bottom: 2px;

    letter-spacing: -0.2px;

    display: inline-block;

    width: 100%;

    

    /* Premium Shimmering Animated Text Glow */

    background: linear-gradient(

        to right,

        #ffffff 20%,

        #38bdf8 40%,

        #38bdf8 60%,

        #ffffff 80%

    );

    background-size: 200% auto;

    -webkit-background-clip: text;

    -webkit-text-fill-color: transparent;

    animation: textShimmer 4s linear infinite;

}



@keyframes textShimmer {

    0% { background-position: 200% center; }

    100% { background-position: -200% center; }

}



.login-card p {

    font-size: 0.78rem;

    color: rgba(255, 255, 255, 0.45);

    margin-bottom: 12px;

}



.login-form .form-group {

    text-align: right;

    margin-bottom: 14px;

}



.login-form label {

    display: block;

    font-size: 0.8rem;

    font-weight: 600;

    color: rgba(255, 255, 255, 0.85);

    margin-bottom: 6px;

}



.login-form .input-group {

    position: relative;

    display: flex;

    align-items: center;

}



.login-form .input-group > i:first-child {

    position: absolute;

    right: 14px;

    color: rgba(255, 255, 255, 0.35);

    font-size: 0.95rem;

    pointer-events: none;

    transition: color 0.3s, text-shadow 0.3s;

}



.login-form .input-group:focus-within > i:first-child {

    color: #38bdf8;

    text-shadow: 0 0 8px rgba(56, 189, 248, 0.6);

}



#btn-toggle-login-password {

    position: absolute !important;

    left: 8px !important;

    right: auto !important;

    top: 50% !important;

    transform: translateY(-50%) !important;

    width: 32px !important;

    height: 32px !important;

    background: transparent !important;

    border: none !important;

    cursor: pointer !important;

    color: rgba(255, 255, 255, 0.7) !important;

    display: flex !important;

    align-items: center !important;

    justify-content: center !important;

    z-index: 10 !important;

    padding: 0 !important;

    outline: none !important;

    transition: color 0.2s ease;

}



#btn-toggle-login-password i {

    position: static !important;

    right: auto !important;

    left: auto !important;

    color: inherit !important;

    pointer-events: none !important;

}



#btn-toggle-login-password:hover {

    color: #38bdf8 !important;

}



.login-form .form-control {

    width: 100% !important;

    padding: 11px 40px 11px 12px !important;

    background: rgba(15, 23, 42, 0.55) !important;

    border: 1px solid rgba(255, 255, 255, 0.12) !important;

    border-radius: 10px !important;

    color: #ffffff !important;

    font-size: 0.88rem !important;

    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;

    box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.1) !important;

}



.login-form .form-control:focus {

    border-color: #38bdf8 !important;

    background: rgba(15, 23, 42, 0.7) !important;

    box-shadow: 0 0 12px rgba(56, 189, 248, 0.25), inset 0 2px 4px rgba(0, 0, 0, 0.1) !important;

    outline: none !important;

}



/* Prevent browser autofill background and text color override */

.login-form .form-control:-webkit-autofill,

.login-form .form-control:-webkit-autofill:hover, 

.login-form .form-control:-webkit-autofill:focus, 

.login-form .form-control:-webkit-autofill:active {

    -webkit-box-shadow: 0 0 0 1000px rgb(20, 30, 50) inset !important;

    -webkit-text-fill-color: #ffffff !important;

    transition: background-color 5000s ease-in-out 0s;

}



.login-btn {

    width: 100%;

    padding: 11px;

    background: linear-gradient(135deg, #0284c7 0%, #0369a1 100%);

    border: none;

    border-radius: 10px;

    color: #ffffff;

    font-family: 'Cairo', sans-serif;

    font-size: 0.92rem;

    font-weight: 700;

    cursor: pointer;

    margin-top: 5px;

    box-shadow: 0 4px 12px rgba(2, 132, 199, 0.25);

    transition: all 0.3s ease;

}



.login-btn:hover {

    background: linear-gradient(135deg, #38bdf8 0%, #0284c7 100%);

    box-shadow: 0 6px 16px rgba(56, 189, 248, 0.35);

    transform: translateY(-1px);

}



.login-remember-row {

    margin-top: -2px !important;

    margin-bottom: 16px !important;

    width: 100% !important;

    text-align: right !important;

}



.login-remember-label {

    display: flex !important;

    align-items: center !important;

    gap: 8px !important;

    cursor: pointer !important;

    user-select: none !important;

    width: 100% !important;

    justify-content: flex-start !important;

    margin: 0 !important;

    padding: 2px 0 !important;

}



#login-remember-username {

    width: 16px !important;

    height: 16px !important;

    min-width: 16px !important;

    max-width: 16px !important;

    flex-shrink: 0 !important;

    cursor: pointer !important;

    accent-color: #0284c7 !important;

    margin: 0 !important;

    padding: 0 !important;

    vertical-align: middle !important;

}



.login-remember-text {

    font-size: 0.82rem !important;

    color: rgba(255, 255, 255, 0.85) !important;

    font-weight: 500 !important;

    line-height: 1.2 !important;

    white-space: nowrap !important;

    cursor: pointer !important;

}



@media (max-width: 360px) {

    .login-remember-text {

        font-size: 0.76rem !important;

    }

}





.login-error {

    background: rgba(239, 68, 68, 0.15);

    border: 1px solid rgba(239, 68, 68, 0.3);

    color: #f87171;

    padding: 9px;

    border-radius: 8px;

    font-size: 0.82rem;

    margin-bottom: 18px;

    display: none;

    text-align: right;

    animation: shake 0.3s ease-in-out;

}



/* 2. Sidebar Profile Info */

.sidebar-profile {

    padding: 16px;

    margin: 12px 14px;

    background: rgba(255, 255, 255, 0.06);

    border-radius: var(--radius-md);

    border: 1px solid rgba(255, 255, 255, 0.08);

    display: flex;

    flex-direction: column;

    gap: 8px;

    font-family: 'Cairo', sans-serif;

}



.sidebar-profile .user-info {

    display: flex;

    align-items: center;

    gap: 10px;

}



.sidebar-profile .user-avatar {

    width: 36px;

    height: 36px;

    border-radius: 50%;

    background: linear-gradient(135deg, #3b82f6 0%, #1d4ed8 100%);

    display: flex;

    align-items: center;

    justify-content: center;

    color: #ffffff;

    font-weight: 700;

}



.sidebar-profile .user-details {

    display: flex;

    flex-direction: column;

}



.sidebar-profile .user-name {

    font-weight: 700;

    font-size: 0.85rem;

    color: #ffffff;

    white-space: nowrap;

    overflow: hidden;

    text-overflow: ellipsis;

    max-width: 140px;

}



.sidebar-profile .user-role {

    font-size: 0.75rem;

    color: rgba(255, 255, 255, 0.5);

}



.btn-logout {

    width: 100%;

    padding: 6px 12px;

    background: rgba(239, 68, 68, 0.1);

    color: #ef4444;

    border: 1px solid rgba(239, 68, 68, 0.2);

    border-radius: var(--radius-sm);

    font-family: 'Cairo', sans-serif;

    font-size: 0.8rem;

    font-weight: 600;

    cursor: pointer;

    transition: all 0.3s ease;

    display: flex;

    align-items: center;

    justify-content: center;

    gap: 6px;

}



.btn-logout:hover {

    background: #ef4444;

    color: #ffffff;

    box-shadow: 0 4px 12px rgba(239, 68, 68, 0.2);

}



/* 3. Permissions Checklist Grid */

.permissions-grid-title {

    font-weight: 700;

    font-size: 0.9rem;

    color: var(--primary-color);

    margin: 16px 0 8px 0;

    border-bottom: 1px solid var(--border-color);

    padding-bottom: 6px;

}



.permissions-grid {

    display: grid;

    grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));

    gap: 12px;

    margin-bottom: 18px;

}



.permission-tile {

    display: flex;

    align-items: center;

    gap: 10px;

    padding: 10px 14px;

    background: #f8fafc;

    border: 1.5px solid var(--border-color);

    border-radius: var(--radius-sm);

    cursor: pointer;

    user-select: none;

    transition: all 0.2s ease;

}



.permission-tile:hover {

    background: #f1f5f9;

    border-color: #cbd5e1;

}



.permission-tile input[type="checkbox"] {

    width: 16px;

    height: 16px;

    cursor: pointer;

    accent-color: var(--primary-color);

}



.permission-tile span {

    font-size: 0.85rem;

    font-weight: 600;

    color: var(--text-main);

}



.permission-tile.checked {

    background: rgba(22, 70, 112, 0.05);

    border-color: var(--primary-light);

}



.permission-tile.checked span {

    color: var(--primary-color);

}



.sub-permission-tile {

    transition: all 0.2s ease;

}



.sub-permission-tile.checked {

    background: rgba(22, 70, 112, 0.12) !important;

    border-color: var(--primary-color) !important;

}



.sub-permission-tile.checked span {

    color: var(--primary-color) !important;

    font-weight: bold;

}



/* 4. Badges for Roles */

.badge-role {

    padding: 4px 8px;

    border-radius: 4px;

    font-size: 0.75rem;

    font-weight: 700;

    display: inline-block;

}



.badge-role-admin { background-color: #fee2e2; color: #991b1b; border: 1px solid #fecaca; }

.badge-role-mgmt { background-color: #e0f2fe; color: #0369a1; border: 1px solid #bae6fd; }

.badge-role-sales { background-color: #fef3c7; color: #d97706; border: 1px solid #fde68a; }

.badge-role-acct { background-color: #d1fae5; color: #065f46; border: 1px solid #a7f3d0; }

.badge-role-res { background-color: #fae8ff; color: #86198f; border: 1px solid #f5d0fe; }

.badge-role-cntr { background-color: #e0e7ff; color: #3730a3; border: 1px solid #c7d2fe; }

.badge-role-info { background-color: #f1f5f9; color: #475569; border: 1px solid #e2e8f0; }



/* 5. Animations */

@keyframes shake {

    0%, 100% { transform: translateX(0); }

    25% { transform: translateX(-6px); }

    75% { transform: translateX(6px); }

}



@keyframes fadeIn {

    from { opacity: 0; transform: scale(0.95); }

    to { opacity: 1; transform: scale(1); }

}



/* Sidebar toggle button (hidden on desktop by default) */

.sidebar-toggle-btn {

    display: none;

}



/* ==================== MOBILE RESPONSIVENESS OVERRIDES ==================== */

@media (max-width: 768px) {

    /* 1. App Layout Layout */

    .app-container {

        flex-direction: column;

    }



    /* 2. Sidebar Drawer Transition (RTL sliding drawer) */

    .sidebar {

        position: fixed !important;

        top: 0 !important;

        right: -280px !important; /* Hide offscreen to the right */

        left: auto !important; /* Prevent left override on mobile */

        width: 280px !important;

        height: 100vh !important;

        z-index: 1100 !important;

        transition: right 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;

        box-shadow: -5px 0 25px rgba(0, 0, 0, 0.25) !important;

        overflow-y: auto !important; /* Enable vertical scrolling on mobile */

    }

    

    .sidebar.show,

    #sidebar-toggle-checkbox:checked ~ .sidebar {

        right: 0 !important;

        left: auto !important;

    }



    /* 3. Sidebar Backdrop Overlay */

    .sidebar-overlay {

        position: fixed !important;

        top: 0 !important;

        left: 0 !important;

        width: 100vw !important;

        height: 100vh !important;

        background: rgba(13, 43, 69, 0.4) !important;

        z-index: 1099 !important;

        display: none !important;

        backdrop-filter: blur(3px) !important;

        -webkit-backdrop-filter: blur(3px) !important;

        animation: fadeIn 0.2s ease-out !important;

        cursor: pointer !important;

    }

    

    .sidebar-overlay.show,

    #sidebar-toggle-checkbox:checked ~ .sidebar-overlay {

        display: block !important;

    }



    /* 4. Hamburger Menu Toggle Button */

    .sidebar-toggle-btn {

        display: inline-flex !important;

        align-items: center;

        justify-content: center;

        width: 36px;

        height: 36px;

        border-radius: var(--radius-sm);

        border: 1px solid var(--border-color);

        background: #ffffff;

        color: var(--primary-color);

        font-size: 1.15rem;

        cursor: pointer;

        transition: all 0.2s ease;

        padding: 0;

        position: relative !important;

        z-index: 9999 !important;

    }

    

    .sidebar-toggle-btn:hover {

        background: #f1f5f9;

        color: var(--primary-light);

        border-color: #cbd5e1;

    }



    /* 5. Main Header Customization */

    .main-header {

        padding: 14px 16px !important;

        flex-wrap: wrap;

        gap: 12px;

        align-items: center;

        justify-content: space-between;

    }

    

    .main-header > div:first-child {

        display: flex;

        align-items: center;

        gap: 10px;

    }

    

    .header-title h1 {

        font-size: 1.25rem !important;

    }

    

    .header-actions {

        width: auto;

        gap: 6px !important;

    }

    

    .header-actions .btn {

        padding: 6px 12px !important;

        font-size: 0.78rem !important;

        height: 32px;

    }



    /* 6. Dashboard General Responsiveness */

    .dashboard-stats-grid,

    .dashboard-details-grid,

    .grid-two-columns,

    .financial-grid {

        grid-template-columns: 1fr !important;

        gap: 14px !important;

    }

    

    .stat-card {

        padding: 12px 14px !important;

        gap: 10px !important;

    }

    

    .grid-card {

        padding: 14px !important;

        max-width: 100% !important;

        overflow: hidden !important;

    }

    

    .table-container {

        width: 100% !important;

        max-width: 100% !important;

        overflow-x: auto !important;

        -webkit-overflow-scrolling: touch;

    }



    #dashtab-dash-marketing .kpi-table {

        font-size: 0.65rem !important;

        width: 100% !important;

        table-layout: fixed !important;

    }

    

    #dashtab-dash-marketing .kpi-table th,

    #dashtab-dash-marketing .kpi-table td {

        padding: 4px 3px !important;

        white-space: normal !important;

        word-break: break-word !important;

    }

    

    #dashtab-dash-marketing .kpi-table th:first-child,

    #dashtab-dash-marketing .kpi-table td:first-child {

        width: 46% !important;

        text-align: right !important;

    }

    

    #dashtab-dash-marketing .kpi-table th:not(:first-child),

    #dashtab-dash-marketing .kpi-table td:not(:first-child) {

        width: 18% !important;

        text-align: center !important;

    }

    

    .financial-card {

        padding: 12px 16px !important;

    }

    

    .table-card {

        padding: 16px !important;

        margin-top: 16px !important;

        max-width: 100% !important;

        overflow: hidden !important;

    }



    .sub-tab-section, .dash-tab-section, #tab-installments {

        padding: 16px !important;

        margin-bottom: 20px !important;

    }

    

    .card-header-actions {

        flex-direction: column;

        align-items: flex-start !important;

        gap: 12px !important;

    }

    

    .card-header-actions > div:first-child {

        width: 100%;

        justify-content: space-between;

        flex-wrap: wrap;

    }

    

    .search-box {

        width: 100% !important;

        min-width: 100% !important;

    }



    /* 7. Modals / Dialogs Responsiveness */

    .modal-content {

        width: 95% !important;

        max-width: 95% !important;

        padding: 16px !important;

        margin: 10px auto !important;

        border-radius: var(--radius-md) !important;

    }

    

    .form-row {

        grid-template-columns: 1fr !important;

        gap: 10px !important;

    }

}



/* Sticky Columns for all screens (mobile and desktop) */

.table th.sticky-col-1 {

    position: sticky !important;

    right: 0 !important;

    background: var(--bg-card) !important;

    z-index: 5 !important;

}

.table th.sticky-col-2 {

    position: sticky !important;

    right: 100px !important;

    background: var(--bg-card) !important;

    z-index: 5 !important;

}



.table td.sticky-col-1 {

    position: sticky !important;

    right: 0 !important;

    background: var(--bg-card) !important;

    z-index: 3 !important;

}

.table td.sticky-col-2 {

    position: sticky !important;

    right: 100px !important;

    background: var(--bg-card) !important;

    z-index: 3 !important;

}



/* Zebra stripe backgrounds for sticky columns */

.table tr:nth-child(even) .sticky-col-1,

.table tr:nth-child(even) .sticky-col-2 {

    background-color: #f1f5f9 !important;

}

.table tr:nth-child(odd) .sticky-col-1,

.table tr:nth-child(odd) .sticky-col-2 {

    background-color: #ffffff !important;

}



/* Hover effect for sticky columns */

.table tr:hover .sticky-col-1,

.table tr:hover .sticky-col-2 {

    background-color: #e2e8f0 !important;

}



/* Responsive screen styling for print previews on mobile devices */

@media screen and (max-width: 768px) {

    .print-container-layout {

        padding: 10px !important;

    }

    

    .print-a4-page, 

    .print-reservation-a4-page, 

    .print-financial-a4-page {

        width: 100% !important;

        min-height: auto !important;

        padding: 15px 10px !important;

        font-size: 11px !important;

    }

    

    .print-table-info {

        font-size: 10px !important;

        display: block !important;

        overflow-x: auto !important;

    }

    

    .print-header {

        flex-direction: column !important;

        text-align: center !important;

        align-items: center !important;

        gap: 12px !important;

    }

    

    .print-logo {

        text-align: center !important;

    }

    

    .print-title-box {

        text-align: center !important;

    }

    

    .print-signatures {

        flex-direction: column !important;

        gap: 15px !important;

        align-items: center !important;

    }

    

    .sig-box {

        width: 100% !important;

    }

    

    .print-actions {

        flex-wrap: wrap !important;

        gap: 8px !important;

    }

    

    .print-actions .btn {

        width: 100% !important;

        font-size: 0.9rem !important;

    }

}



/* Inline Contract Date Pickers Styling */

.inline-date-wrapper {

    position: relative;

    display: inline-block;

}



.inline-date-badge {

    display: inline-flex;

    align-items: center;

    gap: 6px;

    padding: 6px 10px;

    border-radius: 6px;

    font-size: 0.85rem;

    font-family: 'Cairo', sans-serif;

    min-width: 125px;

    justify-content: center;

    transition: all 0.2s ease-in-out;

    cursor: pointer;

}



.inline-date-badge.empty {

    background: #f8fafc;

    border: 1px dashed #cbd5e1;

    color: #94a3b8;

}



.inline-date-badge.empty:hover {

    border-color: var(--primary-color);

    background: rgba(59, 130, 246, 0.05);

    color: var(--primary-color);

}



.inline-date-badge.signing-set {

    background: rgba(34, 197, 94, 0.08);

    border: 1px solid rgba(34, 197, 94, 0.3);

    color: #166534;

    font-weight: 600;

}



.inline-date-badge.signing-set:hover {

    background: rgba(34, 197, 94, 0.15);

    border-color: rgba(34, 197, 94, 0.5);

}



.inline-date-badge.delivery-set {

    background: rgba(59, 130, 246, 0.08);

    border: 1px solid rgba(59, 130, 246, 0.3);

    color: #1e40af;

    font-weight: 600;

}



.inline-date-badge.delivery-set:hover {

    background: rgba(59, 130, 246, 0.15);

    border-color: rgba(59, 130, 246, 0.5);

}



.inline-date-input {

    position: absolute;

    top: 0;

    left: 0;

    width: 100%;

    height: 100%;

    opacity: 0;

    pointer-events: none;

}



/* Toast Notification Styles */

#toast-container {

    position: fixed;

    top: 20px;

    left: 20px;

    z-index: 1000002;

    display: flex;

    flex-direction: column;

    gap: 10px;

    pointer-events: none;

}



.custom-toast {

    min-width: 300px;

    padding: 12px 20px;

    border-radius: 8px;

    background: rgba(30, 41, 59, 0.95);

    color: #fff;

    font-family: 'Cairo', sans-serif;

    font-size: 0.9rem;

    direction: rtl;

    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);

    display: flex;

    align-items: center;

    gap: 12px;

    pointer-events: auto;

    opacity: 0;

    transform: translateY(-20px);

    transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);

    border-right: 4px solid var(--primary-color);

}



.custom-toast.show {

    opacity: 1;

    transform: translateY(0);

}



/* Mouse Drag Scroll for Table Containers */

.table-container {

    overflow-x: auto;

    cursor: grab;

    transition: cursor 0.1s ease;

}



.table-container.grabbing, .grabbing {

    cursor: grabbing !important;

    user-select: none !important;

    -webkit-user-select: none !important;

    -moz-user-select: none !important;

    -ms-user-select: none !important;

}



/* Distinct styled stats period filter dropdowns */

.stats-period-select-distinct {

    padding: 4px 8px;

    border-radius: var(--radius-sm);

    border: 1.5px solid #cbd5e1 !important; /* Calm gray border */

    font-family: 'Cairo', sans-serif;

    font-weight: 700;

    font-size: 0.75rem;

    color: #475569 !important; /* Calm slate gray text */

    outline: none;

    cursor: pointer;

    background-color: #f8fafc !important; /* Light calm gray background */

    transition: var(--transition);

    margin-right: auto !important; /* Ensure it is pushed to the left in RTL flex layout */

}



.stats-period-select-distinct:hover, .stats-period-select-distinct:focus {

    background-color: #f1f5f9 !important;

    border-color: #94a3b8 !important; /* Calm gray border on hover */

    color: #1e293b !important;

    box-shadow: 0 0 0 3px rgba(100, 116, 139, 0.15) !important;

}



/* Marketing sales ratio chart available units input styling */

.marketing-input-available {

    padding: 6px 12px;

    border-radius: var(--radius-sm);

    border: 1px solid var(--border-color);

    font-family: 'Cairo', sans-serif;

    font-weight: 600;

    font-size: 0.85rem;

    color: var(--primary-color);

    outline: none;

    background-color: var(--bg-main);

    width: 120px;

    text-align: center;

    transition: var(--transition);

}



.marketing-input-available:hover {

    border-color: var(--primary-light);

}



.marketing-input-available:focus {

    border-color: var(--primary-color);

    box-shadow: 0 0 0 3px rgba(13, 43, 69, 0.15);

    background-color: #ffffff;

}



/* Chrome, Safari, Edge, Opera */

.marketing-input-available::-webkit-outer-spin-button,

.marketing-input-available::-webkit-inner-spin-button {

  -webkit-appearance: none;

  margin: 0;

}



/* Firefox */

.marketing-input-available[type=number] {

  -moz-appearance: textfield;

}



/* Block tag selector styling */

.block-tag {

    padding: 6px 14px;

    border-radius: var(--radius-sm);

    border: 1.5px solid var(--border-color);

    font-family: 'Cairo', sans-serif;

    font-weight: 700;

    font-size: 0.8rem;

    color: var(--text-muted);

    background-color: #ffffff;

    cursor: pointer;

    transition: var(--transition);

    user-select: none;

    display: inline-flex;

    align-items: center;

    justify-content: center;

}



.block-tag:hover {

    border-color: var(--primary-light);

    color: var(--primary-color);

    background-color: var(--bg-main);

}



.block-tag.active {

    background-color: var(--primary-color);

    border-color: var(--primary-color);

    color: #ffffff;

    box-shadow: var(--shadow-sm);

}



.block-tag.active:hover {

    background-color: var(--primary-light);

    border-color: var(--primary-light);

    color: #ffffff;

}



/* Sales Funnel styling */

.funnel-container {

    width: 100%;

    max-width: 600px;

    margin: 15px auto;

    display: flex;

    flex-direction: column;

    align-items: center;

    gap: 8px;

}



.funnel-stage {

    width: 100%;

    display: flex;

    flex-direction: column;

    align-items: center;

    transition: transform 0.2s ease;

}



.funnel-bar {

    height: 48px;

    color: #ffffff;

    display: flex;

    justify-content: space-between;

    align-items: center;

    padding: 0 20px;

    border-radius: var(--radius-md);

    box-shadow: var(--shadow-sm);

    cursor: pointer;

    transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);

    position: relative;

    overflow: hidden;

}



.funnel-bar::before {

    content: '';

    position: absolute;

    top: 0;

    left: 0;

    width: 100%;

    height: 100%;

    background: linear-gradient(rgba(255, 255, 255, 0.15), transparent);

    pointer-events: none;

}



.funnel-bar:hover {

    transform: translateY(-2px) scale(1.025);

    box-shadow: var(--shadow-md);

    filter: brightness(1.08);

}



.funnel-bar.stage-calls {

    background: linear-gradient(135deg, #2563eb, #1d4ed8);

}



.funnel-bar.stage-visits {

    background: linear-gradient(135deg, #4f46e5, #3730a3);

}



.funnel-bar.stage-reservations {

    background: linear-gradient(135deg, #db2777, #9d174d);

}



.funnel-bar.stage-sales {

    background: linear-gradient(135deg, #059669, #047857);

}



.funnel-stage-name {

    font-family: 'Cairo', sans-serif;

    font-weight: 700;

    font-size: 0.92rem;

    display: flex;

    align-items: center;

    gap: 8px;

}



.funnel-stage-count {

    font-family: 'Cairo', sans-serif;

    font-weight: 800;

    font-size: 1.1rem;

}



.funnel-stage-perc {

    font-family: 'Cairo', sans-serif;

    font-weight: 700;

    font-size: 0.8rem;

    background: rgba(255, 255, 255, 0.22);

    padding: 2px 9px;

    border-radius: 20px;

    min-width: 50px;

    text-align: center;

}



.funnel-arrow {

    display: flex;

    flex-direction: column;

    align-items: center;

    color: var(--text-muted);

    font-family: 'Cairo', sans-serif;

    font-size: 0.76rem;

    font-weight: 700;

    margin: -2px 0;

    gap: 2px;

}



.funnel-arrow i {

    font-size: 0.85rem;

    animation: bounceDown 2s infinite;

}



@keyframes bounceDown {

    0%, 20%, 50%, 80%, 100% {

        transform: translateY(0);

    }

    40% {

        transform: translateY(-4px);

    }

    60% {

        transform: translateY(-2px);

    }

}



/* KPI Info Tooltip styling */

.kpi-info-tooltip-content {

    visibility: hidden;

    opacity: 0;

    width: 320px;

    background-color: #2b3a4a;

    color: #ffffff;

    text-align: right;

    border-radius: var(--radius-md);

    padding: 12px;

    position: absolute;

    z-index: 100;

    bottom: 125%;

    right: 50%;

    transform: translateX(50%);

    transition: opacity 0.3s ease, visibility 0.3s ease;

    box-shadow: var(--shadow-lg);

    font-family: 'Cairo', sans-serif;

    font-size: 0.72rem;

    line-height: 1.6;

    border: 1px solid rgba(255, 255, 255, 0.1);

    pointer-events: none;

}



.kpi-info-tooltip-container:hover .kpi-info-tooltip-content {

    visibility: visible;

    opacity: 1;

}



.kpi-info-tooltip-container:hover .fa-circle-info {

    color: var(--primary-light);

}



/* Sales Funnel Info Tooltip styling */

.funnel-info-tooltip-content {

    visibility: hidden;

    opacity: 0;

    width: 320px;

    background-color: #2b3a4a;

    color: #ffffff;

    text-align: right;

    border-radius: var(--radius-md);

    padding: 12px;

    position: absolute;

    z-index: 100;

    bottom: 125%;

    right: 50%;

    transform: translateX(50%);

    transition: opacity 0.3s ease, visibility 0.3s ease;

    box-shadow: var(--shadow-lg);

    font-family: 'Cairo', sans-serif;

    font-size: 0.72rem;

    line-height: 1.6;

    border: 1px solid rgba(255, 255, 255, 0.1);

    pointer-events: none;

}



.funnel-info-tooltip-container:hover .funnel-info-tooltip-content {

    visibility: visible;

    opacity: 1;

}



.funnel-info-tooltip-container:hover .fa-circle-info {

    color: var(--primary-light);

}



/* Target vs Actual Chart Info Tooltip styling */

.target-info-tooltip-content {

    visibility: hidden;

    opacity: 0;

    width: 320px;

    background-color: #2b3a4a;

    color: #ffffff;

    text-align: right;

    border-radius: var(--radius-md);

    padding: 12px;

    position: absolute;

    z-index: 100;

    bottom: 125%;

    right: 50%;

    transform: translateX(50%);

    transition: opacity 0.3s ease, visibility 0.3s ease;

    box-shadow: var(--shadow-lg);

    font-family: 'Cairo', sans-serif;

    font-size: 0.72rem;

    line-height: 1.6;

    border: 1px solid rgba(255, 255, 255, 0.1);

    pointer-events: none;

}



.target-info-tooltip-container:hover .target-info-tooltip-content {

    visibility: visible;

    opacity: 1;

}



.target-info-tooltip-container:hover .fa-circle-info {

    color: var(--primary-light);

}



/* ==================== MARKETING DASHBOARD REFINEMENTS ==================== */



/* 1. Marketing Section Grid Adjustments */

#dashtab-dash-marketing {

    font-family: 'Cairo', sans-serif;

}



#dashtab-dash-marketing .grid-card {

    padding: 18px 20px !important;

    border-radius: var(--radius-lg) !important;

    box-shadow: 0 4px 18px -2px rgba(15, 23, 42, 0.05), 0 2px 6px -1px rgba(15, 23, 42, 0.02) !important;

    border: 1px solid var(--border-color);

}



#dashtab-dash-marketing .card-header-actions {

    margin-bottom: 12px !important;

    padding-bottom: 10px !important;

    border-bottom: 1px solid var(--border-color) !important;

}



#dashtab-dash-marketing .card-header-actions h3 {

    font-size: 1.02rem !important;

    font-weight: 700;

    color: var(--primary-color);

}



#dashtab-dash-marketing .card-header-actions select {

    padding: 5px 10px !important;

    font-size: 0.8rem !important;

    height: 32px;

}



/* 2. Compact KPI Gauge & Table */

#dashtab-dash-marketing .kpi-table {

    width: 100%;

    margin-top: 12px !important;

    font-size: 0.7rem !important;

    border-collapse: separate;

    border-spacing: 0;

    border-radius: var(--radius-md);

    overflow: hidden;

    border: 1px solid var(--border-color);

}



#dashtab-dash-marketing .kpi-table th {

    padding: 5px 8px !important;

    background-color: #f8fafc !important;

    color: var(--primary-color) !important;

    font-weight: 700 !important;

    border-bottom: 1px solid var(--border-color) !important;

}



#dashtab-dash-marketing .kpi-table td {

    padding: 5px 8px !important;

    border-bottom: 1px solid var(--border-color) !important;

    background-color: #ffffff;

}



#dashtab-dash-marketing .kpi-table tr:last-child td {

    border-bottom: none !important;

}



/* 3. Compact User Performance Table */

#table-user-performance {

    border-collapse: separate;

    border-spacing: 0;

    width: 100%;

    min-width: 1800px;

}



#table-user-performance th {

    background-color: #f8fafc !important;

    padding: 8px 10px !important;

    font-size: 0.76rem !important;

    font-weight: 700;

    color: #475569;

    border-bottom: 2px solid #e2e8f0 !important;

    text-align: center;

    white-space: nowrap !important;

}



#table-user-performance th:first-child {

    text-align: right;

    position: sticky;

    right: 0;

    background-color: #f8fafc;

    z-index: 2;

}



#table-user-performance td {

    padding: 8px 10px !important;

    font-size: 0.78rem !important;

    color: #334155;

    border-bottom: 1px solid #f1f5f9 !important;

    text-align: center;

    font-weight: 500;

    background-color: #ffffff;

    white-space: nowrap !important;

}



#table-user-performance td:first-child {

    text-align: right;

    font-weight: 700;

    color: var(--primary-color);

    position: sticky;

    right: 0;

    background-color: #ffffff;

    z-index: 2;

    border-left: 1px solid #f1f5f9;

}



#table-user-performance tbody tr:nth-child(even) td {

    background-color: #f8fafc;

}



#table-user-performance tbody tr:nth-child(even) td:first-child {

    background-color: #f8fafc;

}



#table-user-performance tbody tr:hover td {

    background-color: rgba(15, 118, 110, 0.04) !important;

}



#table-user-performance tbody tr:hover td:first-child {

    background-color: rgba(15, 118, 110, 0.04) !important;

}



/* 4. Compact Stats Box Items */

.marketing-stat-item {

    background: var(--bg-main) !important;

    padding: 7px 12px !important;

    border-radius: var(--radius-md) !important;

    display: flex;

    align-items: center;

    justify-content: space-between;

    border-right: 4px solid var(--primary-color);

    transition: all 0.2s ease;

    border: 1px solid var(--border-color);

    border-right-width: 4px;

}



.marketing-stat-item:hover {

    transform: translateY(-1px);

    box-shadow: 0 4px 12px rgba(15, 23, 42, 0.04);

}



.marketing-stat-item h4 {

    font-size: 0.8rem !important;

    margin-bottom: 2px !important;

    font-weight: 700;

    color: var(--text-main);

}



.marketing-stat-item span.text-muted {

    font-size: 0.68rem !important;

}



.marketing-stat-item strong {

    font-size: 1.15rem !important;

    font-weight: 800;

}



/* Specific colors for right border of target legends */

.target-legend-item.legend-sold {

    border-right-color: #10b981;

}

.target-legend-item.legend-sold strong {

    color: #10b981 !important;

}



.target-legend-item.legend-remaining {

    border-right-color: #3b82f6;

}

.target-legend-item.legend-remaining strong {

    color: #3b82f6 !important;

}



.target-legend-item.legend-total {

    border-right-color: var(--primary-color);

}

.target-legend-item.legend-total strong {

    color: var(--primary-color) !important;

}



/* 5. Tighter, Sleeker Funnel Layout */

#dashtab-dash-marketing .funnel-container {

    margin: 8px auto !important;

    gap: 6px !important;

    max-width: 550px !important;

}



#dashtab-dash-marketing .funnel-bar {

    height: 38px !important;

    padding: 0 16px !important;

    border-radius: var(--radius-sm) !important;

}



#dashtab-dash-marketing .funnel-stage-name {

    font-size: 0.82rem !important;

    font-weight: 700;

}



#dashtab-dash-marketing .funnel-stage-count {

    font-size: 0.95rem !important;

    font-weight: 800;

}



#dashtab-dash-marketing .funnel-stage-perc {

    font-size: 0.72rem !important;

    padding: 1px 7px !important;

    min-width: 44px !important;

}



#dashtab-dash-marketing .funnel-arrow {

    font-size: 0.7rem !important;

    margin: -3px 0 !important;

    gap: 1px !important;

}



#dashtab-dash-marketing .funnel-arrow i {

    font-size: 0.78rem !important;

}



/* Premium styled dashboard filters */

.dashboard-filter-select {

    padding: 5px 12px !important;

    border-radius: var(--radius-sm) !important;

    border: 1.5px solid #cbd5e1 !important; /* Calm gray border */

    font-family: 'Cairo', sans-serif !important;

    font-weight: 700 !important;

    font-size: 0.82rem !important;

    color: #475569 !important; /* Calm slate gray text */

    outline: none !important;

    cursor: pointer !important;

    background-color: #f8fafc !important; /* Light calm gray background */

    transition: var(--transition) !important;

    height: 32px !important;

    display: inline-block;

}



.dashboard-filter-select:hover, .dashboard-filter-select:focus {

    background-color: #f1f5f9 !important;

    border-color: #94a3b8 !important; /* Calm gray border on hover */

    color: #1e293b !important;

    box-shadow: 0 0 0 3px rgba(100, 116, 139, 0.15) !important;

}



/* --- Premium Search Box & Installments Toolbar Styling --- */



/* Global Search Box Styling with hover and focus effects */

.search-box {

    position: relative;

    display: flex;

    align-items: center;

}



.search-box i {

    position: absolute;

    right: 12px;

    color: var(--primary-light);

    font-size: 0.9rem;

    pointer-events: none;

    transition: var(--transition);

    z-index: 2;

}



.search-box input {

    width: 100%;

    padding: 6px 36px 6px 12px; /* 36px on right for icon in RTL */

    border: 1.5px solid var(--border-color);

    border-radius: var(--radius-sm);

    font-family: 'Cairo', sans-serif;

    font-size: 0.85rem;

    font-weight: 600;

    color: var(--text-main);

    background-color: #f8fafc;

    transition: var(--transition);

    height: 32px;

}



.search-box input:hover {

    border-color: #cbd5e1;

    background-color: #f1f5f9;

}



.search-box input:focus {

    outline: none;

    border-color: var(--primary-light);

    background-color: #ffffff;

    box-shadow: 0 0 0 3px rgba(22, 70, 112, 0.12);

}



.search-box input:focus + i {

    color: var(--accent-color);

    transform: scale(1.15) rotate(15deg);

}



/* Installments Date Filter Group Styling */

.installments-date-group {

    display: flex;

    align-items: center;

    gap: 8px;

    background: rgba(22, 70, 112, 0.04);

    padding: 4px 12px;

    border-radius: var(--radius-sm);

    border: 1.5px solid var(--border-color);

    transition: var(--transition);

}



.installments-date-group:hover {

    background: rgba(22, 70, 112, 0.07);

    border-color: #cbd5e1;

}



.installments-date-group label {

    font-size: 0.82rem;

    font-weight: 700;

    color: var(--primary-light);

    margin: 0;

    font-family: 'Cairo', sans-serif;

    white-space: nowrap;

}



.installments-date-group input[type="date"] {

    border: 1px solid var(--border-color);

    border-radius: 4px;

    padding: 2px 6px;

    font-size: 0.82rem;

    font-family: 'Cairo', sans-serif;

    font-weight: 600;

    color: var(--text-main);

    background-color: #ffffff;

    height: 24px;

    width: 125px;

    outline: none;

    transition: var(--transition);

}



.installments-date-group input[type="date"]:focus {

    border-color: var(--primary-light);

    box-shadow: 0 0 0 2px rgba(22, 70, 112, 0.1);

}



.installments-date-group #btn-installments-clear-dates,

.installments-date-group #btn-financial-clear-dates {

    font-size: 0.8rem;

    font-weight: 700;

    padding: 0 8px;

    height: 24px;

    display: flex;

    align-items: center;

    gap: 4px;

    border-radius: 4px;

    font-family: 'Cairo', sans-serif;

    cursor: pointer;

    border: 1px solid #cbd5e1;

    background: #f1f5f9;

    color: var(--text-main);

    transition: var(--transition);

}



.installments-date-group #btn-installments-clear-dates:hover,

.installments-date-group #btn-financial-clear-dates:hover {

    background: var(--danger-color);

    color: #ffffff;

    border-color: var(--danger-color);

    box-shadow: 0 2px 4px rgba(239, 68, 68, 0.2);

}



/* Custom styling for complex financial report tables */

#print-complex-report-layout .print-table-info th,

#print-complex-report-layout .print-table-info td {

    border: 1px solid var(--border-color) !important;

    padding: 8px 10px !important;

    font-size: 0.82rem;

}



#print-complex-report-layout .print-table-info th {

    font-weight: 700;

}



/* Dark Themed Stat Cards with Professional Gradients */

.stat-card.theme-dark {

    color: #ffffff;

    border: none;

    overflow: hidden;

    position: relative;

    z-index: 1;

}



.stat-card.theme-dark::after {

    content: '';

    position: absolute;

    top: -30px;

    left: -30px;

    width: 100px;

    height: 100px;

    background: radial-gradient(circle, rgba(255, 255, 255, 0.12) 0%, transparent 70%);

    border-radius: 50%;

    pointer-events: none;

    z-index: -1;

}



.stat-card.theme-dark .stat-info h3 {

    color: rgba(255, 255, 255, 0.75);

}



.stat-card.theme-dark .stat-value {

    color: #ffffff !important;

}



.stat-card.theme-dark .stat-icon {

    background: rgba(255, 255, 255, 0.15) !important;

    color: #ffffff !important;

}



.stat-card.theme-dark .stats-period-select-distinct {

    background-color: rgba(255, 255, 255, 0.1) !important;

    border-color: rgba(255, 255, 255, 0.25) !important;

    color: #ffffff !important;

}



.stat-card.theme-dark .stats-period-select-distinct:hover,

.stat-card.theme-dark .stats-period-select-distinct:focus {

    background-color: rgba(255, 255, 255, 0.2) !important;

    border-color: rgba(255, 255, 255, 0.4) !important;

    color: #ffffff !important;

    box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.15);

}



/* 1. إجمالي الوحدات - أزرق داكن */

.card-total-units {

    background: linear-gradient(135deg, #1e3a8a 0%, #0f172a 100%);

}



/* 2. الوحدات المتاحة - أخضر زمردي */

.card-available-units {

    background: linear-gradient(135deg, #064e3b 0%, #022c22 100%);

}



/* 3. الوحدات المحجوزة - برتقالي دافئ */

.card-reserved-units {

    background: linear-gradient(135deg, #b45309 0%, #451a03 100%);

}



/* 4. الوحدات المباعة - بنفسجي ملكي */

.card-sold-units {

    background: linear-gradient(135deg, #4c1d95 0%, #1e1b4b 100%);

}



/* 5. حجوزات تحولت لعقود - فيروزي */

.card-converted-units {

    background: linear-gradient(135deg, #0f766e 0%, #042f2e 100%);

}



/* 6. الحجوزات الملغاة - أحمر مرجاني */

.card-cancel-res-units {

    background: linear-gradient(135deg, #991b1b 0%, #450a0a 100%);

}



/* 7. المبيعات الملغاة - أحمر داكن */

.card-cancel-sales-units {

    background: linear-gradient(135deg, #7f1d1d 0%, #3f0712 100%);

}



/* 8. الأكثر طلباً - ذهبي داكن */

.card-most-demanded-units {

    background: linear-gradient(135deg, #854d0e 0%, #422006 100%);

}



/* 9. مبيعات كاش - كحلي بحري */

.card-sales-cash {

    background: linear-gradient(135deg, #134e5e 0%, #0f2027 100%);

}



/* 10. مبيعات نصف كاش - أزرق بترولي */

.card-sales-half-cash {

    background: linear-gradient(135deg, #2c3e50 0%, #000000 100%);

}



/* 11. مبيعات الدفعات - كستنائي */

.card-sales-installments {

    background: linear-gradient(135deg, #8c3a3a 0%, #2b1111 100%);

}



/* 12. مبيعات القروض - أزرق ملكي */

.card-sales-loan {

    background: linear-gradient(135deg, #1d4ed8 0%, #172554 100%);

}



/* فئات تلوين الصفوف بأسلوب Stripe و Tailwind UI الاحترافي */

.card-row-blue {

    background: linear-gradient(135deg, var(--row-1-bg-start) 0%, var(--row-1-bg-end) 100%) !important;

    border: 1px solid var(--row-1-border) !important;

    border-right: 5px solid var(--row-1-border-right) !important;

    box-shadow: 0 6px 20px -2px var(--row-1-shadow-color), 0 3px 8px -1px rgba(0, 0, 0, 0.05) !important;

}

.card-row-blue:hover {

    border-color: var(--row-1-border-right) !important;

    box-shadow: 0 10px 20px -3px var(--row-1-shadow-color), 0 4px 6px -2px rgba(0, 0, 0, 0.08) !important;

    transform: translateY(-2px) !important;

}

.card-row-blue .stat-info h3 {

    color: var(--row-1-title) !important;

    font-weight: 750 !important;

}

.card-row-blue .stat-value,

.card-row-blue .stat-value.text-green,

.card-row-blue .stat-value.text-orange,

.card-row-blue .stat-value.text-purple,

.card-row-blue .stat-value.text-teal,

.card-row-blue .stat-value.text-red {

    color: var(--row-1-value) !important;

}

.card-row-blue .stat-icon {

    background: var(--row-1-icon-bg) !important;

    color: var(--row-1-icon-color) !important;

}

.card-row-blue .stats-period-select-distinct {

    background-color: var(--row-1-bg-start) !important;

    border-color: var(--row-1-border) !important;

    color: var(--row-1-title) !important;

}

.card-row-blue .stats-period-select-distinct option {

    background-color: var(--row-1-bg-end) !important;

    color: var(--row-1-title) !important;

}



.card-row-green {

    background: linear-gradient(135deg, var(--row-2-bg-start) 0%, var(--row-2-bg-end) 100%) !important;

    border: 1px solid var(--row-2-border) !important;

    border-right: 5px solid var(--row-2-border-right) !important;

    box-shadow: 0 6px 20px -2px var(--row-2-shadow-color), 0 3px 8px -1px rgba(0, 0, 0, 0.05) !important;

}

.card-row-green:hover {

    border-color: var(--row-2-border-right) !important;

    box-shadow: 0 10px 20px -3px var(--row-2-shadow-color), 0 4px 6px -2px rgba(0, 0, 0, 0.08) !important;

    transform: translateY(-2px) !important;

}

.card-row-green .stat-info h3 {

    color: var(--row-2-title) !important;

    font-weight: 750 !important;

}

.card-row-green .stat-value,

.card-row-green .stat-value.text-green,

.card-row-green .stat-value.text-orange,

.card-row-green .stat-value.text-purple,

.card-row-green .stat-value.text-teal,

.card-row-green .stat-value.text-red {

    color: var(--row-2-value) !important;

}

.card-row-green .stat-icon {

    background: var(--row-2-icon-bg) !important;

    color: var(--row-2-icon-color) !important;

}

.card-row-green .stats-period-select-distinct {

    background-color: var(--row-2-bg-start) !important;

    border-color: var(--row-2-border) !important;

    color: var(--row-2-title) !important;

}

.card-row-green .stats-period-select-distinct option {

    background-color: var(--row-2-bg-end) !important;

    color: var(--row-2-title) !important;

}



.card-row-orange {

    background: linear-gradient(135deg, var(--row-3-bg-start) 0%, var(--row-3-bg-end) 100%) !important;

    border: 1px solid var(--row-3-border) !important;

    border-right: 5px solid var(--row-3-border-right) !important;

    box-shadow: 0 6px 20px -2px var(--row-3-shadow-color), 0 3px 8px -1px rgba(0, 0, 0, 0.05) !important;

}

.card-row-orange:hover {

    border-color: var(--row-3-border-right) !important;

    box-shadow: 0 10px 20px -3px var(--row-3-shadow-color), 0 4px 6px -2px rgba(0, 0, 0, 0.08) !important;

    transform: translateY(-2px) !important;

}

.card-row-orange .stat-info h3 {

    color: var(--row-3-title) !important;

    font-weight: 750 !important;

}

.card-row-orange .stat-value,

.card-row-orange .stat-value.text-green,

.card-row-orange .stat-value.text-orange,

.card-row-orange .stat-value.text-purple,

.card-row-orange .stat-value.text-teal,

.card-row-orange .stat-value.text-red {

    color: var(--row-3-value) !important;

}

.card-row-orange .stat-icon {

    background: var(--row-3-icon-bg) !important;

    color: var(--row-3-icon-color) !important;

}

.card-row-orange .stats-period-select-distinct {

    background-color: var(--row-3-bg-start) !important;

    border-color: var(--row-3-border) !important;

    color: var(--row-3-title) !important;

}

.card-row-orange .stats-period-select-distinct option {

    background-color: var(--row-3-bg-end) !important;

    color: var(--row-3-title) !important;

}



/* Color Swatches and Customizer UI Improvements */

.color-swatch {

    width: 20px;

    height: 20px;

    border-radius: 50%;

    cursor: pointer;

    border: 2px solid white;

    box-shadow: 0 0 0 1px var(--border-color);

    transition: transform 0.2s, box-shadow 0.2s;

    display: inline-block;

}

.color-swatch:hover {

    transform: scale(1.2);

    box-shadow: 0 0 0 1.5px var(--primary-color), 0 2px 6px rgba(0,0,0,0.15);

}



/* Financial Card Themes */

.fin-row-1 {

    background: linear-gradient(135deg, var(--fin-row-1-bg-start) 0%, var(--fin-row-1-bg-end) 100%) !important;

    border: 1px solid var(--fin-row-1-border) !important;

    border-right: 5px solid var(--fin-row-1-border-right) !important;

    box-shadow: 0 6px 20px -2px var(--fin-row-1-shadow-color), 0 3px 8px -1px rgba(0, 0, 0, 0.05) !important;

}

.fin-row-1:hover {

    border-color: var(--fin-row-1-border-right) !important;

    box-shadow: 0 10px 20px -3px var(--fin-row-1-shadow-color), 0 4px 6px -2px rgba(0, 0, 0, 0.08) !important;

    transform: translateY(-2px) !important;

}

.fin-row-1 h4 {

    color: var(--fin-row-1-title) !important;

    font-weight: 750 !important;

}

.fin-row-1 .amount {

    color: var(--fin-row-1-value) !important;

}

.fin-row-1 .description {

    color: var(--fin-row-1-title) !important;

    opacity: 0.8 !important;

}



.fin-row-2 {

    background: linear-gradient(135deg, var(--fin-row-2-bg-start) 0%, var(--fin-row-2-bg-end) 100%) !important;

    border: 1px solid var(--fin-row-2-border) !important;

    border-right: 5px solid var(--fin-row-2-border-right) !important;

    box-shadow: 0 6px 20px -2px var(--fin-row-2-shadow-color), 0 3px 8px -1px rgba(0, 0, 0, 0.05) !important;

}

.fin-row-2:hover {

    border-color: var(--fin-row-2-border-right) !important;

    box-shadow: 0 10px 20px -3px var(--fin-row-2-shadow-color), 0 4px 6px -2px rgba(0, 0, 0, 0.08) !important;

    transform: translateY(-2px) !important;

}

.fin-row-2 h4 {

    color: var(--fin-row-2-title) !important;

    font-weight: 750 !important;

}

.fin-row-2 .amount {

    color: var(--fin-row-2-value) !important;

}

.fin-row-2 .description {

    color: var(--fin-row-2-title) !important;

    opacity: 0.8 !important;

}



.fin-row-3 {

    background: linear-gradient(135deg, var(--fin-row-3-bg-start) 0%, var(--fin-row-3-bg-end) 100%) !important;

    border: 1px solid var(--fin-row-3-border) !important;

    border-right: 5px solid var(--fin-row-3-border-right) !important;

    box-shadow: 0 6px 20px -2px var(--fin-row-3-shadow-color), 0 3px 8px -1px rgba(0, 0, 0, 0.05) !important;

}

.fin-row-3:hover {

    border-color: var(--fin-row-3-border-right) !important;

    box-shadow: 0 10px 20px -3px var(--fin-row-3-shadow-color), 0 4px 6px -2px rgba(0, 0, 0, 0.08) !important;

    transform: translateY(-2px) !important;

}

.fin-row-3 h4 {

    color: var(--fin-row-3-title) !important;

    font-weight: 750 !important;

}

.fin-row-3 .amount {

    color: var(--fin-row-3-value) !important;

}

.fin-row-3 .description {

    color: var(--fin-row-3-title) !important;

    opacity: 0.8 !important;

}



/* Disabled Inline Date Wrapper */

.inline-date-wrapper.disabled-date-wrapper {

    opacity: 0.5;

    cursor: not-allowed !important;

    pointer-events: none;

}

.inline-date-wrapper.disabled-date-wrapper .inline-date-badge {

    cursor: not-allowed !important;

}



/* Contracts Pagination Styling */

.contracts-pagination-container {

    display: flex;

    justify-content: space-between;

    align-items: center;

    margin-top: 20px;

    padding-top: 15px;

    border-top: 1px solid var(--border-color);

    direction: rtl;

    font-family: 'Cairo', sans-serif;

    flex-wrap: wrap;

    gap: 12px;

}



.contracts-pagination-info {

    font-size: 0.9rem;

    color: var(--text-muted);

    font-weight: 500;

    display: flex;

    align-items: center;

    gap: 15px;

    flex-wrap: wrap;

}



.contracts-pagination-stepper {

    display: inline-flex;

    align-items: center;

    gap: 6px;

    background: var(--bg-card, #ffffff);

    padding: 3px 8px;

    border-radius: 8px;

    border: 1px solid var(--border-color, #cbd5e1);

    font-size: 0.82rem;

    font-weight: 600;

    box-shadow: 0 1px 2px rgba(0,0,0,0.04);

}



.pag-stepper-btn {

    width: 26px;

    height: 26px;

    border: 1px solid var(--border-color, #cbd5e1);

    border-radius: 6px;

    background: #f8fafc;

    cursor: pointer;

    font-weight: bold;

    font-size: 1rem;

    display: flex;

    align-items: center;

    justify-content: center;

    color: var(--text-main, #334155);

    line-height: 1;

    padding: 0;

    transition: all 0.2s ease;

    user-select: none;

}



.pag-stepper-btn:hover {

    background-color: var(--primary-color, #4f46e5);

    color: white !important;

    border-color: var(--primary-color, #4f46e5);

}



.contracts-pagination-stepper input {

    width: 48px;

    height: 26px;

    text-align: center;

    border: 1px solid var(--border-color, #cbd5e1);

    border-radius: 6px;

    padding: 0 4px;

    font-weight: 700;

    font-family: monospace;

    font-size: 0.9rem;

    background: var(--bg-card, #ffffff);

    color: var(--text-main, #0f172a);

    outline: none;

}



.contracts-pagination-stepper input:focus {

    border-color: var(--primary-color, #4f46e5);

    box-shadow: 0 0 0 2px rgba(79, 70, 229, 0.15);

}



.contracts-pagination-buttons {

    display: flex;

    align-items: center;

    gap: 6px;

}



.contracts-pag-btn {

    display: inline-flex;

    align-items: center;

    justify-content: center;

    min-width: 34px;

    height: 34px;

    padding: 0 8px;

    border-radius: 8px;

    border: 1px solid var(--border-color);

    background-color: white;

    color: var(--text-main);

    font-size: 0.85rem;

    font-weight: 600;

    cursor: pointer;

    transition: all 0.2s ease-in-out;

    user-select: none;

}



.contracts-pag-btn:hover:not(.disabled):not(.active) {

    border-color: var(--primary-color);

    color: var(--primary-color);

    background-color: rgba(99, 102, 241, 0.05);

}



.contracts-pag-btn.active {

    background: linear-gradient(135deg, var(--primary-color) 0%, var(--primary-light) 100%);

    border-color: var(--primary-color);

    color: white !important;

    box-shadow: 0 4px 6px -1px rgba(99, 102, 241, 0.2);

}



.contracts-pag-btn.disabled {

    background-color: #f8fafc;

    border-color: #e2e8f0;

    color: #94a3b8;

    cursor: not-allowed;

    opacity: 0.6;

}



/* ==================== 14. SMART NOTIFICATION BELL & DROPDOWN ==================== */



.notifications-dropdown-container {

    position: relative;

    display: inline-block;

}



.btn-notification-bell {

    position: relative;

    background: #f8fafc;

    border: 1.5px solid var(--border-color);

    color: var(--text-main);

    width: 42px;

    height: 42px;

    border-radius: 12px;

    display: flex;

    align-items: center;

    justify-content: center;

    cursor: pointer;

    transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);

    font-size: 1.2rem;

}



.btn-notification-bell:hover {

    background: #f1f5f9;

    border-color: var(--primary-light);

    color: var(--primary-color);

    transform: translateY(-2px);

    box-shadow: 0 4px 12px rgba(99, 102, 241, 0.15);

}



.notification-badge {

    position: absolute;

    top: -4px;

    right: -4px;

    background: linear-gradient(135deg, #ef4444 0%, #dc2626 100%);

    color: white;

    font-size: 0.75rem;

    font-weight: 700;

    min-width: 20px;

    height: 20px;

    border-radius: 10px;

    display: flex;

    align-items: center;

    justify-content: center;

    padding: 0 5px;

    border: 2px solid white;

    box-shadow: 0 2px 8px rgba(239, 68, 68, 0.4);

    animation: pulseBadge 2s infinite;

}



@keyframes pulseBadge {

    0% {

        transform: scale(1);

        box-shadow: 0 0 0 0 rgba(239, 68, 68, 0.7);

    }

    70% {

        transform: scale(1.05);

        box-shadow: 0 0 0 8px rgba(239, 68, 68, 0);

    }

    100% {

        transform: scale(1);

        box-shadow: 0 0 0 0 rgba(239, 68, 68, 0);

    }

}



.notifications-dropdown {

    position: absolute;

    top: 52px;

    left: 0;

    width: 380px;

    background: rgba(255, 255, 255, 0.92);

    backdrop-filter: blur(12px) saturate(180%);

    -webkit-backdrop-filter: blur(12px) saturate(180%);

    border: 1px solid rgba(226, 232, 240, 0.8);

    border-radius: 16px;

    box-shadow: 0 12px 30px rgba(0, 0, 0, 0.12);

    z-index: 1000;

    overflow: hidden;

    transform-origin: top left;

    animation: scaleInDropdown 0.25s cubic-bezier(0.34, 1.56, 0.64, 1);

    direction: rtl;

    text-align: right;

}



@keyframes scaleInDropdown {

    from {

        opacity: 0;

        transform: scale(0.95) translateY(-10px);

    }

    to {

        opacity: 1;

        transform: scale(1) translateY(0);

    }

}



.notifications-header {

    display: flex;

    justify-content: space-between;

    align-items: center;

    padding: 16px 20px;

    background: rgba(248, 250, 252, 0.8);

    border-bottom: 1px solid #e2e8f0;

}



.notifications-header h3 {

    margin: 0;

    font-size: 1rem;

    font-weight: 700;

    color: var(--text-main);

}



.btn-clear-notifications {

    background: transparent;

    border: none;

    color: var(--text-muted);

    cursor: pointer;

    font-size: 0.95rem;

    padding: 6px;

    border-radius: 8px;

    transition: all 0.2s;

    display: flex;

    align-items: center;

    justify-content: center;

}



.btn-clear-notifications:hover {

    color: var(--primary-color);

    background: rgba(99, 102, 241, 0.08);

}



.notifications-list {

    max-height: 320px;

    overflow-y: auto;

}



.notification-item {

    display: flex;

    gap: 12px;

    padding: 14px 20px;

    border-bottom: 1px solid #f1f5f9;

    transition: background 0.2s;

    cursor: pointer;

}



.notification-item:hover {

    background: rgba(99, 102, 241, 0.03);

}



.notification-icon-wrapper {

    width: 36px;

    height: 36px;

    border-radius: 10px;

    display: flex;

    align-items: center;

    justify-content: center;

    flex-shrink: 0;

}



.notification-icon-wrapper.danger {

    background: rgba(239, 68, 68, 0.1);

    color: #ef4444;

}



.notification-icon-wrapper.warning {

    background: rgba(245, 158, 11, 0.1);

    color: #f59e0b;

}



.notification-icon-wrapper.info {

    background: rgba(59, 130, 246, 0.1);

    color: #3b82f6;

}



.notification-details {

    flex-grow: 1;

    font-family: 'Cairo', sans-serif;

}



.notification-details p {

    margin: 0 0 4px 0;

    font-size: 0.85rem;

    color: var(--text-main);

    line-height: 1.4;

}



.notification-details .noti-time {

    font-size: 0.75rem;

    color: var(--text-muted);

}



.notification-empty {

    padding: 30px 20px;

    text-align: center;

    color: var(--text-muted);

    font-size: 0.9rem;

    display: flex;

    flex-direction: column;

    align-items: center;

    gap: 8px;

}



.notification-empty i {

    font-size: 1.8rem;

    color: #cbd5e1;

}



/* ==================== PREMIUM USER PERFORMANCE TABLE STYLING ==================== */

#table-user-performance {

    width: max-content !important;

    min-width: 100%;

    border-collapse: separate;

    border-spacing: 0;

}



#table-user-performance th {

    background: linear-gradient(135deg, var(--primary-color) 0%, #1e3a5f 100%) !important;

    color: #ffffff !important;

    font-weight: 700;

    font-size: 0.85rem;

    padding: 14px 16px;

    border-bottom: 3px solid var(--accent-color) !important;

    text-transform: uppercase;

    letter-spacing: 0.5px;

    white-space: nowrap !important;

    text-align: center;

}



#table-user-performance th i {

    margin-left: 6px;

    color: var(--accent-color);

}



#table-user-performance th:first-child {

    border-top-right-radius: 8px;

}



#table-user-performance th:last-child {

    border-top-left-radius: 8px;

}



#table-user-performance td {

    padding: 14px 16px;

    font-size: 0.88rem;

    font-weight: 600;

    border-bottom: 1px solid #e2e8f0;

    transition: all 0.15s ease;

    vertical-align: middle;

    white-space: nowrap !important;

}



#table-user-performance tbody tr {

    background-color: #ffffff;

    transition: all 0.2s ease;

}



#table-user-performance tbody tr:nth-child(even) {

    background-color: #f8fafc;

}



#table-user-performance tbody tr:hover {

    background-color: rgba(13, 43, 69, 0.04) !important;

}



#table-user-performance tbody tr:hover td {

    color: var(--primary-color);

}



/* Make Employee Name column sticky and styled beautifully */

#table-user-performance thead th {

    position: sticky !important;

    top: 0 !important;

    z-index: 5 !important;

}



#table-user-performance th.sticky-col-1 {

    position: sticky !important;

    right: 0 !important;

    top: 0 !important;

    background: linear-gradient(135deg, var(--primary-color) 0%, #1e3a5f 100%) !important;

    color: #ffffff !important;

    z-index: 6 !important;

    box-shadow: -2px 0 5px rgba(0,0,0,0.15);

}



#table-user-performance td.sticky-col-1 {

    position: sticky !important;

    right: 0 !important;

    background-color: #ffffff !important;

    z-index: 4 !important;

    font-weight: 700 !important;

    box-shadow: -2px 0 5px rgba(0,0,0,0.08);

    border-left: 2px solid #e2e8f0;

}



#table-user-performance tr:nth-child(even) td.sticky-col-1 {

    background-color: #f8fafc !important;

}



#table-user-performance tr:hover td.sticky-col-1 {

    background-color: #f1f5f9 !important;

}



/* Badges for Sale Sources (Normal vs Personal) */

.badge-source-normal {

    display: inline-block;

    padding: 3px 8px;

    border-radius: 4px;

    font-size: 0.75rem;

    font-weight: 700;

    background-color: #f1f5f9;

    color: #475569;

    border: 1px solid #cbd5e1;

}



.badge-source-personal {

    display: inline-block;

    padding: 3px 8px;

    border-radius: 4px;

    font-size: 0.75rem;

    font-weight: 700;

    background-color: #f3e8ff;

    color: #7e22ce;

    border: 1px solid #d8b4fe;

}



/* --- Antigravity Premium Form UX Customizations --- */

/* Styling for required and active fields in forms (RTL compliant right-border) */

#form-reservation input[required]:not([readonly]):not([disabled]),

#form-reservation select[required]:not([disabled]),

#form-reservation textarea[required]:not([readonly]):not([disabled]),

#form-sale input[required]:not([readonly]):not([disabled]),

#form-sale select[required]:not([disabled]),

#form-sale textarea[required]:not([readonly]):not([disabled]) {

    border-right: 3px solid var(--accent-color) !important;

    border-left: 1px solid #cbd5e1 !important;

    border-top: 1px solid #cbd5e1 !important;

    border-bottom: 1px solid #cbd5e1 !important;

    background-color: #fefeff !important;

}



/* Focused required active fields */

#form-reservation input[required]:not([readonly]):not([disabled]):focus,

#form-reservation select[required]:not([disabled]):focus,

#form-reservation textarea[required]:not([readonly]):not([disabled]):focus,

#form-sale input[required]:not([readonly]):not([disabled]):focus,

#form-sale select[required]:not([disabled]):focus,

#form-sale textarea[required]:not([readonly]):not([disabled]):focus {

    border-right: 3px solid var(--accent-color) !important;

    border-color: var(--accent-color) !important;

    background-color: #ffffff !important;

    box-shadow: 0 0 0 3px rgba(255, 170, 59, 0.1) !important;

}



/* Styling for non-required, readonly, or disabled fields */

#form-reservation input[readonly],

#form-reservation input[disabled],

#form-reservation select[disabled],

#form-reservation textarea[readonly],

#form-reservation textarea[disabled],

#form-reservation input:not([required]),

#form-reservation select:not([required]),

#form-reservation textarea:not([required]),

#form-sale input[readonly],

#form-sale input[disabled],

#form-sale select[disabled],

#form-sale textarea[readonly],

#form-sale textarea[disabled],

#form-sale input:not([required]):not([name="notes"]):not(#promote-sale-notes),

#form-sale select:not([required]),

#form-sale textarea:not([required]):not([name="notes"]) {

    background-color: #f1f5f9 !important;

    border-color: #cbd5e1 !important;

    color: #64748b !important;

    border-right: 1px solid #cbd5e1 !important;

    border-left: 1px solid #cbd5e1 !important;

    border-top: 1px solid #cbd5e1 !important;

    border-bottom: 1px solid #cbd5e1 !important;

    cursor: not-allowed;

    opacity: 0.85;

}



#promote-sale-notes,

#form-sale input[name="notes"],

#form-sale textarea[name="notes"] {

    background-color: #ffffff !important;

    color: #0f172a !important;

    border: 1.5px solid #0284c7 !important;

    cursor: text !important;

    opacity: 1 !important;

}

#promote-sale-notes:focus,

#form-sale input[name="notes"]:focus,

#form-sale textarea[name="notes"]:focus {

    background-color: #ffffff !important;

    border-color: #0284c7 !important;

    box-shadow: 0 0 0 3px rgba(2, 132, 199, 0.18) !important;

    cursor: text !important;

}



/* --- Global Print & Report Table Styles --- */

@media print {

    * {

        -webkit-print-color-adjust: exact !important;

        print-color-adjust: exact !important;

    }

}



table.report-table {

    width: 100%;

    border-collapse: collapse;

    margin-top: 15px;

    margin-bottom: 25px;

    font-size: 0.85rem;

    -webkit-print-color-adjust: exact !important;

    print-color-adjust: exact !important;

}



table.report-table th, table.report-table td {

    border: 1px solid #cbd5e1;

    padding: 8px 10px;

    text-align: center;

    vertical-align: middle;

}



table.report-table th {

    background-color: #f1f5f9;

    color: #0f172a;

    font-weight: 800;

}



table.report-table tr:nth-child(even) {

    background-color: #f8fafc;

}



/* Category Colors for Performance Report Table */

.cat-name { background-color: #1e293b !important; color: white !important; }

.cat-calls { background-color: #1e3a8a !important; color: white !important; }

.cat-calls-sub { background-color: #2563eb !important; color: white !important; }

.cat-res { background-color: #0f766e !important; color: white !important; }

.cat-res-sub { background-color: #0d9488 !important; color: white !important; }

.cat-sales { background-color: #065f46 !important; color: white !important; }

.cat-sales-sub { background-color: #059669 !important; color: white !important; }



.val-count { font-weight: 700; color: #334155; }

.val-conversion { font-weight: 700; color: #0891b2; }

.val-revenue { font-weight: 700; color: #16a34a; }

.val-discount { font-weight: 700; color: #dc2626; }

.val-active { font-weight: 700; color: #ea580c; }



.modal-overlay.modeless-modal {

    background-color: transparent !important;

    backdrop-filter: none !important;

    pointer-events: none !important;

}

.modal-overlay.modeless-modal .modal-card {

    pointer-events: auto !important;

    box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.2), 0 10px 10px -5px rgba(0, 0, 0, 0.2) !important;

    border: 2px solid #cbd5e1 !important;

}



.row-cancelled {

    background-color: rgba(239, 68, 68, 0.06) !important;

    color: #b91c1c !important;

}



.row-cancelled td {

    background-color: rgba(239, 68, 68, 0.06) !important;

    color: #b91c1c !important;

    font-weight: 500;

}



.row-cancelled:hover td {

    background-color: rgba(239, 68, 68, 0.10) !important;

}



.row-sale-cancelled {

    background-color: rgba(239, 68, 68, 0.06) !important;

}

.row-sale-cancelled td {

    background-color: rgba(239, 68, 68, 0.06) !important;

    color: #b91c1c !important;

    font-weight: 500;

}

.row-sale-cancelled:hover td {

    background-color: rgba(239, 68, 68, 0.10) !important;

}



.row-cancellation-pending {

    background-color: rgba(245, 158, 11, 0.08) !important;

}

.row-cancellation-pending td {

    background-color: rgba(245, 158, 11, 0.08) !important;

    color: #92400e !important;

    font-weight: 500;

}

.row-cancellation-pending:hover td {

    background-color: rgba(245, 158, 11, 0.14) !important;

}

.row-cancellation-pending td[onclick],

.row-cancelled td[onclick],

.row-transfer-pending td[onclick] {

    cursor: not-allowed !important;

}



.row-transfer-pending {

    background-color: rgba(217, 119, 6, 0.09) !important;

}

.row-transfer-pending td {

    background-color: rgba(217, 119, 6, 0.09) !important;

    color: #9a3412 !important;

    font-weight: 500;

}

.row-transfer-pending:hover td {

    background-color: rgba(217, 119, 6, 0.15) !important;

}



/* القيود المتنازل عنها تأخذ اللون البنفسجي */

.row-transferred,

.row-sale-transferred {

    background-color: rgba(139, 92, 246, 0.10) !important;

    color: #5b21b6 !important;

}

.row-transferred td,

.row-sale-transferred td {

    background-color: rgba(139, 92, 246, 0.10) !important;

    color: #5b21b6 !important;

    font-weight: 500;

}

.row-transferred:hover td,

.row-sale-transferred:hover td {

    background-color: rgba(139, 92, 246, 0.16) !important;

}



/* Amber Print Badge style for Reservation Deposit Payment (عربون) */

.print-badge-deposit-payment {

    background-color: #fef3c7 !important; /* amber-100 */

    color: #92400e !important;            /* amber-800 */

    padding: 3px 8px !important;

    border-radius: 4px !important;

    font-weight: 700 !important;

    display: inline-block !important;

    border: 1px solid #fde68a !important; /* amber-200 */

}



/* تمييز الحقول المطلوبة بلون خلفية مميز وإطار أصفر/برتقالي */

.form-control:required:not([readonly]):not([disabled]) {

    background-color: #fffbeb !important; /* لون بيج/أصفر خفيف مريح للعين */

    border: 1.5px solid #f59e0b !important; /* إطار بلون برتقالي/ذهبي مميز */

}

.form-control:required:not([readonly]):not([disabled]):focus {

    background-color: #fffdec !important;

    border-color: #d97706 !important;

    box-shadow: 0 0 0 3px rgba(245, 158, 11, 0.15) !important;

}



/* --- CSS rules to fit the confirmation page (استمارة تثبيت الحجز) into exactly one A4 page on print --- */

@media print {

    @page confirmationPage {

        size: A4 portrait;

        margin: 6mm !important;

    }

    

    .print-confirmation-a4-page {

        page: confirmationPage;

        zoom: 0.80 !important;

        padding: 8px 12px !important;

        margin: 0 auto !important;

        border: none !important;

        box-shadow: none !important;

        max-width: 100% !important;

        width: 100% !important;

    }

    

    .print-confirmation-a4-page h2, 

    .print-confirmation-a4-page h3 {

        font-size: 1.0rem !important;

        margin-bottom: 4px !important;

        margin-top: 2px !important;

    }

    

    .print-confirmation-a4-page .print-header {

        margin-bottom: 4px !important;

        padding-bottom: 4px !important;

    }

    

    .print-confirmation-a4-page #print-receipt-main-title {

        font-size: 1.15rem !important;

        padding: 2px 10px !important;

        margin-bottom: 4px !important;

    }

    

    .print-confirmation-a4-page p {

        margin-bottom: 4px !important;

        font-size: 0.85rem !important;

    }

    

    /* Shrink margins and paddings of container wrappers using classes */

    .print-confirmation-a4-page .print-card-wrapper {

        margin-bottom: 5px !important;

        border-radius: 4px !important;

    }

    

    .print-confirmation-a4-page .print-card-wrapper > div {

        padding: 4px 8px !important;

    }

    

    .print-confirmation-a4-page .print-warning-box {

        margin-bottom: 5px !important;

        padding: 6px 10px !important;

        border-radius: 4px !important;

    }

    

    .print-confirmation-a4-page table {

        margin-bottom: 2px !important;

    }

    

    .print-confirmation-a4-page table th, 

    .print-confirmation-a4-page table td {

        padding: 2px 4px !important;

        font-size: 0.75rem !important;

    }

    

    .print-confirmation-a4-page .print-signatures {

        margin-top: 8px !important;

        padding-top: 4px !important;

        gap: 10px !important;

    }

    

    .print-confirmation-a4-page .print-signatures p {

        margin-bottom: 12px !important;

        font-size: 0.8rem !important;

    }

    

    .print-confirmation-a4-page .print-header img {

        max-height: 35px !important;

        width: auto !important;

    }

    

    .print-confirmation-a4-page #print-receipt-price-breakdown {

        padding-bottom: 4px !important;

        margin-bottom: 4px !important;

        gap: 6px !important;

        grid-template-columns: 1fr 1fr !important;

    }

    

    .print-confirmation-a4-page #print-receipt-price-breakdown > div {

        display: flex !important;

        border-bottom: 1px solid #f1f5f9 !important;

        padding-bottom: 4px !important;

    }

    

    .print-confirmation-a4-page #print-receipt-price-breakdown span {

        font-size: 0.75rem !important;

    }

    

    .print-confirmation-a4-page #print-receipt-price-breakdown strong {

        font-size: 0.78rem !important;

    }

    

    .print-confirmation-a4-page #print-receipt-discount-row {

        margin-top: 2px !important;

        padding: 2px !important;

        font-size: 0.7rem !important;

    }

    

    .print-confirmation-a4-page .print-signatures div span {

        font-size: 0.72rem !important;

    }

    

    .print-confirmation-a4-page ol {

        font-size: 0.75rem !important;

        line-height: 1.2 !important;

        margin-top: 2px !important;

        margin-bottom: 2px !important;

        padding-right: 15px !important;

    }

    

    /* Shrink the size of details grids */

    .print-confirmation-a4-page .print-card-wrapper div[style*="display: grid"],

    .print-confirmation-a4-page .print-card-wrapper div[style*="display: flex"] {

        gap: 6px !important;

    }

    

    /* Hide the footer on print to ensure it fits in exactly 1 page */

    .print-confirmation-a4-page .print-receipt-footer {

        display: none !important;

    }

    

    /* Shrink conversion info box during print */

    .print-confirmation-a4-page #print-receipt-conversion-info {

        padding: 4px 8px !important;

        margin-bottom: 8px !important;

        font-size: 0.76rem !important;

        border-radius: 4px !important;

    }

}



/* Purple Print Badge style for Administrative Commission (العمولة الإدارية) */

.print-badge-admin-commission {

    background-color: #f3e8ff !important; /* purple-100 */

    color: #6b21a8 !important;            /* purple-800 */

    padding: 3px 8px !important;

    border-radius: 4px !important;

    font-weight: 700 !important;

    display: inline-block !important;

    border: 1px solid #e9d5ff !important; /* purple-200 */

}



/* ==========================================================================

   Unified Color Scheme for Payments, Installments and Table Headers

   ========================================================================== */



/* 1. Unified Table Headers (f1f5f9 background & cbd5e1 borders) */

#table-monthly-payments th,

#table-loan-payments th,

.th-deposit-payment,

.th-admin-commission,

.th-down-payment,

.th-delivery-payment,

.th-loan,

.th-remaining-installments,

.th-total-count,

.th-overdue-count,

.th-paid-count,

.th-installments,

.subth-delivery-payment,

.subth-installments,

.subth-loan,

.subth-down-payment,

.subth-admin-commission {

    background-color: #f1f5f9 !important;

    color: #1e293b !important;

    border: 1px solid #cbd5e1 !important;

    border-bottom: 2px solid #cbd5e1 !important;

    font-weight: 700 !important;

}



/* 2. Paid State (Green - background: #e6f4ea, text: #137333) */

.cell-installments.paid,

.cell-custom-payment.paid,

.cell-loan.paid,

.cell-deposit-payment.paid,

.cell-admin-commission.paid,

.cell-down-payment.paid,

.cell-delivery-payment.paid,

.cell-delivery-payment-expected.paid,

.cell-loan-installment.paid {

    background-color: #e6f4ea !important;

    color: #137333 !important;

}



/* Partial State (Orange - background: #fff4e6, text: #d97706) */

.cell-installments.partial {

    background-color: #fff4e6 !important;

    color: #d97706 !important;

}



/* 3. Overdue / Due State (Red - background: #fce8e6, text: #c5221f) */

.cell-installments.due,

.cell-custom-payment.due,

.cell-custom-payment.overdue,

.cell-custom-payment.partial,

.cell-down-payment.unpaid,

.cell-delivery-payment.unpaid,

.cell-delivery-payment-expected.overdue,

.cell-loan-installment.due {

    background-color: #fce8e6 !important;

    color: #c5221f !important;

}



/* 4. Future / Unpaid State (White - background: #ffffff, text: #1e293b) */

.cell-installments.future,

.cell-custom-payment.future,

.cell-custom-payment.unpaid,

.cell-loan.empty,

.cell-loan.unpaid,

.cell-deposit-payment.future,

.cell-deposit-payment.unpaid,

.cell-admin-commission.future,

.cell-admin-commission.unpaid,

.cell-down-payment.future,

.cell-delivery-payment.future,

.cell-delivery-payment-expected.normal,

.cell-loan-installment.future {

    background-color: #ffffff !important;

    color: #1e293b !important;

}



/* 5. Pending State (Yellow - background: #fffbeb, text: #b45309) */

.cell-installments.pending,

.cell-custom-payment.pending,

.cell-loan.pending,

.cell-deposit-payment.pending,

.cell-admin-commission.pending,

.cell-down-payment.pending,

.cell-delivery-payment.pending,

.cell-delivery-payment-expected.pending,

.cell-loan-installment.pending {

    background-color: #fffbeb !important;

    color: #b45309 !important;

}



/* System Brand Card & Login Themes */

.system-brand-frame.theme-glass {

    background: linear-gradient(135deg, rgba(255, 255, 255, 0.04) 0%, rgba(255, 255, 255, 0.01) 100%) !important;

    border: 1px solid rgba(255, 255, 255, 0.08) !important;

    box-shadow: inset 0 1px 1px rgba(255, 255, 255, 0.05), 0 10px 25px rgba(0, 0, 0, 0.25) !important;

}

.system-brand-frame.theme-cyber {

    background: rgba(15, 23, 42, 0.65) !important;

    border: 1px solid rgba(56, 189, 248, 0.35) !important;

    box-shadow: 0 0 15px rgba(56, 189, 248, 0.15), inset 0 0 8px rgba(56, 189, 248, 0.05) !important;

}

.system-brand-frame.theme-cyber .logo-icon {

    filter: drop-shadow(0 0 8px rgba(56, 189, 248, 0.5)) !important;

}

.system-brand-frame.theme-cyber div {

    background: #38bdf8 !important;

}

.system-brand-frame.theme-gold {

    background: linear-gradient(135deg, rgba(30, 25, 20, 0.85) 0%, rgba(15, 12, 10, 0.95) 100%) !important;

    border: 1px solid rgba(212, 175, 55, 0.35) !important;

    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.4), inset 0 1px 1px rgba(212, 175, 55, 0.1) !important;

}

.system-brand-frame.theme-gold .logo-icon {

    filter: drop-shadow(0 4px 10px rgba(212, 175, 55, 0.3)) !important;

}

.system-brand-frame.theme-gold div {

    background: #d4af37 !important;

}

.system-brand-frame.theme-slate {

    background: rgba(30, 41, 59, 0.6) !important;

    border: 1px solid rgba(255, 255, 255, 0.05) !important;

    box-shadow: none !important;

}

.system-brand-frame.theme-slate .logo-icon {

    filter: none !important;

}

.system-brand-frame.theme-slate div {

    background: #64748b !important;

    opacity: 0.3 !important;

}



/* Login Card Theme Overlays */

.login-card.theme-cyber {

    border: 1px solid rgba(56, 189, 248, 0.3) !important;

    box-shadow: 0 0 30px rgba(56, 189, 248, 0.15) !important;

}

.login-card.theme-gold {

    border: 1px solid rgba(212, 175, 55, 0.3) !important;

    box-shadow: 0 15px 40px rgba(0, 0, 0, 0.5) !important;

}

.login-card.theme-slate {

    border: 1px solid rgba(255, 255, 255, 0.05) !important;

    box-shadow: none !important;

}



@keyframes modalZoomIn {

    0% { transform: scale(0.9); opacity: 0; }

    100% { transform: scale(1); opacity: 1; }

}



/* Hide signatures globally from all print reports and forms */

.print-signatures {

    display: none !important;

}







/* ==================== GLOBAL MOBILE RESPONSIVENESS PATCH ==================== */

@media (max-width: 768px) {

    /* Stack layout fields inside forms */

    .form-row, .grid-two-columns, .grid-card, .dashboard-stats-grid, .dashboard-details-grid, .financial-grid {

        grid-template-columns: 1fr !important;

        display: flex !important;

        flex-direction: column !important;

        gap: 12px !important;

    }



    /* Stack flex containers like buttons, filters, etc. */

    .section-actions, .filter-actions-row, .card-header-actions, .modal-actions, .modal-footer, .form-actions {

        flex-direction: column !important;

        align-items: stretch !important;

        width: 100% !important;

        gap: 8px !important;

    }

    

    /* Make buttons full width in stack */

    .section-actions .btn, .filter-actions-row .btn, .card-header-actions .btn, .modal-actions .btn, .modal-footer .btn, .form-actions .btn {

        width: 100% !important;

        justify-content: center !important;

        display: flex !important;

    }



    /* Ensure tables never overflow their parents, but get scroll bars */

    .table-container, .table-card, .table-responsive, div:has(> table) {

        width: 100% !important;

        max-width: 100% !important;

        overflow-x: auto !important;

        -webkit-overflow-scrolling: touch !important;

        margin-bottom: 15px !important;

    }

    

    table {

        display: block !important;

        width: 100% !important;

        overflow-x: auto !important;

    }



    /* Stack form groups/inputs */

    .form-group {

        width: 100% !important;

        max-width: 100% !important;

    }

    

    .form-control, .form-select, .form-input, input, select, textarea {

        width: 100% !important;

        max-width: 100% !important;

        box-sizing: border-box !important;

    }



    /* Ensure modal containers occupy full screen width safely */

    .modal-overlay {

        padding: 10px !important;

        align-items: flex-start !important;

        overflow-y: auto !important;

    }



    .modal-card, .modal-card-popup {

        width: 100% !important;

        max-width: 100% !important;

        margin: 10px auto !important;

        border-radius: 12px !important;

    }



    .modal-body {
        max-height: 70vh !important;
        overflow-y: auto !important;
        padding: 15px 12px !important;
        -webkit-overflow-scrolling: touch !important;
    }

    /* Mobile sticky footer padding & margin compensation */
    .modal-body .form-actions,
    .modal-body .modal-actions,
    .modal-body .modal-footer,
    .modal-card > .form-actions,
    .modal-card > .modal-actions,
    .modal-card > .modal-footer {
        bottom: 0px !important;
        margin-left: -12px !important;
        margin-right: -12px !important;
        margin-bottom: 0px !important;
        margin-top: 16px !important;
        padding: 10px 14px !important;
    }

    

    /* Adjust text size on mobile */

    body {

        font-size: 14px !important;

    }

    

    h1, h2, h3, h4 {

        font-size: 1.15rem !important;

        line-height: 1.4 !important;

    }

}



/* Force White Text and Dark Background on Login Inputs using IDs */

#login-username, #login-password {

    color: #ffffff !important;

    background-color: rgba(15, 23, 42, 0.55) !important;

}



/* Toggle Swtich (HUD Mode slider button) styling */

.app-switch {

    position: relative;

    display: inline-block;

    width: 40px;

    height: 22px;

}



.app-switch input { 

    opacity: 0;

    width: 0;

    height: 0;

}



.app-slider {

    position: absolute;

    cursor: pointer;

    top: 0;

    left: 0;

    right: 0;

    bottom: 0;

    background-color: rgba(255, 255, 255, 0.1);

    transition: .4s;

    border-radius: 34px;

    border: 1px solid rgba(255, 255, 255, 0.15);

}



.app-slider:before {

    position: absolute;

    content: "";

    height: 14px;

    width: 14px;

    left: 3px;

    bottom: 3px;

    background-color: #9ca3af;

    transition: .4s;

    border-radius: 50%;

}



.app-switch input:checked + .app-slider {

    background-color: var(--primary-color, rgba(56, 189, 248, 0.2));

    border-color: var(--primary-color, #38bdf8);

}



.app-switch input:checked + .app-slider:before {

    transform: translateX(18px);

    background-color: var(--primary-color, #38bdf8);

    box-shadow: 0 0 8px var(--primary-color, #38bdf8);

}



/* ==========================================================================

   DESKTOP APP MODE STYLES

   ========================================================================== */

body.app-mode {

    height: 100vh !important;

    overflow: hidden !important;

    user-select: none !important;

    -webkit-user-select: none !important;

}



/* Allow selection only in inputs, textareas and editable fields */

body.app-mode input,

body.app-mode textarea,

body.app-mode select,

body.app-mode [contenteditable] {

    user-select: text !important;

    -webkit-user-select: text !important;

}



/* Scrollable containers style custom scrollbars in app-mode */

body.app-mode ::-webkit-scrollbar {

    width: 6px !important;

    height: 6px !important;

}



body.app-mode ::-webkit-scrollbar-track {

    background: rgba(0, 0, 0, 0.05) !important;

}



body.app-mode.spaceship-mode ::-webkit-scrollbar-track {

    background: rgba(255, 255, 255, 0.02) !important;

}



body.app-mode ::-webkit-scrollbar-thumb {

    background: rgba(156, 163, 175, 0.4) !important;

    border-radius: 4px !important;

}



body.app-mode.spaceship-mode ::-webkit-scrollbar-thumb {

    background: rgba(56, 189, 248, 0.3) !important;

}



body.app-mode ::-webkit-scrollbar-thumb:hover {

    background: rgba(156, 163, 175, 0.6) !important;

}



body.app-mode.spaceship-mode ::-webkit-scrollbar-thumb:hover {

    background: rgba(56, 189, 248, 0.6) !important;

}



/* Ensure sidebar is scrollable internally when body scroll is disabled in app-mode */

body.app-mode .sidebar {

    height: 100vh !important;

    overflow-y: auto !important;

}



/* Force smaller buttons and icons in reservations actions column and unit details modal to reduce clutter */

#table-reservations td .btn,

.unit-detail-modal-layout .btn-sm {

    padding: 4px 8px !important;

    font-size: 0.72rem !important;

    font-weight: 500 !important;

}



/* Custom Outline Buttons */

.btn-outline-primary {

    background: transparent !important;

    border: 1.5px solid var(--primary-color) !important;

    color: var(--primary-color) !important;

    box-shadow: none !important;

}

.btn-outline-primary:hover {

    background: var(--primary-color) !important;

    color: #ffffff !important;

}



.btn-outline-success {

    background: transparent !important;

    border: 1.5px solid var(--success-color) !important;

    color: var(--success-color) !important;

    box-shadow: none !important;

}

.btn-outline-success:hover {

    background: var(--success-color) !important;

    color: #ffffff !important;

}



.btn-outline-danger {

    background: transparent !important;

    border: 1.5px solid var(--danger-color) !important;

    color: var(--danger-color) !important;

    box-shadow: none !important;

}

.btn-outline-danger:hover {

    background: var(--danger-color) !important;

    color: #ffffff !important;

}



/* View Toggle Switcher */

.view-toggle-container {

    display: flex;

    background: #e2e8f0;

    padding: 4px;

    border-radius: 8px;

    gap: 4px;

    border: 1px solid #cbd5e1;

    margin-right: 10px;

}



.view-toggle-btn {

    padding: 6px 14px;

    border-radius: 6px;

    border: none;

    font-size: 0.85rem;

    font-weight: bold;

    cursor: pointer;

    display: flex;

    align-items: center;

    gap: 6px;

    transition: var(--transition);

    background: transparent;

    color: var(--text-muted);

}



.view-toggle-btn.active {

    background: var(--bg-card);

    color: var(--primary-color);

    box-shadow: var(--shadow-sm);

}



.view-toggle-btn:hover:not(.active) {

    background: rgba(255, 255, 255, 0.5);

    color: var(--primary-color);

}



/* Customer Cards Grid */

.customers-grid-container {

    display: grid;

    grid-template-columns: repeat(auto-fill, minmax(270px, 1fr));

    gap: 14px;

    margin-top: 16px;

}



.customer-card-item {

    background: var(--bg-card);

    border: 1px solid var(--border-color);

    border-radius: var(--radius-md);

    padding: 14px;

    display: flex;

    flex-direction: column;

    justify-content: space-between;

    transition: var(--transition);

    position: relative;

    overflow: hidden;

    cursor: pointer;

}



.customer-card-delete-btn {

    position: absolute;

    top: 10px;

    left: 10px;

    background: rgba(239, 68, 68, 0.1);

    color: #ef4444;

    border: 1px solid rgba(239, 68, 68, 0.2);

    width: 22px;

    height: 22px;

    border-radius: 50%;

    display: flex;

    align-items: center;

    justify-content: center;

    cursor: pointer;

    transition: var(--transition);

    font-size: 0.72rem;

    z-index: 10;

}



.customer-card-delete-btn:hover {

    background: #ef4444 !important;

    color: #ffffff !important;

    border-color: #ef4444 !important;

    transform: scale(1.1);

}



.customer-card-item:hover {

    transform: translateY(-3px);

}



.customer-card-item.verified {

    background: linear-gradient(135deg, var(--row-2-bg-start) 0%, var(--row-2-bg-end) 100%) !important;

    border: 1px solid var(--row-2-border) !important;

    border-right: 5px solid var(--row-2-border-right) !important;

    box-shadow: 0 6px 20px -2px var(--row-2-shadow-color), 0 3px 8px -1px rgba(0, 0, 0, 0.05) !important;

}



.customer-card-item.verified:hover {

    box-shadow: 0 10px 25px -2px var(--row-2-shadow-color), 0 5px 12px -1px rgba(0, 0, 0, 0.08) !important;

}



.customer-card-item.verified .customer-card-name {

    color: var(--row-2-title) !important;

}



.customer-card-item.verified .customer-card-id {

    background: rgba(255, 255, 255, 0.6) !important;

    color: var(--row-2-title) !important;

    border: 1px solid var(--row-2-border) !important;

}



.customer-card-item.verified .customer-card-info-row {

    color: var(--row-2-title) !important;

}



.customer-card-item.verified .customer-card-info-row i {

    color: var(--row-2-border-right) !important;

}



.customer-card-item.verified .customer-card-info-label {

    color: rgba(6, 78, 59, 0.7) !important;

}



.customer-card-item.verified .customer-card-info-value {

    color: var(--row-2-value) !important;

}



.customer-card-item.verified .customer-card-footer {

    border-top: 1px solid rgba(6, 78, 59, 0.15) !important;

}



.customer-card-item.temporary {

    background: linear-gradient(135deg, var(--row-3-bg-start) 0%, var(--row-3-bg-end) 100%) !important;

    border: 1px solid var(--row-3-border) !important;

    border-right: 5px solid var(--row-3-border-right) !important;

    box-shadow: 0 6px 20px -2px var(--row-3-shadow-color), 0 3px 8px -1px rgba(0, 0, 0, 0.05) !important;

}



.customer-card-item.temporary:hover {

    box-shadow: 0 10px 25px -2px var(--row-3-shadow-color), 0 5px 12px -1px rgba(0, 0, 0, 0.08) !important;

}



.customer-card-item.temporary .customer-card-name {

    color: var(--row-3-title) !important;

}



.customer-card-item.temporary .customer-card-id {

    background: rgba(255, 255, 255, 0.6) !important;

    color: var(--row-3-title) !important;

    border: 1px solid var(--row-3-border) !important;

}



.customer-card-item.temporary .customer-card-info-row {

    color: var(--row-3-title) !important;

}



.customer-card-item.temporary .customer-card-info-row i {

    color: var(--row-3-border-right) !important;

}



.customer-card-item.temporary .customer-card-info-label {

    color: rgba(120, 53, 15, 0.7) !important;

}



.customer-card-item.temporary .customer-card-info-value {

    color: var(--row-3-value) !important;

}



.customer-card-item.temporary .customer-card-footer {

    border-top: 1px solid rgba(120, 53, 15, 0.15) !important;

}



.customer-card-header {

    display: flex;

    justify-content: space-between;

    align-items: center;

    margin-bottom: 10px;

}



.customer-card-id {

    font-size: 0.72rem;

    font-weight: 800;

    color: var(--primary-color);

    background: #eff6ff;

    padding: 2px 6px;

    border-radius: 4px;

    border: 1px solid #bfdbfe;

}



.customer-card-name {

    font-size: 0.95rem;

    font-weight: bold;

    color: var(--text-main);

    margin: 4px 0 8px 0;

    line-height: 1.4;

}



.customer-card-status {

    margin-top: 0;

}



/* Ensure status badge inside card is compact */

.customer-card-status .badge {

    font-size: 0.75rem !important;

    padding: 2px 8px !important;

}



.customer-card-body {

    display: flex;

    flex-direction: column;

    gap: 6px;

    margin-bottom: 14px;

}



.customer-card-info-row {

    display: flex;

    align-items: center;

    gap: 8px;

    font-size: 0.8rem;

    color: var(--text-main);

}



.customer-card-info-row i {

    width: 16px;

    color: var(--primary-color);

    text-align: center;

    font-size: 0.8rem;

}



.customer-card-info-label {

    color: var(--text-muted);

    min-width: 75px;

}



.customer-card-info-value {

    font-weight: 600;

}



.customer-card-footer {

    display: flex;

    justify-content: flex-end;

    gap: 6px;

    border-top: 1px solid var(--border-color);

    padding-top: 10px;

    margin-top: auto;

}



/* Make action buttons in card smaller and more professional */

.customer-card-footer .btn {

    padding: 4px 10px !important;

    font-size: 0.76rem !important;

    border-radius: 6px !important;

}



/* ==============================================================

   --- UNIFIED SALES CRM CARDS & GRIDS (Calls, Visits, Res, Sales) ---

   ============================================================= */

.calls-grid-container,

.visits-grid-container,

.reservations-grid-container,

.cancelled-reservations-grid-container,

.converted-reservations-grid-container,

.sales-grid-container,

.contracts-grid-container {

    display: grid;

    grid-template-columns: repeat(auto-fill, minmax(235px, 1fr));

    gap: 10px 12px;

    margin-top: 12px;

}



.sales-crm-card {

    background: var(--bg-card, #ffffff);

    border: 1px solid var(--border-color, #e2e8f0);

    border-radius: 8px;

    padding: 9px 12px;

    display: flex;

    flex-direction: column;

    justify-content: space-between;

    transition: transform 0.15s ease, box-shadow 0.15s ease, border-color 0.15s ease;

    position: relative;

    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.04);

    overflow: visible;

}



.sales-crm-card > * {

    position: relative;

    z-index: 1;

}



.sales-crm-card:hover {

    transform: translateY(-2px);

    box-shadow: 0 6px 16px -2px rgba(0, 0, 0, 0.08);

    border-color: #38bdf8;

}



.sales-crm-card .customer-card-delete-btn {

    top: 6px !important;

    left: 6px !important;

    width: 20px !important;

    height: 20px !important;

    font-size: 0.65rem !important;

}



.sales-crm-card-header {

    display: flex;

    justify-content: space-between;

    align-items: center;

    margin-bottom: 5px;

}



.sales-crm-card-id {

    font-size: 0.72rem;

    font-weight: 800;

    color: var(--primary-color, #0284c7);

    background: #eff6ff;

    padding: 1px 6px;

    border-radius: 4px;

    border: 1px solid #bfdbfe;

    font-family: monospace;

}



.sales-crm-card-title {

    font-size: 0.88rem;

    font-weight: 700;

    color: var(--text-main, #0f172a);

    margin: 0 0 5px 0;

    line-height: 1.3;

    white-space: nowrap;

    overflow: hidden;

    text-overflow: ellipsis;

}



.sales-crm-card-body {

    display: flex;

    flex-direction: column;

    gap: 4px;

    margin-bottom: 6px;

}



.sales-crm-card-row {

    display: flex;

    align-items: center;

    gap: 6px;

    font-size: 0.78rem;

    color: var(--text-main, #334155);

}



.sales-crm-card-row i {

    width: 14px;

    color: var(--primary-color, #0284c7);

    text-align: center;

    font-size: 0.75rem;

}



.sales-crm-card-footer {

    display: flex;

    justify-content: flex-end;

    align-items: center;

    gap: 5px;

    border-top: 1px solid var(--border-color, #f1f5f9);

    padding-top: 5px;

    margin-top: auto;

}



.sales-crm-card-footer .btn {

    padding: 2px 7px !important;

    font-size: 0.72rem !important;

    border-radius: 4px !important;

}



.sales-crm-card.card-converted {

    border-right: 5px solid #10b981 !important;

    background: linear-gradient(135deg, rgba(16, 185, 129, 0.04) 0%, rgba(255, 255, 255, 1) 100%);

}



.sales-crm-card.card-edited {

    border-right: 5px solid #f59e0b !important;

    background: linear-gradient(135deg, rgba(245, 158, 11, 0.04) 0%, rgba(255, 255, 255, 1) 100%);

}



.sales-crm-card.card-cancelled {

    border-right: 5px solid #ef4444 !important;

    background: linear-gradient(135deg, rgba(239, 68, 68, 0.04) 0%, rgba(255, 255, 255, 1) 100%);

}



.sales-crm-card.card-transferred {

    border-right: 5px solid #7c3aed !important;

    background: linear-gradient(135deg, rgba(124, 58, 237, 0.04) 0%, rgba(255, 255, 255, 1) 100%);

}



.sales-crm-card.card-confirmed {

    border-right: 5px solid #10b981 !important;

    background: linear-gradient(135deg, rgba(16, 185, 129, 0.05) 0%, rgba(255, 255, 255, 1) 100%);

}



/* --- Thematic Domain Signatures (الدلالات الشكلية للبطاقات) --- */

/* 1. بطاقة الاتصالات (Call Card) */

.call-card-item {

    border-top: 3px solid #0284c7 !important;

}

.call-card-item::before {

    content: "\f590"; /* fa-headset */

    font-family: "Font Awesome 6 Free";

    font-weight: 900;

    position: absolute;

    bottom: -10px;

    left: 8px;

    font-size: 4.2rem;

    color: #0284c7;

    opacity: 0.05;

    pointer-events: none;

    z-index: 0;

    line-height: 1;

}

.call-card-item .sales-crm-card-id {

    color: #0284c7;

    background: #eff6ff;

    border-color: #bfdbfe;

}



/* 2. بطاقة الزيارات (Visit Card) */

.visit-card-item {

    border-top: 3px solid #f59e0b !important;

}

.visit-card-item::before {

    content: "\f68c"; /* fa-building-user */

    font-family: "Font Awesome 6 Free";

    font-weight: 900;

    position: absolute;

    bottom: -10px;

    left: 8px;

    font-size: 4.2rem;

    color: #f59e0b;

    opacity: 0.05;

    pointer-events: none;

    z-index: 0;

    line-height: 1;

}

.visit-card-item .sales-crm-card-id {

    color: #d97706;

    background: #fffbeb;

    border-color: #fde68a;

}



/* 3. بطاقة الحجوزات (Reservation Card) */

.reservation-card-item {

    border-top: 3px solid #7c3aed !important;

}

.reservation-card-item::before {

    content: "\f02e"; /* fa-bookmark */

    font-family: "Font Awesome 6 Free";

    font-weight: 900;

    position: absolute;

    bottom: -8px;

    left: 10px;

    font-size: 4rem;

    color: #7c3aed;

    opacity: 0.05;

    pointer-events: none;

    z-index: 0;

    line-height: 1;

}

.reservation-card-item .sales-crm-card-id {

    color: #7c3aed;

    background: #f5f3ff;

    border-color: #ddd6fe;

}



/* 3b. بطاقة الحجوزات الملغاة (Cancelled Reservation Card) */

.cancelled-reservation-card-item {

    border-top: 3px solid #ef4444 !important;

}

.cancelled-reservation-card-item::before {

    content: "\f273"; /* fa-calendar-xmark */

    font-family: "Font Awesome 6 Free";

    font-weight: 900;

    position: absolute;

    bottom: -8px;

    left: 10px;

    font-size: 4rem;

    color: #ef4444;

    opacity: 0.05;

    pointer-events: none;

    z-index: 0;

    line-height: 1;

}

.cancelled-reservation-card-item .sales-crm-card-id {

    color: #dc2626;

    background: #fef2f2;

    border-color: #fecaca;

}



/* 3c. بطاقة الحجوزات المتحولة لبيع (Converted Reservation Card) */

.converted-reservation-card-item {

    border-top: 3px solid #8b5cf6 !important;

}

.converted-reservation-card-item::before {

    content: "\f0ec"; /* fa-arrow-right-arrow-left */

    font-family: "Font Awesome 6 Free";

    font-weight: 900;

    position: absolute;

    bottom: -8px;

    left: 10px;

    font-size: 4rem;

    color: #8b5cf6;

    opacity: 0.05;

    pointer-events: none;

    z-index: 0;

    line-height: 1;

}

.converted-reservation-card-item .sales-crm-card-id {

    color: #7c3aed;

    background: #f5f3ff;

    border-color: #ddd6fe;

}



/* 4. بطاقة المبيعات والعقود (Sale Card) */

.sale-card-item {

    border-top: 3px solid #10b981 !important;

}

.sale-card-item::before {

    content: "\f084"; /* fa-key */

    font-family: "Font Awesome 6 Free";

    font-weight: 900;

    position: absolute;

    bottom: -8px;

    left: 10px;

    font-size: 4rem;

    color: #10b981;

    opacity: 0.05;

    pointer-events: none;

    z-index: 0;

    line-height: 1;

}

.sale-card-item .sales-crm-card-id {

    color: #059669;

    background: #f0fdf4;

    border-color: #bbf7d0;

}



/* 5. بطاقة العقود الرسمية (Contract Card) */

.contract-card-item {

    border-top: 3px solid #4f46e5 !important;

}

.contract-card-item::before {

    content: "\f573"; /* fa-file-signature */

    font-family: "Font Awesome 6 Free";

    font-weight: 900;

    position: absolute;

    bottom: -8px;

    left: 10px;

    font-size: 4rem;

    color: #4f46e5;

    opacity: 0.05;

    pointer-events: none;

    z-index: 0;

    line-height: 1;

}

.contract-card-item .sales-crm-card-id {

    color: #4338ca;

    background: #eef2ff;

    border-color: #c7d2fe;

}



/* ==============================================================

   --- INTERNAL COMMUNICATIONS & OFFICIAL LETTERS THEME & CSS ---

   ============================================================= */



/* Sidebar Group: Approvals & Correspondence Frame */

.sidebar-group-frame.approvals-comm-theme {

    background: rgba(6, 182, 212, 0.08) !important; /* Premium subtle cyan-teal background */

    border: 2px solid rgba(6, 182, 212, 0.45) !important; /* Sharp cyan border */

    box-shadow: 0 4px 20px rgba(6, 182, 212, 0.15); /* Glowing cyan drop shadow */

}

.sidebar-group-frame.approvals-comm-theme .sidebar-group-title {

    color: #e0f7fa !important; /* Soft cyan title */

    font-size: 0.8rem !important; /* Unified single-line size */

    white-space: nowrap !important;

    letter-spacing: normal !important;

    border-bottom: 1px solid rgba(6, 182, 212, 0.25);

    padding-bottom: 6px;

    margin-bottom: 10px;

    text-shadow: 0 0 8px rgba(6, 182, 212, 0.3);

}

.sidebar-group-frame.approvals-comm-theme li {

    color: #e0f2fe !important; /* Extremely readable light cyan-white text */

}

.sidebar-group-frame.approvals-comm-theme li:hover {

    background: rgba(6, 182, 212, 0.22) !important;

    color: #ffffff !important;

}

.sidebar-group-frame.approvals-comm-theme li.active {

    background: linear-gradient(90deg, #0891b2 0%, #06b6d4 100%) !important;

    color: #ffffff !important;

    box-shadow: 0 4px 15px rgba(6, 182, 212, 0.35) !important;

}



/* Chat Module Layout Styles */

.comm-chat-container {

    display: flex;

    height: 620px;

    background: var(--bg-card, #ffffff);

    border: 1px solid var(--border-color, #e2e8f0);

    border-radius: 12px;

    overflow: hidden;

    box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.05);

}



.comm-chat-sidebar {

    width: 290px;

    background: var(--bg-sidebar, #f8fafc);

    border-left: 1px solid var(--border-color, #e2e8f0);

    display: flex;

    flex-direction: column;

    height: 100%;

}



.comm-sidebar-header {

    padding: 15px;

    border-bottom: 1px solid var(--border-color, #e2e8f0);

}



.comm-sidebar-list {

    flex: 1;

    overflow-y: auto;

    padding: 12px;

}



.comm-list-section h4 {

    font-size: 0.78rem;

    font-weight: 800;

    text-transform: uppercase;

    color: var(--text-muted, #64748b);

    margin: 0 0 8px 0;

    padding-right: 5px;

    letter-spacing: 0.5px;

}



/* Chat Sidebar Item */

.comm-room-item {

    display: flex;

    align-items: center;

    gap: 12px;

    padding: 10px 12px;

    border-radius: 8px;

    cursor: pointer;

    margin-bottom: 4px;

    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);

}

.comm-room-item:hover {

    background: var(--hover-color, #f1f5f9);

}

.comm-room-item.active {

    background: var(--primary-light, #e0f2fe);

    color: var(--primary-color, #0f172a);

    font-weight: 700;

}



.comm-room-icon {

    font-size: 1.1rem;

    color: var(--primary-color, #3b82f6);

    opacity: 0.75;

}



.comm-room-info {

    display: flex;

    flex-direction: column;

    overflow: hidden;

    flex: 1;

}

.comm-room-name {

    font-size: 0.88rem;

    white-space: nowrap;

    text-overflow: ellipsis;

    overflow: hidden;

}

.comm-room-sub {

    font-size: 0.72rem;

    color: var(--text-muted, #64748b);

    white-space: nowrap;

    text-overflow: ellipsis;

    overflow: hidden;

}



.comm-user-avatar {

    width: 34px;

    height: 34px;

    border-radius: 50%;

    background: linear-gradient(135deg, var(--primary-color, #3b82f6) 0%, #1e40af 100%);

    color: #ffffff;

    display: flex;

    align-items: center;

    justify-content: center;

    font-weight: bold;

    font-size: 0.95rem;

    flex-shrink: 0;

}



/* Chat Main Workspace */

.comm-chat-area {

    flex: 1;

    display: flex;

    flex-direction: column;

    height: 100%;

    background: var(--bg-chat, #ffffff);

}



.comm-welcome-screen {

    flex: 1;

    display: flex;

    flex-direction: column;

    align-items: center;

    justify-content: center;

    text-align: center;

    padding: 40px;

    color: var(--text-muted, #64748b);

}

.comm-welcome-screen i {

    font-size: 4rem;

    margin-bottom: 20px;

    background: linear-gradient(135deg, var(--primary-color, #3b82f6) 0%, #1e40af 100%);

    -webkit-background-clip: text;

    -webkit-text-fill-color: transparent;

    opacity: 0.85;

}

.comm-welcome-screen h3 {

    font-size: 1.35rem;

    color: var(--text-title, #0f172a);

    margin-bottom: 10px;

    font-weight: 800;

}

.comm-welcome-screen p {

    font-size: 0.92rem;

    max-width: 420px;

    line-height: 1.6;

}



.comm-chat-main-interface {

    flex: 1;

    display: flex;

    flex-direction: column;

    height: 100%;

    overflow: hidden;

}



.comm-chat-header {

    padding: 15px 20px;

    border-bottom: 1px solid var(--border-color, #e2e8f0);

    display: flex;

    justify-content: space-between;

    align-items: center;

    background: var(--bg-card, #ffffff);

}

.comm-header-info h4 {

    margin: 0;

    font-size: 1rem;

    font-weight: 800;

    color: var(--text-title, #0f172a);

}

.comm-header-info span {

    font-size: 0.78rem;

}



/* Chat Messages Thread */

.comm-chat-messages {

    flex: 1;

    overflow-y: auto;

    padding: 20px;

    display: flex;

    flex-direction: column;

    gap: 15px;

    background: #f8fafc;

}



/* Messages Bubbles */

.comm-message-bubble-wrapper {

    display: flex;

    flex-direction: column;

    max-width: 75%;

}

.comm-message-bubble-wrapper.sent {

    align-self: flex-end;

    align-items: flex-end;

}

.comm-message-bubble-wrapper.received {

    align-self: flex-start;

    align-items: flex-start;

}



.comm-message-sender-name {

    font-size: 0.72rem;

    font-weight: 700;

    color: #64748b;

    margin-bottom: 3px;

    padding: 0 4px;

}



.comm-message-bubble {

    padding: 10px 15px;

    border-radius: 12px;

    font-size: 0.92rem;

    line-height: 1.5;

    position: relative;

    box-shadow: 0 1px 3px rgba(0,0,0,0.05);

}

.sent .comm-message-bubble {

    background: linear-gradient(135deg, var(--primary-color, #3b82f6) 0%, #1d4ed8 100%);

    color: #ffffff;

    border-bottom-right-radius: 2px;

}

.received .comm-message-bubble {

    background: var(--bg-card, #ffffff);

    color: #1e293b;

    border-bottom-left-radius: 2px;

    border: 1px solid #e2e8f0;

}



.comm-message-time {

    font-size: 0.65rem;

    margin-top: 5px;

    text-align: left;

    opacity: 0.75;

}

.sent .comm-message-time {

    color: #e0f2fe;

}

.received .comm-message-time {

    color: #64748b;

}



/* Chat Input bar */

.comm-chat-input-bar {

    padding: 15px 20px;

    border-top: 1px solid var(--border-color, #e2e8f0);

    background: var(--bg-card, #ffffff);

}



/* ==========================================

   Contract Folders View Styles

   ========================================== */

.contracts-folders-container {

    display: grid;

    grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));

    gap: 24px;

    margin-top: 16px;

    margin-bottom: 24px;

    direction: rtl;

}



.contract-folder-card {

    background: #fdfcf7; /* Ivory/paper background */

    border: 2px solid #e7e3d4;

    border-radius: 12px;

    position: relative;

    padding: 24px 20px 20px;

    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.05), inset 0 0 40px rgba(231, 227, 212, 0.2);

    cursor: pointer;

    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);

    font-family: 'Cairo', sans-serif;

    overflow: hidden;

    display: flex;

    flex-direction: column;

    justify-content: flex-start;

}



.contract-folder-card:hover {

    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.08), inset 0 0 40px rgba(231, 227, 212, 0.3);

    border-color: #d1ccb9;

}



.contract-folder-tab {

    position: absolute;

    top: 0;

    right: 20px;

    background: #e7e3d4;

    color: #5c5847;

    font-size: 0.75rem;

    font-weight: bold;

    padding: 4px 12px 6px;

    border-bottom-left-radius: 6px;

    border-bottom-right-radius: 6px;

    border-top: none;

    box-shadow: 0 2px 4px rgba(0,0,0,0.05);

}



.contract-folder-title {

    font-size: 0.95rem;

    font-weight: 800;

    color: #4b4533;

    margin-top: 12px;

    margin-bottom: 8px;

    border-bottom: 1px dashed #e7e3d4;

    padding-bottom: 8px;

    display: flex;

    align-items: center;

    gap: 8px;

}



.contract-folder-customer {

    font-size: 1.15rem;

    font-weight: 800;

    color: #1e293b;

    margin-bottom: 12px;

}



.contract-folder-meta {

    display: flex;

    flex-direction: column;

    gap: 8px;

    color: #64748b;

    font-size: 0.88rem;

}



.contract-folder-meta-row {

    display: flex;

    align-items: center;

    gap: 8px;

}



.contract-folder-meta-row i {

    color: #a19c86;

    width: 18px;

    text-align: center;

}



/* Folder card specific styles */



.contract-folder-actions {

    display: flex;

    gap: 8px;

    flex-wrap: wrap;

    justify-content: center;

    margin-top: 16px;

    padding-top: 12px;

    border-top: 1px solid #f1f5f9;

}



.contract-folder-stamp {

    position: absolute;

    bottom: 24px;

    left: 20px;

    border: 2px dashed;

    border-radius: 6px;

    padding: 4px 8px;

    font-size: 0.75rem;

    font-weight: 900;

    text-transform: uppercase;

    transform: rotate(-10deg);

    opacity: 0.7;

    pointer-events: none;

}

.contract-folder-stamp.active {

    color: #16a34a;

    border-color: #16a34a;

}

.contract-folder-stamp.resale {

    color: #2563eb;

    border-color: #2563eb;

    background: rgba(37, 99, 235, 0.05);

}

.contract-folder-stamp.transferred {

    color: #7c3aed;

    border-color: #7c3aed;

    background: rgba(124, 58, 237, 0.05);

}

.contract-folder-stamp.cancelled {

    color: #dc2626;

    border-color: #dc2626;

    background: rgba(220, 38, 38, 0.05);

}



/* Card Category Tints & Status Styling */

.contract-folder-card.cat-active {

    background: #f6fdf9;

    border: 2px solid #d1fae5;

    border-right: 5px solid #10b981;

}

.contract-folder-card.cat-active .contract-folder-tab {

    background: #d1fae5;

    color: #065f46;

}

.contract-folder-card.cat-active:hover {

    border-color: #10b981;

    box-shadow: 0 8px 16px rgba(16, 185, 129, 0.12);

}



.contract-folder-card.cat-cancelled {

    background: #fff5f5;

    border: 2px solid #fee2e2;

    border-right: 5px solid #ef4444;

}

.contract-folder-card.cat-cancelled .contract-folder-tab {

    background: #fee2e2;

    color: #991b1b;

}

.contract-folder-card.cat-cancelled:hover {

    border-color: #ef4444;

    box-shadow: 0 8px 16px rgba(239, 68, 68, 0.12);

}



.contract-folder-card.cat-transferred {

    background: #faf8ff;

    border: 2px solid #e0d9ff;

    border-right: 5px solid #8b5cf6;

}

.contract-folder-card.cat-transferred .contract-folder-tab {

    background: #e0d9ff;

    color: #5b21b6;

}

.contract-folder-card.cat-transferred:hover {

    border-color: #8b5cf6;

    box-shadow: 0 8px 16px rgba(139, 92, 246, 0.12);

}



.contract-folder-card.cat-resale {

    background: #fffdf5;

    border: 2px solid #fef3c7;

    border-right: 5px solid #f59e0b;

}

.contract-folder-card.cat-resale .contract-folder-tab {

    background: #fef3c7;

    color: #92400e;

}

.contract-folder-card.cat-resale:hover {

    border-color: #f59e0b;

    box-shadow: 0 8px 16px rgba(245, 158, 11, 0.12);

}



.contract-folder-card.cat-pending-cancellation {

    background: #fffdf5;

    border: 2px solid #fef3c7;

    border-right: 5px solid #f59e0b;

}

.contract-folder-card.cat-pending-cancellation .contract-folder-tab {

    background: #fef3c7;

    color: #92400e;

}

.contract-folder-card.cat-pending-cancellation:hover {

    border-color: #f59e0b;

    box-shadow: 0 8px 16px rgba(245, 158, 11, 0.15);

}



/* تنسيق خاص لجدول قيود صندوق المبيعات ودفتر اليومية لتفعيل السحب والتحريك الأفقي */

#table-financial-vouchers,

#table-financial-ledger {

    width: max-content !important;

    min-width: 100% !important;

}

/* التنسيق الافتراضي لخلايا جدول القيود وجدول اليومية: التفاف طبيعي وحجم مدمج وأنيق */

#table-financial-vouchers th,

#table-financial-vouchers td,

#table-financial-ledger th,

#table-financial-ledger td {

    white-space: normal !important;

    padding: 8px 10px !important;

    font-size: 0.8rem !important;

}



/* منع الالتفاف فقط في الأعمدة الرقمية والرموز وحالة السند لتظهر في سطر واحد */

#table-financial-vouchers td:nth-child(1), /* رقم السند */

#table-financial-vouchers td:nth-child(2), /* رقم الارتباط */

#table-financial-vouchers td:nth-child(5), /* رقم الوحدة */

#table-financial-vouchers td:nth-child(6), /* المبلغ الصافي */

#table-financial-vouchers td:nth-child(7), /* الحالة */

#table-financial-vouchers td:nth-child(8)  /* الوصل المرفوع */ {

    white-space: nowrap !important;

}



/* تحديد أبعاد عمود النوع والملاحظات ليكون مدمجاً ويسمح بالالتفاف */

#table-financial-vouchers td:nth-child(3) {

    max-width: 160px !important;

    min-width: 120px !important;

}



/* تحديد أبعاد عمود اسم الزبون ليكون مدمجاً ويسمح بالالتفاف */

#table-financial-vouchers td:nth-child(4) {

    max-width: 150px !important;

    min-width: 120px !important;

}



/* تحديد أبعاد عمود الإجراءات ليكون مدمجاً ويسمح بالالتفاف للأزرار */

#table-financial-vouchers th:last-child,

#table-financial-vouchers td:last-child {

    max-width: 220px !important;

    min-width: 180px !important;

}



/* ========================================================

   📊 GLOBAL STANDARDIZED TABLE CONTAINERS

   ======================================================== */

.table-container, .table-responsive {

    display: block;

    width: 100%;

    max-width: 100%;

    overflow-x: auto;

    -webkit-overflow-scrolling: touch;

    position: relative;

    border-radius: var(--radius-md, 8px);

    margin-bottom: 15px;

}



/* ========================================================

   📱 MOBILE STABILIZATION & ZERO-WOBBLE ENGINE

   ======================================================== */

@media screen and (max-width: 768px) {

    html, body {

        overflow-x: hidden !important;

        width: 100% !important;

        max-width: 100vw !important;

        position: relative !important;

        touch-action: pan-y pinch-zoom !important;

        -webkit-text-size-adjust: 100% !important;

    }



    .app-container {

        overflow-x: hidden !important;

        width: 100% !important;

        max-width: 100vw !important;

        flex-direction: column !important;

    }



    .main-content {

        overflow-x: hidden !important;

        width: 100% !important;

        max-width: 100vw !important;

        padding: 12px 10px !important;

        box-sizing: border-box !important;

    }



    /* Prevent wide cards and containers from overflowing the screen */

    .tab-section,

    .sub-tab-section,

    .card,

    .table-card,

    .stats-container,

    .grid-container {

        max-width: 100% !important;

        box-sizing: border-box !important;

    }



    /* Sub-tabs header scroll horizontally without stretching screen */

    .sub-tabs-container, #dashboard-subtabs {

        display: flex !important;

        flex-wrap: nowrap !important;

        overflow-x: auto !important;

        -webkit-overflow-scrolling: touch !important;

        padding-bottom: 6px !important;

        gap: 8px !important;

        max-width: 100% !important;

    }



    .sub-tab-btn, .dash-tab-btn {

        flex-shrink: 0 !important;

        white-space: nowrap !important;

        font-size: 0.84rem !important;

        padding: 8px 12px !important;

    }



    /* Make all tables safely contained within their cards with smooth touch-drag */

    .table-responsive,

    .table-container {

        width: 100% !important;

        max-width: 100% !important;

        overflow-x: auto !important;

        -webkit-overflow-scrolling: touch !important;

        display: block !important;

        margin-bottom: 12px !important;

    }

}



/* ==========================================================================

   WebSockets Real-Time Live Sync & Toast Notifications

   ========================================================================== */



.ws-pulse-dot {

    width: 8px;

    height: 8px;

    border-radius: 50%;

    display: inline-block;

    box-shadow: 0 0 0 0 rgba(16, 185, 129, 0.7);

    animation: wsPulse 2s infinite cubic-bezier(0.66, 0, 0, 1);

}



@keyframes wsPulse {

    0% {

        box-shadow: 0 0 0 0 rgba(16, 185, 129, 0.7);

    }

    70% {

        box-shadow: 0 0 0 8px rgba(16, 185, 129, 0);

    }

    100% {

        box-shadow: 0 0 0 0 rgba(16, 185, 129, 0);

    }

}



@keyframes slideInToast {

    from {

        opacity: 0;

        transform: translateY(-20px) scale(0.95);

    }

    to {

        opacity: 1;

        transform: translateY(0) scale(1);

    }

}



@keyframes fadeOutToast {

    from {

        opacity: 1;

        transform: translateY(0) scale(1);

    }

    to {

        opacity: 0;

        transform: translateY(-20px) scale(0.95);

    }

}



.unit-card-live-flash {

    animation: liveUnitFlash 1.5s cubic-bezier(0.16, 1, 0.3, 1) forwards;

}



@keyframes liveUnitFlash {

    0% {

        transform: scale(1.08);

        box-shadow: 0 0 25px rgba(56, 189, 248, 0.9), 0 0 10px rgba(56, 189, 248, 0.6);

        border-color: #38bdf8 !important;

    }

    50% {

        transform: scale(1.04);

        box-shadow: 0 0 15px rgba(56, 189, 248, 0.5);

    }

    100% {

        transform: scale(1);

        box-shadow: var(--shadow-sm);

    }

}



@keyframes pulseViewing {

    0%, 100% {

        opacity: 1;

        transform: scale(1);

    }

    50% {

        opacity: 0.85;

        transform: scale(1.04);

    }

}











/* ==========================================================================

   👑 ROYAL TASKBAR ACTION BUTTONS TRIO (Unified Design & Animations - S2 Standard)

   ========================================================================== */



/* 2. 🖨️ زر طباعة السجل (Royal Ocean Blue) */

.btn-taskbar-print {

    background: linear-gradient(135deg, #0c4a6e 0%, #0369a1 100%) !important;

    color: #ffffff !important;

    border: 1.5px solid #38bdf8 !important;

    font-weight: 800 !important;

    border-radius: 8px !important;

    font-size: 0.82rem !important;

    padding: 5px 14px !important;

    display: inline-flex !important;

    align-items: center !important;

    gap: 7px !important;

    cursor: pointer !important;

    transition: all 0.22s ease-in-out !important;

    box-shadow: 0 2px 6px rgba(3, 105, 161, 0.3) !important;

}

.btn-taskbar-print:hover {

    background: linear-gradient(135deg, #0369a1 0%, #0284c7 100%) !important;

    border-color: #7dd3fc !important;

    color: #ffffff !important;

    transform: translateY(-1px);

    box-shadow: 0 4px 12px rgba(3, 105, 161, 0.45) !important;

}

.btn-taskbar-print i {

    color: #7dd3fc !important;

}



/* 3. 📊 زر تصدير إكسل (Royal Emerald Green) */

.btn-taskbar-export,

.btn-taskbar-export-v2 {

    background: linear-gradient(135deg, #064e3b 0%, #047857 100%) !important;

    color: #ffffff !important;

    border: 1.5px solid #34d399 !important;

    font-weight: 800 !important;

    border-radius: 8px !important;

    font-size: 0.82rem !important;

    padding: 5px 14px !important;

    display: inline-flex !important;

    align-items: center !important;

    gap: 7px !important;

    cursor: pointer !important;

    transition: all 0.22s ease-in-out !important;

    box-shadow: 0 2px 6px rgba(4, 120, 87, 0.3) !important;

}

.btn-taskbar-export:hover,

.btn-taskbar-export-v2:hover {

    background: linear-gradient(135deg, #047857 0%, #059669 100%) !important;

    border-color: #6ee7b7 !important;

    color: #ffffff !important;

    transform: translateY(-1px);

    box-shadow: 0 4px 12px rgba(4, 120, 87, 0.45) !important;

}

.btn-taskbar-export i,

.btn-taskbar-export-v2 i {

    color: #6ee7b7 !important;

}





/* BI Debt Aging Pagination Perfect Alignment */

#bi-debt-aging-pagination {

    display: flex !important;

    justify-content: space-between !important;

    align-items: center !important;

    margin-top: 16px !important;

    padding-top: 14px !important;

    border-top: 1px solid var(--border-color, #e2e8f0) !important;

    direction: rtl !important;

    width: 100% !important;

    flex-wrap: wrap !important;

    gap: 12px !important;

}



#bi-debt-aging-pagination .contracts-pagination-info {

    display: flex !important;

    align-items: center !important;

    gap: 14px !important;

    flex-wrap: wrap !important;

}



#bi-debt-aging-pagination .contracts-pagination-buttons {

    display: flex !important;

    align-items: center !important;

    gap: 6px !important;

    margin-right: auto !important;

}



/* ==========================================================================

   👑 UNIVERSAL ADAPTIVE VIEWPORT SCALE ENGINE (The 1536px Golden Standard)

   - Baseline: 1920px physical resolution / 1.25 Windows Display Scaling = 1536px.

   - Automatically adapts all laptops & displays to preserve identical visual density.

   ========================================================================== */

@media screen and (min-width: 1201px) and (max-width: 1535px) {

    body {

        zoom: 0.89; /* Exact 1366 / 1536 baseline */

    }

}

@media screen and (min-width: 992px) and (max-width: 1200px) {

    body {

        zoom: 0.78; /* Scaled down for smaller laptop viewports */

    }

}





/* ==========================================================================

   👑 THE ROYAL TRIAD TASKBAR STYLING & SHIMMER PULSE (From S2 Enterprise)

   ========================================================================== */

.btn-taskbar-refresh {

    background: linear-gradient(135deg, #312e81 0%, #4338ca 100%) !important;

    color: #ffffff !important;

    border: 1.5px solid #818cf8 !important;

    font-weight: 800 !important;

    border-radius: 8px !important;

    font-size: 0.82rem !important;

    padding: 5px 14px !important;

    display: inline-flex !important;

    align-items: center !important;

    gap: 7px !important;

    cursor: pointer !important;

    transition: all 0.22s ease-in-out !important;

    box-shadow: 0 2px 8px rgba(49, 46, 129, 0.35) !important;

}

.btn-taskbar-refresh:hover {

    background: linear-gradient(135deg, #3730a3 0%, #4f46e5 100%) !important;

    border-color: #a5b4fc !important;

    color: #ffffff !important;

    transform: translateY(-1px);

    box-shadow: 0 4px 14px rgba(79, 70, 229, 0.45) !important;

}

.btn-taskbar-refresh i {

    color: #c7d2fe !important;

    transition: transform 0.4s ease;

}

.btn-taskbar-refresh:hover i {

    transform: rotate(180deg);

}



@keyframes tableRefreshPulseAnim {

    0% {

        opacity: 1;

        filter: none;

    }

    30% {

        opacity: 0.32;

        filter: blur(0.5px);

    }

    100% {

        opacity: 1;

        filter: none;

    }

}

.table-refresh-pulse {

    animation: tableRefreshPulseAnim 0.38s cubic-bezier(0.4, 0, 0.2, 1) !important;

    pointer-events: none !important;

}



/* 🌟 Top-Right Unified Toast Container & Mobile Adaptation */

#global-toast-container {

    right: 24px !important;

    left: auto !important;

    transform: none !important;

}



@media (max-width: 600px) {

    #global-toast-container {

        top: 12px !important;

        right: 12px !important;

        left: 12px !important;

        width: auto !important;

        max-width: calc(100vw - 24px) !important;

    }

}



/* ==================== INSTALLMENTS TOOLBAR DATE GROUP STYLING ==================== */
.table-header-toolbar .installments-date-group {
    height: 36px !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 6px !important;
    padding: 0 10px !important;
    background: #ffffff !important;
    border: 1px solid #cbd5e1 !important;
    border-radius: 8px !important;
    box-sizing: border-box !important;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04) !important;
    transition: all 0.2s ease !important;
}

.table-header-toolbar .installments-date-group:focus-within {
    border-color: #0d2b45 !important;
    box-shadow: 0 0 0 2px rgba(13, 43, 69, 0.12) !important;
}

.table-header-toolbar .installments-date-group label {
    font-size: 0.8rem !important;
    font-weight: 700 !important;
    color: #475569 !important;
    margin: 0 !important;
    white-space: nowrap !important;
}

.table-header-toolbar .installments-date-group input[type="date"] {
    height: 26px !important;
    border: 1px solid #cbd5e1 !important;
    border-radius: 4px !important;
    padding: 0 6px !important;
    font-size: 0.8rem !important;
    color: #1e293b !important;
    background: #ffffff !important;
    font-family: inherit !important;
}

.table-header-toolbar .installments-date-group #btn-installments-clear-dates {
    font-size: 0.78rem !important;
    font-weight: 700 !important;
    height: 26px !important;
    padding: 0 8px !important;
    border-radius: 4px !important;
    background: #fee2e2 !important;
    color: #b91c1c !important;
    border: 1px solid #fecaca !important;
    cursor: pointer !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 4px !important;
    transition: all 0.2s ease !important;
}

.table-header-toolbar .installments-date-group #btn-installments-clear-dates:hover {
    background: #ef4444 !important;
    color: #ffffff !important;
    border-color: #ef4444 !important;
}


/* ==================== OPERATIONS SECTION CONTAINERS: UNIFIED ICE NAVY ==================== */
#tab-unit-handovers .table-card,
#tab-sales-installments .table-card,
#tab-loan-installments .table-card {
    background: #d8e5f3 !important; /* Ice Navy: #d8e5f3 */
    border: 1px solid #b8cde3 !important;
    border-radius: var(--radius-lg, 12px) !important;
    box-shadow: 0 4px 16px rgba(13, 43, 69, 0.06) !important;
    padding: 16px 20px !important;
    margin-top: 0 !important;
}

#tab-unit-handovers .table-container,
#tab-sales-installments .table-container,
#tab-loan-installments .table-container {
    background: #ffffff !important;
    border: 1px solid #c8d9eb !important;
    border-radius: 10px !important;
    overflow-x: auto !important;
    box-shadow: 0 2px 8px rgba(13, 43, 69, 0.05) !important;
}

#tab-unit-handovers .table,
#tab-sales-installments .table,
#tab-loan-installments .table {
    background: #ffffff !important;
}


/* ==================== CONTRACTS KPI HORIZONTAL ROW ==================== */
.contracts-report-grid {
    display: flex !important;
    flex-direction: row !important;
    align-items: stretch !important;
    width: 100% !important;
    gap: 12px !important;
    box-sizing: border-box !important;
}

.contracts-report-grid .report-card {
    flex: 1 1 0 !important;
    min-width: 0 !important;
}

/* ==================== SALARY FORMULA ACCORDION & CARDS ==================== */
.formula-accordion-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px 16px;
    background: #f8fafc;
    border-radius: 8px;
    cursor: pointer;
    border: 1px solid #b8cde3;
    transition: all 0.2s ease;
    user-select: none;
}
.formula-accordion-header:hover {
    background: #e0f2fe;
    border-color: #0d2b45;
}
.salary-summary-pill {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 12px;
    border-radius: 20px;
    font-size: 0.85rem;
    font-weight: 700;
    font-family: 'Cairo', sans-serif;
    border: 1px solid #e2e8f0;
}


/* ==========================================================================
   Center-align all table headers, cells and content for Financial Ledger and Sales Cash Box
   ========================================================================== */
#table-financial-ledger th,
#table-financial-ledger td,
#table-financial-vouchers th,
#table-financial-vouchers td {
    text-align: center !important;
    vertical-align: middle !important;
}

#table-financial-ledger td > div,
#table-financial-vouchers td > div {
    justify-content: center !important;
    text-align: center !important;
}

#table-financial-ledger td .badge,
#table-financial-vouchers td .badge {
    margin-left: auto !important;
    margin-right: auto !important;
}

#table-financial-ledger td small,
#table-financial-vouchers td small {
    text-align: center !important;
    margin-left: auto !important;
    margin-right: auto !important;
}


/* ============================================================== */
/* 🌐 GLOBAL ARABIC (CAIRO) SELECT & OPTION ANTI-CLIPPING RULE     */
/* يمنع قطع وتآكل الأحرف العربية بالقوائم المنسدلة من الأعلى والأسفل */
/* ============================================================== */
select,
select.form-control,
.form-group select,
.form-control select {
    line-height: 1.5 !important;
    font-family: 'Cairo', sans-serif !important;
    box-sizing: border-box !important;
}

select:not([multiple]) {
    min-height: 38px !important;
    padding-top: 5px !important;
    padding-bottom: 5px !important;
}

select option {
    font-family: 'Cairo', sans-serif !important;
    font-size: 0.92rem !important;
    line-height: 1.6 !important;
    padding: 8px 14px !important;
    margin: 2px 0 !important;
}

/* ============================================================== */
/* ✨ Luxury Capsule Filter (Dashboard Global Filter Bar)          */
/* ============================================================== */
.luxury-capsule-filter {
    background: #ffffff !important;
    border: 1.5px solid #cbd5e1 !important;
    border-radius: 12px !important;
    box-shadow: 0 2px 10px rgba(13, 43, 69, 0.08) !important;
    padding: 4px 10px !important;
    gap: 10px !important;
    transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1) !important;
}

.luxury-capsule-filter:hover {
    box-shadow: 0 4px 14px rgba(13, 43, 69, 0.12) !important;
    border-color: #94a3b8 !important;
}

.luxury-capsule-filter select {
    min-height: 33px !important;
    height: 33px !important;
    background-color: #f8fafc !important;
    border: 1.5px solid #cbd5e1 !important;
    border-radius: 8px !important;
    color: #0d2b45 !important;
    font-weight: 700 !important;
    font-size: 0.84rem !important;
    padding: 2px 10px !important;
    transition: all 0.2s ease !important;
    cursor: pointer !important;
}

.luxury-capsule-filter select:hover {
    background-color: #ffffff !important;
    border-color: #94a3b8 !important;
}

.luxury-capsule-filter select:focus {
    background-color: #ffffff !important;
    border-color: #0284c7 !important;
    box-shadow: 0 0 0 3px rgba(2, 132, 199, 0.15) !important;
    outline: none !important;
}

.luxury-capsule-filter .filter-chip-icon {
    width: 28px !important;
    height: 28px !important;
    border-radius: 7px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    font-size: 0.85rem !important;
    flex-shrink: 0 !important;
}

.luxury-capsule-filter .filter-chip-icon.project {
    background: #e0f2fe !important;
    color: #0284c7 !important;
}

.luxury-capsule-filter .filter-chip-icon.company {
    background: #fef3c7 !important;
    color: #d97706 !important;
}

.luxury-capsule-filter .filter-chip-label {
    margin: 0 !important;
    font-weight: 800 !important;
    color: #0d2b45 !important;
    font-size: 0.82rem !important;
    white-space: nowrap !important;
    font-family: 'Cairo', sans-serif !important;
}

.luxury-capsule-filter .filter-divider {
    display: inline-block !important;
    width: 1.5px !important;
    height: 22px !important;
    background: #e2e8f0 !important;
    margin: 0 4px !important;
}




/* Sidebar Group: Customer Portal Frame (Bottom of Sidebar) */
.sidebar-group-frame.portal-hub-theme {
    background: rgba(16, 185, 129, 0.05) !important;
    border: 1px solid rgba(16, 185, 129, 0.25) !important;
    border-right: 3px solid #10b981 !important;
}

.sidebar-group-frame.portal-hub-theme .sidebar-group-title {
    color: #6ee7b7 !important;
    font-size: 0.8rem !important;
    white-space: nowrap !important;
    border-bottom: 1px solid rgba(16, 185, 129, 0.2);
    padding-bottom: 6px;
    margin-bottom: 10px;
}

.sidebar-group-frame.portal-hub-theme li:hover {
    background: rgba(16, 185, 129, 0.15) !important;
    color: #ffffff !important;
}

.sidebar-group-frame.portal-hub-theme li.active {
    background: linear-gradient(90deg, #059669 0%, #10b981 100%) !important;
    color: #ffffff !important;
    box-shadow: 0 4px 15px rgba(16, 185, 129, 0.3) !important;
}