/* ==========================================================================
   PATROLQR — DESIGN SYSTEM v4.0 (A1–A6 Hardened)
   ========================================================================== */
:root {
  --bg-primary: #0b0f19; --bg-secondary: #111827; --bg-card: rgba(17,24,39,0.75);
  --bg-glass: rgba(30,41,59,0.5); --border-glass: rgba(255,255,255,0.1);
  --border-glass-glow: rgba(99,102,241,0.3);
  --accent-primary: #6366f1; --accent-primary-hover: #4f46e5;
  --accent-secondary: #06b6d4; --accent-success: #10b981;
  --accent-warning: #f59e0b; --accent-danger: #ef4444; --accent-purple: #a855f7;
  --text-main: #f9fafb; --text-muted: #9ca3af; --text-dim: #6b7280;
  --shadow-sm: 0 2px 4px rgba(0,0,0,0.3);
  --shadow-lg: 0 10px 25px -5px rgba(0,0,0,0.5),0 8px 10px -6px rgba(0,0,0,0.5);
  --shadow-glow: 0 0 20px rgba(99,102,241,0.25);
  --radius-sm: 8px; --radius-md: 14px; --radius-lg: 20px; --radius-full: 9999px;
  --transition-fast: 0.2s cubic-bezier(0.4,0,0.2,1);
  --transition-smooth: 0.35s cubic-bezier(0.4,0,0.2,1);
}
body.light-theme {
  --bg-primary:#f1f5f9;--bg-secondary:#fff;--bg-card:rgba(255,255,255,0.85);
  --bg-glass:rgba(241,245,249,0.7);--border-glass:rgba(0,0,0,0.1);
  --border-glass-glow:rgba(99,102,241,0.25);--text-main:#0f172a;
  --text-muted:#475569;--text-dim:#94a3b8;
  --shadow-lg:0 10px 25px -5px rgba(0,0,0,0.1),0 8px 10px -6px rgba(0,0,0,0.08);
  --shadow-glow:0 0 20px rgba(99,102,241,0.15);
}
body.light-theme .glass-panel{background:var(--bg-card);border-color:var(--border-glass);}
body.light-theme .form-control{background:rgba(241,245,249,0.9);border-color:#cbd5e1;color:#0f172a;}
body.light-theme .cp-item{background:rgba(248,250,252,0.8);border-color:#e2e8f0;}
body.light-theme .cp-item:hover{background:rgba(241,245,249,1);}
body.light-theme .nav-tabs{background:rgba(226,232,240,0.8);}
body.light-theme .data-table th{background:rgba(241,245,249,0.8);color:#475569;}
body.light-theme .hotline-bar{background:rgba(254,226,226,0.5);border-color:rgba(239,68,68,0.2);}
body.light-theme .hotline-chip{background:rgba(255,255,255,0.8);border-color:#e2e8f0;color:#334155;}
body.light-theme .sos-fab{box-shadow:0 4px 16px rgba(239,68,68,0.4);}

*,*::before,*::after{box-sizing:border-box;margin:0;padding:0;}
body{font-family:'Plus Jakarta Sans',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif;background-color:var(--bg-primary);color:var(--text-main);background-image:radial-gradient(circle at 15% 15%,rgba(99,102,241,0.08) 0%,transparent 40%),radial-gradient(circle at 85% 85%,rgba(6,182,212,0.06) 0%,transparent 40%);background-attachment:fixed;min-height:100vh;line-height:1.5;-webkit-font-smoothing:antialiased;transition:background-color 0.4s ease,color 0.3s ease;}
.glass-panel{background:var(--bg-card);backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);border:1px solid var(--border-glass);border-radius:var(--radius-lg);box-shadow:var(--shadow-lg);transition:border-color var(--transition-fast),box-shadow var(--transition-fast),background var(--transition-fast);}
.glass-panel:hover{border-color:var(--border-glass-glow);}
.app-container{display:flex;flex-direction:column;min-height:100vh;max-width:1600px;margin:0 auto;padding:0 1.5rem 2rem;}

/* Navbar */
.navbar{display:flex;align-items:center;justify-content:space-between;padding:1.25rem 0;border-bottom:1px solid var(--border-glass);margin-bottom:0.75rem;}
.brand{display:flex;align-items:center;gap:0.85rem;}
.logo-icon{width:46px;height:46px;background:linear-gradient(135deg,var(--accent-primary),var(--accent-secondary));border-radius:var(--radius-md);display:flex;align-items:center;justify-content:center;font-size:1.5rem;color:#fff;box-shadow:var(--shadow-glow);}
.brand-text h1{font-size:1.4rem;font-weight:800;letter-spacing:-0.5px;line-height:1;}
.brand-text h1 span{color:var(--accent-secondary);}
.brand-text .sub-title{font-size:0.75rem;color:var(--text-muted);font-weight:500;}
.nav-tabs{display:flex;background:rgba(15,23,42,0.8);padding:5px;border-radius:var(--radius-full);border:1px solid var(--border-glass);gap:4px;}
.nav-btn{display:flex;align-items:center;gap:0.5rem;padding:0.6rem 1.2rem;border:none;background:transparent;color:var(--text-muted);font-weight:600;font-size:0.85rem;border-radius:var(--radius-full);cursor:pointer;transition:all var(--transition-fast);}
.nav-btn:hover{color:var(--text-main);}
.nav-btn.active{background:linear-gradient(135deg,var(--accent-primary),var(--accent-primary-hover));color:#fff;box-shadow:0 4px 12px rgba(99,102,241,0.35);}
.nav-right-tools{display:flex;align-items:center;gap:0.75rem;}
.btn-icon{width:36px;height:36px;border-radius:50%;background:var(--bg-glass);border:1px solid var(--border-glass);color:var(--text-muted);display:flex;align-items:center;justify-content:center;cursor:pointer;font-size:0.95rem;transition:all var(--transition-fast);padding:0;}
.btn-icon:hover{color:var(--accent-warning);background:rgba(245,158,11,0.1);}
.btn-sop{background:rgba(99,102,241,0.15);border-color:rgba(99,102,241,0.4);color:var(--accent-secondary);}
.btn-sop:hover{background:rgba(99,102,241,0.3);}
.user-badge{display:flex;align-items:center;gap:0.6rem;padding:0.35rem 0.75rem;background:var(--bg-glass);border:1px solid var(--border-glass);border-radius:var(--radius-full);cursor:pointer;transition:all var(--transition-fast);color:inherit;font:inherit;}
.user-badge:hover{border-color:var(--accent-primary);}
.guard-avatar{width:34px;height:34px;border-radius:50%;background:rgba(16,185,129,0.15);color:var(--accent-success);display:flex;align-items:center;justify-content:center;font-size:0.9rem;}
.guard-info{display:flex;flex-direction:column;}
.guard-name{font-size:0.8rem;font-weight:700;}
.guard-role{font-size:0.65rem;color:var(--text-muted);}

/* Hotline Bar */
.hotline-bar{display:flex;align-items:center;gap:1rem;background:rgba(239,68,68,0.08);border:1px solid rgba(239,68,68,0.25);padding:0.45rem 1.25rem;border-radius:var(--radius-md);margin-bottom:1.25rem;font-size:0.8rem;flex-wrap:wrap;}
.hotline-label{font-weight:800;color:var(--accent-danger);display:flex;align-items:center;gap:0.4rem;white-space:nowrap;}
.hotline-items{display:flex;gap:0.75rem;flex-wrap:wrap;}
.hotline-chip{color:var(--text-main);text-decoration:none;background:rgba(15,23,42,0.6);border:1px solid var(--border-glass);padding:0.2rem 0.7rem;border-radius:var(--radius-full);font-weight:600;font-size:0.75rem;transition:all var(--transition-fast);display:inline-flex;align-items:center;gap:0.35rem;}
.hotline-chip:hover{background:rgba(255,255,255,0.1);color:var(--accent-secondary);}
.hotline-chip.emergency{background:rgba(239,68,68,0.2);border-color:rgba(239,68,68,0.4);color:#fca5a5;}

/* Shift Clock Inline */
.shift-clock-inline{display:flex;align-items:center;gap:0.5rem;font-weight:700;font-size:1rem;color:var(--accent-secondary);background:rgba(6,182,212,0.08);padding:0.4rem 1rem;border-radius:var(--radius-md);border:1px solid rgba(6,182,212,0.2);}
.shift-elapsed{font-size:0.7rem;color:var(--text-muted);font-weight:600;margin-left:auto;}

/* GPS Status Bar */
.gps-status-bar{display:flex;align-items:center;gap:0.5rem;font-size:0.75rem;color:var(--text-muted);padding:0.4rem 0.75rem;border-radius:var(--radius-sm);background:rgba(15,23,42,0.5);border:1px solid var(--border-glass);}
.gps-status-bar.gps-ok{color:var(--accent-success);border-color:rgba(16,185,129,0.3);background:rgba(16,185,129,0.08);}
.gps-status-bar.gps-fail{color:var(--accent-danger);border-color:rgba(239,68,68,0.3);background:rgba(239,68,68,0.08);}
.gps-checklist-banner{padding:0.65rem 0.85rem;border-radius:var(--radius-sm);font-size:0.8rem;margin-bottom:0.75rem;display:flex;align-items:center;gap:0.5rem;}
.gps-checklist-banner.gps-near{background:rgba(16,185,129,0.1);border:1px solid rgba(16,185,129,0.3);color:var(--accent-success);}
.gps-checklist-banner.gps-far{background:rgba(239,68,68,0.1);border:1px solid rgba(239,68,68,0.3);color:var(--accent-danger);}
.gps-checklist-banner.gps-unknown{background:rgba(245,158,11,0.1);border:1px solid rgba(245,158,11,0.3);color:var(--accent-warning);}

/* Tab Content */
.tab-content{display:none;}.tab-content.active{display:block;animation:fadeIn var(--transition-smooth);}
@keyframes fadeIn{from{opacity:0;transform:translateY(8px);}to{opacity:1;transform:translateY(0);}}

/* Patrol Layout */
.patrol-layout{display:grid;grid-template-columns:400px 1fr;gap:1.5rem;}
@media(max-width:1024px){.patrol-layout{grid-template-columns:1fr;}}
.scanner-card{padding:1.5rem;display:flex;flex-direction:column;gap:1.1rem;}
.card-header{display:flex;align-items:center;justify-content:space-between;}
.card-header h3{font-size:1.05rem;font-weight:700;display:flex;align-items:center;gap:0.5rem;}
.live-indicator{display:flex;align-items:center;gap:0.4rem;font-size:0.7rem;font-weight:700;color:var(--accent-success);text-transform:uppercase;background:rgba(16,185,129,0.1);padding:0.2rem 0.55rem;border-radius:var(--radius-full);}
.pulse-dot{width:8px;height:8px;background-color:var(--accent-success);border-radius:50%;animation:pulse 1.6s infinite;}
@keyframes pulse{0%{box-shadow:0 0 0 0 rgba(16,185,129,0.7);}70%{box-shadow:0 0 0 10px rgba(16,185,129,0);}100%{box-shadow:0 0 0 0 rgba(16,185,129,0);}}
.scanner-viewport{position:relative;width:100%;height:280px;background:#000;border-radius:var(--radius-md);overflow:hidden;border:1px solid var(--border-glass);}
.qr-reader-box{width:100%;height:100%;}
.qr-reader-box video{width:100%!important;height:100%!important;object-fit:cover!important;}
.scanner-fallback{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:0.8rem;background:rgba(15,23,42,0.95);color:var(--text-muted);text-align:center;z-index:2;}
.scanner-fallback i{font-size:2.5rem;color:var(--accent-primary);}
.scanner-overlay{position:absolute;inset:0;pointer-events:none;display:flex;align-items:center;justify-content:center;z-index:3;}
.scan-target-box{position:relative;width:190px;height:190px;}
.corner{position:absolute;width:22px;height:22px;border-color:var(--accent-secondary);border-style:solid;}
.top-left{top:0;left:0;border-width:4px 0 0 4px;border-top-left-radius:6px;}
.top-right{top:0;right:0;border-width:4px 4px 0 0;border-top-right-radius:6px;}
.bottom-left{bottom:0;left:0;border-width:0 0 4px 4px;border-bottom-left-radius:6px;}
.bottom-right{bottom:0;right:0;border-width:0 4px 4px 0;border-bottom-right-radius:6px;}
.scan-line{position:absolute;top:0;left:0;right:0;height:3px;background:linear-gradient(90deg,transparent,var(--accent-secondary),transparent);box-shadow:0 0 12px var(--accent-secondary);animation:scanMove 2s infinite ease-in-out;}
@keyframes scanMove{0%{top:0;}50%{top:100%;}100%{top:0;}}
.scanner-actions{display:flex;flex-direction:column;gap:0.85rem;}
.scanner-btn-row{display:flex;gap:0.5rem;}
.simulator-divider{display:flex;align-items:center;text-align:center;font-size:0.7rem;color:var(--text-dim);margin:0.15rem 0;}
.simulator-divider::before,.simulator-divider::after{content:'';flex:1;border-bottom:1px dashed var(--border-glass);}
.simulator-divider span{padding:0 0.5rem;}
.quick-sim-container{display:flex;gap:0.5rem;}.quick-sim-container select{flex:1;}
.last-scan-card{display:flex;align-items:center;gap:1rem;background:rgba(16,185,129,0.1);border:1px solid rgba(16,185,129,0.3);padding:0.75rem 1rem;border-radius:var(--radius-md);animation:slideUp 0.3s ease-out;}
@keyframes slideUp{from{opacity:0;transform:translateY(10px);}to{opacity:1;transform:translateY(0);}}
.scan-icon.success{font-size:1.6rem;color:var(--accent-success);}
.scan-details h4{font-size:0.9rem;font-weight:700;}.scan-details p{font-size:0.7rem;color:var(--text-muted);}

/* Route Panel */
.route-panel{padding:1.5rem;display:flex;flex-direction:column;gap:1.1rem;}
.shift-summary{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:1rem;background:rgba(15,23,42,0.5);padding:1.1rem;border-radius:var(--radius-md);border:1px solid var(--border-glass);}
.shift-info h2{font-size:1.15rem;font-weight:800;}.shift-info h2 span{color:var(--accent-secondary);}
.shift-meta{font-size:0.75rem;color:var(--text-muted);margin-top:0.15rem;}
.shift-progress-box{width:220px;}
.progress-stats{display:flex;justify-content:space-between;font-size:0.75rem;margin-bottom:0.35rem;}
.progress-bar-bg{width:100%;height:10px;background:rgba(255,255,255,0.08);border-radius:var(--radius-full);overflow:hidden;}
.progress-bar-fill{height:100%;background:linear-gradient(90deg,var(--accent-primary),var(--accent-success));border-radius:var(--radius-full);transition:width 0.4s ease;}
.filter-controls{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:0.7rem;background:rgba(15,23,42,0.4);padding:0.55rem 0.85rem;border-radius:var(--radius-md);border:1px solid var(--border-glass);}
.zone-pills{display:flex;gap:0.35rem;flex-wrap:wrap;}
.zone-btn{background:transparent;border:1px solid var(--border-glass);color:var(--text-muted);font-size:0.725rem;font-weight:600;padding:0.3rem 0.7rem;border-radius:var(--radius-full);cursor:pointer;transition:all var(--transition-fast);}
.zone-btn:hover{color:var(--text-main);background:rgba(255,255,255,0.05);}
.zone-btn.active{background:var(--accent-primary);color:#fff;border-color:var(--accent-primary);}
.search-box{position:relative;width:200px;}
.search-icon{position:absolute;left:10px;top:50%;transform:translateY(-50%);color:var(--text-dim);font-size:0.75rem;}
.search-box input{padding-left:2rem!important;font-size:0.75rem!important;}
.checkpoint-header{display:flex;align-items:center;justify-content:space-between;}
.checkpoint-header h3{font-size:1rem;font-weight:700;}
.checkpoint-list{display:flex;flex-direction:column;gap:0.7rem;max-height:440px;overflow-y:auto;padding-right:4px;}
.checkpoint-list::-webkit-scrollbar,.table-responsive::-webkit-scrollbar,.modal-body::-webkit-scrollbar,.activity-feed::-webkit-scrollbar,.history-timeline::-webkit-scrollbar{width:5px;height:5px;}
.checkpoint-list::-webkit-scrollbar-thumb,.table-responsive::-webkit-scrollbar-thumb,.modal-body::-webkit-scrollbar-thumb,.activity-feed::-webkit-scrollbar-thumb,.history-timeline::-webkit-scrollbar-thumb{background:rgba(255,255,255,0.15);border-radius:4px;}
.cp-item{display:flex;align-items:center;justify-content:space-between;background:rgba(30,41,59,0.4);border:1px solid var(--border-glass);padding:0.85rem 1rem;border-radius:var(--radius-md);transition:all var(--transition-fast);cursor:pointer;}
.cp-item:hover{background:rgba(30,41,59,0.7);transform:translateX(4px);}
.cp-item.status-verified{border-left:4px solid var(--accent-success);background:rgba(16,185,129,0.05);}
.cp-item.status-incident{border-left:4px solid var(--accent-danger);background:rgba(239,68,68,0.05);}
.cp-item.status-pending{border-left:4px solid var(--text-dim);}
.cp-left{display:flex;align-items:center;gap:0.85rem;}
.cp-status-icon{width:36px;height:36px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:1rem;flex-shrink:0;}
.status-pending .cp-status-icon{background:rgba(255,255,255,0.06);color:var(--text-dim);}
.status-verified .cp-status-icon{background:rgba(16,185,129,0.2);color:var(--accent-success);}
.status-incident .cp-status-icon{background:rgba(239,68,68,0.2);color:var(--accent-danger);}
.cp-details h4{font-size:0.875rem;font-weight:700;display:flex;align-items:center;gap:0.4rem;flex-wrap:wrap;}
.zone-tag{font-size:0.6rem;font-weight:700;background:rgba(99,102,241,0.15);color:var(--accent-secondary);padding:1px 6px;border-radius:4px;}
.cp-details p{font-size:0.75rem;color:var(--text-muted);}
.cp-details .cp-instruction{font-size:0.7rem;color:var(--accent-secondary);margin-top:2px;}
.cp-right{display:flex;align-items:center;gap:0.6rem;}
.cp-time{font-size:0.7rem;color:var(--text-muted);font-family:monospace;}
.cp-gps-bypassed{font-size:0.6rem;color:var(--accent-warning);font-weight:700;}

/* Dashboard */
.dashboard-layout{display:flex;flex-direction:column;gap:1.5rem;}
.kpi-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:1rem;}
.kpi-card{padding:1.1rem;display:flex;align-items:center;gap:1rem;}
.kpi-icon{width:48px;height:48px;border-radius:var(--radius-md);display:flex;align-items:center;justify-content:center;font-size:1.4rem;}
.kpi-icon.blue{background:rgba(99,102,241,0.15);color:var(--accent-primary);}
.kpi-icon.green{background:rgba(16,185,129,0.15);color:var(--accent-success);}
.kpi-icon.red{background:rgba(239,68,68,0.15);color:var(--accent-danger);}
.kpi-icon.purple{background:rgba(168,85,247,0.15);color:var(--accent-purple);}
.kpi-label{font-size:0.75rem;color:var(--text-muted);font-weight:500;}
.kpi-value{font-size:1.5rem;font-weight:800;line-height:1.2;}
.charts-row{display:grid;grid-template-columns:1.5fr 1fr;gap:1.5rem;}
@media(max-width:900px){.charts-row{grid-template-columns:1fr;}}
.chart-panel{min-height:280px;}
.bar-chart-container{display:flex;align-items:flex-end;gap:1.5rem;padding:1.5rem 1rem 0.5rem;height:200px;}
.bar-group{display:flex;flex-direction:column;align-items:center;gap:0.4rem;flex:1;}
.bar-wrap{display:flex;align-items:flex-end;gap:4px;height:140px;}
.bar-col{width:22px;border-radius:4px 4px 0 0;transition:height 0.6s cubic-bezier(0.4,0,0.2,1);position:relative;}
.bar-col.verified{background:linear-gradient(180deg,var(--accent-success),#059669);}
.bar-col.incident{background:linear-gradient(180deg,var(--accent-danger),#dc2626);}
.bar-col.pending{background:linear-gradient(180deg,var(--text-dim),#4b5563);}
.bar-label{font-size:0.7rem;color:var(--text-muted);font-weight:600;text-align:center;}
.donut-chart-container{display:flex;align-items:center;justify-content:center;gap:2rem;padding:1rem;}
.donut-chart{position:relative;width:160px;height:160px;}
.donut-svg{width:100%;height:100%;transform:rotate(-90deg);}
.donut-segment{transition:stroke-dasharray 0.8s ease;}
.donut-center{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;}
.donut-center span{font-size:1.6rem;font-weight:800;}.donut-center small{font-size:0.7rem;color:var(--text-muted);}
.donut-legend{display:flex;flex-direction:column;gap:0.6rem;}
.legend-item{display:flex;align-items:center;gap:0.5rem;font-size:0.8rem;}
.legend-dot{width:10px;height:10px;border-radius:3px;}
.dashboard-main-grid{display:grid;grid-template-columns:2fr 1fr;gap:1.5rem;}
@media(max-width:1100px){.dashboard-main-grid{grid-template-columns:1fr;}}
.dash-panel{padding:1.5rem;display:flex;flex-direction:column;gap:1rem;}
.panel-title{display:flex;align-items:center;justify-content:space-between;}
.panel-title h3{font-size:1rem;font-weight:700;display:flex;align-items:center;gap:0.5rem;}
.table-responsive{width:100%;overflow-x:auto;}
.data-table{width:100%;border-collapse:collapse;text-align:left;font-size:0.8rem;}
.data-table th,.data-table td{padding:0.75rem 0.85rem;border-bottom:1px solid var(--border-glass);}
.data-table th{background:rgba(15,23,42,0.6);color:var(--text-muted);font-weight:600;text-transform:uppercase;font-size:0.7rem;letter-spacing:0.5px;}
.data-table tr:hover td{background:rgba(255,255,255,0.02);}
.activity-feed{display:flex;flex-direction:column;gap:0.85rem;max-height:300px;overflow-y:auto;}
.activity-item{display:flex;gap:0.75rem;font-size:0.8rem;padding-bottom:0.75rem;border-bottom:1px dashed var(--border-glass);}
.activity-item:last-child{border-bottom:none;}
.act-icon{width:28px;height:28px;border-radius:50%;background:rgba(99,102,241,0.15);color:var(--accent-primary);display:flex;align-items:center;justify-content:center;font-size:0.75rem;flex-shrink:0;}
.act-content p{color:var(--text-main);}.act-time{font-size:0.65rem;color:var(--text-dim);margin-top:2px;}

/* Incident Workflow Badges */
.inc-status-btn{border:none;cursor:pointer;font-size:0.7rem;font-weight:700;padding:0.25rem 0.55rem;border-radius:var(--radius-full);transition:all var(--transition-fast);}
.inc-status-btn:hover{transform:scale(1.05);}
.inc-open{background:rgba(239,68,68,0.15);color:var(--accent-danger);}
.inc-inprogress{background:rgba(245,158,11,0.15);color:var(--accent-warning);}
.inc-resolved{background:rgba(16,185,129,0.15);color:var(--accent-success);}

/* History */
.history-layout{padding:2rem;display:flex;flex-direction:column;gap:1.5rem;}
.history-timeline{display:flex;flex-direction:column;gap:1.25rem;max-height:600px;overflow-y:auto;}
.history-entry{background:rgba(15,23,42,0.5);border:1px solid var(--border-glass);border-radius:var(--radius-md);overflow:hidden;transition:all var(--transition-fast);}
.history-entry:hover{border-color:var(--accent-primary);}
.history-entry-header{display:flex;align-items:center;justify-content:space-between;padding:1rem 1.25rem;cursor:pointer;}
.history-entry-header:hover{background:rgba(255,255,255,0.02);}
.history-entry-left{display:flex;align-items:center;gap:0.85rem;}
.history-entry-icon{width:40px;height:40px;border-radius:50%;background:rgba(16,185,129,0.15);color:var(--accent-success);display:flex;align-items:center;justify-content:center;font-size:1.1rem;}
.history-entry h4{font-size:0.9rem;font-weight:700;}
.history-entry .meta{font-size:0.75rem;color:var(--text-muted);}
.history-entry-stats{display:flex;gap:1rem;align-items:center;}
.stat-chip{font-size:0.7rem;font-weight:700;padding:0.2rem 0.6rem;border-radius:var(--radius-full);}
.stat-chip.green{background:rgba(16,185,129,0.15);color:var(--accent-success);}
.stat-chip.red{background:rgba(239,68,68,0.15);color:var(--accent-danger);}
.history-entry-body{display:none;padding:0 1.25rem 1rem;border-top:1px dashed var(--border-glass);}
.history-entry.expanded .history-entry-body{display:block;animation:fadeIn 0.2s ease;}
.history-details-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:0.5rem;margin-top:0.75rem;}
.history-cp-chip{display:flex;align-items:center;gap:0.5rem;font-size:0.75rem;padding:0.4rem 0.65rem;background:rgba(30,41,59,0.5);border-radius:6px;border:1px solid var(--border-glass);}
.history-cp-chip i{font-size:0.8rem;}
.history-cp-chip.h-verified i{color:var(--accent-success);}
.history-cp-chip.h-incident i{color:var(--accent-danger);}
.empty-state{display:flex;flex-direction:column;align-items:center;justify-content:center;padding:3rem;color:var(--text-dim);gap:0.75rem;}
.empty-state i{font-size:2.5rem;}

/* QR Studio */
.studio-layout{padding:2rem;display:flex;flex-direction:column;gap:1.5rem;}
.studio-header{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:1rem;border-bottom:1px solid var(--border-glass);padding-bottom:1.1rem;}
.studio-header h2{font-size:1.3rem;font-weight:800;display:flex;align-items:center;gap:0.5rem;}
.studio-header p{font-size:0.8rem;color:var(--text-muted);}
.qr-cards-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:1.25rem;}
.qr-card-badge{background:#fff;color:#0f172a;border-radius:var(--radius-md);padding:1.25rem;display:flex;flex-direction:column;align-items:center;text-align:center;box-shadow:var(--shadow-lg);border:3px solid #0f172a;}
.qr-badge-header{border-bottom:2px solid #e2e8f0;width:100%;padding-bottom:0.5rem;margin-bottom:0.75rem;}
.qr-badge-header h4{font-size:0.9rem;font-weight:800;color:#0f172a;text-transform:uppercase;letter-spacing:0.5px;}
.qr-badge-header span{font-size:0.7rem;color:#64748b;font-weight:600;}
.qr-canvas-box{width:140px;height:140px;margin:0.4rem 0;display:flex;align-items:center;justify-content:center;background:#fff;padding:6px;border:1px solid #cbd5e1;}
.qr-canvas-box img,.qr-canvas-box canvas{width:100%!important;height:100%!important;}
.qr-badge-footer{width:100%;margin-top:0.7rem;padding-top:0.5rem;border-top:2px dashed #e2e8f0;font-size:0.65rem;color:#475569;}
.qr-code-id{font-family:monospace;font-weight:700;font-size:0.8rem;background:#f1f5f9;padding:2px 8px;border-radius:4px;display:inline-block;margin-bottom:4px;}

/* SOS Floating Action Button */
.sos-fab{position:fixed;bottom:1.5rem;left:1.5rem;z-index:900;width:64px;height:64px;border-radius:50%;background:linear-gradient(135deg,#ef4444,#dc2626);color:#fff;border:3px solid rgba(255,255,255,0.3);font-size:0.8rem;font-weight:800;cursor:pointer;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;box-shadow:0 4px 20px rgba(239,68,68,0.5);animation:sosPulse 2s infinite;transition:transform 0.2s;}
.sos-fab i{font-size:1.2rem;}
.sos-fab:hover{transform:scale(1.1);}
.sos-fab:active{transform:scale(0.95);}
@keyframes sosPulse{0%{box-shadow:0 0 0 0 rgba(239,68,68,0.6);}70%{box-shadow:0 0 0 16px rgba(239,68,68,0);}100%{box-shadow:0 0 0 0 rgba(239,68,68,0);}}
.sos-modal .sos-header{background:linear-gradient(135deg,#ef4444,#dc2626);color:#fff;text-align:center;padding:1rem;border-radius:var(--radius-lg) var(--radius-lg) 0 0;font-size:1.3rem;font-weight:800;letter-spacing:1px;animation:sosBlink 0.8s infinite;}
@keyframes sosBlink{0%,100%{opacity:1;}50%{opacity:0.7;}}

/* Buttons */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:0.45rem;padding:0.7rem 1.15rem;font-size:0.85rem;font-weight:600;border-radius:var(--radius-sm);border:none;cursor:pointer;transition:all var(--transition-fast);text-decoration:none;}
.btn-block{width:100%;}.btn-sm{padding:0.35rem 0.75rem;font-size:0.75rem;}
.btn-primary{background:linear-gradient(135deg,var(--accent-primary),var(--accent-primary-hover));color:#fff;box-shadow:0 4px 12px rgba(99,102,241,0.3);}
.btn-primary:hover{transform:translateY(-1px);box-shadow:0 6px 16px rgba(99,102,241,0.45);}
.btn-accent{background:linear-gradient(135deg,var(--accent-secondary),#0891b2);color:#fff;}
.btn-accent:hover{transform:translateY(-1px);}
.btn-success{background:linear-gradient(135deg,var(--accent-success),#059669);color:#fff;}
.btn-danger{background:linear-gradient(135deg,var(--accent-danger),#dc2626);color:#fff;}
.btn-warning{background:linear-gradient(135deg,var(--accent-warning),#d97706);color:#fff;}
.btn-outline{background:transparent;border:1px solid var(--border-glass);color:var(--text-main);}
.btn-outline:hover{background:rgba(255,255,255,0.08);}
.btn-ghost{background:transparent;color:var(--text-muted);}.btn-ghost:hover{color:var(--text-main);}
.btn:disabled{opacity:0.4;cursor:not-allowed;transform:none!important;}
.badge{display:inline-flex;align-items:center;gap:0.3rem;padding:0.2rem 0.6rem;border-radius:var(--radius-full);font-size:0.7rem;font-weight:700;text-transform:uppercase;}
.badge-low{background:rgba(16,185,129,0.15);color:var(--accent-success);}
.badge-medium{background:rgba(245,158,11,0.15);color:var(--accent-warning);}
.badge-high{background:rgba(239,68,68,0.15);color:var(--accent-danger);}

/* Forms */
.form-group{display:flex;flex-direction:column;gap:0.35rem;margin-bottom:1rem;}
.form-group label{font-size:0.8rem;font-weight:600;color:var(--text-muted);}
.form-control{background:rgba(15,23,42,0.8);border:1px solid var(--border-glass);color:var(--text-main);padding:0.65rem 0.9rem;border-radius:var(--radius-sm);font-size:0.85rem;font-family:inherit;outline:none;transition:border-color var(--transition-fast);}
.form-control:focus{border-color:var(--accent-primary);box-shadow:0 0 0 3px rgba(99,102,241,0.2);}
.form-row{display:flex;gap:0.75rem;}
.photo-upload-box{position:relative;}
.file-input{display:none;}
.file-label{display:flex;align-items:center;justify-content:center;gap:0.5rem;padding:0.85rem;border:2px dashed var(--border-glass);border-radius:var(--radius-sm);background:rgba(15,23,42,0.4);color:var(--text-muted);cursor:pointer;transition:all var(--transition-fast);}
.file-label:hover{border-color:var(--accent-primary);color:var(--accent-primary);}
.photo-preview{position:relative;margin-top:0.5rem;width:100%;max-height:160px;border-radius:var(--radius-sm);overflow:hidden;}
.photo-preview img{width:100%;height:160px;object-fit:cover;}
.btn-remove{position:absolute;top:6px;right:6px;background:rgba(239,68,68,0.85);color:#fff;border:none;width:28px;height:28px;border-radius:50%;cursor:pointer;}

/* Modals */
.modal-backdrop{position:fixed;inset:0;background:rgba(0,0,0,0.75);backdrop-filter:blur(8px);display:flex;align-items:center;justify-content:center;z-index:999;padding:1rem;animation:fadeIn 0.25s ease-out;}
.modal-box{width:100%;max-width:520px;padding:1.5rem;display:flex;flex-direction:column;gap:1rem;max-height:90vh;overflow-y:auto;}
.modal-lg{max-width:640px;}
.modal-header{display:flex;align-items:flex-start;justify-content:space-between;border-bottom:1px solid var(--border-glass);padding-bottom:0.75rem;}
.modal-header h3{font-size:1.1rem;font-weight:700;display:flex;align-items:center;gap:0.5rem;}
.modal-close{background:transparent;border:none;color:var(--text-muted);font-size:1.2rem;cursor:pointer;}
.modal-footer{display:flex;justify-content:flex-end;gap:0.6rem;margin-top:0.5rem;border-top:1px solid var(--border-glass);padding-top:0.85rem;}

/* SOP */
.sop-instruction-banner{display:flex;gap:0.6rem;background:rgba(99,102,241,0.1);border:1px solid rgba(99,102,241,0.3);padding:0.75rem 0.85rem;border-radius:var(--radius-sm);margin-bottom:1rem;}
.sop-instruction-banner i{font-size:1.1rem;margin-top:2px;}
.checklist-section{display:flex;flex-direction:column;gap:0.6rem;margin-bottom:1rem;}
.section-subheading{font-size:0.85rem;font-weight:700;color:var(--accent-secondary);}
.checklist-group{display:flex;flex-direction:column;gap:0.5rem;}
.chk-item-label{display:flex;align-items:center;gap:0.75rem;background:rgba(15,23,42,0.6);border:1px solid var(--border-glass);padding:0.75rem 0.85rem;border-radius:var(--radius-sm);cursor:pointer;font-size:0.825rem;transition:all var(--transition-fast);}
.chk-item-label:hover{background:rgba(30,41,59,0.7);border-color:var(--accent-primary);}
.chk-item-label input[type="checkbox"]{width:18px;height:18px;accent-color:var(--accent-success);cursor:pointer;flex-shrink:0;}
.chk-item-label input[type="checkbox"]:checked + span{color:var(--accent-success);text-decoration:line-through;text-decoration-color:rgba(16,185,129,0.4);}
.sop-general-note{background:rgba(245,158,11,0.08);border:1px dashed rgba(245,158,11,0.3);padding:0.75rem 0.85rem;border-radius:var(--radius-sm);}
.sop-guidebook-body{display:flex;flex-direction:column;gap:1rem;}
.sop-card{background:rgba(15,23,42,0.6);border:1px solid var(--border-glass);border-radius:var(--radius-md);padding:1rem;}
.sop-card h4{font-size:0.9rem;font-weight:700;margin-bottom:0.5rem;display:flex;align-items:center;gap:0.5rem;}
.sop-card ul{padding-left:1.1rem;font-size:0.8rem;color:var(--text-muted);display:flex;flex-direction:column;gap:0.3rem;}

/* Guard Selector */
.guard-selector-grid{display:flex;flex-direction:column;gap:0.75rem;}
.guard-option{display:flex;align-items:center;gap:1rem;padding:0.85rem 1rem;background:rgba(15,23,42,0.5);border:1px solid var(--border-glass);border-radius:var(--radius-md);cursor:pointer;transition:all var(--transition-fast);}
.guard-option:hover{border-color:var(--accent-primary);background:rgba(99,102,241,0.08);}
.guard-option.selected{border-color:var(--accent-success);background:rgba(16,185,129,0.08);}
.guard-option .go-avatar{width:42px;height:42px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:1.1rem;}
.go-name{font-weight:700;font-size:0.9rem;}
.go-role{font-size:0.75rem;color:var(--text-muted);}

/* Toast */
.toast-container{position:fixed;bottom:1.5rem;right:1.5rem;display:flex;flex-direction:column;gap:0.6rem;z-index:9999;}
.toast{display:flex;align-items:center;gap:0.7rem;padding:0.75rem 1.1rem;background:var(--bg-secondary);border:1px solid var(--border-glass);border-radius:var(--radius-md);color:var(--text-main);box-shadow:var(--shadow-lg);font-size:0.825rem;animation:slideInRight 0.3s ease;}
@keyframes slideInRight{from{opacity:0;transform:translateX(50px);}to{opacity:1;transform:translateX(0);}}
.toast-success{border-left:4px solid var(--accent-success);}
.toast-error{border-left:4px solid var(--accent-danger);}
.toast-info{border-left:4px solid var(--accent-primary);}
.hidden{display:none!important;}
.text-danger{color:var(--accent-danger);}.text-primary{color:var(--accent-primary);}
.text-warning{color:var(--accent-warning);}.text-accent{color:var(--accent-secondary);}

@media print{
  body{background:#fff!important;color:#000!important;}
  .navbar,.nav-tabs,.user-badge,.hotline-bar,#tab-patrol,#tab-dashboard,#tab-history,.studio-header,.nav-right-tools,.sos-fab,.sync-badge,#btn-sync-now{display:none!important;}
  #tab-qr-studio{display:block!important;}
  .studio-layout{padding:0!important;background:transparent!important;box-shadow:none!important;border:none!important;}
  .qr-cards-grid{grid-template-columns:repeat(2,1fr)!important;gap:1.5cm!important;}
  .qr-card-badge{break-inside:avoid;page-break-inside:avoid;box-shadow:none!important;border:2px solid #000!important;}
}

/* ══════════ v5.0 UI — Login, Sync badge, Supervisor panels ══════════ */

/* Login screen */
.login-screen{position:fixed;inset:0;z-index:1000;display:flex;align-items:center;justify-content:center;padding:1rem;background:radial-gradient(ellipse at 20% -10%,rgba(99,102,241,0.18),transparent 55%),radial-gradient(ellipse at 90% 110%,rgba(16,185,129,0.12),transparent 50%),var(--bg-primary);}
.login-card{width:100%;max-width:380px;padding:2rem;border-radius:var(--radius-lg);}
.login-brand{text-align:center;margin-bottom:1.5rem;}
.login-brand h1{font-size:1.8rem;margin:0.6rem 0 0.25rem;}
.login-brand h1 span{color:var(--accent-secondary);}
.login-sub{font-size:0.78rem;color:var(--text-muted);}
.logo-icon.big{width:64px;height:64px;font-size:1.8rem;margin:0 auto;}
.login-form{display:flex;flex-direction:column;gap:0.9rem;}
.login-error{min-height:1.1rem;font-size:0.78rem;color:var(--accent-danger);text-align:center;}
.login-hint{margin-top:1.25rem;padding:0.75rem;background:rgba(15,23,42,0.5);border:1px dashed var(--border-glass);border-radius:var(--radius-md);font-size:0.72rem;}
.login-hint-title{font-weight:700;margin-bottom:0.5rem;color:var(--text-muted);display:flex;gap:0.4rem;align-items:center;}
.login-hint-row{display:flex;justify-content:space-between;gap:0.5rem;padding:0.2rem 0;color:var(--text-muted);}

/* Sync badge */
.sync-badge{display:inline-flex;align-items:center;gap:0.45rem;background:rgba(15,23,42,0.6);border:1px solid var(--border-glass);border-radius:var(--radius-full);padding:0.28rem 0.75rem;font-size:0.72rem;color:var(--text-muted);white-space:nowrap;}
.sync-dot{width:8px;height:8px;border-radius:50%;display:inline-block;flex-shrink:0;}
.sync-dot.online{background:var(--accent-success);box-shadow:0 0 6px var(--accent-success);}
.sync-dot.offline{background:var(--accent-danger);box-shadow:0 0 6px var(--accent-danger);}
.sync-dot.pending{background:var(--accent-warning);box-shadow:0 0 6px var(--accent-warning);animation:pulse 1.4s infinite;}
.sync-dot.syncing{background:var(--accent-primary);box-shadow:0 0 6px var(--accent-primary);animation:spin 1s linear infinite;}
.sync-pending-count{background:var(--accent-warning);color:#1e293b;font-weight:800;font-size:0.65rem;border-radius:50%;min-width:16px;height:16px;display:inline-flex;align-items:center;justify-content:center;padding:0 3px;}
@keyframes spin{to{transform:rotate(360deg);}}
@keyframes pulse{0%,100%{opacity:1;}50%{opacity:0.35;}}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    scroll-behavior: auto !important;
    transition-duration: 0.01ms !important;
  }
}

/* Scanner note */
.scanner-note{font-size:0.68rem;color:var(--text-dim);margin:0.6rem 0 0;text-align:center;display:flex;gap:0.4rem;align-items:center;justify-content:center;}

/* Patrol item states */
.cp-item.status-review{border-left:4px solid var(--accent-warning);}
.cp-item.status-review .cp-status-icon{color:var(--accent-warning);}
.cp-sync-pending{font-size:0.6rem;color:var(--accent-secondary);font-weight:700;margin-top:0.2rem;display:flex;gap:0.3rem;align-items:center;justify-content:flex-end;}

/* Supervisor panels */
.bypass-review-item,.device-item,.sos-alert-item{display:flex;align-items:center;justify-content:space-between;gap:0.75rem;padding:0.7rem 0.85rem;border:1px solid var(--border-glass);border-radius:var(--radius-md);margin-bottom:0.5rem;font-size:0.78rem;background:rgba(15,23,42,0.4);}
.bypass-review-info{flex:1;}
.bypass-review-actions{display:flex;gap:0.4rem;flex-shrink:0;}
.sos-alert-item{color:var(--accent-danger);border-color:rgba(239,68,68,0.35);}
.device-item .qr-code-id{font-size:0.62rem;margin-left:0.3rem;}
.admin-only-tag{font-size:0.6rem;color:var(--accent-secondary);border:1px solid rgba(99,102,241,0.4);border-radius:var(--radius-full);padding:1px 8px;vertical-align:middle;margin-left:0.4rem;}

/* ══════════ Mobile responsive (≤720px) — real phones ══════════ */
@media(max-width:720px){
  .app-container{padding:0 0.85rem 1.5rem;}
  .navbar{flex-wrap:wrap;gap:0.6rem;padding:0.9rem 0;}
  .brand{flex:1 1 auto;}
  .nav-right-tools{flex:1 1 100%;order:3;justify-content:space-between;gap:0.5rem;flex-wrap:wrap;}
  .nav-right-tools .btn-sop,.nav-right-tools #btn-sync-now{flex-shrink:1;}
  .sync-now-label{display:none;}
  #btn-sync-now{width:36px;height:36px;border-radius:50%;padding:0;justify-content:center;}
  .sync-badge{font-size:0.66rem;padding:0.28rem 0.6rem;max-width:46vw;overflow:hidden;text-overflow:ellipsis;}
  .nav-tabs{order:4;width:100%;overflow-x:auto;scrollbar-width:none;-webkit-overflow-scrolling:touch;justify-content:flex-start;}
  .nav-tabs::-webkit-scrollbar{display:none;}
  .nav-btn{flex-shrink:0;padding:0.55rem 0.95rem;font-size:0.8rem;}
  .nav-btn span{display:none;}
  .nav-btn i{font-size:1rem;}
  .user-badge .guard-info{display:none;}
  .user-badge{padding:0.3rem;}
  .guard-avatar{width:34px;height:34px;}
  .hotline-bar{padding:0.4rem 0.7rem;font-size:0.72rem;}
  .hotline-items{gap:0.5rem;}
  .scan-target-box{width:min(58vw,210px);height:min(58vw,210px);}
  .checkpoint-header h3{font-size:0.9rem;}
  .btn-report-incident-global span{display:none;}
}
@media(max-width:480px){
  .patrol-layout{gap:0.9rem;}
  .scanner-actions .scanner-btn-row{flex-direction:row;}
  .cp-item{padding:0.65rem;}
  .cp-details h4{font-size:0.82rem;}
  .zone-pills{gap:0.3rem;}
  .zone-btn{padding:0.3rem 0.55rem;font-size:0.7rem;}
  .shift-footer-actions{flex-direction:column;}
  .shift-footer-actions .btn{width:100%;}
  .dashboard-main-grid{gap:0.85rem;}
  .dashboard-main-grid > *{min-width:0;}
  .table-responsive{overflow-x:auto;}
  .login-card{padding:1.4rem;}
  .modal-box{padding:1rem;}
  .kpi-grid{grid-template-columns:repeat(2,1fr);}
  .modal-footer{flex-wrap:wrap;}
  /* grid children must be allowed to shrink below content width */
  .charts-row > *, .dash-panel{min-width:0;}
  .bar-chart-container{gap:0.6rem;padding-left:0.35rem;padding-right:0.35rem;}
  .bar-wrap{gap:3px;}
  .bar-col{width:18px;}
  .donut-chart-container{gap:0.9rem;}
  .donut-chart{width:130px;height:130px;}
}

/* Profile session card */
.profile-session-card{display:flex;align-items:center;gap:1rem;padding:0.85rem 1rem;background:rgba(15,23,42,0.5);border:1px solid var(--border-glass);border-radius:var(--radius-md);}
.profile-session-card .go-avatar{width:42px;height:42px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:1.1rem;}

/* Forced password change step */
.change-pw-banner{display:flex;align-items:center;gap:0.5rem;background:rgba(239,68,68,0.12);border:1px solid rgba(239,68,68,0.4);color:var(--accent-danger);padding:0.6rem 0.8rem;border-radius:var(--radius-md);font-size:0.78rem;font-weight:700;margin-bottom:1rem;}

/* SOS status inside modal */
.sos-status{margin-top:0.75rem;padding:0.6rem;border-radius:var(--radius-md);font-size:0.8rem;}
.sos-status.ok{background:rgba(16,185,129,0.12);border:1px solid rgba(16,185,129,0.35);color:var(--accent-success);}
.sos-status.warn{background:rgba(239,68,68,0.12);border:1px solid rgba(239,68,68,0.4);color:var(--accent-danger);}

/* Photo viewer */
.photo-viewer{z-index:2000;background:rgba(2,6,23,0.92);}
.photo-viewer-box{max-width:480px;width:92%;text-align:center;}
.photo-viewer-box img{width:100%;max-height:70vh;object-fit:contain;border-radius:var(--radius-md);border:1px solid var(--border-glass);}

/* ══════════ Multi-Category Photo Checklist ══════════ */
.category-checklist-list {
  display: flex;
  flex-direction: column;
  gap: 0.85rem;
  margin: 0.75rem 0 1rem;
}
.category-card {
  background: rgba(15, 23, 42, 0.55);
  border: 1px solid var(--border-glass);
  border-radius: var(--radius-md);
  padding: 0.85rem;
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
  transition: all 0.2s ease;
}
.category-card:hover {
  border-color: rgba(99, 102, 241, 0.35);
}
.category-card-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
}
.category-title {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-weight: 700;
  font-size: 0.88rem;
  color: var(--text-main);
}
.category-title i {
  font-size: 1rem;
}
.category-title.cat-electrical i { color: #f59e0b; }
.category-title.cat-fire_safety i { color: #ef4444; }
.category-title.cat-gas_hazard i { color: #06b6d4; }
.category-title.cat-hygiene i { color: #10b981; }
.category-title.cat-general i { color: #8b5cf6; }

.category-status-pills {
  display: inline-flex;
  background: rgba(2, 6, 23, 0.6);
  border-radius: var(--radius-full);
  padding: 2px;
  border: 1px solid var(--border-glass);
}
.status-pill-btn {
  background: transparent;
  border: none;
  color: var(--text-dim);
  font-size: 0.7rem;
  font-weight: 600;
  padding: 3px 9px;
  border-radius: var(--radius-full);
  cursor: pointer;
  transition: all 0.15s ease;
}
.status-pill-btn.active.pass {
  background: rgba(16, 185, 129, 0.25);
  color: #34d399;
  border: 1px solid rgba(16, 185, 129, 0.4);
}
.status-pill-btn.active.issue {
  background: rgba(239, 68, 68, 0.25);
  color: #f87171;
  border: 1px solid rgba(239, 68, 68, 0.4);
}
.status-pill-btn.active.na {
  background: rgba(148, 163, 184, 0.2);
  color: #cbd5e1;
  border: 1px solid rgba(148, 163, 184, 0.3);
}

.category-desc {
  font-size: 0.75rem;
  color: var(--text-muted);
}

.category-photo-row {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  flex-wrap: wrap;
}
.btn-cat-photo {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.85rem;
  font-weight: 600;
  padding: 0.55rem 0.95rem;
  background: rgba(99, 102, 241, 0.2);
  border: 1.5px dashed #6366f1;
  color: #a5b4fc;
  border-radius: var(--radius-md);
  cursor: pointer;
  transition: all 0.2s ease;
}
.btn-cat-photo:hover, .btn-cat-photo:active {
  background: rgba(99, 102, 241, 0.35);
  border-color: #a5b4fc;
  color: #fff;
}
.cat-photo-preview-wrap {
  position: relative;
  width: 54px;
  height: 54px;
  border-radius: var(--radius-sm);
  overflow: hidden;
  border: 1px solid var(--border-glass);
}
.cat-photo-preview-wrap img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.cat-photo-remove {
  position: absolute;
  top: 2px;
  right: 2px;
  background: rgba(0, 0, 0, 0.7);
  color: #fff;
  border: none;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  font-size: 0.65rem;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}
.category-note-input {
  font-size: 0.75rem;
  padding: 0.35rem 0.6rem;
  background: rgba(2, 6, 23, 0.5);
  border: 1px solid var(--border-glass);
  border-radius: var(--radius-sm);
  color: var(--text-main);
  width: 100%;
}

/* ══════════ AI Vision & Change Detection ══════════ */
.ai-cat-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  font-size: 0.72rem;
  padding: 0.35rem 0.65rem;
  border-radius: var(--radius-sm);
  transition: all 0.25s ease;
  line-height: 1.3;
}
.ai-cat-badge.analyzing {
  background: rgba(99, 102, 241, 0.15);
  border: 1px solid rgba(99, 102, 241, 0.4);
  color: #a5b4fc;
}
.ai-cat-badge.safe {
  background: rgba(16, 185, 129, 0.15);
  border: 1px solid rgba(16, 185, 129, 0.35);
  color: #6ee7b7;
}
.ai-cat-badge.warning {
  background: rgba(245, 158, 11, 0.15);
  border: 1px solid rgba(245, 158, 11, 0.35);
  color: #fcd34d;
}

/* ══════════ Senior-Friendly UI Elements ══════════ */
.btn-one-touch-pass {
  flex: 1 1 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.75rem;
  background: linear-gradient(135deg, #10b981, #059669);
  color: #ffffff;
  font-size: 1.05rem;
  font-weight: 800;
  padding: 0.95rem 1.25rem;
  border-radius: var(--radius-md);
  border: none;
  box-shadow: 0 4px 15px rgba(16, 185, 129, 0.35);
  cursor: pointer;
  transition: all 0.2s ease;
  letter-spacing: 0.3px;
}
.btn-one-touch-pass:hover {
  background: linear-gradient(135deg, #059669, #047857);
  box-shadow: 0 6px 20px rgba(16, 185, 129, 0.5);
  transform: translateY(-1px);
}
.btn-one-touch-pass:active {
  transform: translateY(1px);
}
.modal-footer-dual {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  width: 100%;
}
.modal-footer-sub-row {
  display: flex;
  justify-content: space-between;
  gap: 0.5rem;
}

/* ── Login Screen QR Badge Scanner ── */
.login-divider {
  display: flex;
  align-items: center;
  text-align: center;
  margin: 1.25rem 0;
  color: var(--text-dim);
  font-size: 0.75rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}
.login-divider::before, .login-divider::after {
  content: '';
  flex: 1;
  border-bottom: 1px solid var(--border-glass);
}
.login-divider span {
  padding: 0 0.75rem;
}
.btn-scan-badge-login {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.6rem;
  width: 100%;
  padding: 0.85rem;
  font-size: 0.95rem;
  font-weight: 700;
  background: rgba(99, 102, 241, 0.15);
  border: 1.5px solid rgba(99, 102, 241, 0.5);
  color: #a5b4fc;
  border-radius: var(--radius-md);
  cursor: pointer;
  transition: all 0.2s ease;
}
.btn-scan-badge-login:hover {
  background: rgba(99, 102, 241, 0.3);
  border-color: #818cf8;
  color: #ffffff;
}
.login-scanner-box {
  width: 100%;
  max-width: 280px;
  margin: 0 auto 1rem;
  border-radius: var(--radius-md);
  overflow: hidden;
  border: 2px solid var(--accent-primary);
  background: #000;
}

/* ── Staff Badge in QR Studio ── */
.staff-badges-section {
  margin-top: 2rem;
  padding-top: 1.5rem;
  border-top: 1px solid var(--border-glass);
}
.staff-badges-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 1.25rem;
  margin-top: 1rem;
}
.staff-badge-card {
  background: rgba(15, 23, 42, 0.7);
  border: 2px solid rgba(99, 102, 241, 0.4);
  border-radius: var(--radius-md);
  padding: 1.25rem 1rem;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.6rem;
  position: relative;
  box-shadow: var(--shadow-sm);
}
.staff-badge-card .badge-role-tag {
  position: absolute;
  top: 10px;
  right: 10px;
  font-size: 0.65rem;
  padding: 2px 8px;
  border-radius: var(--radius-full);
}
.staff-badge-card h4 {
  font-size: 1.05rem;
  font-weight: 800;
  margin: 0;
  color: var(--text-main);
}
.staff-badge-card .staff-code {
  font-size: 0.8rem;
  color: var(--accent-secondary);
  font-family: monospace;
  font-weight: 700;
}
.staff-badge-qr-box {
  width: 140px;
  height: 140px;
  background: #fff;
  padding: 8px;
  border-radius: var(--radius-sm);
  display: flex;
  align-items: center;
  justify-content: center;
}
.staff-badge-footer {
  font-size: 0.68rem;
  color: var(--text-dim);
  text-transform: uppercase;
  letter-spacing: 0.5px;
}