/**
 * iOS / iPhone 17 Pro Max Design System
 * FMS Timesheet
 * Modernized Apple HIG styling, glassmorphism, squircles, zero horizontal blowout
 */

:root {
  /* iOS System Colors (brand primary) */
  --ios-blue: #0a84ff;
  --ios-blue-rgb: 10, 132, 255;
  --ios-teal: #30b0c7;
  --ios-green: #34c759;
  --ios-indigo: #5856d6;
  --ios-orange: #ff9500;
  --ios-pink: #ff2d55;
  --ios-purple: #af52de;
  --ios-red: #ff3b30;
  --ios-yellow: #ffcc00;
  --ios-gray: #8e8e93;
  --ios-gray-2: #aeaeb2;
  --ios-gray-3: #c7c7cc;
  --ios-gray-4: #d1d1d6;
  --ios-gray-5: #e5e5ea;
  --ios-gray-6: #f2f2f7;

  /* System Backgrounds */
  --ios-bg-system: #f2f2f7;
  --ios-bg-card: rgba(255, 255, 255, 0.88);
  --ios-bg-glass: rgba(255, 255, 255, 0.75);
  /* Header: near-transparent frost so each section's accent wash (blue / green /
     indigo / amber, set by body.theme-*) reads through it — one continuous
     surface instead of a hard separate bar. Warm-shifted to feel calm, not sterile. */
  --ios-bg-nav: rgba(255, 255, 255, 0.52);
  --ios-hairline: rgba(60, 60, 67, 0.12);
  --ios-header-ink: #3a3a3c;

  /* Radii (iOS Squircles) */
  --radius-xs: 8px;
  --radius-sm: 12px;
  --radius-md: 16px;
  --radius-lg: 20px;
  --radius-xl: 24px;
  --radius-full: 9999px;

  /* Typography */
  --ios-font: "Kanit", "Inter", "Noto Sans Thai", -apple-system, BlinkMacSystemFont, "SF Pro Display", "SF Pro Text", "SF Pro", "Sarabun", "Sukhumvit Set", "Segoe UI", Roboto, Helvetica, Arial, sans-serif;

  /* Elevation Shadows */
  --shadow-subtle: 0 1px 3px rgba(0, 0, 0, 0.04), 0 4px 12px rgba(0, 0, 0, 0.03);
  --shadow-card: 0 4px 24px rgba(0, 0, 0, 0.06), 0 1px 4px rgba(0, 0, 0, 0.04);
  --shadow-float: 0 12px 36px rgba(0, 0, 0, 0.1), 0 2px 8px rgba(0, 0, 0, 0.06);
}

/* ==========================================================================
   Base & Safe-Area Viewport Reset (Zero Horizontal Blowout)
   ========================================================================== */
html {
  font-family: var(--ios-font);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-size-adjust: 100%;
  -webkit-text-size-adjust: 100%;
  overflow-x: hidden !important;
  overflow-y: auto !important;
  max-width: 100vw;
  width: 100%;
}

body {
  font-family: var(--ios-font) !important;
  font-size: 15.5px;
  line-height: 1.55;
  letter-spacing: -0.1px; /* Kanit Latin sits slightly loose at default tracking */
  background-color: var(--ios-bg-system) !important;
  color: #1c1c1e;
  overflow-x: hidden !important;
  overflow-y: auto !important;
  max-width: 100vw;
  width: 100%;
  min-width: 0;
  margin: 0;
  padding: 0;
  /* Safe-area insets for iPhone 17 Pro Max notch & home bar */
  padding-left: env(safe-area-inset-left, 0px);
  padding-right: env(safe-area-inset-right, 0px);
  padding-bottom: env(safe-area-inset-bottom, 0px);
}

*, *::before, *::after {
  box-sizing: border-box;
}

/* DataTables "Print" exports the table into a popup window that inherits this
   stylesheet, so @page here sets the paper size in the print dialog. The PDF
   button is already A4 via its pdfmake default. */
@page {
  size: A4 portrait;
  margin: 15mm;
}

/* Prevent image & table blowout */
img, svg, video, canvas {
  max-width: 100%;
  height: auto;
}

/* ==========================================================================
   Page Layout & Container Optimization
   ========================================================================== */
.page-container {
  max-width: 100vw !important;
  width: 100% !important;
  overflow-x: hidden !important;
  overflow-y: visible !important;
  background-color: transparent !important;
}

.page-content-wrapper {
  max-width: 100% !important;
  min-width: 0 !important;
  overflow: visible !important;
}

.page-content {
  background-color: var(--ios-bg-system) !important;
  padding: 24px 24px 40px !important; /* desktop-default gutters 24 L/R */
  min-height: calc(100vh - 70px) !important;
  max-width: 100% !important;
  overflow-x: hidden !important;
  overflow-y: visible !important;
}

/* Top Navigation Header — calm frosted glass.
   Soft, not stark: low-opacity frost + a hairline, no heavy shadow.
   The page's per-section background wash shows through, so the header reads as
   part of the page (trust/calm blue-green) rather than a hard administrative bar. */
.page-header.navbar {
  background: var(--ios-bg-nav) !important;
  backdrop-filter: blur(30px) saturate(150%) !important;
  -webkit-backdrop-filter: blur(30px) saturate(150%) !important;
  border-bottom: 1px solid var(--ios-hairline) !important;
  box-shadow: none !important;
  height: auto !important;
  min-height: 56px !important;
  padding-top: env(safe-area-inset-top, 0px);
}

.page-header.navbar .page-logo {
  display: flex;
  align-items: center;
  height: 56px;
  background: transparent !important;
}

.page-header.navbar .page-logo img {
  border-radius: var(--radius-xs);
  filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.05));
  opacity: 0.94;
}

.page-header.navbar .top-menu .navbar-nav > li.dropdown .dropdown-toggle {
  display: flex;
  align-items: center;
  gap: 8px;
  height: 56px;
  padding: 0 16px;
  border-radius: var(--radius-sm);
  transition: background-color 0.2s ease;
}

.page-header.navbar .top-menu .navbar-nav > li.dropdown .dropdown-toggle:hover {
  background: rgba(10, 132, 255, 0.07) !important;
}

.page-header.navbar .top-menu .navbar-nav > li.dropdown .dropdown-toggle .img-circle {
  border-radius: var(--radius-full);
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.12);
  width: 34px;
  height: 34px;
  object-fit: cover;
}

/* Header top-menu: beat darkblue light-gray text on frosted light header.
   Secondary ink (#3a3a3c) keeps contrast >= 4.5:1 without the hard #1c1c1e. */
.page-header.navbar .username,
.page-header.navbar .langname,
.page-header.navbar .username.hide,
.page-header.navbar .top-menu .navbar-nav > li.dropdown .dropdown-toggle i {
  color: var(--ios-header-ink) !important;
}

.page-header.navbar .top-menu .navbar-nav > li.dropdown .dropdown-toggle {
  background: transparent !important;
}

.page-header.navbar .top-menu .navbar-nav > li.dropdown.open > .dropdown-toggle,
.page-header.navbar .top-menu .navbar-nav > li.dropdown .dropdown-toggle:hover {
  background: rgba(10, 132, 255, 0.10) !important;
}

/* Breadcrumb Bar */
.page-bar,
.page-content-white .page-bar,
.page-container-bg-solid .page-bar {
  background: var(--ios-bg-card) !important;
  backdrop-filter: blur(16px) !important;
  -webkit-backdrop-filter: blur(16px) !important;
  border-radius: var(--radius-md) !important;
  border: 1px solid rgba(0, 0, 0, 0.05) !important;
  box-shadow: var(--shadow-subtle) !important;
  padding: 10px 18px !important;
  margin: 0 0 16px 0 !important;
}

.page-bar .page-breadcrumb > li > a,
.page-bar .page-breadcrumb > li > span {
  font-weight: 500;
  color: #3a3a3c;
}

.page-bar .page-breadcrumb > li > i {
  color: #636366 !important;
}

/* Kanit everywhere — override Metronic Open Sans / Helvetica hardcodes */
body, h1, h2, h3, h4, h5, h6,
.primary-font,
.dropdown-menu,
.label, .badge,
.datepicker, .datetimepicker, .bootstrap-select .dropdown-menu {
  font-family: var(--ios-font) !important;
}

/* Heading scale — Kanit: slightly tighter tracking, comfortable Thai line-height */
h1 { font-size: 28px; line-height: 1.3; letter-spacing: -0.4px; font-weight: 700; margin: 0 0 12px; }
h2 { font-size: 22px; line-height: 1.35; letter-spacing: -0.3px; font-weight: 600; margin: 0 0 10px; }
h3 { font-size: 18px; line-height: 1.4; letter-spacing: -0.2px; font-weight: 600; margin: 0 0 8px; }
h4 { font-size: 16px; line-height: 1.45; letter-spacing: -0.15px; font-weight: 600; margin: 0 0 8px; }

.page-title {
  font-size: 24px !important;
  font-weight: 700 !important;
  letter-spacing: -0.5px;
  line-height: 1.3;
  color: #1c1c1e !important;
  margin: 10px 0 20px !important;
}

/* ==========================================================================
   iOS Cards, Portlets & Containers (Squircles & Glass)
   ========================================================================== */
.portlet, .portlet.box, .portlet.light {
  background: var(--ios-bg-card) !important;
  backdrop-filter: blur(20px) !important;
  -webkit-backdrop-filter: blur(20px) !important;
  border-radius: var(--radius-xl) !important;
  border: 1px solid rgba(0, 0, 0, 0.06) !important;
  box-shadow: var(--shadow-card) !important;
  margin-bottom: 24px !important;
  overflow: hidden !important;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.portlet > .portlet-title {
  border-bottom: 1px solid rgba(0, 0, 0, 0.06) !important;
  padding: 16px 20px !important; /* 16 top/bottom, 20 sides */
  min-height: 52px !important;
}

.portlet > .portlet-title > .caption {
  font-size: 17px !important;
  font-weight: 600 !important;
  letter-spacing: -0.3px;
  line-height: 1.35;
  color: #1c1c1e !important;
}

.portlet > .portlet-body {
  padding: 16px 20px !important; /* 16 top/bottom, 20 sides */
}

/* Dashboard Statistic Counters */
.dashboard-stat2, .dashboard-stat {
  border-radius: var(--radius-xl) !important;
  border: 1px solid rgba(0, 0, 0, 0.05) !important;
  box-shadow: var(--shadow-subtle) !important;
  overflow: hidden !important;
  background: var(--ios-bg-card) !important;
  backdrop-filter: blur(16px) !important;
  -webkit-backdrop-filter: blur(16px) !important;
  transition: transform 0.2s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.dashboard-stat2:hover, .dashboard-stat:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-card) !important;
}

/* Metronic colored variants force #FFF text; ios forces light card bg → restore dark text and soft pastel gradients */
.dashboard-stat.blue {
  background: linear-gradient(135deg, #f0f7ff 0%, #e0f2fe 100%) !important;
  border: 1px solid rgba(14, 165, 233, 0.22) !important;
}
.dashboard-stat.green-soft {
  background: linear-gradient(135deg, #f0fdfa 0%, #ccfbf1 100%) !important;
  border: 1px solid rgba(20, 184, 166, 0.22) !important;
}
.dashboard-stat.green {
  background: linear-gradient(135deg, #f0fdf4 0%, #dcfce7 100%) !important;
  border: 1px solid rgba(34, 197, 94, 0.22) !important;
}
.dashboard-stat.purple {
  background: linear-gradient(135deg, #faf5ff 0%, #f3e8ff 100%) !important;
  border: 1px solid rgba(168, 85, 247, 0.22) !important;
}
.dashboard-stat.green-sharp {
  background: linear-gradient(135deg, #ecfdf5 0%, #d1fae5 100%) !important;
  border: 1px solid rgba(16, 185, 129, 0.22) !important;
}
.dashboard-stat.green-meadow {
  background: linear-gradient(135deg, #f0fdfa 0%, #e6fffa 100%) !important;
  border: 1px solid rgba(45, 212, 191, 0.25) !important;
}
.dashboard-stat.blue-steel {
  background: linear-gradient(135deg, #eef2ff 0%, #e0e7ff 100%) !important;
  border: 1px solid rgba(99, 102, 241, 0.22) !important;
}
.dashboard-stat.purple-plum {
  background: linear-gradient(135deg, #fff1f2 0%, #ffe4e6 100%) !important;
  border: 1px solid rgba(244, 63, 94, 0.22) !important;
}

.dashboard-stat .details .number,
.dashboard-stat2 .details .number,
.dashboard-stat[class*=" "] .details .number,
.dashboard-stat[class*=" "] .details .number * {
  color: #0f172a !important;
  font-weight: 800 !important;
  text-shadow: none !important;
}
.dashboard-stat .details .desc,
.dashboard-stat2 .details .desc,
.dashboard-stat[class*=" "] .details .desc,
.dashboard-stat[class*=" "] .details .desc * {
  color: #475569 !important;
  font-weight: 600 !important;
  text-shadow: none !important;
}

.dashboard-stat .more,
.dashboard-stat2 .more {
  color: #1c1c1e !important;
  background-color: rgba(0, 0, 0, 0.04) !important;
}

/* ==========================================================================
   iOS Form Controls & Buttons
   ========================================================================== */
.form-control, input[type="text"], input[type="password"], input[type="email"], select, textarea {
  border-radius: var(--radius-sm) !important;
  border: 1.5px solid var(--ios-gray-5) !important;
  background-color: rgba(255, 255, 255, 0.9) !important;
  color: #1c1c1e !important;
  font-size: 15px !important;
  min-height: 44px;
  padding: 10px 14px !important;
  transition: border-color 0.2s ease, box-shadow 0.2s ease !important;
  max-width: 100%;
}

.form-control:focus, input:focus, select:focus, textarea:focus {
  border-color: var(--ios-blue) !important;
  box-shadow: 0 0 0 3px rgba(var(--ios-blue-rgb), 0.2) !important;
  outline: none !important;
}

.help-block,
.help-block em,
.form-control ~ .help-block {
  color: #636366 !important;
}

/* Ensure mobile Safari doesn't zoom in automatically on focus */
@media screen and (max-width: 768px) {
  .form-control, input, select, textarea {
    font-size: 16px !important;
  }
}

/* ==========================================================================
   iOS Buttons — full iPhone-style button system for Metronic / Bootstrap
   (ios-theme loads LAST, so !important beats Metronic outline/box-shadow:none)
   ========================================================================== */
.btn {
  font-family: var(--ios-font) !important;
  border-radius: var(--radius-sm) !important;
  font-weight: 600 !important;
  font-size: 15px !important;
  letter-spacing: -0.2px;
  line-height: 1.3;
  padding: 10px 18px !important;
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  text-align: center;
  white-space: normal; /* Thai labels wrap instead of Bootstrap nowrap */
  background-color: var(--ios-gray-5);
  border: 1.5px solid transparent;
  color: #1c1c1e;
  cursor: pointer;
  text-decoration: none !important;
  max-width: 100%;
  transition: background-color 0.18s ease, border-color 0.18s ease,
    box-shadow 0.18s ease, transform 0.15s ease, color 0.18s ease !important;
}

.btn:hover {
  background-color: var(--ios-gray-4);
}

.btn:active:not(.disabled):not(:disabled) {
  transform: scale(0.97) !important;
}

.btn:focus-visible {
  outline: 3px solid rgba(var(--ios-blue-rgb), 0.75) !important;
  outline-offset: 2px !important;
  box-shadow: 0 0 0 4px rgba(var(--ios-blue-rgb), 0.28) !important;
}

.btn.disabled,
.btn:disabled,
.btn[disabled],
.btn[aria-disabled="true"] {
  opacity: 0.48 !important;
  cursor: not-allowed !important;
  pointer-events: none !important;
  box-shadow: none !important;
}

/* Sizes — mobile media below lifts .btn to 44px touch target */
.btn-xs {
  min-height: 30px;
  padding: 4px 10px !important;
  font-size: 12.5px !important;
  border-radius: var(--radius-xs) !important;
}

.btn-sm {
  min-height: 36px;
  padding: 6px 14px !important;
  font-size: 13px !important;
  border-radius: var(--radius-xs) !important;
}

.btn-lg {
  min-height: 50px;
  padding: 12px 24px !important;
  font-size: 16px !important;
  border-radius: var(--radius-md) !important;
}

.btn-block {
  display: inline-flex;
  width: 100% !important;
}

/* App uses .btn-circle with text ("Delete", "More") → pill, not aspect-ratio:1;
   paired with .btn-icon-only it becomes a true circle */
.btn-circle {
  border-radius: var(--radius-full) !important;
  padding-left: 20px !important;
  padding-right: 20px !important;
}

.btn-icon-only {
  width: auto;
  height: auto;
  min-width: 42px;
  min-height: 42px;
  padding: 0 10px !important;
  border-radius: var(--radius-full) !important;
}

/* Icon alignment inside buttons */
.btn i,
.btn .fa {
  font-size: 1.1em;
  line-height: 1;
  flex-shrink: 0;
}

/* --- Solid color roles (WCAG 4.5:1 checked against text) --- */
.btn.green,
.btn.blue,
.btn.btn-primary,
.btn-primary,
.btn-success {
  background-color: var(--ios-blue) !important;
  border-color: var(--ios-blue) !important;
  color: #ffffff !important;
}

.btn.green:hover,
.btn.blue:hover,
.btn.btn-primary:hover,
.btn-primary:hover,
.btn-success:hover {
  background-color: #0066d6 !important;
  border-color: #0066d6 !important;
  color: #ffffff !important;
  box-shadow: 0 4px 12px rgba(var(--ios-blue-rgb), 0.35) !important;
}

.btn.red,
.btn.red-mint,
.btn.btn-danger,
.btn-danger {
  background-color: #d70015 !important; /* iOS red fails 4.5:1 with white */
  border-color: #d70015 !important;
  color: #ffffff !important;
}

.btn.red:hover,
.btn.red-mint:hover,
.btn.btn-danger:hover,
.btn-danger:hover {
  background-color: #b80012 !important;
  border-color: #b80012 !important;
  color: #ffffff !important;
  box-shadow: 0 4px 12px rgba(215, 0, 21, 0.32) !important;
}

.btn-warning {
  background-color: #ff9500 !important;
  border-color: #ff9500 !important;
  color: #1c1c1e !important; /* white on orange fails contrast */
}

.btn-warning:hover {
  background-color: #e68600 !important;
  border-color: #e68600 !important;
  color: #1c1c1e !important;
}

.btn-info {
  background-color: #30b0c7 !important;
  border-color: #30b0c7 !important;
  color: #1c1c1e !important;
}

.btn-info:hover {
  background-color: #279aad !important;
  border-color: #279aad !important;
  color: #1c1c1e !important;
}

.btn.default,
.btn.btn-default,
.btn.btn-secondary,
.btn-default {
  background-color: var(--ios-gray-5) !important;
  border-color: transparent !important;
  color: #1c1c1e !important;
}

.btn.default:hover,
.btn.btn-default:hover,
.btn.btn-secondary:hover,
.btn-default:hover {
  background-color: var(--ios-gray-4) !important;
  border-color: transparent !important;
  color: #1c1c1e !important;
}

/* --- Outline variants: Metronic modifier is `.btn.green.btn-outline` (not
   Bootstrap .btn-outline-primary). ponytail: only green/blue/red/default are
   restyled — the only combos in app markup; add others when markup uses them. --- */
.btn.btn-outline {
  background-color: transparent !important;
  box-shadow: none !important;
  color: #1c1c1e !important; /* visible on pastel theme backgrounds */
}

.btn.green.btn-outline,
.btn.blue.btn-outline,
.btn.btn-outline.green,
.btn.btn-outline.blue,
.btn.btn-outline-primary {
  border-color: var(--ios-blue) !important;
  color: var(--ios-blue) !important;
}

.btn.green.btn-outline:hover,
.btn.blue.btn-outline:hover,
.btn.btn-outline.green:hover,
.btn.btn-outline.blue:hover,
.btn.btn-outline-primary:hover {
  background-color: rgba(var(--ios-blue-rgb), 0.1) !important;
  border-color: var(--ios-blue) !important;
  color: #0066d6 !important;
}

.btn.red.btn-outline,
.btn.red-mint.btn-outline,
.btn.btn-outline.red,
.btn.btn-outline.danger,
.btn.btn-outline-danger {
  border-color: #d70015 !important;
  color: #d70015 !important;
}

.btn.red.btn-outline:hover,
.btn.red-mint.btn-outline:hover,
.btn.btn-outline.red:hover,
.btn.btn-outline.danger:hover,
.btn.btn-outline-danger:hover {
  background-color: rgba(215, 0, 21, 0.08) !important;
  border-color: #d70015 !important;
  color: #d70015 !important;
}

.btn.default.btn-outline,
.btn.btn-outline.default,
.btn.btn-outline-default,
.btn.btn-outline-secondary {
  border-color: var(--ios-gray) !important;
  color: #1c1c1e !important;
}

.btn.default.btn-outline:hover,
.btn.btn-outline.default:hover,
.btn.btn-outline-default:hover,
.btn.btn-outline-secondary:hover {
  background-color: rgba(0, 0, 0, 0.05) !important;
  border-color: var(--ios-gray) !important;
  color: #1c1c1e !important;
}

/* --- Link-style button --- */
.btn-link,
.btn.btn-link {
  background-color: transparent !important;
  border-color: transparent !important;
  color: var(--ios-blue) !important;
  font-weight: 500 !important;
  box-shadow: none !important;
}

.btn-link:hover,
.btn.btn-link:hover {
  background-color: transparent !important;
  border-color: transparent !important;
  color: #0066d6 !important;
  text-decoration: underline !important;
}

@media (prefers-reduced-motion: reduce) {
  .btn {
    transition: none !important;
  }

  .btn:active:not(.disabled):not(:disabled) {
    transform: none !important;
  }
}

/* ==========================================================================
   Button-system gap closures (Metronic classes that bypassed .btn above)
   ========================================================================== */

/* SaaS settings save buttons: faithful hoist of the <style> block in
   saas_settings.php lines 125-136, !important so the page can drop its
   inline block. White on #0068D1 = 4.8:1, on #0055A8 = 6.3:1 (AA pass).
   Base .btn above still supplies the flex layout, transition, active scale
   and focus ring, so only the visual values are restated. */
.btn-saas {
  background: #0068d1 !important;
  border: 1px solid #0068d1 !important;
  color: #ffffff !important;
  min-height: 44px !important;
  min-width: 44px !important;
  padding: 10px 24px !important;
  border-radius: 8px !important;
  font-weight: 600 !important;
  font-size: 14px !important;
}

.btn-saas:hover,
.btn-saas:focus {
  background: #0055a8 !important;
  border-color: #0055a8 !important;
  color: #ffffff !important;
}

/* DataTables "Tools" menu rows (<a class="tool-action"> inside
   <ul class="dropdown-menu" id="sample_3_tools">). These are dropdown items,
   not portlet widgets, so they get the iOS menu-row treatment, not a chip. */
.dropdown-menu .tool-action {
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
  min-height: 36px !important;
  padding: 8px 16px !important;
  color: #1c1c1e !important; /* dark text on pastel theme backgrounds */
  font-size: 14px !important;
  font-weight: 500 !important;
  text-decoration: none !important;
  border-radius: var(--radius-xs) !important;
  transition: background-color 0.15s ease, color 0.15s ease !important;
}

.dropdown-menu .tool-action:hover,
.dropdown-menu .tool-action:focus {
  background-color: rgba(var(--ios-blue-rgb), 0.1) !important;
  color: #0066d6 !important;
}

.dropdown-menu .tool-action:focus-visible {
  outline: 2px solid rgba(var(--ios-blue-rgb), 0.75) !important;
  outline-offset: -2px !important;
}

.dropdown-menu .tool-action:active {
  transform: scale(0.97) !important;
}

/* Portlet Fullscreen Action Button */
.portlet > .portlet-title > .actions .btn-icon-only.fullscreen {
  font-family: FontAwesome !important;
  color: var(--ios-gray) !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 32px !important;
  height: 32px !important;
  min-width: 32px !important;
  min-height: 32px !important;
  padding: 0 !important;
  border-radius: var(--radius-full) !important;
  background-color: var(--ios-gray-6) !important;
  border: 1px solid rgba(0, 0, 0, 0.08) !important;
  transition: all 0.2s ease !important;
}

.portlet > .portlet-title > .actions .btn-icon-only.fullscreen:hover {
  background-color: rgba(var(--ios-blue-rgb), 0.1) !important;
  color: var(--ios-blue) !important;
  border-color: rgba(var(--ios-blue-rgb), 0.25) !important;
}

.portlet > .portlet-title > .actions .btn-icon-only.fullscreen::before {
  content: "\f065" !important;
  font-family: FontAwesome !important;
  font-size: 13px !important;
  line-height: 1 !important;
}

.portlet > .portlet-title > .actions .btn-icon-only.fullscreen.on::before {
  content: "\f066" !important;
  font-family: FontAwesome !important;
}

.portlet > .portlet-title > .tools > a.fullscreen {
  font-family: FontAwesome !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 32px !important;
  height: 32px !important;
  border-radius: var(--radius-full) !important;
  background-color: var(--ios-gray-6) !important;
  color: var(--ios-gray) !important;
  text-decoration: none !important;
}

.portlet > .portlet-title > .tools > a.fullscreen::before {
  content: "\f065" !important;
  font-family: FontAwesome !important;
  font-size: 13px !important;
}

.portlet > .portlet-title > .tools > a.fullscreen.on::before {
  content: "\f066" !important;
  font-family: FontAwesome !important;
}

/* Portlet widget handles (.portlet-title .tools > a collapse/config/reload/
   remove): Metronic ships 11-16px PNG sprites with no hit area, so they get
   the 32px brand chip. ponytail: bitmap PNGs cannot be tinted #0A84FF in CSS,
   so the glyph stays Metronic grey on the brand tint — upgrade path is
   swapping the sprites for FontAwesome glyphs in markup, then the
   background-image rules can go. Also note only banner1.php renders these
   non-empty; the other ~28 .tools containers in the app are empty. */
.portlet .tools > a {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 32px !important;
  height: 32px !important;
  margin-left: 4px !important;
  border: 1px solid rgba(var(--ios-blue-rgb), 0.22) !important;
  border-radius: var(--radius-full) !important;
  background-color: rgba(var(--ios-blue-rgb), 0.1) !important;
  background-position: center !important;
  background-repeat: no-repeat !important;
  opacity: 1 !important;
  filter: none !important;
  transition: background-color 0.15s ease, transform 0.12s ease !important;
}

.portlet .tools > a:hover {
  background-color: rgba(var(--ios-blue-rgb), 0.16) !important;
}

.portlet .tools > a:active {
  transform: scale(0.94) !important;
}

.portlet .tools > a:focus-visible {
  outline: 2px solid rgba(var(--ios-blue-rgb), 0.75) !important;
  outline-offset: 2px !important;
}

/* Login submit: the rest of .login-btn is already defined in the login
   section below and already exceeds the 48px / 14px target (52px pill).
   Only the pressed background was missing. White on #0066CC = 5.6:1. */
body.login .login-btn:active {
  background: #0066cc !important;
}

/* Report invoice buttons (.invoice-buttons in n_report.php / n_report2.php):
   same values as the .btn system above, kept as a separate block because
   these are not .btn elements. The split pill radii from bill_assets are
   preserved so the segmented Print|Download pair does not flatten.
   NOTE: both pages currently load bill_assets CSS only and do not include
   inc/inc_head.php, so this block is inert until they pull in this
   stylesheet — no page regresses today. */
.invoice-buttons .print_btn,
.invoice-buttons .download_btn {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 8px !important;
  min-height: 44px !important;
  padding: 10px 18px !important;
  border: 1.5px solid transparent !important;
  font-family: var(--ios-font) !important;
  font-size: 15px !important;
  font-weight: 600 !important;
  letter-spacing: -0.2px !important;
  color: #ffffff !important;
  background-color: var(--ios-blue) !important;
  cursor: pointer !important;
  transition: background-color 0.18s ease, box-shadow 0.18s ease,
    transform 0.15s ease !important;
}

.invoice-buttons .print_btn {
  border-radius: 99px 0 0 99px !important;
}

.invoice-buttons .download_btn {
  border-radius: 0 99px 99px 0 !important;
}

.invoice-buttons .print_btn:hover,
.invoice-buttons .download_btn:hover {
  background-color: #0066d6 !important;
  box-shadow: 0 4px 12px rgba(var(--ios-blue-rgb), 0.35) !important;
}

.invoice-buttons .print_btn:active,
.invoice-buttons .download_btn:active {
  transform: scale(0.97) !important;
}

.invoice-buttons .print_btn:focus-visible,
.invoice-buttons .download_btn:focus-visible {
  outline: 3px solid rgba(var(--ios-blue-rgb), 0.75) !important;
  outline-offset: 2px !important;
}

/* ==========================================================================
   Data Tables & Responsive Scrollable Wrappers (No Mobile Push / No Blowout)
   ========================================================================== */
.table-responsive,
.dataTables_wrapper,
.table-scrollable {
  width: 100% !important;
  max-width: 100% !important;
  overflow-x: auto !important;
  -webkit-overflow-scrolling: touch !important;
  border-radius: var(--radius-md) !important;
  border: 1px solid rgba(0, 0, 0, 0.05) !important;
  background: #ffffff !important;
  margin-bottom: 20px !important;
  /* Custom sleek scrollbar */
  scrollbar-width: thin;
  scrollbar-color: rgba(0, 0, 0, 0.2) transparent;
}

.table-responsive::-webkit-scrollbar,
.dataTables_wrapper::-webkit-scrollbar,
.table-scrollable::-webkit-scrollbar {
  height: 6px;
}

.table-responsive::-webkit-scrollbar-thumb,
.dataTables_wrapper::-webkit-scrollbar-thumb,
.table-scrollable::-webkit-scrollbar-thumb {
  background: rgba(0, 0, 0, 0.2);
  border-radius: 999px;
}

.table {
  width: 100% !important;
  margin-bottom: 0 !important;
  background-color: transparent !important;
  border-collapse: separate !important;
  border-spacing: 0 !important;
}

.table > thead > tr > th {
  background-color: var(--ios-gray-6) !important;
  color: #636366 !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  border-bottom: 1px solid rgba(0, 0, 0, 0.06) !important;
  padding: 10px 12px !important;
  white-space: nowrap;
}

.table > tbody > tr > td {
  padding: 10px 12px !important;
  font-size: 14px !important;
  line-height: 1.5;
  border-top: 1px solid rgba(0, 0, 0, 0.04) !important;
  vertical-align: middle !important;
}

.table-striped > tbody > tr:nth-of-type(odd) {
  background-color: rgba(0, 0, 0, 0.015) !important;
}

.table-hover > tbody > tr:hover {
  background-color: rgba(var(--ios-blue-rgb), 0.04) !important;
}

/* ==========================================================================
   iOS Badges & Status Pills
   ========================================================================== */
.label, .badge {
  border-radius: var(--radius-full) !important;
  font-size: 12px !important;
  font-weight: 600 !important;
  padding: 4px 10px !important;
  letter-spacing: 0.2px;
  display: inline-flex;
  align-items: center;
  gap: 4px;
}

.label-success, .badge-success {
  background-color: rgba(52, 199, 89, 0.15) !important;
  color: #248a3d !important;
}

.label-danger, .badge-danger {
  background-color: rgba(255, 59, 48, 0.15) !important;
  color: #d70015 !important;
}

.label-warning, .badge-warning {
  background-color: rgba(255, 149, 0, 0.15) !important;
  color: #c96f00 !important;
}

.label-info, .badge-info {
  background-color: rgba(0, 122, 255, 0.15) !important;
  color: #0056b3 !important;
}

/* ==========================================================================
   Sidebar Navigation (iOS Style)
   Beat Metronic darkblue !important via .page-sidebar-prefixed + !important.
   ========================================================================== */
.page-sidebar {
  background: rgba(255, 255, 255, 0.88) !important;
  backdrop-filter: blur(30px) saturate(190%) !important;
  -webkit-backdrop-filter: blur(30px) saturate(190%) !important;
  border-right: 1px solid rgba(0, 0, 0, 0.07) !important;
  box-shadow: 2px 0 16px rgba(0, 0, 0, 0.02) !important;
}

.page-sidebar .page-sidebar-menu {
  background: transparent !important;
  padding: 12px 6px 32px 6px !important;
}

.page-sidebar .page-sidebar-menu > li.sidebar-search-wrapper:empty {
  display: none !important;
  margin: 0 !important;
  padding: 0 !important;
}

/* Top-level menu link pill */
.page-sidebar .page-sidebar-menu > li > a {
  display: flex !important;
  align-items: center !important;
  position: relative !important;
  border-radius: 12px !important;
  margin: 3px 6px !important;
  padding: 8px 12px !important;
  min-height: 46px !important;
  color: #1c1c1e !important;
  font-weight: 550 !important;
  font-size: 14px !important;
  letter-spacing: -0.15px !important;
  background: transparent !important;
  border: 1px solid transparent !important;
  transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

/* Apple Squircle Icon Badges */
.page-sidebar .page-sidebar-menu > li > a > i {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 32px !important;
  height: 32px !important;
  min-width: 32px !important;
  border-radius: 9px !important;
  font-size: 15px !important;
  margin-right: 12px !important;
  background: rgba(142, 142, 147, 0.12) !important;
  color: #636366 !important;
  transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1) !important;
  flex-shrink: 0 !important;
}

/* Section-Specific Squircle Badges (Color Psychology) */
.page-sidebar .page-sidebar-menu > li.sidebar-menu-dashboard > a > i {
  background: linear-gradient(135deg, rgba(10, 132, 255, 0.16), rgba(10, 132, 255, 0.08)) !important;
  color: #0071e3 !important;
  box-shadow: inset 0 0 0 1px rgba(10, 132, 255, 0.18) !important;
}
.page-sidebar .page-sidebar-menu > li.sidebar-menu-timesheet > a > i {
  background: linear-gradient(135deg, rgba(52, 199, 89, 0.18), rgba(52, 199, 89, 0.08)) !important;
  color: #248a3d !important;
  box-shadow: inset 0 0 0 1px rgba(52, 199, 89, 0.20) !important;
}
.page-sidebar .page-sidebar-menu > li.sidebar-menu-report > a > i {
  background: linear-gradient(135deg, rgba(88, 86, 214, 0.18), rgba(88, 86, 214, 0.08)) !important;
  color: #5856d6 !important;
  box-shadow: inset 0 0 0 1px rgba(88, 86, 214, 0.20) !important;
}
.page-sidebar .page-sidebar-menu > li.sidebar-menu-maindata > a > i {
  background: linear-gradient(135deg, rgba(255, 149, 0, 0.18), rgba(255, 149, 0, 0.08)) !important;
  color: #d97706 !important;
  box-shadow: inset 0 0 0 1px rgba(255, 149, 0, 0.20) !important;
}

/* Hover state: subtle translucent pill + slight nudge */
.page-sidebar .page-sidebar-menu > li > a:hover {
  background: rgba(0, 0, 0, 0.04) !important;
  color: #000000 !important;
  transform: translateX(2px) !important;
}
.page-sidebar .page-sidebar-menu > li > a:hover > i {
  transform: scale(1.06) !important;
}

/* Active / Open Top-Level Navigation Pills */
.page-sidebar .page-sidebar-menu > li.active > a,
.page-sidebar .page-sidebar-menu > li.open > a {
  font-weight: 600 !important;
  box-shadow: none !important;
}

.page-sidebar .page-sidebar-menu > li.sidebar-menu-dashboard.active > a,
.page-sidebar .page-sidebar-menu > li.sidebar-menu-dashboard.open > a {
  background: rgba(10, 132, 255, 0.10) !important;
  color: #0066cc !important;
  border-color: rgba(10, 132, 255, 0.20) !important;
}
.page-sidebar .page-sidebar-menu > li.sidebar-menu-dashboard.active > a > i,
.page-sidebar .page-sidebar-menu > li.sidebar-menu-dashboard.open > a > i {
  background: #0071e3 !important;
  color: #ffffff !important;
  box-shadow: 0 2px 8px rgba(0, 113, 227, 0.35) !important;
}

.page-sidebar .page-sidebar-menu > li.sidebar-menu-timesheet.active > a,
.page-sidebar .page-sidebar-menu > li.sidebar-menu-timesheet.open > a {
  background: rgba(52, 199, 89, 0.10) !important;
  color: #1e7834 !important;
  border-color: rgba(52, 199, 89, 0.22) !important;
}
.page-sidebar .page-sidebar-menu > li.sidebar-menu-timesheet.active > a > i,
.page-sidebar .page-sidebar-menu > li.sidebar-menu-timesheet.open > a > i {
  background: #34c759 !important;
  color: #ffffff !important;
  box-shadow: 0 2px 8px rgba(52, 199, 89, 0.35) !important;
}

.page-sidebar .page-sidebar-menu > li.sidebar-menu-report.active > a,
.page-sidebar .page-sidebar-menu > li.sidebar-menu-report.open > a {
  background: rgba(88, 86, 214, 0.10) !important;
  color: #5856d6 !important;
  border-color: rgba(88, 86, 214, 0.22) !important;
}
.page-sidebar .page-sidebar-menu > li.sidebar-menu-report.active > a > i,
.page-sidebar .page-sidebar-menu > li.sidebar-menu-report.open > a > i {
  background: #5856d6 !important;
  color: #ffffff !important;
  box-shadow: 0 2px 8px rgba(88, 86, 214, 0.35) !important;
}

.page-sidebar .page-sidebar-menu > li.sidebar-menu-maindata.active > a,
.page-sidebar .page-sidebar-menu > li.sidebar-menu-maindata.open > a {
  background: rgba(255, 149, 0, 0.10) !important;
  color: #c96f00 !important;
  border-color: rgba(255, 149, 0, 0.22) !important;
}
.page-sidebar .page-sidebar-menu > li.sidebar-menu-maindata.active > a > i,
.page-sidebar .page-sidebar-menu > li.sidebar-menu-maindata.open > a > i {
  background: #ff9500 !important;
  color: #ffffff !important;
  box-shadow: 0 2px 8px rgba(255, 149, 0, 0.35) !important;
}

/* Kill legacy Metronic white FA arrow on active */
.page-sidebar .page-sidebar-menu > li > a > .selected {
  border: none !important;
  display: none !important;
}

/* Apple Minimal Hairline Chevron Arrow */
.page-sidebar .page-sidebar-menu > li > a > .arrow::before {
  content: none !important;
}

.page-sidebar .page-sidebar-menu > li > a > .arrow {
  position: absolute !important;
  right: 14px !important;
  top: 50% !important;
  width: 6px !important;
  height: 6px !important;
  margin-top: -4px !important;
  border: none !important;
  border-right: 2px solid #8e8e93 !important;
  border-bottom: 2px solid #8e8e93 !important;
  transform: rotate(-45deg) !important;
  transition: transform 0.22s cubic-bezier(0.16, 1, 0.3, 1), border-color 0.2s ease !important;
  color: transparent !important;
  opacity: 0.65 !important;
}

.page-sidebar .page-sidebar-menu > li.open > a > .arrow,
.page-sidebar .page-sidebar-menu > li.active > a > .arrow {
  transform: rotate(45deg) !important;
  margin-top: -5px !important;
  opacity: 1 !important;
}
.page-sidebar .page-sidebar-menu > li.sidebar-menu-timesheet.open > a > .arrow { border-color: #248a3d !important; }
.page-sidebar .page-sidebar-menu > li.sidebar-menu-report.open > a > .arrow { border-color: #5856d6 !important; }
.page-sidebar .page-sidebar-menu > li.sidebar-menu-maindata.open > a > .arrow { border-color: #d97706 !important; }

/* Sub-menu: Apple Inset Translucent Panel with Tree Guide Line */
.page-sidebar .page-sidebar-menu > li .sub-menu {
  background: rgba(255, 255, 255, 0.52) !important;
  backdrop-filter: blur(12px) !important;
  -webkit-backdrop-filter: blur(12px) !important;
  border-radius: 12px !important;
  margin: 4px 6px 10px 14px !important;
  padding: 6px 4px 6px 10px !important;
  border-left: 2px solid rgba(0, 0, 0, 0.06) !important;
  box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.02) !important;
}

.page-sidebar .page-sidebar-menu .sub-menu > li > a {
  position: relative !important;
  display: flex !important;
  align-items: center !important;
  border-radius: 8px !important;
  margin: 2px 2px !important;
  padding: 8px 12px 8px 10px !important;
  min-height: 38px !important;
  font-size: 13.5px !important;
  font-weight: 500 !important;
  color: #48484a !important;
  background: transparent !important;
  transition: all 0.16s ease !important;
}

/* Subtle hierarchy indicator dot for child items */
.page-sidebar .page-sidebar-menu .sub-menu > li:not(.nav-toggle) > a::before {
  content: "" !important;
  display: inline-block !important;
  width: 5px !important;
  height: 5px !important;
  border-radius: 50% !important;
  background: #c7c7cc !important;
  margin-right: 10px !important;
  flex-shrink: 0 !important;
  transition: all 0.16s ease !important;
}

.page-sidebar .page-sidebar-menu .sub-menu > li > a:has(i)::before {
  display: none !important;
}

.page-sidebar .page-sidebar-menu .sub-menu > li > a i {
  margin-right: 8px !important;
  font-size: 14px !important;
  width: 18px !important;
  text-align: center !important;
  flex-shrink: 0 !important;
}

.page-sidebar .page-sidebar-menu .sub-menu > li > a:hover {
  background: rgba(0, 0, 0, 0.04) !important;
  color: #1c1c1e !important;
  transform: translateX(2px) !important;
}
.page-sidebar .page-sidebar-menu .sub-menu > li > a:hover::before {
  background: #8e8e93 !important;
  transform: scale(1.3) !important;
}

/* Active child item */
.page-sidebar .page-sidebar-menu .sub-menu > li.active > a,
.page-sidebar .page-sidebar-menu .sub-menu > li.open > a {
  background: rgba(10, 132, 255, 0.12) !important;
  color: #0071e3 !important;
  font-weight: 600 !important;
}
.page-sidebar .page-sidebar-menu .sub-menu > li.active > a::before {
  background: #0071e3 !important;
  box-shadow: 0 0 6px rgba(10, 132, 255, 0.6) !important;
  transform: scale(1.4) !important;
}
.page-sidebar .page-sidebar-menu .sub-menu > li.active > a i {
  color: #0071e3 !important;
}

/* Sub-menu chevron */
.page-sidebar .page-sidebar-menu .sub-menu > li > a .arrow::before {
  content: none !important;
}
.page-sidebar .page-sidebar-menu .sub-menu > li > a > .arrow {
  position: absolute !important;
  right: 12px !important;
  top: 50% !important;
  width: 5px !important;
  height: 5px !important;
  margin-top: -3px !important;
  border: none !important;
  border-right: 1.5px solid #8e8e93 !important;
  border-bottom: 1.5px solid #8e8e93 !important;
  transform: rotate(-45deg) !important;
  opacity: 0.6 !important;
}
.page-sidebar .page-sidebar-menu .sub-menu > li.open > a > .arrow {
  transform: rotate(45deg) !important;
  border-color: #0071e3 !important;
  opacity: 1 !important;
}

/* Nested sub-menus (FARM > Corporate / Project / Workcode) */
.page-sidebar .page-sidebar-menu .sub-menu .sub-menu {
  background: rgba(255, 255, 255, 0.70) !important;
  margin: 3px 0 6px 10px !important;
  padding: 4px 2px 4px 6px !important;
  border-left: 1.5px solid rgba(0, 0, 0, 0.08) !important;
  border-radius: 8px !important;
}
.page-sidebar .page-sidebar-menu .sub-menu .sub-menu > li > a {
  padding-left: 10px !important;
  font-size: 13px !important;
}

/* Polish special items with inline borders (Manual, AI Settings, SaaS Config) */
.page-sidebar .page-sidebar-menu .sub-menu > li[style*="border-left"] {
  border-left: none !important;
  border-radius: 8px !important;
  margin: 3px 2px !important;
  background: rgba(0, 0, 0, 0.02) !important;
}
.page-sidebar .page-sidebar-menu .sub-menu > li[style*="border-left"]:hover {
  background: rgba(0, 0, 0, 0.05) !important;
}

/* --- Desktop ≥992: force active/open submenu open (beats jQuery inline display:none) --- */
@media screen and (min-width: 992px) {
  .page-sidebar .page-sidebar-menu > li.active > .sub-menu,
  .page-sidebar .page-sidebar-menu > li.open > .sub-menu,
  .page-sidebar .page-sidebar-menu .sub-menu > li.active > .sub-menu,
  .page-sidebar .page-sidebar-menu .sub-menu > li.open > .sub-menu,
  .page-sidebar .page-sidebar-menu li.active > .sub-menu,
  .page-sidebar .page-sidebar-menu li.open > .sub-menu {
    display: block !important;
    height: auto !important;
    max-height: none !important;
    overflow: visible !important;
  }
}

/* Mobile drawer: keep light iOS panel & add smooth Apple bottom sheet feel */
@media screen and (max-width: 991px) {
  .page-sidebar,
  .page-sidebar.navbar-collapse,
  .page-sidebar .page-sidebar-menu {
    background: rgba(255, 255, 255, 0.95) !important;
    backdrop-filter: blur(30px) saturate(190%) !important;
    -webkit-backdrop-filter: blur(30px) saturate(190%) !important;
  }

  .page-sidebar.navbar-collapse {
    border-radius: 0 0 var(--radius-lg) var(--radius-lg) !important;
    box-shadow: 0 12px 32px rgba(0, 0, 0, 0.12) !important;
    border-bottom: 1px solid rgba(0, 0, 0, 0.08) !important;
    max-height: 80vh !important;
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch !important;
    padding-bottom: calc(16px + env(safe-area-inset-bottom, 16px)) !important;
  }

  .page-sidebar .page-sidebar-menu > li > a {
    min-height: 48px !important;
    padding: 10px 14px !important;
  }

  .page-sidebar .page-sidebar-menu .sub-menu > li > a {
    min-height: 44px !important;
    padding: 10px 14px !important;
  }

  .page-sidebar .page-sidebar-menu > li.active > .sub-menu,
  .page-sidebar .page-sidebar-menu > li.open > .sub-menu {
    display: block !important;
  }
}

/* ==========================================================================
   Login Screen (index.php) — iOS 26 Liquid Glass
   ========================================================================== */
body.login {
  /* Same calm trust-blue wash as the frosted app header + dashboard psychology,
     so login and app read as one continuous surface. Light base keeps the dark
     wordmark in logo.svg legible (it was invisible on the old navy shell). */
  background:
    radial-gradient(1100px 650px at 12% -8%, rgba(10, 132, 255, 0.18), transparent 55%),
    radial-gradient(900px 560px at 100% 0%, rgba(94, 92, 230, 0.13), transparent 50%),
    linear-gradient(165deg, #f5f5f9 0%, #eceff6 45%, #e5e9f2 100%) !important;
  min-height: 100vh;
  min-height: 100dvh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: max(28px, env(safe-area-inset-top)) 16px max(28px, env(safe-area-inset-bottom)) !important;
  color: #1c1c1e;
}

body.login .login-shell {
  width: 100%;
  max-width: 420px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 18px;
  min-width: 0;
}

body.login .login-brand {
  text-align: center;
  line-height: 0;
}

body.login .login-logo {
  width: min(180px, 70vw);
  height: auto;
  filter: drop-shadow(0 2px 8px rgba(10, 50, 120, 0.12));
}

body.login .login-card {
  width: 100%;
  background: rgba(255, 255, 255, 0.72);
  backdrop-filter: blur(40px) saturate(180%);
  -webkit-backdrop-filter: blur(40px) saturate(180%);
  border-radius: 28px;
  border: 1px solid var(--ios-hairline);
  box-shadow:
    0 24px 60px rgba(30, 50, 100, 0.14),
    0 2px 8px rgba(30, 50, 100, 0.06),
    inset 0 1px 0 rgba(255, 255, 255, 0.55);
  padding: 0 24px 32px;
  min-width: 0;
  overflow: hidden;
}

body.login .login-card.no-hero,
body.login .login-card:not(:has(.login-hero)) {
  padding-top: 32px;
}

body.login .login-hero {
  margin: 0 -24px 20px;
  border-radius: 0 0 var(--radius-lg) var(--radius-lg);
  overflow: hidden;
}

body.login .login-hero-img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 1200 / 260;
  object-fit: cover;
}

body.login .login-title {
  font-family: var(--ios-font);
  font-size: clamp(26px, 7vw, 32px);
  font-weight: 700;
  letter-spacing: -0.5px;
  line-height: 1.15;
  text-align: center;
  color: #1c1c1e;
  margin: 0 0 6px;
}

body.login .login-subtitle {
  text-align: center;
  color: #48484a;
  font-size: 14px;
  font-weight: 500;
  margin: 0 0 22px;
  overflow-wrap: break-word;
}

body.login .login-form {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

body.login .login-field {
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-width: 0;
}

body.login .login-label {
  font-size: 13px;
  font-weight: 600;
  color: #3a3a3c;
  letter-spacing: 0.1px;
  padding-left: 4px;
}

body.login .login-input-wrap {
  position: relative;
  display: flex;
  align-items: center;
  min-width: 0;
}

body.login .login-input-icon {
  position: absolute;
  left: 16px;
  color: #8e8e93;
  font-size: 15px;
  pointer-events: none;
  z-index: 1;
}

body.login .login-input {
  width: 100%;
  min-height: 52px !important;
  padding: 12px 16px 12px 46px !important;
  border-radius: 16px !important;
  border: 1.5px solid rgba(0, 0, 0, 0.08) !important;
  background: rgba(255, 255, 255, 0.9) !important;
  color: #1c1c1e !important;
  font-family: var(--ios-font);
  font-size: 16px !important;
  font-weight: 500;
  transition: border-color 0.2s ease, box-shadow 0.2s ease, background 0.2s ease;
  min-width: 0;
  max-width: 100%;
  outline: none !important;
}

body.login .login-input::placeholder {
  color: #636366;
  font-weight: 400;
  opacity: 1;
}

body.login .login-input:focus {
  border-color: #0a84ff !important;
  box-shadow: 0 0 0 4px rgba(10, 132, 255, 0.22) !important;
  background: #ffffff !important;
}

body.login .cf-turnstile {
  min-height: 65px;
  display: flex;
  justify-content: center;
  margin: 2px 0;
}

body.login .login-alert {
  border-radius: 14px;
  padding: 12px 14px;
  font-size: 14px;
  font-weight: 500;
  line-height: 1.4;
  background: rgba(255, 59, 48, 0.12);
  color: #8c1d18;
  border: 1px solid rgba(255, 59, 48, 0.2);
  overflow-wrap: break-word;
  min-width: 0;
}

body.login .login-alert:empty {
  display: none;
}

body.login .login-btn {
  width: 100%;
  min-height: 52px;
  border: none;
  border-radius: var(--radius-full);
  background: #0071e3;
  color: #ffffff;
  font-family: var(--ios-font);
  font-size: 19px;
  font-weight: 700;
  letter-spacing: 0.2px;
  cursor: pointer;
  box-shadow:
    0 8px 20px rgba(10, 132, 255, 0.35),
    inset 0 1px 0 rgba(255, 255, 255, 0.25);
  transition: transform 0.15s ease, box-shadow 0.15s ease, filter 0.15s ease;
  margin-top: 6px;
}

body.login .login-btn:hover {
  filter: brightness(1.05);
  box-shadow:
    0 10px 24px rgba(10, 132, 255, 0.42),
    inset 0 1px 0 rgba(255, 255, 255, 0.25);
}

body.login .login-btn:active {
  transform: scale(0.97);
}

body.login .login-btn:focus-visible {
  outline: 3px solid rgba(10, 132, 255, 0.5);
  outline-offset: 3px;
}

body.login .login-register-wrap {
  margin-top: 20px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  width: 100%;
}

body.login .login-divider {
  display: flex;
  align-items: center;
  width: 100%;
  color: #8e8e93;
  font-size: 13px;
  font-weight: 500;
  gap: 12px;
}

body.login .login-divider::before,
body.login .login-divider::after {
  content: "";
  flex: 1;
  height: 1px;
  background: rgba(60, 60, 67, 0.15);
}

body.login .login-regis-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 100%;
  min-height: 48px;
  border-radius: var(--radius-full);
  background: rgba(0, 113, 227, 0.08);
  color: #0071e3;
  font-family: var(--ios-font);
  font-size: 16px;
  font-weight: 600;
  text-decoration: none;
  border: 1px solid rgba(0, 113, 227, 0.25);
  transition: transform 0.15s ease, background 0.15s ease, color 0.15s ease, box-shadow 0.15s ease;
  box-sizing: border-box;
  padding: 10px 16px;
}

body.login .login-regis-btn:hover {
  background: rgba(0, 113, 227, 0.14);
  color: #0077ed;
  text-decoration: none;
  box-shadow: 0 4px 12px rgba(0, 113, 227, 0.15);
}

body.login .login-regis-btn:active {
  transform: scale(0.98);
}

body.login .login-regis-btn:focus-visible {
  outline: 3px solid rgba(10, 132, 255, 0.5);
  outline-offset: 3px;
}

body.login .login-footer {
  color: #636366;
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.2px;
  text-align: center;
}

/* Login is pinned to the light frosted theme to match the app header — no
   dark-mode override, so the dark wordmark in logo.svg stays legible. */

/* Dark-mode counterparts for the gap closures above. The login block above
   is scoped, so these cover the portlet chip, the Tools menu rows, the SaaS
   save buttons and the invoice buttons on dark UI. White on #0A84FF stays
   4.57:1 in dark mode; #1c1c1e text becomes #f5f5f7 to keep menu rows legible. */
@media (prefers-color-scheme: dark) {
  .portlet .tools > a {
    background-color: rgba(var(--ios-blue-rgb), 0.16) !important;
    border-color: rgba(var(--ios-blue-rgb), 0.34) !important;
  }

  .portlet .tools > a:hover {
    background-color: rgba(var(--ios-blue-rgb), 0.24) !important;
  }

  .dropdown-menu .tool-action {
    color: #f5f5f7 !important;
  }

  .dropdown-menu .tool-action:hover,
  .dropdown-menu .tool-action:focus {
    color: #8ab9ff !important;
  }

  .btn-saas,
  .invoice-buttons .print_btn,
  .invoice-buttons .download_btn {
    color: #ffffff !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  body.login .login-btn,
  body.login .login-input {
    transition: none;
  }

  body.login .login-btn:active {
    transform: none;
  }

  .btn-saas,
  .dropdown-menu .tool-action,
  .portlet .tools > a,
  .invoice-buttons .print_btn,
  .invoice-buttons .download_btn {
    transition: none !important;
  }

  .dropdown-menu .tool-action:active,
  .portlet .tools > a:active,
  .invoice-buttons .print_btn:active,
  .invoice-buttons .download_btn:active {
    transform: none !important;
  }
}

@media screen and (max-width: 380px) {
  body.login .login-card {
    padding: 0 18px 26px;
    border-radius: 22px;
  }

  body.login .login-hero {
    margin: 0 -18px 16px;
  }

  body.login .login-shell {
    gap: 14px;
  }
}

/* ==========================================================================
   Mobile Responsive Rules (iPhone 17 Pro Max / All Mobile Screens)
   ========================================================================== */
@media screen and (max-width: 991px) {
  /* Metronic zeroes .page-container's margin here (layout.css:747) and only
     restores it for .page-header-fixed-mobile, a class no page in this app
     sets — so our 56px header overlapped the top of the content. Header is
     in normal flow at this breakpoint (Metronic sets position:relative), so
     the offset is 0 and the container just needs an opaque light backing:
     darkblue paints .page-container #364150, which read as black through
     our 52% frost and around short pages. */
  .page-container {
    margin: 0 !important;
    background-color: var(--ios-bg-system) !important;
  }

  /* Frosted glass header on mobile: darkblue #364150 shows through at low opacity.
     Semi-transparent white + blur keeps the iOS glass feel while hiding the dark base. */
  .page-header.navbar {
    background-color: rgba(255, 255, 255, 0.55) !important;
    backdrop-filter: blur(30px) saturate(150%) !important;
    -webkit-backdrop-filter: blur(30px) saturate(150%) !important;
    padding: 0 12px !important;
  }

  /* iPhone header: keep logo + bell + profile + logout on ONE 56px row.
     Metronic drops .top-menu to a full-width block at ≤480px (layout.css:680),
     which pushed the controls to a second line our fixed 56px bar clips. */
  .page-header.navbar .page-header-inner {
    display: flex !important;
    align-items: center !important;
    height: 56px !important;
    width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
  }

  /* Mobile Hamburger Drawer Toggler — high contrast iOS glass button on far left */
  .page-header.navbar .menu-toggler.responsive-toggler {
    order: -1 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 40px !important;
    height: 40px !important;
    flex: 0 0 40px !important;
    margin: 0 8px 0 0 !important;
    padding: 0 !important;
    background: rgba(120, 120, 128, 0.08) !important;
    border-radius: var(--radius-md) !important;
    border: 1px solid rgba(0, 0, 0, 0.06) !important;
    cursor: pointer !important;
    opacity: 1 !important;
    transition: background 0.2s ease, transform 0.15s ease !important;
  }

  .page-header.navbar .menu-toggler.responsive-toggler:active {
    transform: scale(0.92) !important;
    background: rgba(120, 120, 128, 0.18) !important;
  }

  /* Override Metronic's 1px pale lines to bold, dark 2px iOS hamburger bars */
  .page-header.navbar .menu-toggler.responsive-toggler > span,
  .page-header.navbar .menu-toggler.responsive-toggler > span:before,
  .page-header.navbar .menu-toggler.responsive-toggler > span:after {
    display: block !important;
    width: 18px !important;
    height: 2px !important;
    background: #1c1c1e !important;
    border-radius: 2px !important;
    opacity: 1 !important;
    position: relative !important;
    top: 0 !important;
    transition: all 0.25s ease !important;
  }

  .page-header.navbar .menu-toggler.responsive-toggler > span:before,
  .page-header.navbar .menu-toggler.responsive-toggler > span:after {
    content: '' !important;
    position: absolute !important;
    left: 0 !important;
  }

  .page-header.navbar .menu-toggler.responsive-toggler > span:before {
    top: -5px !important;
  }

  .page-header.navbar .menu-toggler.responsive-toggler > span:after {
    top: 5px !important;
  }

  .page-header.navbar .page-logo {
    display: flex !important;
    align-items: center !important;
    height: 56px !important;
    width: auto !important;
    flex: 0 1 auto !important;
    min-width: 0 !important;
    padding: 0 !important;
    margin: 0 !important;
    overflow: hidden !important;
  }

  .page-header.navbar .page-logo a {
    display: flex !important;
    align-items: center !important;
    height: 100% !important;
    min-width: 0 !important;
  }

  .page-header.navbar .page-logo .logo-default {
    max-width: 130px !important;
    height: auto !important;
    max-height: 28px !important;
    margin: 0 !important;
    object-fit: contain !important;
  }

  .page-header.navbar .top-menu {
    display: flex !important;
    align-items: center !important;
    float: none !important;
    clear: none !important;
    margin: 0 0 0 auto !important;
    padding: 0 !important;
    height: 56px !important;
    flex: 0 0 auto !important;
  }

  .page-header.navbar .top-menu .navbar-nav {
    display: flex !important;
    align-items: center !important;
    float: none !important;
    margin: 0 !important;
    padding: 0 !important;
    height: 56px !important;
  }

  .page-header.navbar .top-menu .navbar-nav > li.dropdown {
    margin: 0 !important;
    padding: 0 !important;
  }

  .page-header.navbar .top-menu .navbar-nav > li.dropdown .dropdown-toggle {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    height: 40px !important;
    min-width: 40px !important;
    margin: 0 2px !important;
    padding: 0 6px !important;
    border-radius: var(--radius-md) !important;
    background: transparent !important;
  }

  /* User profile: Clean avatar icon only on mobile (name & badge inside dropdown) */
  .page-header.navbar .top-menu .navbar-nav > li.dropdown-user .dropdown-toggle {
    padding: 0 4px !important;
  }

  .page-header.navbar .top-menu .navbar-nav > li.dropdown-user .dropdown-toggle .username,
  .page-header.navbar .top-menu .navbar-nav > li.dropdown-user .dropdown-toggle .label,
  .page-header.navbar .top-menu .navbar-nav > li.dropdown-user .dropdown-toggle .fa-angle-down {
    display: none !important;
  }

  .page-header.navbar .top-menu .navbar-nav > li.dropdown-user .dropdown-toggle img {
    margin: 0 !important;
    width: 32px !important;
    height: 32px !important;
  }

  /* Bell notification badge alignment */
  .page-header.navbar .top-menu .navbar-nav > li.dropdown-notification .dropdown-toggle {
    position: relative !important;
  }

  .page-header.navbar .top-menu .navbar-nav > li.dropdown-notification .dropdown-toggle .badge.ios-bell-badge {
    top: 2px !important;
    right: 2px !important;
  }

  /* Logout becomes a real 40px touch target on phones. */
  .ios-quick-logout {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 40px !important;
    height: 40px !important;
    margin: 0 0 0 2px !important;
    border-radius: var(--radius-md) !important;
  }

  /* Override darkblue theme's dark #364150 top-menu on mobile.
     iOS theme is light; force white background so blur shows through. */
  .page-header.navbar .top-menu {
    background-color: rgba(255, 255, 255, 0.4) !important;
  }

  /* iOS-style press state for all header controls. */
  .page-header.navbar .top-menu .navbar-nav > li.dropdown .dropdown-toggle:active,
  .ios-quick-logout:active {
    transform: scale(0.92) !important;
    background-color: rgba(120, 120, 128, 0.16) !important;
  }

  /* Tighten for very narrow screens (≤360px, e.g. iPhone SE 1st gen / 320px) */
  @media screen and (max-width: 360px) {
    .page-header.navbar {
      padding: 0 6px !important;
    }
    .page-header.navbar .menu-toggler.responsive-toggler {
      width: 36px !important;
      height: 36px !important;
      flex: 0 0 36px !important;
      margin-right: 4px !important;
    }
    .page-header.navbar .page-logo .logo-default {
      max-width: 105px !important;
      max-height: 24px !important;
    }
    .page-header.navbar .top-menu .navbar-nav > li.dropdown .dropdown-toggle,
    .ios-quick-logout {
      width: 36px !important;
      height: 36px !important;
      min-width: 36px !important;
      margin: 0 1px !important;
      padding: 0 2px !important;
    }
  }

  .page-sidebar.navbar-collapse {
    border-radius: 0 0 var(--radius-lg) var(--radius-lg);
    box-shadow: var(--shadow-float);
    margin: 0 !important;
  }

  .page-content {
    padding: 16px 16px 30px !important; /* consistent 16 L/R mobile gutters */
  }

  .page-bar,
  .page-content-white .page-bar,
  .page-container-bg-solid .page-bar {
    margin: 0 0 14px 0 !important;
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
  }

  .portlet > .portlet-body {
    padding: 16px 16px !important;
  }

  .row {
    margin-left: -8px !important;
    margin-right: -8px !important;
  }

  .col-lg-1, .col-lg-2, .col-lg-3, .col-lg-4, .col-lg-5, .col-lg-6,
  .col-lg-7, .col-lg-8, .col-lg-9, .col-lg-10, .col-lg-11, .col-lg-12,
  .col-md-1, .col-md-2, .col-md-3, .col-md-4, .col-md-5, .col-md-6,
  .col-md-7, .col-md-8, .col-md-9, .col-md-10, .col-md-11, .col-md-12,
  .col-sm-1, .col-sm-2, .col-sm-3, .col-sm-4, .col-sm-5, .col-sm-6,
  .col-sm-7, .col-sm-8, .col-sm-9, .col-sm-10, .col-sm-11, .col-sm-12,
  .col-xs-1, .col-xs-2, .col-xs-3, .col-xs-4, .col-xs-5, .col-xs-6,
  .col-xs-7, .col-xs-8, .col-xs-9, .col-xs-10, .col-xs-11, .col-xs-12 {
    padding-left: 8px !important;
    padding-right: 8px !important;
  }
}

/* Touch target accessibility — real controls only (bare `a` was breaking
   inline text links / breadcrumb wraps) */
@media screen and (max-width: 768px) {
  .btn,
  button,
  input[type="submit"],
  input[type="button"],
  input[type="reset"],
  select,
  textarea,
  input:not([type="checkbox"]):not([type="radio"]),
  .nav-link,
  .page-sidebar-menu .nav-link {
    min-height: 44px;
  }
}

/* Small phones 320–375 — tighter gutters, still comfortable */
@media screen and (max-width: 375px) {
  .page-content {
    padding: 12px 12px 24px !important;
  }

  .page-title,
  h1.page-title {
    font-size: 20px !important;
  }

  .portlet > .portlet-body {
    padding: 14px 12px !important;
  }

  .btn {
    padding: 10px 14px !important;
    font-size: 14px !important;
  }

  .btn-xs,
  .btn-sm {
    padding: 6px 10px !important;
  }
}

/* Tablet 768–991 — breathing room */
@media screen and (min-width: 768px) and (max-width: 991px) {
  .page-content {
    padding: 20px 20px 36px !important;
  }

  .portlet > .portlet-body {
    padding: 16px 20px !important;
  }

  .table > tbody > tr > td,
  .table > tbody > tr > th {
    padding: 10px 14px !important;
  }
}

/* Desktop ≥992 — polished spacing, buttons stay ≥40px (base 44 / lg 50) */
@media screen and (min-width: 992px) {
  .page-content {
    padding: 28px 24px 52px !important; /* 24 L/R desktop gutters */
  }

  .portlet > .portlet-body {
    padding: 20px 24px !important;
  }

  .page-title,
  h1.page-title {
    font-size: 28px !important;
    line-height: 1.3;
  }

  h1 { font-size: 28px; }
  h2 { font-size: 24px; }
  h3 { font-size: 20px; }
}

/* ==========================================================================
   Header Logo (login-style logo.svg), Footer & Elevation Polish
   ========================================================================== */

/* Stronger elevation system (iOS-style layered shadows) */
:root {
  --shadow-subtle: 0 1px 2px rgba(0, 0, 0, 0.06), 0 4px 12px rgba(0, 0, 0, 0.05);
  --shadow-card: 0 1px 2px rgba(0, 0, 0, 0.06), 0 8px 24px rgba(0, 0, 0, 0.08);
  --shadow-float: 0 2px 6px rgba(0, 0, 0, 0.08), 0 16px 40px rgba(0, 0, 0, 0.14);
}

/* Wide SVG logo (460×96) — match Metronic sidebar/logo column 235px */
.page-header.navbar .page-logo {
  width: 235px !important;
}
.page-header.navbar .page-logo .logo-default {
  height: 44px !important;
  width: auto !important;
  max-width: 235px !important;
  margin: 0 !important;
  object-fit: contain;
}
/* Desktop: hide leftover Metronic hamburger (mobile keeps responsive-toggler) */
@media (min-width: 992px) {
  .menu-toggler.sidebar-toggler {
    display: none !important;
  }
}

/* Footer: small muted text, comfortable contrast on white */
.page-footer {
  background: #fff !important;
  border-top: 1px solid rgba(0, 0, 0, 0.08) !important;
  box-shadow: 0 -1px 2px rgba(0, 0, 0, 0.04) !important;
  min-height: 44px;
}

.page-footer .page-footer-inner {
  color: #5f6368; /* ~5.9:1 on #fff */
  font-size: 12.5px;
  line-height: 1.6;
  padding: 10px 0;
  overflow-wrap: break-word;
}

@media screen and (max-width: 768px) {
  .page-footer .page-footer-inner {
    font-size: 12px;
    text-align: center;
  }
}

/* ==========================================================================
   iOS Header Notifications, User Profile & Quick Logout Dropdown
   ========================================================================== */
/* Bell anchor must be a positioning context, or the absolute badge floats
   off the bell and collides with the logout button next to it. */
#header_notification_bar .dropdown-toggle {
  position: relative !important;
}

.ios-bell-badge {
  position: absolute !important;
  top: 6px !important;
  right: 4px !important;
  padding: 3px 6px !important;
  font-size: 10.5px !important;
  font-weight: 700 !important;
  line-height: 1 !important;
  border-radius: 999px !important;
  background-color: var(--ios-red) !important;
  color: #ffffff !important;
  box-shadow: 0 2px 6px rgba(255, 59, 48, 0.4) !important;
  border: 1.5px solid #ffffff !important;
}

.ios-avatar-squircle {
  width: 32px !important;
  height: 32px !important;
  border-radius: 10px !important;
  object-fit: cover !important;
  margin-right: 6px !important;
  border: 1px solid rgba(0, 0, 0, 0.08) !important;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08) !important;
}

.ios-quick-logout {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 38px !important;
  height: 38px !important;
  padding: 0 !important;
  margin: 6px 4px !important;
  border-radius: 10px !important;
  background: rgba(215, 0, 21, 0.06) !important;
  border: 1px solid rgba(215, 0, 21, 0.15) !important;
  transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1) !important;
  text-decoration: none !important;
}

.ios-quick-logout i,
.ios-quick-logout i.fa,
.ios-quick-logout i.fa-power-off {
  font-family: FontAwesome !important;
  font-style: normal !important;
  font-weight: normal !important;
  font-size: 16px !important;
  line-height: 1 !important;
  color: #d70015 !important;
  display: inline-block !important;
}

.ios-quick-logout i.fa-power-off:before {
  content: "\f011" !important;
  font-family: FontAwesome !important;
}

.ios-quick-logout:hover {
  background: rgba(215, 0, 21, 0.14) !important;
  border-color: rgba(215, 0, 21, 0.3) !important;
  transform: scale(1.04) !important;
}

.ios-dropdown-menu {
  background: rgba(255, 255, 255, 0.94) !important;
  backdrop-filter: blur(25px) saturate(180%) !important;
  -webkit-backdrop-filter: blur(25px) saturate(180%) !important;
  border-radius: var(--radius-md) !important;
  border: 1px solid rgba(0, 0, 0, 0.08) !important;
  box-shadow: 0 12px 36px rgba(0, 0, 0, 0.14), 0 2px 8px rgba(0, 0, 0, 0.06) !important;
  padding: 6px !important;
  margin-top: 8px !important;
  overflow: hidden !important;
}

.ios-dropdown-menu::before,
.ios-dropdown-menu::after {
  display: none !important;
}

.ios-dropdown-header {
  padding: 12px 14px 8px !important;
  border-bottom: 1px solid rgba(0, 0, 0, 0.06) !important;
  background: transparent !important;
}

.ios-dropdown-header h3 {
  font-size: 13.5px !important;
  font-weight: 600 !important;
  color: #1c1c1e !important;
  margin: 0 !important;
}

.ios-dropdown-item {
  display: flex !important;
  align-items: center !important;
  padding: 10px 14px !important;
  font-size: 13.5px !important;
  font-weight: 500 !important;
  color: #1c1c1e !important;
  border-radius: var(--radius-xs) !important;
  transition: background 0.15s ease !important;
  text-decoration: none !important;
}

.ios-dropdown-item i {
  margin-right: 10px !important;
  font-size: 15px !important;
  width: 18px !important;
  text-align: center !important;
}

.ios-dropdown-item:hover {
  background: rgba(10, 132, 255, 0.08) !important;
  color: var(--ios-blue) !important;
}

.ios-noti-item {
  display: flex !important;
  align-items: center !important;
  padding: 10px 12px !important;
  border-radius: var(--radius-xs) !important;
  margin: 2px 4px !important;
  transition: background 0.15s ease !important;
  text-decoration: none !important;
  color: #1c1c1e !important;
}

.ios-noti-item:hover {
  background: rgba(0, 0, 0, 0.04) !important;
}

.ios-noti-icon {
  width: 34px !important;
  height: 34px !important;
  border-radius: 9px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  margin-right: 10px !important;
  flex-shrink: 0 !important;
  font-size: 16px !important;
}

.ios-noti-text {
  flex: 1 1 auto !important;
  min-width: 0 !important;
}

.ios-noti-title {
  font-size: 13px !important;
  font-weight: 600 !important;
  color: #1c1c1e !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}

.ios-noti-desc {
  font-size: 12px !important;
  color: #8e8e93 !important;
  margin-top: 1px !important;
}

/* ==========================================================================
   Universal Mobile Table Optimization (No Crowding / No Text Squishing)
   ========================================================================== */
@media screen and (max-width: 768px) {
  /* Ensure all tables are wrapped or allowed to scroll freely without pushing document layout */
  .table-responsive,
  .table-scrollable,
  .dataTables_wrapper {
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch !important;
    border-radius: var(--radius-md) !important;
    border: 1px solid rgba(0, 0, 0, 0.06) !important;
    background: #ffffff !important;
    margin-bottom: 16px !important;
    padding: 0 !important;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04) !important;
  }

  /* Prevent table cell crush / text squishing on regular wide data tables */
  .table:not(.table-card-mobile):not(.no-min-width):not(.ts-day) {
    min-width: 620px !important;
    width: max-content !important;
    max-width: none !important;
    margin-bottom: 0 !important;
  }

  /* Specific column breathing room */
  .table > thead > tr > th,
  .table > tbody > tr > th,
  .table > tfoot > tr > th,
  .table > thead > tr > td,
  .table > tbody > tr > td,
  .table > tfoot > tr > td {
    padding: 10px 10px !important;
    font-size: 13px !important;
    line-height: 1.4 !important;
    white-space: normal !important;
    word-break: normal !important;
  }

  .table > thead > tr > th {
    font-size: 12px !important;
    letter-spacing: 0.2px !important;
    white-space: nowrap !important;
    position: sticky !important;
    top: 0 !important;
    z-index: 2 !important;
  }

  /* Action buttons inside tables */
  .table .btn,
  .table .btn-xs,
  .table .btn-sm {
    min-height: 32px !important;
    padding: 4px 8px !important;
    font-size: 12px !important;
    margin: 2px !important;
    white-space: nowrap !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 4px !important;
  }

  /* Keep badge and label legible without breaking */
  .table .label,
  .table .badge {
    white-space: nowrap !important;
    font-size: 11px !important;
    padding: 3px 7px !important;
  }

  /* Universal DataTables controls on mobile */
  .table-toolbar .row,
  .dataTables_wrapper .row {
    margin: 0 !important;
  }
  .table-toolbar .col-md-6,
  .dataTables_wrapper .col-md-6 {
    padding: 0 !important;
    width: 100% !important;
  }
  .table-toolbar #sample_editable_1_new {
    width: 100% !important;
    min-height: 46px !important;
    border-radius: 12px !important;
    font-size: 15px !important;
    font-weight: 700 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 8px !important;
    background: linear-gradient(135deg, #34c759 0%, #28a745 100%) !important;
    border: none !important;
    box-shadow: 0 4px 14px rgba(40, 167, 69, 0.3) !important;
  }
  .table-toolbar .btn-group.pull-right {
    float: none !important;
    width: 100% !important;
    margin-top: 8px !important;
  }
  .table-toolbar .btn-group.pull-right > button {
    width: 100% !important;
    min-height: 42px !important;
    border-radius: 11px !important;
    font-weight: 600 !important;
  }
  .dataTables_filter {
    float: none !important;
    text-align: left !important;
    margin: 8px 0 14px !important;
    width: 100% !important;
  }
  .dataTables_filter label {
    width: 100% !important;
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
    font-weight: 600 !important;
    font-size: 14px !important;
    color: #1c1c1e !important;
  }
  .dataTables_filter input[type="search"] {
    flex: 1 1 auto !important;
    width: 100% !important;
    min-height: 42px !important;
    border-radius: 12px !important;
    border: 1.5px solid #e5e5ea !important;
    padding: 0 12px !important;
    font-size: 15px !important;
    background: #ffffff !important;
    box-sizing: border-box !important;
  }
  .dataTables_filter input[type="search"]:focus {
    border-color: #34c759 !important;
    outline: none !important;
    box-shadow: 0 0 0 3px rgba(52, 199, 89, 0.18) !important;
  }
  .dataTables_length {
    float: none !important;
    margin-bottom: 10px !important;
  }
  .dataTables_length select {
    border-radius: 8px !important;
    min-height: 36px !important;
    border: 1px solid #d1d1d6 !important;
  }
  .dataTables_info,
  .dataTables_paginate {
    float: none !important;
    text-align: center !important;
    width: 100% !important;
    margin: 12px 0 !important;
  }
  .pagination {
    display: flex !important;
    justify-content: center !important;
    flex-wrap: wrap !important;
    gap: 4px !important;
    margin: 0 !important;
  }

  /* ==========================================================================
     Universal iOS Card Table Engine ("ไม่ดันขวา ไม่มี scroll ขวา")
     Transforms table into touch-friendly cards on mobile devices.
     ========================================================================== */
  .table-card-wrap,
  .doc-table-wrap,
  .staff-table-wrap,
  .project-table-wrap,
  .client-table-wrap,
  .workcode-table-wrap,
  .calendar-table-wrap,
  .staff-login-table-wrap,
  .hardware-table-wrap {
    overflow: visible !important;
    border: none !important;
    padding: 0 !important;
    margin: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
  }

  table.table-card-mobile,
  .table-card-wrap > table.table {
    display: block !important;
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
    border: none !important;
    background: transparent !important;
    box-sizing: border-box !important;
  }

  table.table-card-mobile > thead,
  .table-card-wrap > table.table > thead {
    display: none !important;
  }

  table.table-card-mobile > tbody,
  .table-card-wrap > table.table > tbody {
    display: block !important;
    width: 100% !important;
    box-sizing: border-box !important;
  }

  table.table-card-mobile > tbody > tr,
  .table-card-wrap > table.table > tbody > tr {
    display: block !important;
    width: 100% !important;
    box-sizing: border-box !important;
    margin: 0 0 14px 0 !important;
    border-radius: 16px !important;
    background: #ffffff !important;
    border: 1px solid rgba(0, 0, 0, 0.08) !important;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.04) !important;
    padding: 14px 16px !important;
    position: relative !important;
  }

  table.table-card-mobile > tbody > tr > td,
  .table-card-wrap > table.table > tbody > tr > td {
    display: block !important;
    border: none !important;
    padding: 3px 0 !important;
    min-width: 0 !important;
    width: 100% !important;
    box-sizing: border-box !important;
    white-space: normal !important;
    word-break: break-word !important;
    overflow-wrap: anywhere !important;
    text-align: left !important;
    font-size: 14px !important;
    line-height: 1.45 !important;
  }

  /* Card Action Buttons (Delete, etc.) positioned neatly */
  table.table-card-mobile > tbody > tr > td.card-del,
  table.table-card-mobile > tbody > tr > td.doc-del,
  table.table-card-mobile > tbody > tr > td.staff-del,
  table.table-card-mobile > tbody > tr > td.project-del,
  table.table-card-mobile > tbody > tr > td.calendar-del,
  table.table-card-mobile > tbody > tr > td.hardware-del,
  table.table-card-mobile > tbody > tr > td:last-child:has(a[title="Delete"]),
  table.table-card-mobile > tbody > tr > td:last-child:has(i.fa-trash-o) {
    position: absolute !important;
    top: 12px !important;
    right: 12px !important;
    width: auto !important;
    padding: 0 !important;
    margin: 0 !important;
  }
  table.table-card-mobile > tbody > tr > td .btn.red-mint,
  table.table-card-mobile > tbody > tr > td a.btn-icon-only {
    width: 34px !important;
    height: 34px !important;
    min-width: 34px !important;
    padding: 0 !important;
    border-radius: 10px !important;
    background: rgba(255, 59, 48, 0.12) !important;
    color: #ff3b30 !important;
    border: none !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
  }

  /* Card Title / Primary Link */
  table.table-card-mobile > tbody > tr > td:first-child a,
  table.table-card-mobile > tbody > tr > td.doc-name a,
  table.table-card-mobile > tbody > tr > td.staff-name a,
  table.table-card-mobile > tbody > tr > td.project-name a,
  table.table-card-mobile > tbody > tr > td.client-name a,
  table.table-card-mobile > tbody > tr > td.workcode-name a,
  table.table-card-mobile > tbody > tr > td.hardware-title,
  table.table-card-mobile > tbody > tr > td.hardware-name a {
    font-size: 16px !important;
    font-weight: 700 !important;
    color: #1c1c1e !important;
    line-height: 1.4 !important;
    text-decoration: none !important;
    display: block !important;
    padding-right: 42px !important;
  }

  /* Code / Badge Pills */
  table.table-card-mobile > tbody > tr > td.card-code,
  table.table-card-mobile > tbody > tr > td.project-code,
  table.table-card-mobile > tbody > tr > td.staff-code,
  table.table-card-mobile > tbody > tr > td.client-code,
  table.table-card-mobile > tbody > tr > td.workcode-code,
  table.table-card-mobile > tbody > tr > td.hardware-code {
    display: inline-block !important;
    width: auto !important;
    margin: 4px 6px 6px 0 !important;
  }
  table.table-card-mobile > tbody > tr > td.card-code .badge,
  table.table-card-mobile > tbody > tr > td.project-code .badge,
  table.table-card-mobile > tbody > tr > td.hardware-code .badge,
  table.table-card-mobile > tbody > tr > td.project-code,
  table.table-card-mobile > tbody > tr > td.workcode-code {
    background: rgba(10, 132, 255, 0.1) !important;
    color: #0a84ff !important;
    font-size: 12px !important;
    font-weight: 700 !important;
    border-radius: 6px !important;
    padding: 3px 8px !important;
    display: inline-block !important;
  }

  /* Labeled Metadata fields */
  table.table-card-mobile > tbody > tr > td.project-pm::before {
    content: "PM: " !important;
    font-weight: 600 !important;
    color: #8e8e93 !important;
  }
  table.table-card-mobile > tbody > tr > td.project-budget::before {
    content: "Fee: " !important;
    font-weight: 600 !important;
    color: #8e8e93 !important;
  }
  table.table-card-mobile > tbody > tr > td.hardware-expire::before {
    content: "วันหมดประกัน: " !important;
    font-weight: 600 !important;
    color: #8e8e93 !important;
  }
  table.table-card-mobile > tbody > tr > td.hardware-staff::before {
    content: "ผู้ถือครอง: " !important;
    font-weight: 600 !important;
    color: #8e8e93 !important;
  }
  table.table-card-mobile > tbody > tr > td.hardware-type::before {
    content: "ประเภท: " !important;
    font-weight: 600 !important;
    color: #8e8e93 !important;
  }
  table.table-card-mobile > tbody > tr > td.hardware-status::before {
    content: "สถานะ: " !important;
    font-weight: 600 !important;
    color: #8e8e93 !important;
  }
  table.table-card-mobile > tbody > tr > td.card-update,
  table.table-card-mobile > tbody > tr > td.project-update,
  table.table-card-mobile > tbody > tr > td.staff-update,
  table.table-card-mobile > tbody > tr > td.client-update,
  table.table-card-mobile > tbody > tr > td.workcode-update,
  table.table-card-mobile > tbody > tr > td.calendar-update,
  table.table-card-mobile > tbody > tr > td.hardware-update {
    font-size: 11px !important;
    color: #8e8e93 !important;
    border-top: 1px solid rgba(0, 0, 0, 0.05) !important;
    padding-top: 6px !important;
    margin-top: 6px !important;
  }
  table.table-card-mobile > tbody > tr > td.card-update::before,
  table.table-card-mobile > tbody > tr > td.project-update::before,
  table.table-card-mobile > tbody > tr > td.staff-update::before,
  table.table-card-mobile > tbody > tr > td.client-update::before,
  table.table-card-mobile > tbody > tr > td.workcode-update::before,
  table.table-card-mobile > tbody > tr > td.calendar-update::before,
  table.table-card-mobile > tbody > tr > td.hardware-update::before {
    content: "อัปเดตเมื่อ: " !important;
    color: #aeaeb2 !important;
  }

  /* ==========================================================================
     Executive Mobile Dashboard Enhancement ("main.php ดูสวยกว่านี้ แบบดูดีเด่นน่าสนใจ")
     ========================================================================== */
  .dashboard-stats-grid,
  .page-content-white .page-content > .row:first-of-type {
    display: grid !important;
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 10px !important;
    margin: 0 0 16px 0 !important;
    width: 100% !important;
  }
  .dashboard-stats-grid > [class*="col-"],
  .page-content-white .page-content > .row:first-of-type > [class*="col-"] {
    width: 100% !important;
    padding: 0 !important;
    margin: 0 !important;
    display: flex !important;
    flex-direction: column !important;
    float: none !important;
  }

  /* Executive iPhone 17 Soft Pastel Bento Cards */
  .dashboard-stat {
    border-radius: 18px !important;
    padding: 14px 12px !important;
    height: 100% !important;
    min-height: 112px !important;
    flex: 1 1 auto !important;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.04) !important;
    position: relative !important;
    overflow: hidden !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: space-between !important;
    margin-bottom: 0 !important;
    box-sizing: border-box !important;
  }
  .dashboard-stat:active {
    transform: scale(0.97) !important;
  }

  /* Elegant iPhone 17 Soft Pastel Gradients */
  .dashboard-stat.blue {
    background: linear-gradient(135deg, #f0f7ff 0%, #e0f2fe 100%) !important;
    border: 1px solid rgba(14, 165, 233, 0.22) !important;
  }
  .dashboard-stat.blue .visual > i { color: #0284c7 !important; }

  .dashboard-stat.green-soft {
    background: linear-gradient(135deg, #f0fdfa 0%, #ccfbf1 100%) !important;
    border: 1px solid rgba(20, 184, 166, 0.22) !important;
  }
  .dashboard-stat.green-soft .visual > i { color: #0d9488 !important; }

  .dashboard-stat.green {
    background: linear-gradient(135deg, #f0fdf4 0%, #dcfce7 100%) !important;
    border: 1px solid rgba(34, 197, 94, 0.22) !important;
  }
  .dashboard-stat.green .visual > i { color: #16a34a !important; }

  .dashboard-stat.purple {
    background: linear-gradient(135deg, #faf5ff 0%, #f3e8ff 100%) !important;
    border: 1px solid rgba(168, 85, 247, 0.22) !important;
  }
  .dashboard-stat.purple .visual > i { color: #9333ea !important; }

  .dashboard-stat.green-sharp {
    background: linear-gradient(135deg, #ecfdf5 0%, #d1fae5 100%) !important;
    border: 1px solid rgba(16, 185, 129, 0.22) !important;
  }
  .dashboard-stat.green-sharp .visual > i { color: #059669 !important; }

  .dashboard-stat.green-meadow {
    background: linear-gradient(135deg, #f0fdfa 0%, #e6fffa 100%) !important;
    border: 1px solid rgba(45, 212, 191, 0.25) !important;
  }
  .dashboard-stat.green-meadow .visual > i { color: #0f766e !important; }

  .dashboard-stat.blue-steel {
    background: linear-gradient(135deg, #eef2ff 0%, #e0e7ff 100%) !important;
    border: 1px solid rgba(99, 102, 241, 0.22) !important;
  }
  .dashboard-stat.blue-steel .visual > i { color: #4f46e5 !important; }

  .dashboard-stat.purple-plum {
    background: linear-gradient(135deg, #fff1f2 0%, #ffe4e6 100%) !important;
    border: 1px solid rgba(244, 63, 94, 0.22) !important;
  }
  .dashboard-stat.purple-plum .visual > i { color: #e11d48 !important; }

  .dashboard-stat .details {
    position: static !important;
    padding: 0 !important;
    text-align: left !important;
    width: 100% !important;
  }
  .dashboard-stat .details .number,
  .dashboard-stat[class*=" "] .details .number,
  .dashboard-stat[class*=" "] .details .number * {
    font-size: 22px !important;
    font-weight: 800 !important;
    line-height: 1.1 !important;
    color: #0f172a !important;
    letter-spacing: -0.5px !important;
    margin-bottom: 4px !important;
    text-shadow: none !important;
    text-align: left !important;
  }
  .dashboard-stat .details .desc,
  .dashboard-stat[class*=" "] .details .desc,
  .dashboard-stat[class*=" "] .details .desc * {
    font-size: 11px !important;
    font-weight: 600 !important;
    line-height: 1.25 !important;
    color: #475569 !important;
    text-transform: none !important;
    letter-spacing: 0.1px !important;
    text-shadow: none !important;
    text-align: left !important;
  }

  .dashboard-stat .visual {
    position: absolute !important;
    top: 10px !important;
    right: 10px !important;
    width: 32px !important;
    height: 32px !important;
    border-radius: 10px !important;
    background: rgba(255, 255, 255, 0.85) !important;
    backdrop-filter: blur(8px) !important;
    -webkit-backdrop-filter: blur(8px) !important;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.05) !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 0 !important;
    margin: 0 !important;
    float: none !important;
  }
  .dashboard-stat .visual > i {
    font-size: 14px !important;
    line-height: 1 !important;
    margin: 0 !important;
    margin-left: 0 !important;
  }

  /* Activity Feeds on mobile */
  ul.feeds li {
    background: #f8f9fa !important;
    border-radius: 12px !important;
    padding: 10px 12px !important;
    margin-bottom: 8px !important;
    border: 1px solid rgba(0, 0, 0, 0.04) !important;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
  }
  ul.feeds li .col1 {
    display: flex !important;
    align-items: center !important;
    width: auto !important;
    flex: 1 1 auto !important;
  }
  ul.feeds li .cont {
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
    margin: 0 !important;
  }
  ul.feeds li .col2 {
    float: none !important;
    margin-left: 8px !important;
    flex: 0 0 auto !important;
  }
}

@media screen and (max-width: 480px) {
  .table:not(.table-card-mobile):not(.no-min-width):not(.ts-day) {
    min-width: 580px !important;
  }

  .table > thead > tr > th,
  .table > tbody > tr > td {
    padding: 8px 8px !important;
    font-size: 12.5px !important;
  }
}

/* ==========================================================================
   Timesheet Period Table Grid (Fixed min-widths & Clean Layout)
   ========================================================================== */
.table.timesheet-period-table {
  width: max-content !important;
  min-width: 100% !important;
  table-layout: auto !important;
  border-collapse: separate !important;
  border-spacing: 0 !important;
  background: #ffffff !important;
}

.table.timesheet-period-table > thead > tr > th {
  background: #f2f2f7 !important;
  color: #1c1c1e !important;
  font-size: 12px !important;
  font-weight: 600 !important;
  padding: 8px 6px !important;
  text-align: center !important;
  border: 1px solid rgba(0, 0, 0, 0.08) !important;
  white-space: nowrap !important;
  vertical-align: middle !important;
}

.table.timesheet-period-table > thead > tr > th.th-type {
  width: 50px !important;
  min-width: 50px !important;
  text-align: center !important;
}

.table.timesheet-period-table > thead > tr > th.th-project {
  width: 260px !important;
  min-width: 240px !important;
  max-width: 320px !important;
  text-align: left !important;
  white-space: normal !important;
}

.table.timesheet-period-table > thead > tr > th.th-day {
  width: 44px !important;
  min-width: 44px !important;
  padding: 6px 2px !important;
}

.table.timesheet-period-table > thead > tr > th.th-day.is-weekend {
  background: #ffe5e5 !important;
  color: #d70015 !important;
}

.table.timesheet-period-table > thead > tr > th.th-summary {
  width: 75px !important;
  min-width: 75px !important;
  background: #e5e5ea !important;
  font-weight: 700 !important;
}

.table.timesheet-period-table > tbody > tr > td {
  padding: 8px 6px !important;
  font-size: 12.5px !important;
  text-align: center !important;
  border: 1px solid rgba(0, 0, 0, 0.06) !important;
  vertical-align: middle !important;
  white-space: nowrap !important;
}

.table.timesheet-period-table > tbody > tr > td.td-type {
  width: 50px !important;
  min-width: 50px !important;
  font-weight: 600 !important;
}

.table.timesheet-period-table > tbody > tr > td.td-project {
  text-align: left !important;
  width: 260px !important;
  min-width: 240px !important;
  max-width: 320px !important;
  white-space: normal !important;
  word-break: break-word !important;
}

.table.timesheet-period-table > tbody > tr > td.td-day {
  width: 44px !important;
  min-width: 44px !important;
  padding: 6px 2px !important;
}

.table.timesheet-period-table > tbody > tr > td.is-weekend {
  background-color: #fff0f0 !important;
  color: #c93434 !important;
}

.table.timesheet-period-table > tbody > tr > td.td-summary,
.table.timesheet-period-table > tbody > tr > th.th-summary {
  width: 75px !important;
  min-width: 75px !important;
  font-weight: 700 !important;
  text-align: center !important;
}

.table.timesheet-period-table tr.tr-subtotal th,
.table.timesheet-period-table tr.tr-total th {
  padding: 8px 6px !important;
  font-size: 12.5px !important;
  text-align: center !important;
  border: 1px solid rgba(0, 0, 0, 0.08) !important;
  vertical-align: middle !important;
  white-space: nowrap !important;
}

.table.timesheet-period-table .day-num {
  font-size: 13px;
  font-weight: 700;
  display: block;
  line-height: 1.1;
}

.table.timesheet-period-table .day-name {
  font-size: 10px;
  font-weight: 500;
  opacity: 0.75;
  display: block;
  text-transform: uppercase;
  margin-top: 2px;
}

/* ==========================================================================
   Timesheet Week View Responsive Matrix (timesheet_week.php)
   ========================================================================== */
.timesheet-week-wrap {
  border-radius: 16px !important;
  background: #ffffff !important;
  border: 1px solid rgba(0, 0, 0, 0.08) !important;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.04) !important;
  padding: 12px !important;
  margin-bottom: 20px !important;
  overflow-x: auto !important;
  -webkit-overflow-scrolling: touch !important;
}

.timesheet-week-wrap table {
  margin-bottom: 12px !important;
}

.timesheet-week-wrap .timesheet-week-table {
  min-width: 680px !important;
  border-collapse: separate !important;
  border-spacing: 0 !important;
}

.timesheet-week-wrap .timesheet-week-table th,
.timesheet-week-wrap .timesheet-week-table td {
  vertical-align: middle !important;
  text-align: center !important;
  font-size: 13px !important;
}

.timesheet-week-wrap .timesheet-week-table td.text,
.timesheet-week-wrap .timesheet-week-table th.text {
  text-align: left !important;
}

@media screen and (max-width: 768px) {
  .page-bar .page-breadcrumb select[name='work_week'] {
    max-width: 100% !important;
    width: 100% !important;
    margin-top: 6px !important;
    font-size: 13px !important;
  }

  .timesheet-week-wrap table td[width="68%"] {
    width: 100% !important;
    display: block !important;
  }
}


/* ==========================================================================
   Color Psychology Gradient Design System & Anti-Squish Tables
   ========================================================================== */

/* Universal Anti-Squish Table Enforcement (Desktop & Mobile) */
.table,
.table > thead > tr > th,
.table > tbody > tr > th,
.table > tfoot > tr > th,
.table > thead > tr > td,
.table > tbody > tr > td,
.table > tfoot > tr > td {
  writing-mode: horizontal-tb !important;
  text-orientation: mixed !important;
  box-sizing: border-box !important;
}

.table > thead > tr > th,
.table > tbody > tr > td {
  white-space: nowrap !important;
}

/* Allow text to wrap cleanly on designated description/project columns without collapsing into single letters */
.table td.col-wrap,
.table th.col-wrap,
.table td.td-project,
.table th.th-project,
.table td.project-name,
.table td.description-cell {
  white-space: normal !important;
  word-break: break-word !important;
  overflow-wrap: break-word !important;
  min-width: 180px !important;
  max-width: 320px !important;
}

/* 1. Dashboard Theme (Calm & Focus: Soft Blue) */
body.theme-dashboard,
.theme-dashboard .page-content-wrapper .page-content {
  background: linear-gradient(180deg, rgba(10, 132, 255, 0.05) 0%, rgba(242, 242, 247, 0.95) 280px) !important;
}
.theme-dashboard .page-bar,
.theme-dashboard .portlet.light > .portlet-title {
  border-bottom: 2px solid rgba(10, 132, 255, 0.25) !important;
}
.theme-dashboard .portlet.light > .portlet-title > .caption > .caption-subject {
  color: #0066cc !important;
}

/* 2. Timesheet Theme (Productivity & Endurance: Soft Emerald/Mint) */
body.theme-timesheet,
.theme-timesheet .page-content-wrapper .page-content {
  background: linear-gradient(180deg, rgba(52, 199, 89, 0.06) 0%, rgba(242, 242, 247, 0.95) 280px) !important;
}
.theme-timesheet .page-bar,
.theme-timesheet .portlet.light > .portlet-title {
  border-bottom: 2px solid rgba(52, 199, 89, 0.28) !important;
}
.theme-timesheet .portlet.light > .portlet-title > .caption > .caption-subject {
  color: #248a3d !important;
}

/* 3. Report Theme (Intelligence & Strategic Decision: Soft Indigo/Violet) */
body.theme-report,
.theme-report .page-content-wrapper .page-content {
  background: linear-gradient(180deg, rgba(88, 86, 214, 0.06) 0%, rgba(242, 242, 247, 0.95) 280px) !important;
}
.theme-report .page-bar,
.theme-report .portlet.light > .portlet-title {
  border-bottom: 2px solid rgba(88, 86, 214, 0.28) !important;
}
.theme-report .portlet.light > .portlet-title > .caption > .caption-subject {
  color: #5856d6 !important;
}

/* 4. Main Data Theme (Structure & Governance: Warm Amber/Slate) */
body.theme-maindata,
.theme-maindata .page-content-wrapper .page-content {
  background: linear-gradient(180deg, rgba(255, 149, 0, 0.05) 0%, rgba(242, 242, 247, 0.95) 280px) !important;
}
.theme-maindata .page-bar,
.theme-maindata .portlet.light > .portlet-title {
  border-bottom: 2px solid rgba(255, 149, 0, 0.28) !important;
}
.theme-maindata .portlet.light > .portlet-title > .caption > .caption-subject {
  color: #c96f00 !important;
}

/* Header picks up each section's psychology color, so the frost bar belongs to
   the page instead of floating above it. Tint is deliberately faint — the
   frosted nav already sits over the page wash above. */
.theme-dashboard .page-header.navbar {
  background:
    linear-gradient(180deg, rgba(10, 132, 255, 0.10), rgba(10, 132, 255, 0.02)),
    var(--ios-bg-nav) !important;
}
.theme-timesheet .page-header.navbar {
  background:
    linear-gradient(180deg, rgba(52, 199, 89, 0.10), rgba(52, 199, 89, 0.02)),
    var(--ios-bg-nav) !important;
}
.theme-report .page-header.navbar {
  background:
    linear-gradient(180deg, rgba(88, 86, 214, 0.10), rgba(88, 86, 214, 0.02)),
    var(--ios-bg-nav) !important;
}
.theme-maindata .page-header.navbar {
  background:
    linear-gradient(180deg, rgba(255, 149, 0, 0.10), rgba(255, 149, 0, 0.02)),
    var(--ios-bg-nav) !important;
}

/* Sidebar navigation styles unified and modernized in Left Navigation Sidebar section above */

/* Button Color Psychology (Soft Pastel Hover & Focus) */
.btn-primary, .btn.blue {
  background: linear-gradient(180deg, #0a84ff 0%, #0071e3 100%) !important;
  box-shadow: 0 2px 6px rgba(10, 132, 255, 0.25) !important;
}
.btn-success, .btn.green {
  background: linear-gradient(180deg, #34c759 0%, #28cd41 100%) !important;
  box-shadow: 0 2px 6px rgba(52, 199, 89, 0.25) !important;
}
.btn-warning {
  background: linear-gradient(180deg, #ff9500 0%, #f57c00 100%) !important;
  box-shadow: 0 2px 6px rgba(255, 149, 0, 0.25) !important;
  color: #1c1c1e !important; /* AA contrast on orange */
}
.btn-danger, .btn.red {
  background: linear-gradient(180deg, #ff3b30 0%, #e0241b 100%) !important;
  box-shadow: 0 2px 6px rgba(255, 59, 48, 0.25) !important;
}




/* ============================================================
   iOS Floating Shortcut Dock — mobile only (hidden >= 992px).
   Sits bottom-left; FMS AI Assistant keeps bottom-right, so they
   never overlap. Frost + blur matches the app header: one surface.
   ============================================================ */
.ios-dock {
  position: fixed;
  left: max(12px, env(safe-area-inset-left));
  bottom: max(12px, env(safe-area-inset-bottom));
  z-index: 99998;
  max-width: calc(100vw - 96px);
  padding: 6px 10px;
  border-radius: var(--radius-xl);
  background: rgba(255, 255, 255, 0.66);
  backdrop-filter: blur(28px) saturate(160%);
  -webkit-backdrop-filter: blur(28px) saturate(160%);
  border: 1px solid var(--ios-hairline);
  box-shadow:
    0 10px 30px rgba(30, 50, 100, 0.18),
    0 1px 4px rgba(30, 50, 100, 0.08);
  opacity: 0;
  transform: translateY(12px);
  transition: opacity 0.28s ease, transform 0.28s ease;
  pointer-events: none;
}

.ios-dock.ios-dock-ready {
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}

.ios-dock-list {
  display: flex;
  align-items: center;
  gap: 4px;
  list-style: none;
  margin: 0;
  padding: 0;
  max-width: 100%;
  overflow-x: auto;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
}

.ios-dock-list::-webkit-scrollbar {
  display: none;
}

.ios-dock-item {
  flex: 0 0 auto;
}

.ios-dock-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  border-radius: 14px;
  color: var(--ios-header-ink);
  background: rgba(255, 255, 255, 0.55);
  border: 1px solid var(--ios-hairline);
  box-shadow: 0 1px 3px rgba(30, 50, 100, 0.10);
  transition: transform 0.18s ease, background-color 0.18s ease, box-shadow 0.18s ease;
}

.ios-dock-icon > i {
  font-size: 19px;
  line-height: 1;
}

.ios-dock-icon:hover,
.ios-dock-icon:focus-visible {
  transform: translateY(-3px) scale(1.06);
  background: #ffffff;
  box-shadow: 0 6px 16px rgba(10, 132, 255, 0.22);
  outline: none;
}

.ios-dock-icon:focus-visible {
  box-shadow: 0 0 0 3px rgba(10, 132, 255, 0.35), 0 6px 16px rgba(10, 132, 255, 0.22);
}

/* Active section gets the accent, matching the header wash of that page */
.ios-dock-icon[aria-current="page"] {
  color: #ffffff;
  background: linear-gradient(135deg, #0a84ff 0%, #0066cc 100%);
  border-color: transparent;
  box-shadow: 0 4px 12px rgba(10, 132, 255, 0.34);
}

@media (max-width: 991px) {
  .ios-dock {
    display: block;
  }
}

@media (max-width: 374px) {
  .ios-dock {
    padding: 5px 8px;
  }

  .ios-dock-icon {
    width: 44px;
    height: 44px;
    border-radius: 12px;
  }

  .ios-dock-icon > i {
    font-size: 17px;
  }
}

/* Keyboard/AT users on desktop never see the dock — it is a mobile shortcut */
@media (prefers-reduced-motion: reduce) {
  .ios-dock,
  .ios-dock-icon {
    transition: none;
  }

  .ios-dock-icon:hover,
  .ios-dock-icon:focus-visible {
    transform: none;
  }
}