@import url('https://fonts.googleapis.com/css2?family=Cairo:wght@400;600;700&family=Roboto:wght@400;700&display=swap');
body { font-family: 'Cairo', 'Roboto', sans-serif; background-color: #020617; color: white; }
.roi-box { position: absolute; border: 2px solid #facc15; background: rgba(250,204,21,0.1); touch-action: none; z-index: 30; cursor: move; }
.roi-box:hover { border-color: #fde047; background: rgba(250,204,21,0.2); }
.direction-arrow { position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); font-size: 24px; color: #facc15; pointer-events: auto; cursor: pointer; transition: all 0.2s ease; user-select: none; }
.direction-arrow:hover { transform: translate(-50%,-50%) scale(1.3); }
.glass-dark { background: rgba(15,23,42,0.8); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); border: 1px solid rgba(59,130,246,0.2); }
#map { height: 200px; width: 100%; border-radius: 1rem; z-index: 10; }
#stage { position: relative !important; }
.rtl { direction: rtl; text-align: right; }
.ltr { direction: ltr; text-align: left; }
.resize-handle { position: absolute; bottom: 0; right: 0; width: 14px; height: 14px; background: #facc15; cursor: nwse-resize; border-radius: 2px 0 4px 0; z-index: 31; }
body::after{content:'TrafficCOUNT © 2026';position:fixed;bottom:8px;right:12px;font-size:9px;color:rgba(148,163,184,0.25);pointer-events:none;z-index:9999;font-family:Cairo,sans-serif;}
::-webkit-scrollbar { width: 6px; }
::-webkit-scrollbar-track { background: rgba(30,41,59,0.5); border-radius: 10px; }
::-webkit-scrollbar-thumb { background: rgba(100,116,139,0.5); border-radius: 10px; }
.pulse-green { animation: pulseGreen 2s infinite; }
@keyframes pulseGreen { 0%,100%{box-shadow:0 0 0 0 rgba(34,197,94,.4)}50%{box-shadow:0 0 0 8px rgba(34,197,94,0)} }
.fade-in { animation: fadeIn 0.3s ease-in; }
@keyframes fadeIn { from{opacity:0;transform:translateY(10px)} to{opacity:1;transform:translateY(0)} }
.violation-item { border-left: 3px solid #ef4444; padding-left: 10px; }
video::-webkit-media-controls { display: none; }
#draw-canvas { position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: 40; cursor: default; }
@media print {
    body { background: white !important; color: black !important; }
    .glass-dark { background: white !important; border: 1px solid #ddd !important; -webkit-backdrop-filter: none !important; backdrop-filter: none !important; }
    #login-screen, #main-app > div:first-child, .no-print { display: none !important; }
    #main-app { display: block !important; }
    .roi-box, #overlay-msg, #draw-canvas, #analysis-canvas, #toast { display: none !important; }
}
@media (max-width: 768px) {
    /* Mobile Camera / expanded mode: video at top, controls + stats below, scrollable.
       Never hide controls (no display:none on panels). */
    body.mobile-fullscreen { overflow-y: auto !important; }
    .mobile-fullscreen #main-app > .grid {
        display: flex !important;
        flex-direction: column !important;
        gap: 1.5rem !important;
    }
    .mobile-fullscreen #main-app > .grid > div:nth-child(1) { order: 2 !important; } /* left: Statistics / Video Source */
    .mobile-fullscreen #main-app > .grid > div:nth-child(2) { order: 1 !important; } /* middle: video first */
    .mobile-fullscreen #main-app > .grid > div:nth-child(3) { order: 3 !important; } /* right: Analysis controls */
    .mobile-fullscreen #stage {
        position: relative !important;
        top: auto !important;
        left: auto !important;
        width: 100% !important;
        height: min(62vh, 350px) !important;
        aspect-ratio: auto !important;
        border-radius: 1rem !important;
        border: 4px solid #1e293b !important;
        z-index: 1 !important;
    }
    /* Fill (not contain) so the displayed video matches the stage rect exactly,
       keeping ROI + detection overlay aligned even at a non-16:9 preview size. */
    .mobile-fullscreen #main-video,
    body.stage-expanded #main-video { object-fit: fill !important; }
    .mobile-fullscreen .xl\:col-span-1 { display: block !important; }
    .mobile-fullscreen #fullscreen-btn { display: inline-flex !important; }
    /* Fullscreen button: enlarge the video in-flow (controls stay scrollable below, never hidden). */
    body.stage-expanded #stage {
        height: 92vh !important;
        max-height: 92vh !important;
        width: 100% !important;
        border-radius: 0 !important;
        border: none !important;
    }
    #stage:-webkit-full-screen { width: 100vw !important; height: 100vh !important; }
    #stage:-moz-full-screen { width: 100vw !important; height: 100vh !important; }
    #stage:fullscreen { width: 100vw !important; height: 100vh !important; }
}