/* Portal Custom Styles */

/* Alpine.js cloak — hide elements until Alpine initialises */
[x-cloak] { display: none !important; }

/* Time-ago toggle — clickable relative timestamps that reveal exact datetime */
.time-ago-toggle {
  cursor: pointer;
  border-bottom: 1px dotted currentColor;
  white-space: nowrap;
}
.time-ago-toggle:hover {
  opacity: 0.75;
}
.time-ago-toggle.time-ago-exact {
  font-style: normal;
}

/* ===================================================================
   Modal Headers — shared treatment for the modal variant headers
   (action, filter, assign, submodule, send). Every variant overrides only
   its own background; the icon badge, title, subtitle and close button styling
   is shared. All use --sidebar-theme-color so they adapt to every app skin.
   Apply .modal-<variant>-header to the header <div> with matching child
   classes <variant>-icon-badge / -title / -subtitle / -close.
   =================================================================== */

/* Shared container */
.modal-action-header,
.modal-filter-header,
.modal-assign-header,
.modal-submodule-header,
.modal-send-header {
  position: relative;
}

/* Rounded top corners (send uses overflow:hidden for its decorative fill instead) */
.modal-action-header,
.modal-filter-header,
.modal-assign-header,
.modal-submodule-header {
  border-top-left-radius: 0.5rem;
  border-top-right-radius: 0.5rem;
}

/* Per-variant backgrounds */
.modal-action-header    { background: var(--sidebar-theme-color); }
.modal-filter-header    { background: linear-gradient(135deg, rgba(0,0,0,0.22) 0%, rgba(0,0,0,0.14) 100%), var(--sidebar-theme-color); }
.modal-assign-header    { background: linear-gradient(135deg, rgba(0,0,0,0.14) 0%, rgba(0,0,0,0.08) 100%), var(--sidebar-theme-color); }
.modal-submodule-header { background: linear-gradient(135deg, rgba(255,255,255,0.12) 0%, rgba(0,0,0,0.06) 100%), var(--sidebar-theme-color); }
.modal-send-header {
  background: linear-gradient(135deg, rgba(255,255,255,0.08) 0%, rgba(0,0,0,0.10) 100%), var(--sidebar-theme-color);
  overflow: hidden;
}

/* Icon badge — shared box; the filter variant uses a subtler fill */
.modal-action-header .action-icon-badge,
.modal-filter-header .filter-icon-badge,
.modal-assign-header .assign-icon-badge,
.modal-submodule-header .submodule-icon-badge,
.modal-send-header .send-icon-badge {
  background: rgba(255,255,255,0.18);
  border: 1px solid rgba(255,255,255,0.28);
  border-radius: 0.625rem;
  padding: 0.5rem;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.modal-filter-header .filter-icon-badge {
  background: rgba(255,255,255,0.10);
  border: 1px solid rgba(255,255,255,0.16);
}

/* Title */
.modal-action-header .action-title,
.modal-filter-header .filter-title,
.modal-assign-header .assign-title,
.modal-submodule-header .submodule-title,
.modal-send-header .send-title {
  color: #ffffff;
  font-size: 1rem;
  font-weight: 600;
  line-height: 1.25;
  margin: 0;
}

/* Subtitle */
.modal-action-header .action-subtitle,
.modal-filter-header .filter-subtitle,
.modal-assign-header .assign-subtitle,
.modal-submodule-header .submodule-subtitle,
.modal-send-header .send-subtitle {
  color: rgba(255,255,255,0.85);
  font-size: 0.75rem;
  margin-top: 3px;
}

/* Close button — shared; the filter variant is slightly dimmer */
.modal-action-header .action-close,
.modal-filter-header .filter-close,
.modal-assign-header .assign-close,
.modal-submodule-header .submodule-close,
.modal-send-header .send-close {
  color: rgba(255,255,255,0.65);
  transition: color 0.15s ease;
  flex-shrink: 0;
  background: none;
  border: none;
  cursor: pointer;
  padding: 0;
  line-height: 0;
}

.modal-filter-header .filter-close {
  color: rgba(255,255,255,0.50);
}

/* Close button hover */
.modal-action-header .action-close:hover,
.modal-filter-header .filter-close:hover,
.modal-assign-header .assign-close:hover,
.modal-submodule-header .submodule-close:hover,
.modal-send-header .send-close:hover {
  color: #ffffff;
}

/* Bookmark toggle — same treatment as the close button; filled/bookmarked state is solid white */
.modal-action-header .action-bookmark,
.modal-filter-header .filter-bookmark,
.modal-assign-header .assign-bookmark,
.modal-submodule-header .submodule-bookmark,
.modal-send-header .send-bookmark {
  color: rgba(255,255,255,0.65);
  transition: color 0.15s ease;
  flex-shrink: 0;
  background: none;
  border: none;
  cursor: pointer;
  padding: 0;
  line-height: 0;
}

.modal-filter-header .filter-bookmark {
  color: rgba(255,255,255,0.50);
}

.modal-action-header .action-bookmark:hover,
.modal-filter-header .filter-bookmark:hover,
.modal-assign-header .assign-bookmark:hover,
.modal-submodule-header .submodule-bookmark:hover,
.modal-send-header .send-bookmark:hover,
.modal-action-header .action-bookmark.is-bookmarked,
.modal-filter-header .filter-bookmark.is-bookmarked,
.modal-assign-header .assign-bookmark.is-bookmarked,
.modal-submodule-header .submodule-bookmark.is-bookmarked,
.modal-send-header .send-bookmark.is-bookmarked {
  color: #ffffff;
}

/* Scrollable modal containers — max-height so body can scroll */
.modal-constrained {
  max-height: calc(100vh - 4rem);
}

/* All buttons show pointer cursor */
button {
  cursor: pointer;
}

/* Disabled button state */
button:disabled {
  opacity: 0.35;
  cursor: not-allowed;
  pointer-events: none;
}

/* CSS Variables for Sidebar Theme */
:root {
  /* Base theme color - change this to change the entire theme */
  --sidebar-theme-color: #EC4580;
  --sidebar-theme-text-color: var(--sidebar-theme-color);

  /* Calculated shades using color-mix for automatic theming */
  --sidebar-bg: #FFFFFF;
  --sidebar-hover: #F3F4F6;
  --sidebar-text: #6B7280;
  --sidebar-text-hover: #374151;
  --sidebar-border: #E5E7EB;

  /* Main menu active states - darker, more prominent (using base theme color) */
  --sidebar-active: var(--sidebar-theme-color);
  --sidebar-active-bg: var(--sidebar-theme-color);
  --sidebar-active-text: #FFFFFF;

  /* Submenu active states - lighter, more subtle (20% opacity of theme color) */
  --sidebar-submenu-active-bg: color-mix(in srgb, var(--sidebar-theme-color) 15%, transparent);
  --sidebar-submenu-active-text: var(--sidebar-theme-text-color);

  /* Border colors */
  --sidebar-submenu-border: color-mix(in srgb, var(--sidebar-theme-color) 20%, transparent);

  /* Widget styling - theme-based colors */
  /* TODO: Experimenting with grey borders instead of theme colors for widgets */
  /* --widget-border: color-mix(in srgb, var(--sidebar-theme-color) 33%, transparent); */
  --widget-border: #D1D5DB; /* Grey-300 - removes theme color from widget borders */
  --widget-header-icon: var(--sidebar-theme-color);
}

/* Sidebar Base Styles */
.sidebar {
  background-color: var(--sidebar-bg);
  color: var(--sidebar-text);
  border-right: 1px solid var(--sidebar-border);
  box-shadow: 1px 0 3px rgba(0, 0, 0, 0.05);
}

/* Main Menu Link Styles */
.sidebar-link {
  color: var(--sidebar-text);
  transition: all 0.15s ease-in-out;
  font-size: 0.85rem;
  font-weight: 500;
  padding: 0.5rem 0.75rem;
  text-align: left;
}

.sidebar-link:hover {
  background-color: var(--sidebar-hover);
  color: var(--sidebar-text-hover);
}

/* Main Menu Active State - Dark/Solid Background */
.sidebar-link.active {
  background-color: var(--sidebar-active-bg);
  color: var(--sidebar-active-text);
  font-weight: 600;
}

/* TODO: Experimenting with greyscale icons instead of theme-colored icons */
/* Desaturate non-active sidebar icons to greyscale */
.sidebar-link:not(.active) .icon-2tone {
  filter: saturate(0%) brightness(1.05);
}
/* To revert: comment out the above rule to restore theme-colored icons */

/* Sidebar Submenu Styles */
.sidebar-submenu {
  padding-left: 1rem;
  border-left: 2px solid var(--sidebar-submenu-border);
  margin-left: 0.5rem;
}

.sidebar-submenu a {
  font-size: 0.85rem;
  font-weight: 500;
  color: var(--sidebar-text);
  padding: 0.35rem 0.75rem;
  display: flex;
  align-items: center;
  border-radius: 0.375rem;
  transition: all 0.15s ease-in-out;
}

.sidebar-submenu a:hover {
  color: var(--sidebar-text-hover);
  background-color: var(--sidebar-hover);
}

/* Submenu Active State - Light/Transparent Background */
.sidebar-submenu a.active {
  background-color: var(--sidebar-submenu-active-bg);
  color: var(--sidebar-submenu-active-text);
  font-weight: 600;
}

/* Nested sub-menu toggle buttons inside a submenu - use lighter active style, not solid blue */
.sidebar-submenu .sidebar-link.active {
  background-color: var(--sidebar-submenu-active-bg);
  color: var(--sidebar-submenu-active-text);
  font-weight: 600;
}

/* Notification items use x-collapse
   Force overflow-x:hidden so long descriptions don't create a horizontal scrollbar
   in the dropdown, while still allowing x-collapse to animate height freely. */
.notification-item {
  overflow-x: hidden !important;
}

/* Notification dismiss button — light red circle on hover, icon goes red */
.notification-item button[title="Clear notification"]:hover {
  background-color: #FEF2F2;
}
.notification-item button[title="Clear notification"]:hover svg {
  --icon-color: #EF4444 !important;
}

/* =================================================================
   Modal Utilities
   ================================================================= */

/* Modal backdrop - translucent dark overlay */
.modal-backdrop {
  background-color: rgba(0, 0, 0, 0.5) !important;
}

/* Lighter backdrop for mobile sidebar */
.mobile-overlay {
  background-color: rgba(0, 0, 0, 0.2) !important;
}

/* =================================================================
   Tab Navigation Utilities
   ================================================================= */

/* Active tab indicator - theme color for text/icons */
.tab-active {
  color: var(--sidebar-theme-color) !important;
}

/* Active tab border - bottom border in theme color */
.tab-border-active {
  border-bottom-color: var(--sidebar-theme-color) !important;
}

/* Inactive tab styling */
.tab-inactive {
  color: #6b7280 !important;
  border-bottom-color: transparent !important;
}

.tab-inactive:hover {
  color: #374151 !important;
}

/* Shared admin tabs that follow the selected sidebar skin. */
.theme-tab-active {
  color: var(--sidebar-theme-color) !important;
  border-bottom-color: var(--sidebar-theme-color) !important;
}

.theme-tab-inactive {
  color: #6b7280 !important;
  border-bottom-color: transparent !important;
}

.theme-tab-inactive:hover {
  color: #374151 !important;
  border-bottom-color: #d1d5db !important;
}

/* Shared selected person/reviewer cards used inside tabbed panels. */
.theme-selector-active {
  background-color: color-mix(in srgb, var(--sidebar-theme-color) 12%, white) !important;
  border-color: var(--sidebar-theme-color) !important;
  box-shadow: 0 0 0 1px var(--sidebar-theme-color) !important;
  color: #111827 !important;
}

.theme-selector-active .theme-selector-label {
  color: var(--sidebar-theme-color) !important;
}

.theme-selector-inactive {
  border-color: #e5e7eb !important;
  color: #374151 !important;
}

.theme-selector-inactive:hover {
  background-color: #fafafa !important;
}

.theme-toggle {
  background-color: #e5e7eb !important;
}

.theme-toggle-active {
  background-color: var(--sidebar-theme-color) !important;
}

.theme-toggle:focus {
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--sidebar-theme-color) 18%, transparent) !important;
}

.theme-pill-tab-active {
  background-color: color-mix(in srgb, var(--sidebar-theme-color) 14%, white) !important;
  color: var(--sidebar-theme-color) !important;
}

.theme-pill-tab-inactive {
  color: #4b5563 !important;
}

.theme-pill-tab-inactive:hover {
  background-color: #f5f5f5 !important;
}

.theme-pill-count {
  background-color: var(--sidebar-theme-color) !important;
  color: white !important;
}

/* =================================================================
   Tailwind Primary Color Utilities
   ================================================================= */

/* Primary text color - uses theme color */
.text-primary {
  color: var(--sidebar-theme-color) !important;
}

/* Primary background color - uses theme color */
.bg-primary {
  background-color: var(--sidebar-theme-color) !important;
}

/* Light primary background - subtle tint for widget headers */
.bg-primary-light {
  background-color: color-mix(in srgb, var(--sidebar-theme-color) 10%, white) !important;
  border-bottom: 1px solid color-mix(in srgb, var(--sidebar-theme-color) 20%, transparent) !important;
}

/* Primary hover background - slightly darker */
.hover\:bg-primary-600:hover {
  background-color: color-mix(in srgb, var(--sidebar-theme-color) 85%, black) !important;
}

/* Primary border color */
.border-primary {
  border-color: var(--sidebar-theme-color) !important;
}

/* Theme button - solid background */
.btn-theme {
  background-color: var(--sidebar-theme-color) !important;
  color: white !important;
}

@media (prefers-color-scheme: dark) {
  .btn-theme {
    background-color: color-mix(in srgb, var(--sidebar-theme-color) 82%, #020617) !important;
    color: #ffffff !important;
  }
}

html[data-color-scheme="dark"] .btn-theme {
  background-color: color-mix(in srgb, var(--sidebar-theme-color) 82%, #020617) !important;
  color: #ffffff !important;
}

/* w-full override — Tailwind @layer utilities loses to unlayered CSS */
.w-full {
  width: 100% !important;
}

.btn-theme:hover {
  opacity: 0.9 !important;
}

.btn-theme:disabled {
  opacity: 0.5 !important;
  cursor: not-allowed !important;
}

/* Theme button - outline style */
.btn-theme-outline {
  background-color: transparent !important;
  border: 1px solid var(--sidebar-theme-color) !important;
  color: var(--sidebar-theme-color) !important;
}

.btn-theme-outline:hover {
  background-color: color-mix(in srgb, var(--sidebar-theme-color) 10%, transparent) !important;
}

/* Theme button - light style (for list actions) */
.btn-theme-light {
  background-color: color-mix(in srgb, var(--sidebar-theme-color) 10%, white) !important;
  border: 1px solid var(--sidebar-theme-color) !important;
  color: var(--sidebar-theme-color) !important;
}

.btn-theme-light:hover {
  background-color: color-mix(in srgb, var(--sidebar-theme-color) 20%, white) !important;
}

/* Theme button - soft style (very light tint, subtle border) */
.btn-theme-soft {
  background-color: color-mix(in srgb, var(--sidebar-theme-color) 6%, white) !important;
  border: 1px solid color-mix(in srgb, var(--sidebar-theme-color) 28%, white) !important;
  color: var(--sidebar-theme-color) !important;
}

.btn-theme-soft:hover {
  background-color: color-mix(in srgb, var(--sidebar-theme-color) 12%, white) !important;
}

.btn-theme-soft:disabled {
  opacity: 0.5 !important;
  cursor: not-allowed !important;
}

/* Semantic success button — HRP success-600 (#24A950) */
.btn-success {
  background-color: var(--color-success-600) !important;
  color: white !important;
}
.btn-success:hover {
  background-color: var(--color-success-700) !important;
}
.btn-success:disabled {
  opacity: 0.5 !important;
  cursor: not-allowed !important;
}

/* Semantic danger button — HRP error-600 (#C41C1C) */
.btn-danger {
  background-color: var(--color-error-600) !important;
  color: white !important;
}
.btn-danger:hover {
  background-color: var(--color-error-700) !important;
}
.btn-danger:disabled {
  opacity: 0.5 !important;
  cursor: not-allowed !important;
}

/* Semantic outline success button */
.btn-outline-success {
  background-color: white !important;
  border: 1px solid #36D96C !important;
  color: #1D7339 !important; /* HRP success-700 */
}
.btn-outline-success:hover {
  background-color: #F0F7F2 !important; /* HRP success-100 */
}

/* Semantic outline danger button */
.btn-outline-danger {
  background-color: white !important;
  border: 1px solid #E83A3A !important;
  color: #E83A3A !important; /* HRP error-500 */
}
.btn-outline-danger:hover {
  background-color: #F8EFEF !important; /* HRP error-100 */
}

/* Theme text color utility */
.text-theme {
  color: var(--sidebar-theme-color) !important;
}

/* Theme background with light opacity (8%) - for subtle highlights */
.bg-theme-light {
  background-color: color-mix(in srgb, var(--sidebar-theme-color) 8%, white) !important;
}

/* Theme background with medium opacity (15%) - for hover states */
.bg-theme-medium {
  background-color: color-mix(in srgb, var(--sidebar-theme-color) 15%, transparent) !important;
}

/* =================================================================
   Badge Utilities
   ================================================================= */

/* Base badge styling */
.badge {
  display: inline-flex;
  align-items: center;
  padding: 0.375rem 0.75rem;
  font-size: 0.75rem;
  font-weight: 500;
  line-height: 1;
  border-radius: 9999px;
  white-space: nowrap;
}

/* Theme badge */
.badge-theme {
  background-color: color-mix(in srgb, var(--sidebar-theme-color) 10%, white) !important;
  color: var(--sidebar-theme-color) !important;
}

/* Success badge (green) — design-system success-50 / success-700 */
.badge-success {
  background-color: var(--color-success-50) !important;
  color: var(--color-success-700) !important;
}

/* Warning badge (amber) — design-system warning-50 / warning-700 */
.badge-warning {
  background-color: var(--color-warning-50) !important;
  color: var(--color-warning-700) !important;
}

/* Danger badge (red) — design-system error-50 / error-700 */
.badge-danger {
  background-color: var(--color-error-50) !important;
  color: var(--color-error-700) !important;
}

/* Info badge (blue) — design-system info-50 / info-700 */
.badge-info {
  background-color: var(--color-info-50) !important;
  color: var(--color-info-700) !important;
}

/* Neutral badge (gray) */
.badge-neutral {
  background-color: #f3f4f6 !important;
  color: #374151 !important;
}

/* =================================================================
   Alert Panel Utilities  (block-level — mirrors badge-* colors)
   Apply to any div/section that needs a semantic background + border + text.
   Colors match the _alert.haml partial and badge-* tokens exactly.
   ================================================================= */

/* Warning alert panel (amber) — warning-50 / -300 / -700 */
.alert-warning {
  background-color: var(--color-warning-50) !important;
  border: 1px solid var(--color-warning-300) !important;
  color: var(--color-warning-700) !important;
}

/* Success alert panel (green) — success-50 / -300 / -700 */
.alert-success {
  background-color: var(--color-success-50) !important;
  border: 1px solid var(--color-success-300) !important;
  color: var(--color-success-700) !important;
}

/* Danger alert panel (red) — error-50 / -300 / -700 */
.alert-danger {
  background-color: var(--color-error-50) !important;
  border: 1px solid var(--color-error-300) !important;
  color: var(--color-error-700) !important;
}

/* Info alert panel (blue) — info-50 / -300 / -700 */
.alert-info {
  background-color: var(--color-info-50) !important;
  border: 1px solid var(--color-info-300) !important;
  color: var(--color-info-700) !important;
}

/* =================================================================
   Form Element Utilities
   ================================================================= */

/* Theme-aware focus ring for inputs */
.input-theme-focus:focus {
  outline: none !important;
  border-color: var(--sidebar-theme-color) !important;
  ring: 2px !important;
  ring-color: color-mix(in srgb, var(--sidebar-theme-color) 30%, transparent) !important;
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--sidebar-theme-color) 15%, transparent) !important;
}

/* Custom SELECT component — outline avoids overflow-hidden clipping */
.select-theme-focus:focus,
.select-theme-focus:focus-within {
  outline: 2px solid color-mix(in srgb, var(--sidebar-theme-color) 45%, transparent) !important;
  outline-offset: 1px !important;
  box-shadow: none !important;
}

:is(#appModal, #employeeModal, #dataModal, #subdataModal, .fixed.inset-0.z-50) :is(button.select-theme-focus, div.select-theme-focus) {
  border-style: solid !important;
  border-width: 1px !important;
}

.select-theme-focus.border-red-500:focus,
.select-theme-focus.border-red-500:focus-within {
  outline: 2px solid rgba(239, 68, 68, 0.5) !important;
  border-color: #ef4444 !important;
  box-shadow: none !important;
}

/* Global theme-colored focus for all admin form fields — outline is not clipped by overflow-hidden */
input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="color"]):not([type="file"]):not([type="hidden"]):not([type="submit"]):not([type="button"]):not([type="reset"]):focus,
select:focus {
  outline: 2px solid color-mix(in srgb, var(--sidebar-theme-color) 45%, transparent) !important;
  outline-offset: 1px !important;
  box-shadow: none !important;
}

/* Textarea */
textarea:focus {
  outline: 2px solid color-mix(in srgb, var(--sidebar-theme-color) 45%, transparent) !important;
  outline-offset: 1px !important;
  box-shadow: none !important;
}

/* Theme-colored focus ring for buttons and link-buttons — :focus-visible only so mouse
   clicks don't leave a persistent ring on tabs and other button-style elements */
button:focus-visible,
a.rounded-lg:focus-visible,
a.rounded-full:focus-visible {
  outline: 2px solid color-mix(in srgb, var(--sidebar-theme-color) 45%, transparent) !important;
  outline-offset: 2px !important;
  box-shadow: none !important;
}

/* Suppress focus ring on the select component's inner trigger button — outer wrapper shows it via :focus-within */
.select-theme-focus > .absolute:focus,
.select-theme-focus > .absolute:focus-visible {
  outline: none !important;
  box-shadow: none !important;
}

/* Preserve red error borders on focused inputs */
input.border-red-500,
input.border-error-400,
textarea.border-red-500,
textarea.border-error-400 {
  border-color: #ef4444 !important;
}

input.border-red-500:focus,
input.border-error-400:focus,
textarea.border-red-500:focus,
textarea.border-error-400:focus,
select.border-red-500:focus,
select.border-error-400:focus {
  outline: 2px solid rgba(239, 68, 68, 0.5) !important;
  border-color: #ef4444 !important;
  box-shadow: none !important;
}

/* Form builder canvas — selected field highlight using theme color */
.form-field-selected {
  border-color: var(--sidebar-theme-color) !important;
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--sidebar-theme-color) 12%, transparent), 0 1px 2px 0 rgba(0, 0, 0, 0.05);
}

.fb-canvas-title-mobile,
.fb-ada-label-mobile {
  display: none;
}

/* Form builder mobile layout: icon-only field rail and off-canvas properties. */
@media (max-width: 767.98px) {
  .fb-editor-shell {
    position: relative;
  }

  .fb-field-palette {
    width: 3.5rem !important;
  }

  .fb-field-palette-header {
    display: none;
  }

  .fb-palette-item {
    justify-content: center;
    padding-left: 0.5rem !important;
    padding-right: 0.5rem !important;
  }

  .fb-palette-label {
    display: none;
  }

  .fb-palette-icon {
    width: 1.25rem !important;
    height: 1.25rem !important;
  }

  .fb-palette-icon svg {
    width: 1rem;
    height: 1rem;
  }

  .fb-canvas-header {
    gap: 0.5rem;
    padding-left: 0.75rem !important;
    padding-right: 0.75rem !important;
  }

  .fb-canvas-title,
  .fb-field-count,
  .fb-ada-label {
    white-space: nowrap;
  }

  .fb-canvas-title {
    font-weight: 600;
  }

  .fb-canvas-tools {
    min-width: 0;
    gap: 0.5rem !important;
  }

  .fb-ada-button {
    min-height: 2rem;
    padding: 0.45rem 0.65rem !important;
  }

  .fb-ada-label {
    font-size: 0.75rem;
  }

  .fb-canvas-title-full,
  .fb-ada-label-full {
    display: none;
  }

  .fb-canvas-title-mobile,
  .fb-ada-label-mobile {
    display: inline;
  }

  .fb-field-actions {
    opacity: 1 !important;
  }

  .fb-field-drag-control {
    opacity: 1 !important;
  }

  .fb-drag-handle {
    align-items: center;
    display: inline-flex;
    height: 1.375rem;
    justify-content: center;
    touch-action: none;
    width: 1.375rem;
  }

  .fb-drag-handle svg {
    height: 0.8125rem;
    width: 0.8125rem;
  }

  .fb-properties-sidebar {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    z-index: 30;
    width: min(20rem, calc(100vw - 3.5rem)) !important;
    max-width: calc(100vw - 3.5rem);
    transform: translateX(100%);
    transition: transform 180ms ease, box-shadow 180ms ease;
    border-left-width: 1px;
  }

  .fb-properties-sidebar-open {
    transform: translateX(0);
    box-shadow: -16px 0 32px rgba(15, 23, 42, 0.18);
  }

  .fb-properties-backdrop {
    position: absolute;
    inset: 0;
    z-index: 20;
    background: rgba(15, 23, 42, 0.18);
  }

  .fb-form-actions {
    align-items: stretch !important;
    flex-direction: column;
    gap: 0.75rem;
  }

  .fb-form-actions-export,
  .fb-form-actions-primary {
    width: 100%;
  }

  .fb-form-actions-primary {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  }

  .fb-form-actions a,
  .fb-form-actions button {
    justify-content: center;
    min-height: 2.75rem;
    width: 100%;
  }

  .fb-export-json-button span {
    font-size: 0;
  }

  .fb-export-json-button span::after {
    content: "Export JSON";
    font-size: 0.875rem;
    line-height: 1.25rem;
  }

  /* Form builder canvas preview fields are inert mockups (disabled + pointer-events: none),
     so they don't need native OS date/time chrome. iOS Safari's native date/time control can
     ignore CSS width on a disabled input and render at its own intrinsic size instead,
     spilling past the field card on narrow viewports — reset to the standard box model so it
     always respects width: 100%. Scoped to mobile only so desktop keeps native affordance. */
  .fb-root input[type="date"],
  .fb-root input[type="time"],
  .fb-root input[type="datetime-local"] {
    -webkit-appearance: none;
    appearance: none;
    min-width: 0;
    max-width: 100%;
  }
}

@media (min-width: 768px) {
  .fb-properties-backdrop {
    display: none !important;
  }
}

.select-theme-pill {
  background-color: color-mix(in srgb, var(--sidebar-theme-color) 12%, white) !important;
  color: var(--sidebar-theme-color) !important;
}

.select-theme-pill-remove:hover {
  background-color: color-mix(in srgb, var(--sidebar-theme-color) 20%, white) !important;
}

.select-theme-link,
.select-theme-check {
  color: var(--sidebar-theme-color) !important;
}

.select-theme-option:not(.opacity-50):hover,
.select-theme-create:hover {
  background-color: color-mix(in srgb, var(--sidebar-theme-color) 8%, white) !important;
}

.select-theme-option-selected {
  background-color: color-mix(in srgb, var(--sidebar-theme-color) 18%, white) !important;
  color: #171717 !important;
}

.select-theme-option-highlighted {
  background-color: color-mix(in srgb, var(--sidebar-theme-color) 12%, white) !important;
}

/* Select component — dark mode overrides.
   Light-mode rules above mix with white; dark mode must mix with the panel bg (#1f2937)
   so hover/selected/highlighted states remain visible against the dark backdrop. */
@media (prefers-color-scheme: dark) {
  .select-theme-option:not(.opacity-50):hover,
  .select-theme-create:hover {
    background-color: color-mix(in srgb, var(--sidebar-theme-color) 18%, #1f2937) !important;
    color: #f5f5f5 !important;
  }

  .select-theme-option-selected {
    background-color: color-mix(in srgb, var(--sidebar-theme-color) 30%, #1f2937) !important;
    color: #f5f5f5 !important;
  }

  .select-theme-option-highlighted {
    background-color: color-mix(in srgb, var(--sidebar-theme-color) 22%, #1f2937) !important;
    color: #f5f5f5 !important;
  }

  .select-theme-pill {
    background-color: color-mix(in srgb, var(--sidebar-theme-color) 25%, #1f2937) !important;
    color: color-mix(in srgb, var(--sidebar-theme-color) 70%, #e2e8f0) !important;
  }

  .select-theme-pill-remove:hover {
    background-color: color-mix(in srgb, var(--sidebar-theme-color) 38%, #1f2937) !important;
  }

  input.select-theme-focus {
    background-color: #374151 !important;
    border-color: #4b5563 !important;
    color: #f5f5f5 !important;
  }

  input.select-theme-focus::placeholder {
    color: #9ca3af !important;
  }
}

html[data-color-scheme="dark"] .select-theme-option:not(.opacity-50):hover,
html[data-color-scheme="dark"] .select-theme-create:hover {
  background-color: color-mix(in srgb, var(--sidebar-theme-color) 18%, #1f2937) !important;
  color: #f5f5f5 !important;
}

html[data-color-scheme="dark"] .select-theme-option-selected {
  background-color: color-mix(in srgb, var(--sidebar-theme-color) 30%, #1f2937) !important;
  color: #f5f5f5 !important;
}

html[data-color-scheme="dark"] .select-theme-option-highlighted {
  background-color: color-mix(in srgb, var(--sidebar-theme-color) 22%, #1f2937) !important;
  color: #f5f5f5 !important;
}

html[data-color-scheme="dark"] .select-theme-pill {
  background-color: color-mix(in srgb, var(--sidebar-theme-color) 25%, #1f2937) !important;
  color: color-mix(in srgb, var(--sidebar-theme-color) 70%, #e2e8f0) !important;
}

html[data-color-scheme="dark"] .select-theme-pill-remove:hover {
  background-color: color-mix(in srgb, var(--sidebar-theme-color) 38%, #1f2937) !important;
}

html[data-color-scheme="dark"] input.select-theme-focus {
  background-color: #374151 !important;
  border-color: #4b5563 !important;
  color: #f5f5f5 !important;
}

html[data-color-scheme="dark"] input.select-theme-focus::placeholder {
  color: #9ca3af !important;
}

/* Checkbox/radio theme styling — global */
input[type="checkbox"],
input[type="radio"] {
  accent-color: var(--sidebar-theme-color);
}

.checkbox-theme,
.radio-theme {
  accent-color: var(--sidebar-theme-color) !important;
}

.checkbox-theme:focus,
.radio-theme:focus,
input[type="checkbox"]:focus,
input[type="radio"]:focus {
  outline: 2px solid color-mix(in srgb, var(--sidebar-theme-color) 45%, transparent) !important;
  outline-offset: 2px !important;
}

/* =================================================================
   Card/Widget Utilities
   ================================================================= */

/* Standard card with theme-aware border */
.card {
  background-color: white;
  border-radius: 0.5rem;
  border: 1px solid var(--widget-border);
  box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px -1px rgba(0, 0, 0, 0.1);
}

/* Card header with theme accent */
.card-header {
  padding: 1rem 1.5rem;
  border-bottom: 1px solid #e5e7eb;
  background-color: #f9fafb;
  border-radius: 0.5rem 0.5rem 0 0;
}

.card-header-theme {
  border-bottom-color: color-mix(in srgb, var(--sidebar-theme-color) 20%, transparent) !important;
}

/* Card body */
.card-body {
  padding: 1.5rem;
}

/* Card footer */
.card-footer {
  padding: 1rem 1.5rem;
  border-top: 1px solid #e5e7eb;
  background-color: #f9fafb;
  border-radius: 0 0 0.5rem 0.5rem;
}

/* Admin dashboard widgets: modern dense-list treatment. */
.dashboard-widget-header {
  background: var(--ada-chat-header-bg);
  border-bottom: 1px solid var(--ada-chat-border-color);
  padding: 0.875rem 1rem;
}

.dashboard-widget-icon-badge {
  align-items: center;
  background: color-mix(in srgb, var(--sidebar-theme-color) 10%, white);
  border: 1px solid color-mix(in srgb, var(--sidebar-theme-color) 18%, white);
  border-radius: 0.625rem;
  color: var(--sidebar-theme-color);
  display: inline-flex;
  flex-shrink: 0;
  height: 2rem;
  justify-content: center;
  width: 2rem;
}

.dashboard-widget-body {
  background: var(--ada-chat-messages-bg);
}

.dashboard-list {
  display: flex;
  flex-direction: column;
  gap: 0;
  padding: 0;
}

.dashboard-list-flush {
  gap: 0;
  padding: 0;
}

.dashboard-list-row {
  align-items: center;
  background: var(--dashboard-list-row-bg, #ffffff);
  border: 0 solid var(--ada-chat-border-color);
  border-bottom-width: 1px;
  border-radius: 0;
  box-shadow: none;
  color: var(--dashboard-list-row-text, #1f2937);
  display: flex;
  gap: 0.625rem;
  min-width: 0;
  padding: 0.625rem 1rem;
  transition: background-color 0.15s ease, border-color 0.15s ease;
  width: 100%;
}

.dashboard-list-row:hover {
  background: var(--dashboard-list-row-hover-bg, color-mix(in srgb, var(--sidebar-theme-color) 4%, white));
  border-color: color-mix(in srgb, var(--sidebar-theme-color) 24%, white);
}

.dashboard-list-flush .dashboard-list-row {
  padding: 0.625rem 1rem;
}

.dashboard-list-flush .dashboard-list-row + .dashboard-list-row {
  border-top-width: 0;
}

.dashboard-list-flush .dashboard-list-row:hover {
  transform: none;
}

.dashboard-list-row-icon {
  align-items: center;
  background: var(--dashboard-list-icon-bg, color-mix(in srgb, var(--sidebar-theme-color) 8%, white));
  border: 1px solid var(--dashboard-list-icon-border, color-mix(in srgb, var(--sidebar-theme-color) 14%, white));
  border-radius: 9999px;
  color: var(--sidebar-theme-color);
  display: inline-flex;
  flex-shrink: 0;
  height: 2rem;
  justify-content: center;
  width: 2rem;
}

.dashboard-list-avatar {
  border: 2px solid #ffffff;
  box-shadow: 0 0 0 1px var(--ada-chat-border-color);
}

.dashboard-chip {
  align-items: center;
  background: var(--dashboard-chip-bg, #f3f4f6);
  border-radius: 9999px;
  color: var(--dashboard-chip-color, #4b5563);
  display: inline-flex;
  flex-shrink: 0;
  font-size: 0.75rem;
  font-weight: 600;
  line-height: 1;
  padding: 0.3125rem 0.5rem;
  white-space: nowrap;
}

.dashboard-chip-success {
  background: #dcfce7;
  color: #166534;
}

.dashboard-chip-danger {
  background: #fee2e2;
  color: #991b1b;
}

.dashboard-chip-theme {
  background: color-mix(in srgb, var(--sidebar-theme-color) 12%, white);
  color: var(--sidebar-theme-color);
}

@media (prefers-color-scheme: dark) {
  .dashboard-chip-success {
    background: rgba(34, 197, 94, 0.18) !important;
    color: #dcfce7 !important;
  }

  .dashboard-chip-danger {
    background: rgba(239, 68, 68, 0.18) !important;
    color: #fecaca !important;
  }

  .dashboard-chip-theme {
    background: color-mix(in srgb, var(--sidebar-theme-color) 24%, #1f2937) !important;
    color: #f5f5f5 !important;
  }
}

html[data-color-scheme="dark"] .dashboard-chip-success {
  background: rgba(34, 197, 94, 0.18) !important;
  color: #dcfce7 !important;
}

html[data-color-scheme="dark"] .dashboard-chip-danger {
  background: rgba(239, 68, 68, 0.18) !important;
  color: #fecaca !important;
}

html[data-color-scheme="dark"] .dashboard-chip-theme {
  background: color-mix(in srgb, var(--sidebar-theme-color) 24%, #1f2937) !important;
  color: #f5f5f5 !important;
}

@keyframes empty-state-swing {
  0%   { transform: perspective(400px) rotateY(0deg); }
  20%  { transform: perspective(400px) rotateY(24deg); }
  50%  { transform: perspective(400px) rotateY(0deg); }
  75%  { transform: perspective(400px) rotateY(-24deg); }
  100% { transform: perspective(400px) rotateY(0deg); }
}

@keyframes empty-state-pulse {
  0%, 100% { scale: 1; }
  50%       { scale: 1.06; }
}

.empty-state-animate {
  animation: empty-state-swing 10s ease-in-out infinite,
             empty-state-pulse 18s ease-in-out infinite;
}

.dashboard-empty-state {
  align-items: center;
  color: #6b7280;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 2rem 1rem;
  text-align: center;
}

.dashboard-todo-list {
  background: var(--dashboard-todo-bg, #ffffff);
  border: 1px solid var(--ada-chat-border-color);
  border-radius: 0.625rem;
  overflow: hidden;
}

.dashboard-todo-row {
  align-items: center;
  display: flex;
  gap: 0.75rem;
  min-width: 0;
  padding: 0.75rem 0.875rem;
  transition: background-color 0.15s ease;
}

.dashboard-todo-row + .dashboard-todo-row {
  border-top: 1px solid var(--dashboard-todo-divider, #f3f4f6);
}

.dashboard-todo-row:hover {
  background: var(--dashboard-todo-hover-bg, color-mix(in srgb, var(--sidebar-theme-color) 3%, white));
}

.dashboard-todo-check {
  align-items: center;
  background: var(--dashboard-todo-check-bg, #ffffff);
  border: 1.5px solid var(--dashboard-todo-check-border, #d1d5db);
  border-radius: 0.375rem;
  color: transparent;
  display: inline-flex;
  flex-shrink: 0;
  height: 1.25rem;
  justify-content: center;
  transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease;
  width: 1.25rem;
}

.dashboard-todo-check:hover {
  border-color: #10b981;
  color: #10b981;
}

.dashboard-todo-check.is-complete {
  background: #10b981;
  border-color: #10b981;
  color: #ffffff;
}

.dashboard-todo-text {
  color: var(--dashboard-todo-text, #374151);
  font-size: 0.875rem;
  line-height: 1.35;
}

/* Success color utilities (green) */
.text-success {
  color: #16a34a !important; /* green-600 */
}

.bg-success {
  background-color: #36D96C !important; /* HRP success-500 */
}

/* Danger/Error color utilities (red) */
.text-danger {
  color: #E83A3A !important; /* HRP error-500 */
}

.bg-danger {
  background-color: #f87171 !important; /* red-400 - lighter for progress bars */
}

.hover\:text-danger-600:hover {
  color: #B91C1C !important;
}

/* Warning color utilities (yellow) */
.text-warning {
  color: #a16207 !important; /* yellow-700 */
}

.bg-warning {
  background-color: #EBAC2F !important; /* HRP warning-500 */
}

/* Info color utilities (blue) */
.text-info {
  color: #2C57F2 !important; /* HRP info-500 */
}

.bg-info {
  background-color: #60a5fa !important; /* blue-400 - lighter for progress bars */
}

/* =================================================================
   HTMX Indicator Styles
   ================================================================= */

/* Hide HTMX indicators by default */
.htmx-indicator {
  display: none;
}

/* Show indicators when HTMX request is in progress */
.htmx-request .htmx-indicator,
.htmx-request.htmx-indicator {
  display: inline-block;
}

/* Hide clock icons during HTMX requests when spinner is showing */
.htmx-request .clock-icon {
  display: none;
}

/* Hide checklist toggle icon while request spinner is active */
.htmx-request .checklist-toggle-icon {
  visibility: hidden;
}

/* =================================================================
   Button Loading State
   ================================================================= */

button[data-loading="true"] {
  cursor: progress;
}

button[data-loading="true"]:not([data-loading-no-spinner="true"])::after {
  content: "";
  display: inline-block;
  width: 0.9em;
  height: 0.9em;
  margin-left: 0.5rem;
  border: 2px solid currentColor;
  border-right-color: transparent;
  border-radius: 9999px;
  vertical-align: -0.12em;
  animation: spin 0.8s linear infinite;
}

/* =================================================================
   Responsive Utilities and Mobile Menu
   ================================================================= */

/* Hide columns on mobile that should only show on desktop */
@media (max-width: 767px) {
  .hide-mobile {
    display: none !important;
  }
}

/* Mobile (screens smaller than 768px) */
@media (max-width: 767px) {
  /* Sidebar - hidden by default on mobile */
  aside.sidebar {
    transform: translateX(-100%) !important;
    /* Transition handled by Alpine x-transition */
  }

  /* Sidebar visible when Alpine sets translate-x-0 class */
  aside.sidebar.translate-x-0 {
    transform: translateX(0) !important;
  }

  /* Main content - no left margin on mobile */
  main {
    margin-left: 0 !important;
  }

  /* Mobile hamburger button - MUST be visible on mobile */
  /* Super specific selector to override Tailwind CDN */
  header .flex.items-center.justify-between > .flex.items-center button:first-child,
  header button.p-2.rounded-lg,
  header > * > * > button {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    opacity: 1 !important;
    visibility: visible !important;
    pointer-events: auto !important;
  }

  /* Hide elements that should only show on desktop - but NOT the hamburger button */
  .hidden.md\:flex:not(button),
  .hidden.md\:block:not(button),
  .hidden.lg\:block:not(button) {
    display: none !important;
  }
}

/* Desktop (screens 768px and larger) */
@media (min-width: 768px) {
  /* Sidebar - always visible on desktop */
  aside.sidebar {
    transform: translateX(0) !important;
  }

  /* Main content - add left margin for sidebar */
  main {
    margin-left: 16rem; /* 256px = w-64 */
  }

  /* Show desktop elements */
  .hidden.md\:flex {
    display: flex !important;
  }

  .hidden.lg\:block {
    display: block !important;
  }

  .md\:flex-1 {
    flex: 1 1 0%;
  }
}

/* =================================================================
   Basic HTML Element Styling for User-Generated Content
   (Summernote editor, widget content, etc.)

   NOTE: Only applies to content explicitly wrapped in .widget-content
   This keeps widget tables and other elements unaffected.
   ================================================================= */

/* Headings */
.widget-content h1 {
  font-size: 1.875rem;
  font-weight: 700;
  margin-bottom: 1rem;
  margin-top: 1.5rem;
  line-height: 1.2;
}

.widget-content h2 {
  font-size: 1.5rem;
  font-weight: 600;
  margin-bottom: 0.875rem;
  margin-top: 1.25rem;
  line-height: 1.3;
}

.widget-content h3 {
  font-size: 1.25rem;
  font-weight: 600;
  margin-bottom: 0.75rem;
  margin-top: 1rem;
  line-height: 1.4;
}

.widget-content h4 {
  font-size: 1.125rem;
  font-weight: 600;
  margin-bottom: 0.625rem;
  margin-top: 0.875rem;
  line-height: 1.4;
}

.widget-content h5 {
  font-size: 1rem;
  font-weight: 600;
  margin-bottom: 0.5rem;
  margin-top: 0.75rem;
  line-height: 1.5;
}

.widget-content h6 {
  font-size: 0.875rem;
  font-weight: 600;
  margin-bottom: 0.5rem;
  margin-top: 0.75rem;
  line-height: 1.5;
}

/* First heading should not have top margin */
.widget-content h1:first-child,
.widget-content h2:first-child,
.widget-content h3:first-child,
.widget-content h4:first-child,
.widget-content h5:first-child,
.widget-content h6:first-child {
  margin-top: 0;
}

/* Paragraphs */
.widget-content p {
  margin-bottom: 0.75rem;
}

.widget-content p:last-child {
  margin-bottom: 0;
}

/* Unordered lists */
.widget-content ul {
  list-style-type: disc;
  margin-left: 1.5rem;
  margin-bottom: 0.75rem;
  padding-left: 0.5rem;
}

/* Ordered lists */
.widget-content ol {
  list-style-type: decimal;
  margin-left: 1.5rem;
  margin-bottom: 0.75rem;
  padding-left: 0.5rem;
}

/* List items */
.widget-content li {
  margin-bottom: 0.25rem;
  line-height: 1.5;
}

/* Nested lists */
.widget-content ul ul,
.widget-content ol ol,
.widget-content ul ol,
.widget-content ol ul {
  margin-top: 0.25rem;
  margin-bottom: 0.25rem;
}

/* Text formatting */
.widget-content b,
.widget-content strong {
  font-weight: 700;
}

.widget-content i,
.widget-content em {
  font-style: italic;
}

.widget-content u {
  text-decoration: underline;
}

.widget-content s,
.widget-content strike,
.widget-content del {
  text-decoration: line-through;
}

/* Links */
.widget-content a {
  color: var(--sidebar-theme-color);
  text-decoration: underline;
  transition: opacity 0.15s ease-in-out;
}

.widget-content a:hover {
  opacity: 0.8;
}

/* Blockquotes */
.widget-content blockquote {
  border-left: 4px solid color-mix(in srgb, var(--sidebar-theme-color) 30%, transparent);
  padding-left: 1rem;
  margin-left: 0;
  margin-right: 0;
  margin-bottom: 0.75rem;
  font-style: italic;
  color: #6B7280;
}

/* Horizontal rules */
.widget-content hr {
  border: 0;
  border-top: 1px solid #E5E7EB;
  margin: 1.5rem 0;
}

/* TipTap saved media alignment */
.widget-content img,
.widget-content iframe {
  max-width: 100%;
}

.widget-content img[data-align="left"],
.widget-content iframe[data-align="left"] {
  display: block;
  margin-left: 0;
  margin-right: auto;
}

.widget-content img[data-align="center"],
.widget-content iframe[data-align="center"] {
  display: block;
  margin-left: auto;
  margin-right: auto;
}

.widget-content img[data-align="right"],
.widget-content iframe[data-align="right"] {
  display: block;
  margin-left: auto;
  margin-right: 0;
}

/* Widget Styling - Theme-based borders and icons */
/* Override default neutral borders with themed borders - but NOT buttons, links, or form inputs */
.bg-white.rounded-lg.border:not(button):not(a):not(input):not(textarea):not(select) {
  border-color: var(--widget-border) !important;
}

/* Widget header icons - use theme color (exclude buttons/links so action button text stays neutral) */
.bg-neutral-50.border-b .text-neutral-600:not(button):not(a),
.bg-blue-50.border-b .text-blue-600:not(button):not(a) {
  color: var(--widget-header-icon) !important;
}

/* Main page container header icons - use theme color */
.widget-header-icon svg {
  color: var(--widget-header-icon) !important;
}

/* Widget table headers - use theme color */
.bg-white.rounded-lg table thead th,
.bg-white.rounded-lg table thead td strong,
.bg-white.rounded-lg table thead th strong {
  color: var(--widget-header-icon) !important;
}

/* Employee view modernization */
.employee-sidebar-table,
.employee-detail-table {
  table-layout: fixed;
}

.employee-sidebar-table td,
.employee-detail-table td {
  vertical-align: top;
  word-break: break-word;
}

.employee-sidebar-table td:first-child,
.employee-detail-table td:first-child {
  width: 42%;
}

.employee-info-table td:first-child {
  width: 44%;
  white-space: normal !important;
}

.employee-info-table td:last-child {
  text-align: right;
}

.employee-info-table td:last-child > strong,
.employee-info-table td:last-child > em,
.employee-info-table td:last-child > span,
.employee-info-table td:last-child > div,
.employee-info-table td:last-child > a {
  max-width: 100%;
  margin-left: auto;
}

.employee-module-link {
  min-height: 2.25rem;
  border-radius: 0.25rem;
  transition: background-color 0.15s ease, color 0.15s ease;
}

.employee-module-link:hover {
  background-color: color-mix(in srgb, var(--sidebar-theme-color) 8%, white);
}

.employee-module-link::after {
  content: '›';
  color: #D1D5DB;
  font-size: 16px;
  line-height: 1;
  flex-shrink: 0;
}

.employee-module-link-active {
  background-color: color-mix(in srgb, var(--sidebar-theme-color) 10%, white);
  color: var(--sidebar-theme-color) !important;
  font-weight: 600;
}

.employee-module-link-inactive {
  color: #374151;
}

.employee-module-link-icon {
  display: flex;
  flex-shrink: 0;
  align-items: center;
  justify-content: center;
  width: 1.125rem;
  height: 1.125rem;
  color: var(--sidebar-theme-color);
}

.employee-module-link-icon svg {
  width: 16px;
  height: 16px;
}

.employee-activity-timeline {
  position: relative;
}

.employee-activity-item {
  position: relative;
  padding-left: 3rem;
  padding-top: 1.25rem;
}

.employee-activity-item + .employee-activity-item {
  margin-top: 0.875rem;
  padding-top: 1.25rem;
  border-top: 1px solid #f3f4f6;
}

/* Each item draws its own segment of the timeline line — works through infinite scroll.
   bottom: -0.875rem bridges the margin-top gap to the next item so segments connect. */
.employee-activity-item::before {
  content: '';
  position: absolute;
  left: 1rem; /* horizontal centre of the 2rem-wide marker */
  top: 0;
  bottom: -0.875rem;
  width: 1px;
  background: #d1d5db;
  z-index: 0;
}

/* First item: line starts at the marker centre, not the item top */
.employee-activity-item:first-child::before {
  top: 1.875rem; /* marker top (0.875rem) + marker radius (1rem) */
}

.employee-activity-marker {
  position: absolute;
  left: 0;
  top: 0.875rem;
  display: flex;
  height: 2rem;
  width: 2rem;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: white;
  border: 1px solid #e5e7eb;
  color: #d1d5db;
  z-index: 1; /* sits above the ::before line */
}

.employee-activity-card .employee-activity-badge {
  padding: 0.125rem 0.4rem;
  font-size: 0.6rem;
  line-height: 0.875rem;
  letter-spacing: 0.07em;
}

.employee-activity-card .employee-activity-badge svg {
  width: 8px;
  height: 8px;
}

.employee-activity-card .employee-activity-meta {
  justify-content: flex-start;
  text-align: left;
  font-style: normal;
}

/* Tribute dropdown styling for note tagging */
.tribute-container {
  position: absolute;
  z-index: 70;
  max-width: 13rem;
}

.employee-action-menu > summary {
  list-style: none;
}

.employee-action-menu > summary::-webkit-details-marker {
  display: none;
}

.tribute-container ul {
  margin: 0;
  padding: 0.25rem;
  list-style: none;
  border: 1px solid #dbe3f0;
  border-radius: 0.875rem;
  background: #ffffff;
  box-shadow: 0 18px 40px -24px rgba(15, 23, 42, 0.4);
  overflow-x: hidden;
  overflow-y: auto;
  max-height: 12rem;
}

.tribute-container li {
  margin: 0;
  padding: 0.35rem 0.55rem;
  border-radius: 0.625rem;
  color: #334155;
  font-size: 0.8125rem;
  line-height: 1.15rem;
  cursor: pointer;
}

.tribute-container li + li {
  margin-top: 0.125rem;
}

.tribute-container li.highlight,
.tribute-container li:hover {
  background: color-mix(in srgb, var(--sidebar-theme-color) 10%, white);
  color: var(--sidebar-theme-color);
}

.employee-activity-card {
  border: none;
  border-radius: 0;
  background: none;
  padding: 0;
  box-shadow: none;
}

/* Activity feed scroll container */
#activity-scroll-container {
  overflow-x: hidden;
  overflow-y: auto;
  max-height: 520px; /* mobile / small screen cap */
  scrollbar-width: thin;
  scrollbar-color: color-mix(in srgb, var(--sidebar-theme-color) 25%, #e5e7eb) transparent;
}

@media (min-width: 1024px) {
  #activity-scroll-container {
    /* sticky top (80px) + card header (~54px) + breathing room (~16px) = 150px */
    max-height: calc(100vh - 150px);
  }
}

/* Chart pages (/chart/absence, /chart/turnover) - filters sidebar + chart area.
   Stacked on mobile/tablet; fixed sidebar column once there's room for it. */
.chart-sidebar-grid {
  grid-template-columns: minmax(0, 1fr);
}

@media (min-width: 1024px) {
  .chart-sidebar-grid {
    grid-template-columns: 280px minmax(0, 1fr);
  }
}

#activity-scroll-container::-webkit-scrollbar {
  width: 4px;
}

#activity-scroll-container::-webkit-scrollbar-track {
  background: transparent;
}

#activity-scroll-container::-webkit-scrollbar-thumb {
  background: color-mix(in srgb, var(--sidebar-theme-color) 25%, #e5e7eb);
  border-radius: 2px;
}

/* Activity feed infinite scroll sentinel + spinner */
@keyframes activity-spin {
  to { transform: rotate(360deg); }
}

.activity-spinner {
  width: 14px;
  height: 14px;
  border: 2px solid #e5e7eb;
  border-top-color: var(--sidebar-theme-color);
  border-radius: 50%;
  animation: activity-spin 0.7s linear infinite;
  flex-shrink: 0;
}

/* Goals widget row dividers - keep consistent across all rows */
.goal-widget-list > .goal-element + .goal-element {
  border-top: 1px solid #e5e7eb;
}

/*
 * Theme Customization Guide:
 * --------------------------
 * To change the entire portal theme, simply update --sidebar-theme-color at the top.
 * All other colors will automatically adjust:
 *
 * Sidebar:
 *   - Main menu active: Solid background with white text (prominent)
 *   - Submenu active: 15% opacity background with colored text (subtle)
 *   - Submenu border: 20% opacity of theme color
 *
 * Widgets:
 *   - Widget borders: 15% opacity of theme color (thin, light, subtle)
 *   - Widget header icons: Full theme color (matches main menu active)
 *
 * Available theme colors:
 *   - Pink (default): #EC4580
 *   - Purple: #6062F6
 *   - Indigo: #1B2C5D
 */

/*
 * Note: Widget-specific CSS overrides remain in their respective widget partials
 * because they need to target dynamically generated IDs:
 * - _dashboard_header.haml: #dashboard_header override
 * - _shortcuts.haml: #shortcuts override (conditional based on preferences)
 * - Other widgets may have similar specific overrides
 */

/* Pagy Pagination Styling */
nav.pagy.nav,
nav.pagy-bootstrap.series-nav {
  display: flex;
  align-items: center;
  justify-content: center;
  margin-top: 0.75rem;
}

nav.pagy-bootstrap.series-nav .pagination {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  flex-wrap: wrap;
  margin: 0;
  padding: 0;
  list-style: none;
}

nav.pagy.nav a,
nav.pagy.nav span,
nav.pagy-bootstrap.series-nav .page-link {
  padding: 0.5rem 0.75rem;
  font-size: 0.875rem;
  line-height: 1.25rem;
  font-weight: 500;
  border-radius: 0.5rem;
  transition: all 0.15s ease-in-out;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 2.5rem;
}

nav.pagy.nav a {
  color: #374151;
  background-color: #ffffff;
  border: 1px solid #d1d5db;
  text-decoration: none;
}

nav.pagy-bootstrap.series-nav .page-link {
  color: #374151;
  background-color: #ffffff;
  border: 1px solid #d1d5db;
  text-decoration: none;
}

nav.pagy.nav a:hover,
nav.pagy-bootstrap.series-nav .page-link:hover {
  background-color: #f9fafb;
  color: #111827;
  text-decoration: none;
}

nav.pagy.nav a.current,
nav.pagy.nav a[aria-current="page"],
nav.pagy-bootstrap.series-nav .page-item.active .page-link {
  background-color: #2563eb;
  color: #ffffff;
  border: 1px solid #2563eb;
  pointer-events: none;
}

nav.pagy.nav a[aria-disabled="true"],
nav.pagy-bootstrap.series-nav .page-item.disabled .page-link {
  color: #9ca3af;
  background-color: #f3f4f6;
  border: 1px solid #e5e7eb;
  cursor: not-allowed;
  pointer-events: none;
}

nav.pagy.nav span.gap {
  color: #9ca3af;
  padding-left: 0.5rem;
  padding-right: 0.5rem;
  border: none;
  background: transparent;
}

nav.pagy-bootstrap.series-nav .page-item {
  margin: 0;
}

nav.pagy-bootstrap.series-nav .page-item.gap .page-link {
  color: #9ca3af;
  border-color: transparent;
  background: transparent;
  min-width: auto;
  padding-left: 0.25rem;
  padding-right: 0.25rem;
}

/* =================================================================
   DropZone File Upload Styles
   ================================================================= */

/* DropZone container styling */
.dropzone-container {
  min-height: 150px;
}

/* Hide default DropZone message margin */
.dropzone-container .dz-message {
  margin: 0;
}

/* Hide message when uploads are in progress */
.dropzone-container.dz-started .dz-message {
  display: none !important;
}

/* Hide default DropZone progress bar (we use custom Tailwind one) */
.dz-preview .dz-progress {
  display: none;
}

/* Hide success/error marks by default */
.dz-preview .dz-success-mark,
.dz-preview .dz-error-mark {
  display: none;
}

/* Show success mark only when upload succeeds */
.dz-preview.dz-success .dz-success-mark {
  display: block;
}

/* Show error mark only when upload fails */
.dz-preview.dz-error .dz-error-mark {
  display: block;
}

/* =================================================================
   Pinboard Sticky Note Styles
   ================================================================= */

/* Sticky note base styling with shadow and slight tilt */
.sticky-note {
  position: relative;
  box-shadow:
    0 1px 3px rgba(0, 0, 0, 0.12),
    0 1px 2px rgba(0, 0, 0, 0.1);
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  cursor: default;
  z-index: 1;
  flex-shrink: 0;
}

/* Enhanced shadow on hover - straighten and zoom */
.sticky-note:hover {
  box-shadow:
    0 20px 35px rgba(0, 0, 0, 0.2),
    0 10px 15px rgba(0, 0, 0, 0.15);
  /* Use translate3d for better browser compatibility */
  transform: rotate(0deg) scale(1.08) translate3d(0, -8px, 0) !important;
  /* Reset Tailwind's transform variables for Firefox compatibility */
  --tw-rotate: 0deg !important;
  --tw-scale-x: 1.08 !important;
  --tw-scale-y: 1.08 !important;
  z-index: 100 !important;
}

/* Subtle texture overlay for paper effect */
.sticky-note::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-image:
    repeating-linear-gradient(
      0deg,
      transparent,
      transparent 2px,
      rgba(0, 0, 0, 0.015) 2px,
      rgba(0, 0, 0, 0.015) 4px
    );
  pointer-events: none;
  border-radius: inherit;
}

/* Rotation variations for chaotic pinboard effect */
/* Note: We use Tailwind's rotation utilities (rotate-1, rotate-2, etc.) directly on the element.
   The hover effect below will override any rotation on hover. */

/* Custom scrollbar styling for sticky notes (Webkit browsers) */
.sticky-note ::-webkit-scrollbar {
  width: 6px;
}

.sticky-note ::-webkit-scrollbar-track {
  background: transparent;
}

.sticky-note ::-webkit-scrollbar-thumb {
  background-color: rgba(0, 0, 0, 0.2);
  border-radius: 3px;
}

.sticky-note ::-webkit-scrollbar-thumb:hover {
  background-color: rgba(0, 0, 0, 0.3);
}

/* Keep pinboard note text readable in dark mode on pastel note backgrounds */
@media (prefers-color-scheme: dark) {
  .sticky-note .text-neutral-900 { color: #111827 !important; }
  .sticky-note .text-neutral-700 { color: #1f2937 !important; }
  .sticky-note .text-neutral-600 { color: #374151 !important; }
  .sticky-note .text-neutral-500 { color: #4b5563 !important; }
  .sticky-note .text-neutral-400 { color: #6b7280 !important; }
  .sticky-note .pin-note-title { color: #0f172a !important; }
  .sticky-note .pin-note-body { color: #1f2937 !important; }
  .sticky-note .pin-note-meta { color: #475569 !important; }
  .sticky-note .pin-note-time { color: #64748b !important; }
}

/* =================================================================
   Calendar Page Styles
   ================================================================= */

/* Theme-based styling using CSS variables */
.theme-icon svg,
.theme-icon path {
  color: var(--sidebar-theme-color) !important;
}

.theme-text {
  color: var(--sidebar-theme-color) !important;
}

.theme-bg-button {
  background-color: var(--sidebar-theme-color) !important;
}

.theme-bg-button:hover {
  opacity: 0.9 !important;
}

/* Theme checkbox styling */
.theme-checkbox {
  accent-color: var(--sidebar-theme-color);
}

.theme-checkbox:focus {
  --tw-ring-color: color-mix(in srgb, var(--sidebar-theme-color) 30%, transparent);
}

/* Multi-select consistency in calendar filter form */
#calendar-filter-form .grid > div {
  min-height: 76px;
}

/* Ensure multi-select dropdowns maintain consistent height */
#calendar-filter-form [x-data*="customSelect"] > div[class*="min-h-"] {
  min-height: 42px !important;
  max-height: 42px;
}

/* Allow height to grow when there are multiple lines of selections */
#calendar-filter-form [x-data*="customSelect"] > div[class*="min-h-"]:has(.flex-wrap > span:nth-child(4)) {
  max-height: none;
}

/* FullCalendar 6 Custom Tailwind Styling */
.fc {
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
}

/* Header styling */
.fc .fc-toolbar {
  padding: 1rem 0;
  margin-bottom: 1rem !important;
}

.fc .fc-toolbar-title {
  font-size: 1.5rem;
  font-weight: 600;
  color: #171717;
}

/* Button styling - using lighter theme color with theme border */
.fc .fc-button-primary {
  background-color: color-mix(in srgb, var(--sidebar-theme-color) 15%, transparent) !important;
  border: 1px solid var(--sidebar-theme-color) !important;
  color: var(--sidebar-theme-color) !important;
  padding: 0.375rem 0.75rem !important;
  border-radius: 0.5rem !important;
  font-weight: 500 !important;
  font-size: 0.875rem !important;
  text-transform: capitalize !important;
  box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05) !important;
  transition: all 0.2s !important;
}

/* Responsive button sizing for mobile */
@media (max-width: 640px) {
  .fc .fc-button-primary {
    padding: 0.25rem 0.5rem !important;
    font-size: 0.75rem !important;
  }

  .fc .fc-toolbar-title {
    font-size: 1.125rem !important;
  }
}

.fc .fc-button-primary:hover:not(:disabled) {
  background-color: color-mix(in srgb, var(--sidebar-theme-color) 25%, transparent) !important;
  border-color: var(--sidebar-theme-color) !important;
}

.fc .fc-button-primary:disabled {
  background-color: #f5f5f5 !important;
  border-color: #d4d4d4 !important;
  color: #a3a3a3 !important;
  opacity: 0.5 !important;
  cursor: not-allowed !important;
}

.fc .fc-button-primary:focus {
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--sidebar-theme-color) 30%, transparent) !important;
}

.fc .fc-button-active {
  background-color: color-mix(in srgb, var(--sidebar-theme-color) 25%, transparent) !important;
  border-color: var(--sidebar-theme-color) !important;
  color: var(--sidebar-theme-color) !important;
}

.fc .fc-button-group .fc-button {
  border-radius: 0 !important;
}

.fc .fc-button-group .fc-button:first-child {
  border-top-left-radius: 0.5rem !important;
  border-bottom-left-radius: 0.5rem !important;
}

.fc .fc-button-group .fc-button:last-child {
  border-top-right-radius: 0.5rem !important;
  border-bottom-right-radius: 0.5rem !important;
}

/* Day headers */
.fc .fc-col-header-cell {
  background-color: #f5f5f5;
  color: #404040;
  font-weight: 600;
  font-size: 0.875rem;
  padding: 0.75rem 0.5rem;
  border-color: #e5e5e5 !important;
}

/* Day cells */
.fc .fc-daygrid-day {
  background-color: white;
}

.fc .fc-daygrid-day.fc-day-other {
  background-color: #fafafa;
}

.fc .fc-daygrid-day.fc-day-today {
  background-color: #fef3f2 !important;
}

.fc .fc-daygrid-day-number {
  color: #171717;
  padding: 0.5rem;
  font-weight: 500;
}

.fc .fc-day-other .fc-daygrid-day-number {
  color: #a3a3a3;
}

/* Events */
.fc-event {
  border-radius: 0.375rem !important;
  padding: 0.25rem 0.5rem !important;
  font-size: 0.813rem !important;
  font-weight: 500 !important;
  border: none !important;
  margin: 0.125rem !important;
}

.fc-event:hover {
  opacity: 0.9;
}

/* List view */
.fc .fc-list-event-time, .fc .fc-list-event-title {
  color: #404040;
}

/* Time grid */
.fc .fc-timegrid-slot {
  height: 3rem;
  border-bottom: 1px solid #f5f5f5 !important;
}

.fc .fc-timegrid-axis {
  color: #737373;
  font-size: 0.813rem;
}

/* Borders */
.fc td, .fc th {
  border-color: #e5e5e5 !important;
}

/* FullCalendar dark mode */
@media (prefers-color-scheme: dark) {
  .fc .fc-toolbar-title {
    color: #e5e7eb !important;
  }

  .fc .fc-button-primary {
    background-color: rgba(30, 41, 59, 0.9) !important;
    border-color: #475569 !important;
    color: #e2e8f0 !important;
  }

  .fc .fc-button-primary:hover:not(:disabled),
  .fc .fc-button-active {
    background-color: #1e293b !important;
    border-color: #64748b !important;
    color: #f8fafc !important;
  }

  .fc .fc-button-primary:disabled {
    background-color: #334155 !important;
    border-color: #475569 !important;
    color: #94a3b8 !important;
    opacity: 0.7 !important;
  }

  .fc .fc-col-header-cell {
    background-color: #111827 !important;
    color: #cbd5e1 !important;
    border-color: #334155 !important;
  }

  .fc .fc-daygrid-day,
  .fc .fc-daygrid-day-frame,
  .fc .fc-scrollgrid,
  .fc .fc-scrollgrid-section > * {
    background-color: #111827 !important;
  }

  .fc .fc-daygrid-day.fc-day-other {
    background-color: #0b1220 !important;
  }

  .fc .fc-daygrid-day.fc-day-today {
    background-color: rgba(37, 99, 235, 0.2) !important;
  }

  .fc .fc-daygrid-day-number {
    color: #e5e7eb !important;
  }

  .fc .fc-day-other .fc-daygrid-day-number {
    color: #64748b !important;
  }

  .fc .fc-list-event-time,
  .fc .fc-list-event-title,
  .fc .fc-timegrid-axis {
    color: #cbd5e1 !important;
  }

  .fc .fc-timegrid-slot {
    border-bottom-color: #334155 !important;
  }

  .fc td,
  .fc th {
    border-color: #334155 !important;
  }
}

/* =================================================================
   2-Tone Module Icon Support
   ================================================================= */

/* Legacy single-color icons - use --icon-color variable */
.icon:not(.icon-2tone) path {
  stroke: var(--icon-color, currentColor);
}

/* 2-tone icons - default to primary color for all paths (stroke and fill) */
.icon-2tone path {
  stroke: var(--icon-primary, currentColor) !important;
  fill: var(--icon-primary, currentColor) !important;
}

/* 2-tone icons - outline layer (border/frame elements) - no fill, stroke only */
.icon-2tone path[data-layer="outline"] {
  stroke: var(--icon-outline, var(--sidebar-text)) !important;
  fill: none !important;
}

/* 2-tone icons - secondary layer (accent/fill elements) - lighter shade */
.icon-2tone path[data-layer="secondary"] {
  stroke: var(--icon-secondary, var(--icon-primary)) !important;
  fill: var(--icon-secondary, var(--icon-primary)) !important;
}

/* 2-tone icons - highlight layer (white accent elements) */
.icon-2tone path[data-layer="highlight"] {
  stroke: var(--icon-highlight, #FFFFFF) !important;
  fill: var(--icon-highlight, #FFFFFF) !important;
}

/* Active state styling - make icons white/light on colored background */
.sidebar-link.active .icon-2tone path {
  stroke: none !important;
  fill: none !important;
}

.sidebar-link.active .icon-2tone path[data-layer="outline"] {
  stroke: #FFFFFF !important;
  fill: none !important;
}

.sidebar-link.active .icon-2tone path[data-layer="secondary"] {
  stroke: none !important;
  fill: none !important;
}

.sidebar-link.active .icon-2tone path[data-layer="highlight"] {
  stroke: #FFFFFF !important;
  fill: none !important;
}

/* =================================================================
   Flatpickr Icon Wrapper
   Injected by admin-datepicker.js around inputs that lack a calendar icon.
   ================================================================= */

/* Outer wrapper gets full-width block layout to match the surrounding form row */
.flatpickr-icon-wrapper {
  display: block;
  width: 100%;
  position: relative;
}

/* Flatpickr wraps inputs in an inline-block .flatpickr-wrapper — force block so it
   participates in the normal flow (fixes height misalignment next to selects) */
.flatpickr-wrapper {
  display: block !important;
  width: 100% !important;
}

/* Input inside the icon wrapper: full-width, pointer cursor */
.flatpickr-icon-wrapper input,
input.datepicker,
input.datepicker-th {
  cursor: pointer;
}

/* =================================================================
   Flatpickr Datepicker Tailwind Theme
   Modern theme with rounded design using portal theme color
   ================================================================= */

/* Calendar container - rounded with shadow and border */
.flatpickr-calendar {
  font-family: inherit;
  border-radius: 0.75rem !important;
  padding: 0 !important;
  box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
  border: 1px solid #d1d5db !important;
  background: white;
}

/* Month/year header - white background with bottom border */
.flatpickr-months {
  background: white !important;
  border-radius: 0.75rem 0.75rem 0 0;
  padding: 0.75rem;
  margin-bottom: 0.5rem;
  border-bottom: 1px solid #e5e7eb !important;
  height: auto !important;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
}

.flatpickr-month {
  height: auto !important;
  display: flex !important;
  align-items: center !important;
  flex: 1 !important;
}

.flatpickr-current-month {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 0.5rem !important;
  height: auto !important;
  padding: 0 !important;
  flex: 1 !important;
  position: static !important;
  transform: none !important;
  color: #1f2937 !important;
}

/* Month dropdown - looks like normal text, dark color on white background, larger text */
.flatpickr-current-month .flatpickr-monthDropdown-months {
  color: #1f2937 !important;
  font-weight: 600 !important;
  font-size: 1.125rem !important;
  padding: 0 0.25rem !important;
  margin: 0 !important;
  border: none !important;
  background: transparent !important;
  -webkit-appearance: none !important;
  -moz-appearance: none !important;
  appearance: none !important;
  cursor: pointer !important;
  display: inline-block !important;
  visibility: visible !important;
  opacity: 1 !important;
  width: auto !important;
  min-width: auto !important;
  outline: none !important;
  box-shadow: none !important;
  height: auto !important;
  line-height: normal !important;
}

.flatpickr-current-month .flatpickr-monthDropdown-months:hover,
.flatpickr-current-month .flatpickr-monthDropdown-months:focus {
  opacity: 0.9 !important;
  background: transparent !important;
  box-shadow: none !important;
}

/* Year input wrapper - shows spinner with space from next button */
.flatpickr-current-month .numInputWrapper {
  display: inline-block !important;
  width: auto !important;
  height: auto !important;
  visibility: visible !important;
  opacity: 1 !important;
  position: relative !important;
  margin: 0 0.5rem 0 0 !important;
}

/* Year input - looks like normal text, dark color, larger text */
.flatpickr-current-month input.cur-year {
  color: #1f2937 !important;
  font-weight: 600 !important;
  font-size: 1.125rem !important;
  padding: 0 1.5rem 0 0.25rem !important;
  margin: 0 !important;
  height: auto !important;
  line-height: normal !important;
  border-radius: 0 !important;
  border: none !important;
  background: transparent !important;
  display: inline-block !important;
  visibility: visible !important;
  opacity: 1 !important;
  width: 4.5rem !important;
  text-align: left !important;
  outline: none !important;
  box-shadow: none !important;
  -webkit-appearance: none !important;
  -moz-appearance: textfield !important;
}

.flatpickr-current-month input.cur-year:hover,
.flatpickr-current-month input.cur-year:focus {
  opacity: 0.9 !important;
  background: transparent !important;
  box-shadow: none !important;
}

/* Year input arrows - always visible on the right, dark colored */
.flatpickr-current-month .numInputWrapper span {
  position: absolute !important;
  right: 0px !important;
  width: 12px !important;
  height: 8px !important;
  padding: 0 !important;
  cursor: pointer !important;
  border: none !important;
  background: transparent !important;
  opacity: 0.6 !important;
  transition: opacity 0.2s !important;
}

.flatpickr-current-month .numInputWrapper span:hover {
  opacity: 1 !important;
}

.flatpickr-current-month .numInputWrapper span:after {
  display: block !important;
  content: "" !important;
  position: absolute !important;
  left: 50% !important;
  transform: translateX(-50%) !important;
  border: 4px solid transparent !important;
}

.flatpickr-current-month .numInputWrapper span.arrowUp {
  top: 2px !important;
}

.flatpickr-current-month .numInputWrapper span.arrowUp:after {
  border-bottom-color: #1f2937 !important;
  border-top: none !important;
}

.flatpickr-current-month .numInputWrapper span.arrowDown {
  bottom: 2px !important;
}

.flatpickr-current-month .numInputWrapper span.arrowDown:after {
  border-top-color: #1f2937 !important;
  border-bottom: none !important;
}

/* Ensure month text is visible with dark color */
.flatpickr-current-month .cur-month {
  display: inline-block !important;
  visibility: visible !important;
  opacity: 1 !important;
  color: #1f2937 !important;
}

/* Navigation buttons - circular with theme-colored icons, fully opaque, larger and thicker */
.flatpickr-prev-month,
.flatpickr-next-month {
  background: transparent !important;
  border: none !important;
  border-radius: 50% !important;
  width: 2rem !important;
  height: 2rem !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 0 !important;
  transition: background-color 0.2s;
  position: static !important;
  opacity: 1 !important;
}

.flatpickr-prev-month svg,
.flatpickr-next-month svg {
  fill: var(--sidebar-theme-color) !important;
  width: 14px !important;
  height: 14px !important;
  stroke: var(--sidebar-theme-color) !important;
  stroke-width: 0.75px !important;
}

.flatpickr-prev-month:hover,
.flatpickr-next-month:hover {
  background: color-mix(in srgb, var(--sidebar-theme-color) 10%, transparent) !important;
}

.flatpickr-prev-month:hover svg,
.flatpickr-next-month:hover svg {
  fill: var(--sidebar-theme-color) !important;
  stroke: var(--sidebar-theme-color) !important;
}

/* Weekday headers */
.flatpickr-innerContainer {
  padding-bottom: 0.5rem;
}

.flatpickr-rContainer,
.flatpickr-days,
.dayContainer {
  width: 100% !important;
  min-width: 100% !important;
  max-width: 100% !important;
}

.dayContainer {
  display: flex !important;
  flex-wrap: wrap !important;
}

.flatpickr-weekdays {
  background: transparent;
  margin-top: 0.5rem;
}

.flatpickr-weekday {
  color: #6b7280;
  font-weight: 600;
  font-size: 0.875rem;
  width: calc(100% / 7) !important;
  max-width: calc(100% / 7) !important;
  flex: 0 0 calc(100% / 7) !important;
}

/* Day cells - circular */
.flatpickr-day {
  color: #374151;
  height: 2.25rem !important;
  line-height: 2.25rem !important;
  margin: 0 !important;
  border: none !important;
  font-weight: 500;
  width: calc(100% / 7) !important;
  max-width: calc(100% / 7) !important;
  flex: 0 0 calc(100% / 7) !important;
  box-sizing: border-box !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  position: relative !important;
  background: transparent !important;
  z-index: 0 !important;
}

.flatpickr-day::before {
  content: "";
  position: absolute;
  inset: 50% auto auto 50%;
  width: 2.25rem;
  height: 2.25rem;
  transform: translate(-50%, -50%);
  border-radius: 9999px;
  background: transparent;
  border: 0 solid transparent;
  z-index: -1;
}

/* Day hover state */
.flatpickr-day:hover:not(.flatpickr-disabled):not(.selected):not(.today) {
  background: transparent !important;
  border-color: transparent !important;
}

.flatpickr-day:hover:not(.flatpickr-disabled):not(.selected):not(.today)::before {
  background: #f3f4f6;
}

/* Selected date - uses theme color */
.flatpickr-day.selected,
.flatpickr-day.selected:hover,
.flatpickr-day.startRange,
.flatpickr-day.endRange,
.flatpickr-day.selected.inRange,
.flatpickr-day.startRange.inRange,
.flatpickr-day.endRange.inRange,
.flatpickr-day.selected:focus,
.flatpickr-day.startRange:focus,
.flatpickr-day.endRange:focus,
.flatpickr-day.selected.prevMonthDay,
.flatpickr-day.selected.nextMonthDay {
  background: transparent !important;
  border-color: transparent !important;
  color: white !important;
}

.flatpickr-day.selected::before,
.flatpickr-day.selected:hover::before,
.flatpickr-day.startRange::before,
.flatpickr-day.endRange::before,
.flatpickr-day.selected.inRange::before,
.flatpickr-day.startRange.inRange::before,
.flatpickr-day.endRange.inRange::before,
.flatpickr-day.selected:focus::before,
.flatpickr-day.startRange:focus::before,
.flatpickr-day.endRange:focus::before,
.flatpickr-day.selected.prevMonthDay::before,
.flatpickr-day.selected.nextMonthDay::before {
  background: var(--sidebar-theme-color) !important;
}

/* Today's date - theme color border, centered content */
.flatpickr-day.today {
  border: none !important;
  background: transparent !important;
  line-height: normal !important;
}

.flatpickr-day.today::before {
  border-width: 2px;
  border-color: var(--sidebar-theme-color);
}

.flatpickr-day.today:hover {
  background: transparent !important;
  border-color: transparent !important;
}

.flatpickr-day.today:hover::before {
  background: #f3f4f6;
  border-color: var(--sidebar-theme-color);
}

/* Today + selected */
.flatpickr-day.today.selected {
  background: transparent !important;
  border-color: transparent !important;
  color: white !important;
}

.flatpickr-day.today.selected::before {
  background: var(--sidebar-theme-color) !important;
  border-color: var(--sidebar-theme-color) !important;
}

/* Disabled dates */
.flatpickr-day.flatpickr-disabled,
.flatpickr-day.flatpickr-disabled:hover,
.flatpickr-day.prevMonthDay:not(.selected),
.flatpickr-day.nextMonthDay:not(.selected) {
  color: #d1d5db !important;
  cursor: not-allowed;
  background: transparent;
}

/* Time picker (if enabled) */
.flatpickr-time {
  border-top: 1px solid #e5e7eb;
  padding-top: 0.5rem;
  margin-top: 0.5rem;
}

.flatpickr-time input {
  color: #374151;
  font-weight: 600;
}

.flatpickr-time .flatpickr-am-pm {
  color: #374151;
}

/* Goal History Timeline Styling */
#history_section .relative > .absolute {
  /* Vertical connecting line */
  left: 1rem;
  width: 2px;
  background-color: #e5e7eb;
  z-index: 0;
}

#history_section .space-y-0 {
  position: relative;
  z-index: 1;
}

#history_section .flex.gap-3.pb-6 {
  position: relative;
}

/* Ensure history item icons have white background to cover the line */
#history_section .flex-shrink-0.w-8.h-8 {
  background-color: #dbeafe;
  border: 2px solid white;
  position: relative;
  z-index: 2;
}

/* Ensure all input fields and textareas have white backgrounds by default */
input[type="text"],
input[type="email"],
input[type="password"],
input[type="number"],
input[type="tel"],
input[type="url"],
input[type="search"],
input[type="date"],
input[type="time"],
input[type="datetime-local"],
textarea,
select {
  background-color: #ffffff;
}

/* Progress bar stripes for goals over 100% */
.bg-stripes {
  background-image: linear-gradient(
    45deg,
    rgba(255, 255, 255, 0.15) 25%,
    transparent 25%,
    transparent 50%,
    rgba(255, 255, 255, 0.15) 50%,
    rgba(255, 255, 255, 0.15) 75%,
    transparent 75%,
    transparent
  );
  background-size: 1rem 1rem;
  animation: progress-bar-stripes 1s linear infinite;
}

@keyframes progress-bar-stripes {
  0% {
    background-position: 1rem 0;
  }
  100% {
    background-position: 0 0;
  }
}

/* Bootstrap-style progress bar colors mapped to HRP semantic palette */
.bg-success {
  background-color: #36D96C !important; /* HRP success-500 */
}

.bg-warning {
  background-color: #EBAC2F !important; /* HRP warning-500 */
}

.bg-info {
  background-color: #60a5fa !important; /* blue-400 - lighter for progress bars */
}

.bg-danger {
  background-color: #f87171 !important; /* red-400 - lighter for progress bars */
}

/* Confetti animation for goal celebrations */
@keyframes confettiFall {
  0% {
    transform: translateY(0) rotate(0deg);
    opacity: 1;
  }
  100% {
    transform: translateY(110vh) rotate(720deg);
    opacity: 0;
  }
}

/* =================================================================
   Comment Paragraph Styling
   Ensures proper spacing for multi-line comments using simple_format()
   ================================================================= */

/* Comment containers - apply paragraph spacing */
.jobComment p,
.appraisalComment p,
.sticky-note p {
  margin-bottom: 1rem;
  line-height: 1.5;
}

/* Remove margin from last paragraph to prevent extra spacing at bottom */
.jobComment p:last-child,
.appraisalComment p:last-child,
.sticky-note p:last-child {
  margin-bottom: 0;
}

/* Single-line breaks within paragraphs should have some spacing too */
.jobComment br,
.appraisalComment br,
.sticky-note br {
  content: "";
  display: block;
  margin-bottom: 0.25rem;
}

/* Timesheet Grid Layouts */
/* Simple timesheet: Date | Hours | Notes */
@media (min-width: 768px) {
  .md\:grid-cols-timesheet-simple {
    grid-template-columns: 2fr 1fr 3fr;
  }

  /* With project costing: Date | Hours | Project | Activity | Notes */
  .md\:grid-cols-timesheet-with-project {
    grid-template-columns: 1.5fr 1fr 1.5fr 1.5fr 2fr;
  }
}

/* =================================================================
   Number Input Custom Spinners
   Hide native spinners and use custom chevron buttons instead
   ================================================================= */

/* Hide native browser spinners for number inputs */
input[type="number"]::-webkit-inner-spin-button,
input[type="number"]::-webkit-outer-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

input[type="number"] {
  -moz-appearance: textfield;
  appearance: textfield;
}

/* =================================================================
   Leave Addition Form Gradient Background
   ================================================================= */

.leave-addition-gradient {
  background: linear-gradient(to bottom right, #ecfeff, #dbeafe, #e0e7ff);
}

/* =================================================================
   Organization Chart Consolidated View Fixes
   Ensures proper layout in portal context without affecting other apps
   Includes Firefox-specific fixes for flexbox layout
   ================================================================= */

/* Force proper display and layout for consolidated employees */
.native-orgchart .consolidated-employee {
  display: -webkit-box !important;
  display: -moz-box !important;
  display: -ms-flexbox !important;
  display: -webkit-flex !important;
  display: flex !important;
  -webkit-box-orient: horizontal !important;
  -webkit-box-direction: normal !important;
  -moz-box-orient: horizontal !important;
  -moz-box-direction: normal !important;
  -ms-flex-direction: row !important;
  -webkit-flex-direction: row !important;
  flex-direction: row !important;
  -webkit-box-align: center !important;
  -ms-flex-align: center !important;
  -webkit-align-items: center !important;
  align-items: center !important;
  gap: 8px !important;
  padding: 6px 8px !important;
  margin-bottom: 2px !important;
  position: relative !important;
  min-height: 32px !important;
  clear: both !important;
  width: 100% !important;
  box-sizing: border-box !important;
}

/* Ensure avatars display correctly with all prefixes */
.native-orgchart .mini-avatar {
  display: block !important;
  width: 24px !important;
  height: 24px !important;
  min-width: 24px !important;
  min-height: 24px !important;
  max-width: 24px !important;
  max-height: 24px !important;
  border-radius: 50% !important;
  object-fit: cover !important;
  border: 1px solid #ddd !important;
  -webkit-box-flex: 0 !important;
  -moz-box-flex: 0 !important;
  -ms-flex: 0 0 24px !important;
  -webkit-flex: 0 0 24px !important;
  flex: 0 0 24px !important;
  flex-shrink: 0 !important;
  flex-grow: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  float: none !important;
  position: relative !important;
  background-color: #e5e7eb !important;
  background-size: cover !important;
  background-position: center !important;
  vertical-align: middle !important;
}

/* Handle broken/missing avatar images - prevent layout shift */
.native-orgchart .mini-avatar::before {
  content: '' !important;
  display: block !important;
  width: 24px !important;
  height: 24px !important;
  position: absolute !important;
  top: 0 !important;
  left: 0 !important;
  background-color: #e5e7eb !important;
  border-radius: 50% !important;
  z-index: -1 !important;
}

/* Hide broken image icon in Firefox */
.native-orgchart .mini-avatar:not([src]),
.native-orgchart .mini-avatar[src=""],
.native-orgchart .mini-avatar[src*="placeholder"] {
  background-color: #e5e7eb !important;
  color: transparent !important;
}

/* Ensure names display correctly with all prefixes */
.native-orgchart .mini-name {
  display: block !important;
  font-size: 12px !important;
  font-weight: 500 !important;
  color: #444 !important;
  line-height: 1.2 !important;
  -webkit-box-flex: 1 !important;
  -moz-box-flex: 1 !important;
  -ms-flex: 1 1 0% !important;
  -webkit-flex: 1 1 0% !important;
  flex: 1 1 0% !important;
  text-align: left !important;
  white-space: normal !important;
  overflow: visible !important;
  float: none !important;
  clear: none !important;
  margin: 0 !important;
  padding: 0 !important;
  position: relative !important;
  min-width: 0 !important;
}

/* Ensure consolidated content container expands to fit all employees */
.native-orgchart .consolidated-content {
  display: block !important;
  max-height: none !important;
  overflow-y: visible !important;
  padding: 8px 12px !important;
  clear: both !important;
  box-sizing: border-box !important;
}

/* =================================================================
   Org Chart Main View Fixes (Detailed & Simple)
   Ensures avatars appear correctly in Tailwind context
   ================================================================= */

/* Common avatar styles for main nodes */
.native-orgchart .node .avatar {
  display: block !important;
  border-radius: 50% !important;
  object-fit: cover !important;
  flex-shrink: 0 !important;
  -webkit-flex-shrink: 0 !important;
  flex-grow: 0 !important;
  -webkit-flex-grow: 0 !important;
  background-color: #e5e7eb !important;
  position: relative !important;
  z-index: 1 !important;
}

/* Detailed View Avatar - 40px */
.native-orgchart.detailed .node .avatar {
  width: 40px !important;
  height: 40px !important;
  min-width: 40px !important;
  min-height: 40px !important;
  max-width: 40px !important;
  max-height: 40px !important;
  border: 2px solid #fff !important;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1) !important;
}

/* Simple View Avatar - 60px */
.native-orgchart.simple .node .avatar {
  width: 60px !important;
  height: 60px !important;
  min-width: 60px !important;
  min-height: 60px !important;
  max-width: 60px !important;
  max-height: 60px !important;
  border: 4px solid !important; /* Border color comes from inline styles */
  margin: 0 auto 8px !important;
}

/* Handle broken/missing avatars in main view */
.native-orgchart .node .avatar::before {
  content: '' !important;
  display: block !important;
  width: 100% !important;
  height: 100% !important;
  position: absolute !important;
  top: 0 !important;
  left: 0 !important;
  background-color: #e5e7eb !important;
  border-radius: 50% !important;
  z-index: -1 !important;
}

/* Hide broken image icon */
.native-orgchart .node .avatar:not([src]),
.native-orgchart .node .avatar[src=""],
.native-orgchart .node .avatar[src*="placeholder"] {
  background-color: #e5e7eb !important;
  color: transparent !important;
}

/* Prevent circular avatar images and their immediate anchor containers from squishing in flex containers */
img.rounded-full {
  flex-shrink: 0;
  object-fit: cover;
  aspect-ratio: 1 / 1;
}
a:has(> img.rounded-full) {
  flex-shrink: 0;
  width: fit-content;
}

a.dashboard-list-row:has(> img.rounded-full) {
  flex-shrink: 1;
  width: 100%;
}

/* =================================================================
   Shared dark-mode palette (OS dark mode + forced dark mode)
   Uses tokens to avoid repeating the same dark selectors in multiple blocks.
   ================================================================= */

:root {
  --portal-bg-white: #ffffff;
  --portal-bg-neutral-50: #f9fafb;
  --portal-bg-neutral-100: #f3f4f6;
  --portal-text-neutral-900: #111827;
  --portal-text-neutral-800: #1f2937;
  --portal-text-neutral-700: #374151;
  --portal-text-neutral-600: #4b5563;
  --portal-text-neutral-500: #6b7280;
  --portal-text-neutral-400: #9ca3af;
  --portal-border-color-all: #e5e7eb;
  --portal-border-neutral-200: #e5e7eb;
  --portal-border-neutral-300: #d1d5db;
  --portal-divider-color: #f3f4f6;
  --portal-divider-color-alt: #e5e7eb;
  --portal-table-border: #e5e7eb;
  --portal-hover-bg-neutral-50: #f9fafb;
  --portal-input-bg: #ffffff;
  --portal-input-border: #d1d5db;
  --portal-input-color: #111827;
  --portal-input-placeholder: #9ca3af;
  --portal-badge-success-bg: var(--color-success-50);
  --portal-badge-success-color: var(--color-success-700);
  --portal-badge-warning-bg: var(--color-warning-50);
  --portal-badge-warning-color: var(--color-warning-700);
  --portal-badge-danger-bg: var(--color-error-50);
  --portal-badge-danger-color: var(--color-error-700);
  --portal-badge-info-bg: var(--color-info-50);
  --portal-badge-info-color: var(--color-info-700);
  --portal-badge-neutral-bg: #f3f4f6;
  --portal-badge-neutral-color: #374151;
  --portal-text-green: var(--color-success-600);
  --portal-text-yellow: var(--color-warning-600);
  --portal-text-red: var(--color-error-600);
  --portal-text-blue: var(--color-info-600);
  --portal-badges-color: #374151;
  --portal-shortcuts-filter: none;
  --portal-widget-content: inherit;
  --portal-widget-link: inherit;
  --portal-modal-border: unset;
  --portal-modal-shadow: unset;
  --portal-modal-fixed-border: unset;
  --portal-empcal-bg: unset;
  --portal-empcal-border: unset;
  --portal-empcal-cell: unset;
  --portal-empcal-day-other-cell: unset;
  --portal-empcal-day-today: rgba(255, 220, 40, 0.15);
  --portal-empcal-day-number: unset;
  --portal-empcal-day-other-number: unset;
  --portal-empcal-time-color: unset;
  --portal-empcal-slot-border: unset;
  --portal-goal-widget-border: #e5e7eb;
  --portal-timesheet-neutral-900: #111827;
  --portal-timesheet-neutral-800: #1f2937;
  --portal-timesheet-neutral-700: #374151;
  --portal-timesheet-neutral-600: #4b5563;
  --portal-timesheet-neutral-500: #6b7280;
  --portal-timeclock-card-border: color-mix(in srgb, var(--sidebar-theme-color) 25%, transparent);
  --portal-timeclock-status-surface: color-mix(in srgb, var(--sidebar-theme-color) 6%, white);
  --portal-timeclock-elapsed-surface: color-mix(in srgb, var(--sidebar-theme-color) 10%, white);
  --portal-timeclock-pill-idle-bg: #f3f4f6;
  --portal-timeclock-pill-idle-color: #4b5563;
  --portal-timeclock-pill-running-bg: color-mix(in srgb, var(--sidebar-theme-color) 20%, white);
  --portal-timeclock-pill-running-color: var(--sidebar-theme-color);
  --portal-widget-header-icon: unset;
  /* Ada Chat Widget */
  --ada-chat-header-bg: linear-gradient(135deg, color-mix(in srgb, var(--sidebar-theme-color) 8%, white) 0%, #fff 65%);
  --ada-chat-border-color: color-mix(in srgb, var(--sidebar-theme-color) 15%, white);
  --ada-chat-messages-bg: #fafafa;
  --ada-chat-inputbar-bg: color-mix(in srgb, var(--sidebar-theme-color) 5%, white);
  --ada-chat-input-wrapper-bg: #ffffff;
  --ada-chat-input-wrapper-border: color-mix(in srgb, var(--sidebar-theme-color) 35%, white);
  --ada-chat-input-loading-border: #e5e7eb;
  --ada-chat-input-text: #374151;
  --dashboard-list-row-bg: #ffffff;
  --dashboard-list-row-hover-bg: color-mix(in srgb, var(--sidebar-theme-color) 4%, white);
  --dashboard-list-row-text: #1f2937;
  --dashboard-list-icon-bg: color-mix(in srgb, var(--sidebar-theme-color) 8%, white);
  --dashboard-list-icon-border: color-mix(in srgb, var(--sidebar-theme-color) 14%, white);
  --dashboard-chip-bg: #f3f4f6;
  --dashboard-chip-color: #4b5563;
  --dashboard-todo-bg: #ffffff;
  --dashboard-todo-divider: #f3f4f6;
  --dashboard-todo-hover-bg: color-mix(in srgb, var(--sidebar-theme-color) 3%, white);
  --dashboard-todo-check-bg: #ffffff;
  --dashboard-todo-check-border: #d1d5db;
  --dashboard-todo-text: #374151;
}

/* Dark mode tokens — shared by both OS-level and forced dark mode.
   @media handles system preference; html[data-color-scheme] handles
   the in-app toggle. Both resolve to the same variables. */
@media (prefers-color-scheme: dark) {
  :root {
    --sidebar-theme-text-color: #f472b6;
    --sidebar-bg: #0b1220;
    --sidebar-hover: #162032;
    --sidebar-text: #cbd5e1;
    --sidebar-text-hover: #f8fafc;
    --sidebar-border: #334155;
    --sidebar-active-bg: color-mix(in srgb, var(--sidebar-theme-color) 82%, #020617);
    --sidebar-active-text: #ffffff;
    --sidebar-submenu-border: rgba(148, 163, 184, 0.35);
    --portal-bg-white: #171717;
    --portal-bg-neutral-50: #111827;
    --portal-bg-neutral-100: #1f2937;
    --portal-text-neutral-900: #f5f5f5;
    --portal-text-neutral-800: #e5e7eb;
    --portal-text-neutral-700: #d1d5db;
    --portal-text-neutral-600: #9ca3af;
    --portal-text-neutral-500: #94a3b8;
    --portal-text-neutral-400: #64748b;
    --portal-border-color-all: #334155;
    --portal-border-neutral-200: #334155;
    --portal-border-neutral-300: #4b5563;
    --portal-divider-color: #334155;
    --portal-divider-color-alt: #334155;
    --portal-table-border: #334155;
    --portal-hover-bg-neutral-50: #1f2937;
    --portal-input-bg: #1f2937;
    --portal-input-border: #4b5563;
    --portal-input-color: #f5f5f5;
    --portal-input-placeholder: #94a3b8;
    --portal-badge-success-bg: rgba(54, 217, 108, 0.18);
    --portal-badge-success-color: #dcfce7;
    --portal-badge-warning-bg: rgba(235, 172, 47, 0.20);
    --portal-badge-warning-color: #fef9c3;
    --portal-badge-danger-bg: rgba(232, 58, 58, 0.18);
    --portal-badge-danger-color: #fecaca;
    --portal-badge-info-bg: rgba(44, 87, 242, 0.22);
    --portal-badge-info-color: #dbeafe;
    --portal-badge-neutral-bg: #1f2937;
    --portal-badge-neutral-color: #e5e7eb;
    --portal-text-green: #dcfce7;
    --portal-text-yellow: #fef3c7;
    --portal-text-red: #fecaca;
    --portal-text-blue: #dbeafe;
    --portal-badges-color: #e5e7eb;
    --portal-shortcuts-filter: brightness(0.82) saturate(0.88);
    --portal-widget-content: #e5e7eb;
    --portal-widget-link: #93c5fd;
    --portal-modal-border: 1px solid rgba(226, 232, 240, 0.52);
    --portal-modal-shadow: 0 0 0 1px rgba(226, 232, 240, 0.22), 0 20px 45px rgba(0, 0, 0, 0.55);
    --portal-modal-fixed-border: 1px solid rgba(226, 232, 240, 0.48);
    --portal-empcal-bg: #111827;
    --portal-empcal-border: #334155;
    --portal-empcal-cell: #e5e7eb;
    --portal-empcal-day-other-cell: #0b1220;
    --portal-empcal-day-today: rgba(37, 99, 235, 0.35);
    --portal-empcal-day-number: #e5e7eb;
    --portal-empcal-day-other-number: #64748b;
    --portal-empcal-time-color: #cbd5e1;
    --portal-empcal-slot-border: #334155;
    --portal-goal-widget-border: #334155;
    --portal-timesheet-neutral-900: #f5f5f5;
    --portal-timesheet-neutral-800: #e5e7eb;
    --portal-timesheet-neutral-700: #d1d5db;
    --portal-timesheet-neutral-600: #cbd5e1;
    --portal-timesheet-neutral-500: #94a3b8;
    --portal-timeclock-card-border: color-mix(in srgb, var(--sidebar-theme-color) 35%, transparent);
    --portal-timeclock-status-surface: color-mix(in srgb, var(--sidebar-theme-color) 10%, transparent);
    --portal-timeclock-elapsed-surface: color-mix(in srgb, var(--sidebar-theme-color) 14%, transparent);
    --portal-timeclock-pill-idle-bg: #1f2937;
    --portal-timeclock-pill-idle-color: #cbd5e1;
    --portal-timeclock-pill-running-bg: color-mix(in srgb, var(--sidebar-theme-color) 28%, transparent);
    --portal-timeclock-pill-running-color: #f5f5f5;
    --portal-widget-header-icon: #8ea2ff;
    --ada-chat-header-bg: linear-gradient(135deg, color-mix(in srgb, var(--sidebar-theme-color) 12%, #111827) 0%, #111827 65%);
    --ada-chat-border-color: color-mix(in srgb, var(--sidebar-theme-color) 18%, transparent);
    --ada-chat-messages-bg: #111827;
    --ada-chat-inputbar-bg: #0f172a;
    --ada-chat-input-wrapper-bg: #1f2937;
    --ada-chat-input-wrapper-border: color-mix(in srgb, var(--sidebar-theme-color) 35%, transparent);
    --ada-chat-input-loading-border: #374151;
    --ada-chat-input-text: #d1d5db;
    --dashboard-list-row-bg: #1f2937;
    --dashboard-list-row-hover-bg: color-mix(in srgb, var(--sidebar-theme-color) 12%, #1f2937);
    --dashboard-list-row-text: #e5e7eb;
    --dashboard-list-icon-bg: color-mix(in srgb, var(--sidebar-theme-color) 14%, #111827);
    --dashboard-list-icon-border: color-mix(in srgb, var(--sidebar-theme-color) 22%, transparent);
    --dashboard-chip-bg: #374151;
    --dashboard-chip-color: #d1d5db;
    --dashboard-todo-bg: #1f2937;
    --dashboard-todo-divider: #374151;
    --dashboard-todo-hover-bg: color-mix(in srgb, var(--sidebar-theme-color) 12%, #1f2937);
    --dashboard-todo-check-bg: #111827;
    --dashboard-todo-check-border: #4b5563;
    --dashboard-todo-text: #e5e7eb;
  }

  body.skin-9 {
    --sidebar-theme-text-color: #a78bfa;
  }

  body.skin-5 {
    --sidebar-theme-text-color: #93c5fd;
  }
}

/* Forced dark mode via in-app toggle — same tokens as @media above.
   We cannot nest @media inside html[], so we duplicate the selector only.
   The variable values are inherited from :root via the @media block when
   the OS preference matches; this block handles the explicit override. */
html[data-color-scheme="dark"] {
  --sidebar-theme-text-color: #f472b6;
  --sidebar-bg: #0b1220;
  --sidebar-hover: #162032;
  --sidebar-text: #cbd5e1;
  --sidebar-text-hover: #f8fafc;
  --sidebar-border: #334155;
  --sidebar-active-bg: color-mix(in srgb, var(--sidebar-theme-color) 82%, #020617);
  --sidebar-active-text: #ffffff;
  --sidebar-submenu-border: rgba(148, 163, 184, 0.35);
  --portal-bg-white: #171717;
  --portal-bg-neutral-50: #111827;
  --portal-bg-neutral-100: #1f2937;
  --portal-text-neutral-900: #f5f5f5;
  --portal-text-neutral-800: #e5e7eb;
  --portal-text-neutral-700: #d1d5db;
  --portal-text-neutral-600: #9ca3af;
  --portal-text-neutral-500: #94a3b8;
  --portal-text-neutral-400: #64748b;
  --portal-border-color-all: #334155;
  --portal-border-neutral-200: #334155;
  --portal-border-neutral-300: #4b5563;
  --portal-divider-color: #334155;
  --portal-divider-color-alt: #334155;
  --portal-table-border: #334155;
  --portal-hover-bg-neutral-50: #1f2937;
  --portal-input-bg: #1f2937;
  --portal-input-border: #4b5563;
  --portal-input-color: #f5f5f5;
  --portal-input-placeholder: #94a3b8;
  --portal-badge-success-bg: rgba(34, 197, 94, 0.18);
  --portal-badge-success-color: #dcfce7;
  --portal-badge-warning-bg: rgba(245, 158, 11, 0.20);
  --portal-badge-warning-color: #fef3c7;
  --portal-badge-danger-bg: rgba(239, 68, 68, 0.18);
  --portal-badge-danger-color: #fecaca;
  --portal-badge-info-bg: rgba(59, 130, 246, 0.22);
  --portal-badge-info-color: #dbeafe;
  --portal-badge-neutral-bg: #1f2937;
  --portal-badge-neutral-color: #e5e7eb;
  --portal-text-green: #dcfce7;
  --portal-text-yellow: #fef3c7;
  --portal-text-red: #fecaca;
  --portal-text-blue: #dbeafe;
  --portal-badges-color: #e5e7eb;
  --portal-shortcuts-filter: brightness(0.82) saturate(0.88);
  --portal-widget-content: #e5e7eb;
  --portal-widget-link: #93c5fd;
  --portal-modal-border: 1px solid rgba(226, 232, 240, 0.52);
  --portal-modal-shadow: 0 0 0 1px rgba(226, 232, 240, 0.22), 0 20px 45px rgba(0, 0, 0, 0.55);
  --portal-modal-fixed-border: 1px solid rgba(226, 232, 240, 0.48);
  --portal-empcal-bg: #111827;
  --portal-empcal-border: #334155;
  --portal-empcal-cell: #e5e7eb;
  --portal-empcal-day-other-cell: #0b1220;
  --portal-empcal-day-today: rgba(37, 99, 235, 0.35);
  --portal-empcal-day-number: #e5e7eb;
  --portal-empcal-day-other-number: #64748b;
  --portal-empcal-time-color: #cbd5e1;
  --portal-empcal-slot-border: #334155;
  --portal-goal-widget-border: #334155;
  --portal-timesheet-neutral-900: #f5f5f5;
  --portal-timesheet-neutral-800: #e5e7eb;
  --portal-timesheet-neutral-700: #d1d5db;
  --portal-timesheet-neutral-600: #cbd5e1;
  --portal-timesheet-neutral-500: #94a3b8;
  --portal-timeclock-card-border: color-mix(in srgb, var(--sidebar-theme-color) 35%, transparent);
  --portal-timeclock-status-surface: color-mix(in srgb, var(--sidebar-theme-color) 10%, transparent);
  --portal-timeclock-elapsed-surface: color-mix(in srgb, var(--sidebar-theme-color) 14%, transparent);
  --portal-timeclock-pill-idle-bg: #1f2937;
  --portal-timeclock-pill-idle-color: #cbd5e1;
  --portal-timeclock-pill-running-bg: color-mix(in srgb, var(--sidebar-theme-color) 28%, transparent);
  --portal-timeclock-pill-running-color: #f5f5f5;
  --portal-widget-header-icon: #8ea2ff;
  --ada-chat-header-bg: linear-gradient(135deg, color-mix(in srgb, var(--sidebar-theme-color) 12%, #111827) 0%, #111827 65%);
  --ada-chat-border-color: color-mix(in srgb, var(--sidebar-theme-color) 18%, transparent);
  --ada-chat-messages-bg: #111827;
  --ada-chat-inputbar-bg: #0f172a;
  --ada-chat-input-wrapper-bg: #1f2937;
  --ada-chat-input-wrapper-border: color-mix(in srgb, var(--sidebar-theme-color) 35%, transparent);
  --ada-chat-input-loading-border: #374151;
  --ada-chat-input-text: #d1d5db;
  --dashboard-list-row-bg: #1f2937;
  --dashboard-list-row-hover-bg: color-mix(in srgb, var(--sidebar-theme-color) 12%, #1f2937);
  --dashboard-list-row-text: #e5e7eb;
  --dashboard-list-icon-bg: color-mix(in srgb, var(--sidebar-theme-color) 14%, #111827);
  --dashboard-list-icon-border: color-mix(in srgb, var(--sidebar-theme-color) 22%, transparent);
  --dashboard-chip-bg: #374151;
  --dashboard-chip-color: #d1d5db;
  --dashboard-todo-bg: #1f2937;
  --dashboard-todo-divider: #374151;
  --dashboard-todo-hover-bg: color-mix(in srgb, var(--sidebar-theme-color) 12%, #1f2937);
  --dashboard-todo-check-bg: #111827;
  --dashboard-todo-check-border: #4b5563;
  --dashboard-todo-text: #e5e7eb;
}

html[data-color-scheme="dark"] body.skin-9 {
  --sidebar-theme-text-color: #a78bfa;
}

html[data-color-scheme="dark"] body.skin-5 {
  --sidebar-theme-text-color: #93c5fd;
}

/* Dark mode component overrides — shared by both triggers */
@media (prefers-color-scheme: dark) {
  body.indigo { --widget-header-icon: var(--portal-widget-header-icon); }
  .emp-card-header {
    background: linear-gradient(135deg, color-mix(in srgb, var(--sidebar-theme-color) 25%, #1a1025) 0%, color-mix(in srgb, var(--sidebar-theme-color) 14%, #111827) 52%, color-mix(in srgb, var(--sidebar-theme-color) 7%, #0f172a) 100%) !important;
  }
  .emp-card-avatar-halo { background-color: color-mix(in srgb, var(--sidebar-theme-color) 30%, #1a1025) !important; }
  .emp-card-location-badge { background-color: color-mix(in srgb, var(--sidebar-theme-color) 15%, #1f2937) !important; }
  .emp-card-contact-icon {
    background-color: color-mix(in srgb, var(--sidebar-theme-color) 14%, #1f2937) !important;
    color: color-mix(in srgb, var(--sidebar-theme-color) 80%, #94a3b8) !important;
  }
}
html[data-color-scheme="dark"] body.indigo { --widget-header-icon: var(--portal-widget-header-icon); }
html[data-color-scheme="dark"] .emp-card-header {
  background: linear-gradient(135deg, color-mix(in srgb, var(--sidebar-theme-color) 25%, #1a1025) 0%, color-mix(in srgb, var(--sidebar-theme-color) 14%, #111827) 52%, color-mix(in srgb, var(--sidebar-theme-color) 7%, #0f172a) 100%) !important;
}
html[data-color-scheme="dark"] .emp-card-avatar-halo { background-color: color-mix(in srgb, var(--sidebar-theme-color) 30%, #1a1025) !important; }
html[data-color-scheme="dark"] .emp-card-location-badge { background-color: color-mix(in srgb, var(--sidebar-theme-color) 15%, #1f2937) !important; }
html[data-color-scheme="dark"] .emp-card-contact-icon {
  background-color: color-mix(in srgb, var(--sidebar-theme-color) 14%, #1f2937) !important;
  color: color-mix(in srgb, var(--sidebar-theme-color) 80%, #94a3b8) !important;
}

.bg-white { background-color: var(--portal-bg-white) !important; }
.bg-neutral-50 { background-color: var(--portal-bg-neutral-50) !important; }
.bg-neutral-100 { background-color: var(--portal-bg-neutral-100) !important; }
html[data-color-scheme="dark"] .bg-neutral-200 { background-color: #334155 !important; }
@media (prefers-color-scheme: dark) {
  .bg-neutral-200 { background-color: #334155 !important; }
}

.text-neutral-900 { color: var(--portal-text-neutral-900) !important; }
.text-neutral-800 { color: var(--portal-text-neutral-800) !important; }
.text-neutral-700 { color: var(--portal-text-neutral-700) !important; }
.text-neutral-600 { color: var(--portal-text-neutral-600) !important; }
.text-neutral-500 { color: var(--portal-text-neutral-500) !important; }
.text-neutral-400 { color: var(--portal-text-neutral-400) !important; }

:is(.border, .border-t, .border-b, .border-l, .border-r) { border-color: var(--portal-border-color-all) !important; }
.border-neutral-200 { border-color: var(--portal-border-neutral-200) !important; }
.border-neutral-300 { border-color: var(--portal-border-neutral-300) !important; }
/* Preserve colored borders on action button variants (outline_success, outline_danger, etc.) */
button.border-green-300 { border-color: #86efac !important; }
button.border-red-300   { border-color: #fca5a5 !important; }
button.border-blue-300  { border-color: #93c5fd !important; }

:is(.divide-neutral-100 > :not([hidden]) ~ :not([hidden]), .divide-neutral-200 > :not([hidden]) ~ :not([hidden])) { border-color: var(--portal-divider-color) !important; }
:is(.divide-y > :not([hidden]) ~ :not([hidden])) { border-color: var(--portal-divider-color-alt) !important; }

:is(table tr:first-child th, table tr:first-child td, table thead tr, table tbody tr, table th, table td) {
  border-color: var(--portal-table-border) !important;
}

.hover\:bg-neutral-50:hover { background-color: var(--portal-hover-bg-neutral-50) !important; }

:is(
  input[type="text"],
  input[type="email"],
  input[type="password"],
  input[type="number"],
  input[type="tel"],
  input[type="url"],
  input[type="search"],
  input[type="date"],
  input[type="time"],
  input[type="datetime-local"],
  textarea,
  select
) {
  background-color: var(--portal-input-bg) !important;
  border-color: var(--portal-input-border) !important;
  color: var(--portal-input-color) !important;
}
:is(input::placeholder, textarea::placeholder) { color: var(--portal-input-placeholder) !important; }

:is(.badge-success, .bg-green-50, .bg-green-100, .bg-success-50, .bg-success-100, .bg-success-200) {
  background-color: var(--portal-badge-success-bg) !important;
  color: var(--portal-badge-success-color) !important;
}
:is(.badge-warning, .bg-yellow-50, .bg-yellow-100, .bg-warning-50, .bg-warning-100, .bg-warning-200) {
  background-color: var(--portal-badge-warning-bg) !important;
  color: var(--portal-badge-warning-color) !important;
}
:is(.badge-danger, .bg-red-50, .bg-red-100, .bg-error-50, .bg-error-100, .bg-error-200) {
  background-color: var(--portal-badge-danger-bg) !important;
  color: var(--portal-badge-danger-color) !important;
}
:is(.badge-info, .bg-blue-50, .bg-blue-100, .bg-info-100, .bg-info-200) {
  background-color: var(--portal-badge-info-bg) !important;
  color: var(--portal-badge-info-color) !important;
}
:is(.badge-neutral, .bg-neutral-100) {
  background-color: var(--portal-badge-neutral-bg) !important;
  color: var(--portal-badge-neutral-color) !important;
}

:is(.text-green-600, .text-green-700, .text-green-800) { color: var(--portal-text-green) !important; }
:is(.text-yellow-600, .text-amber-600, .text-yellow-700, .text-amber-700, .text-yellow-800, .text-amber-800) { color: var(--portal-text-yellow) !important; }
:is(.text-red-600, .text-red-700, .text-red-800, .text-error-500, .text-error-600, .text-error-700) { color: var(--portal-text-red) !important; }
:is(.text-blue-600, .text-blue-700, .text-blue-800, .text-info-600, .text-info-700, .text-info-800) { color: var(--portal-text-blue) !important; }
:is(.time-ago-toggle, .text-neutral-400, .dark\:text-neutral-500) { color: var(--portal-text-neutral-500) !important; }

html[data-color-scheme="dark"] :is(
  .tab-active,
  .theme-tab-active,
  .theme-selector-active .theme-selector-label,
  .theme-pill-tab-active,
  .text-primary,
  .text-theme,
  .theme-text,
  .theme-icon,
  .theme-icon svg,
  .theme-icon path,
  .btn-theme-outline,
  .btn-theme-light,
  .btn-theme-soft,
  .badge-theme,
  .select-theme-link,
  .select-theme-check,
  .dashboard-list-row-icon,
  .fc .fc-button-primary,
  .fc .fc-button-active,
  [style*="color: var(--sidebar-theme-color)"]
) {
  color: var(--sidebar-theme-text-color) !important;
}

@media (prefers-color-scheme: dark) {
  :is(
    .tab-active,
    .theme-tab-active,
    .theme-selector-active .theme-selector-label,
    .theme-pill-tab-active,
    .text-primary,
    .text-theme,
    .theme-text,
    .theme-icon,
    .theme-icon svg,
    .theme-icon path,
    .btn-theme-outline,
    .btn-theme-light,
    .btn-theme-soft,
    .badge-theme,
    .select-theme-link,
    .select-theme-check,
    .dashboard-list-row-icon,
    .fc .fc-button-primary,
    .fc .fc-button-active,
    [style*="color: var(--sidebar-theme-color)"]
  ) {
    color: var(--sidebar-theme-text-color) !important;
  }
}

html[data-color-scheme="dark"] .bg-warning-400 {
  background-color: #92400e !important;
  color: #ffffff !important;
}

html[data-color-scheme="dark"] .bg-error-500 {
  background-color: #b91c1c !important;
  color: #ffffff !important;
}

@media (prefers-color-scheme: dark) {
  .bg-warning-400 {
    background-color: #92400e !important;
    color: #ffffff !important;
  }

  .bg-error-500 {
    background-color: #b91c1c !important;
    color: #ffffff !important;
  }
}

#shortcuts img { filter: var(--portal-shortcuts-filter); }

#important_notice .widget-content,
#important_notice .widget-content *:not(a),
#company_mission .widget-content,
#company_mission .widget-content *:not(a) { color: var(--portal-widget-content) !important; }

#important_notice .widget-content a,
#company_mission .widget-content a { color: var(--portal-widget-link) !important; }

.modal-content {
  border: var(--portal-modal-border);
  box-shadow: var(--portal-modal-shadow);
}
.fixed.inset-0 > .relative.bg-white.rounded-lg,
.fixed.inset-0 > .relative.bg-white.rounded-2xl,
#appModal .relative.bg-white.rounded-lg,
#appModal .relative.bg-white.rounded-2xl { border: var(--portal-modal-fixed-border); }

/* Dark mode: give fixed modals a lighter background so they read as elevated above the
   darkened backdrop, and add a strong shadow for depth. Also lighten the footer band
   (bg-neutral-50 inside a modal maps to #111827 globally — too dark once the body is lighter).
   Backdrop opacity is increased to 0.80 so the page behind dims strongly and the
   lighter modal surface pops against it. */
@media (prefers-color-scheme: dark) {
  /* Backdrop overlay — much more opaque than the default 0.5 inline style */
  .fixed.inset-0.z-50 > .fixed.inset-0 {
    background-color: rgba(0, 0, 0, 0.80) !important;
  }
  /* Modal container — noticeably lighter than the page (#111827) and darkened backdrop */
  .fixed.inset-0 > .relative.bg-white.rounded-lg,
  .fixed.inset-0 > .relative.bg-white.rounded-2xl,
  #appModal .relative.bg-white.rounded-lg,
  #appModal .relative.bg-white.rounded-2xl {
    background-color: #2d3748 !important;
    border: var(--portal-modal-fixed-border) !important;
    box-shadow: 0 0 0 1px rgba(226, 232, 240, 0.22), 0 25px 60px rgba(0, 0, 0, 0.9) !important;
  }
  /* Modal footer band */
  .fixed.inset-0 > .relative.bg-white.rounded-lg .bg-neutral-50,
  .fixed.inset-0 > .relative.bg-white.rounded-2xl .bg-neutral-50 {
    background-color: #253040 !important;
  }
}

html[data-color-scheme="dark"] .fixed.inset-0.z-50 > .fixed.inset-0 {
  background-color: rgba(0, 0, 0, 0.80) !important;
}

html[data-color-scheme="dark"] :is(
  .fixed.inset-0 > .relative.bg-white.rounded-lg,
  .fixed.inset-0 > .relative.bg-white.rounded-2xl,
  #appModal .relative.bg-white.rounded-lg,
  #appModal .relative.bg-white.rounded-2xl
) {
  background-color: #2d3748 !important;
  border: var(--portal-modal-fixed-border) !important;
  box-shadow: 0 0 0 1px rgba(226, 232, 240, 0.22), 0 25px 60px rgba(0, 0, 0, 0.9) !important;
}

html[data-color-scheme="dark"] :is(
  .fixed.inset-0 > .relative.bg-white.rounded-lg .bg-neutral-50,
  .fixed.inset-0 > .relative.bg-white.rounded-2xl .bg-neutral-50
) {
  background-color: #253040 !important;
}

#employeeCalendar,
#employeeCalendar .fc,
#employeeCalendar .fc-theme-standard .fc-scrollgrid,
#employeeCalendar .fc-theme-standard td,
#employeeCalendar .fc-theme-standard th {
  background-color: var(--portal-empcal-bg) !important;
  border-color: var(--portal-empcal-border) !important;
}
#employeeCalendar .fc-col-header-cell-cushion,
#employeeCalendar .fc-daygrid-day-number,
#employeeCalendar .fc-toolbar-title { color: var(--portal-empcal-cell) !important; }
#employeeCalendar .fc-daygrid-day.fc-day-other { background-color: var(--portal-empcal-day-other-cell) !important; }
#employeeCalendar .fc-daygrid-day.fc-day-today { background-color: var(--portal-empcal-day-today) !important; }
#employeeCalendar .fc-daygrid-day.fc-day-today .fc-daygrid-day-frame { background-color: transparent !important; }
#employeeCalendar .fc-daygrid-day-number { color: var(--portal-empcal-day-number) !important; }
#employeeCalendar .fc-day-other .fc-daygrid-day-number { color: var(--portal-empcal-day-other-number) !important; }
#employeeCalendar .fc .fc-list-event-time,
#employeeCalendar .fc .fc-list-event-title,
#employeeCalendar .fc .fc-timegrid-axis { color: var(--portal-empcal-time-color) !important; }
#employeeCalendar .fc .fc-timegrid-slot { border-bottom-color: var(--portal-empcal-slot-border) !important; }

.goal-widget-list > .goal-element + .goal-element { border-top-color: var(--portal-goal-widget-border) !important; }

.timesheet-dark-fix .text-neutral-900 { color: var(--portal-timesheet-neutral-900) !important; }
.timesheet-dark-fix .text-neutral-800 { color: var(--portal-timesheet-neutral-800) !important; }
.timesheet-dark-fix .text-neutral-700 { color: var(--portal-timesheet-neutral-700) !important; }
.timesheet-dark-fix .text-neutral-600 { color: var(--portal-timesheet-neutral-600) !important; }
.timesheet-dark-fix .text-neutral-500 { color: var(--portal-timesheet-neutral-500) !important; }

.timeclock-status-card {
  border-color: var(--portal-timeclock-card-border) !important;
}
.timeclock-status-surface { background-color: var(--portal-timeclock-status-surface) !important; }
.timeclock-elapsed-surface { background-color: var(--portal-timeclock-elapsed-surface) !important; }
.timeclock-status-pill-idle {
  background-color: var(--portal-timeclock-pill-idle-bg) !important;
  color: var(--portal-timeclock-pill-idle-color) !important;
}
.timeclock-status-pill-running {
  background-color: var(--portal-timeclock-pill-running-bg) !important;
  color: var(--portal-timeclock-pill-running-color) !important;
}

/* =================================================================
   FORCED DARK MODE (employee set Appearance Mode = Always Dark)
   For the shared token-driven rules above, this section keeps only
   behavior that is not already covered by tokenized declarations.
   ================================================================= */

/* Pinboard notes: keep text readable on pastel backgrounds */
:where(html[data-color-scheme="dark"]) .sticky-note .text-neutral-900 { color: #111827 !important; }
:where(html[data-color-scheme="dark"]) .sticky-note .text-neutral-700 { color: #1f2937 !important; }
:where(html[data-color-scheme="dark"]) .sticky-note .text-neutral-600 { color: #374151 !important; }
:where(html[data-color-scheme="dark"]) .sticky-note .text-neutral-500 { color: #4b5563 !important; }
:where(html[data-color-scheme="dark"]) .sticky-note .text-neutral-400 { color: #6b7280 !important; }
:where(html[data-color-scheme="dark"]) .sticky-note .pin-note-title { color: #0f172a !important; }
:where(html[data-color-scheme="dark"]) .sticky-note .pin-note-body { color: #1f2937 !important; }
:where(html[data-color-scheme="dark"]) .sticky-note .pin-note-meta { color: #475569 !important; }
:where(html[data-color-scheme="dark"]) .sticky-note .pin-note-time { color: #64748b !important; }

/* FullCalendar (general) */
:where(html[data-color-scheme="dark"]) .fc .fc-toolbar-title { color: #e5e7eb !important; }
:where(html[data-color-scheme="dark"]) .fc .fc-button-primary {
  background-color: rgba(30, 41, 59, 0.9) !important;
  border-color: #475569 !important;
  color: #e2e8f0 !important;
}
:where(html[data-color-scheme="dark"]) :is(.fc .fc-button-primary:hover:not(:disabled), .fc .fc-button-active) {
  background-color: #1e293b !important;
  border-color: #64748b !important;
  color: #f8fafc !important;
}
:where(html[data-color-scheme="dark"]) .fc .fc-button-primary:disabled {
  background-color: #334155 !important;
  border-color: #475569 !important;
  color: #cbd5e1 !important;
  opacity: 0.7 !important;
}
:where(html[data-color-scheme="dark"]) .fc .fc-col-header-cell {
  background-color: #111827 !important;
  color: #cbd5e1 !important;
  border-color: #334155 !important;
}
:where(html[data-color-scheme="dark"]) :is(
  .fc .fc-daygrid-day,
  .fc .fc-daygrid-day-frame,
  .fc .fc-scrollgrid,
  .fc .fc-scrollgrid-section > *
) { background-color: #111827 !important; }
:where(html[data-color-scheme="dark"]) .fc .fc-daygrid-day.fc-day-other { background-color: #0b1220 !important; }
:where(html[data-color-scheme="dark"]) .fc .fc-daygrid-day.fc-day-today { background-color: rgba(37, 99, 235, 0.35) !important; }
:where(html[data-color-scheme="dark"]) .fc .fc-daygrid-day.fc-day-today .fc-daygrid-day-frame { background-color: transparent !important; }
:where(html[data-color-scheme="dark"]) .fc .fc-daygrid-day-number { color: #e5e7eb !important; }
:where(html[data-color-scheme="dark"]) .fc .fc-day-other .fc-daygrid-day-number { color: #94a3b8 !important; }
:where(html[data-color-scheme="dark"]) :is(.fc .fc-list-event-time, .fc .fc-list-event-title, .fc .fc-timegrid-axis) { color: #cbd5e1 !important; }
:where(html[data-color-scheme="dark"]) .fc .fc-timegrid-slot { border-bottom-color: #334155 !important; }
:where(html[data-color-scheme="dark"]) :is(.fc td, .fc th) { border-color: #334155 !important; }

:where(html[data-color-scheme="dark"]) .timeclock-status-card {
  border-color: color-mix(in srgb, var(--sidebar-theme-color) 35%, transparent) !important;
}
:where(html[data-color-scheme="dark"]) .timeclock-status-surface { background-color: color-mix(in srgb, var(--sidebar-theme-color) 10%, transparent) !important; }
:where(html[data-color-scheme="dark"]) .timeclock-elapsed-surface { background-color: color-mix(in srgb, var(--sidebar-theme-color) 14%, transparent) !important; }
:where(html[data-color-scheme="dark"]) .timeclock-status-pill-idle { background-color: #1f2937 !important; color: #cbd5e1 !important; }
:where(html[data-color-scheme="dark"]) .timeclock-status-pill-running { background-color: color-mix(in srgb, var(--sidebar-theme-color) 28%, transparent) !important; color: #f5f5f5 !important; }

/* =================================================================
   FORCED LIGHT MODE (employee set Appearance Mode = Always Light)
   Overrides @media (prefers-color-scheme: dark) rules when the OS
   is in dark mode but the employee wants light mode.
   ================================================================= */
@media (prefers-color-scheme: dark) {
  :where(html[data-color-scheme="light"]) {
    --sidebar-bg: #FFFFFF;
    --sidebar-hover: #F3F4F6;
    --sidebar-text: #6B7280;
    --sidebar-text-hover: #374151;
    --sidebar-border: #E5E7EB;
    --sidebar-submenu-border: rgba(0, 0, 0, 0.08);
  }
  :where(html[data-color-scheme="light"]) body.indigo { --widget-header-icon: unset; }
  :where(html[data-color-scheme="light"]) .bg-white { background-color: #ffffff !important; }
  :where(html[data-color-scheme="light"]) .bg-neutral-50 { background-color: #f9fafb !important; }
  :where(html[data-color-scheme="light"]) .bg-neutral-100 { background-color: #f3f4f6 !important; }
  :where(html[data-color-scheme="light"]) .bg-neutral-200 { background-color: #e5e7eb !important; }
  :where(html[data-color-scheme="light"]) .text-neutral-900 { color: #111827 !important; }
  :where(html[data-color-scheme="light"]) .text-neutral-800 { color: #1f2937 !important; }
  :where(html[data-color-scheme="light"]) .text-neutral-700 { color: #374151 !important; }
  :where(html[data-color-scheme="light"]) .text-neutral-600 { color: #4b5563 !important; }
  :where(html[data-color-scheme="light"]) .text-neutral-500 { color: #6b7280 !important; }
  :where(html[data-color-scheme="light"]) .text-neutral-400 { color: #9ca3af !important; }
  :where(html[data-color-scheme="light"]) :is(.border, .border-t, .border-b, .border-l, .border-r) { border-color: #e5e7eb !important; }
  :where(html[data-color-scheme="light"]) .border-neutral-200 { border-color: #e5e7eb !important; }
  :where(html[data-color-scheme="light"]) .border-neutral-300 { border-color: #d1d5db !important; }
  :where(html[data-color-scheme="light"]) :is(.divide-neutral-100 > :not([hidden]) ~ :not([hidden])) { border-color: #f3f4f6 !important; }
  :where(html[data-color-scheme="light"]) :is(.divide-neutral-200 > :not([hidden]) ~ :not([hidden])) { border-color: #e5e7eb !important; }
  :where(html[data-color-scheme="light"]) :is(.divide-y > :not([hidden]) ~ :not([hidden])) { border-color: #e5e7eb !important; }
  :where(html[data-color-scheme="light"]) :is(table tr:first-child th, table tr:first-child td, table thead tr, table tbody tr, table th, table td) { border-color: #e5e7eb !important; }
  :where(html[data-color-scheme="light"]) .hover\:bg-neutral-50:hover { background-color: #f9fafb !important; }
  :where(html[data-color-scheme="light"]) :is(
    input[type="text"],
    input[type="email"],
    input[type="password"],
    input[type="number"],
    input[type="tel"],
    input[type="url"],
    input[type="search"],
    input[type="date"],
    input[type="time"],
    input[type="datetime-local"],
    textarea,
    select
  ) {
    background-color: #ffffff !important;
    border-color: #d1d5db !important;
    color: #111827 !important;
  }
  :where(html[data-color-scheme="light"]) :is(input::placeholder, textarea::placeholder) { color: #9ca3af !important; }
  :where(html[data-color-scheme="light"]) :is(.badge-success, .bg-green-50, .bg-green-100) {
    background-color: var(--color-success-50) !important;
    color: var(--color-success-700) !important;
  }
  :where(html[data-color-scheme="light"]) :is(.badge-warning, .bg-yellow-50, .bg-yellow-100) {
    background-color: var(--color-warning-50) !important;
    color: var(--color-warning-700) !important;
  }
  :where(html[data-color-scheme="light"]) :is(.badge-danger, .bg-red-50, .bg-red-100) {
    background-color: var(--color-error-50) !important;
    color: var(--color-error-700) !important;
  }
  :where(html[data-color-scheme="light"]) :is(.badge-info, .bg-blue-50, .bg-blue-100) {
    background-color: var(--color-info-50) !important;
    color: var(--color-info-700) !important;
  }
  :where(html[data-color-scheme="light"]) :is(.badge-neutral, .bg-neutral-100) {
    background-color: #f3f4f6 !important;
    color: #374151 !important;
  }
  :where(html[data-color-scheme="light"]) :is(.text-green-600, .text-green-700, .text-green-800) { color: var(--color-success-600) !important; }
  :where(html[data-color-scheme="light"]) :is(.text-yellow-600, .text-amber-600, .text-yellow-700, .text-amber-700, .text-yellow-800, .text-amber-800) { color: var(--color-warning-600) !important; }
  :where(html[data-color-scheme="light"]) :is(.text-red-600, .text-red-700, .text-red-800) { color: var(--color-error-600) !important; }
  :where(html[data-color-scheme="light"]) :is(.text-blue-600, .text-blue-700, .text-blue-800) { color: var(--color-info-600) !important; }
  :where(html[data-color-scheme="light"]) #shortcuts img { filter: none; }
  :where(html[data-color-scheme="light"]) :is(#important_notice .widget-content, #company_mission .widget-content) { color: unset !important; }
  :where(html[data-color-scheme="light"]) :is(#important_notice .widget-content *:not(a), #company_mission .widget-content *:not(a)) { color: unset !important; }
  :where(html[data-color-scheme="light"]) :is(#important_notice .widget-content a, #company_mission .widget-content a) { color: unset !important; }
  :where(html[data-color-scheme="light"]) .modal-content {
    border: unset !important;
    box-shadow: unset !important;
  }
  :where(html[data-color-scheme="light"]) :is(.fixed.inset-0 > .relative.bg-white.rounded-lg, .fixed.inset-0 > .relative.bg-white.rounded-2xl) { border: unset !important; }
  :where(html[data-color-scheme="light"]) :is(
    #employeeCalendar,
    #employeeCalendar .fc,
    #employeeCalendar .fc-theme-standard .fc-scrollgrid,
    #employeeCalendar .fc-theme-standard td,
    #employeeCalendar .fc-theme-standard th
  ) {
    background-color: unset !important;
    border-color: unset !important;
  }
  :where(html[data-color-scheme="light"]) :is(
    #employeeCalendar .fc-col-header-cell-cushion,
    #employeeCalendar .fc-daygrid-day-number,
    #employeeCalendar .fc-toolbar-title
  ) { color: unset !important; }
  :where(html[data-color-scheme="light"]) #employeeCalendar .fc-day-today { background-color: rgba(255, 220, 40, 0.15) !important; }
  :where(html[data-color-scheme="light"]) .goal-widget-list > .goal-element + .goal-element { border-top-color: #e5e7eb !important; }
:where(html[data-color-scheme="light"]) .timesheet-dark-fix .text-neutral-900 { color: #111827 !important; }
  :where(html[data-color-scheme="light"]) .timesheet-dark-fix .text-neutral-800 { color: #1f2937 !important; }
  :where(html[data-color-scheme="light"]) .timesheet-dark-fix .text-neutral-700 { color: #374151 !important; }
  :where(html[data-color-scheme="light"]) .timesheet-dark-fix .text-neutral-600 { color: #4b5563 !important; }
  :where(html[data-color-scheme="light"]) .timesheet-dark-fix .text-neutral-500 { color: #6b7280 !important; }
  :where(html[data-color-scheme="light"]) .timeclock-status-card { border-color: color-mix(in srgb, var(--sidebar-theme-color) 25%, transparent) !important; }
  :where(html[data-color-scheme="light"]) .timeclock-status-surface { background-color: color-mix(in srgb, var(--sidebar-theme-color) 6%, white) !important; }
  :where(html[data-color-scheme="light"]) .timeclock-elapsed-surface { background-color: color-mix(in srgb, var(--sidebar-theme-color) 10%, white) !important; }
  :where(html[data-color-scheme="light"]) .timeclock-status-pill-idle {
    background-color: #f3f4f6 !important;
    color: #4b5563 !important;
  }
  :where(html[data-color-scheme="light"]) .timeclock-status-pill-running {
    background-color: color-mix(in srgb, var(--sidebar-theme-color) 20%, white) !important;
    color: var(--sidebar-theme-color) !important;
  }
  /* FullCalendar (general) */
  :where(html[data-color-scheme="light"]) .fc .fc-toolbar-title { color: unset !important; }
  :where(html[data-color-scheme="light"]) .fc .fc-button-primary {
    background-color: unset !important;
    border-color: unset !important;
    color: unset !important;
  }
  :where(html[data-color-scheme="light"]) :is(.fc .fc-button-primary:hover:not(:disabled), .fc .fc-button-active) {
    background-color: unset !important;
    border-color: unset !important;
    color: unset !important;
  }
  :where(html[data-color-scheme="light"]) .fc .fc-button-primary:disabled {
    background-color: unset !important;
    border-color: unset !important;
    color: unset !important;
    opacity: unset !important;
  }
  :where(html[data-color-scheme="light"]) .fc .fc-col-header-cell {
    background-color: unset !important;
    color: unset !important;
    border-color: unset !important;
  }
  :where(html[data-color-scheme="light"]) :is(
    .fc .fc-daygrid-day,
    .fc .fc-daygrid-day-frame,
    .fc .fc-scrollgrid,
    .fc .fc-scrollgrid-section > *
  ) { background-color: unset !important; }
  :where(html[data-color-scheme="light"]) .fc .fc-daygrid-day.fc-day-other { background-color: unset !important; }
  :where(html[data-color-scheme="light"]) :is(.fc .fc-daygrid-day-number, .fc .fc-day-other .fc-daygrid-day-number) { color: unset !important; }
  :where(html[data-color-scheme="light"]) :is(.fc .fc-list-event-time, .fc .fc-list-event-title, .fc .fc-timegrid-axis) { color: unset !important; }
  :where(html[data-color-scheme="light"]) .fc .fc-timegrid-slot { border-bottom-color: unset !important; }
  :where(html[data-color-scheme="light"]) :is(.fc td, .fc th) { border-color: unset !important; }
  /* Pinboard: restore normal dark text (pinboard dark rules already keep it dark, but ensure correctness) */
  :where(html[data-color-scheme="light"]) .sticky-note .text-neutral-900 { color: #111827 !important; }
  :where(html[data-color-scheme="light"]) .sticky-note .text-neutral-700 { color: #374151 !important; }
  :where(html[data-color-scheme="light"]) .sticky-note .text-neutral-600 { color: #4b5563 !important; }
  :where(html[data-color-scheme="light"]) .sticky-note .text-neutral-500 { color: #6b7280 !important; }
  :where(html[data-color-scheme="light"]) .sticky-note .text-neutral-400 { color: #9ca3af !important; }
}

/* ============================================================
   Datepicker — clean icon-inside style (system-wide)
   Uses CSS :has() to restyle without touching any HAML file.
   Supported: Chrome 105+, Safari 15.4+, Firefox 121+.

   Before: [icon-box] [text-input]  ← split addon style
   After:  [ 🗓  text-input        ]  ← icon floated inside
   ============================================================ */

/* Turn the flex wrapper into a positioned block container.
   !important required — Tailwind v4 utilities sit inside @layer utilities
   which loses to unlayered CSS in the cascade, but explicit !important is
   safer for margin/display properties that may also be set inline. */
:has(> .datepicker-open) {
  position: relative !important;
  display: block !important;
}

/* Float the calendar icon absolutely inside the input's left edge */
:has(> .datepicker-open) > .datepicker-open {
  position: absolute !important;
  top: 0 !important;
  left: 0 !important;
  bottom: 0 !important;
  right: auto !important;
  width: 2.5rem !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  background-color: transparent !important;
  background: transparent !important;
  border: none !important;
  border-radius: 0 !important;
  padding: 0 !important;
  z-index: 2;
  cursor: pointer !important;
  color: #6b7280;
}

/* Input: fully rounded corners, left padding for the icon */
:has(> .datepicker-open) > input.datepicker {
  display: block !important;
  width: 100% !important;
  border-radius: 0.5rem !important;
  border: 1px solid #d1d5db !important;
  padding: 0.5rem 0.75rem 0.5rem 2.5rem !important;
  font-size: 0.875rem !important;
  line-height: 1.25rem !important;
  color: #111827;
  background-color: #ffffff !important;
}

:has(> .datepicker-open) > input.datepicker:focus {
  outline: none !important;
  border-color: #3b82f6 !important;
  box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.12) !important;
}

:has(> .datepicker-open) > input.datepicker:disabled {
  background-color: #f9fafb !important;
  color: #6b7280 !important;
  cursor: default;
  opacity: 1;
}

:has(> .datepicker-open) > input.datepicker::placeholder {
  color: #9ca3af;
}

/* ============================================================
   Field icon overlay — same pattern as .datepicker-open but for
   non-date inputs (currency, number, time). Icon floats absolutely
   inside the input's left edge; no separate bordered span needed.
   ============================================================ */
:has(> .fieldicon-open) {
  position: relative !important;
  display: block !important;
}

:has(> .fieldicon-open) > .fieldicon-open {
  position: absolute !important;
  top: 0 !important;
  left: 0 !important;
  bottom: 0 !important;
  right: auto !important;
  width: 2.5rem !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  background-color: transparent !important;
  background: transparent !important;
  border: none !important;
  border-radius: 0 !important;
  padding: 0 !important;
  z-index: 2;
  color: #6b7280;
  pointer-events: none;
}

:has(> .fieldicon-open) > .fieldicon-open.cursor-pointer {
  pointer-events: auto;
  cursor: pointer !important;
}

:has(> .fieldicon-open) > input {
  display: block !important;
  width: 100% !important;
  border-radius: 0.5rem !important;
  border: 1px solid #d1d5db !important;
  padding: 0.5rem 0.75rem 0.5rem 2.5rem !important;
  font-size: 0.875rem !important;
  line-height: 1.25rem !important;
  color: #111827;
  background-color: #ffffff !important;
}

:has(> .fieldicon-open) > input:focus {
  outline: 2px solid color-mix(in srgb, var(--sidebar-theme-color) 45%, transparent) !important;
  outline-offset: 1px !important;
  box-shadow: none !important;
}

/* ============================================================
   Theme toggle — animated pill switch using --sidebar-theme-color
   Structure: label.theme-toggle-label > input.theme-toggle-input
              + span.theme-toggle-track > span.theme-toggle-thumb
   ============================================================ */
.theme-toggle-label {
  position: relative;
  display: inline-flex;
  align-items: center;
  cursor: pointer;
  user-select: none;
}

.theme-toggle-input {
  position: absolute;
  opacity: 0;
  width: 0;
  height: 0;
  pointer-events: none;
}

.theme-toggle-track {
  position: relative;
  width: 2.25rem;
  height: 1.25rem;
  background-color: #d1d5db;
  border-radius: 9999px;
  transition: background-color 0.2s ease-in-out;
  flex-shrink: 0;
}

.theme-toggle-input:checked ~ .theme-toggle-track {
  background-color: var(--sidebar-theme-color);
}

.theme-toggle-input:focus-visible ~ .theme-toggle-track {
  box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.25);
}

.theme-toggle-thumb {
  position: absolute;
  top: 2px;
  left: 2px;
  width: 1rem;
  height: 1rem;
  background-color: #ffffff;
  border-radius: 9999px;
  transition: transform 0.2s ease-in-out;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.15);
}

.theme-toggle-input:checked ~ .theme-toggle-track > .theme-toggle-thumb {
  transform: translateX(1rem);
}

.theme-toggle-label:has(.theme-toggle-input:disabled) {
  cursor: not-allowed;
  opacity: 0.45;
}

/* Performance form checkbox-group toggles. These follow the native checkbox
   state so assigned review forms do not depend on Alpine for the switch UI. */
.performance-toggle-shell {
  position: relative;
  display: inline-flex;
  width: 2.75rem;
  height: 1.5rem;
  flex-shrink: 0;
}

.performance-toggle-input {
  position: absolute;
  inset: 0;
  z-index: 1;
  width: 100%;
  height: 100%;
  margin: 0;
  opacity: 0;
  cursor: pointer;
}

.performance-toggle-track {
  position: relative;
  display: inline-flex;
  width: 100%;
  height: 100%;
  align-items: center;
  border-radius: 9999px;
  background: #e5e7eb;
  transition: background-color 0.15s ease, box-shadow 0.15s ease;
}

.performance-toggle-thumb {
  position: absolute;
  top: 2px;
  left: 2px;
  width: 1.25rem;
  height: 1.25rem;
  border: 1px solid #d1d5db;
  border-radius: 9999px;
  background: #fff;
  transition: transform 0.15s ease;
}

.performance-toggle-input:disabled {
  cursor: not-allowed;
}

.performance-toggle-input:checked + .performance-toggle-track {
  background: var(--sidebar-theme-color, #2563eb);
}

.performance-toggle-input:checked + .performance-toggle-track .performance-toggle-thumb {
  transform: translateX(1.25rem);
}

.performance-toggle-input:focus-visible + .performance-toggle-track {
  box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.25);
}

/* ============================================================
   jQuery Validate — form error styling
   ============================================================ */
p.field-error {
  display: block;
  margin-top: 0.25rem;
  font-size: 0.75rem;
  color: #dc2626;
  font-weight: 400;
}

/* Custom select — error highlight (single-select trigger button) */
.select-has-error button[x-ref="trigger"] {
  border-color: #dc2626 !important;
  box-shadow: none !important;
}

/* Custom select — error highlight (multi-select pill container) */
.select-has-error > div[style*="min-height"] {
  border-color: #dc2626 !important;
  box-shadow: none !important;
}

/* Input/textarea/TipTap validation error state — set via JS classList.add('hrp-field-error') */
/* input.hrp-field-error and textarea.hrp-field-error need (0,1,1) specificity to beat the
   :is(input[type="text"],...) portal-input-border rule above which also uses !important */
input.hrp-field-error,
textarea.hrp-field-error,
.hrp-field-error {
  border-color: #dc2626 !important;
}
/* Override the fieldicon/flatpickr wrapper's !important border rule for error inputs */
:has(> .fieldicon-open) > input.hrp-field-error,
.flatpickr-icon-wrapper > input.hrp-field-error {
  border-color: #dc2626 !important;
}
input.hrp-field-error:focus,
textarea.hrp-field-error:focus {
  outline: 2px solid rgba(220, 38, 38, 0.4) !important;
  border-color: #dc2626 !important;
  box-shadow: none !important;
}

/* =================================================================
   Employee List View — themed row hover accent
   ================================================================= */

/* Subtle left-border accent in theme color on row hover */
table.employee-list-view tbody tr {
  transition: box-shadow 0.12s ease;
}
table.employee-list-view tbody tr:hover {
  box-shadow: inset 4px 0 0 var(--sidebar-theme-color);
}

/* =================================================================
   Approval Rule Tree — drag handle + gesture strip + indicators
   ================================================================= */

/* ── Drag handle ────────────────────────────────────────── */
.approval-tree .drag-handle {
  width: 2rem;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #f8fafc;
  border-right: 1px solid #e2e8f0;
  border-left: 3px solid #c7d2fe;
  cursor: grab;
  transition: background 0.15s, border-left-color 0.15s;
  user-select: none;
}
.approval-tree .drag-handle:hover {
  background: #eef2ff;
  border-left-color: #6366f1;
}
.approval-tree .drag-handle:active { cursor: grabbing; }

/* 6-dot grip (2×3 grid) */
.approval-tree .drag-grip {
  display: grid;
  grid-template-columns: repeat(2, 3px);
  grid-template-rows: repeat(3, 3px);
  gap: 2.5px;
}
.approval-tree .drag-dot {
  display: block;
  width: 3px; height: 3px;
  border-radius: 50%;
  background: #94a3b8;
  transition: background 0.15s;
}
.approval-tree .drag-handle:hover .drag-dot { background: #6366f1; }

/* ── Gesture guide strip ────────────────────────────────── */
/* Revealed below .condition-card on hover via CSS adjacent selector */
.approval-tree .gesture-strip {
  display: flex;
  align-items: stretch;
  background: #f8fafc;
  border: 1px solid #e2e8f0;
  border-top: none;
  border-radius: 0 0 0.5rem 0.5rem;
  overflow: hidden;
  max-height: 0;
  opacity: 0;
  transition: max-height 0.18s ease, opacity 0.18s ease;
}
.approval-tree .condition-card:hover + .gesture-strip { max-height: 26px; opacity: 1; }

.approval-tree .gesture-segment {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 3px;
  padding: 3px 4px;
  font-size: 0.6rem;
  font-weight: 600;
  letter-spacing: 0.03em;
  color: #6366f1;
  border-right: 1px solid #e2e8f0;
  white-space: nowrap;
  cursor: pointer;
  transition: background 0.1s, color 0.1s;
}
.approval-tree .gesture-segment:last-child { border-right: none; }
.approval-tree .gesture-segment:hover { background: #eef2ff; }

/* Keep strip open while hovering the strip itself */
.approval-tree .gesture-strip:hover { max-height: 26px; opacity: 1; }

/* Up/Down reorder segments: neutral color (not indigo) */
.approval-tree .gesture-up,
.approval-tree .gesture-down { color: #64748b; }
.approval-tree .gesture-up:hover,
.approval-tree .gesture-down:hover { color: #1e293b; background: #f1f5f9; }

/* Disabled states — muted + no interaction */
/* Up + Promote: first child has no previous sibling (nothing above / nothing to nest under) */
.approval-tree .tree-node:first-child > .gesture-strip > .gesture-up,
.approval-tree .tree-node:first-child > .gesture-strip > .gesture-promote {
  color: #cbd5e1; cursor: default; pointer-events: none;
}
/* Down: last child has no next sibling */
.approval-tree .tree-node:last-child > .gesture-strip > .gesture-down {
  color: #cbd5e1; cursor: default; pointer-events: none;
}
/* Demote: disabled at root level — already at shallowest level */
#leave-approval-tree > .tree-node > .gesture-strip > .gesture-demote,
#expense-approval-tree > .tree-node > .gesture-strip > .gesture-demote {
  color: #cbd5e1; cursor: default; pointer-events: none;
}

/* During active drag: pulse the valid-action segments */
.approval-tree.at-dragging .gesture-strip { pointer-events: none; }

/* ── Condition card shape adjustment when strip present ─── */
/* Top card keeps normal radius; bottom radius removed so strip connects flush */
.approval-tree .condition-card { border-radius: 0.5rem; transition: box-shadow 0.12s, border-radius 0.12s; }
.approval-tree .condition-card:hover { border-radius: 0.5rem 0.5rem 0 0; box-shadow: 0 1px 4px rgba(99,102,241,0.1); }

/* ── Move animation (click-to-arrange feedback) ─────────── */
@keyframes atNodeMoved {
  0%   { box-shadow: 0 0 0 3px #6366f1, 0 2px 8px rgba(99,102,241,0.25); background-color: #e0e7ff; }
  55%  { box-shadow: 0 0 0 2px #a5b4fc, 0 1px 4px rgba(99,102,241,0.12); background-color: #eef2ff; }
  100% { box-shadow: none; background-color: transparent; }
}
.approval-tree .tree-node.at-just-moved > .condition-card {
  animation: atNodeMoved 0.85s ease-out forwards;
}

/* ── Drop indicators ────────────────────────────────────── */
.approval-tree .at-drop-above > .condition-card  { box-shadow: 0 -3px 0 0 #6366f1, 0 1px 4px rgba(99,102,241,0.08); }
.approval-tree .at-drop-below > .condition-card  { box-shadow: 0 3px 0 0 #6366f1, 0 1px 4px rgba(99,102,241,0.08); }
.approval-tree .at-drop-inside > .condition-card { outline: 2px dashed #6366f1; outline-offset: 2px; background-color: #eef2ff; }
.approval-tree .at-drop-promote > .condition-card { outline: 2px dashed #7c3aed; outline-offset: 2px; background-color: #f5f3ff; }

/* ── Flow connector lines ───────────────────────────────── */
.approval-tree {
  --approval-flow-line-strong: #c7d2fe;
  --approval-flow-line: var(--approval-flow-line-strong);
  --approval-flow-card-midpoint: 1.5rem;
  --approval-flow-rail-trim: 3px;
  --approval-flow-lane: 2.25rem;
  --approval-flow-elbow: 1.25rem;
  --approval-flow-elbow-drop: 0.625rem;
  --approval-flow-sibling-gap: 0.5rem;
  --approval-flow-stage-gap: 0.25rem;
}
.approval-tree .tree-node,
.approval-tree .stage-item {
  position: relative;
}
.approval-tree .tree-node + .tree-node {
  margin-top: var(--approval-flow-sibling-gap);
}
.approval-tree .stages-container {
  position: relative;
  margin-left: var(--approval-flow-lane) !important;
  padding-left: var(--approval-flow-elbow);
}
.approval-tree .stages-container::before {
  content: '';
  position: absolute;
  top: -0.375rem;
  bottom: calc(var(--approval-flow-card-midpoint) + var(--approval-flow-rail-trim));
  left: 0;
  width: 2px;
  background: var(--approval-flow-line-strong);
}
.approval-tree .stages-container:has(+ .children-container)::before {
  bottom: -0.375rem;
}
.approval-tree .stage-item::before {
  box-sizing: border-box;
  content: '';
  position: absolute;
  top: calc(var(--approval-flow-card-midpoint) - var(--approval-flow-elbow-drop));
  left: calc(-1 * var(--approval-flow-elbow));
  width: var(--approval-flow-elbow);
  height: var(--approval-flow-elbow-drop);
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 10' preserveAspectRatio='none'%3E%3Cpath d='M1 0 V5 Q1 9 5 9 H20' fill='none' stroke='%23c7d2fe' stroke-width='2' stroke-linecap='butt'/%3E%3C/svg%3E") 0 0 / 100% 100% no-repeat;
}
.approval-tree .stage-item + .stage-item {
  margin-top: var(--approval-flow-stage-gap);
}
.approval-tree .children-container {
  position: relative;
  margin-left: var(--approval-flow-lane);
  margin-top: 0.5rem;
  padding-left: var(--approval-flow-elbow);
}
.approval-tree .children-container::before {
  content: '';
  position: absolute;
  top: -0.375rem;
  left: 0;
  height: calc(var(--approval-flow-card-midpoint) + 0.375rem - var(--approval-flow-rail-trim));
  width: 2px;
  background: var(--approval-flow-line-strong);
}
.approval-tree .children-container > .tree-node::before {
  box-sizing: border-box;
  content: '';
  position: absolute;
  top: calc(var(--approval-flow-card-midpoint) - var(--approval-flow-elbow-drop));
  left: calc(-1 * var(--approval-flow-elbow));
  width: var(--approval-flow-elbow);
  height: var(--approval-flow-elbow-drop);
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 10' preserveAspectRatio='none'%3E%3Cpath d='M1 0 V5 Q1 9 5 9 H20' fill='none' stroke='%23c7d2fe' stroke-width='2' stroke-linecap='butt'/%3E%3C/svg%3E") 0 0 / 100% 100% no-repeat;
}
.approval-tree .children-container > .tree-node:not(:last-child)::after {
  content: '';
  position: absolute;
  top: var(--approval-flow-card-midpoint);
  bottom: calc(-1 * (var(--approval-flow-sibling-gap) + var(--approval-flow-card-midpoint)));
  left: calc(-1 * var(--approval-flow-elbow));
  width: 2px;
  border-radius: 999px;
  background: var(--approval-flow-line-strong);
}
.approval-tree .children-container > .tree-node + .tree-node { margin-top: var(--approval-flow-sibling-gap); }
.approval-admin-name {
  color: var(--color-indigo-600);
  font-weight: 500;
  font-size: 0.875rem;
}
.approval-employee-name {
  color: var(--color-emerald-600);
  font-weight: 500;
  font-size: 0.875rem;
}

/* =================================================================
   Data nav (Lists / Categories two-panel layout)
   Uses a container class so the left-border indicator only touches
   border-left-color — leaving divide-y's border-top-color intact.
   ================================================================= */
.data-nav > button { border-left-color: transparent; }
.data-nav > button.data-nav-active { border-left-color: var(--sidebar-theme-color) !important; }

/* =================================================================
   Disabled / Read-only Form Fields
   Placed after the :is(input...) portal theme rule so these override
   the global --portal-input-bg white background. Covers:
     - HTML disabled attribute (static or Alpine-set)
     - readonly attribute (cleared when editing is unlocked, so grey clears correctly)
   Checkboxes/radios use opacity only — no background fill.
   ================================================================= */
input:disabled:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]):not([type="submit"]):not([type="button"]):not([type="range"]),
input[readonly]:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]):not([type="submit"]):not([type="button"]):not([type="range"]),
select:disabled,
textarea:disabled,
textarea[readonly] {
  background-color: #f3f4f6 !important;
  color: #6b7280 !important;
  border-color: #e5e7eb !important;
  cursor: not-allowed !important;
  opacity: 1 !important;
}

input[type="checkbox"]:disabled,
input[type="radio"]:disabled {
  opacity: 0.45;
  cursor: not-allowed;
}

/* Flatpickr sets [readonly] to prevent keyboard entry — the field is still
   interactive via the date-picker popup, so it should look enabled.
   Must replicate all :not() selectors from the rule above to win on specificity. */
input.flatpickr-input[readonly]:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]):not([type="submit"]):not([type="button"]):not([type="range"]):not(:disabled) {
  background-color: white !important;
  color: #111827 !important;
  border-color: #d1d5db !important;
  cursor: pointer !important;
  opacity: 1 !important;
}

@media (prefers-color-scheme: dark) {
  input:disabled:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]):not([type="submit"]):not([type="button"]):not([type="range"]),
  input[readonly]:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]):not([type="submit"]):not([type="button"]):not([type="range"]),
  select:disabled,
  textarea:disabled,
  textarea[readonly] {
    background-color: #111827 !important;
    color: #94a3b8 !important;
    border-color: #334155 !important;
  }

  input.flatpickr-input[readonly]:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]):not([type="submit"]):not([type="button"]):not([type="range"]):not(:disabled) {
    background-color: var(--portal-input-bg) !important;
    color: var(--portal-input-color) !important;
    border-color: var(--portal-input-border) !important;
  }
}

html[data-color-scheme="dark"] input:disabled:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]):not([type="submit"]):not([type="button"]):not([type="range"]),
html[data-color-scheme="dark"] input[readonly]:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]):not([type="submit"]):not([type="button"]):not([type="range"]),
html[data-color-scheme="dark"] select:disabled,
html[data-color-scheme="dark"] textarea:disabled,
html[data-color-scheme="dark"] textarea[readonly] {
  background-color: #111827 !important;
  color: #94a3b8 !important;
  border-color: #334155 !important;
}

html[data-color-scheme="dark"] input.flatpickr-input[readonly]:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]):not([type="submit"]):not([type="button"]):not([type="range"]):not(:disabled) {
  background-color: var(--portal-input-bg) !important;
  color: var(--portal-input-color) !important;
  border-color: var(--portal-input-border) !important;
}

/* Employee view header buttons: sm on mobile, md on desktop */
@media (min-width: 640px) {
  #tour-employee-portal-access,
  #tour-employee-edit-button {
    padding: 0.5rem 1rem;
    font-size: 0.875rem;
    line-height: 1.25rem;
  }
}

/* Ensure HueBee colour picker floats above editor toolbar/container */
.huebee {
  z-index: 9999 !important;
}

html[data-color-scheme="dark"] :is(
  [style*="--sidebar-theme-color"],
  th.text-neutral-700
) {
  color: var(--sidebar-theme-text-color) !important;
}

html[data-color-scheme="dark"] table th.text-neutral-700,
html[data-color-scheme="dark"] table th[style*="--sidebar-theme-color"],
html[data-color-scheme="dark"] table th {
  color: var(--sidebar-theme-text-color) !important;
}

@media (prefers-color-scheme: dark) {
  :is(
    [style*="--sidebar-theme-color"],
    th.text-neutral-700
  ) {
    color: var(--sidebar-theme-text-color) !important;
  }

  table th.text-neutral-700,
  table th[style*="--sidebar-theme-color"],
  table th {
    color: var(--sidebar-theme-text-color) !important;
  }
}