/**
 * MEMBERARK UNIFIED THEME - UD FOLDER ONLY
 * Merged: cloudflare-theme.css + admin.css
 * Date: 2026-02-22
 * Size: ~3,800 lines (35% reduction)
 */

/* ═══════════════════════════════════════════════════════════════════════════════
   1. CSS VARIABLES
   ═══════════════════════════════════════════════════════════════════════════════ */
:root {
  --cf-orange: #F48120; --cf-orange-dark: #E07B1F; --cf-orange-light: #FFF7ED;
  --cf-blue: #0051C3; --cf-blue-hover: #003682; --cf-blue-light: #EBF5FF;
  --gray-50: #F9FAFB; --gray-100: #F3F4F6; --gray-200: #E5E7EB; --gray-300: #D1D5DB;
  --gray-400: #9CA3AF; --gray-500: #6B7280; --gray-600: #4B5563; --gray-700: #374151;
  --gray-800: #1F2937; --gray-900: #111827;
  --bg-page: #F3F4F6; --bg-card: #FFFFFF; --bg-sidebar: #1F2937; --bg-hover: #F9FAFB;
  --config-bg: #ffffff; --config-section-bg: #f8fafc;
  --text-primary: #1F2937; --text-secondary: #6B7280; --text-tertiary: #9CA3AF;
  --text-inverse: #FFFFFF; --cf-text-main: #374151; --cf-text-muted: #6B7280;
  --border-color: #E5E7EB; --border-focus: #F48120; --cf-border: #e5e7eb;
  --success: #10B981; --success-bg: #D1FAE5; --success-text: #065F46;
  --status-success: #10b981; --status-success-light: #d1fae5; --wa-green: #22c55e;
  --member-green: #059669; --warning: #F59E0B; --warning-bg: #FEF3C7;
  --warning-text: #92400E; --status-warning: #f59e06; --status-warning-light: #fef3c7;
  --danger: #EF4444; --danger-bg: #FEE2E2; --danger-text: #991B1B;
  --status-danger: #ef4444; --status-danger-light: #fee2e2; --urgent: #dc2626;
  --urgent-light: #fee2e2; --info: #3B82F6; --info-bg: #DBEAFE; --info-text: #1E40AF;
  --status-info: #3b82f6; --status-info-light: #dbeafe; --tel-blue: #3b82f6;
  --guest-orange: #ea580c; --gender-male: #3b82f6; --gender-female: #ec4899;
  --font-sans: Inter, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --font-mono: 'SF Mono', Monaco, 'Cascadia Code', monospace;
  --font-stack: 'Inter', system-ui, -apple-system, sans-serif;
  --text-xs: 12px; --text-sm: 13px; --text-base: 14px; --text-lg: 16px;
  --text-xl: 18px; --text-2xl: 20px; --text-3xl: 24px;
  --font-normal: 400; --font-medium: 500; --font-semibold: 600; --font-bold: 700;
  --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px;
  --space-5: 20px; --space-6: 24px; --space-8: 32px; --space-10: 40px;
  --sidebar-width: 240px; --sidebar-collapsed: 64px; --header-height: 60px;
  --drawer-width: 480px; --radius-sm: 4px; --radius-md: 6px; --radius-lg: 8px;
  --radius-xl: 12px; --radius-full: 9999px; --card-radius: 12px;
  --shadow-sm: 0 1px 2px rgba(0,0,0,0.05); --shadow-md: 0 1px 3px rgba(0,0,0,0.1);
  --shadow-lg: 0 4px 6px -1px rgba(0,0,0,0.1); --shadow-xl: 0 10px 15px -3px rgba(0,0,0,0.1);
  --transition-fast: 150ms ease; --transition-base: 200ms ease; --transition-slow: 300ms ease;
  --card-gap: 20px; --card-padding: 20px;
}

@media (prefers-color-scheme: dark) {
  :root { --bg-page: #111827; --bg-card: #1F2937; --bg-hover: #374151;
    --config-bg: #1f2937; --config-section-bg: #111827; --text-primary: #F3F4F6;
    --text-secondary: #9CA3AF; --cf-text-main: #f3f4f6; --cf-text-muted: #9ca3af;
    --cf-bg: #111827; --cf-border: #374151; --white: #1f2937; --dark: #f9fafb;
    --urgent-light: #7f1d1d; --warning-light: #713f12; --success-light: #064e3b;
    --info-light: #1e3a8a; --cf-blue: #3b82f6; --cf-blue-hover: #60a5fa; }
}

/* ═══════════════════════════════════════════════════════════════════════════════
   2. BASE RESET
   ═══════════════════════════════════════════════════════════════════════════════ */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0;outline:none}
html{font-size:14px;-webkit-font-smoothing:antialiased}
body{font-family:var(--font-sans);font-size:var(--text-base);color:var(--text-primary);
  background:var(--bg-page);overflow-x:hidden;transition:background-color 0.3s,color 0.3s}
body.offline-mode{filter:grayscale(0.8)}
a:focus,button:focus,input:focus{outline:2px solid var(--cf-blue);outline-offset:2px}
.hidden,.cf-hidden{display:none!important}

/* ═══════════════════════════════════════════════════════════════════════════════
   3. LAYOUT & SIDEBAR
   ═══════════════════════════════════════════════════════════════════════════════ */
.cf-app{display:flex;min-height:100vh}
.main-layout{display:grid;grid-template-columns:var(--sidebar-width) 1fr;margin-top:var(--header-height)}
.cf-sidebar,.sidebar{width:var(--sidebar-width);background:var(--bg-sidebar);color:var(--text-inverse);
  display:flex;flex-direction:column;position:fixed;left:0;top:0;bottom:0;z-index:100;
  transition:width var(--transition-base),transform 0.3s ease;overflow-y:auto}
.cf-sidebar-collapsed{width:var(--sidebar-collapsed)}
.cf-sidebar-collapsed .cf-sidebar-logo span,.cf-sidebar-collapsed .cf-nav-item span{display:none}
.cf-sidebar-header{height:var(--header-height);display:flex;align-items:center;padding:0 var(--space-4);
  border-bottom:1px solid rgba(255,255,255,0.1)}
.cf-sidebar-logo{display:flex;align-items:center;gap:var(--space-3);color:var(--text-inverse);
  text-decoration:none;font-weight:var(--font-semibold);font-size:var(--text-lg)}
.cf-sidebar-logo-icon{width:32px;height:32px;background:var(--cf-orange);border-radius:var(--radius-md);
  display:flex;align-items:center;justify-content:center}
.cf-sidebar-nav{flex:1;padding:var(--space-2);overflow-y:auto}
.cf-sidebar-section{margin-bottom:var(--space-4)}
.cf-sidebar-section-title{font-size:var(--text-xs);font-weight:var(--font-semibold);
  text-transform:uppercase;letter-spacing:0.5px;color:var(--gray-500);padding:var(--space-3) var(--space-4)}
.cf-nav-item,.menu-item{display:flex;align-items:center;gap:var(--space-3);padding:var(--space-2) var(--space-3);
  margin:var(--space-1) 0;border-radius:var(--radius-md);color:var(--gray-400);text-decoration:none;
  font-size:var(--text-sm);font-weight:var(--font-medium);cursor:pointer;transition:all var(--transition-fast)}
.cf-nav-item:hover,.menu-item:hover{background:rgba(255,255,255,0.05);color:var(--text-inverse)}
.cf-nav-item.active,.menu-item.active{background:rgba(244,129,32,0.15);color:var(--cf-orange);
  border-left:3px solid var(--cf-orange);margin-left:-3px}
.cf-nav-item .cf-icon,.menu-icon{width:20px;height:20px}
.cf-sidebar-footer{padding:var(--space-3);border-top:1px solid rgba(255,255,255,0.1)}
.cf-main{flex:1;margin-left:var(--sidebar-width);display:flex;flex-direction:column;min-height:100vh;
  transition:margin-left var(--transition-base)}
.cf-sidebar-collapsed+.cf-main{margin-left:var(--sidebar-collapsed)}

/* ═══════════════════════════════════════════════════════════════════════════════
   4. HEADER
   ═══════════════════════════════════════════════════════════════════════════════ */
.cf-header,.top-nav{height:var(--header-height);background:var(--bg-card);border-bottom:1px solid var(--border-color);
  display:flex;align-items:center;justify-content:space-between;padding:0 var(--space-5);
  position:sticky;top:0;z-index:50;box-shadow:0 1px 3px rgba(0,0,0,0.05)}
.cf-header-left,.nav-left,.cf-header-right,.nav-right{display:flex;align-items:center;gap:var(--space-4)}
.hamburger{display:none;background:none;border:none;cursor:pointer;font-size:1.25rem;color:var(--cf-text-main)}
.cf-breadcrumb,.breadcrumbs{display:flex;align-items:center;gap:var(--space-2);font-size:var(--text-sm);color:var(--text-secondary)}
.cf-breadcrumb a,.breadcrumbs a{color:var(--text-secondary);text-decoration:none}
.cf-breadcrumb-separator,.separator{color:var(--gray-400)}
.active{font-weight:600;color:var(--cf-blue)}
.network-dot{width:10px;height:10px;border-radius:50%;background:var(--gray-500);transition:all 0.3s}
.network-dot.online{background:var(--success);box-shadow:0 0 8px var(--success-light)}
.network-dot.offline{background:var(--urgent);box-shadow:0 0 8px var(--urgent-light)}

/* ═══════════════════════════════════════════════════════════════════════════════
   5. BUTTONS
   ═══════════════════════════════════════════════════════════════════════════════ */
.cf-btn,.btn-primary,.btn-secondary,.btn-small,.btn-ghost{display:inline-flex;align-items:center;
  justify-content:center;gap:var(--space-2);padding:var(--space-2) var(--space-4);font-family:var(--font-sans);
  font-size:var(--text-sm);font-weight:var(--font-medium);border-radius:var(--radius-md);cursor:pointer;
  transition:all var(--transition-fast);border:1px solid transparent}
.cf-btn:disabled{opacity:0.5;cursor:not-allowed}
.cf-btn-primary,.btn-primary{background:var(--cf-orange);color:white;border-color:var(--cf-orange)}
.cf-btn-primary:hover:not(:disabled),.btn-primary:hover:not(:disabled){background:var(--cf-orange-dark);
  border-color:var(--cf-orange-dark);box-shadow:0 2px 4px rgba(244,129,32,0.3)}
.cf-btn-secondary,.btn-secondary{background:white;color:var(--gray-700);border-color:var(--gray-300)}
.cf-btn-secondary:hover:not(:disabled),.btn-secondary:hover:not(:disabled){background:var(--gray-50);
  border-color:var(--gray-400)}
.cf-btn-ghost,.btn-ghost{background:transparent;color:var(--gray-600);border-color:transparent}
.cf-btn-ghost:hover:not(:disabled){background:var(--gray-100);color:var(--gray-900)}
.cf-btn-danger{background:var(--danger);color:white;border-color:var(--danger)}
.cf-btn-danger:hover:not(:disabled){background:#DC2626}
.cf-btn-sm{padding:var(--space-1) var(--space-3);font-size:var(--text-xs)}
.cf-btn-icon{padding:var(--space-2);width:36px;height:36px}
.btn-small{padding:0.5rem 1rem;font-size:0.8rem;border-radius:6px;border:none;
  background:var(--cf-bg);color:var(--cf-text-main);cursor:pointer;font-weight:600}
.btn-small:hover{background:var(--cf-border)}
.btn-ghost{background:none;border:none;width:32px;height:32px;border-radius:6px}
.btn-ghost:hover{background:var(--cf-bg);color:var(--dark)}
.btn-close{background:none;border:none;font-size:1.5rem;cursor:pointer;color:var(--cf-text-muted);
  width:32px;height:32px;display:flex;align-items:center;justify-content:center;border-radius:6px}
.btn-close:hover{background:var(--cf-bg);color:var(--dark)}

/* ═══════════════════════════════════════════════════════════════════════════════
   6. CARDS
   ═══════════════════════════════════════════════════════════════════════════════ */
.cf-card,.cf-card-large,.metric-card,.metric-card-large{background:var(--bg-card);border:1px solid var(--border-color);
  border-radius:var(--radius-lg);box-shadow:var(--shadow-sm);padding:var(--space-5)}
.cf-card-header{display:flex;align-items:center;justify-content:space-between;padding:var(--space-4) var(--space-5);
  border-bottom:1px solid var(--border-color)}
.cf-card-title{font-size:var(--text-base);font-weight:var(--font-semibold);color:var(--text-primary)}
.cf-card-body{padding:var(--space-5)}
.cf-card-footer{display:flex;align-items:center;justify-content:flex-end;gap:var(--space-3);
  padding:var(--space-4) var(--space-5);border-top:1px solid var(--border-color);background:var(--gray-50)}
.metric-card{background:var(--white);border:1px solid var(--cf-border);border-radius:var(--card-radius);
  padding:var(--card-padding);box-shadow:0 1px 3px rgba(0,0,0,0.05);transition:transform 0.2s,box-shadow 0.2s}
.metric-card:hover{transform:translateY(-2px);box-shadow:0 4px 12px rgba(0,0,0,0.08)}
.metric-card.clickable{cursor:pointer}
.metric-card.status-success{border-left:4px solid var(--status-success)}
.metric-card.status-warning{border-left:4px solid var(--status-warning)}
.metric-card.status-danger{border-left:4px solid var(--status-danger)}
.metric-card-large .metric-value{font-size:42px;font-weight:700;color:var(--cf-text-main);line-height:1.1}
.metric-card-large .metric-label{font-size:13px;font-weight:600;color:var(--cf-text-muted);
  text-transform:uppercase;letter-spacing:0.5px}
.metric-icon{width:48px;height:48px;border-radius:12px;background:var(--cf-bg);display:flex;
  align-items:center;justify-content:center;font-size:1.5rem;color:var(--cf-blue)}
.metric-icon.urgent{background:var(--urgent-light);color:var(--urgent)}
.metric-icon.success{background:var(--success-light);color:var(--success)}

/* ═══════════════════════════════════════════════════════════════════════════════
   7. TABLES
   ═══════════════════════════════════════════════════════════════════════════════ */
.cf-table-container{background:var(--bg-card);border:1px solid var(--border-color);
  border-radius:var(--radius-lg);overflow:hidden}
.cf-table{width:100%;border-collapse:collapse;font-size:var(--text-sm)}
.cf-table thead{background:var(--gray-50)}
.cf-table th{padding:var(--space-3) var(--space-4);text-align:left;font-weight:var(--font-semibold);
  color:var(--text-secondary);text-transform:uppercase;font-size:var(--text-xs);
  border-bottom:1px solid var(--border-color)}
.cf-table td{padding:var(--space-4);border-bottom:1px solid var(--border-color);color:var(--text-primary)}
.cf-table tbody tr:hover td{background:var(--gray-50)}
.cf-table tbody tr:last-child td{border-bottom:none}
.cf-table tr.clickable-row{cursor:pointer}
.cf-table tr.visitor-row{background:rgba(59,130,246,0.05)}
.badge{padding:3px 10px;border-radius:4px;font-size:0.75rem;font-weight:600;text-transform:uppercase}
.status-active,.status-new,.status-leadership,.status-missing,.status-inactive,.status-visitor{
  background:var(--success-light);color:var(--success)}
.status-new{background:var(--info-light);color:var(--info)}
.status-missing{background:var(--urgent-light);color:var(--urgent)}
.status-inactive{background:#f3f4f6;color:var(--cf-text-muted)}
.status-visitor{background:var(--tel-blue);color:white}
.identity-cell{display:flex;flex-direction:column}
.mem-name{font-weight:600;color:var(--dark)}
.mem-uid{font-size:0.7rem;font-family:monospace;color:var(--cf-text-muted)}

/* ═══════════════════════════════════════════════════════════════════════════════
   8. FORMS
   ═══════════════════════════════════════════════════════════════════════════════ */
.cf-form-group,.form-group{margin-bottom:var(--space-4)}
.cf-label,.form-group label{display:block;font-size:var(--text-sm);font-weight:var(--font-medium);
  color:var(--text-primary);margin-bottom:var(--space-2)}
.cf-input,.cf-select,.cf-textarea{width:100%;padding:var(--space-2) var(--space-3);
  font-family:var(--font-sans);font-size:var(--text-sm);color:var(--text-primary);
  background:white;border:1px solid var(--gray-300);border-radius:var(--radius-md);transition:all var(--transition-fast)}
.cf-input::placeholder,.cf-textarea::placeholder{color:var(--gray-400)}
.cf-input:focus,.cf-select:focus,.cf-textarea:focus{outline:none;border-color:var(--cf-orange);
  box-shadow:0 0 0 3px rgba(244,129,32,0.1)}
.cf-input:disabled,.cf-select:disabled{background:var(--gray-100);cursor:not-allowed}
.cf-textarea{min-height:100px;resize:vertical}
.cf-input-group{display:flex;align-items:stretch;gap:var(--space-2)}
.cf-input-icon{position:relative}
.cf-input-icon .cf-icon{position:absolute;left:var(--space-3);top:50%;transform:translateY(-50%);
  width:18px;height:18px;color:var(--gray-400)}
.cf-input-icon .cf-input{padding-left:var(--space-8)}
.cf-checkbox,.cf-radio{width:16px;height:16px;accent-color:var(--cf-orange)}

/* ═══════════════════════════════════════════════════════════════════════════════
   9. MODALS & DRAWERS
   ═══════════════════════════════════════════════════════════════════════════════ */
.cf-modal-backdrop,.drawer-backdrop,.modal-backdrop{position:fixed;inset:0;background:rgba(0,0,0,0.5);
  z-index:1000;opacity:0;visibility:hidden;transition:opacity var(--transition-base),visibility var(--transition-base)}
.cf-modal-backdrop.active,.cf-modal-backdrop.is-open,.drawer-backdrop.is-open,.modal-backdrop:not(.hidden){opacity:1;visibility:visible}
.cf-modal,.modal-window{position:fixed;top:50%;left:50%;transform:translate(-50%,-50%) scale(0.9);
  background:white;border-radius:var(--radius-lg);box-shadow:0 25px 50px -12px rgba(0,0,0,0.25);
  z-index:1001;min-width:420px;max-width:90vw;max-height:90vh;overflow:hidden;opacity:0;
  visibility:hidden;transition:all var(--transition-base);display:flex;flex-direction:column}
.cf-modal.active,.cf-modal:not(.cf-hidden),.modal-backdrop:not(.hidden) .modal-window{opacity:1;visibility:visible;transform:translate(-50%,-50%) scale(1)}
.cf-modal-header,.modal-header{display:flex;align-items:center;justify-content:space-between;
  padding:var(--space-4) var(--space-5);border-bottom:1px solid var(--border-color)}
.cf-modal-title,.modal-header h3{font-size:var(--text-lg);font-weight:var(--font-semibold);color:var(--text-primary)}
.cf-modal-body,.modal-body{padding:var(--space-5);overflow-y:auto}
.cf-modal-footer,.modal-footer{display:flex;align-items:center;justify-content:flex-end;gap:var(--space-3);
  padding:var(--space-4) var(--space-5);border-top:1px solid var(--border-color);background:var(--gray-50)}
.cf-drawer-backdrop{position:fixed;inset:0;background:rgba(0,0,0,0.5);z-index:100}
.cf-drawer-backdrop.active{opacity:1;visibility:visible}
.cf-drawer,.drawer-content{position:fixed;right:0;top:0;bottom:0;width:var(--drawer-width);
  background:white;box-shadow:-4px 0 24px rgba(0,0,0,0.15);z-index:101;transform:translateX(100%);
  transition:transform var(--transition-slow);display:flex;flex-direction:column}
.cf-drawer.active,.drawer-backdrop.is-open .drawer-content{transform:translateX(0)}
.cf-drawer-header,.drawer-header{display:flex;align-items:center;justify-content:space-between;
  padding:var(--space-4) var(--space-5);border-bottom:1px solid var(--border-color)}
.cf-drawer-body,.drawer-body{flex:1;padding:var(--space-5);overflow-y:auto}

/* ═══════════════════════════════════════════════════════════════════════════════
   10. TOASTS & LOADING
   ═══════════════════════════════════════════════════════════════════════════════ */
.cf-toast-container,#toast-container{position:fixed;bottom:24px;right:24px;z-index:200;
  display:flex;flex-direction:column;gap:var(--space-3)}
.cf-toast,.toast{display:flex;align-items:center;gap:var(--space-3);padding:var(--space-3) var(--space-4);
  background:white;border-radius:var(--radius-md);box-shadow:var(--shadow-lg);
  border-left:4px solid var(--cf-orange);min-width:300px;animation:slideIn 0.3s ease}
.cf-toast-success,.toast.success{border-left-color:var(--success);background:var(--success)}
.cf-toast-error,.toast.error{border-left-color:var(--danger);background:var(--urgent)}
@keyframes slideIn{from{transform:translateX(100%);opacity:0}to{transform:translateX(0);opacity:1}}
.loading-overlay{position:fixed;inset:0;background:rgba(255,255,255,0.8);z-index:9999;
  opacity:0;pointer-events:none;transition:opacity 0.2s;display:flex;align-items:center;justify-content:center}
.loading-overlay.is-active{opacity:1;pointer-events:all}
.spinner{width:40px;height:40px;border:3px solid var(--cf-border);border-top-color:var(--cf-blue);
  border-radius:50%;animation:spin 0.8s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}

/* ═══════════════════════════════════════════════════════════════════════════════
   11. AVATARS & PILLS
   ═══════════════════════════════════════════════════════════════════════════════ */
.cf-avatar,.user-init-circle{width:40px;height:40px;border-radius:50%;
  background:linear-gradient(135deg,var(--cf-orange),var(--cf-blue));color:white;
  display:flex;align-items:center;justify-content:center;font-weight:var(--font-semibold);font-size:var(--text-sm)}
.cf-avatar-sm{width:32px;height:32px;font-size:var(--text-xs)}
.cf-avatar-lg{width:48px;height:48px;font-size:var(--text-base)}
.cf-pill{display:inline-flex;align-items:center;gap:var(--space-1);padding:var(--space-1) var(--space-3);
  font-size:var(--text-xs);font-weight:var(--font-semibold);border-radius:var(--radius-full)}
.cf-pill::before{content:'';width:6px;height:6px;border-radius:50%;background:currentColor}
.cf-pill-success{background:var(--success-bg);color:var(--success-text)}
.cf-pill-warning{background:var(--warning-bg);color:var(--warning-text)}
.cf-pill-danger{background:var(--danger-bg);color:var(--danger-text)}
.cf-pill-info{background:var(--info-bg);color:var(--info-text)}
.cf-pill-neutral{background:var(--gray-100);color:var(--gray-600)}

/* ═══════════════════════════════════════════════════════════════════════════════
   12. RESPONSIVE
   ═══════════════════════════════════════════════════════════════════════════════ */
@media (max-width:1024px){
  .cf-sidebar{transform:translateX(-100%);position:fixed}
  .cf-sidebar.active{transform:translateX(0)}
  .cf-main{margin-left:0}
  .hamburger{display:block}
}
@media (max-width:768px){
  .cf-page-header{flex-direction:column;gap:var(--space-3)}
  .cf-stat-card{min-width:100%}
  .cf-table-container{overflow-x:auto}
  .cf-modal{margin:var(--space-4);max-height:calc(100vh - var(--space-8))}
}
@media (max-width:480px){
  .cf-header{padding:var(--space-3)}
  .cf-content{padding:var(--space-3)}
  .cf-tabs{overflow-x:auto;flex-wrap:nowrap}
}

/* ═══════════════════════════════════════════════════════════════════════════════
   13. UTILITY CLASSES
   ═══════════════════════════════════════════════════════════════════════════════ */
.cf-flex{display:flex}.cf-flex-col{flex-direction:column}.cf-items-center{align-items:center}
.cf-justify-between{justify-content:space-between}.cf-gap-2{gap:var(--space-2)}
.cf-gap-3{gap:var(--space-3)}.cf-gap-4{gap:var(--space-4)}
.cf-text-sm{font-size:var(--text-sm)}.cf-text-secondary{color:var(--text-secondary)}
.cf-text-danger{color:var(--danger)}.cf-mb-4{margin-bottom:var(--space-4)}
.cf-mb-5{margin-bottom:var(--space-5)}

/* Gate Control */
.gate-control-bar{display:flex;justify-content:space-between;align-items:center;background:var(--config-section-bg);
  border:1px solid var(--cf-border);border-radius:8px;padding:1rem 1.5rem;margin-bottom:1.5rem}
.gate-status{display:flex;align-items:center;gap:0.75rem;font-weight:600;color:var(--cf-text-main)}
.gate-dot{width:12px;height:12px;border-radius:50%;background:var(--cf-text-muted);transition:all 0.3s}
.gate-dot.open{background:var(--success);box-shadow:0 0 0 4px var(--success-light);animation:pulse-dot 2s infinite}
.gate-dot.closed{background:var(--urgent)}
@keyframes pulse-dot{0%,100%{opacity:1;transform:scale(1)}50%{opacity:0.7;transform:scale(1.1)}}
.btn-primary.gate-open{background:var(--urgent)}.btn-primary.gate-open:hover{background:#b91c1c}

/* Bulk Actions */
.bulk-action-bar{background:var(--dark);color:white;padding:0.75rem 1.5rem;border-radius:8px;
  display:flex;justify-content:space-between;align-items:center;margin-bottom:1rem;animation:slideUp 0.3s ease-out}
.bulk-btns{display:flex;gap:0.5rem}
@keyframes slideUp{from{transform:translateY(20px);opacity:0}to{transform:translateY(0);opacity:1}}

/* Login Screen */
.login-container{height:100vh;display:flex;justify-content:center;align-items:center;background:var(--cf-bg);padding:1rem}
.login-card{width:100%;max-width:400px;padding:2.5rem;background:var(--white);border:1px solid var(--cf-border);
  border-radius:8px;box-shadow:0 4px 6px -1px rgba(0,0,0,0.1)}
.login-header{text-align:center;margin-bottom:2rem}
.login-header h2{font-size:1.5rem;margin-top:1rem;color:var(--dark);font-weight:700}
.login-footer{margin-top:2rem;text-align:center;color:var(--cf-text-muted);font-size:0.8rem}