/* =====================================================
   🌊 LUMINOUS TEAL DESIGN SYSTEM — LEVEL 3
   Stable • Balanced • Enterprise Grade
===================================================== */

html, body {
  margin: 0;
  min-height: 100vh;
  background:
    radial-gradient(circle at 15% 10%, rgba(20,184,166,0.12), transparent 45%),
    radial-gradient(circle at 85% 0%, rgba(6,95,70,0.10), transparent 50%),
    linear-gradient(180deg, #e8fdf7 0%, #dcf9f1 45%, #d0f4ea 100%);
  background-attachment: fixed;
}

:root {
  --ems-deep-1: #022c22;
  --ems-deep-2: #064e3b;
  --ems-deep-3: #065f46;

  --ems-teal-400: #2dd4bf;
  --ems-teal-500: #14b8a6;
  --ems-teal-600: #0d9488;

  --ems-glow-soft: rgba(20,184,166,0.25);
  --ems-glow-strong: rgba(20,184,166,0.45);

  --ems-border-soft: rgba(255,255,255,0.10);
  --ems-shadow-elevated: 0 18px 45px rgba(0,0,0,0.35);
}

/* =====================================================
   🌊 GLOBAL HEADER: CAPACITOR PERFORMANCE TUNE
   Ultra-Lean, Hardware-Accelerated Native Bar
===================================================== */

/* Force GPU acceleration for the fixed header */
#globalHeader {
    will-change: transform;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

/* Ensure body starts below the new 60px compact header */
body {
    background-color: #f8fafc;
    padding-top: calc(60px + env(safe-area-inset-top)) !important;
}

/* Crisp Text Rendering */
#bizName {
    -webkit-font-smoothing: antialiased;
    text-shadow: 0 1px 2px rgba(0,0,0,0.2);
}

/* =====================================================
   🟢 LOGO ICON SYSTEM (Minimalist)
===================================================== */
#bizLogoContainer {
    background: linear-gradient(135deg, #0f766e, #14b8a6);
}

/* Strip out expensive hover states on mobile */
@media (max-width: 768px) {
    #bizLogoContainer:hover {
        transform: none;
        box-shadow: inset 0 2px 4px rgba(0,0,0,0.1);
    }
}

/* =====================================================
   📱 MOBILE HEADER DENSITY OVERRIDES
===================================================== */
@media (max-width: 640px) {
    /* Compress the global header slightly more on very small phones */
    #globalHeader > div.relative {
        height: 56px;
        padding-left: 12px;
        padding-right: 12px;
    }
    
    body {
        padding-top: calc(56px + env(safe-area-inset-top)) !important;
    }

    #bizLogoContainer {
        width: 32px;
        height: 32px;
        border-radius: 8px;
    }

    #bizName {
        font-size: 13px;
        max-width: 130px;
    }
}


/* =====================================================
   GLOBAL MICRO-INTERACTIONS
===================================================== */

* {
  transition:
    background-color 0.2s ease,
    color 0.2s ease,
    border-color 0.2s ease,
    box-shadow 0.25s ease,
    transform 0.15s ease;
}

button:active {
  transform: scale(0.95);
}


/* ==========================================================
   🟢 TEAL-ELITE ASIDE SYSTEM (Non-Destructive Layer)
   Premium Apple-Glass + Teal Executive Finish
   ========================================================== */

/* ==========================================================
   1. ASIDE CONTAINER – Light Glass + Depth
   ========================================================== */

aside {
  background: linear-gradient(
      180deg,
      rgba(255,255,255,0.88) 0%,
      rgba(240,253,250,0.92) 100%
  ) !important;

  backdrop-filter: blur(16px) saturate(140%);
  border-right: 1px solid rgba(13,148,136,0.12) !important;

  box-shadow:
      4px 0 24px rgba(13,148,136,0.06),
      inset -1px 0 0 rgba(255,255,255,0.4);

  transition: all 0.25s ease;
}

/* Slight top accent line */
aside::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 1px;
  background: linear-gradient(90deg,
      rgba(13,148,136,0.15),
      rgba(20,184,166,0.25),
      rgba(13,148,136,0.15));
}

/* ==========================================================
   2. SECTION LABEL (Modules)
   ========================================================== */

aside p {
  letter-spacing: 1px;
  font-size: 9px;
  color: rgba(13,148,136,0.65) !important;
}

/* ==========================================================
   3. NAV BUTTON BASE STYLE – Compact Executive
   ========================================================== */

aside .ems-nav-btn {
  position: relative;
  font-size: 13px;
  padding-top: 10px !important;
  padding-bottom: 10px !important;
  border-radius: 14px !important;

  transition: all 0.22s ease;
}

/* Icon refinement */
aside .ems-nav-btn i {
  font-size: 18px;
  opacity: 0.85;
  transition: all 0.2s ease;
}

/* ==========================================================
   4. HOVER STATE – Subtle Teal Lift
   ========================================================== */

aside .ems-nav-btn:hover {
  background: linear-gradient(
      90deg,
      rgba(20,184,166,0.08),
      rgba(20,184,166,0.04)
  ) !important;

  color: #0f766e !important;

  transform: translateX(3px);
  box-shadow: 0 4px 14px rgba(13,148,136,0.08);
}

aside .ems-nav-btn:hover i {
  transform: scale(1.08);
  color: #14b8a6;
}

/* ==========================================================
   5. ACTIVE STATE – Premium Teal Indicator
   ========================================================== */

aside .ems-nav-btn.active {
  background: linear-gradient(
      90deg,
      rgba(20,184,166,0.18),
      rgba(13,148,136,0.12)
  ) !important;

  color: #0d9488 !important;
  font-weight: 700;
  box-shadow: 0 6px 18px rgba(13,148,136,0.12);
}

/* Left Accent Bar (Apple-style precision) */
aside .ems-nav-btn.active::before {
  content: "";
  position: absolute;
  left: -8px;
  top: 20%;
  height: 60%;
  width: 4px;
  border-radius: 4px;
  background: linear-gradient(
      180deg,
      #14b8a6,
      #0d9488
  );
  box-shadow: 0 0 12px rgba(20,184,166,0.4);
}

/* ==========================================================
   6. SETTINGS SECTION – Elevated Footer Panel
   ========================================================== */

aside .mt-auto {
  backdrop-filter: blur(10px);
  background: rgba(255,255,255,0.6);
  border-top: 1px solid rgba(13,148,136,0.08) !important;
}

/* Settings Button Refinement */
aside .mt-auto button {
  border-radius: 14px !important;
  font-size: 12px;
  padding-top: 10px !important;
  padding-bottom: 10px !important;
  transition: all 0.25s ease;
}

aside .mt-auto button:hover {
  background: linear-gradient(
      90deg,
      rgba(13,148,136,0.9),
      rgba(20,184,166,0.9)
  ) !important;

  color: white !important;
  box-shadow: 0 8px 22px rgba(13,148,136,0.25);
}

/* ==========================================================
   7. COMPACT DENSITY TUNING
   ========================================================== */

aside .p-4 {
  padding: 14px !important;
}

aside .space-y-2 > * + * {
  margin-top: 6px !important;
}

/* ==========================================================
   8. SCROLLBAR – Teal Minimal
   ========================================================== */

aside::-webkit-scrollbar {
  width: 6px;
}

aside::-webkit-scrollbar-thumb {
  background: linear-gradient(180deg, #14b8a6, #0d9488);
  border-radius: 6px;
}

aside::-webkit-scrollbar-track {
  background: transparent;
}

/* ==========================================================
   9. MOBILE TRANSITION PREP (Future Drawer)
   ========================================================== */

@media (max-width: 768px) {
  aside {
    backdrop-filter: blur(20px);
    box-shadow: 0 10px 40px rgba(13,148,136,0.15);
  }

  aside .ems-nav-btn {
    font-size: 12px;
    padding: 9px 12px !important;
  }
}








/* ==========================================================
   🟢 EMERALD SPECTRUM DESIGN SYSTEM (Additive Layer)
   ========================================================== */

:root {
  --ems-emerald-deep: #064e3b;
  --ems-emerald-base: #065f46;
  --ems-emerald-glow: #059669;
  --ems-mint-soft: #d1fae5;
  --ems-glass-bg: rgba(255,255,255,0.65);
  --ems-ultra-border: rgba(6,95,70,0.08);
  --ems-shadow-soft: 0 6px 24px rgba(6,95,70,0.08);
  --ems-shadow-elevated: 0 12px 40px rgba(6,95,70,0.12);
  --ems-shadow-glow: 0 0 25px rgba(5,150,105,0.25);
}

/* ==========================================================
   📱 MOBILE-FIRST PERFORMANCE OVERRIDES (DASHBOARD)
   ========================================================== */

/* Stop heavy gradients on mobile to save GPU battery */
#view-dashboard {
  background: #f8fafc; /* Clean, native grey */
}

/* Fast hardware-accelerated cards */
#view-dashboard .bg-white {
  background-color: #ffffff;
  will-change: transform;
}

/* ⚡ Destroy all heavy blurs inside the body on mobile devices. 
   Only the sticky header gets a blur. */
#view-dashboard .backdrop-blur-md,
#view-dashboard .rounded-xl {
  backdrop-filter: none !important; 
}

/* ⚡ Optimize Shadows (Smaller spread, lower opacity for native crispness) */
#view-dashboard .shadow-sm {
  box-shadow: 0 1px 3px rgba(15, 23, 42, 0.05) !important;
}

/* Override massive KPI text */
#dashLiveCount, 
#dashTotalStaff, 
#dashActiveSites {
  font-size: 1.5rem !important; /* Down from 2.4rem */
  text-shadow: none !important; /* Text shadow is expensive to render */
  letter-spacing: -0.5px;
}

#dashPaymentToday {
  font-size: 1.25rem !important;
}

/* Tighten the Line Chart Container to strictly 120px height */
#view-dashboard canvas#chartSpending {
  width: 100% !important;
  height: 100% !important;
  max-height: 120px !important;
}

/* Native App List Striping (Overrides hover states which trigger lag on scroll) */
#dashSiteList > div {
  padding: 10px 12px !important;
  transition: background-color 0.1s;
}

#dashSiteList > div:active {
  background-color: #f1f5f9 !important; /* iOS style active state */
}

/* Micro-Scrollbar for Activity Feed */
#dashActivityFeed::-webkit-scrollbar {
  width: 4px;
}
#dashActivityFeed::-webkit-scrollbar-thumb {
  background: #cbd5e1;
  border-radius: 4px;
}

/* Enforce Touch Constraints */
#view-dashboard {
  -webkit-overflow-scrolling: touch;
  overscroll-behavior-y: contain; /* Prevents pull-to-refresh rubberbanding inside the app */
}


/* =========================================================
   🏛 TEAL-GRANULAR HCM LAYER (Non-Destructive)
   Sovereign Enterprise Skin
========================================================= */

:root{
  --hcm-teal-50: #ecfdf8;
  --hcm-teal-100: #d1faef;
  --hcm-teal-400: #2dd4bf;
  --hcm-teal-500: #14b8a6;
  --hcm-teal-600: #0d9488;
  --hcm-teal-deep: #065f46;

  --hcm-border-soft: rgba(13,148,136,0.12);
  --hcm-border-thin: rgba(13,148,136,0.08);

  --hcm-shadow-soft: 0 8px 30px rgba(13,148,136,0.06);
  --hcm-shadow-glow: 0 12px 40px rgba(13,148,136,0.12);

  --hcm-glass: rgba(255,255,255,0.72);
}

/* =========================================================
   🧊 KPI CARDS — Executive Glass Elevation
========================================================= */

/* ==========================================================
   📱 NATIVE MOBILE CSS — EMPLOYEES DIRECTORY
   ========================================================== */

/* Hardware Accelerated Sticky Header */
#view-employees .sticky {
    will-change: transform;
    -webkit-backdrop-filter: blur(16px);
    backdrop-filter: blur(16px);
}

/* Hide horizontal scrollbar for filter track */
#view-employees .no-scrollbar::-webkit-scrollbar {
    display: none;
}
#view-employees .no-scrollbar {
    -ms-overflow-style: none;
    scrollbar-width: none;
}

/* Filter Button Active State Injection */
#view-employees .emp-filter-btn.active {
    background-color: #ffffff !important;
    color: #0f766e !important; /* Teal-700 */
    box-shadow: 0 1px 3px rgba(0,0,0,0.1) !important;
    border: 1px solid rgba(15, 118, 110, 0.2) !important;
}

/* ⚡ Rendered JS Employee Cards - Mobile Density */
#emp-main-view > div {
    padding: 12px 14px !important;
    border-radius: 14px !important;
    border: 1px solid rgba(15, 23, 42, 0.08) !important;
    background: #ffffff;
    box-shadow: 0 2px 6px rgba(15, 23, 42, 0.03);
    will-change: transform;
    transition: transform 0.1s ease, box-shadow 0.1s ease;
}

#emp-main-view > div:active {
    background-color: #f8fafc !important;
    transform: scale(0.98);
}

/* Tighter spacing for inner elements generated by JS */
#emp-main-view h3 {
    font-size: 14px !important;
    letter-spacing: -0.2px;
    margin-bottom: 2px !important;
}
#emp-main-view .text-2xl {
    font-size: 18px !important;
}
#emp-main-view button {
    height: 32px !important;
    font-size: 10px !important;
}


/* ==========================================================
   📱 MOBILE COMPACT STATS CARDS
   ========================================================== */

/* Smooth mobile rendering */
.stats-card {
    will-change: transform;
    transition: transform 0.1s ease, box-shadow 0.1s ease;
}

/* Touch feedback */
.stats-card:active {
    transform: scale(0.97);
}

/* Reduce vertical spacing */
.stats-card span:first-child {
    letter-spacing: 0.6px;
}

/* Gradient card slimmer */
.slim-stat-card {
    min-height: 52px;
}

/* Icon circles smaller */
.stat-icon {
    width: 28px;
    height: 28px;
}

/* Text tightening */
.stat-value {
    font-size: 18px;
    line-height: 1;
}

/* Improve readability */
.stat-meta {
    letter-spacing: 0.4px;
}

.stat-divider{
height:28px;
width:1px;
background:#e2e8f0;
margin:0 6px;
}

/* ==========================================================
   📱 NATIVE MOBILE CSS — ADD EMPLOYEE MODAL
   ========================================================== */

#employeeModal {
    /* Required to override Tailwind hidden class safely for absolute centering */
    display: flex; 
}
#employeeModal.hidden {
    display: none !important;
}

/* Hardware Accelerated Backdrop */
#empModalBackdrop {
    -webkit-backdrop-filter: blur(12px);
    backdrop-filter: blur(12px);
    will-change: opacity;
}

/* Stop background scrolling from touching the body */
#employeeModal .overscroll-contain {
    overscroll-behavior: contain;
}

/* ⚡ Strip default browser styling from inputs so they sit flush in the container */
#employeeModal input, 
#employeeModal select, 
#employeeModal textarea {
    -webkit-appearance: none;
    appearance: none;
    border-radius: 0;
    box-shadow: none !important; /* Removes focus rings overriding our custom borders */
}

/* Hide native date picker icons for a cleaner look */
#employeeModal input[type="date"]::-webkit-calendar-picker-indicator {
    background: transparent;
    bottom: 0;
    color: transparent;
    cursor: pointer;
    height: auto;
    left: 0;
    position: absolute;
    right: 0;
    top: 0;
    width: auto;
}

/* Primary Action Button Rendering */
#btnSaveEmp {
    transition: transform 0.15s ease;
    will-change: transform;
}

/* Override the active toggle button class to match the native UI */
#employeeModal button[class*="bg-teal-100"] {
    background-color: #ccfbf1 !important;
    color: #0f766e !important;
}

/* ==========================================================
   📱 NATIVE MOBILE CSS — ATTENDANCE (3-LINE HEADER)
   ========================================================== */

/* The ultra-clean sticky header styling */
#view-attendance .sticky {
    will-change: transform;
    -webkit-backdrop-filter: blur(16px);
    backdrop-filter: blur(16px);
    background-color: rgba(255, 255, 255, 0.92) !important;
}

/* Hide the horizontal scrollbar in the control row */
.no-scrollbar::-webkit-scrollbar {
    display: none;
}
.no-scrollbar {
    -ms-overflow-style: none;
    scrollbar-width: none;
}

/* Date picker arrow cleanup for iOS/Android */
input[type="date"]::-webkit-calendar-picker-indicator,
input[type="month"]::-webkit-calendar-picker-indicator {
    background: transparent;
    bottom: 0;
    color: transparent;
    cursor: pointer;
    height: auto;
    left: 0;
    position: absolute;
    right: 0;
    top: 0;
    width: auto;
}

input[type="date"]::-webkit-calendar-picker-indicator{
    opacity:0;
    position:absolute;
    width:100%;
    height:100%;
    cursor:pointer;
}

/* Employee Cards inside Attendance */
#attendanceList > div {
    padding: 12px 14px !important;
    border-radius: 14px !important;
    border: 1px solid rgba(15, 23, 42, 0.08) !important;
    background: #ffffff;
    box-shadow: 0 2px 6px rgba(15, 23, 42, 0.03);
    margin-bottom: 10px !important;
    transition: transform 0.1s ease, box-shadow 0.1s ease;
}

#attendanceList > div:active {
    background-color: #f8fafc !important;
    transform: scale(0.98);
}

/* ==========================================================
   📱 NATIVE MOBILE CSS — ATTENDANCE LOG MODAL (WEB SAFE)
   ========================================================== */

#attendanceLogModal {
    /* Required to override Tailwind hidden class safely for absolute centering */
    display: flex; 
}
#attendanceLogModal.hidden {
    display: none !important;
}

/* Stop background scrolling from touching the body */
#attendanceLogModal .overscroll-contain {
    overscroll-behavior: contain;
}

/* Web Safe: Graceful scrollbar for desktop users inside the modal */
#attendanceLogModal .custom-scrollbar::-webkit-scrollbar {
    width: 4px;
}
#attendanceLogModal .custom-scrollbar::-webkit-scrollbar-thumb {
    background-color: rgba(148, 163, 184, 0.4); 
    border-radius: 4px;
}

/* Smooth Hardware Transitions */
#logModalPanel {
    will-change: transform;
}

/* ===============================
   TITLE SECTION REFINED
================================ */

#attHeaderSub {
  letter-spacing: 0.12em;
  color: rgba(13,148,136,0.7);
}

#attTotalCost {
  background: linear-gradient(90deg,#065f46,#14b8a6);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

/* Live Badge Minimal */
#view-attendance .bg-emerald-50 {
  background: rgba(13,148,136,0.08) !important;
  border: 1px solid rgba(13,148,136,0.15) !important;
  color: var(--vp-teal);
}

/* ===============================
   SEGMENTED MODE SWITCH
================================ */

#view-attendance .bg-slate-200\/50 {
  background: rgba(13,148,136,0.08) !important;
  border: 1px solid rgba(13,148,136,0.15);
  padding: 3px;
  border-radius: 12px;
}

#btnModeDaily,
#btnModeMonthly {
  min-width: 70px;
  padding: 6px 12px;
  border-radius: 10px;
  font-weight: 700;
  letter-spacing: 0.4px;
}

#btnModeDaily.bg-white,
#btnModeMonthly.bg-white {
  background: linear-gradient(135deg,#0d9488,#14b8a6) !important;
  color: white !important;
  box-shadow: 0 6px 16px rgba(13,148,136,0.25);
}

#btnModeMonthly:not(.bg-white),
#btnModeDaily:not(.bg-white) {
  color: rgba(6,95,70,0.7);
}

/* ===============================
   CONTROL BAR CLEANUP
================================ */

#view-attendance input,
#view-attendance select {
  border: 1px solid rgba(13,148,136,0.15) !important;
  background: rgba(255,255,255,0.9);
  border-radius: 10px !important;
  font-weight: 600;
}

#view-attendance input:focus,
#view-attendance select:focus {
  border-color: #14b8a6 !important;
  box-shadow: 0 0 0 3px rgba(20,184,166,0.15);
}

/* Date Controller Box */
#ctrlDaily > div:first-child {
  border-radius: 12px !important;
  border: 1px solid rgba(13,148,136,0.15) !important;
  background: rgba(255,255,255,0.95);
}

/* Search Field Clean */
#attSearch {
  height: 38px !important;
}

/* ===============================
   ACTION ZONE REFINED
================================ */

#view-attendance .border-l {
  border-left: 1px solid rgba(13,148,136,0.15) !important;
  padding-left: 14px;
}

/* Save Button Elevated */
#view-attendance .bg-slate-900 {
  background: linear-gradient(135deg,#065f46,#0d9488) !important;
  border: 1px solid rgba(13,148,136,0.35);
  box-shadow: 0 10px 25px rgba(13,148,136,0.25);
}

#view-attendance .bg-slate-900:hover {
  transform: translateY(-2px);
  box-shadow: 0 15px 30px rgba(13,148,136,0.35);
}

/* Report Button Cleaner */
#view-attendance button[title="Reports"] {
  border: 1px solid rgba(13,148,136,0.15) !important;
  background: rgba(255,255,255,0.9);
}

#view-attendance button[title="Reports"]:hover {
  border-color: #14b8a6 !important;
  box-shadow: 0 6px 16px rgba(13,148,136,0.2);
}







@media print {

  body * {
      visibility: hidden;
  }

  #payPrintArea,
  #payPrintArea * {
      visibility: visible;
  }

  #payPrintArea {
      position: absolute;
      left: 0;
      top: 0;
      width: 100%;
  }

  #payLedgerTable {
      page-break-inside: avoid;
  }

  table {
      border: 1px solid #000;
  }

  th, td {
      border: 1px solid #000;
  }

  * {
      -webkit-print-color-adjust: exact;
  }
}

/* ==========================================================
   ULTRA COMPACT LEDGER SYSTEM
   Surgical Density Mode
========================================================== */

/* CONTAINER */
#payCalendarGrid {
    width: 100%;
    max-width: 100%;
    overflow: hidden;
}

/* =========================
   MOBILE CARD MODE (TIGHT)
========================= */

.ledger-mobile {
    display: block;
    width: 100%;
}

.ledger-card {
    border: 0.5px solid rgba(0,0,0,0.06);
    border-radius: 10px;
    padding: 6px 8px;
    background: #fff;
    margin-bottom: 6px;
}

.ledger-row-top {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 4px;
}

.ledger-date {
    font-size: 11px;
    font-weight: 600;
    color: #0f172a;
}

.ledger-site {
    font-size: 9px;
    color: #64748b;
    margin-top: 1px;
}

.ledger-status {
    font-size: 10px;
    font-weight: 700;
    color: #0d9488;
}

.ledger-row-bottom {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 4px;
}

.ledger-label {
    font-size: 8px;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: #94a3b8;
}

.ledger-value {
    font-size: 11px;
    font-weight: 600;
    font-family: "JetBrains Mono", monospace;
    font-variant-numeric: tabular-nums;
    color: #0f172a;
}

.ledger-value.deduction {
    color: #b91c1c;
}

.ledger-value.strong {
    font-weight: 700;
}

/* =========================
   DESKTOP TABLE MODE (DENSE)
========================= */

.ledger-desktop {
    display: none;
    width: 100%;
}

.ledger-table {
    width: 100%;
    table-layout: fixed;
    border-collapse: collapse;
    font-size: 11px;
    background: #fff;
}

.ledger-table thead {
    background: #0f766e;
    color: white;
}

.ledger-table th {
    padding: 4px 5px;
    font-size: 9px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    border: 0.5px solid rgba(255,255,255,0.15);
}

.ledger-table td {
    padding: 3px 5px;      /* 🔥 micro padding */
    border-bottom: 0.5px solid rgba(0,0,0,0.07);
    vertical-align: middle;
    font-variant-numeric: tabular-nums;
}

.ledger-table tbody tr:nth-child(even) {
    background: rgba(20,184,166,0.035);
}

.ledger-table td.money {
    text-align: right;
    font-family: "JetBrains Mono", monospace;
}

.ledger-table td.deduction {
    color: #b91c1c;
}

.ledger-table td.strong {
    font-weight: 700;
}

/* =========================
   RESPONSIVE SWITCH
========================= */

@media (min-width: 768px) {

    .ledger-mobile {
        display: none;
    }

    .ledger-desktop {
        display: block;
    }
}

/* =========================
   PRINT MODE (A4 DENSE)
========================= */

@media print {

    .ledger-mobile {
        display: none !important;
    }

    .ledger-desktop {
        display: block !important;
    }

    .ledger-table {
        font-size: 9.5px;
        table-layout: fixed;
    }

    .ledger-table th,
    .ledger-table td {
        border: 0.5px solid #000 !important;
        padding: 2px 4px;
    }

    .ledger-table thead {
        background: #111 !important;
        -webkit-print-color-adjust: exact;
        print-color-adjust: exact;
    }
}


  

/* ==========================================================
   📱 NATIVE MOBILE CSS — SITES / PROJECTS
   ========================================================== */

/* Hardware Accelerated Sticky Header */
#view-sites .sticky {
    will-change: transform;
    -webkit-backdrop-filter: blur(16px);
    backdrop-filter: blur(16px);
}

/* Hide horizontal scrollbar for filter track */
#view-sites .no-scrollbar::-webkit-scrollbar {
    display: none;
}
#view-sites .no-scrollbar {
    -ms-overflow-style: none;
    scrollbar-width: none;
}

/* ⚡ JS-Rendered Site Cards - Mobile Density Override */
#sitesGrid > div {
    padding: 12px 14px !important;
    border-radius: 14px !important;
    border: 1px solid rgba(15, 23, 42, 0.08) !important;
    background: #ffffff;
    box-shadow: 0 2px 6px rgba(15, 23, 42, 0.03);
    will-change: transform;
    transition: transform 0.1s ease, box-shadow 0.1s ease;
    /* Force inner spacing to be tight */
    display: flex;
    flex-direction: column;
    gap: 8px !important;
}

/* iOS-style tap feedback */
#sitesGrid > div:active {
    background-color: #f8fafc !important;
    transform: scale(0.98);
}

/* Overriding the bloated inner HTML generated by JS */
#sitesGrid > div > div {
    padding: 0 !important; /* Strips out the old p-4/p-5 classes */
}

/* Typography constraints */
#sitesGrid h3 {
    font-size: 14px !important;
    letter-spacing: -0.2px;
    margin-bottom: 2px !important;
    line-height: 1.2;
}

#sitesGrid p {
    font-size: 10px !important;
    margin: 0 !important;
}

/* Button sizing override inside cards */
#sitesGrid button {
    height: 32px !important;
    font-size: 10px !important;
    border-radius: 8px !important;
}

/* ==========================================================
   📱 NATIVE MOBILE CSS — ADD SITE MODAL (WEB SAFE)
   ========================================================== */

#siteModal {
    /* Required to override Tailwind hidden class safely for absolute centering */
    display: flex; 
}
#siteModal.hidden {
    display: none !important;
}

/* Hardware Accelerated Backdrop */
#siteModalBackdrop {
    -webkit-backdrop-filter: blur(12px);
    backdrop-filter: blur(12px);
    will-change: opacity;
}

/* Stop background scrolling from touching the body */
#siteModal .overscroll-contain {
    overscroll-behavior: contain;
}

/* ⚡ Web-Safe Form Resets */
#siteModal input, 
#siteModal select, 
#siteModal textarea {
    /* Strip default browser styling from inputs so they sit flush */
    -webkit-appearance: none;
    appearance: none;
    border-radius: 0;
    box-shadow: none !important; /* Removes focus rings overriding our custom borders */
}

/* Web Safe: Graceful scrollbar for desktop users inside the modal */
#siteModal .custom-scrollbar::-webkit-scrollbar {
    width: 4px;
}
#siteModal .custom-scrollbar::-webkit-scrollbar-thumb {
    background-color: rgba(148, 163, 184, 0.4); 
    border-radius: 4px;
}

/* Make date picker touch area cover the whole input on mobile & desktop */
#siteModal input[type="date"]::-webkit-calendar-picker-indicator {
    background: transparent;
    bottom: 0;
    color: transparent;
    cursor: pointer;
    height: auto;
    left: 0;
    position: absolute;
    right: 0;
    top: 0;
    width: auto;
}

/* Smooth Hardware Transitions */
#btnSaveSite, #siteModalPanel {
    will-change: transform;
}


/* ==========================================================
   📱 NATIVE MOBILE CSS — SITE EXPENSE MODAL
   ========================================================== */

#siteExpenseModal {
    display: flex; 
}
#siteExpenseModal.hidden {
    display: none !important;
}

/* Hardware Accelerated Backdrop */
#siteExpModalBackdrop {
    -webkit-backdrop-filter: blur(12px);
    backdrop-filter: blur(12px);
    will-change: opacity;
}

/* Stop background scrolling from touching the body */
#siteExpenseModal .overscroll-contain {
    overscroll-behavior: contain;
}

/* ⚡ Strip default browser styling from inputs so they sit flush in the container */
#siteExpenseModal input, 
#siteExpenseModal select, 
#siteExpenseModal textarea {
    -webkit-appearance: none;
    appearance: none;
    border-radius: 0;
    box-shadow: none !important; 
    font-feature-settings: "tnum"; /* Perfect vertical number alignment */
}

/* Hide native date picker icons for a cleaner look */
#siteExpenseModal input[type="date"]::-webkit-calendar-picker-indicator {
    background: transparent;
    bottom: 0;
    color: transparent;
    cursor: pointer;
    height: auto;
    left: 0;
    position: absolute;
    right: 0;
    top: 0;
    width: auto;
}

/* Primary Action Button Rendering */
#btnSaveSiteExp {
    transition: transform 0.15s ease;
    will-change: transform;
}

/* =========================================================
   MATERIALS MODULE – INDUSTRIAL TEAL SYSTEM
   Target: #view-materials + #materialsGrid
   Non-destructive | Additive Only
========================================================= */

/* ---------- 1. HEADER REFINEMENT ---------- */
/* =========================================================
   🟢 WAREHOUSE COMMAND — ENTERPRISE COMPACT SYSTEM
   Fully Unified + Mobile Optimized
========================================================= */

:root {
  --wm-deep: #064e3b;
  --wm-teal: #0d9488;
  --wm-teal-soft: #14b8a6;
  --wm-border: rgba(20,184,166,0.18);
  --wm-glow: rgba(13,148,136,0.25);
}

/* ==========================================================
   📱 NATIVE MOBILE CSS — WAREHOUSE / MATERIALS
   ========================================================== */

/* Hardware Accelerated Sticky Header */
#view-materials .sticky {
    will-change: transform;
    -webkit-backdrop-filter: blur(16px);
    backdrop-filter: blur(16px);
}

/* ⚡ JS-Rendered Material Cards - Mobile Density Override */
#materialsGrid > div {
    padding: 12px !important;
    border-radius: 14px !important;
    border: 1px solid rgba(15, 23, 42, 0.08) !important;
    background: #ffffff;
    box-shadow: 0 2px 6px rgba(15, 23, 42, 0.03);
    will-change: transform;
    transition: transform 0.1s ease, box-shadow 0.1s ease;
    display: flex;
    flex-direction: column;
    gap: 8px !important;
}

/* iOS-style tap feedback */
#materialsGrid > div:active {
    background-color: #f8fafc !important;
    transform: scale(0.98);
}

/* Overriding JS bloated inner HTML paddings */
#materialsGrid > div > div {
    padding: 0;
}

/* Typography constraints */
#materialsGrid h3 {
    font-size: 7px !important;
    letter-spacing: -0.2px;
    margin-bottom: 2px !important;
    line-height: 1.2;
}

/* Shrink the massive quantity numbers */
#materialsGrid .text-3xl {
    font-size: 20px;
}

/* Internal Value Block Override */
#materialsGrid .bg-slate-50 {
    padding: 8px 10px !important;
    border-radius: 10px !important;
    margin-bottom: 8px !important;
}

/* Button Sizing Override inside cards */
#materialsGrid button {
    height: 32px !important;
    font-size: 10px !important;
    border-radius: 8px !important;
}


/* --- LOGS TIMELINE --- */
.log-line {
    position: relative;
    padding-left: 20px;
    border-left: 2px solid #f1f5f9;
}
.log-line::before {
    content: '';
    position: absolute;
    left: -5px;
    top: 4px;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #0d9488;
}

/* --- DELETE BUTTON DANGER STATE --- */
.btn-delete {
    color: #94a3b8;
    transition: all 0.2s ease;
}
.btn-delete:hover {
    color: #ef4444;
    background: #fef2f2;
}


/* ==========================================================
   📱 NATIVE MOBILE CSS — ADD MATERIAL MODAL (WEB SAFE)
   ========================================================== */

#materialModal {
    /* Required to override Tailwind hidden class safely for absolute centering */
    display: flex; 
}
#materialModal.hidden {
    display: none !important;
}

/* Hardware Accelerated Backdrop */
#matModalBackdrop {
    -webkit-backdrop-filter: blur(12px);
    backdrop-filter: blur(12px);
    will-change: opacity;
}

/* Stop background scrolling from touching the body */
#materialModal .overscroll-contain {
    overscroll-behavior: contain;
}

/* ⚡ Web-Safe Form Resets */
#materialModal input, 
#materialModal select {
    /* Strip default browser styling from inputs so they sit flush */
    -webkit-appearance: none;
    appearance: none;
    border-radius: 0;
    box-shadow: none !important; /* Removes focus rings overriding our custom borders */
}

/* Web Safe: Graceful scrollbar for desktop users inside the modal */
#materialModal .custom-scrollbar::-webkit-scrollbar {
    width: 4px;
}
#materialModal .custom-scrollbar::-webkit-scrollbar-thumb {
    background-color: rgba(148, 163, 184, 0.4); 
    border-radius: 4px;
}

/* Smooth Hardware Transitions */
#btnSaveMat, #matModalPanel {
    will-change: transform;
}

/* ============================================================
   📱 NATIVE MOBILE BOTTOM NAVIGATION (CAPACITOR OPTIMIZED)
   ============================================================ */

.la-dock {
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;

    /* Reduced height for more compact mobile UI */
    height: calc(50px + env(safe-area-inset-bottom));

    background-color: #064e3b;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
    z-index: 90 !important;

    /* Hardware acceleration */
    transform: translateZ(0);
    will-change: transform;
    padding-bottom: env(safe-area-inset-bottom);
}

/* Hide on desktop */
@media (min-width: 768px) {
    .la-dock {
        display: none !important;
    }
}

/* Layout container */
.la-dock-grid {
    display: flex;
    justify-content: space-around;
    align-items: center;

    /* Reduced grid height */
    height: 50px;

    width: 100%;
    max-width: 600px;
    margin: 0 auto;
    padding: 0 4px;
}

.la-btn {
    background: transparent;
    border: none;
    outline: none;
    flex: 1;
    height: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;

    /* tighter spacing */
    gap: 2px;

    position: relative;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
}

.la-icon-wrap {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: transform 0.15s cubic-bezier(0.4, 0, 0.2, 1);
    will-change: transform;
}

.la-icon {
    /* slightly smaller icon */
    font-size: 20px;
    color: rgba(255, 255, 255, 0.5);
    transition: color 0.15s ease;
}

.la-label {
    font-size: 9px;
    font-weight: 600;
    letter-spacing: 0.2px;
    color: rgba(255, 255, 255, 0.5);
    transition: color 0.15s ease, font-weight 0.15s ease;
}

.la-indicator {
    display: none;
}

/* ============================================================
   ⚡ ACTIVE STATE (NATIVE APP FEEL)
   ============================================================ */

.la-btn.la-active .la-icon-wrap {
    transform: translateY(-2px); /* Micro-lift, no layout thrashing */
}

.la-btn.la-active .la-icon {
    color: #34d399; /* Vibrant Emerald */
    filter: drop-shadow(0 2px 4px rgba(52, 211, 153, 0.3)); /* Lightweight GPU shadow */
}

.la-btn.la-active .la-label {
    color: #ffffff;
    font-weight: 800;
}

/* Native Top-Indicator Bar */
.la-btn.la-active::after {
    content: '';
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 28px;
    height: 3px;
    background-color: #34d399;
    border-radius: 0 0 4px 4px;
}

/* Fast touch response for mobile */
.la-btn:active .la-icon-wrap {
    transform: scale(0.85);
}


/* ==========================================================
   📱 NATIVE MOBILE CSS — GLOBAL LOADER (WEB SAFE)
   ========================================================== */

#globalLoader {
    /* Absolute supreme layer: Above all headers, FABs, and Modals */
    z-index: 99999 !important; 
    will-change: opacity;
}

#loaderCard {
    will-change: transform, opacity;
    box-shadow: 
        0 25px 50px -12px rgba(0, 0, 0, 0.25), 
        0 0 20px rgba(16, 185, 129, 0.15);
}

/* ⚡ 100% GPU-Accelerated Shimmer Animation */
@keyframes loaderShimmerSlide {
    0% { transform: translateX(-150%); }
    100% { transform: translateX(250%); }
}

#loaderShimmerBar {
    will-change: transform;
    animation: loaderShimmerSlide 1.2s cubic-bezier(0.4, 0, 0.2, 1) infinite;
}



/* ==========================================================
   📱 NATIVE MOBILE CSS — FINANCE MODAL
   ========================================================== */

#financeModal {
    /* Tailwind .hidden handles the toggle, but we force flex when visible for absolute centering */
    display: flex; 
}
#financeModal.hidden {
    display: none !important;
}

/* Hardware Accelerated Backdrop */
#finModalBackdrop {
    -webkit-backdrop-filter: blur(12px);
    backdrop-filter: blur(12px);
    will-change: opacity;
}

/* Stop background scrolling from touching the body */
#financeModal .overscroll-contain {
    overscroll-behavior: contain;
}

/* ⚡ Strip default browser styling from inputs so they sit flush in the container */
#financeModal input, 
#financeModal select, 
#financeModal textarea {
    -webkit-appearance: none;
    appearance: none;
    border-radius: 0;
    font-feature-settings: "tnum"; /* Ensures numbers align vertically perfectly */
}

/* ⚡ Optimize Date Picker alignment on iOS/Android */
#financeModal input[type="date"]::-webkit-calendar-picker-indicator,
#financeModal input[type="month"]::-webkit-calendar-picker-indicator {
    background: transparent;
    bottom: 0;
    color: transparent;
    cursor: pointer;
    height: auto;
    left: 0;
    position: absolute;
    right: 0;
    top: 0;
    width: auto;
}

/* Primary Action Button Rendering */
#btnSaveFin {
    transition: transform 0.15s ease;
    will-change: transform;
}


/* ============================================================
   REPORT MODAL – VERDANT INSIGHT MASTER SYSTEM
   Scoped ONLY to #reportModal
   ============================================================ */

#reportModal {
    z-index: 9999; /* Force above everything including navbars */
}

/* ===========================
   BACKDROP – Glass Authority
   =========================== */
#repModalBackdrop {
    backdrop-filter: blur(14px);
    background: rgba(2, 44, 34, 0.7); /* Deep Teal Tinted Backdrop */
    transition: opacity 220ms ease;
}

/* ==========================================
   MAIN PANEL – Deep Teal & Glass Refinement
   ========================================== */
#repModalPanel {
    box-shadow: 
        0 30px 70px rgba(0, 0, 0, 0.4), 
        0 0 0 1px rgba(255, 255, 255, 0.05);
    backdrop-filter: blur(12px);
    border: 1px solid rgba(45, 212, 191, 0.15);
    transition: all 400ms cubic-bezier(0.16, 1, 0.3, 1);
    background: #ffffff;
}

/* ==========================================
   HEADER – Verdant Apex Identity
   ========================================== */
#repModalPanel > div:first-child {
    background: #064e3b !important; /* Force Brand Emerald */
    border-bottom: 1px solid rgba(45, 212, 191, 0.2);
    position: relative;
    overflow: hidden;
    padding: 1rem 1.25rem; /* Compact height */
}

/* Shimmer Effect for Header */
#repModalPanel > div:first-child::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(115deg, transparent 40%, rgba(255,255,255,0.05) 50%, transparent 60%);
    pointer-events: none;
}

#repModalPanel h3 {
    letter-spacing: 0.08em;
    text-shadow: 0 1px 4px rgba(0, 0, 0, 0.2);
    color: #ffffff;
}

/* ==========================================
   CONTROLS – High-Density Integrated UI
   ========================================== */
#repMonth {
    font-weight: 700;
    transition: all 0.2s ease;
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
    background: rgba(0, 0, 0, 0.2) !important; /* Inset glass feel */
}

#repMonth:focus {
    outline: none;
    background: rgba(0, 0, 0, 0.3) !important;
    border-color: rgba(45, 212, 191, 0.5) !important;
    box-shadow: 0 0 15px rgba(45, 212, 191, 0.2);
}

/* Close Button Hover */
#repModalPanel button[onclick*="close"]:hover {
    background: rgba(239, 68, 68, 0.2) !important;
    color: #ffffff !important;
}

/* ==========================================
   TABLE – Teal Data Grid (Surgical Density)
   ========================================== */
#repTableWrapper {
    border-spacing: 0;
}

/* Forced Teal Table Head */
#repTableWrapper thead {
    background: #0f766e !important; /* Teal-700 */
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
}

#repTableWrapper th {
    color: #ffffff !important; /* Pure White for visibility */
    background: #0f766e !important;
    padding: 10px 12px !important;
    font-size: 9px !important;
    font-weight: 800 !important;
    letter-spacing: 0.05em;
    border-bottom: 2px solid #0d9488 !important;
    text-transform: uppercase;
}

/* Net Pay Highlight Column */
#repTableWrapper th:nth-child(5) {
    background: #0d9488 !important; /* Slightly lighter teal to differentiate */
    border-left: 1px solid rgba(255, 255, 255, 0.1);
}

/* Table Rows Compactness */
#repTableBody td {
    padding: 8px 12px !important;
    font-size: 11px;
    border-bottom: 1px solid #f1f5f9;
}

#repTableBody tr:nth-child(even) {
    background: #f8fafc;
}

#repTableBody tr:hover {
    background: #f0fdfa; /* Teal-50 hover */
}

/* ===========================
   TOTALS FOOTER – Sovereign Block
   =========================== */
#repGrandTotal {
    text-shadow: 0 0 12px rgba(20, 184, 166, 0.2);
    font-family: "JetBrains Mono", monospace;
}

#repTotalDays,
#repTotalBase,
#repTotalExtra {
    font-variant-numeric: tabular-nums;
    font-weight: 700;
}

/* ===========================
   EXPORT BUTTON – Enterprise Action
   =========================== */
#reportModal button[onclick="window.printReport()"] {
    background: #0f172a; /* Slate-900 */
    border: 1px solid rgba(255, 255, 255, 0.1);
    transition: all 200ms ease;
}

#reportModal button[onclick="window.printReport()"]:hover {
    background: #064e3b; /* Brand Teal */
    transform: translateY(-1px);
    box-shadow: 0 8px 20px rgba(6, 78, 59, 0.3);
}

/* ===========================
   MOBILE OPTIMIZATION
   =========================== */
@media (max-width: 640px) {
    #repModalPanel {
        border-radius: 32px 32px 0 0 !important;
        max-height: 94dvh !important;
    }

    /* Padding adjustment for mobile footer thumb-zone */
    .pb-safe {
        padding-bottom: calc(1rem + env(safe-area-inset-bottom)) !important;
    }

    #repTableWrapper th,
    #repTableWrapper td {
        padding: 6px 8px !important;
        font-size: 10px !important;
    }

    #repGrandTotal {
        font-size: 1.125rem;
    }
}

/* ===========================
   ANIMATIONS
   =========================== */
#repModalPanel.translate-y-full {
    transform: translateY(100%);
}

#repModalPanel:not(.opacity-0) {
    transform: translateY(0) scale(1);
}


/* ==========================================================
   📱 NATIVE MOBILE CSS — ANALYTICS MODAL (WEB SAFE)
   ========================================================== */

#analyticsModal {
    /* Required to override Tailwind hidden class safely */
    display: flex; 
}
#analyticsModal.hidden {
    display: none !important;
}

/* Hardware Accelerated Backdrop */
#anaModalBackdrop {
    -webkit-backdrop-filter: blur(12px);
    backdrop-filter: blur(12px);
    will-change: opacity;
}

/* Stop background scrolling from touching the body */
#analyticsModal .overscroll-contain {
    overscroll-behavior: contain;
}

/* Web Safe: Graceful scrollbar for desktop users inside the modal */
#analyticsModal .custom-scrollbar::-webkit-scrollbar {
    width: 4px;
}
#analyticsModal .custom-scrollbar::-webkit-scrollbar-thumb {
    background-color: rgba(148, 163, 184, 0.4); 
    border-radius: 4px;
}

/* Smooth Hardware Transitions */
#anaModalPanel {
    will-change: transform, opacity;
}

/* ==========================================================
   📱 NATIVE MOBILE CSS — SETTINGS MODAL
   ========================================================== */

#settingsModal {
    /* ⚡ The display toggle is handled by Tailwind's .hidden class, 
       but when visible, it MUST use flex to center properly */
    display: flex; 
}
#settingsModal.hidden {
    display: none !important;
}

/* Hardware Accelerated Backdrop */
#setModalBackdrop {
    -webkit-backdrop-filter: blur(12px);
    backdrop-filter: blur(12px);
    will-change: opacity;
}

/* Stop background scrolling from touching the body */
.overscroll-contain {
    overscroll-behavior: contain;
}

/* Remove default iOS/Android styling from inputs so they look flush */
#settingsModal input, 
#settingsModal textarea {
    -webkit-appearance: none;
    appearance: none;
    border-radius: 0;
}

/* ⚡ Optimize Button Shadows for Mobile */
#btnSaveSet {
    transition: transform 0.15s ease;
    will-change: transform;
}
#btnDownloadVault {
    transition: transform 0.15s ease;
    will-change: transform;
}

/* ==========================================================
   📱 NATIVE MOBILE CSS — DAILY PROGRESS REPORT (DPR) MODAL
   ========================================================== */

#dprModal {
    display: flex; 
}
#dprModal.hidden {
    display: none !important;
}

#dprBackdrop {
    -webkit-backdrop-filter: blur(12px);
    backdrop-filter: blur(12px);
    will-change: opacity;
}

/* Stop background scrolling from touching the body */
#dprModal .overscroll-contain {
    overscroll-behavior: contain;
}

/* Web Safe Form Resets */
#dprModal input[type="date"] {
    -webkit-appearance: none;
    appearance: none;
    border-radius: 0;
    box-shadow: none !important;
}

/* Hide native date picker icons for a cleaner look */
#dprModal input[type="date"]::-webkit-calendar-picker-indicator {
    background: transparent;
    bottom: 0;
    color: transparent;
    cursor: pointer;
    height: auto;
    left: 0;
    position: absolute;
    right: 0;
    top: 0;
    width: auto;
}

/* Web Safe: Graceful scrollbar for desktop users inside the modal */
#dprModal .custom-scrollbar::-webkit-scrollbar {
    width: 4px;
}
#dprModal .custom-scrollbar::-webkit-scrollbar-thumb {
    background-color: rgba(148, 163, 184, 0.4); 
    border-radius: 4px;
}

/* Smooth Hardware Transitions */
#dprPanel {
    will-change: transform, opacity;
}

/* ============================================================
   🚀 GLOBAL Z-INDEX SUPREMACY FIX
   Ensures all Modals and Loaders ALWAYS sit above the Dock
   ============================================================ */

/* The Dock stays below */
.la-dock {
    z-index: 90 !important;
}

/* All Modals, Toasts, and Loaders sit at the absolute top */
#financeModal,
#analyticsModal,
#settingsModal,
#dprModal,
#employeeModal,
#siteModal,
#materialModal,
#materialLogsModal,
#addStockModal,
#reportModal,
#payslipModal,
#walletModal,
#ems-toast-container,
#globalLoader {
    z-index: 9999 !important;
}


/* ==========================================================
   📱 NATIVE MOBILE CSS — PROJECT INTELLIGENCE (WEB SAFE)
   ========================================================== */

#projectIntelligenceModal {
    /* Required to override Tailwind hidden class safely for absolute centering */
    display: flex; 
}
#projectIntelligenceModal.hidden {
    display: none !important;
}

/* Hardware Accelerated Backdrop */
#piModalBackdrop {
    -webkit-backdrop-filter: blur(12px);
    backdrop-filter: blur(12px);
    will-change: opacity;
}

/* Stop background scrolling from touching the body */
#projectIntelligenceModal .overscroll-contain {
    overscroll-behavior: contain;
}

/* ⚡ Web-Safe Form Resets */
#projectIntelligenceModal input, 
#projectIntelligenceModal select {
    /* Strip default browser styling from inputs so they sit flush */
    -webkit-appearance: none;
    appearance: none;
    border-radius: 0;
    box-shadow: none !important;
}

/* Web Safe: Graceful scrollbar for desktop users inside the modal */
#projectIntelligenceModal .custom-scrollbar::-webkit-scrollbar {
    width: 4px;
}
#projectIntelligenceModal .custom-scrollbar::-webkit-scrollbar-thumb {
    background-color: rgba(148, 163, 184, 0.4); 
    border-radius: 4px;
}

/* Smooth Hardware Transitions */
#piModalPanel {
    will-change: transform;
}

#materialLogsModal {
    display: flex; 
}
#materialLogsModal.hidden {
    display: none !important;
}

#matLogModalBackdrop {
    -webkit-backdrop-filter: blur(12px);
    backdrop-filter: blur(12px);
    will-change: opacity;
}

#materialLogsModal .overscroll-contain {
    overscroll-behavior: contain;
}

#materialLogsModal .custom-scrollbar::-webkit-scrollbar {
    width: 4px;
}
#materialLogsModal .custom-scrollbar::-webkit-scrollbar-thumb {
    background-color: rgba(148, 163, 184, 0.4); 
    border-radius: 4px;
}

/* FIX: Ensure GPU hardware acceleration points to the new Panel ID */
#matLogModalPanel {
    will-change: transform;
}



/* ==========================================================
   📱 NATIVE MOBILE CSS — DELETE SITE CONFIRMATION
   ========================================================== */

#deleteSiteModal {
    /* Safe flex override for Tailwind's .hidden */
    display: flex; 
}
#deleteSiteModal.hidden {
    display: none !important;
}

/* GPU Accelerated Backdrop */
#deleteBackdrop {
    -webkit-backdrop-filter: blur(8px);
    backdrop-filter: blur(8px);
    will-change: opacity;
}

/* Web Safe Form Reset for Input */
#deleteSiteModal input {
    -webkit-appearance: none;
    appearance: none;
    box-shadow: none !important;
}

/* Smooth pop-in hardware transition */
#deletePanel {
    will-change: transform, opacity;
}


/* ==========================================================
   📱 NATIVE MOBILE CSS — GLOBAL LOADER (WEB SAFE)
   ========================================================== */

#globalLoader {
    /* Absolute supreme layer: Above all headers, FABs, and Modals */
    z-index: 99999 !important; 
    will-change: opacity;
}

#loaderCard {
    will-change: transform, opacity;
    box-shadow: 
        0 25px 50px -12px rgba(0, 0, 0, 0.25), 
        0 0 20px rgba(16, 185, 129, 0.15);
}

/* ⚡ 100% GPU-Accelerated Shimmer Animation */
@keyframes loaderShimmerSlide {
    0% { transform: translateX(-150%); }
    100% { transform: translateX(250%); }
}

#loaderShimmerBar {
    will-change: transform;
    animation: loaderShimmerSlide 1.2s cubic-bezier(0.4, 0, 0.2, 1) infinite;
}


/* ==========================================================
   📱 NATIVE MOBILE CSS — PAYSLIP MODAL (WEB & PDF SAFE)
   ========================================================== */

#payslipModal {
    display: flex; 
}
#payslipModal.hidden {
    display: none !important;
}

#payModalBackdrop {
    -webkit-backdrop-filter: blur(12px);
    backdrop-filter: blur(12px);
    will-change: opacity;
}

/* Stop background scrolling from touching the body */
#payslipModal .overscroll-contain {
    overscroll-behavior: contain;
}

/* Web Safe Form Resets */
#payslipModal input {
    -webkit-appearance: none;
    appearance: none;
    border-radius: 0;
    box-shadow: none !important;
}

/* Hide increment arrows on the Month input */
#payslipModal input[type="month"]::-webkit-calendar-picker-indicator {
    background: transparent;
    bottom: 0;
    color: transparent;
    cursor: pointer;
    height: auto;
    left: 0;
    position: absolute;
    right: 0;
    top: 0;
    width: auto;
}

/* Web Safe: Graceful scrollbar for desktop users inside the modal */
#payslipModal .custom-scrollbar::-webkit-scrollbar {
    width: 4px;
}
#payslipModal .custom-scrollbar::-webkit-scrollbar-thumb {
    background-color: rgba(148, 163, 184, 0.4); 
    border-radius: 4px;
}

/* Smooth Hardware Transitions */
#payModalPanel {
    will-change: transform, opacity;
}

/* ⚡ PRINT SPECIFIC OVERRIDES ⚡ 
   These guarantee html2pdf creates a perfect A4 document */
@media print {
    #payPrintArea {
        -webkit-print-color-adjust: exact !important;
        print-color-adjust: exact !important;
    }
}

/* ---- Modal centering & overflow fixes ---- */
#payslipModal { overflow-x: hidden; } /* prevent any modal-triggered horizontal scroll */

/* Ensure panel sits nicely in the middle (sm+) and bottom on mobile */
@media (min-width: 640px) {
  #payslipModal { align-items: center; } /* double-safety */
  #payModalPanel { margin-top: 0; margin-bottom: 0; }
}

/* Prevent inner content from forcing width and provide safe vertical spacing */
#payModalPanel { overflow-x: hidden; -webkit-overflow-scrolling: touch; }

/* print-safe width but keep responsive behavior during UI */
#payPrintArea { box-sizing: border-box; max-width: 800px; margin-left: auto; margin-right: auto; }

/* avoid ghost bottom-gap (safe-area handling) */
#payModalPanel { padding-bottom: env(safe-area-inset-bottom, 12px); }

/* ==========================================
   UNIVERSAL MODAL SYSTEM
   Inspired by Notion / Linear / Apple
========================================== */

.app-modal-root{
    position: fixed;
    inset: 0;
    z-index: 10000;

    display: flex;
    justify-content: center;
    align-items: flex-end;

    padding:
        calc(var(--sat) + 8px)
        12px
        calc(var(--sab) + 8px);

    overflow: hidden;
}

/* Desktop center */
@media (min-width:640px){
    .app-modal-root{
        align-items:center;
    }
}

/* backdrop */
.app-modal-backdrop{
    position:absolute;
    inset:0;
    background:rgba(2,6,23,0.65);
    backdrop-filter:blur(10px);
}

/* modal panel */
.app-modal-panel{
    position:relative;
    width:100%;
    max-width:420px;
    max-height:90vh;

    display:flex;
    flex-direction:column;

    background:#f8fafc;

    border-radius:20px 20px 0 0;

    box-shadow:0 20px 60px rgba(0,0,0,0.35);

    overflow:hidden;

    transform:translateY(100%);
    opacity:0;

    transition:all .28s cubic-bezier(.4,0,.2,1);
}

/* desktop radius */
@media (min-width:640px){
    .app-modal-panel{
        border-radius:24px;
    }
}

/* visible state */
.app-modal-root.open .app-modal-panel{
    transform:translateY(0);
    opacity:1;
}

/* scroll body */
.app-modal-body{
    overflow-y:auto;
    flex:1;
}

/* footer safe area */
.app-modal-footer{
    padding-bottom:calc(var(--sab) + 8px);
}

/* Fix modal safe-area lift */
#payModalPanel{
    padding-bottom:0 !important;
}


/* ==========================================================
   📱 iOS SAFE AREA INJECTIONS
   ========================================================== */
@supports (padding-bottom: env(safe-area-inset-bottom)) {
    .pb-safe {
        padding-bottom: max(0.75rem, env(safe-area-inset-bottom)) !important;
    }
}


/* ==========================================================
   📱 NATIVE MOBILE CSS — MUSTER ROLL & INPUTS
   ========================================================== */

/* Web Safe Form Resets for Custom Dropdowns */
#attendanceList select {
    -webkit-appearance: none;
    appearance: none;
    box-shadow: none !important;
}

/* Ensure GPU handles the card press animation smoothly */
#attendanceList .transform-gpu {
    will-change: transform;
}

/* ==========================================================
   📱 NATIVE MOBILE CSS — MONTHLY MATRIX GRID
   ========================================================== */

/* Eliminate grey box on Android when tapping cells fast */
.tap-highlight-transparent {
    -webkit-tap-highlight-color: transparent;
}

/* Ensure ultra-smooth, GPU-accelerated horizontal scrolling */
#monthlyGridWrapper > div {
    -webkit-overflow-scrolling: touch;
    will-change: transform, scroll-position;
}

/* Web Safe: Elegant scrollbars for the spreadsheet matrix */
#monthlyGridWrapper .custom-scrollbar::-webkit-scrollbar {
    width: 0px; 
    height: 4px; /* Show thin horizontal bar */
}
#monthlyGridWrapper .custom-scrollbar::-webkit-scrollbar-thumb {
    background-color: rgba(148, 163, 184, 0.4); 
    border-radius: 4px;
}
#monthlyGridWrapper .custom-scrollbar::-webkit-scrollbar-corner {
    background: transparent;
}


/* ==========================================================
   📱 NATIVE MOBILE CSS — EMPLOYEE DIRECTORY
   ========================================================== */

/* Dramatically improves scrolling FPS on long employee lists */
#emp-main-view .content-visibility-auto {
    content-visibility: auto;
    contain-intrinsic-size: 80px; /* Estimates height of the compact card */
}


/* ==========================================================
   📱 NATIVE MOBILE CSS — SITES DIRECTORY GRID
   ========================================================== */

/* Dramatically improves scrolling FPS on long project lists */
#sitesGrid .content-visibility-auto {
    content-visibility: auto;
    contain-intrinsic-size: 140px; /* Exact height of our new compact card */
}

/* Ensure the press animation is handled purely by the GPU */
#sitesGrid .transform-gpu {
    will-change: transform;
}


/* ==========================================================
   📱 NATIVE MOBILE CSS — INVENTORY / MATERIALS GRID
   ========================================================== */

/* Dramatically improves scrolling FPS on long inventory lists */
#materialsGrid .content-visibility-auto {
    content-visibility: auto;
    contain-intrinsic-size: 100px; /* Exact height of our new compact material card */
}

/* Ensure the press animation is handled purely by the GPU */
#materialsGrid .transform-gpu {
    will-change: transform;
}