@import url('https://fonts.googleapis.com/css2?family=Cairo:wght@300;400;500;600;700;800&display=swap');

:root {
    /* ── El Mohandes Logo Palette ── */
    --em-navy:          #1e3a6e;   /* main logo navy */
    --em-navy-dark:     #132a52;   /* darker navy for hover/active */
    --em-navy-light:    #e8edf7;   /* light navy tint for backgrounds */
    --em-cyan:          #17b8d4;   /* "ATM CLEANING" banner cyan */
    --em-cyan-dark:     #0f96ae;   /* darker cyan */
    --em-cyan-light:    #e0f7fb;   /* light cyan tint */
    --em-red:           #e53935;   /* danger / delete */
    --em-red-dark:      #c62828;
    --em-red-light:     #fdecea;

    /* ── App Custom Tokens ── */
    --primary-color:    var(--em-navy);
    --primary-hover:    var(--em-navy-dark);
    --primary-light:    var(--em-navy-light);
    --secondary-color:  var(--em-cyan);
    --success-color:    #10b981;
    --warning-color:    #f59e0b;
    --danger-color:     var(--em-red);
    --bg-body:          #f0f3f8;
    --card-bg:          #ffffff;
    --text-main:        #0f172a;
    --text-muted:       #64748b;
    --border-color:     #cdd6e8;
    --radius-lg:        16px;
    --radius-md:        12px;
    --radius-sm:        8px;
    --shadow-sm:  0 1px 3px rgba(0,0,0,0.05), 0 1px 2px rgba(0,0,0,0.06);
    --shadow-md:  0 4px 6px -1px rgba(0,0,0,0.07), 0 2px 4px -1px rgba(0,0,0,0.04);
    --shadow-lg:  0 10px 15px -3px rgba(0,0,0,0.08), 0 4px 6px -2px rgba(0,0,0,0.03);

    /* ── Bootstrap 5 Variable Overrides ── */
    --bs-primary:           var(--em-navy);
    --bs-primary-rgb:       30, 58, 110;
    --bs-secondary:         var(--em-cyan);
    --bs-secondary-rgb:     23, 184, 212;
    --bs-success:           #10b981;
    --bs-success-rgb:       16, 185, 129;
    --bs-danger:            var(--em-red);
    --bs-danger-rgb:        229, 57, 53;
    --bs-warning:           #f59e0b;
    --bs-warning-rgb:       245, 158, 11;
    --bs-info:              var(--em-cyan);
    --bs-info-rgb:          23, 184, 212;
    --bs-link-color:        var(--em-navy);
    --bs-link-hover-color:  var(--em-navy-dark);
    --bs-border-radius:         var(--radius-md);
    --bs-border-radius-sm:      var(--radius-sm);
    --bs-border-radius-lg:      var(--radius-lg);
    --bs-border-color:          var(--border-color);
    --bs-body-bg:               var(--bg-body);
    --bs-body-color:            var(--text-main);
    --bs-body-font-family:      'Cairo', system-ui, -apple-system, sans-serif;
}

/* ── Bootstrap component fine-tuning ── */

/* Primary = navy */
.btn-primary            { background-color: var(--em-navy); border-color: var(--em-navy); }
.btn-primary:hover,
.btn-primary:focus      { background-color: var(--em-navy-dark); border-color: var(--em-navy-dark); }
.btn-outline-primary    { color: var(--em-navy); border-color: var(--em-navy); }
.btn-outline-primary:hover { background-color: var(--em-navy); border-color: var(--em-navy); color: #fff; }

/* Secondary / Info = cyan */
.btn-secondary, .btn-info { background-color: var(--em-cyan); border-color: var(--em-cyan); color: #fff; }
.btn-secondary:hover, .btn-info:hover { background-color: var(--em-cyan-dark); border-color: var(--em-cyan-dark); color: #fff; }
.btn-outline-secondary, .btn-outline-info { color: var(--em-cyan); border-color: var(--em-cyan); }
.btn-outline-secondary:hover, .btn-outline-info:hover { background-color: var(--em-cyan); color: #fff; }

/* Danger = red */
.btn-danger             { background-color: var(--em-red); border-color: var(--em-red); }
.btn-danger:hover       { background-color: var(--em-red-dark); border-color: var(--em-red-dark); }
.btn-outline-danger     { color: var(--em-red); border-color: var(--em-red); }
.btn-outline-danger:hover { background-color: var(--em-red); color: #fff; }

/* Badges */
.badge.bg-primary       { background-color: var(--em-navy) !important; }
.badge.bg-secondary,
.badge.bg-info          { background-color: var(--em-cyan) !important; color: #fff !important; }
.badge.bg-danger        { background-color: var(--em-red) !important; }

/* Text colours */
.text-primary           { color: var(--em-navy) !important; }
.text-secondary,
.text-info              { color: var(--em-cyan) !important; }
.text-danger            { color: var(--em-red) !important; }

/* Border colours */
.border-primary         { border-color: var(--em-navy) !important; }
.border-danger          { border-color: var(--em-red) !important; }
.border-4.border-primary { border-color: var(--em-navy) !important; }

/* Form focus ring */
.form-control:focus,
.form-select:focus      {
    border-color: var(--em-navy);
    box-shadow: 0 0 0 0.2rem rgba(30,58,110,.15);
}

/* Pagination active */
.page-link              { color: var(--em-navy); }
.page-link:hover        { color: var(--em-navy-dark); }
.page-item.active .page-link {
    background-color: var(--em-navy);
    border-color: var(--em-navy);
    color: #fff;
}

/* Nav tabs active */
.nav-tabs .nav-link.active {
    color: var(--em-navy);
    border-bottom-color: var(--em-navy);
}

/* Alerts */
.alert-primary  { background-color: var(--em-navy-light); border-color: var(--em-navy); color: var(--em-navy-dark); }
.alert-info     { background-color: var(--em-cyan-light);  border-color: var(--em-cyan);  color: var(--em-cyan-dark); }
.alert-danger   { background-color: var(--em-red-light);   border-color: var(--em-red);   color: var(--em-red-dark); }

/* Select2 theming */
.select2-container--default .select2-selection--single {
    border-color: var(--border-color);
    border-radius: var(--radius-md);
    height: calc(1.5em + 1.5rem + 2px);
    padding: 0.75rem 1rem;
}
.select2-container--default .select2-results__option--highlighted {
    background-color: var(--em-navy) !important;
}
.select2-container--default .select2-selection--single:focus,
.select2-container--default.select2-container--focus .select2-selection--single {
    border-color: var(--em-navy);
    box-shadow: 0 0 0 0.2rem rgba(30,58,110,.15);
    outline: none;
}



    /* ── App Custom Tokens ── */
    --primary-color:    var(--em-navy);
    --primary-hover:    var(--em-navy-dark);
    --primary-light:    var(--em-navy-light);
    --secondary-color:  var(--em-cyan);
    --success-color:    #10b981;
    --warning-color:    #f59e0b;
    --danger-color:     var(--em-red);
    --bg-body:          #f4f7f6;
    --card-bg:          #ffffff;
    --text-main:        #0f172a;
    --text-muted:       #64748b;
    --border-color:     #d8e6e2;
    --radius-lg:        16px;
    --radius-md:        12px;
    --radius-sm:        8px;
    --shadow-sm:  0 1px 3px rgba(0,0,0,0.05), 0 1px 2px rgba(0,0,0,0.06);
    --shadow-md:  0 4px 6px -1px rgba(0,0,0,0.07), 0 2px 4px -1px rgba(0,0,0,0.04);
    --shadow-lg:  0 10px 15px -3px rgba(0,0,0,0.08), 0 4px 6px -2px rgba(0,0,0,0.03);

    /* ── Bootstrap 5 Variable Overrides ── */
    --bs-primary:           var(--em-navy);
    --bs-primary-rgb:       0, 106, 78;
    --bs-secondary:         var(--em-cyan);
    --bs-secondary-rgb:     0, 149, 151;
    --bs-success:           #10b981;
    --bs-success-rgb:       16, 185, 129;
    --bs-danger:            var(--em-red);
    --bs-danger-rgb:        237, 27, 47;
    --bs-warning:           #f59e0b;
    --bs-warning-rgb:       245, 158, 11;
    --bs-info:              var(--em-cyan);
    --bs-info-rgb:          0, 149, 151;
    --bs-link-color:        var(--em-navy);
    --bs-link-hover-color:  var(--em-navy-dark);
    --bs-border-radius:         var(--radius-md);
    --bs-border-radius-sm:      var(--radius-sm);
    --bs-border-radius-lg:      var(--radius-lg);
    --bs-border-color:          var(--border-color);
    --bs-body-bg:               var(--bg-body);
    --bs-body-color:            var(--text-main);
    --bs-body-font-family:      'Cairo', system-ui, -apple-system, sans-serif;
}

/* ── Bootstrap component fine-tuning ── */

/* Primary buttons */
.btn-primary            { background-color: var(--em-navy); border-color: var(--em-navy); }
.btn-primary:hover,
.btn-primary:focus      { background-color: var(--em-navy-dark); border-color: var(--em-navy-dark); }
.btn-outline-primary    { color: var(--em-navy); border-color: var(--em-navy); }
.btn-outline-primary:hover { background-color: var(--em-navy); border-color: var(--em-navy); color: #fff; }

/* Secondary / Info = teal */
.btn-secondary, .btn-info { background-color: var(--em-cyan); border-color: var(--em-cyan); color: #fff; }
.btn-secondary:hover, .btn-info:hover { background-color: #0f96ae; border-color: #0f96ae; color: #fff; }
.btn-outline-secondary, .btn-outline-info { color: var(--em-cyan); border-color: var(--em-cyan); }
.btn-outline-secondary:hover, .btn-outline-info:hover { background-color: var(--em-cyan); color: #fff; }

/* Danger = Crédit Agricole red */
.btn-danger             { background-color: var(--em-red); border-color: var(--em-red); }
.btn-danger:hover       { background-color: var(--em-red-dark); border-color: var(--em-red-dark); }
.btn-outline-danger     { color: var(--em-red); border-color: var(--em-red); }
.btn-outline-danger:hover { background-color: var(--em-red); color: #fff; }

/* Badges */
.badge.bg-primary       { background-color: var(--em-navy) !important; }
.badge.bg-secondary,
.badge.bg-info          { background-color: var(--em-cyan) !important; }
.badge.bg-danger        { background-color: var(--em-red) !important; }

/* Text colours */
.text-primary           { color: var(--em-navy) !important; }
.text-secondary,
.text-info              { color: var(--em-cyan) !important; }
.text-danger            { color: var(--em-red) !important; }

/* Border colours */
.border-primary         { border-color: var(--em-navy) !important; }
.border-danger          { border-color: var(--em-red) !important; }

/* Borders on cards */
.border-4.border-primary { border-color: var(--em-navy) !important; }

/* Form focus ring */
.form-control:focus,
.form-select:focus      {
    border-color: var(--em-navy);
    box-shadow: 0 0 0 0.2rem rgba(0,106,78,.15);
}

/* Pagination active */
.page-link              { color: var(--em-navy); }
.page-link:hover        { color: var(--em-navy-dark); }
.page-item.active .page-link {
    background-color: var(--em-navy);
    border-color: var(--em-navy);
    color: #fff;
}

/* Nav tabs active */
.nav-tabs .nav-link.active {
    color: var(--em-navy);
    border-bottom-color: var(--em-navy);
}

/* Alerts */
.alert-primary  { background-color: var(--em-navy-light); border-color: var(--em-navy); color: var(--em-navy-dark); }
.alert-danger   { background-color: var(--em-red-light);   border-color: var(--em-red);   color: var(--em-red-dark); }
.alert-info     { background-color: var(--em-cyan-light);  border-color: var(--em-cyan);  color: #0f96ae; }

/* Select2 theming */
.select2-container--default .select2-selection--single {
    border-color: var(--border-color);
    border-radius: var(--radius-md);
    height: calc(1.5em + 1.5rem + 2px);
    padding: 0.75rem 1rem;
}
.select2-container--default .select2-results__option--highlighted {
    background-color: var(--em-navy) !important;
}
.select2-container--default .select2-selection--single:focus,
.select2-container--default.select2-container--focus .select2-selection--single {
    border-color: var(--em-navy);
    box-shadow: 0 0 0 0.2rem rgba(0,106,78,.15);
    outline: none;
}



body {
    font-family: 'Cairo', system-ui, -apple-system, sans-serif;
    background-color: var(--bg-body);
    color: var(--text-main);
    line-height: 1.6;
    padding-bottom: 80px; /* Space for sticky bottom elements on mobile */
}

/* Glassmorphism & Navbar Styling */
.navbar {
    background: linear-gradient(135deg, #132a52 0%, #1e3a6e 50%, #17b8d4 100%) !important;
    box-shadow: var(--shadow-md);
    padding: 0.85rem 1rem;
}

.navbar-brand {
    font-weight: 700;
    font-size: 1.35rem;
    letter-spacing: -0.5px;
}

.nav-link {
    font-weight: 500;
    padding: 0.5rem 0.85rem !important;
    border-radius: var(--radius-sm);
    transition: all 0.2s ease;
}

.nav-link:hover, .nav-link.active {
    background: rgba(255, 255, 255, 0.15);
}

/* Modern Card Design */
.card {
    background-color: var(--card-bg);
    border-radius: var(--radius-lg);
    border: 1px solid var(--border-color);
    box-shadow: var(--shadow-sm);
    transition: transform 0.2s ease, box-shadow 0.2s ease;
    overflow: hidden;
}

.card:hover {
    box-shadow: var(--shadow-md);
}

.card-header {
    background-color: #ffffff;
    border-bottom: 1px solid var(--border-color);
    padding: 1rem 1.25rem;
    font-weight: 600;
}

/* Custom Hero Cards for Worker */
.hero-card {
    background: linear-gradient(135deg, #1e3a6e 0%, #17b8d4 100%);
    color: white;
    border-radius: var(--radius-lg);
    padding: 1.75rem;
    box-shadow: 0 10px 20px -5px rgba(79, 70, 229, 0.3);
    position: relative;
    overflow: hidden;
}

.hero-card::after {
    content: '';
    position: absolute;
    top: -50%;
    left: -50%;
    width: 200%;
    height: 200%;
    background: radial-gradient(circle, rgba(255,255,255,0.1) 0%, transparent 60%);
    pointer-events: none;
}

/* Modern Buttons with Touch Optimization */
.btn {
    border-radius: var(--radius-md);
    font-weight: 600;
    padding: 0.65rem 1.25rem;
    transition: all 0.2s ease;
    touch-action: manipulation;
    min-height: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.btn-primary {
    background-color: var(--primary-color);
    border-color: var(--primary-color);
}

.btn-primary:hover, .btn-primary:focus {
    background-color: var(--primary-hover);
    border-color: var(--primary-hover);
    transform: translateY(-1px);
}

.btn-success {
    background-color: var(--success-color);
    border-color: var(--success-color);
}

.btn-warning {
    background-color: var(--warning-color);
    border-color: var(--warning-color);
    color: #ffffff !important;
}

.btn-danger {
    background-color: var(--danger-color);
    border-color: var(--danger-color);
}

.btn:active {
    transform: scale(0.98);
}

/* Badges */
.badge {
    padding: 0.45em 0.75em;
    font-weight: 600;
    border-radius: 20px;
    font-size: 0.8rem;
}

/* Form Controls Touch Optimization */
.form-control, .form-select {
    border-radius: var(--radius-md);
    border: 1px solid var(--border-color);
    padding: 0.75rem 1rem;
    font-size: 1rem;
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.form-control:focus, .form-select:focus {
    border-color: var(--primary-color);
    box-shadow: 0 0 0 4px var(--primary-light);
}

/* Mobile Friendly Quick Navigation Dock */
@media (max-width: 768px) {
    .mobile-bottom-nav {
        position: fixed;
        bottom: 0;
        left: 0;
        right: 0;
        background: #ffffff;
        border-top: 1px solid var(--border-color);
        box-shadow: 0 -4px 12px rgba(0,0,0,0.08);
        z-index: 1050;
        display: flex;
        justify-content: space-around;
        padding: 0.5rem 0;
    }
    .mobile-bottom-nav a {
        color: var(--text-muted);
        text-decoration: none;
        font-size: 0.75rem;
        font-weight: 600;
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 2px;
        padding: 0.25rem 0.5rem;
    }
    .mobile-bottom-nav a.active, .mobile-bottom-nav a:hover {
        color: var(--primary-color);
    }
    .mobile-bottom-nav i {
        font-size: 1.25rem;
    }
}

/* Photo Gallery & Thumbnail Styling */
.img-thumbnail {
    border-radius: var(--radius-md);
    border: 2px solid var(--border-color);
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.img-thumbnail:hover {
    transform: scale(1.03);
    box-shadow: var(--shadow-md);
}

/* Mobile Responsive Tables (Grid/Card Style) for RTL */
@media (max-width: 768px) {

    /* Hide table headers */
    table.grid-view.table-hover thead {
        display: none;
    }

    /* Table becomes a grid container */
    table.grid-view.table-hover,
    table.grid-view.table-hover tbody {
        display: block;
        width: 100%;
    }

    /* Rows become cards in a 2-column grid */
    table.grid-view.table-hover tbody {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 1rem;
    }

    /* Card */
    table.grid-view.table-hover tr {
        display: block;
        width: 100%;
        margin: 0;
        background-color: var(--card-bg);
        border-radius: var(--radius-md);
        box-shadow: var(--shadow-sm);
        border: 1px solid var(--border-color);
        padding: 0.5rem;
        box-sizing: border-box;
    }

    /* Cells */
    table.grid-view.table-hover td {
        width: 100%;
        text-align: right;
        border: none;
        border-bottom: 1px dashed var(--border-color);
        padding: 0.75rem 0.5rem !important;
        position: relative;
        display: flex;
        flex-direction: column;
        gap: 0.25rem;
        box-sizing: border-box;
    }

    table.grid-view.table-hover td:last-child {
        border-bottom: 0;
        align-items: center;
        justify-content: center;
    }


    /* ---------------------------------
       Borderless Tables
       --------------------------------- */

    table.grid-view.table-borderless,
    table.grid-view.table-borderless tbody {
        display: block;
        width: 100%;
    }

    table.grid-view.table-borderless tbody {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 0.75rem;
    }

    table.grid-view.table-borderless tr {
        display: block;
        width: 100%;
        margin: 0;
        background-color: var(--bg-body);
        border-radius: var(--radius-sm);
        padding: 0.75rem;
        box-sizing: border-box;
    }

    table.grid-view.table-borderless th {
        display: block;
        width: 100%;
        color: var(--text-muted);
        font-size: 0.85rem;
        padding: 0 0 0.25rem 0 !important;
    }

    table.grid-view.table-borderless td {
        display: block;
        width: 100%;
        font-weight: 600;
        padding: 0 !important;
    }
}

/* ═══════════════════════════════════════
   Offcanvas Branded Side Menu
   ═══════════════════════════════════════ */

.offcanvas-branded {
    width: 290px !important;
    border-radius: 0 var(--radius-lg) var(--radius-lg) 0;
    overflow: hidden;
}

/* Gradient header matching navbar */
.offcanvas-brand-header {
    background: linear-gradient(135deg, #132a52 0%, #1e3a6e 55%, #17b8d4 100%);
    min-height: 90px;
}

/* Subtle teal stripe below header for role */
.offcanvas-role-bar {
    background: rgba(0, 149, 151, 0.08);
    border-bottom: 1px solid rgba(0, 106, 78, 0.12);
}

.offcanvas-role-badge {
    background: linear-gradient(135deg, #1e3a6e, #17b8d4);
    color: #fff;
    font-size: 0.75rem;
    padding: 0.35em 0.85em;
    letter-spacing: 0.3px;
}

/* Nav item rows */
.offcanvas-nav-item {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 0.9rem 1.5rem;
    color: var(--text-main);
    text-decoration: none;
    font-weight: 600;
    font-size: 0.95rem;
    border-right: 3px solid transparent;
    transition: background 0.18s ease, border-color 0.18s ease, color 0.18s ease;
    position: relative;
}

.offcanvas-nav-item:hover {
    background: var(--em-navy-light);
    color: var(--em-navy);
    border-right-color: var(--em-navy);
}

.offcanvas-nav-item.active {
    background: var(--em-navy-light);
    color: var(--em-navy);
    border-right-color: var(--em-navy);
    font-weight: 700;
}

/* Icon block */
.offcanvas-nav-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border-radius: 10px;
    background: rgba(0, 106, 78, 0.09);
    color: var(--em-navy);
    font-size: 0.95rem;
    flex-shrink: 0;
    transition: background 0.18s ease;
}

.offcanvas-nav-item:hover .offcanvas-nav-icon,
.offcanvas-nav-item.active .offcanvas-nav-icon {
    background: var(--em-navy);
    color: #fff;
}

/* Logout button at bottom */
.offcanvas-logout-btn {
    background: linear-gradient(135deg, #17b8d4, #0f96ae);
    color: #fff;
    border: none;
    border-radius: var(--radius-md);
    padding: 0.75rem 1.25rem;
    font-size: 0.95rem;
    letter-spacing: 0.3px;
    box-shadow: 0 4px 12px rgba(224, 123, 0, 0.25);
    transition: opacity 0.18s ease, transform 0.18s ease;
}

.offcanvas-logout-btn:hover {
    opacity: 0.9;
    color: #fff;
    transform: translateY(-1px);
}

/* Mobile bottom nav: update active color to brand green */
.mobile-bottom-nav a.active,
.mobile-bottom-nav a:hover {
    color: var(--em-navy) !important;
}