/* ============================================================
   LOGIN PIN PAD STYLING
   ============================================================ */

/* 1. The Grid Layout for buttons (3 columns) */
.pin-pad-grid {
    display: grid !important;
    grid-template-columns: repeat(3, 1fr) !important;
    gap: 12px !important;
    max-width: 280px;
    margin: 20px auto !important;
}

/* 2. Individual Button Style */
.pin-btn {
    height: 60px !important;
    font-size: 20px !important;
    font-weight: bold !important;
    border-radius: 12px !important;
    background: rgba(255, 255, 255, 0.05) !important;
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
    color: #ffffff !important;
    cursor: pointer;
    display: flex !important;
    align-items: center;
    justify-content: center;
    transition: background 0.2s;
}

.pin-btn:hover {
    background: rgba(255, 255, 255, 0.15) !important;
}

/* 3. Special Colors for Clear and Submit */
.pin-btn.btn-clear {
    color: #ff4444 !important; /* Red for Clear */
    font-size: 12px !important;
}

.pin-btn.btn-submit {
    background: var(--accent) !important; /* Your Blue color */
    color: white !important;
}

/* 4. PIN Dots (The visualization of the entered pin) */
#pin-display {
    display: flex;
    justify-content: center;
    gap: 15px;
    margin-bottom: 30px;
}

/* The Placeholder (Empty Outline) */
.pin-dot {
    width: 14px;
    height: 14px;
    border-radius: 50%;
    border: 2px solid rgba(255, 255, 255, 0.2); /* Faint white outline */
    background: transparent;
    transition: all 0.1s ease;
}

/* The Filled State (Active) */
.pin-dot.filled {
    background-color: #28a745 !important; /* Solid Green */
    border-color: #28a745 !important;
    box-shadow: 0 0 10px rgba(40, 167, 69, 0.6);
    transform: scale(1.1);
}

@keyframes pop {
    0% { transform: scale(0.5); }
    100% { transform: scale(1); }
}
/* FORCE ALL TABLE DATA TO BE BLACK/DARK */
table tbody td, 
table tbody td span, 
table tbody td div,
table tbody td b {
    color: #1a1a18 !important; /* Professional dark charcoal */
}

/* Ensure the currency and numbers pop */
table tbody td {
    font-weight: 500;
}

/* Keep the 'Status' colors working (Red for 'Out', Green for 'In') */
/* This prevents the black rule from 'killing' your status colors */
table tbody td .badge,
table tbody td span[style*="color"] {
    color: inherit !important;
}

/* Optional: Make the zebra stripes slightly more visible for easier reading */
table tbody tr:nth-child(even) {
    background-color: rgba(0, 0, 0, 0.03) !important;
}
/* Force notifications to the very front of the screen */
#toast-container, .toast, #toast {
  z-index: 20000 !important; 
  position: fixed !important;
  bottom: 20px;
  right: 20px;
}

#toast-container, .toast, .toast-notification {
    position: fixed !important;
    bottom: 20px !important;
    right: 20px !important;
    z-index: 9999999 !important; /* 7 nines to be safe */
    display: block !important;
    pointer-events: auto !important;
}

/* Ensure the modal backdrop is lower than the toast */
.modal-backdrop {
    z-index: 10000 !important; 
}
/* ============================================================
   1. GLOBAL / BASE STYLES
   ============================================================ */

.cal-day.today {
    background-color: #e7f3ff !important; 
    border: 2px solid var(--accent) !important; 
    position: relative;
    z-index: 5; 
}


.cal-day.today .cal-day-num {
    color: var(--accent) !important;
    font-weight: 800 !important;
}

.cal-day.today::after {
    content: "TODAY";
    position: absolute;
    top: 5px;
    right: 8px;
    font-size: 9px;
    font-weight: bold;
    color: var(--accent);
    opacity: 0.7;
}
:root {
  --bg: #ffffff; --bg2: #f5f5f3; --bg3: #eeede8;
  --text: #1a1a18; --text2: #6b6b66; --text3: #9c9a92;
  --border: rgba(0,0,0,0.1); --border2: rgba(0,0,0,0.18);
  --accent: #185FA5; --accent-bg: #E6F1FB; --accent-text: #0C447C;
  --danger: #E24B4A; --danger-bg: #FCEBEB; --danger-text: #A32D2D;
  --warning: #BA7517; --warning-bg: #FAEEDA; --warning-text: #854F0B;
  --success: #3B6D11; --success-bg: #EAF3DE; --success-text: #27500A;
  --radius: 8px; --radius-lg: 12px;
}

* { box-sizing: border-box; margin: 0; padding: 0; }

html, body {
  height: 100%;
  font-family: -apple-system, system-ui, sans-serif;
  font-size: 14px;
  background: #001f3f; /* Your preferred Navy Blue background */
  color: white;
}
/* ============================================================
   GLOBAL BUTTON STYLES (Applies to PC & Mobile)
   ============================================================ */
.nav-btn, .btn-primary {
  background-color: var(--accent) !important;
  color: #ffffff !important;
  border: 1px solid rgba(255, 255, 255, 0.1) !important;
  border-radius: 6px;
  padding: 5px 12px;
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  white-space: nowrap;
  transition: all 0.2s ease;
}

/* Hover effect for all buttons */
.nav-btn:hover, .btn-primary:hover {
  filter: brightness(1.2); /* Makes it slightly lighter blue on hover */
  transform: translateY(-1px);
}

/* Active State (The page you are currently on) */
.nav-btn.active {
  background-color: #ffffff !important;
  color: #111111 !important; /* Dark text so you can read it on the white */
  border-color: #ffffff !important;
}
/* --- GHOST INVOICE CLEANUP --- */
#invoice-photo-preview-area, #invoice-scanning, #invoice-extracted-badge, 
button[onclick="saveInvoice()"] {
    display: none !important;
}

.modal-backdrop.open #invoice-photo-preview-area,
.modal-backdrop.open #invoice-scanning,
.modal-backdrop.open #invoice-extracted-badge,
.modal-backdrop.open button[onclick="saveInvoice()"] {
    display: block !important;
}

/* Update your primary buttons and highlights to use the variable */
.btn-primary, .user-avatar-circle, .active-nav-item, .pin-dot.filled {
  background-color: var(--accent) !important;
  border-color: var(--accent) !important;
}

/* If the app container is hidden, force the topbar to stay hidden */
#app[style*="display: none"],
#app[style*="display:none"] {
    display: none !important;
}
/* The "Quick Note" Dashboard Widget style */
.personal-note-card {
    background: rgba(255, 255, 255, 0.05);
    border-left: 4px solid var(--accent);
    padding: 15px;
    border-radius: 8px;
    margin-top: 15px;
}
#app[style*="display: none"] .topbar {
    display: none !important;
}
/* Styles for the avatar shapes */
.avatar-style-initial { border-radius: 50%; }
.avatar-style-square { border-radius: 8px; }
.avatar-style-border { border-radius: 50%; border: 3px solid var(--accent); background: none !important; color: var(--accent) !important; }
.type-btn {
    flex: 1;
    padding: 10px;
    background: rgba(255,255,255,0.1);
    border: 1px solid #444;
    color: #fff;
    border-radius: 8px;
    cursor: pointer;
    font-size: 13px;
}
.type-btn.active {
    background: #007bff;
    border-color: #007bff;
    font-weight: 700;
}
.modal-label {
    display: block;
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1px;
    color: #888;
    margin-bottom: 8px;
}

.modal-input {
    width: 100%;
    background: #2a2a2a !important;
    border: 1px solid #444 !important;
    color: #fff !important;
    padding: 12px !important;
    border-radius: 10px !important;
    font-size: 14px;
    outline: none;
    transition: border-color 0.2s;
}

.modal-input:focus {
    border-color: #28a745 !important;
    background: #333 !important;
}

/* Custom styling for the datetime icon on dark backgrounds */
input::-webkit-calendar-picker-indicator {
    filter: invert(1);
    cursor: pointer;
}
.btn-absence {
    background: #000 !important;
    color: #fff !important;
    border: none !important;
    padding: 6px 12px !important;
    border-radius: 8px !important;
    font-size: 13px !important;
    font-weight: 600 !important;
    cursor: pointer;
    transition: opacity 0.2s;
}

.btn-absence:hover {
    opacity: 0.8;
}
.view-toggle,
.tab-bar,
.sub-toggle {
  display: flex;
  gap: 4px;
  padding: 4px;
  border-radius: var(--radius);
  background: rgba(255,255,255,0.18);
  border: 1px solid rgba(255,255,255,0.18);
  width: fit-content;
  flex-wrap: wrap;
}

.view-toggle {
  margin-bottom: 15px;
}

.view-toggle .btn,
.tab,
.sub-toggle .btn {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 5px !important;
  padding: 5px 12px !important;
  min-height: 32px !important;
  border: none !important;
  border-radius: var(--radius) !important;
  background: transparent !important;
  color: rgba(26,26,24,0.72) !important;
  font-size: 12px !important;
  font-weight: 600 !important;
  font-family: inherit !important;
  cursor: pointer !important;
  white-space: nowrap !important;
  transition: all 0.15s ease !important;
  box-shadow: none !important;
}

.view-toggle .btn:hover,
.tab:hover,
.sub-toggle .btn:hover {
  background: rgba(255,255,255,0.55) !important;
  color: #1a1a18 !important;
}

.view-toggle .btn.active,
.tab.active,
.sub-toggle .btn.active {
  background: #ffffff !important;
  color: var(--text) !important;
  font-weight: 700 !important;
  box-shadow: 0 2px 8px rgba(0,0,0,0.08) !important;
}
#panel-tools .tab-bar,
#panel-admin .tab-bar,
#panel-equipment .sub-toggle,
#panel-calendar .view-toggle {
  background: rgba(0,0,0,0.38) !important;
  border-color: rgba(255,255,255,0.22) !important;
}
#panel-tools .tab,
#panel-admin .tab,
#panel-equipment .sub-toggle .btn,
#panel-calendar .view-toggle .btn {
  color: rgba(255,255,255,0.85) !important;
}
#panel-tools .tab:hover,
#panel-admin .tab:hover,
#panel-equipment .sub-toggle .btn:hover,
#panel-calendar .view-toggle .btn:hover {
  color: #ffffff !important;
  background: rgba(255,255,255,0.18) !important;
}
#panel-tools .tab.active,
#panel-admin .tab.active,
#panel-equipment .sub-toggle .btn.active,
#panel-calendar .view-toggle .btn.active {
  background: #ffffff !important;
  color: #1a1a18 !important;
}
    /* Observation Severity Colors */
.badge.obs-info { background: #E6F1FB; color: #0C447C; border: 1px solid #185FA5; }
.badge.obs-watch { background: #FAEEDA; color: #854F0B; border: 1px solid #BA7517; }
.badge.obs-critical { background: #FCEBEB; color: #A32D2D; border: 1px solid #E24B4A; }
@keyframes pulse {
    0% { opacity: 1; }
    50% { opacity: 0.7; }
    100% { opacity: 1; }
}
/* Zerk Map UI tweaks */
#btn-delete-view { margin-top: 10px; display: none; }
  /* --- UNIVERSAL PRO THEME (Glassmorphism + Accent Bars) --- */

/* --- TAB CONTRAST FIX --- */

/* Tab styling handled by shared segmented-control rules above. */


  /* 1. Main Cards */
.card {
  background: rgba(255, 255, 255, 0.92) !important;
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1px solid rgba(255, 255, 255, 0.4) !important;
  border-top: 4px solid var(--accent) !important; /* Universal Blue Bar */
  border-radius: var(--radius-lg);
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.12) !important;
  padding: 20px !important;
  transition: transform 0.2s ease;
}

/* 2. Top Metric Boxes (Equipment, Overdue, etc.) */
.metric-card {
  background: rgba(255, 255, 255, 0.95) !important;
  backdrop-filter: blur(8px);
  border: 1px solid rgba(255, 255, 255, 0.5) !important;
  border-top: 4px solid var(--accent) !important; /* Universal Blue Bar */
  border-radius: var(--radius);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08) !important;
}

/* 3. Tables (Equipment Registry, Work Orders, etc.) */
.table-wrap {
  background: rgba(255, 255, 255, 0.92) !important;
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1px solid rgba(255, 255, 255, 0.4) !important;
  border-top: 4px solid var(--accent) !important; /* Universal Blue Bar */
  border-radius: var(--radius-lg);
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.12) !important;
  overflow: hidden;
}

/* 4. Modals (Popups) */
.modal {
  background: rgba(255, 255, 255, 0.98) !important;
  backdrop-filter: blur(16px);
  border-top: 6px solid var(--accent) !important; /* Thickest blue bar for popups */
  box-shadow: 0 24px 64px rgba(0, 0, 0, 0.3) !important;
}

/* 5. Stat Rows (The horizontal bars inside analytics) */
.stat-bar-wrap {
    background: rgba(0, 0, 0, 0.05) !important;
    border-radius: 4px;
}

/* Adjust Dark Mode to keep the glass effect */
body.dark-mode .card, 
body.dark-mode .metric-card, 
body.dark-mode .table-wrap, 
body.dark-mode .modal {
  background: rgba(30, 30, 28, 0.9) !important;
  border: 1px solid rgba(255, 255, 255, 0.1) !important;
  border-top: 4px solid var(--accent) !important;
  color: #e8e6de !important;
}
    /* --- ANALYTICS LOOK & FEEL POLISH --- */
#panel-analytics .metric-card {
    border-top: 4px solid var(--accent); /* Adds a blue bar to the top */
    background: rgba(255, 255, 255, 0.98) !important; /* Slightly more solid for readability */
}

#panel-analytics .card {
    background: rgba(255, 255, 255, 0.95) !important;
    border: 1px solid rgba(255, 255, 255, 0.4);
    backdrop-filter: blur(10px); /* Blurs the background image behind the card */
}

#panel-analytics .card-title {
    color: var(--accent-text);
    font-size: 11px;
    letter-spacing: 1px;
}

.empty-state {
    color: var(--text3);
    font-size: 12px;
    text-align: center;
    padding: 20px;
    font-style: italic;
}
    #panel-analytics .card {
    background: rgba(255, 255, 255, 0.95) !important;
    border: 1px solid rgba(0,0,0,0.05);
    box-shadow: 0 10px 30px rgba(0,0,0,0.08);
    transition: transform 0.2s;
}

#panel-analytics .metric-card {
    background: #ffffff !important;
    border-bottom: 3px solid var(--accent);
}

.stat-row {
    display: flex;
    align-items: center;
    padding: 8px 0;
    border-bottom: 1px solid var(--bg3);
}

.stat-row:last-child { border-bottom: none; }
    .badge.b-progress { background: #E6F1FB; color: #0C447C; border: 1px solid #185FA5; } /* In Progress - Blue */
.badge.b-parts { background: #FAEEDA; color: #854F0B; border: 1px solid #BA7517; }    /* Waiting for Parts - Orange */
    /* --- CALENDAR BELLS & WHISTLES --- */


/* 2. Lower the Calendar layer so it doesn't block popups */
#panel-calendar.active {
    z-index: 100 !important; /* Lowered from 999 to 100 */
}

/* 3. Keep the Topbar in the middle (Above content, below popups) */

    .cal-event {
    font-size: 10px;
    padding: 2px 6px;
    border-radius: 4px;
    margin-bottom: 2px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    cursor: pointer;
    font-weight: 500;
}

/* Color Coding for Calendar Badges */
.cal-event.work-order { background: #e7f3ff !important; color: #007bff !important; border-left: 3px solid #007bff !important; }
.cal-event.work-order.completed { background: #e6ffed !important; color: #28a745 !important; border-left: 3px solid #28a745 !important; }
.cal-event.work-order.pending { background: #fff4e6 !important; color: #fd7e14 !important; border-left: 3px solid #fd7e14 !important; }

/* Staff Absence Color (Yellow) */
.cal-event.staff-absence { 
    background: #fff3cd !important; 
    color: #856404 !important; 
    border-left: 3px solid #ffc107 !important;
    font-weight: 600;
}

/* Forecast/Adaptive Color */
.cal-event.forecast { background: #f3f0ff !important; color: #6f42c1 !important; border-left: 3px solid #6f42c1 !important; border-style: dashed !important; }

.cal-day:hover {
    background: rgba(255, 255, 255, 1) !important;
    box-shadow: inset 0 0 0 2px var(--accent);
}
        #panel-chat {
    max-width: 1400px;
    margin: 0 auto;
}
    
    #zerk-svg-layer {  
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    height: 100% !important;
    pointer-events: none !important; /* Let clicks pass through to the overlay */
    z-index: 50 !important; /* Sit between the image and the dots */
    overflow: visible !important;
    display: block !important;
}

/* Force the lines to be bright and thick */
.zerk-line {
    stroke: #ffff00 !important; /* Bright Yellow */
    stroke-width: 0.8 !important;
    stroke-linecap: round !important;
    opacity: 1 !important;
}


#zerk-map-container {
  position: relative !important;
  width: fit-content !important; 
  max-height: 65vh !important;
  margin: 0 auto !important;
  background: #000;
  border-radius: 12px;
  overflow: hidden;
  display: flex !important;
  align-items: center;
  justify-content: center;
}

/* ADD THIS: This forces the actual image to stay inside the screen bounds */
#zerk-map-img {
    max-height: 80vh !important;
    width: auto !important; /* Prevents the image from stretching horizontally */
    max-width: 100% !important;
    display: block;
    object-fit: contain;
}

#zerk-dots-overlay {
  position: absolute !important;
  inset: 0 !important;
  z-index: 100 !important;
  cursor: crosshair !important;
  pointer-events: auto !important;
}
.zerk-dot {
    /* 1. Positioning & Layout */
    position: absolute !important;
    transform: translate(-50%, -50%) !important; /* Centers exactly on click */
    z-index: 150 !important; /* Forces it above the image and lines */
    pointer-events: auto !important;
    cursor: pointer;
    
    /* 2. Shape & Size */
    width: 24px !important;
    height: 24px !important;
    border-radius: 50% !important;
    border: 2px solid #000 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    
    /* 3. Colors (The "No White Box" Fix) */
    background: #ffec00 !important; /* Solid bright yellow */
    color: #000000 !important;     /* Solid black number */
    box-shadow: 0 2px 6px rgba(0,0,0,0.6) !important;
    
    /* 4. Text Styling */
    font-size: 12px !important;
    font-weight: 900 !important; /* Extra bold for visibility */
    line-height: 1 !important;
    text-align: center !important;
    text-shadow: none !important; /* Removes any blurry edges */
}

/* Optional: Slight pop effect when hovering over the dot */
.zerk-dot:hover {
    background: #ffffff !important;
    transform: translate(-50%, -50%) scale(1.1) !important;
}
/* Widen the modal ONLY when looking at Zerk Maps */
.modal-zerk-wide {
    max-width: 1350px !important; 
    width: 98% !important;
}

/* The Grid Container */
.zerk-layout-grid {
    display: grid;
    grid-template-columns: 1fr 320px; /* Map on left, 320px table on right */
    gap: 20px;
    align-items: flex-start;
}

/* Side Table Styling */
.zerk-instruction-table {
    width: 100%;
    border-collapse: collapse;
    background: rgba(255,255,255,0.05);
    border-radius: 8px;
    overflow: hidden;
    font-size: 13px;
}
.zerk-instruction-table th { 
    text-align: left; padding: 10px; background: rgba(255,255,255,0.1); color: var(--text2); 
}
.zerk-instruction-table td { 
    padding: 10px; border-bottom: 1px solid rgba(255,255,255,0.05); vertical-align: top; 
}
.zerk-instruction-table tr:hover { background: rgba(255,255,255,0.08); cursor: pointer; }

/* Hide scrollbar for the table area but keep it scrollable */
.zerk-sidebar {
    max-height: 65vh;
    overflow-y: auto;
}
/* The Main Grid: Puts the map and table side-by-side */
.zerk-main-layout {
    display: grid !important;
    grid-template-columns: 1fr 300px !important; 
    gap: 20px !important;
    align-items: flex-start !important;
    margin-top: 15px;
}

/* Wide Modal Rule: Forces the Equipment card to grow */
.modal-zerk-wide {
    max-width: 1200px !important;
    width: 95% !important;
}

/* Sidebar Container */
#zerk-sidebar-container {
    background: #ffffff !important; 
    border-radius: 12px;
    padding: 15px;
    border: 1px solid #ddd;
    height: 100%; 
    min-height: 450px;
    display: flex;
    flex-direction: column;
}

/* Sidebar Table - Black Text for readability */
.zerk-sidebar-table {
    width: 100%;
    border-collapse: collapse;
    color: #000000 !important; 
}

.zerk-sidebar-table th {
    text-align: left;
    padding: 10px 5px;
    border-bottom: 2px solid #eee;
    color: #555;
    font-size: 11px;
}

.zerk-sidebar-table td {
    padding: 12px 5px;
    border-bottom: 1px solid #eee;
    vertical-align: middle;
    color: #000000 !important; 
}

/* Yellow circle numbers in the table */
.zerk-num-list {
    background: #ffec00;
    color: black;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 800;
    font-size: 11px;
    border: 1px solid #000;
}
#zerk-view-switcher .btn {
    cursor: pointer;
    user-select: none; 
}
.zerk-line {
    stroke: #ffec00;
    stroke-width: 1;
    stroke-dasharray: 4; /* Makes them dashed/subtle */
    opacity: 0.3;        /* Fades them out */
    transition: all 0.2s ease;
}

/* When hovering over a dot or a table row, make the line "POP" */
.zerk-line.highlight {
    stroke-width: 3;
    stroke-dasharray: 0; /* Solid line */
    opacity: 1;
    filter: drop-shadow(0 0 5px #ffec00);
}

/* Highlight the dot too */
.zerk-dot.highlight {
    transform: translate(-50%, -50%) scale(1.3) !important;
    background: #ffffff !important;
    z-index: 200 !important;
}

    
#chat-sidebar {
    width: 240px !important;
    background: rgba(0, 0, 0, 0.4);
    padding: 15px;
    border-radius: var(--radius-lg);
    display: flex;
    flex-direction: column;
    gap: 5px;
    flex-shrink: 0;
}

#chat-sidebar .chat-channel-btn {
    background: transparent !important;
    color: #ffffff !important;
    border: 1px solid transparent !important;
    padding: 10px 12px !important;
    text-align: left;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-size: 13px;
    border-radius: var(--radius);
    cursor: pointer;
}

#chat-sidebar .chat-channel-btn:hover {
    background: rgba(255, 255, 255, 0.1) !important;
}

#chat-sidebar .chat-channel-btn.active {
    background: rgba(255, 255, 255, 0.2) !important;
    border-color: rgba(255, 255, 255, 0.3) !important;
    font-weight: 600;
}

.unread-dot {
    width: 8px;
    height: 8px;
    background: #E24B4A;
    border-radius: 50%;
    display: inline-block;
}
    /* 1. Hide the Invoice Modal backdrop unless it's open */
#invoice-modal:not(.open) {
    display: none !important;
}

/* 2. Hide any stray form rows or grids that might be loose at the bottom */
body > .form-row, 
body > .form-grid, 
body > .modal,
body > #invoice-scanning,
body > #invoice-photo-area {
    display: none !important;
}

/* AUTH */
#auth-screen{display:flex;align-items:center;justify-content:center;min-height:100vh;padding:24px;background:linear-gradient(135deg,#0d1b2a 0%,#1a2f4a 50%,#0d1b2a 100%)}
.auth-card{background:rgba(0,0,0,0.45);border:1px solid rgba(255,255,255,0.15);border-radius:var(--radius-lg);padding:36px;width:100%;max-width:400px;backdrop-filter:blur(12px)}
.auth-logo{font-size:24px;font-weight:700;margin-bottom:4px;color:#fff;display:flex;align-items:center;gap:8px}
.auth-sub{font-size:13px;color:rgba(255,255,255,0.7);margin-bottom:20px}
.auth-err{font-size:12px;color:#F09595;background:rgba(226,75,74,0.2);border:1px solid rgba(226,75,74,0.4);padding:9px 11px;border-radius:var(--radius);margin-bottom:12px;display:none}
.auth-card .form-label{color:rgba(255,255,255,0.75)}
.auth-card .form-input{background:rgba(255,255,255,0.12);border-color:rgba(255,255,255,0.25);color:#fff}
.auth-card .form-input::placeholder{color:rgba(255,255,255,0.4)}
.auth-card .form-input:focus{border-color:rgba(255,255,255,0.6);background:rgba(255,255,255,0.18);outline:none}
.auth-switch{font-size:13px;color:rgba(255,255,255,0.6);text-align:center;margin-top:14px}
.auth-switch a{color:#85B7EB;cursor:pointer}
.auth-divider{border:none;border-top:1px solid rgba(255,255,255,0.15);margin:16px 0}
/* APP */
#app{display:flex;flex-direction:column;min-height:100vh;background:linear-gradient(135deg,#0d1b2a 0%,#1a2f4a 50%,#0d1b2a 100%)}


/* BUTTONS */
.btn{padding:6px 14px;border-radius:var(--radius);font-size:13px;cursor:pointer;font-family:inherit;display:inline-flex;align-items:center;gap:5px;white-space:nowrap;transition:all .15s}
.btn-primary{background:var(--text);color:var(--bg);border:none;font-weight:500}
.btn-primary:hover{opacity:.88}
.btn-secondary{background:transparent;color:var(--text);border:1px solid var(--border2)}
.btn-secondary:hover{background:var(--bg2)}
.btn-danger{background:transparent;color:var(--danger-text);border:1px solid var(--danger);font-size:12px;padding:4px 9px}
.btn-danger:hover{background:var(--danger-bg)}
.btn-success{background:transparent;color:var(--success-text);border:1px solid var(--success);font-size:12px;padding:4px 9px}
.btn-sm{padding:4px 9px;font-size:12px}
/* PANELS */
.section-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:14px;gap:8px;flex-wrap:wrap}
.section-title{font-size:16px;font-weight:600;color:#fff;text-shadow:0 1px 3px rgba(0,0,0,.5)}
/* METRICS */
.metrics{display:grid;grid-template-columns:repeat(auto-fit,minmax(140px,1fr));gap:10px;margin-bottom:14px}
.metric-card{background:rgba(255,255,255,0.88);border-radius:var(--radius);padding:12px 14px}
.metric-label{font-size:11px;color:var(--text2);text-transform:uppercase;letter-spacing:.5px;margin-bottom:4px}
.metric-value{font-size:24px;font-weight:600;line-height:1}
.metric-sub{font-size:11px;color:var(--text3);margin-top:3px}
.v-danger{color:var(--danger)}.v-warning{color:var(--warning)}.v-success{color:var(--success)}
/* CARDS */
.card{background:rgba(255,255,255,0.92);border:1px solid var(--border);border-radius:var(--radius-lg);padding:14px 16px;margin-bottom:12px}
.card-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:12px;gap:8px}
.card-title{font-size:11px;font-weight:600;color:var(--text2);text-transform:uppercase;letter-spacing:.5px}
.grid-2{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:12px}
.grid-3{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:12px}
/* TABLES */
.table-wrap{background:rgba(255,255,255,0.92);border:1px solid var(--border);border-radius:var(--radius-lg);overflow:auto}
table{width:100%;border-collapse:collapse;font-size:13px}
th{text-align:left;font-size:11px;font-weight:600;color:var(--text2);text-transform:uppercase;letter-spacing:.4px;padding:8px 10px;border-bottom:1px solid var(--border);background:rgba(245,245,243,0.95);white-space:nowrap}
th:first-child{padding-left:16px}
td{padding:9px 10px;border-bottom:1px solid var(--border);vertical-align:middle}
td:first-child{padding-left:16px}
tr:last-child td{border-bottom:none}
tbody tr:hover td{background:rgba(245,245,243,0.6);cursor:pointer}
/* BADGES */
.badge{display:inline-block;padding:2px 8px;border-radius:20px;font-size:11px;font-weight:500}
.bd{background:var(--danger-bg);color:var(--danger-text)}
.bw{background:var(--warning-bg);color:var(--warning-text)}
.bs{background:var(--success-bg);color:var(--success-text)}
.bi{background:var(--accent-bg);color:var(--accent-text)}
.bg{background:var(--bg3);color:var(--text2)}
/* ALERTS */
.alert{display:flex;align-items:center;gap:8px;padding:9px 13px;border-radius:var(--radius);font-size:13px;margin-bottom:8px}
.alert-d{background:var(--danger-bg);color:var(--danger-text);border:1px solid var(--danger)}
.alert-w{background:var(--warning-bg);color:var(--warning-text);border:1px solid var(--warning)}
@keyframes pulse{0%,100%{opacity:1}50%{opacity:.4}}
.dot{width:7px;height:7px;border-radius:50%;background:currentColor;display:inline-block;animation:pulse 1.6s infinite;flex-shrink:0}
/* FORMS */
.form-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.form-group{display:flex;flex-direction:column;gap:4px}
.form-group.full{grid-column:1/-1}
.form-label{font-size:12px;font-weight:500;color:var(--text2)}
.form-input,.form-select,.form-textarea{padding:8px 10px;border:1px solid var(--border2);border-radius:var(--radius);font-size:13px;background:var(--bg);color:var(--text);font-family:inherit;transition:border-color .15s}
.form-input:focus,.form-select:focus,.form-textarea:focus{outline:none;border-color:var(--accent)}
.form-textarea{resize:vertical;min-height:68px}
.form-row{display:flex;gap:8px;margin-top:16px;justify-content:flex-end;flex-wrap:wrap}
/* EQUIP ROWS */
.equip-row{display:flex;align-items:center;gap:10px;padding:9px 0;border-bottom:1px solid var(--border);cursor:pointer}
.equip-row:last-child{border-bottom:none}
.equip-icon{width:36px;height:36px;border-radius:var(--radius);background:var(--bg2);display:flex;align-items:center;justify-content:center;font-size:16px;flex-shrink:0;overflow:hidden}
.equip-icon img{width:100%;height:100%;object-fit:cover}
.equip-info{flex:1;min-width:0}
.equip-name{font-weight:500;font-size:13px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.equip-meta{font-size:11px;color:var(--text2)}
.progress-bar{height:3px;background:var(--bg3);border-radius:2px;margin-top:4px;overflow:hidden}
.progress-fill{height:100%;border-radius:2px}
/* HEALTH SCORE */
.health-score{display:inline-flex;align-items:center;gap:4px;font-weight:600;font-size:13px}
.health-bar{width:60px;height:6px;background:var(--bg3);border-radius:3px;overflow:hidden;display:inline-block}
.health-fill{height:100%;border-radius:3px}
/* CHECKLIST */
.check-item{display:flex;align-items:center;gap:9px;padding:7px 0;border-bottom:1px solid var(--border);cursor:pointer;user-select:none}
.check-item:last-child{border-bottom:none}
.check-box{width:17px;height:17px;border:1.5px solid var(--border2);border-radius:4px;flex-shrink:0;display:flex;align-items:center;justify-content:center;font-size:11px}
.check-box.on{background:var(--text);border-color:var(--text);color:var(--bg)}
.check-item.done .check-label{text-decoration:line-through;color:var(--text3)}
/* PHOTOS */
.photo-grid{display:flex;flex-wrap:wrap;gap:8px;margin-top:8px}
.photo-thumb{width:72px;height:72px;border-radius:var(--radius);object-fit:cover;border:1px solid var(--border);cursor:pointer}
.photo-thumb:hover{opacity:.85}
.photo-add{width:72px;height:72px;border-radius:var(--radius);border:1.5px dashed var(--border2);display:flex;align-items:center;justify-content:center;cursor:pointer;font-size:22px;color:var(--text3);background:var(--bg2)}
.photo-add:hover{border-color:var(--accent);color:var(--accent)}
/* DOCS */
.doc-item{display:flex;align-items:center;gap:10px;padding:8px 0;border-bottom:1px solid var(--border);font-size:13px}
.doc-item:last-child{border-bottom:none}
.doc-icon{width:32px;height:32px;border-radius:var(--radius);background:var(--accent-bg);display:flex;align-items:center;justify-content:center;font-size:16px;flex-shrink:0}
.doc-info{flex:1}
.doc-name{font-weight:500}
.doc-meta{font-size:11px;color:var(--text2)}
/* MODAL */
.modal-backdrop {
    display: none;
    position: fixed !important;
    inset: 0 !important;
    width: 100vw !important;
    height: 100vh !important;
    background: rgba(0, 0, 0, 0.75) !important; /* Slightly transparent */
    backdrop-filter: blur(4px); /* Glossy effect */
    z-index: 5000 !important; /* Standard high number */
    justify-content: center !important;
    align-items: center !important;
}

/* Show modal when active or open class is added */
.modal-backdrop.active, 
.modal-backdrop.open {
    display: flex !important;
}
/* The actual Card styling */
.modal-card {
    position: relative !important;
    box-shadow: 0 10px 40px rgba(0,0,0,0.5);
}

.modal{background:var(--bg);border-radius:var(--radius-lg);border:1px solid var(--border);padding:22px;width:100%;max-width:560px;max-height:90vh;overflow-y:auto;box-shadow:0 20px 60px rgba(0,0,0,.3)}
.modal-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:18px}
.modal-title{font-size:16px;font-weight:600}
.modal-close{background:none;border:none;cursor:pointer;font-size:20px;color:var(--text2);padding:2px 6px;border-radius:var(--radius)}
.modal-close:hover{background:var(--bg2)}
/* TABS */
.tab-bar{margin-bottom:14px}
/* PARTS ROW */
.parts-row{display:flex;align-items:center;padding:8px 0;border-bottom:1px solid var(--border);font-size:13px;gap:8px}
.parts-row:last-child{border-bottom:none}
/* COMMENTS */
.comment{background:var(--bg2);border-radius:var(--radius);padding:10px 12px;margin-bottom:8px}
.comment-author{font-size:12px;font-weight:600;margin-bottom:3px}
.comment-time{font-size:11px;color:var(--text3);margin-left:6px;font-weight:400}
.comment-body{font-size:13px;color:var(--text)}
/* CALENDAR */
.cal-grid{display:grid;grid-template-columns:repeat(7,1fr);gap:2px}
.cal-header{text-align:center;font-size:11px;font-weight:600;color:var(--text2);padding:4px 0;text-transform:uppercase}
.cal-day{min-height:60px;background:rgba(255,255,255,0.7);border-radius:4px;padding:4px;font-size:11px;cursor:pointer;border:1px solid transparent}
.cal-day:hover{background:rgba(255,255,255,0.9)}
.cal-day.today{border-color:var(--accent)}
.cal-day.other-month{background:rgba(255,255,255,0.3);color:var(--text3)}
.cal-day-num{font-weight:600;margin-bottom:2px}
.cal-event{background:var(--accent-bg);color:var(--accent-text);border-radius:3px;padding:1px 4px;margin-bottom:1px;font-size:10px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.cal-event.overdue{background:var(--danger-bg);color:var(--danger-text)}
.cal-event.completed{background:var(--success-bg);color:var(--success-text)}
.cal-nav{display:flex;align-items:center;gap:12px;margin-bottom:10px}
.cal-nav-title{font-weight:600;font-size:15px;flex:1;text-align:center}
/* ANALYTICS */
.stat-row{display:flex;align-items:center;padding:6px 0;border-bottom:1px solid var(--border);font-size:13px;gap:8px}
.stat-row:last-child{border-bottom:none}
.stat-bar-wrap{flex:1;background:var(--bg3);border-radius:2px;height:14px;overflow:hidden}
.stat-bar{height:100%;border-radius:2px}
/* RECURRENCE */
.recur-item{display:flex;align-items:center;gap:10px;padding:8px 0;border-bottom:1px solid var(--border);font-size:13px}
.recur-item:last-child{border-bottom:none}
/* TOAST */
#toast{position:fixed;bottom:20px;right:20px;background:#1a1a18;color:#fff;border-radius:var(--radius);padding:9px 16px;font-size:13px;z-index:999;opacity:0;transition:opacity .3s;pointer-events:none}
#toast.show{opacity:1}
/* PHOTO VIEWER */
#photo-viewer{position:fixed;inset:0;background:rgba(0,0,0,.82);z-index:500;display:none;align-items:center;justify-content:center}
#photo-viewer.open{display:flex}
#photo-viewer img{max-width:92vw;max-height:88vh;border-radius:var(--radius-lg)}
#pv-close{position:absolute;top:16px;right:16px;background:rgba(255,255,255,.18);border:none;color:#fff;font-size:22px;cursor:pointer;border-radius:50%;width:40px;height:40px;display:flex;align-items:center;justify-content:center}
#offline-banner{display:none;background:var(--warning-bg);color:var(--warning-text);border-bottom:1px solid var(--warning);padding:7px 16px;font-size:12px;text-align:center}
#offline-queue-banner{display:none;background:var(--accent-bg);color:var(--accent-text);border-bottom:1px solid var(--accent);padding:7px 16px;font-size:12px;text-align:center;cursor:pointer}
body.dark-mode{filter:brightness(0.88) hue-rotate(0deg)}
body.dark-mode .card,body.dark-mode .table-wrap,body.dark-mode .metric-card{background:rgba(30,30,28,0.95)!important;color:#e8e6de}
body.dark-mode th{background:rgba(20,20,18,0.95)!important;color:#9c9a92}
body.dark-mode td{color:#e8e6de}
body.dark-mode .form-input,body.dark-mode .form-select,body.dark-mode .form-textarea{background:#2c2c2a;color:#e8e6de;border-color:#444}
body.dark-mode .modal{background:#1c1c1a;color:#e8e6de}
body.dark-mode .btn-secondary{color:#e8e6de;border-color:#555}


.chat-channel-btn{display:flex;align-items:center;gap:6px;padding:7px 10px;border-radius:var(--radius);font-size:13px;cursor:pointer;background:rgba(255,255,255,0.1);color:rgba(255,255,255,0.8);border:1px solid transparent;width:100%;text-align:left;font-family:inherit;transition:all .15s}
.chat-channel-btn:hover{background:rgba(255,255,255,0.2);color:#fff}
.chat-channel-btn.active{background:rgba(255,255,255,0.25);color:#fff;font-weight:600;border-color:rgba(255,255,255,0.3)}
   

@media screen and (max-width: 768px) {
  .user-chip {
    display: none !important;
  }

  .metrics {
    grid-template-columns: 1fr 1fr !important;
  }

  .modal {
    width: 95% !important;
    padding: 15px !important;
  }
}

.sync-dot {
width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #639922; /* Green */
  display: inline-block;
  margin-right: 4px;
}

.sync-dot.syncing {
  background: #EF9F27; /* Orange */
  animation: pulse 1s infinite;
}

.sync-dot.offline {
  background: #E24B4A; /* Red */
}

#mention-dropdown {
  bottom: 100% !important;
  z-index: 9999 !important;
  background: var(--bg) !important;

.zerk-target-dot {
    position: absolute;
    width: 6px;
    height: 6px;
    background: #fff;
    border-radius: 50%;
    transform: translate(-50%, -50%);
    pointer-events: none;
    z-index: 110;
}
 #zerk-svg-layer {
    z-index: 50;
}   
    
  
.eq-dash-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 15px;
    margin-top: 15px;
}

.eq-widget {
    background: var(--bg2);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    padding: 12px;
}

.eq-widget-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 8px;
    border-bottom: 1px solid var(--border);
    padding-bottom: 5px;
}

.eq-widget-title {
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    color: var(--text2);
}


.spec-row {
    display: flex;
    justify-content: space-between;
    padding: 6px 8px;
    border-radius: 4px;
    cursor: pointer;
    transition: background 0.2s;
    border-bottom: 1px solid rgba(0,0,0,0.05);
}

.spec-row:hover {
    background: rgba(255, 255, 255, 0.5);
}

body.dark-mode .spec-row:hover {
    background: rgba(255, 255, 255, 0.1);
}
/* --- UNIVERSAL MASTER LAYOUT --- */
body, html {
  margin: 0 !important;
  padding: 0 !important;
  height: 100% !important;
  width: 100% !important;
  overflow: hidden !important; /* Stops the "double scroll" on phones */
  position: fixed; /* Stops the iPhone bounce */
}

#app {
  display: flex !important;
  flex-direction: column !important;
  height: 100dvh !important; /* Dynamic height for mobile browsers */
  width: 100vw !important;
  margin: 0 !important;
  padding: 0 !important;
  /* Keep the original app background from the primary #app rule above. */
}

/* --- THE HEADER: FIXED TO TOP --- */


/* ============================================================
   3. SHARED COMPONENTS (Dots & Buttons)
   ============================================================ */
.pin-dot {
    width: 14px;
    height: 14px;
    border-radius: 50%;
    border: 2px solid rgba(255,255,255,0.2);
    display: inline-block;
}
.pin-dot.filled {
    background: #28a745;
    border-color: #28a745;
    box-shadow: 0 0 10px rgba(40, 167, 69, 0.5);
}
.pin-btn {
    height: 60px;
    width: 100%;
    font-size: 20px;
    font-weight: bold;
    border-radius: 12px;
    background: rgba(255,255,255,0.05);
    border: 1px solid rgba(255,255,255,0.1);
    color: white;
    cursor: pointer;
}
/* This forces the backdrop to actually fill the screen */
/* 1. Make the Card White and the Main Text Black */
/* ==========================================
   1. GLOBAL MODAL LOGIC (Visibility & Layers)
   ========================================== */
#user-perms-modal, 
#cal-action-modal {
    display: none !important;
    pointer-events: none !important; /* Clicks pass through to the app when hidden */
    position: fixed !important;
    top: 0; left: 0; width: 100vw; height: 100vh;
    opacity: 0;
    z-index: 999999 !important; /* Always stays on top of everything */
}

/* When '.active' is added via JavaScript */
#user-perms-modal.active, 
#cal-action-modal.active {
    display: flex !important;
    pointer-events: auto !important; /* Becomes solid and clickable */
    opacity: 1 !important;
    background: rgba(0,0,0,0.8) !important;
    justify-content: center;
    align-items: center;
}

/* ==========================================
   2. PERMISSIONS MODAL STYLING (The White Card)
   ========================================== */
#user-perms-modal .modal {
    background: #ffffff !important;
    color: #222222 !important;
    padding: 25px;
    border-radius: 15px;
    box-shadow: 0 15px 50px rgba(0,0,0,0.6) !important;
    width: 95%;
    max-width: 500px;
}

#user-perms-title {
    color: #000000 !important;
}

/* Labels inside the toggle list */
#user-perms-list div, 
#user-perms-list span {
    color: #333333 !important;
}

/* Standard Buttons: Make both Save and Cancel solid Black */
#user-perms-modal .btn-primary, 
#user-perms-modal .btn-secondary {
    background: #000000 !important;
    color: #ffffff !important;
    border: 1px solid #000000 !important;
    padding: 10px 20px !important;
    border-radius: 8px !important;
    font-weight: 700 !important;
    cursor: pointer !important;
    transition: opacity 0.2s;
}

#user-perms-modal .btn-primary:hover, 
#user-perms-modal .btn-secondary:hover {
    opacity: 0.8;
}

/* Reset Button: Dark Gray so it stands out from Save/Cancel */
#user-perms-modal button[onclick="resetUserPerms()"] {
    background: #555555 !important;
    color: white !important;
    border: none !important;
}

/* BACKGROUND CALENDAR BOX COLORS */
.cal-event.work-order { background: #007bff !important; color: white !important; border-radius: 4px; }
.cal-event.staff-absence { background: #ffc107 !important; color: #856404 !important; font-weight: 700; border-radius: 4px; }

/* POPUP LIST STYLING */
.cal-list-item {
    background: rgba(255,255,255,0.05);
    padding: 10px;
    border-radius: 8px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 8px;
}
.work-order-border { border-left: 4px solid #007bff; }
.absence-border { border-left: 4px solid #ffc107; }

.cal-edit-btn {
    background: #333;
    color: white;
    border: none;
    padding: 5px 10px;
    border-radius: 5px;
    font-size: 11px;
    cursor: pointer;
}
.cal-edit-btn:hover { background: #555; }
#absence-detail-modal {
    display: none;
    position: fixed !important;
    top: 0; left: 0; width: 100vw; height: 100vh;
    background: rgba(0,0,0,0.85);
    z-index: 2000001 !important; /* One layer higher than the action card */
    justify-content: center;
    align-items: center;
}

/* Ensure it shows as flex when opened */
#absence-detail-modal[style*="display: block"],
#absence-detail-modal[style*="display: flex"] {
    display: flex !important;
}


/* Ensure the Day Action card is slightly lower */
#cal-action-modal {
    z-index: 2000000 !important;
}
#calendar-entry-modal {
    z-index: 2000006 !important; 
}
#absence-modal {
    z-index: 2000005 !important;
}

/* --- SMALL HIGH-CONTRAST SCHEDULE ITEM --- */
.sched-item {
    display: flex !important; /* Forces items side-by-side */
    flex-direction: row !important;
    align-items: center !important;
    gap: 15px !important;
    background: #fff;
    padding: 10px;
    border-radius: 10px;
    margin-bottom: 8px;
    border: 1px solid #eee;
}

/* The Blue Box - Fixed Small Size */
.sched-date {
    background: #007bff !important; /* Solid Blue */
    color: #ffffff !important;      /* White Text */
    width: 45px !important;         /* Fixed small width */
    height: 45px !important;        /* Fixed small height */
    min-width: 45px !important;
    border-radius: 8px;
    display: flex !important;
    flex-direction: column !important;
    align-items: center;
    justify-content: center;
    line-height: 1;
    flex-shrink: 0; /* Prevents it from squishing */
}

.sched-day {
    font-size: 16px !important;
    font-weight: 800 !important;
}

.sched-month {
    font-size: 9px !important;
    text-transform: uppercase;
    font-weight: 700;
    margin-top: 1px;
}

/* Text on the right */
.sched-body {
    flex: 1;
}

.sched-title {
    font-size: 14px !important;
    font-weight: 700 !important;
    color: #222 !important;
}

.sched-detail {
    font-size: 12px !important;
    color: #666 !important;
}
/* Ensure the grid is perfectly balanced */
.pin-pad-grid {
    display: grid !important;
    grid-template-columns: repeat(3, 1fr) !important;
    gap: 12px !important;
    max-width: 280px;
    margin: 0 auto;
}

/* Force all buttons to be identical squares */
.pin-btn {
    aspect-ratio: 1 / 1 !important; /* Makes them perfect squares */
    width: 100% !important;
    max-height: 70px !important; /* Limits size on large screens */
    font-size: 22px !important;
    font-weight: 700 !important;
    border-radius: 12px !important;
    background: rgba(255, 255, 255, 0.05) !important;
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
    color: #fff !important;
    cursor: pointer;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 0 !important;
}

/* The Clear button needs smaller text to fit */
.btn-clear {
    font-size: 12px !important;
    color: #ff6b6b !important;
}

/* The Green Submit button */
.btn-submit {
    background: #28a745 !important;
    border-color: #28a745 !important;
}

.pin-btn:active {
    background: rgba(255, 255, 255, 0.2) !important;
}
#part-modal .modal,
.auth-card {
    overflow: visible !important;
}
.form-group {
    position: relative;
    overflow: visible !important;
}
select.form-select:focus {
    position: relative;
    z-index: 10001;
}
   
   #panel-parts.active {
    display: block !important;
    position: relative !important;
    width: 100% !important;
    min-height: 500px;
    z-index: 1; /* Keeps it on the right layer */
}
/* 1. Machinery Photo (Bottom layer) */
#zerk-map-img {
    position: relative !important;
    z-index: 1 !important;
}

/* 2. SVG Lines (Middle layer) */
#zerk-svg-layer {
    position: absolute !important;
    inset: 0 !important;
    z-index: 10 !important;
    pointer-events: none !important; /* Clicks pass through to dots */
}

/* 3. Clickable Overlay (Top layer) */
#zerk-dots-overlay {
    position: absolute !important;
    inset: 0 !important;
    z-index: 20 !important;
    pointer-events: auto !important;
}
/* Ensure the Tool Modal has a limit and scrolls internally */
#tool-modal .modal {
    max-height: 90vh !important;
    display: flex !important;
    flex-direction: column !important;
}

/* Force the content area to scroll, not the whole window */
#tool-tab-details, #tool-tab-obs {
    flex: 1 !important;
    overflow-y: auto !important;
    padding: 20px !important;
    min-height: 300px;
}

/* Ensure the notes textarea doesn't push things out */
#tool-notes-input {
    min-height: 80px !important;
    max-height: 150px !important;
}
/* Keep tool modal subcontent from appearing as stray "zombie" boxes when the modal is closed.
   While the modal is open, switchToolModalTab() controls which tab is visible. */
#tool-modal:not(.open) #tool-tab-obs,
#tool-modal:not(.open) #tool-obs-list,
#tool-modal:not(.open) #tool-notes-input {
    display: none !important;
}


/* FORCE TOOL CRIB LAYOUT */
#panel-tools.active {
    display: block !important;
    position: relative !important;
    width: 95% !important;
    max-width: 1200px;
    margin: 20px auto !important;
    z-index: 10 !important;
    background: rgba(255, 255, 255, 0.95) !important; /* Semi-white background to see text */
    padding: 20px !important;
    border-radius: 15px;
    color: #000 !important; /* Force black text on the white card */
    min-height: 400px;
}

/* Ensure the Inventory list is visible */
#tool-inventory-view {
    display: block !important;
    visibility: visible !important;
}

/* Force the table to have black text so you can read it */
#panel-tools table, 
#panel-tools td, 
#panel-tools th, 
#panel-tools b {
    color: #000000 !important;
}

/* Make sure the rows actually have height */
#tools-table-body tr {
    height: 45px !important;
    border-bottom: 1px solid #ddd !important;
}
/* Styling for each individual note in the list */
.obs-note-card {
    background: #ffffff;
    border: 1px solid #ebebeb;
    padding: 12px;
    border-radius: 10px;
    margin-bottom: 10px;
    box-shadow: 0 2px 4px rgba(0,0,0,0.02);
}

.obs-note-header {
    display: flex;
    justify-content: space-between;
    margin-bottom: 6px;
}

.obs-note-user {
    font-size: 11px;
    font-weight: 700;
    color: #333;
}

.obs-note-date {
    font-size: 10px;
    color: #999;
}

.obs-note-body {
    font-size: 13px;
    color: #555;
    line-height: 1.4;
    white-space: pre-wrap; /* Keeps line breaks from the textarea */
}
    .note-edit-btn {
    background: none !important;
    border: none !important;
    color: #007bff !important;
    cursor: pointer;
    font-size: 14px;
    padding: 0 5px;
}
.note-edit-btn:hover { color: #0056b3 !important; }

#reorder-alerts {
    display: none !important;
}



/* 1. THE OUTER BAR */
#panel-parts #parts-subtab-bar {
    background: rgba(0, 0, 0, 0.45) !important;
    padding: 4px !important;
    border-radius: 12px !important;
    display: inline-flex !important;
    gap: 4px !important;
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
    backdrop-filter: blur(8px) !important;
    margin-bottom: 20px !important;
    height: auto !important;
    width: auto !important;
    float: none !important;
}

#panel-parts #parts-subtab-bar button.tab {
    background: transparent !important;
    background-color: transparent !important;
     color: rgba(255, 255, 255, 0.7) !important;
    border: none !important;
    outline: none !important;
    box-shadow: none !important;    
    padding: 8px 22px !important;
    border-radius: 8px !important;
    font-size: 13px !important;
    font-weight: 600 !important;
   min-height: 0 !important;
    margin: 0 !important; 
   cursor: pointer !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    transition: all 0.2s ease !important;

}
    #panel-parts #parts-subtab-bar button.tab:hover:not(.active) {
   background: rgba(255, 255, 255, 0.15) !important;
    color: #ffffff !important;
}

   #panel-parts #parts-subtab-bar button.tab.active {
    background: #ffffff !important;
    background-color: #ffffff !important;
    color: #1a1a1a !important;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3) !important;
}

    font-weight: 800 !important;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3) !important;
      border: none !important;
}
#review-modal.active {
    display: flex !important;
    position: fixed !important;
    top: 0; left: 0; width: 100vw; height: 100vh;
    background: rgba(0,0,0,0.85) !important;
    z-index: 2000010 !important; /* Put it on top of everything */
    justify-content: center;
    align-items: center;
}

#review-modal .modal {
    background: white !important;
    color: black !important;
    padding: 25px;
    border-radius: 15px;
    box-shadow: 0 10px 40px rgba(0,0,0,0.5);
    min-width: 320px;
}
#wishlist-modal #btn-delete-wish {
    display: inline-block !important;
    visibility: visible !important;
    opacity: 1 !important;
    
    /* Force size and color so it's not transparent or tiny */
    min-width: 120px !important;
    min-height: 40px !important;
    background-color: #dc3545 !important; /* Solid Red */
    color: #ffffff !important;           /* Solid White Text */
    
    /* Ensure it sits on top of the white card */
    position: relative !important;
    z-index: 1000005 !important;
    
    /* Layout logic */
    margin: 0 !important;
    padding: 10px 15px !important;
    border-radius: 8px !important;
    border: none !important;
    cursor: pointer !important;
}

/* Ensure the footer container isn't squishing the button */
#wishlist-modal .modal div:last-child {
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
    width: 100% !important;
}
.doc-item {
    transition: background 0.2s;
}
.doc-item:hover {
    background: var(--hover-bg, var(--bg2)) !important;
}
.btn-sm {
    padding: 4px 10px;
    font-size: 12px;
}
#doc-modal {
  z-index: 100000 !important;
}

body {
    background-color: #001f3f; /* Your Navy Blue */
    background-attachment: fixed;
    /* Optional: This subtle gradient makes the screen look less "flat" */
    background: radial-gradient(circle at top, #003366 0%, #001f3f 100%);
    color: #ffffff;
}

/* This prevents that "white flash" when scrolling past the top on iPhone */
html {
    background-color: #001f3f;
}
/* Make the container a grid of 2 columns */
#user-name-list {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 15px !important;
    padding: 10px !important;
}


/* ============================================================
   1. MOBILE LAYOUT (Apply ONLY to screens 768px and SMALLER)
   ============================================================ */
@media screen and (max-width: 768px) {
  html, body { background-color: #001f3f !important; }

  /* Hide PC-only elements */
  #pc-search-wrap, .pc-only-search { 
    display: none !important; 
  }   

  .topbar {
    display: flex !important;
    flex-direction: column !important; /* Mobile stacks vertically */
    position: fixed !important;
    height: auto !important;
    padding: 10px 0 !important;
    top: 0; left: 0; right: 0;
    background: #000 !important;
    z-index: 10000;
  }

  .logo { width: 100% !important; text-align: center !important; padding: 5px 0 !important; }

  /* Mobile swiping for Nav and Actions */
  #main-nav, .topbar-right {
    display: flex !important;
    flex-wrap: nowrap !important;
    overflow-x: auto !important;
    padding: 6px 12px !important;
    width: 100% !important;
  }

  .panel { margin-top: 135px !important; padding: 10px !important; }
  .metrics, .grid-2 { display: flex !important; flex-direction: column !important; gap: 10px !important; }
  .metric-card, .card { width: 100% !important; }
}

/* Base Panel Rules (Applies to both) */
.panel { display: none; }
.panel.active { display: block !important; }

/* ============================================================
   2. PC LAYOUT (Apply ONLY to screens 769px and LARGER)
   ============================================================ */
@media screen and (min-width: 769px) {
  /* 1. MASTER TOPBAR: Force a single horizontal line */
  .topbar {
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    justify-content: space-between !important;
    height: 60px !important;
    position: fixed !important;
    top: 0; left: 0; right: 0;
    background: #000 !important;
    z-index: 10000 !important;
    padding: 0 20px !important;
  }


  /* 2. SHRINK THE BOXES: Stop every container from being 100% wide */
  .logo, 
  #pc-search-wrap, 
  #main-nav, 
  .topbar-right {
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    width: auto !important;              /* THE FIX: Stop stretching to 100% */
    flex-shrink: 0 !important;           /* Stop them from vanishing */
    margin: 0 !important;
    padding: 0 !important;
  }

  /* 3. SET INDIVIDUAL SPACING */
  .logo { 
    margin-right: 20px !important; 
    font-weight: bold;
    white-space: nowrap !important;
  }

  #pc-search-wrap { 
    width: 180px !important;             /* Locked search width */
    margin-right: 20px !important; 
  }

  #global-search {
    width: 100% !important;
    height: 28px !important;
    background: rgba(255,255,255,0.1) !important;
    border: 1px solid rgba(255,255,255,0.2) !important;
    border-radius: 4px;
    color: #fff;
    padding: 0 8px !important;
  }

  /* 4. NAVIGATION (Middle Section) */
  #main-nav { 
    gap: 5px !important;
    flex-shrink: 1 !important;           /* Allow nav to shrink if screen is tiny */
  }

  .nav-btn {
    white-space: nowrap !important;
    font-size: 12px !important;
    padding: 4px 10px !important;
  }

  /* 5. TOPBAR RIGHT (PDF, Profile, etc.) */
  .topbar-right { 
    margin-left: auto !important;        /* THE MAGIC: Pushes this box to the far right */
    gap: 8px !important;
  }

  /* 6. FIX PANEL POSITION (Pushes content below the 60px bar) */
   .panel {
    display: none;
    margin-top: 80px !important; /* Push below fixed bar */
    padding: 0 20px !important;
    width: 100%;
    max-width: 1600px;
    margin-left: auto !important;
    margin-right: auto !important;
  }
  
  /* Standard Panels stay as Blocks */
  .panel.active { display: block !important; }

 //* 3. --- THE CALENDAR POWER FIX --- */
  /* This forces the calendar panel to fill the monitor height from the topbar down */
  body #panel-calendar.active {
    display: flex !important; 
    flex-direction: column !important;
    /* Calculated as: Full Height - Topbar Height - Top Buttons Height */
    height: calc(100vh - 80px) !important; 
    overflow: hidden !important;
    padding-bottom: 10px !important; /* Tiny gap at the very bottom of the monitor */
  }

  /* Force the white card to stretch and fill the space */
  #panel-calendar.active .card {
    display: flex !important;
    flex-direction: column !important;
    flex: 1 !important;             
    height: 100% !important;
    min-height: calc(100vh - 160px) !important; /* FORCES the card to the bottom */
    background: #f8f9fa !important;
    border-radius: 12px;
    padding: 15px !important;
    margin: 0 auto !important;
    width: 98% !important;
  }

  /* Ensure the grid area takes up every pixel of the now-stretched card */
  #cal-days {
    display: grid !important;
    grid-template-columns: repeat(7, 1fr) !important;
    /* Divide the rows: 1fr makes each week perfectly tall to fill the card */
    grid-template-rows: repeat(auto-fit, minmax(0, 1fr)) !important;
    flex: 1 !important; 
    height: 100% !important;
    border: 1px solid #ddd;
    background: white;
  }

  /* Make individual date boxes fill the tall grid cells */
  .cal-day {
    height: 100% !important;
    display: flex !important;
    flex-direction: column !important;
    border: 1px solid #f0f0f0 !important;
    padding: 8px !important;
    color: #333 !important;
  }

  /* Prevent headers from shrinking */
  #cal-header, .cal-day-labels {
    flex-shrink: 0 !important;
    margin-bottom: 5px !important;
  }

  /* 4. Restore Dashboard Grid (2 Columns) */
  .metrics, .grid-2 { display: flex !important; flex-direction: row !important; gap: 20px !important; }
  .metric-card, .card { flex: 1 !important; background: #f8f9fa; color: #333; }
}
/* -------end of pc block ----------*/
.modern-login-card {
    background-color: rgba(255, 255, 255, 0.1) !important;
    border: 1px solid rgba(255, 255, 255, 0.2) !important;
    border-radius: 16px !important;
    padding: 20px !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    cursor: pointer !important;
    transition: transform 0.2s ease !important;
    width: 100% !important;
    box-sizing: border-box !important;
}

.modern-login-card:hover {
    background-color: rgba(255, 255, 255, 0.2) !important;
    border-color: #3b82f6 !important;
    transform: translateY(-3px) !important;
}

/* The Blue Circle */
.modern-avatar-circle {
    width: 50px !important;
    height: 50px !important;
    min-width: 50px !important;
    min-height: 50px !important;
    background-color: #3b82f6 !important;
    color: #ffffff !important;
    border-radius: 50% !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    font-weight: bold !important;
    font-size: 20px !important;
    margin-bottom: 12px !important;
    box-shadow: 0 4px 10px rgba(0,0,0,0.4) !important;
}

/* The White Name */
.modern-user-text {
    color: #ffffff !important;
    font-size: 14px !important;
    font-weight: 600 !important;
    margin: 0 !important;
    text-align: center !important;
}
.chat-status-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    display: inline-block;
    margin-right: 6px;
    vertical-align: middle;
}

/* Colors based on status */
.dot-available { background-color: #28a745; box-shadow: 0 0 5px #28a745; }
.dot-busy      { background-color: #dc3545; }
.dot-field     { background-color: #f59e0b; }
.dot-lunch     { background-color: #007bff; }
.dot-shop      { background-color: #6c757d; }
  
.dt-section { padding: 15px 0; display: none; }
.dt-section.active { display: block; }
.comment-box { background: var(--bg2); padding: 10px; border-radius: 8px; margin-bottom: 8px; border: 1px solid var(--border); }
.interactive-row { display: flex; justify-content: space-between; align-items: center; padding: 8px; border-bottom: 1px solid var(--border); }
.btn-delete-small { background: none; border: none; color: var(--danger); cursor: pointer; font-size: 14px; opacity: 0.6; }
.btn-delete-small:hover { opacity: 1; }

/* 1. Hide the Work Order modal sections by default */
#task-modal,
#wo-details, 
#wo-checklist, 
#wo-parts-tab, 
#wo-comments {
    display: none;
}

/* 2. Only show them when the modal itself is active */
#task-modal.active,
#task-modal.open {
    display: flex !important;
}

/* 3. Ensure the internal tabs show up when the modal is open */
#task-modal.active #wo-details,
#task-modal.active #wo-checklist,
#task-modal.active #wo-parts-tab,
#task-modal.active #wo-comments {
    /* We don't use 'block' here because our JS switcher handles the specific tab visibility */
}
/* 1. Force the Task PIN modal to the front row (higher than other modals) */
#task-pin-modal {
    z-index: 30000 !important;
}

/* 2. Style the PIN Modal specifically for high contrast on white */
#task-pin-modal .modal {
    background: #ffffff !important;
    color: #000000 !important;
    box-shadow: 0 10px 40px rgba(0,0,0,0.5) !important;
}

/* 3. Force all text inside this modal to be black */
#task-pin-modal #task-pin-title,
#task-pin-modal #task-pin-user-name,
#task-pin-modal #task-pin-instruction,
#task-pin-modal .modal-header .modal-title {
    color: #000000 !important;
}

/* 4. Style the buttons specifically for this modal */
#task-pin-modal .pin-btn {
    background: #f0f0f0 !important;
    color: #000000 !important;
    border: 1px solid #ddd !important;
    box-shadow: none !important;
}

#task-pin-modal .pin-btn:hover {
    background: #e0e0e0 !important;
}

/* Special color for the checkmark button in the sign-off */
#task-pin-modal .pin-btn[onclick*="verifyTaskPinAction"] {
    background: var(--accent) !important;
    color: white !important;
    border: none !important;
}