:root {
    /* ── Typography ─────────────────────────────────────────────────────── */
    --font-primary : 'Inter', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Outfit', sans-serif;

    /* ── Brand ───────────────────────────────────────────────────────────── */
    --brand          : #007BFF;
    --brand-hover    : #0056B3;
    --brand-dim      : rgba(0, 123, 255, 0.10);

    /* ── Status palette — muted, no glow, WCAG-accessible ───────────────── */
    --status-active          : #007BFF;
    --status-active-bg       : rgba(0, 123, 255, 0.09);
    --status-active-border   : rgba(0, 123, 255, 0.22);
    --status-active-text     : #0066DD;

    --status-warning         : #D48F00;
    --status-warning-bg      : rgba(255, 193, 7, 0.09);
    --status-warning-border  : rgba(212, 143, 0, 0.28);
    --status-warning-text    : #B87A00;

    --status-offline         : #6C757D;
    --status-offline-bg      : rgba(108, 117, 125, 0.09);
    --status-offline-border  : rgba(108, 117, 125, 0.22);
    --status-offline-text    : #5A6268;

    --status-danger          : #DC3545;
    --status-danger-bg       : rgba(220, 53, 69, 0.09);
    --status-danger-border   : rgba(220, 53, 69, 0.22);
    --status-danger-text     : #B02A37;

    /* ── Surface & background (light defaults) ───────────────────────────── */
    --bg-primary    : #FFFFFF;
    --bg-secondary  : #F5F6FA;
    --bg-tertiary   : #EBEDF2;
    --bg-surface    : #FFFFFF;
    --bg-elevated   : #FFFFFF;
    --wrapper-bg    : #F5F6FA;

    /* ── Text ────────────────────────────────────────────────────────────── */
    --text-primary   : #1A1A1A;
    --text-secondary : #4A5568;
    --text-muted     : #9CA3AF;
    --text-inverse   : #FFFFFF;

    /* ── Borders ─────────────────────────────────────────────────────────── */
    --border-color  : #E2E8F0;
    --border-subtle : #F1F5F9;

    /* ── Scrollbar (sidebar/nav scroll area) — light defaults ───────────── */
    --scrollbar-thumb       : #CBD5E1;
    --scrollbar-thumb-hover : #94A3B8;

    /* ── Sidebar ─────────────────────────────────────────────────────────── */
    --sidebar-bg            : #FFFFFF;
    --sidebar-width         : 240px;
    --sidebar-text          : #64748B;
    --sidebar-text-active   : #007BFF;
    --sidebar-active-bg     : rgba(0, 123, 255, 0.07);
    --sidebar-active-border : #007BFF;
    --sidebar-section-color : #94A3B8;

    /* ── Navbar ──────────────────────────────────────────────────────────── */
    --navbar-bg     : #FFFFFF;
    --navbar-border : #E2E8F0;
    --navbar-shadow : 0 1px 3px rgba(0, 0, 0, 0.07), 0 1px 2px rgba(0, 0, 0, 0.04);

    /* ── Cards ───────────────────────────────────────────────────────────── */
    --card-bg           : #FFFFFF;
    --card-border       : #E2E8F0;
    --card-shadow       : 0 1px 3px rgba(0,0,0,0.06), 0 1px 2px rgba(0,0,0,0.04);
    --card-shadow-hover : 0 6px 16px rgba(0,0,0,0.09), 0 2px 4px rgba(0,0,0,0.05);
    --card-radius       : 10px;

    /* ── Inputs ──────────────────────────────────────────────────────────── */
    --input-bg          : #FFFFFF;
    --input-border      : #D1D5DB;
    --input-focus-border: #007BFF;
    --input-focus-ring  : rgba(0, 123, 255, 0.14);

    /* ── Chart ───────────────────────────────────────────────────────────── */
    --chart-line  : #007BFF;
    --chart-fill  : rgba(0, 123, 255, 0.07);
    --chart-grid  : rgba(0, 0, 0, 0.05);

    /* ── Transitions ─────────────────────────────────────────────────────── */
    --transition-fast : 120ms ease;
    --transition-base : 220ms ease;
    --transition-slow : 340ms ease;

    /* ── Overlay (page-loading, modal backdrops) ─────────────────────────── */
    --overlay-bg     : rgba(255, 255, 255, 0.82);

    /* ── Legacy aliases (keep backward-compat with existing view classes) ── */
    --primary-color      : #007BFF;
    --secondary-color    : #F5F6FA;
    --text-color         : #1A1A1A;
    --sidebar-text-color : #1A1A1A;
    --sidebar-text-muted : #64748B;
    --glass-bg           : rgba(255, 255, 255, 0.92);
    --glass-border       : rgba(255, 255, 255, 0.30);
}

* {
    box-sizing: border-box;
}

/* Kill horizontal scroll at the root — both html and body needed because
   some browsers honour one and not the other on mobile viewports. */
html {
    overflow-x: hidden;
    max-width: 100%;
}

body {
    background-color: var(--bg-secondary);
    color: var(--text-primary);
    font-family: var(--font-primary);
    overflow-x: hidden;
    max-width: 100%;
    font-size: 14px;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
}

/* Arabic: Tajawal is designed for Arabic script and matches Inter's weight/spacing */
[dir="rtl"] body {
    font-family: 'Tajawal', system-ui, sans-serif;
}

/* Ionicons web component: prevent element collapse while the custom element
   definition is pending (happens before ionicons.esm.js executes).
   visibility:visible prevents CSSOM hiding; min-width prevents 0px width collapse. */
ion-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    min-width: 1.2rem;
    visibility: visible !important;
}

#wrapper {
    overflow-x: hidden;
    background: var(--wrapper-bg);
    width: 100%;
    max-width: 100%;
    position: relative;
}

/*
 * Sidebar width and offset are synchronized via --sidebar-width.
 * This prevents overflow caused by mismatched width vs margin offset.
 */
#sidebar-wrapper {
    /* Fixed to the viewport height so the sidebar scrolls INTERNALLY and
       independently of the page. Previously min-height:100vh let the menu grow
       past the viewport when there were many items (e.g. the long "ML Operations
       Center" label in Arabic), pushing lower items below the fold where the
       fixed element could not scroll to reach them. dvh handles mobile chrome. */
    height: 100vh;
    height: 100dvh;
    top: 0;
    margin-inline-start: calc(-1 * var(--sidebar-width));
    transition: margin 0.25s ease-out;
    background-color: var(--sidebar-bg);
    border-inline-end: 1px solid var(--border-color);
    position: fixed;
    z-index: 1000;
    width: var(--sidebar-width);
    max-width: var(--sidebar-width);
    overflow-y: auto;
    overflow-x: hidden;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;
    /* Theme-aware scrollbar (Firefox). The thumb/track colours follow the
       active theme via CSS variables, so the rail no longer shows white,
       OS-default arrows/thumb in dark mode. */
    scrollbar-width: thin;
    scrollbar-color: var(--scrollbar-thumb) transparent;
}

/* Theme-aware scrollbar (WebKit/Blink: Chrome, Edge, Safari), scoped to the
   sidebar scroll area only. Hides the up/down arrow buttons that rendered white
   in dark mode and gives a subtle rounded thumb that reads on both themes. */
#sidebar-wrapper::-webkit-scrollbar {
    width: 8px;
}
#sidebar-wrapper::-webkit-scrollbar-track {
    background: transparent;
}
#sidebar-wrapper::-webkit-scrollbar-thumb {
    background-color: var(--scrollbar-thumb);
    border-radius: 4px;
}
#sidebar-wrapper::-webkit-scrollbar-thumb:hover {
    background-color: var(--scrollbar-thumb-hover);
}
#sidebar-wrapper::-webkit-scrollbar-button {
    display: none;
    height: 0;
    width: 0;
}

/* Long sidebar labels wrap onto a second line instead of being clipped by the
   fixed-width rail. Works cleanly in both LTR and RTL. */
#sidebar-wrapper .list-group-item {
    white-space: normal;
    line-height: 1.25;
    word-break: break-word;
}

#sidebar-wrapper .sidebar-heading {
    padding: 0.875rem 1.25rem;
    font-size: 1.1rem;
    color: var(--sidebar-text-color);
    letter-spacing: 1px;
    white-space: nowrap;
}

#sidebar-wrapper .list-group {
    width: 100%;
}

/* ... */

.list-group-item {
    border: none;
    padding: 0.875rem 1.25rem;
    color: var(--sidebar-text-muted);
    transition: all 0.3s;
    font-size: 0.95rem;
    white-space: nowrap;
}

.list-group-item:hover {
    color: var(--sidebar-text-active);
    background-color: var(--sidebar-active-bg);
    border-inline-start: 4px solid var(--sidebar-active-border);
    padding-inline-start: calc(1.25rem - 4px);
}

.list-group-item.active {
    background-color: var(--sidebar-active-bg);
    color: var(--sidebar-text-active);
    font-weight: bold;
    border-inline-start: 4px solid var(--sidebar-active-border);
    padding-inline-start: calc(1.25rem - 4px);
}

/* Enterprise Cards — variable-driven, no glassmorphism (incompatible with dark mode) */
.card {
    background-color: var(--card-bg);
    border: 1px solid var(--card-border);
    border-radius: var(--card-radius);
    box-shadow: var(--card-shadow);
    transition: transform 0.3s ease, box-shadow 0.3s ease,
                background-color var(--transition-base), border-color var(--transition-base);
    margin-bottom: 1.5rem;
    width: 100%;
}

.card:hover {
    transform: translateY(-3px);
    box-shadow: var(--card-shadow-hover);
}

.card-title {
    color: var(--text-primary);
    font-weight: 600;
    font-size: 1.1rem;
    margin-bottom: 1rem;
}

.card-body {
    padding: 1.25rem;
}

/* Table Styling */
.table {
    color: var(--text-primary);
    vertical-align: middle;
    font-size: 0.9rem;
    width: 100%;
}

.table thead th {
    border: none;
    color: var(--text-muted);
    font-weight: 600;
    text-transform: uppercase;
    font-size: 0.75rem;
    padding: 0.75rem 0.5rem;
    white-space: nowrap;
}

.table tbody tr {
    transition: background 0.2s;
}

.table tbody tr:hover {
    background-color: var(--bg-tertiary);
}

.table tbody td {
    padding: 0.75rem 0.5rem;
    vertical-align: middle;
}

.table ion-icon {
    vertical-align: middle;
    font-size: 1.15rem;
}

.table .btn-sm ion-icon {
    font-size: 1rem;
}

/* Responsive Table */
.table-responsive {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

@media (max-width: 768px) {
    .table {
        font-size: 0.85rem;
    }

    .table thead th,
    .table tbody td {
        padding: 0.5rem 0.25rem;
    }
}

/* RTL handled by logical properties above — no physical overrides needed */

/* Buttons */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.25rem;
}

.btn ion-icon {
    font-size: 1.1em;
    vertical-align: middle;
}

.btn-primary {
    background: linear-gradient(135deg, #0d6efd, #0a58ca);
    border: none;
    box-shadow: 0 4px 15px rgba(13, 110, 253, 0.3);
    border-radius: 8px;
    transition: all 0.3s;
}

.btn-primary:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(13, 110, 253, 0.4);
}

.badge {
    padding: 0.5em 1em;
    border-radius: 6px;
    font-weight: 500;
}

/* Navbar Responsive */
.navbar {
    padding: 0.75rem 1rem;
    flex-wrap: wrap;
    background-color: var(--navbar-bg);
    border-bottom: 1px solid var(--navbar-border);
}

.navbar h2 {
    font-size: 1.25rem;
    margin: 0;
    color: var(--text-color);
}

.navbar-nav {
    flex-direction: row;
    gap: 0.5rem;
}

/* Statistics Cards */
.stat-card {
    padding: 1.25rem;
    border-radius: 12px;
    height: 100%;
    min-height: 120px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

.stat-card h6 {
    font-size: 0.85rem;
    margin-bottom: 0.5rem;
    opacity: 0.9;
}

.stat-card h2 {
    font-size: 2rem;
    font-weight: 700;
    margin: 0;
}

.stat-card ion-icon {
    font-size: 2.5rem;
    opacity: 0.3;
}

/* Buttons Responsive */
.btn {
    font-size: 0.875rem;
    padding: 0.5rem 1rem;
    white-space: nowrap;
}

.btn-lg {
    font-size: 1rem;
    padding: 0.75rem 1.5rem;
}

.btn-sm {
    font-size: 0.75rem;
    padding: 0.25rem 0.5rem;
}

/* Form Controls */
.form-control,
.form-select {
    font-size: 0.9rem;
    padding: 0.5rem 0.75rem;
}

.form-label {
    font-size: 0.875rem;
    margin-bottom: 0.5rem;
    font-weight: 500;
}

/* Container Padding */
.container-fluid {
    padding-left: 1rem;
    padding-right: 1rem;
    padding-bottom: 2rem;
    padding-top: 0.5rem;
}

/* Page Content Wrapper */
#page-content-wrapper {
    flex: 1;
    width: 100%;
}

/* Responsive Breakpoints */
@media (min-width: 992px) {
    #sidebar-wrapper {
        margin-inline-start: 0;
    }

    #page-content-wrapper {
        margin-inline-start: var(--sidebar-width);
        width: calc(100% - var(--sidebar-width));
        min-height: 100vh;
    }

    #wrapper.toggled #sidebar-wrapper {
        margin-inline-start: calc(-1 * var(--sidebar-width));
    }

    #wrapper.toggled #page-content-wrapper {
        margin-inline-start: 0;
        width: 100%;
    }

    .container-fluid {
        padding-inline-start: 1.5rem;
        padding-inline-end: 1.5rem;
        max-width: 100%;
    }

    /* Better card widths on desktop */
    .card {
        max-width: 100%;
    }
}

@media (min-width: 768px) and (max-width: 991.98px) {
    #sidebar-wrapper {
        margin-inline-start: calc(-1 * var(--sidebar-width));
    }

    #page-content-wrapper {
        margin-inline-start: 0 !important;
        margin-inline-end: 0 !important;
        width: 100% !important;
        max-width: 100% !important;
    }

    #wrapper.toggled #sidebar-wrapper {
        margin-inline-start: 0;
    }

    .stat-card h2 {
        font-size: 1.75rem;
    }

    .stat-card ion-icon {
        font-size: 2rem;
    }
}

@media (max-width: 767.98px) {
    #page-content-wrapper {
        margin-inline-start: 0 !important;
        margin-inline-end: 0 !important;
        width: 100% !important;
        max-width: 100% !important;
    }

    #wrapper.toggled #sidebar-wrapper {
        margin-inline-start: 0;
    }

    .navbar {
        padding: 0.5rem;
    }

    .navbar h2 {
        font-size: 1.1rem;
    }

    .navbar-nav {
        margin-top: 0.5rem;
        width: 100%;
        justify-content: flex-end;
    }

    .container-fluid {
        padding-left: 0.75rem;
        padding-right: 0.75rem;
    }

    /* Statistics Cards Mobile */
    .stat-card {
        min-height: 100px;
        padding: 1rem;
        margin-bottom: 1rem;
    }

    .stat-card h6 {
        font-size: 0.75rem;
    }

    .stat-card h2 {
        font-size: 1.5rem;
    }

    .stat-card ion-icon {
        font-size: 1.75rem;
    }

    /* Buttons Mobile */
    .btn-lg {
        font-size: 0.875rem;
        padding: 0.5rem 1rem;
    }

    .btn-group {
        flex-direction: column;
        width: 100%;
    }

    .btn-group .btn {
        width: 100%;
        margin-bottom: 0.5rem;
    }

    /* Cards Mobile */
    .card {
        border-radius: 8px;
        margin-bottom: 1rem;
    }

    .card-body {
        padding: 1rem;
    }

    /* Table Mobile */
    .table-responsive {
        font-size: 0.8rem;
        -webkit-overflow-scrolling: touch;
        border-radius: 8px;
    }

    /* Card-style rows: opt-in only via .table-cards class */
    .table-cards thead {
        display: none;
    }

    .table-cards tbody tr {
        display: block;
        margin-bottom: 1rem;
        border: 1px solid var(--border-color);
        border-radius: 8px;
        padding: 0.5rem;
        background: var(--card-bg);
    }

    .table-cards tbody td {
        display: block;
        text-align: right;
        padding: 0.5rem;
        border: none;
    }

    .table-cards tbody td::before {
        content: attr(data-label) ": ";
        font-weight: bold;
        float: left;
        color: var(--text-muted);
    }

    [dir="rtl"] .table-cards tbody td {
        text-align: left;
    }

    [dir="rtl"] .table-cards tbody td::before {
        float: right;
    }

    /* Forms Mobile */
    .row {
        margin-left: -0.5rem;
        margin-right: -0.5rem;
    }

    .row>* {
        padding-left: 0.5rem;
        padding-right: 0.5rem;
        margin-bottom: 1rem;
    }
}

/* ── Sidebar Overlay (mobile + tablet) ──────────────────────── */
.sidebar-overlay {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.5);
    z-index: 9998;   /* just below the sidebar (9999) */
    backdrop-filter: blur(2px);
}
#wrapper.toggled .sidebar-overlay {
    display: block;
}
@media (min-width: 992px) {
    #wrapper.toggled .sidebar-overlay {
        display: none;
    }
}

@media (max-width: 575.98px) {
    body {
        font-size: 13px;
    }

    .container-fluid {
        padding-left: 0.5rem;
        padding-right: 0.5rem;
    }

    .navbar h2 {
        font-size: 1rem;
    }

    .card-title {
        font-size: 1rem;
    }

    .stat-card h2 {
        font-size: 1.25rem;
    }

    .btn {
        font-size: 0.8rem;
        padding: 0.4rem 0.75rem;
    }
}

/* Utility Classes */
.cursor-pointer {
    cursor: pointer;
}

/* Device icon styling */
.bg-light.rounded-circle.text-primary {
    background-color: rgba(0, 157, 255, 0.1) !important;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    flex-shrink: 0;
}

.bg-light.rounded-circle ion-icon {
    display: flex;
    font-size: 1.25rem;
}

/* Ensure gap between icon circle and device name */
.table td .d-flex.align-items-center {
    gap: 0.75rem;
}

.table td .d-flex.align-items-center .me-2 {
    margin-right: 0 !important;
}

/* Hierarchy Page Styles */
.card-header.bg-primary {
    background: linear-gradient(135deg, #0d6efd, #009dff) !important;
    border: none;
}

.card-header h4 {
    color: white;
    font-weight: 600;
}

.card-header .btn-light {
    background: rgba(255, 255, 255, 0.2);
    border: 1px solid rgba(255, 255, 255, 0.3);
    color: white;
}

.card-header .btn-light:hover {
    background: rgba(255, 255, 255, 0.3);
    color: white;
}

/* Nested Cards in Hierarchy */
.card .card {
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
    transition: all 0.3s ease;
}

.card .card:hover {
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
    transform: translateY(-2px);
}

/* Smooth Transitions — global * rule removed; was overriding
   component-level transitions and animating every breakpoint reflow. */

/* Better spacing for mobile */
@media (max-width: 767.98px) {
    .mb-4 {
        margin-bottom: 1rem !important;
    }

    .mt-4 {
        margin-top: 1rem !important;
    }

    .p-5 {
        padding: 1.5rem !important;
    }
}

/* Loading States */
.btn-loading {
    position: relative;
    pointer-events: none;
    opacity: 0.7;
}

.btn-loading::after {
    content: '';
    position: absolute;
    width: 16px;
    height: 16px;
    top: 50%;
    left: 50%;
    margin-left: -8px;
    margin-top: -8px;
    border: 2px solid transparent;
    border-top-color: currentColor;
    border-radius: 50%;
    animation: spin 0.8s linear infinite;
}

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

/* Breadcrumb Styles */
.breadcrumb {
    background: transparent;
    padding: 0.5rem 0;
    margin-bottom: 0.5rem;
}

.breadcrumb-item a {
    color: var(--primary-color);
    text-decoration: none;
}

.breadcrumb-item a:hover {
    text-decoration: underline;
}

.breadcrumb-item.active {
    color: var(--text-muted);
}

/* Page Loading Overlay */
.page-loading {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: var(--overlay-bg);
    z-index: 9999;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s, visibility 0.3s;
}

.page-loading.active {
    opacity: 1;
    visibility: visible;
}

.page-loading .spinner {
    width: 50px;
    height: 50px;
    border: 4px solid #f3f3f3;
    border-top: 4px solid var(--primary-color);
    border-radius: 50%;
    animation: spin 1s linear infinite;
}

/* Empty State */
.empty-state {
    padding: 3rem;
    text-align: center;
}

.empty-state ion-icon {
    font-size: 4rem;
    color: var(--border-color);
    margin-bottom: 1rem;
}

.empty-state p {
    color: var(--text-muted);
    margin-bottom: 1.5rem;
}

/* Alert improvements RTL */
[dir="rtl"] .alert .btn-close {
    left: 0;
    right: auto;
}

[dir="rtl"] .breadcrumb-item+.breadcrumb-item::before {
    float: right;
    padding-left: 0.5rem;
    padding-right: 0;
}

/* ── Organisation Grid Layout ───────────────────────────────── */

/* Compact flex column; no padding needed — card handles inset */
.org-branch-list {
    display: flex;
    flex-direction: column;
}

/* Individual branch row */
.org-branch-item {
    padding: 0.55rem 1rem;
    transition: background var(--transition-fast);
}

/* Solid separator between consecutive branch rows only */
.org-branch-item + .org-branch-item {
    border-top: 1px solid var(--border-subtle);
}

.org-branch-item:hover {
    background: var(--bg-secondary);
}

/* Empty-state inside a region card — inline, not full-bleed */
.org-branch-empty {
    padding: 1.25rem 1rem;
    text-align: center;
    color: var(--text-muted);
}

.org-branch-empty ion-icon {
    font-size: 1.5rem;
    display: block;
    margin: 0 auto 0.35rem;
}

/* Inline add-branch action at the bottom of every region card */
.org-branch-add {
    min-height: 40px;
    padding: 0.5rem 1rem;
    font-size: 0.8rem;
    border-top: 1px dashed var(--border-color) !important; /* override btn-link border:0 */
    border-radius: 0 0 var(--card-radius) var(--card-radius);
    text-decoration: none !important;
    transition: background var(--transition-fast), color var(--transition-fast);
}

.org-branch-add:hover {
    background: var(--bg-secondary);
    color: var(--brand) !important;
    text-decoration: none !important;
}

/* Mobile: expanded touch targets */
@media (max-width: 991.98px) {
    .org-branch-item {
        padding: 0.65rem 1rem;
    }

    .org-branch-add {
        min-height: 44px;
        padding: 0.65rem 1rem;
    }

    /* Ensure the ⋮ dropdown trigger in branch rows is finger-friendly */
    .org-branch-item .dropdown > .btn {
        padding: 0.3rem 0.45rem;
        min-height: 36px;
        min-width: 36px;
    }
}

/* ======= UX Improvements ======= */

/* Search Bar */
.search-filter-bar {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    align-items: center;
    margin-bottom: 1rem;
    padding: 0.75rem 1rem;
    background: var(--card-bg);
    border-radius: 10px;
    border: 1px solid var(--border-color);
}

.search-filter-bar .search-input {
    flex: 1;
    min-width: 180px;
    border: 1px solid var(--border-color);
    border-radius: 8px;
    padding: 0.45rem 0.75rem 0.45rem 2.2rem;
    font-size: 0.875rem;
    background-color: var(--input-bg);
    color: var(--text-primary);
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='%236c757d' viewBox='0 0 16 16'%3E%3Cpath d='M11.742 10.344a6.5 6.5 0 1 0-1.397 1.398h-.001l3.85 3.85a1 1 0 0 0 1.415-1.414l-3.85-3.85zm-5.242.656a5 5 0 1 1 0-10 5 5 0 0 1 0 10z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: 0.65rem center;
    transition: border-color 0.2s, box-shadow 0.2s;
}

[dir="rtl"] .search-filter-bar .search-input {
    background-position: calc(100% - 0.65rem) center;
    padding: 0.45rem 2.2rem 0.45rem 0.75rem;
}

.search-filter-bar .search-input:focus {
    outline: none;
    border-color: var(--input-focus-border);
    box-shadow: 0 0 0 3px var(--input-focus-ring);
}

/* Severity Filter Buttons */
.filter-btn-group {
    display: flex;
    gap: 0.25rem;
    flex-wrap: wrap;
}

.filter-btn-group .filter-btn {
    padding: 0.3rem 0.75rem;
    border-radius: 20px;
    font-size: 0.78rem;
    font-weight: 500;
    border: 1px solid var(--border-color);
    background: var(--card-bg);
    color: var(--text-secondary);
    cursor: pointer;
    transition: all 0.2s;
}

.filter-btn-group .filter-btn:hover {
    background: var(--bg-tertiary);
}

.filter-btn-group .filter-btn.active {
    background: var(--primary-color);
    color: white;
    border-color: var(--primary-color);
}

.filter-btn-group .filter-btn.active-danger {
    background: #dc3545;
    color: white;
    border-color: #dc3545;
}

.filter-btn-group .filter-btn.active-warning {
    background: #ffc107;
    color: #333;
    border-color: #ffc107;
}

.filter-btn-group .filter-btn.active-info {
    background: #0dcaf0;
    color: white;
    border-color: #0dcaf0;
}

/* Auto-refresh Indicator */
.auto-refresh-bar {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.78rem;
    color: var(--text-muted);
    padding: 0.4rem 0.75rem;
    background: rgba(25, 135, 84, 0.06);
    border-radius: 8px;
    border: 1px solid rgba(25, 135, 84, 0.12);
}

.auto-refresh-bar .pulse-dot {
    width: 8px;
    height: 8px;
    background: #198754;
    border-radius: 50%;
    animation: pulse-glow 2s ease-in-out infinite;
}

@keyframes pulse-glow {
    0%, 100% { opacity: 1; transform: scale(1); }
    50% { opacity: 0.4; transform: scale(0.85); }
}

/* Profile Info Display (not inputs) */
.profile-info-item {
    display: flex;
    flex-direction: column;
    padding: 0.6rem 0;
    border-bottom: 1px solid var(--border-subtle);
}

.profile-info-item:last-child {
    border-bottom: none;
}

.profile-info-item .info-label {
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: 0.2rem;
}

.profile-info-item .info-value {
    font-size: 0.95rem;
    font-weight: 500;
    color: var(--text-primary);
}

/* Alert Banner Dynamic */
.alert-banner-healthy {
    background: linear-gradient(45deg, #198754, #20c997) !important;
}

.alert-banner-warning {
    background: linear-gradient(45deg, #ffc107, #ffda6a) !important;
    color: #333 !important;
}

.alert-banner-warning p {
    color: rgba(0, 0, 0, 0.6) !important;
}

.alert-banner-danger {
    background: linear-gradient(45deg, #dc3545, #ff6b6b) !important;
}

/* Responsive Search Bar */
@media (max-width: 767.98px) {
    .search-filter-bar {
        flex-direction: column;
        align-items: stretch;
    }

    .search-filter-bar .search-input {
        min-width: auto;
        width: 100%;
    }

    .filter-btn-group {
        justify-content: flex-start;
        overflow-x: auto;
        flex-wrap: nowrap;
        -webkit-overflow-scrolling: touch;
    }

    .filter-btn-group .filter-btn {
        flex-shrink: 0;
    }
}

/* =============================================================
   ENTERPRISE COMPONENTS
   ============================================================= */

/* ── Sidebar section labels ─────────────────────────────────── */
.sidebar-section-label {
    padding     : 1.1rem 1.25rem 0.35rem;
    font-size   : 0.65rem;
    font-weight : 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color       : var(--sidebar-section-color);
    user-select : none;
    white-space : nowrap;
}

/* ── Status badges — semantic, non-glowing ──────────────────── */
.badge-status {
    display         : inline-flex;
    align-items     : center;
    justify-content : center;
    gap             : 0.3em;
    padding     : 0.28em 0.65em;
    font-size   : 0.72rem;
    font-weight : 600;
    border-radius: 5px;
    border      : 1px solid transparent;
    line-height : 1.4;
    white-space : nowrap;
}
.badge-status-active {
    color       : var(--status-active-text);
    background  : var(--status-active-bg);
    border-color: var(--status-active-border);
}
.badge-status-warning {
    color       : var(--status-warning-text);
    background  : var(--status-warning-bg);
    border-color: var(--status-warning-border);
}
.badge-status-offline {
    color       : var(--status-offline-text);
    background  : var(--status-offline-bg);
    border-color: var(--status-offline-border);
}
.badge-status-danger {
    color       : var(--status-danger-text);
    background  : var(--status-danger-bg);
    border-color: var(--status-danger-border);
}
/* Status dot indicator (used inside badge-status or standalone) */
.status-dot {
    width         : 6px;
    height        : 6px;
    border-radius : 50%;
    flex-shrink   : 0;
    display       : inline-block;
}
.status-dot-active  { background: var(--status-active); }
.status-dot-warning { background: var(--status-warning); }
.status-dot-offline { background: var(--status-offline); }
.status-dot-danger  { background: var(--status-danger); }

/* ── Device Status Row ──────────────────────────────────────── */
/* Horizontal list item replacing the old card grid.
   Usage: <div class="device-status-row"> ... </div>          */
.device-status-row {
    display        : flex;
    align-items    : center;
    gap            : 0.85rem;
    padding        : 0.75rem 1rem;
    border-radius  : var(--card-radius);
    background     : var(--card-bg);
    border         : 1px solid var(--card-border);
    box-shadow     : var(--card-shadow);
    transition     : box-shadow var(--transition-fast),
                     transform var(--transition-fast),
                     background var(--transition-fast);
    cursor         : default;
}
.device-status-row:hover {
    box-shadow : var(--card-shadow-hover);
    transform  : translateY(-1px);
}
.device-status-row + .device-status-row {
    margin-top: 0.5rem;
}
.device-status-row .dsr-icon {
    width         : 36px;
    height        : 36px;
    border-radius : 8px;
    display       : flex;
    align-items   : center;
    justify-content: center;
    flex-shrink   : 0;
    background    : var(--brand-dim);
    color         : var(--brand);
    font-size     : 1.1rem;
}
.device-status-row .dsr-body {
    flex     : 1;
    min-width: 0;
}
.device-status-row .dsr-name {
    font-size   : 0.875rem;
    font-weight : 600;
    color       : var(--text-primary);
    white-space : nowrap;
    overflow    : hidden;
    text-overflow: ellipsis;
}
.device-status-row .dsr-meta {
    font-size : 0.75rem;
    color     : var(--text-muted);
    margin-top: 0.1rem;
}
.device-status-row .dsr-metric {
    font-size   : 0.78rem;
    font-weight : 500;
    color       : var(--text-secondary);
    white-space : nowrap;
    text-align  : right;
}
.device-status-row .dsr-metric span {
    display   : block;
    font-size : 0.68rem;
    color     : var(--text-muted);
    font-weight: 400;
}
.device-status-row .dsr-actions {
    display     : flex;
    align-items : center;
    gap         : 0.3rem;
    flex-shrink : 0;
}

/* ── Exec Stat Card ─────────────────────────────────────────── */
/* Cleaner, data-dense stat cards for dashboards.
   Usage: <div class="exec-stat-card"> ... </div>              */
.exec-stat-card {
    padding       : 1.2rem 1.35rem;
    border-radius : var(--card-radius);
    background    : var(--card-bg);
    border        : 1px solid var(--card-border);
    box-shadow    : var(--card-shadow);
    display       : flex;
    flex-direction: column;
    gap           : 0.5rem;
    height        : 100%;
    transition    : box-shadow var(--transition-fast), transform var(--transition-fast);
}
.exec-stat-card:hover {
    box-shadow : var(--card-shadow-hover);
    transform  : translateY(-1px);
}
.exec-stat-card .esc-label {
    font-size     : 0.7rem;
    font-weight   : 700;
    text-transform: uppercase;
    letter-spacing: 0.07em;
    color         : var(--text-muted);
}
.exec-stat-card .esc-value {
    font-size  : 1.85rem;
    font-weight: 700;
    color      : var(--text-primary);
    line-height: 1;
}
.exec-stat-card .esc-sub {
    font-size : 0.75rem;
    color     : var(--text-secondary);
    margin-top: 0.1rem;
}
.exec-stat-card .esc-icon {
    color    : var(--brand);
    font-size: 1.5rem;
    opacity  : 0.6;
}

/* ── Tenant Context Badge (Navbar) ──────────────────────────── */
.tenant-context-badge {
    display     : inline-flex;
    align-items : center;
    gap         : 0.4em;
    padding     : 0.3em 0.7em;
    font-size   : 0.75rem;
    font-weight : 600;
    border-radius: 6px;
    background  : var(--brand-dim);
    color       : var(--status-active-text);
    border      : 1px solid var(--status-active-border);
    white-space : nowrap;
    max-width   : 180px;
    overflow    : hidden;
    text-overflow: ellipsis;
}

/* ── System status pill (Navbar) ────────────────────────────── */
.system-status-pill {
    display     : inline-flex;
    align-items : center;
    gap         : 0.4em;
    padding     : 0.3em 0.75em;
    font-size   : 0.78rem;
    font-weight : 500;
    border-radius: 6px;
    background  : var(--bg-tertiary);
    border      : 1px solid var(--border-color);
    color       : var(--text-secondary);
    white-space : nowrap;
}

/* ── Theme Toggle Button ────────────────────────────────────── */
.dm-theme-toggle {
    display        : inline-flex;
    align-items    : center;
    justify-content: center;
    width          : 34px;
    height         : 34px;
    border-radius  : 8px;
    border         : 1px solid var(--border-color);
    background     : var(--bg-tertiary);
    color          : var(--text-secondary);
    cursor         : pointer;
    transition     : background var(--transition-fast), color var(--transition-fast),
                     border-color var(--transition-fast), transform var(--transition-fast);
    font-size      : 1.05rem;
    flex-shrink    : 0;
    padding        : 0;
    outline        : none;
    position       : relative;
    z-index        : 10;
}

/* Mobile: expand touch target to 44×44px (WCAG 2.5.5) */
@media (max-width: 991.98px) {
    .dm-theme-toggle {
        min-width : 44px;
        min-height: 44px;
        width     : 44px;
        height    : 44px;
        padding   : 0.25rem;
    }
    /* Sidebar toggle specifically — always first, never buried */
    #menu-toggle {
        order       : -1;
        flex-shrink : 0;
        margin-inline-end: 0.25rem;
    }
}
.dm-theme-toggle:hover {
    background   : var(--brand-dim);
    color        : var(--brand);
    border-color : var(--status-active-border);
    transform    : scale(1.06);
}
.dm-theme-toggle:focus-visible {
    box-shadow: 0 0 0 3px var(--input-focus-ring);
}

/* ── Toast Container ────────────────────────────────────────── */
#dm-toast-container {
    position  : fixed;
    top       : 1.1rem;
    inset-inline-end: 1.1rem;
    z-index   : 9999;
    display   : flex;
    flex-direction: column;
    gap       : 0.5rem;
    max-width : 340px;
    width     : calc(100vw - 2.2rem);
}
.dm-toast-item {
    background: var(--card-bg);
    border    : 1px solid var(--card-border);
    box-shadow: 0 4px 16px rgba(0,0,0,0.12);
    border-radius: 9px;
    backdrop-filter: blur(8px);
}
.dm-toast-icon-success { color: #16A34A; }
.dm-toast-icon-danger  { color: #DC2626; }
.dm-toast-icon-warning { color: #D97706; }
.dm-toast-icon-info    { color: #2563EB; }
.dm-toast-item .toast-body { color: var(--text-primary); font-size: 0.85rem; }

/* ── Page-top Progress Bar (loading indicator) ──────────────── */
.dm-page-progress {
    position  : fixed;
    top       : 0;
    left      : 0;
    width     : 0;
    height    : 2px;
    background: var(--brand);
    z-index   : 10000;
    transition: width 0.3s ease, opacity 0.4s ease;
    opacity   : 0;
}
.dm-page-progress.active {
    opacity: 1;
    width  : 70%;
}
.dm-page-progress.done {
    width  : 100%;
    opacity: 0;
}

/* ── Mini Chart Container ───────────────────────────────────── */
.dm-chart-container {
    position: relative;
    height  : 180px;
    width   : 100%;
}

/* Canvas elements must never exceed their parent's width.
   Without this, the browser's default 300px canvas width overflows
   on narrow screens before Chart.js initializes, causing iOS Safari
   to lock the page at a non-zero scrollLeft (the white-gap symptom). */
canvas {
    max-width: 100%;
}

/* ── Breadcrumb (enterprise style) ──────────────────────────── */
.dm-breadcrumb {
    display    : flex;
    align-items: center;
    gap        : 0.3rem;
    font-size  : 0.75rem;
    color      : var(--text-muted);
    padding    : 0.2rem 0 0.75rem;
}
.dm-breadcrumb a {
    color          : var(--text-secondary);
    text-decoration: none;
    transition     : color var(--transition-fast);
}
.dm-breadcrumb a:hover { color: var(--brand); }
.dm-breadcrumb .dm-bc-sep {
    font-size: 0.65rem;
    opacity  : 0.5;
}
.dm-breadcrumb .dm-bc-active { color: var(--text-primary); font-weight: 500; }

/* ── Impersonation Banner ───────────────────────────────────── */
.impersonation-banner {
    background   : linear-gradient(90deg, #7C3AED, #5B21B6);
    color        : #FFFFFF;
    font-size    : 0.8rem;
    font-weight  : 500;
    padding      : 0.45rem 1.25rem;
    display      : flex;
    align-items  : center;
    gap          : 0.5rem;
    position     : sticky;
    top          : 0;
    z-index      : 1050;
}
.impersonation-banner a {
    color          : rgba(255,255,255,0.85);
    text-decoration: underline;
    text-underline-offset: 2px;
}
.impersonation-banner a:hover { color: #FFFFFF; }

/* ── Hover transition on all interactive cards ──────────────── */
.card {
    transition: transform var(--transition-fast),
                box-shadow var(--transition-fast),
                background var(--transition-base),
                border-color var(--transition-base);
}

/* ═══════════════════════════════════════════════════════════════
   RESPONSIVE — Mobile + Tablet  (≤ 991.98 px)
   Unified block that consolidates all sub-desktop adaptations.
   The existing per-breakpoint rules above are still active and
   override values where a narrower range needs further reduction.
   ═══════════════════════════════════════════════════════════════ */
@media (max-width: 991.98px) {

    /* 1 ── Sidebar: off-canvas by default, slides in on toggle */
    #sidebar-wrapper {
        top: 0 !important;
        bottom: 0 !important;
        height: 100vh !important;
        margin-inline-start: calc(-1 * var(--sidebar-width)) !important;
        overflow-y: auto;
        overflow-x: hidden;
        z-index: 9999 !important;   /* must clear navbar, modals, overlays */
    }

    /* Slide in when #wrapper carries the .toggled class */
    #wrapper.toggled #sidebar-wrapper {
        margin-inline-start: 0 !important;
        box-shadow: 4px 0 24px rgba(0, 0, 0, 0.18);
    }

    /* 2 ── Page content: always full-width, no sidebar indent */
    #page-content-wrapper {
        margin-inline-start: 0 !important;
        margin-inline-end: 0 !important;
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0;
    }

    /* 3 ── Cards & forms: fluid, no fixed-pixel widths */
    .card {
        width: 100%;
        max-width: 100%;
    }

    .card-body {
        padding: 1rem 1.25rem;
    }

    /* Single-column form rows on tablet */
    .row.g-3 > .col-sm-6,
    .row.g-3 > .col-md-6,
    .row.g-4 > .col-sm-6,
    .row.g-4 > .col-md-6 {
        flex: 0 0 100%;
        max-width: 100%;
    }

    /* 4 ── Tables: horizontal scroll + iOS momentum scrolling */
    .table-responsive {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        border-radius: var(--card-radius);
    }

    /* min-width: 520px removed — it forced tables wider than the viewport
       and conflicted with overflow-x:hidden on ancestor containers,
       breaking horizontal scroll on Safari iOS. Tables are readable
       at natural widths inside .table-responsive's own scroll context. */

    /* 5 ── Top-bar: compact padding; hamburger already shown by
            Bootstrap's d-lg-none on #menu-toggle in layout.php  */
    .navbar {
        padding: 0.5rem 1rem;
        flex-wrap: nowrap;
    }

    .container-fluid {
        padding-inline-start: 1rem;
        padding-inline-end: 1rem;
        max-width: 100%;
    }

    /* Ensure 44 × 44 px minimum touch target for the hamburger */
    #menu-toggle {
        min-width: 44px;
        min-height: 44px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        flex-shrink: 0;
    }

    /* Hide desktop-only system health pill on tablet/mobile.
       The <li> already carries d-none d-md-flex; this rule is a
       CSS-only fallback for any context that doesn't use Bootstrap. */
    .system-status-pill {
        display: none !important;
    }

}
/* end @media (max-width: 991.98px) */

/* ═══════════════════════════════════════════════════════════════
   MOBILE LAYOUT — Unified Critical Override Block
   Placed at end-of-file so it wins every specificity battle.

   Resolves:
     ① Horizontal shift / right-side white gap
        — caused by any descendant (chart, table) overflowing its
          container while html/body clip with overflow-x:hidden,
          which shifts the visual origin left.
     ② Sidebar z-index layering (open vs. closed)
     ③ Header-to-content spacing on mobile viewports
     ④ Card & row edge bleed on sub-576 px screens

   All directional properties use CSS logical values
   (margin-inline-*, padding-inline-*, inset-inline-*) for
   automatic LTR / RTL compatibility.

   !important is used only where Bootstrap utility classes or
   earlier specificity chains would otherwise override these rules.
   ═══════════════════════════════════════════════════════════════ */

/* ── 1. Document root ───────────────────────────────────────────
   Kill horizontal overflow at the top of the stacking context.
   Both html AND body are required: some mobile browsers honour
   one but not the other.                                         */
html,
body {
    overflow-x: hidden !important;
    max-width: 100% !important;
}

/* ═══════════════════════════════════════════════════════════════
   MOBILE + TABLET  (≤ 991.98 px)
   ═══════════════════════════════════════════════════════════════ */
@media (max-width: 991.98px) {

    /* ── 2. #wrapper ────────────────────────────────────────────
       Using 100vw (not 100%) is the key fix for the white-gap
       symptom: when a descendant is wider than the viewport,
       overflow:hidden clips it but the wrapper's own width is
       still computed from its children, leaving a phantom gap.
       100vw pins the wrapper to the physical viewport width.     */
    #wrapper {
        width: 100vw !important;
        max-width: 100vw !important;
        margin: 0 !important;
        padding: 0 !important;
        overflow-x: hidden !important;
    }

    /* ── 3. #page-content-wrapper ───────────────────────────────
       The sidebar is position:fixed → zero layout contribution.
       This pane must therefore span the full viewport width.
       Every margin/padding axis is zeroed so no ghost indent
       survives from the desktop margin-inline-start rule.        */
    #page-content-wrapper {
        margin-inline-start: 0 !important;
        margin-inline-end:   0 !important;
        margin-top:          0 !important;
        margin-bottom:       0 !important;
        padding-inline-start: 0 !important;
        padding-inline-end:   0 !important;
        width:     100% !important;
        max-width: 100% !important;
        min-width: 0   !important;
        /* overflow-x: hidden removed — it was swallowing the
           overflow-x: auto scroll context of .table-responsive on
           Safari iOS, preventing horizontal table scrolling. The
           outer #wrapper retains overflow-x: hidden as the clip boundary. */
    }

    /* ── 4. Sidebar z-index stack ───────────────────────────────
       Reinforces position:fixed from the base rule.
       Closed: z-index below the overlay (9998).
       Open:   z-index above everything (9999).
       100dvh collapses with the mobile browser chrome so the
       sidebar never clips behind the address-bar chrome.         */
    #sidebar-wrapper {
        position: fixed !important;
        inset-block-start: 0 !important;
        inset-block-end:   0 !important;
        height: 100vh   !important;
        height: 100dvh  !important;
        z-index: 9998   !important;
    }

    #wrapper.toggled #sidebar-wrapper {
        z-index: 9999 !important;
    }

    /* ── 5. Navbar ──────────────────────────────────────────────
       Must be exactly as wide as the viewport and must not
       create its own horizontal scrolling surface.               */
    .navbar {
        width:     100% !important;
        max-width: 100% !important;
        box-sizing: border-box !important;
    }

    /* ── 6. Content container ───────────────────────────────────
       Consistent 12 px side insets keep content from touching
       the screen edge. padding-top provides the clearance gap
       between the navbar bottom and the first card/heading.
       Increase to ≥ 4.5 rem (72 px) in deployments where the
       navbar is made position:sticky / position:fixed.           */
    .container-fluid {
        padding-inline-start: 0.75rem !important;
        padding-inline-end:   0.75rem !important;
        padding-top:    1rem   !important;
        padding-bottom: 2rem   !important;
        max-width: 100%        !important;
        width:     100%        !important;
        box-sizing: border-box !important;
    }

    /* ── 7. Admin layout — sticky topbar compensation ───────────
       .admin-topbar is position:sticky; top:0. The content area
       (.p-4) sits directly below it in the flow, but as the page
       scrolls the topbar pins to the viewport top and content
       can drift behind it. A matching padding-top on the content
       area prevents that.                                        */
    .admin-main > .p-4 {
        padding-top: 4.5rem !important;
    }
}

/* ═══════════════════════════════════════════════════════════════
   EXTRA SMALL  (< 576 px)
   ═══════════════════════════════════════════════════════════════ */
@media (max-width: 575.98px) {

    /* ── 8. Navbar: stack left-group and right-group vertically
       when screen width is too narrow to fit both in one row.
       The left group (hamburger + title) gets full width first;
       the right group (theme / lang / user) wraps below it.     */
    .navbar {
        flex-wrap: wrap !important;
    }

    .navbar > .d-flex.align-items-center {
        flex: 1 1 100% !important;
        min-width: 0   !important;
    }

    .navbar > ul.navbar-nav {
        width: 100% !important;
        justify-content: flex-end !important;
        margin-top: 0.25rem !important;
    }

    /* ── 9. Row gutters ─────────────────────────────────────────
       Bootstrap's negative gutter on .row can bleed past the
       container edge at very narrow widths; reset to zero.      */
    .row {
        margin-inline-start: 0 !important;
        margin-inline-end:   0 !important;
    }

    /* ── 10. Cards — no extra horizontal bleed ─────────────────  */
    .card {
        margin-inline-start: 0 !important;
        margin-inline-end:   0 !important;
    }
}