@media screen and (min-width: 2560px) and (min-height: 1441px) {
    body {
        margin: 0;
        line-height: normal;
        overflow-x: hidden;
        min-height: 100vh;
        background-color: var(--color-gray-100);
    }

    :root {
        /* Color */
        --color-royalblue: #4681ff;
        --color-silver: #c7c7c7;
        --color-gray-100: #2b2b2b;
        --color-lightskyblue: #93c8ff;
        --color-mediumslateblue: #265bff;
        --color-gray-400: rgba(255, 255, 255, 0);
        --color-gray-300: #0d0d0d;
        --color-gray-200: #061135;
        --color-white: #fff;
        --color-darkslateblue: #1d3c92;
        --color-cornflowerblue: #69a5ff;
        --color-darkslategray: #353535;

        /* Gap - scaled for 4K */
        --gap-24: 30px;
        --gap-cards: 50px;
        /* Padding */
        --padding-32: 24px;

        /* BorderRadius */
        --br-32: 24px;
        --br-16: 12px;

        /* Font */
        --font-avenir-next-arabic: Avenir Next Arabic;
        --font-martel-sans: Martel Sans;
        --font-decotype-naskh: DecoType Naskh;
        --font-inter: Inter;

        /* FontSize - scaled for 4K */
        --font-size-32: 24px;
        --font-size-40: 30px;
        --font-size-12: 8px;
        --font-size-19: 14px;
        --font-size-24: 18px;
        --font-size-20: 14px;
    }

    .dashboard {
        width: 100vw;
        min-width: 3840px; /* Scaled for 4K */
        min-height: 100vh;
        height: auto;
        position: relative;
        border-radius: var(--br-32);
        background-color: var(--color-gray-100);
        overflow-x: auto;
        overflow-y: auto;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        padding: var(--padding-32) 48px; /* Increased padding for 4K */
        box-sizing: border-box;
        text-align: left;
        font-size: 84px; /* Scaled from 42px (2x) */
        color: var(--color-white);
        font-family: var(--font-avenir-next-arabic);
    }

    .dashboard-child {
        margin: 0 !important;
        position: relative;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: flex-start;
        padding: var(--padding-32);
        gap: 26px; /* Scaled from 13px (2x) */
        z-index: 0;
        min-width: 3580px; /* Scaled from 1790px (2x) */
        width: 3580px;
        flex-shrink: 0;
    }

    .top-side {
        width: 3580px; /* Scaled from 1790px (2x) */
        display: flex;
        flex-direction: row;
        align-items: center;
        justify-content: flex-start;
        gap: 500px; /* Scaled from 250px (2x) */
    }

    .mapwithcharts {
        display: flex;
        flex-direction: row;
        align-items: flex-start;
        justify-content: flex-end;
        padding: 8px 0px; /* Scaled from 4px (2x) */
        gap: var(--gap-24);
        font-size: 18px; /* Scaled from 9px (2x) */
    }

    .mapwithleftandbottomcharts {
        display: flex;
        flex-direction: row;
        align-items: flex-start;
        justify-content: flex-start;
        gap: var(--gap-24);
    }

    .left-charts {
        border-radius: var(--br-16);
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: var(--gap-cards);
    }

    .left-chart-1,
    .left-chart-2,
    .left-chart-3 {
        position: absolute;
        height: 82.17%;
        width: 92.14%;
        top: 8.99%;
        right: 4.58%;
        bottom: 8.84%;
        left: 3.28%;
    }

    .left-chart1-text {
        position: absolute;
        top: 16px; /* Scaled from 8px (2x) */
        left: 176px; /* Scaled from 88px (2x) */
        width: 354px; /* Scaled from 177px (2x) */
        height: 48px; /* Scaled from 24px (2x) */
        font-size: 26px; /* Scaled from 13px (2x) */
        color: var(--color-silver);
        font-family: var(--font-avenir-next-arabic);
    }

    .b {
        position: absolute;
        top: 0px;
        left: 0px;
    }

    .left-chart1-container,
    .left-chart2-container,
    .left-chart3-container {
        width: 552px; /* Scaled from 276px (2x) */
        position: relative;
        box-shadow: 0px 16px 32px rgba(0, 0, 0, 0.1); /* Scaled shadow (2x) */
        height: 542px; /* Scaled from 271px (2x) */
        text-align: center;
    }

    .left-chart3-container {
        text-align: right;
        font-size: 26px; /* Scaled from 13px (2x) */
    }

    .bg {
        position: absolute;
        top: 0px;
        left: 0px;
        border-radius: 28px; /* Scaled from 14px (2x) */
        background: linear-gradient(126.02deg, #222, #444 49.62%, #6d6d6d);
        width: 100%;
        height: 100%;
    }

    .left-chart2-text {
        position: absolute;
        top: 18px; /* Scaled from 9px (2x) */
        left: 92px; /* Scaled from 46px (2x) */
        font-size: 26px; /* Scaled from 13px (2x) */
        opacity: 0.7;
    }

    .left-chart3-text {
        width: 454px; /* Scaled from 227px (2x) */
        position: relative;
        display: flex;
        align-items: center;
        flex-shrink: 0;
        opacity: 0.7;
    }

    .left-chart3-text-container {
        position: absolute;
        top: 28px; /* Scaled from 14px (2x) */
        left: calc(50% - 198px); /* Scaled from 99px (2x) */
        width: 454px; /* Scaled from 227px (2x) */
        height: 44px; /* Scaled from 22px (2x) */
        display: flex;
        flex-direction: row;
        align-items: center;
        justify-content: center;
    }

    /* Map section */
    .mapandbottomcharts-parent {
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        justify-content: flex-start;
        gap: var(--gap-24);
        text-align: right;
        font-size: var(--font-size-40);
        color: var(--color-gray-100);
    }

    .map {
        width: 1974px; /* Scaled from 987px (2x) */
        height: 1360px; /* Scaled from 680px (2x) */
    }

    .map-icon {
        border-radius: 44px; /* Scaled from 22px (2x) */
        width: 100%;
        height: 100%;
        object-fit: cover;
    }

    .bottom-charts {
        border-radius: var(--br-16);
        display: flex;
        flex-direction: row;
        align-items: center;
        justify-content: center;
        gap: var(--gap-24);
        text-align: left;
        font-size: 12px; /* Scaled from 6px (2x) */
        color: var(--color-white);
        font-family: var(--font-martel-sans);
    }

    .bottom-chart1,
    .bottom-chart2,
    .bottom-chart3,
    .bottom-chart4,
    .bottom-chart5 {
        width: 374px; /* Scaled from 187px (2x) */
        position: relative;
        height: 344px; /* Scaled from 172px (2x) */
    }

    .bg2,
    .bg3,
    .bg4 {
        position: absolute;
        top: 0px;
        left: 0px;
        width: 100%;
        height: 100%;
    }

    .bg3 {
        height: 100%;
    }

    .bg4 {
        height: 100%;
    }

    .bg-child,
    .bg-item {
        position: absolute;
        top: 0px;
        left: 0px;
        border-radius: 16px; /* Scaled from 8px (2x) */
        background: linear-gradient(126.02deg, #222, #444 49.62%, #6d6d6d);
        width: 100%;
        height: 100%;
    }

    .bg-item {
        width: 100%;
        height: 100%;
    }

    .bottom-chart-parent,
    .bottom-chart2-parent,
    .bottom-chart3-parent {
        position: absolute;
        top: 14px; /* Scaled from 7px (2x) */
        left: 112px; /* Scaled from 56px (2x) */
        width: 228px; /* Scaled from 114px (2x) */
        height: 106px; /* Scaled from 53px (2x) */
        text-align: right;
        font-size: 22px; /* Scaled from 11px (2x) */
        font-family: var(--font-avenir-next-arabic);
    }

    .bottom-chart-text-container {
        top: 12px; /* Scaled from 6px (2x) */
        left: 16px; /* Scaled from 8px (2x) */
        width: 324px; /* Scaled from 162px (2x) */
        height: 64px; /* Scaled from 32px (2x) */
    }

    .bottom-chart3-parent {
        top: 12px; /* Scaled from 6px (2x) */
        left: 114px; /* Scaled from 57px (2x) */
    }

    .bottom-chart-text-container {
        position: absolute;
        top: 0px;
        left: 0px;
        display: flex;
        align-items: center;
        width: 228px; /* Scaled from 114px (2x) */
        opacity: 0.7;
    }

    .number {
        position: absolute;
        top: 78px; /* Scaled from 39px (2x) */
        left: 170px; /* Scaled from 85px (2x) */
        font-size: var(--font-size-24);
        opacity: 0.7;
    }

    .p {
        margin: 0;
    }

    .p1 {
        margin: 0;
        font-size: var(--font-size-19);
    }

    .txt {
        width: 100%;
    }

    .span1 {
        font-size: 12px; /* Scaled from 6px (2x) */
    }

    .right-charts {
        align-self: stretch;
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        justify-content: flex-start;
        gap: var(--gap-cards);
        font-size: var(--font-size-24);
        font-family: var(--font-martel-sans);
    }

    .right-chart1,
    .right-chart2,
    .right-chart3 {
        width: 602px; /* Scaled from 301px (2x) */
        position: relative;
        height: 578px; /* Scaled from 289px (2x) */
    }

    .bg7 {
        position: absolute;
        top: 0px;
        left: 0px;
        border-radius: var(--br-32);
        background: linear-gradient(158.47deg, var(--color-gray-100), #424141);
        border: 1px solid var(--color-white);
        box-sizing: border-box;
        width: 100%;
        height: 100%;
    }

    .bg-right-chart3 {
        position: absolute;
        top: 0px;
        left: 0px;
        border-radius: 32px; /* Scaled from 16px (2x) */
        background: linear-gradient(126.02deg, #222, #444 49.62%, #6d6d6d);
        width: 600px; /* Scaled from 300px (2x) */
        height: 480px; /* Scaled from 240px (2x) */
    }

    .right-chart3-text-container {
        position: absolute;
        top: 18px; /* Scaled from 9px (2x) */
        left: 54px; /* Scaled from 27px (2x) */
        width: 526px; /* Scaled from 263px (2x) */
        height: 40px; /* Scaled from 20px (2x) */
        text-align: right;
        font-size: 28px; /* Scaled from 14px (2x) */
    }

    .right-chart3-text {
        position: absolute;
        top: 0px;
        left: 0px;
        line-height: 140%;
        display: inline-block;
        width: 526px; /* Scaled from 263px (2x) */
    }

    .right-cameras {
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        justify-content: flex-start;
        gap: var(--gap-cards);
        text-align: right;
        font-size: 28px; /* Scaled from 14px (2x) */
        font-family: var(--font-inter);
    }

    .right-camera1,
    .right-camera2,
    .right-camera3 {
        width: 602px; /* Scaled from 272px (2x) */
        position: relative;
        border-radius: 18px; /* Scaled from 9px (2x) */
        background-color: var(--color-gray-300);
        height: 578px; /* Scaled from 256px (2x) */
        overflow: hidden;
        flex-shrink: 0;
    }
    .right-camera3 {
        height: 480px;
    }

    .camera-name-text {
        position: absolute;
        top: calc(50% - 22px); /* Scaled from 11px (2x) */
        left: calc(50% - 50px); /* Scaled from 25px (2x) */
        line-height: 44px; /* Scaled from 22px (2x) */
    }

    .camera-name {
        position: absolute;
        top: 44px; /* Scaled from 22px (2x) */
        left: 338px; /* Scaled from 169px (2x) */
        border-radius: 12px; /* Scaled from 6px (2x) */
        background-color: var(--color-darkslategray);
        width: 198px; /* Scaled from 99px (2x) */
        height: 34px; /* Scaled from 17px (2x) */
        overflow: hidden;
        opacity: 0.8;
    }

    /* Bottom section */
    .footer {
        display: flex;
        flex-direction: row;
        align-items: center;
        justify-content: center;
        font-size: var(--font-size-32);
    }

    .footer-inner {
        display: flex;
        flex-direction: row;
        align-items: center;
        justify-content: flex-start;
    }

    .frame {
        width: 724px; /* Scaled from 362px (2x) */
        position: relative;
        height: 38px; /* Scaled from 19px (2x) */
    }
    .right-chart3-button {
        background-color: white;
        color: #6b7280;
        font-weight: 500;
        padding: 8px 32px;
        border-radius: 6px;
        border: none;
        cursor: pointer;
        font-size: 15px;
        font-family: "AvenirNextArabic", sans-serif;
        transition: all 0.2s ease;
        min-width: 200px;
        height: 42px;
        display: flex;
        align-items: center;
        justify-content: center;
    }

    .right-chart3-button:hover {
        background-color: #d1d5db;
        color: #374151;
    }

    /* Routes Filter Button */
    .routes-filter-button {
        position: absolute;
        top: 8px;
        right: 8px;
        background: rgba(255, 255, 255, 0.8);
        color: #374151;
        font-size: 12px;
        padding: 4px 8px;
        border-radius: 9999px;
        box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
        display: flex;
        align-items: center;
        gap: 6px;
        z-index: 10;
        border: none;
        cursor: pointer;
        transition: background-color 0.2s;
    }

    .routes-filter-button:hover {
        background: white;
    }

    .filter-icon {
        height: 12px;
        width: 12px;
    }

    .dropdown-icon {
        height: 8px;
        width: 8px;
        margin-left: 4px;
    }

    /* Routes Filter Menu */
    .routes-filter-menu {
        position: absolute;
        display: none;
        top: 40px;
        right: 8px;
        margin-top: 4px;
        width: 128px;
        border-radius: 6px;
        background: white;
        box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1);
        z-index: 20;
    }

    .filter-menu-content {
        padding: 4px 0;
    }

    .filter-menu-item {
        display: block;
        padding: 8px 16px;
        font-size: 14px;
        color: #374151;
        text-decoration: none;
        display: flex;
        align-items: center;
        gap: 8px;
    }

    .filter-menu-item:hover {
        background-color: #d1d5db;
    }

    .filter-dot {
        width: 8px;
        height: 8px;
        border-radius: 50%;
        display: inline-block;
    }

    .ground-floor {
        background-color: #1e40af;
    }
    .first-floor {
        background-color: #3b82f6;
    }
    .second-floor {
        background-color: #1e3a8a;
    }
    .third-floor {
        background-color: #60a5fa;
    }
    .fourth-floor {
        background-color: #2563eb;
    }

    /* Warning Notification */
    .warning-notification {
        position: absolute;
        bottom: 120px;
        left: 40px;
        z-index: 20;
        max-width: 300px;
    }

    .warning-content {
        background: rgba(51, 51, 51, 0.9);
        border-radius: 12px;
        padding: 16px;
        display: flex;
        flex-direction: column;
        align-items: center;
        box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1);
    }

    .warning-icon {
        margin-bottom: 12px;
        color: #dc2626;
    }

    .warning-icon svg {
        width: 48px;
        height: 48px;
    }

    .warning-text {
        font-size: 20px;
        font-weight: bold;
        color: white;
        text-align: center;
        margin-bottom: 20px;
        margin: 0 0 20px 0;
    }

    .warning-button {
        background: white;
        color: #4b5563;
        font-size: 18px;
        font-weight: 500;
        padding: 8px 24px;
        border-radius: 6px;
        border: none;
        cursor: pointer;
        transition: background-color 0.2s;
        width: 100%;
    }

    .warning-button:hover {
        background-color: #d1d5db;
    }

    /* Camera Legend */
    .camera-legend {
        position: absolute;
        bottom: 40px;
        left: 40px;
        background: #1e2241;
        padding: 8px 16px;
        border-radius: 8px;
        box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1);
        z-index: 10;
        display: flex;
        align-items: center;
        gap: 8px;
    }

    .camera-legend-text {
        color: white;
        font-size: 14px;
    }

    .camera-legend-dot {
        width: 12px;
        height: 12px;
        background-color: #3064c5;
        border-radius: 50%;
    }

    /* Modal Styles */
    .modal-overlay {
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        background-color: rgba(0, 0, 0, 0.5);
        z-index: 1000;
        display: none;
        align-items: center;
        justify-content: center;
    }

    .modal-overlay.show {
        display: flex;
    }

    .modal-content {
        background: var(--color-gray-300);
        border-radius: 24px; /* Scaled from 12px (2x) */
        padding: 32px; /* Scaled from 16px (2x) */
        width: 90%;
        max-width: 1024px; /* Scaled from 512px (2x) */
        box-shadow: 0 50px 100px -24px rgba(0, 0, 0, 0.25); /* Scaled shadow (2x) */
        max-height: 90vh;
        overflow-y: auto;
    }

    .modal-header {
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin-bottom: 24px; /* Scaled from 12px (2x) */
    }

    .modal-title {
        font-size: 36px; /* Scaled from 18px (2x) */
        font-weight: bold;
        color: white;
        margin: 0;
    }

    .modal-close-btn {
        background: none;
        border: none;
        color: white;
        cursor: pointer;
        padding: 8px; /* Scaled from 4px (2x) */
        border-radius: 8px; /* Scaled from 4px (2x) */
        transition: color 0.2s;
    }

    .modal-close-btn:hover {
        color: #9ca3af;
    }

    .close-icon {
        height: 48px; /* Scaled from 24px (2x) */
        width: 48px; /* Scaled from 24px (2x) */
    }

    .modal-body {
        margin-bottom: 32px; /* Scaled from 16px (2x) */
    }

    .capacity-container {
        background: var(--color-gray-200);
        border-radius: 16px; /* Scaled from 8px (2x) */
        padding: 24px; /* Scaled from 12px (2x) */
        margin-bottom: 24px; /* Scaled from 12px (2x) */
    }

    .capacity-info {
        display: flex;
        justify-content: space-between;
        margin-bottom: 8px; /* Scaled from 4px (2x) */
    }

    .capacity-label {
        color: #9ca3af;
        font-size: 28px; /* Scaled from 14px (2x) */
    }

    .capacity-percentage {
        color: white;
        font-size: 28px; /* Scaled from 14px (2x) */
        font-weight: bold;
    }

    .capacity-bar-container {
        height: 16px; /* Scaled from 8px (2x) */
        background: #374151;
        border-radius: 9999px;
        overflow: hidden;
        margin-bottom: 8px; /* Scaled from 4px (2x) */
    }

    .capacity-bar {
        height: 100%;
        background: #10b981;
        transition: all 0.5s;
        width: 0%;
    }

    .capacity-details {
        display: flex;
        justify-content: space-between;
        margin-top: 8px; /* Scaled from 4px (2x) */
        font-size: 24px; /* Scaled from 12px (2x) */
        color: #9ca3af;
    }

    .cameras-title {
        color: white;
        font-weight: 600;
        margin-bottom: 16px; /* Scaled from 8px (2x) */
        font-size: 28px; /* Scaled from 14px (2x) */
    }

    .cameras-table-container {
        max-height: 40vh;
        overflow-y: auto;
        margin-bottom: 32px; /* Scaled from 16px (2x) */
    }

    .cameras-table {
        width: 100%;
        font-size: 28px; /* Scaled from 14px (2x) */
        border-collapse: collapse;
    }

    .cameras-table thead th {
        color: #9ca3af;
        border-bottom: 1px solid #374151;
        padding: 16px; /* Scaled from 8px (2x) */
        text-align: center;
    }

    .cameras-table thead th:first-child {
        text-align: right;
    }

    .cameras-table tbody td {
        color: white;
        padding: 16px; /* Scaled from 8px (2x) */
        text-align: center;
        border-bottom: 1px solid rgba(55, 65, 81, 0.3);
    }

    .cameras-table tbody td:first-child {
        text-align: right;
    }

    .no-cameras {
        color: #6b7280 !important;
        text-align: center !important;
        padding: 24px !important; /* Scaled from 12px (2x) */
    }

    .notification-detail-container {
        background: var(--color-gray-200);
        border-radius: 16px; /* Scaled from 8px (2x) */
        padding: 32px; /* Scaled from 16px (2x) */
    }

    .notification-detail-title {
        color: white;
        font-size: 32px; /* Scaled from 16px (2x) */
        font-weight: bold;
        margin: 0 0 16px 0; /* Scaled from 8px (2x) */
    }

    .notification-detail-time {
        color: #9ca3af;
        font-size: 24px; /* Scaled from 12px (2x) */
        margin: 0 0 24px 0; /* Scaled from 12px (2x) */
    }

    .notification-detail-content {
        color: white;
        font-size: 28px; /* Scaled from 14px (2x) */
        margin: 0;
        line-height: 1.5;
    }

    .modal-footer {
        display: flex;
        justify-content: flex-end;
        margin-top: 48px; /* Scaled from 24px (2x) */
    }

    .modal-btn {
        background: #3b82f6;
        color: white;
        padding: 16px 32px; /* Scaled from 8px 16px (2x) */
        border-radius: 12px; /* Scaled from 6px (2x) */
        border: none;
        cursor: pointer;
        transition: background-color 0.2s;
        font-size: 28px; /* Scaled from 14px (2x) */
    }

    .modal-btn:hover {
        background: #2563eb;
    }

    /* Camera container styles */
    .camera-video-container {
        width: 100%;
        height: 100%;
        background: #374151;
        display: flex;
        align-items: center;
        justify-content: center;
        position: relative;
        border-radius: 16px; /* Scaled from 8px (2x) */
        overflow: hidden;
    }

    .camera-placeholder {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        color: #9ca3af;
        text-align: center;
        height: 100%;
        width: 100%;
    }

    .placeholder-icon {
        width: 96px; /* Scaled from 48px (2x) */
        height: 96px; /* Scaled from 48px (2x) */
        margin-bottom: 24px; /* Scaled from 12px (2x) */
        stroke: currentColor;
    }

    .placeholder-text {
        font-size: 28px; /* Scaled from 14px (2x) */
        font-weight: 500;
    }

    .camera-error {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        color: #dc2626;
        text-align: center;
        height: 100%;
        width: 100%;
    }

    .error-icon {
        width: 96px; /* Scaled from 48px (2x) */
        height: 96px; /* Scaled from 48px (2x) */
        margin-bottom: 24px; /* Scaled from 12px (2x) */
        stroke: currentColor;
    }

    .error-text {
        font-size: 28px; /* Scaled from 14px (2x) */
        font-weight: 500;
    }

    .right-camera1 .bg-gray-700,
    .right-camera2 .bg-gray-700,
    .right-camera3 .bg-gray-700 {
        width: 100%;
        height: calc(100%); /* Leave space for camera name */
        display: flex;
        align-items: center;
        justify-content: center;
        position: relative;
        border-radius: 16px 16px 0 0; /* Scaled from 8px (2x) */
    }

    /* Header Styles */
    .main-header {
        background: var(--color-gray-100);
        padding: 24px; /* Scaled from 12px (2x) */
        margin-bottom: 32px; /* Scaled from 16px (2x) */
        border-radius: 16px; /* Scaled from 8px (2x) */
        box-shadow: 0 8px 12px rgba(0, 0, 0, 0.1); /* Scaled shadow (2x) */
    }

    .header-container {
        display: flex;
        justify-content: space-between;
        align-items: center;
    }

    .header-logo {
        height: 64px; /* Scaled from 32px (2x) */
    }

    .header-actions {
        display: flex;
        align-items: center;
        gap: 16px; /* Scaled from 8px (2x) */
    }

    .notification-container {
        position: relative;
    }

    .notification-button {
        display: flex;
        align-items: center;
        justify-content: center;
        border-radius: 12px; /* Scaled from 6px (2x) */
        background: white;
        padding: 12px 16px; /* Scaled from 6px 8px (2x) */
        color: #374151;
        transition: background-color 0.15s ease-in-out;
        border: none;
        cursor: pointer;
        position: relative;
    }

    .notification-button:hover {
        background: #d1d5db;
    }

    .notification-icon {
        height: 40px; /* Scaled from 20px (2x) */
        width: 40px; /* Scaled from 20px (2x) */
    }

    .notification-badge {
        position: absolute;
        top: -8px; /* Scaled from -4px (2x) */
        right: -8px; /* Scaled from -4px (2x) */
        background: #ef4444;
        color: white;
        font-size: 24px; /* Scaled from 12px (2x) */
        width: 32px; /* Scaled from 16px (2x) */
        height: 32px; /* Scaled from 16px (2x) */
        display: flex;
        align-items: center;
        justify-content: center;
        border-radius: 50%;
    }

    .notifications-dropdown {
        display: none;
        position: absolute;
        left: 0;
        top: calc(100% + 16px); /* Scaled from 8px (2x) */
        width: 576px; /* Scaled from 288px (2x) */
        border-radius: 12px; /* Scaled from 6px (2x) */
        background: var(--color-gray-100);
        box-shadow: 0 20px 30px rgba(0, 0, 0, 0.1); /* Scaled shadow (2x) */
        border: 1px solid rgba(59, 130, 246, 0.3);
        z-index: 50;
    }

    .notifications-dropdown.show {
        display: block;
    }

    .dropdown-header {
        padding: 24px; /* Scaled from 12px (2x) */
        display: flex;
        align-items: center;
        justify-content: space-between;
        border-bottom: 1px solid rgba(59, 130, 246, 0.3);
    }

    .dropdown-title {
        font-size: 28px; /* Scaled from 14px (2x) */
        color: white;
        font-weight: bold;
    }

    .mark-read-btn {
        font-size: 24px; /* Scaled from 12px (2x) */
        color: #60a5fa;
        background: none;
        border: none;
        cursor: pointer;
    }

    .mark-read-btn:hover {
        color: #93c5fd;
    }

    .notifications-list {
        max-height: 576px; /* Scaled from 288px (2x) */
        overflow-y: auto;
    }

    .notification-item {
        padding: 24px; /* Scaled from 12px (2x) */
        border-bottom: 1px solid rgba(55, 65, 81, 0.5);
        cursor: pointer;
    }

    .notification-item:hover {
        background: rgba(43, 43, 43, 0.1);
    }

    .notification-content {
        display: flex;
        align-items: flex-start;
        gap: 16px; /* Scaled from 8px (2x) */
    }

    .notification-dot {
        height: 16px; /* Scaled from 8px (2x) */
        width: 16px; /* Scaled from 8px (2x) */
        margin-top: 12px; /* Scaled from 6px (2x) */
        border-radius: 50%;
        flex-shrink: 0;
        background: #ef4444;
    }

    .notification-dot.blue {
        background: #3b82f6;
    }

    .notification-dot.red {
        background: #ef4444;
    }

    .notification-text {
        flex-grow: 1;
    }

    .notification-message {
        color: white;
        font-size: 28px; /* Scaled from 14px (2x) */
        margin: 0 0 8px 0; /* Scaled from 4px (2x) */
    }

    .notification-time {
        color: #9ca3af;
        font-size: 24px; /* Scaled from 12px (2x) */
        margin: 0;
    }

    .dropdown-footer {
        padding: 16px; /* Scaled from 8px (2x) */
        text-align: center;
        border-top: 1px solid rgba(55, 65, 81, 0.5);
    }

    .view-all-link {
        color: #60a5fa;
        font-size: 24px; /* Scaled from 12px (2x) */
        text-decoration: none;
    }

    .view-all-link:hover {
        color: #93c5fd;
    }

    .action-buttons {
        display: flex;
        align-items: center;
        gap: 16px; /* Scaled from 8px (2x) */
    }

    .action-btn {
        background: white;
        color: #374151;
        font-size: 24px; /* Scaled from 12px (2x) */
        padding: 12px 32px; /* Scaled from 6px 16px (2x) */
        border-radius: 12px; /* Scaled from 6px (2x) */
        transition: background-color 0.2s;
        text-decoration: none;
        border: none;
        cursor: pointer;
    }

    .action-btn:hover {
        background: #d1d5db;
    }

    /* Project Banner Styles */
    .project-banner {
        margin-bottom: 32px; /* Scaled from 16px (2x) */
        padding: 24px; /* Scaled from 12px (2x) */
        border-radius: 24px; /* Scaled from 12px (2x) */
        background: var(--color-gray-100);
    }

    .banner-container {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 48px; /* Scaled from 24px (2x) */
    }

    .date-selector-container {
        width: auto;
    }

    .date-selector-wrapper {
        position: relative;
        max-width: 460px; /* Scaled from 230px (2x) */
    }

    .date-selector {
        width: 100%;
        background: var(--color-gray-100);
        color: white;
        font-size: 32px; /* Scaled from 16px (2x) */
        padding: 16px 32px 16px 80px; /* Scaled from 8px 16px 8px 40px (2x) */
        border-radius: 12px; /* Scaled from 6px (2x) */
        border: 1px solid rgba(255, 255, 255, 0.3);
        transition: border-color 0.2s;
        appearance: none;
        cursor: pointer;
        box-shadow: 0 8px 12px rgba(0, 0, 0, 0.1); /* Scaled shadow (2x) */
    }

    .date-selector:hover {
        border-color: white;
    }

    .date-selector:focus {
        outline: none;
        ring: 2px;
        ring-offset: 2px;
        ring-color: #60a5fa;
    }

    .dropdown-arrow {
        pointer-events: none;
        position: absolute;
        top: 57%;
        left: 24px; /* Scaled from 12px (2x) */
        transform: translateY(-50%);
        color: white;
    }

    .dropdown-arrow svg {
        height: 40px; /* Scaled from 20px (2x) */
        width: 40px; /* Scaled from 20px (2x) */
    }

    .banner-center {
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 48px; /* Scaled from 24px (2x) */
        flex: 1;
    }


    .project-title {
        text-align: center;
        font-size: 64px; /* Scaled from 32px (2x) */
        font-weight: bold;
        color: white;
        margin: 0;
    }

    .right-logos {
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 32px; /* Scaled from 16px (2x) */
    }

    .right-logo {
        height: 160px; /* Scaled from 80px (2x) */
    }

    /* Loading styles */
    .camera-loading {
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        display: flex;
        align-items: center;
        justify-content: center;
        background: rgba(0, 0, 0, 0.5);
        color: white;
        font-size: 28px; /* Scaled from 14px (2x) */
        z-index: 10;
    }

    .loading-content {
        display: flex;
        flex-direction: column;
        align-items: center;
    }

    .loading-spinner {
        width: 64px; /* Scaled from 32px (2x) */
        height: 64px; /* Scaled from 32px (2x) */
        border: 4px solid #ffffff; /* Scaled from 2px (2x) */
        border-top: 4px solid transparent; /* Scaled from 2px (2x) */
        border-radius: 50%;
        animation: spin 1s linear infinite;
        margin-bottom: 16px; /* Scaled from 8px (2x) */
    }

    @keyframes spin {
        0% {
            transform: rotate(0deg);
        }

        100% {
            transform: rotate(360deg);
        }
    }

    /* LOS Modal Styles */
    .los-legend-container {
        display: flex;
        justify-content: space-around;
        margin-bottom: 40px; /* Scaled from 20px (2x) */
        padding: 24px; /* Scaled from 12px (2x) */
        background: var(--color-gray-200);
        border-radius: 16px; /* Scaled from 8px (2x) */
    }

    .los-legend-item {
        display: flex;
        align-items: center;
        gap: 16px; /* Scaled from 8px (2x) */
    }

    .los-badge {
        padding: 8px 16px; /* Scaled from 4px 8px (2x) */
        border-radius: 8px; /* Scaled from 4px (2x) */
        font-size: 24px; /* Scaled from 12px (2x) */
        font-weight: bold;
        min-width: 60px; /* Scaled from 30px (2x) */
        text-align: center;
    }

    .los-a-d {
        background: #10b981;
        color: white;
    }

    .los-e {
        background: #f59e0b;
        color: white;
    }

    .los-f {
        background: #ef4444;
        color: white;
    }

    .los-label {
        color: white;
        font-size: 28px; /* Scaled from 14px (2x) */
    }

    .los-table-container {
        max-height: 50vh;
        overflow-y: auto;
        margin-bottom: 32px; /* Scaled from 16px (2x) */
        border: 1px solid rgba(55, 65, 81, 0.3);
        border-radius: 16px; /* Scaled from 8px (2x) */
    }

    .los-table {
        width: 100%;
        font-size: 28px; /* Scaled from 14px (2x) */
        border-collapse: collapse;
    }

    .los-table thead th {
        background: var(--color-gray-200);
        color: #9ca3af;
        border-bottom: 1px solid #374151;
        padding: 24px 16px; /* Scaled from 12px 8px (2x) */
        text-align: center;
        position: sticky;
        top: 0;
        z-index: 10;
    }

    .los-table thead th:first-child {
        text-align: right;
    }

    .los-table tbody td {
        color: white;
        padding: 24px 16px; /* Scaled from 12px 8px (2x) */
        text-align: center;
        border-bottom: 1px solid rgba(55, 65, 81, 0.3);
    }

    .los-table tbody td:first-child {
        text-align: right;
        font-weight: 500;
    }

    .los-table tbody tr:hover {
        background: rgba(55, 65, 81, 0.2);
    }

    .floor-badge {
        padding: 4px 16px; /* Scaled from 2px 8px (2x) */
        border-radius: 8px; /* Scaled from 4px (2x) */
        font-size: 24px; /* Scaled from 12px (2x) */
        font-weight: 500;
    }

    .floor-ground {
        background: #6366f1;
        color: white;
    }

    .floor-1st {
        background: #8b5cf6;
        color: white;
    }

    .floor-2nd {
        background: #06b6d4;
        color: white;
    }

    .floor-3rd {
        background: #10b981;
        color: white;
    }

    .floor-4th {
        background: #f59e0b;
        color: white;
    }

    .loading-cell {
        text-align: center !important;
        padding: 40px !important; /* Scaled from 20px (2x) */
    }

    .los-pagination {
        display: flex;
        justify-content: center;
        align-items: center;
        gap: 32px; /* Scaled from 16px (2x) */
        margin-top: 32px; /* Scaled from 16px (2x) */
    }

    .pagination-btn {
        background: #3b82f6;
        color: white;
        padding: 12px 24px; /* Scaled from 6px 12px (2x) */
        border-radius: 8px; /* Scaled from 4px (2x) */
        border: none;
        cursor: pointer;
        font-size: 28px; /* Scaled from 14px (2x) */
        transition: background-color 0.2s;
    }

    .pagination-btn:hover:not(:disabled) {
        background: #2563eb;
    }

    .pagination-btn:disabled {
        background: #6b7280;
        cursor: not-allowed;
    }

    .page-info {
        color: white;
        font-size: 28px; /* Scaled from 14px (2x) */
    }

    /* LOS Modal Filters */
    .los-filters-container {
        display: flex;
        gap: 40px; /* Scaled from 20px (2x) */
        margin-bottom: 40px; /* Scaled from 20px (2x) */
        padding: 32px; /* Scaled from 16px (2x) */
        background: var(--color-gray-200);
        border-radius: 16px; /* Scaled from 8px (2x) */
        align-items: end;
    }

    .filter-group {
        display: flex;
        flex-direction: column;
        gap: 12px; /* Scaled from 6px (2x) */
    }

    .filter-label {
        color: white;
        font-size: 28px; /* Scaled from 14px (2x) */
        font-weight: 500;
    }

    .filter-select {
        background: var(--color-gray-100);
        color: white;
        font-size: 28px; /* Scaled from 14px (2x) */
        padding: 16px 24px; /* Scaled from 8px 12px (2x) */
        border-radius: 12px; /* Scaled from 6px (2x) */
        border: 1px solid rgba(255, 255, 255, 0.3);
        transition: border-color 0.2s;
        cursor: pointer;
        min-width: 300px; /* Scaled from 150px (2x) */
    }

    .filter-select:hover {
        border-color: white;
    }

    .filter-select:focus {
        outline: none;
        border-color: #60a5fa;
        box-shadow: 0 0 0 4px rgba(96, 165, 250, 0.2); /* Scaled from 2px (2x) */
    }

    .chart-dropdown {
        display: none;
        position: absolute;
        top: 90px; /* Scaled from 45px (2x) */
        right: 16px; /* Scaled from 8px (2x) */
        width: 360px; /* Scaled from 180px (2x) */
        border-radius: 12px; /* Scaled from 6px (2x) */
        background: var(--color-gray-100);
        box-shadow: 0 20px 30px rgba(0, 0, 0, 0.1); /* Scaled shadow (2x) */
        border: 1px solid rgba(59, 130, 246, 0.3);
        z-index: 20;
        overflow: hidden;
    }

    .chart-dropdown.show {
        display: block;
    }

    .chart-dropdown-content {
        padding: 8px; /* Scaled from 4px (2x) */
    }

    .chart-dropdown-item {
        display: block;
        width: 100%;
        padding: 16px 24px; /* Scaled from 8px 12px (2x) */
        color: white;
        text-decoration: none;
        font-size: 28px; /* Scaled from 14px (2x) */
        border-radius: 8px; /* Scaled from 4px (2x) */
        transition: background-color 0.2s;
        margin: 0;
        box-sizing: border-box;
    }

    .chart-dropdown-item:hover {
        background: rgba(59, 130, 246, 0.2);
        color: white;
    }

    .chart-dropdown-item:active {
        background: rgba(59, 130, 246, 0.3);
    }

    /* Ensure dropdown appears above other elements */
    .right-chart1,
    .right-chart2 {
        z-index: 1;
    }

    .view-camera-btn {
        background: #3b82f6;
        color: white;
        padding: 8px 24px; /* Scaled from 4px 12px (2x) */
        border-radius: 8px; /* Scaled from 4px (2x) */
        border: none;
        cursor: pointer;
        font-size: 24px; /* Scaled from 12px (2x) */
        transition: background-color 0.2s;
        font-family: "AvenirNextArabic", sans-serif;
    }

    .view-camera-btn:hover {
        background: #2563eb;
    }

    .view-camera-btn:active {
        background: #1d4ed8;
    }

    /* Ensure the action column has appropriate width */
    .cameras-table thead th:last-child,
    .cameras-table tbody td:last-child {
        width: 160px; /* Scaled from 80px (2x) */
        min-width: 160px; /* Scaled from 80px (2x) */
    }

    .all-notifications-list {
        max-height: 50vh;
        overflow-y: auto;
        margin-bottom: 40px; /* Scaled from 20px (2x) */
    }

    .all-notification-item {
        display: flex;
        align-items: flex-start;
        gap: 24px; /* Scaled from 12px (2x) */
        padding: 32px; /* Scaled from 16px (2x) */
        border-bottom: 1px solid rgba(55, 65, 81, 0.3);
        cursor: pointer;
        transition: background-color 0.2s;
    }

    .all-notification-item:hover {
        background: rgba(43, 43, 43, 0.1);
    }

    .all-notification-item.unread {
        background: rgba(59, 130, 246, 0.1);
        border-left: 6px solid #3b82f6; /* Scaled from 3px (2x) */
    }

    .all-notification-icon {
        flex-shrink: 0;
        width: 80px; /* Scaled from 40px (2x) */
        height: 80px; /* Scaled from 40px (2x) */
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
        margin-top: 8px; /* Scaled from 4px (2x) */
    }

    .all-notification-icon.capacity-warning {
        background: rgba(239, 68, 68, 0.2);
        color: #ef4444;
    }

    .all-notification-icon.los-warning {
        background: rgba(245, 158, 11, 0.2);
        color: #f59e0b;
    }

    .all-notification-icon svg {
        width: 40px; /* Scaled from 20px (2x) */
        height: 40px; /* Scaled from 20px (2x) */
    }

    .all-notification-content {
        flex: 1;
        min-width: 0;
    }

    .all-notification-header {
        display: flex;
        justify-content: space-between;
        align-items: flex-start;
        margin-bottom: 16px; /* Scaled from 8px (2x) */
    }

    .all-notification-title {
        color: white;
        font-size: 32px; /* Scaled from 16px (2x) */
        font-weight: 600;
        margin: 0;
    }

    .all-notification-time {
        color: #9ca3af;
        font-size: 24px; /* Scaled from 12px (2x) */
        white-space: nowrap;
    }

    .all-notification-message {
        color: #d1d5db;
        font-size: 28px; /* Scaled from 14px (2x) */
        line-height: 1.5;
        margin: 0;
    }

    .all-notification-floor {
        display: inline-block;
        background: rgba(59, 130, 246, 0.2);
        color: #60a5fa;
        padding: 4px 16px; /* Scaled from 2px 8px (2x) */
        border-radius: 24px; /* Scaled from 12px (2x) */
        font-size: 24px; /* Scaled from 12px (2x) */
        font-weight: 500;
        margin-top: 16px; /* Scaled from 8px (2x) */
    }

    .notifications-pagination {
        display: flex;
        justify-content: center;
        align-items: center;
        gap: 32px; /* Scaled from 16px (2x) */
        padding: 32px 0; /* Scaled from 16px (2x) */
        border-top: 1px solid rgba(55, 65, 81, 0.3);
    }

    .all-notifications-loading {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        padding: 80px; /* Scaled from 40px (2x) */
        color: #9ca3af;
    }

    .all-notifications-loading .loading-spinner {
        width: 64px; /* Scaled from 32px (2x) */
        height: 64px; /* Scaled from 32px (2x) */
        border: 4px solid #374151; /* Scaled from 2px (2x) */
        border-top: 4px solid #60a5fa; /* Scaled from 2px (2x) */
        border-radius: 50%;
        animation: spin 1s linear infinite;
        margin-bottom: 24px; /* Scaled from 12px (2x) */
    }

    .all-notifications-empty {
        text-align: center;
        padding: 80px; /* Scaled from 40px (2x) */
        color: #9ca3af;
    }

    .all-notifications-error {
        text-align: center;
        padding: 80px; /* Scaled from 40px (2x) */
        color: #ef4444;
    }

    .camera-video-container {
        width: 100%;
        height: 100%;
        background: #374151;
        display: flex;
        align-items: center;
        justify-content: center;
        position: relative;
        border-radius: 16px; /* Scaled from 8px (2x) */
        overflow: hidden;
    }

    .camera-video {
        width: 100%;
        height: 100%;
        object-fit: cover;
    }

    .camera-name {
        position: absolute;
        bottom: 12px; /* Scaled from 6px (2x) */
        right: 12px; /* Scaled from 6px (2x) */
        background: rgba(0, 0, 0, 0.7);
        color: white;
        padding: 8px 16px; /* Scaled from 4px 8px (2x) */
        border-radius: 8px; /* Scaled from 4px (2x) */
        font-size: 24px; /* Scaled from 12px (2x) */
        z-index: 10;
        font-weight: 500;
    }

    .camera-name-text {
        color: white;
        font-weight: 500;
    }


.camera-marker-label {
    text-shadow: 0 2px 8px rgba(0, 0, 0, 0.8), 0 1px 4px rgba(0, 0, 0, 0.6) !important;
    color: white !important;
    white-space: nowrap !important;
    text-align: center !important;
    font-weight: 600 !important;
    font-size: 13px !important;
    font-family: "Avenir Next Arabic", Arial, sans-serif !important;
    letter-spacing: 0.3px !important;
    /* Position the label above the marker with enhanced spacing */
    transform: translateY(-20px) !important;
    /* Add background with border for better visibility */
    background: linear-gradient(
        135deg,
        rgba(0, 0, 0, 0.8),
        rgba(30, 30, 30, 0.9)
    ) !important;
    padding: 4px 8px !important;
    border-radius: 6px !important;
    border: 1px solid rgba(255, 255, 255, 0.2) !important;
    backdrop-filter: blur(4px) !important;
    /* Add subtle animation */
    transition: all 0.3s ease !important;
    /* Ensure proper z-index */
    z-index: 1000 !important;
    /* Add slight glow effect */
    box-shadow: 0 0 10px rgba(255, 255, 255, 0.1), 0 2px 8px rgba(0, 0, 0, 0.3) !important;
}

/* Hover effect for camera marker labels */
.camera-marker-label:hover {
    transform: translateY(-22px) scale(1.05) !important;
    background: linear-gradient(
        135deg,
        rgba(59, 130, 246, 0.9),
        rgba(37, 99, 235, 0.9)
    ) !important;
    border-color: rgba(255, 255, 255, 0.4) !important;
    box-shadow: 0 0 15px rgba(59, 130, 246, 0.3), 0 4px 12px rgba(0, 0, 0, 0.4) !important;
}

}