@import url('https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@400;500;600;700;800;900&family=JetBrains+Mono:wght@400;500;600;700;800&display=swap');

/* =========================================================================
   PAYTIME 4K UHD ENTERPRISE DESIGN SYSTEM — WATERFLO EDITION
   Waterflo Piping System, Padavla, Rajkot (https://wpsemployee.in)
   Ultra-Crisp High-Contrast SaaS UI with Fluid 2K/4K Scaling
   ========================================================================= */

:root {
  --brand-primary: #4f46e5;
  --brand-secondary: #0284c7;
  --surface-bg: #f1f5f9;
  --card-bg: #ffffff;
  --border-subtle: #e2e8f0;
  --border-strong: #cbd5e1;
}

/* 4K & Ultra-Wide Monitor Fluid Scaling (QHD 2560px & 4K UHD 3840px) */
html {
  font-size: 16px;
}
@media (min-width: 1920px) {
  html {
    font-size: 17px;
  }
}
@media (min-width: 2560px) {
  html {
    font-size: 19px;
  }
}
@media (min-width: 3400px) {
  html {
    font-size: 22px;
  }
}

/* Base Typography & Subtle Ambient Mesh Canvas */
body { 
  font-family: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; 
  background-color: #f4f7fb;
  background-image: 
    radial-gradient(at 0% 0%, rgba(79, 70, 229, 0.05) 0px, transparent 45%),
    radial-gradient(at 100% 0%, rgba(14, 165, 233, 0.05) 0px, transparent 45%);
  color: #0f172a;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

.font-mono { 
  font-family: 'JetBrains Mono', monospace; 
  font-feature-settings: "tnum" on, "lnum" on;
}

/* Force Employee Names to Always Render in ALL CAPS */
.sticky-col-name,
.emp-name,
#paytimeTbody td:nth-child(2) span,
.report-row strong,
td.sticky-col-name span {
  text-transform: uppercase !important;
  letter-spacing: -0.01em;
}

/* -------------------------------------------------------------
   4K EXECUTIVE CARD SYSTEM (Crisp Depth, Subtle Glow & Elevation)
   ------------------------------------------------------------- */
.saas-card,
.glass-card,
.glass-card-static { 
  background: linear-gradient(180deg, #ffffff 0%, #fcfdff 100%) !important;
  border: 1px solid rgba(203, 213, 225, 0.75) !important;
  border-radius: 1rem; /* 16px */
  box-shadow: 
    0 1px 2px 0 rgba(15, 23, 42, 0.03),
    0 4px 16px -4px rgba(15, 23, 42, 0.05),
    inset 0 1px 0 0 rgba(255, 255, 255, 0.9);
  transition: border-color 0.2s cubic-bezier(0.16, 1, 0.3, 1),
              box-shadow 0.2s cubic-bezier(0.16, 1, 0.3, 1),
              transform 0.2s cubic-bezier(0.16, 1, 0.3, 1);
}

.saas-card:hover,
.glass-card:hover {
  border-color: #94a3b8 !important;
  box-shadow: 
    0 10px 25px -5px rgba(15, 23, 42, 0.08),
    0 4px 10px -3px rgba(79, 70, 229, 0.04);
}

/* Rich Executive Tinted Accent Cards */
.glass-emerald {
  background: linear-gradient(135deg, #ffffff 0%, #f0fdf4 100%) !important;
  border: 1px solid #bbf7d0 !important;
  box-shadow: 0 4px 14px -3px rgba(16, 185, 129, 0.08) !important;
}
.glass-amber {
  background: linear-gradient(135deg, #ffffff 0%, #fffbeb 100%) !important;
  border: 1px solid #fde68a !important;
  box-shadow: 0 4px 14px -3px rgba(245, 158, 11, 0.08) !important;
}
.glass-rose {
  background: linear-gradient(135deg, #ffffff 0%, #fff1f2 100%) !important;
  border: 1px solid #fecdd3 !important;
  box-shadow: 0 4px 14px -3px rgba(244, 63, 94, 0.08) !important;
}
.glass-indigo {
  background: linear-gradient(135deg, #ffffff 0%, #eef2ff 100%) !important;
  border: 1px solid #c7d2fe !important;
  box-shadow: 0 4px 14px -3px rgba(79, 70, 229, 0.08) !important;
}

/* Clean Dark Executive Banner Card */
.glass-dark {
  background: linear-gradient(135deg, #0f172a 0%, #1e1b4b 60%, #0f172a 100%) !important;
  border: 1px solid #312e81 !important;
  box-shadow: 0 10px 25px -5px rgba(15, 23, 42, 0.28);
}

/* -------------------------------------------------------------
   DYNAMIC 4K VIEWPORT TABLE EXPANSION
   ------------------------------------------------------------- */
@media (min-height: 850px) {
  #paytimeTable {
    font-size: 0.8125rem;
  }
  #tabRegister .max-h-\[640px\],
  #masterSubViewEmployees.max-h-\[640px\] {
    max-height: calc(100vh - 230px) !important;
  }
}

/* -------------------------------------------------------------
   ENTERPRISE NAVIGATION RIBBON & SIDEBAR
   ------------------------------------------------------------- */
.nav-tab-active { 
  border-bottom: 2px solid #4f46e5; 
  color: #4f46e5; 
  font-weight: 700; 
  background-color: #ffffff;
  white-space: nowrap;
}

.nav-tab-inactive { 
  color: #64748b; 
  font-weight: 600; 
  border-bottom: 2px solid transparent;
  white-space: nowrap;
  transition: all 0.15s ease;
}

.nav-tab-inactive:hover { 
  color: #0f172a; 
  background-color: #f1f5f9;
}

.sidebar-collapsed {
  width: 76px !important;
}
.sidebar-collapsed .sidebar-label,
.sidebar-collapsed .sidebar-heading,
.sidebar-collapsed #sidebarMachinePills {
  display: none !important;
}
.sidebar-collapsed .sidebar-item {
  justify-content: center !important;
  padding-left: 0.5rem !important;
  padding-right: 0.5rem !important;
}

/* -------------------------------------------------------------
   SLIM ULTRA-CRISP SCROLLBARS
   ------------------------------------------------------------- */
::-webkit-scrollbar {
  width: 7px;
  height: 7px;
}
::-webkit-scrollbar-track {
  background: #f1f5f9;
}
::-webkit-scrollbar-thumb {
  background: #cbd5e1;
  border-radius: 9999px;
  border: 1px solid #f1f5f9;
}
::-webkit-scrollbar-thumb:hover {
  background: #64748b;
}

.scrollbar-none::-webkit-scrollbar {
  display: none;
}
.scrollbar-none {
  -ms-overflow-style: none;
  scrollbar-width: none;
}

/* -------------------------------------------------------------
   STICKY FREEZED COLUMNS FOR 31-DAY MUSTER MATRICES & REGISTER
   ------------------------------------------------------------- */
.sticky-col-id {
  position: sticky;
  left: 0;
  z-index: 20;
  background-color: #ffffff !important;
  box-shadow: 2px 0 5px -2px rgba(15, 23, 42, 0.08);
  border-right: 1px solid #e2e8f0;
}

.sticky-col-name {
  position: sticky;
  left: 75px;
  z-index: 20;
  background-color: #ffffff !important;
  box-shadow: 4px 0 10px -3px rgba(15, 23, 42, 0.1);
  border-right: 2px solid #cbd5e1;
}

.sticky-col-header-id {
  position: sticky;
  left: 0;
  top: 0;
  z-index: 30;
  background-color: #f8fafc !important;
  box-shadow: 2px 0 5px -2px rgba(15, 23, 42, 0.08);
  border-right: 1px solid #e2e8f0;
}

.sticky-col-header-name {
  position: sticky;
  left: 75px;
  top: 0;
  z-index: 30;
  background-color: #f8fafc !important;
  box-shadow: 4px 0 10px -3px rgba(15, 23, 42, 0.1);
  border-right: 2px solid #cbd5e1;
}

tr:hover .sticky-col-id,
tr:hover .sticky-col-name {
  background-color: #eef2ff !important;
}

#paytimeTbody tr:hover {
  background-color: rgba(238, 242, 255, 0.55) !important;
}

/* High Contrast Enterprise Text Helpers */
.text-sharp-title {
  color: #0f172a !important;
  font-weight: 800;
}
.text-sharp-body {
  color: #1e293b !important;
}
.text-sharp-muted {
  color: #64748b !important;
}

/* =========================================================================
   4K ULTRA-PREMIUM OBSIDIAN DARK UI ENGINE (body.theme-dark)
   Multi-Tone Neon Contrast, Deep Obsidian Glass & Vibrant Status Badges
   ========================================================================= */
body.theme-dark {
  color-scheme: dark;
  background-color: #060a14 !important;
  background-image:
    radial-gradient(at 0% 0%, rgba(99, 102, 241, 0.16) 0px, transparent 48%),
    radial-gradient(at 100% 0%, rgba(14, 165, 233, 0.14) 0px, transparent 48%),
    radial-gradient(at 50% 100%, rgba(16, 185, 129, 0.08) 0px, transparent 55%) !important;
  color: #f1f5f9 !important;
}

/* Main App Container & Workspace Canvas */
body.theme-dark #appContainer {
  background: transparent !important;
}

/* Topbar & Left Sidebar Surfaces */
body.theme-dark header {
  background: rgba(11, 17, 32, 0.88) !important;
  backdrop-filter: blur(16px) !important;
  border-bottom: 1px solid rgba(148, 163, 184, 0.15) !important;
  box-shadow: 0 4px 20px -4px rgba(0, 0, 0, 0.5) !important;
}

body.theme-dark #appSidebar {
  background: linear-gradient(180deg, #0b1120 0%, #070c18 100%) !important;
  border-right: 1px solid rgba(148, 163, 184, 0.15) !important;
}

/* Elevated 4K Dark Cards & Panels */
body.theme-dark .saas-card,
body.theme-dark .glass-card,
body.theme-dark .glass-card-static,
body.theme-dark .bg-white,
body.theme-dark .bg-white\/95,
body.theme-dark .bg-white\/90,
body.theme-dark .bg-white\/80 {
  background: linear-gradient(180deg, #111a2e 0%, #0c1323 100%) !important;
  border-color: rgba(148, 163, 184, 0.16) !important;
  box-shadow:
    0 4px 20px -4px rgba(0, 0, 0, 0.55),
    inset 0 1px 0 0 rgba(255, 255, 255, 0.06) !important;
}

body.theme-dark .saas-card:hover,
body.theme-dark .glass-card:hover {
  border-color: rgba(99, 102, 241, 0.45) !important;
  box-shadow:
    0 12px 28px -6px rgba(0, 0, 0, 0.7),
    0 0 20px -4px rgba(99, 102, 241, 0.18),
    inset 0 1px 0 0 rgba(255, 255, 255, 0.1) !important;
}

/* Glowing Top Accent KPI Borders in 4K Dark Mode */
body.theme-dark .border-t-purple-500 {
  border-top-color: #a855f7 !important;
  box-shadow: 0 -2px 14px -4px rgba(168, 85, 247, 0.45), 0 6px 20px -4px rgba(0, 0, 0, 0.6) !important;
}
body.theme-dark .border-t-emerald-500 {
  border-top-color: #10b981 !important;
  box-shadow: 0 -2px 14px -4px rgba(16, 185, 129, 0.45), 0 6px 20px -4px rgba(0, 0, 0, 0.6) !important;
}
body.theme-dark .border-t-amber-500 {
  border-top-color: #f59e0b !important;
  box-shadow: 0 -2px 14px -4px rgba(245, 158, 11, 0.45), 0 6px 20px -4px rgba(0, 0, 0, 0.6) !important;
}
body.theme-dark .border-t-rose-500 {
  border-top-color: #f43f5e !important;
  box-shadow: 0 -2px 14px -4px rgba(244, 63, 94, 0.45), 0 6px 20px -4px rgba(0, 0, 0, 0.6) !important;
}
body.theme-dark .border-t-indigo-500 {
  border-top-color: #6366f1 !important;
  box-shadow: 0 -2px 14px -4px rgba(99, 102, 241, 0.45), 0 6px 20px -4px rgba(0, 0, 0, 0.6) !important;
}

/* Recessed Slate Surfaces (Table Headers, Filter Bars, Sub-Panels) */
body.theme-dark .bg-slate-50,
body.theme-dark .bg-slate-50\/60,
body.theme-dark .bg-slate-50\/80,
body.theme-dark .bg-slate-50\/90,
body.theme-dark .bg-slate-50\/50 {
  background-color: #090f1d !important;
}

body.theme-dark .bg-slate-100,
body.theme-dark .bg-slate-100\/80,
body.theme-dark .bg-slate-200\/60 {
  background-color: #152036 !important;
}

/* Tinted Glass Cards in Dark Mode */
body.theme-dark .glass-emerald {
  background: linear-gradient(135deg, rgba(6, 78, 59, 0.35) 0%, rgba(15, 23, 42, 0.92) 100%) !important;
  border-color: rgba(16, 185, 129, 0.35) !important;
}
body.theme-dark .glass-amber {
  background: linear-gradient(135deg, rgba(120, 53, 15, 0.35) 0%, rgba(15, 23, 42, 0.92) 100%) !important;
  border-color: rgba(245, 158, 11, 0.35) !important;
}
body.theme-dark .glass-rose {
  background: linear-gradient(135deg, rgba(136, 19, 55, 0.35) 0%, rgba(15, 23, 42, 0.92) 100%) !important;
  border-color: rgba(244, 63, 94, 0.35) !important;
}
body.theme-dark .glass-indigo {
  background: linear-gradient(135deg, rgba(49, 46, 129, 0.4) 0%, rgba(15, 23, 42, 0.92) 100%) !important;
  border-color: rgba(99, 102, 241, 0.4) !important;
}

/* Borders & Dividers in 4K Dark Mode */
body.theme-dark .border-slate-100,
body.theme-dark .border-slate-200,
body.theme-dark .border-slate-200\/90,
body.theme-dark .border-slate-200\/80,
body.theme-dark .border-slate-300 {
  border-color: rgba(148, 163, 184, 0.16) !important;
}

body.theme-dark .divide-slate-100 > :not([hidden]) ~ :not([hidden]),
body.theme-dark .divide-slate-200 > :not([hidden]) ~ :not([hidden]) {
  border-color: rgba(148, 163, 184, 0.12) !important;
}

/* Typography Hierarchy in 4K Dark Mode */
body.theme-dark .text-slate-900,
body.theme-dark .text-sharp-title {
  color: #f8fafc !important;
}

body.theme-dark .text-slate-800,
body.theme-dark .text-sharp-body {
  color: #f1f5f9 !important;
}

body.theme-dark .text-slate-700 {
  color: #e2e8f0 !important;
}

body.theme-dark .text-slate-600 {
  color: #cbd5e1 !important;
}

body.theme-dark .text-slate-500,
body.theme-dark .text-sharp-muted {
  color: #94a3b8 !important;
}

body.theme-dark .text-slate-400 {
  color: #64748b !important;
}

/* Vibrant Neon-Tinted Status Pills & Badges in 4K Dark Mode */
/* Emerald (Present, Online, Synced) */
body.theme-dark .bg-emerald-50,
body.theme-dark .bg-emerald-50\/50,
body.theme-dark .bg-emerald-50\/60,
body.theme-dark .bg-emerald-100,
body.theme-dark .bg-emerald-100\/70 {
  background-color: rgba(16, 185, 129, 0.16) !important;
}
body.theme-dark .text-emerald-600,
body.theme-dark .text-emerald-700,
body.theme-dark .text-emerald-800,
body.theme-dark .text-emerald-900 {
  color: #34d399 !important;
}
body.theme-dark .border-emerald-100,
body.theme-dark .border-emerald-200,
body.theme-dark .border-emerald-200\/80,
body.theme-dark .border-emerald-200\/60,
body.theme-dark .border-emerald-300 {
  border-color: rgba(16, 185, 129, 0.35) !important;
}

/* Amber (In-Shift / On-Floor / Single Punch / Late) */
body.theme-dark .bg-amber-50,
body.theme-dark .bg-amber-50\/50,
body.theme-dark .bg-amber-50\/60,
body.theme-dark .bg-amber-100 {
  background-color: rgba(245, 158, 11, 0.16) !important;
}
body.theme-dark .text-amber-600,
body.theme-dark .text-amber-700,
body.theme-dark .text-amber-800,
body.theme-dark .text-amber-900 {
  color: #fbbf24 !important;
}
body.theme-dark .border-amber-100,
body.theme-dark .border-amber-200,
body.theme-dark .border-amber-200\/80,
body.theme-dark .border-amber-200\/60,
body.theme-dark .border-amber-300 {
  border-color: rgba(245, 158, 11, 0.38) !important;
}

/* Rose (Absent / Blocklist / Alert) */
body.theme-dark .bg-rose-50,
body.theme-dark .bg-rose-50\/50,
body.theme-dark .bg-rose-50\/60,
body.theme-dark .bg-rose-100 {
  background-color: rgba(244, 63, 94, 0.16) !important;
}
body.theme-dark .text-rose-600,
body.theme-dark .text-rose-700,
body.theme-dark .text-rose-800,
body.theme-dark .text-rose-900 {
  color: #fb7185 !important;
}
body.theme-dark .border-rose-100,
body.theme-dark .border-rose-200,
body.theme-dark .border-rose-200\/80,
body.theme-dark .border-rose-300 {
  border-color: rgba(244, 63, 94, 0.38) !important;
}

/* Electric Indigo (Active Navigation, Primary Accents, Overtime) */
body.theme-dark .bg-indigo-50,
body.theme-dark .bg-indigo-50\/50,
body.theme-dark .bg-indigo-50\/70,
body.theme-dark .bg-indigo-100 {
  background-color: rgba(99, 102, 241, 0.18) !important;
}
body.theme-dark .text-indigo-600,
body.theme-dark .text-indigo-700,
body.theme-dark .text-indigo-800,
body.theme-dark .text-indigo-900 {
  color: #818cf8 !important;
}
body.theme-dark .border-indigo-100,
body.theme-dark .border-indigo-200,
body.theme-dark .border-indigo-300 {
  border-color: rgba(99, 102, 241, 0.4) !important;
}

/* Violet / Purple (Reports, Total Staff, Holiday) */
body.theme-dark .bg-purple-50,
body.theme-dark .bg-purple-100 {
  background-color: rgba(168, 85, 247, 0.18) !important;
}
body.theme-dark .text-purple-600,
body.theme-dark .text-purple-700,
body.theme-dark .text-purple-800 {
  color: #c084fc !important;
}
body.theme-dark .border-purple-100,
body.theme-dark .border-purple-200 {
  border-color: rgba(168, 85, 247, 0.38) !important;
}

/* Sky / Cyan / Blue (Shifts, Info Pills) */
body.theme-dark .bg-sky-50,
body.theme-dark .bg-sky-100,
body.theme-dark .bg-blue-50,
body.theme-dark .bg-blue-100 {
  background-color: rgba(14, 165, 233, 0.16) !important;
}
body.theme-dark .text-sky-600,
body.theme-dark .text-sky-700,
body.theme-dark .text-blue-600,
body.theme-dark .text-blue-700 {
  color: #38bdf8 !important;
}
body.theme-dark .border-sky-200,
body.theme-dark .border-blue-200 {
  border-color: rgba(14, 165, 233, 0.38) !important;
}

/* Sidebar Hover & Active Item States */
body.theme-dark .sidebar-item:hover {
  background-color: rgba(30, 41, 59, 0.75) !important;
  color: #f8fafc !important;
}

/* Sticky Freezed Columns & Tables in 4K Dark Mode */
body.theme-dark thead,
body.theme-dark thead tr,
body.theme-dark thead th {
  background-color: #0d1527 !important;
  color: #94a3b8 !important;
  border-color: rgba(148, 163, 184, 0.16) !important;
}

body.theme-dark .sticky-col-id,
body.theme-dark .sticky-col-name {
  background-color: #0e1629 !important;
  border-right-color: rgba(148, 163, 184, 0.2) !important;
  box-shadow: 4px 0 12px -2px rgba(0, 0, 0, 0.65) !important;
}

body.theme-dark .sticky-col-header-id,
body.theme-dark .sticky-col-header-name {
  background-color: #09101f !important;
  border-right-color: rgba(148, 163, 184, 0.22) !important;
  box-shadow: 4px 0 12px -2px rgba(0, 0, 0, 0.75) !important;
}

body.theme-dark tr:hover .sticky-col-id,
body.theme-dark tr:hover .sticky-col-name {
  background-color: #17233d !important;
}

body.theme-dark tbody tr:hover,
body.theme-dark #paytimeTbody tr:hover {
  background-color: rgba(30, 41, 59, 0.65) !important;
}

/* Inputs, Selects & Textareas in 4K Dark Mode */
body.theme-dark input:not([type="checkbox"]):not([type="radio"]),
body.theme-dark select,
body.theme-dark textarea {
  background-color: #090f1d !important;
  color: #f8fafc !important;
  border-color: rgba(148, 163, 184, 0.24) !important;
}

body.theme-dark input::placeholder,
body.theme-dark textarea::placeholder {
  color: #64748b !important;
}

body.theme-dark input:focus,
body.theme-dark select:focus,
body.theme-dark textarea:focus {
  border-color: #6366f1 !important;
  box-shadow: 0 0 0 2px rgba(99, 102, 241, 0.25) !important;
}

/* Dark Scrollbars */
body.theme-dark ::-webkit-scrollbar-track {
  background: #090f1d;
}
body.theme-dark ::-webkit-scrollbar-thumb {
  background: #334155;
  border: 1px solid #090f1d;
}
body.theme-dark ::-webkit-scrollbar-thumb:hover {
  background: #6366f1;
}

/* -------------------------------------------------------------
   PRINT STYLES
   ------------------------------------------------------------- */
@media print {
  body * { 
    visibility: hidden; 
  }
  #reportPrintArea, #reportPrintArea * { 
    visibility: visible; 
  }
  #reportPrintArea { 
    position: absolute; 
    left: 0; 
    top: 0; 
    width: 100%; 
    border: none !important; 
    box-shadow: none !important; 
  }
  .no-print { 
    display: none !important; 
  }
  @page { 
    size: landscape; 
    margin: 8mm; 
  }
}