/* ============================================================
   DESIGN TOKENS — Autovella visual system
   The whole app draws from these variables. Touching values here
   changes the look globally; do not redefine colors/radii ad-hoc
   in components.
   ============================================================ */
/* Inter is already loaded via <link> in index.html / operator.html.
   The previous @import here was redundant and render-blocking. */

/* Force light mode unconditionally — prevent system dark mode, Chrome's
   Force Dark flag, and browser extensions from inverting the UI. */
html, :root {
  color-scheme: light only;
}

:root {
  color-scheme: light only;

  /* Typography */
  --font-sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --font-feature: 'cv11', 'ss01', 'ss03'; /* Inter stylistic tweaks for cleaner 1/I/l */

  /* Brand */
  --brand-600: #2563eb;
  --brand-700: #1d4ed8;
  --brand-50:  #eff6ff;

  /* Neutrals (light) */
  --bg-app:      #f8fafc;
  --bg-surface:  #ffffff;
  --bg-muted:    #f1f5f9;
  --border:      #e5e7eb;
  --border-strong: #d1d5db;
  --text-primary:   #0f172a;
  --text-secondary: #475569;
  --text-tertiary:  #94a3b8;

  /* Radii */
  --radius-sm: 6px;
  --radius-md: 8px;
  --radius-lg: 12px;

  /* Shadows */
  --shadow-xs: 0 1px 2px rgba(15, 23, 42, 0.04);
  --shadow-sm: 0 1px 3px rgba(15, 23, 42, 0.08), 0 1px 2px rgba(15, 23, 42, 0.04);
  --shadow-md: 0 4px 12px rgba(15, 23, 42, 0.08);
  --shadow-lg: 0 10px 24px rgba(15, 23, 42, 0.10);

  /* Motion */
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --transition-fast: 120ms var(--ease-out);
  --transition-base: 180ms var(--ease-out);
}

/* Apply Inter site-wide. Sets the baseline so customers see the same
   typeface regardless of OS — previously Mac users saw SF Pro and
   Windows users saw Segoe UI from the system stack. */
html, body {
  font-family: var(--font-sans);
  font-feature-settings: var(--font-feature);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  color: var(--text-primary);
}

/* Inter is geometric — at default Tailwind weights it can look slightly
   thin. Bump body copy a touch via numeric tracking. */
body { letter-spacing: -0.005em; }
h1, h2, h3, h4 { letter-spacing: -0.015em; }

/* Hide number input spinners */
input.hour-input::-webkit-outer-spin-button,
input.hour-input::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}
input.hour-input[type=number] {
  -moz-appearance: textfield;
  appearance: textfield;
}

/* Custom styles for better table layout */

/* Tabulator table improvements */
.tabulator {
  font-size: 14px;
  border: 1px solid #e5e7eb;
  border-radius: 0.5rem;
  overflow: hidden;
}

.tabulator-header {
  background-color: #f9fafb !important;
  border-bottom: 2px solid #e5e7eb !important;
  font-weight: 600;
  color: #374151;
}

.tabulator-header .tabulator-col {
  background-color: #f9fafb !important;
  border-right: 1px solid #e5e7eb;
}

.tabulator-row {
  border-bottom: 1px solid #f3f4f6;
}

.tabulator-row:hover {
  background-color: #f9fafb !important;
}

.tabulator-row.tabulator-row-even {
  background-color: #ffffff;
}

.tabulator-row.tabulator-row-odd {
  background-color: #fafafa;
}

.tabulator-cell {
  padding: 12px 8px;
  border-right: 1px solid #f3f4f6;
}

.tabulator-footer {
  background-color: #f9fafb;
  border-top: 1px solid #e5e7eb;
  padding: 8px;
}

/* Responsive tables */
.tabulator-tableHolder {
  overflow-x: auto;
  max-width: 100%;
}

/* Better pagination */
.tabulator-paginator {
  color: #6b7280;
  font-size: 14px;
}

.tabulator-page {
  padding: 4px 8px;
  margin: 0 2px;
  border-radius: 4px;
  cursor: pointer;
}

.tabulator-page:hover {
  background-color: #e5e7eb;
}

.tabulator-page.active {
  background-color: #3b82f6;
  color: white;
}

/* Loading overlay */
.tabulator .tabulator-loader {
  background-color: rgba(255, 255, 255, 0.9);
}

/* Action buttons spacing */
.action-buttons {
  display: inline-flex;
  gap: 2px;
  justify-content: center;
  align-items: center;
}

/* ============================================================
   ICON BUTTONS — square buttons that wrap a single icon
   (Heroicons SVG). Default state is monochrome gray; the
   accent color only appears on hover/focus. Pair with the
   variant classes below to set the hover color.
   ============================================================ */
.icon-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  padding: 0;
  border: none;
  background: transparent;
  border-radius: var(--radius-sm);
  color: var(--text-tertiary);
  cursor: pointer;
  transition: background-color var(--transition-fast),
              color var(--transition-fast);
}
.icon-btn:hover {
  background-color: var(--bg-muted);
  color: var(--text-secondary);
}
.icon-btn:focus-visible {
  outline: none;
  box-shadow: 0 0 0 2px rgba(37, 99, 235, 0.25);
}
.icon-btn svg { display: block; }

.icon-btn--view:hover   { color: var(--brand-600); }
.icon-btn--edit:hover   { color: var(--brand-600); }
.icon-btn--danger:hover { color: #dc2626; background-color: #fef2f2; }
.icon-btn--sm { width: 24px; height: 24px; border-radius: 4px; }

/* ============================================================
   BADGES — pill labels for status/state. Light tinted background
   with a soft border keeps them readable against any surface.
   ============================================================ */
.badge {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  padding: 0.125rem 0.625rem;
  border-radius: 9999px;
  font-size: 0.75rem;
  font-weight: 500;
  line-height: 1.25rem;
  border: 1px solid transparent;
  text-transform: capitalize;
  white-space: nowrap;
}

.badge-success { background-color: #ecfdf5; color: #047857; border-color: #a7f3d0; }
.badge-warning { background-color: #fffbeb; color: #b45309; border-color: #fde68a; }
.badge-danger  { background-color: #fef2f2; color: #b91c1c; border-color: #fecaca; }
.badge-info    { background-color: #eff6ff; color: #1d4ed8; border-color: #bfdbfe; }
.badge-neutral { background-color: #f1f5f9; color: #334155; border-color: #e2e8f0; }

/* ============================================================
   BUTTONS — consistent sizing, focus ring, and disabled treatment.
   Use .btn + a variant; pair with .btn-sm or .btn-lg for size.
   ============================================================ */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  padding: 0.5rem 0.875rem;
  border-radius: var(--radius-md);
  font-size: 0.875rem;
  font-weight: 500;
  line-height: 1.25rem;
  transition: background-color var(--transition-fast),
              box-shadow var(--transition-fast),
              transform var(--transition-fast),
              color var(--transition-fast);
  cursor: pointer;
  border: 1px solid transparent;
  user-select: none;
  white-space: nowrap;
}
.btn:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.25);
}
.btn:disabled,
.btn[aria-disabled="true"] {
  opacity: 0.55;
  cursor: not-allowed;
  pointer-events: none;
}
.btn-sm { padding: 0.3125rem 0.625rem; font-size: 0.8125rem; }
.btn-lg { padding: 0.625rem 1.125rem; font-size: 0.9375rem; }

.btn-primary {
  background-color: var(--brand-600);
  color: #ffffff;
  box-shadow: var(--shadow-xs);
}
.btn-primary:hover { background-color: var(--brand-700); }
.btn-primary:active { transform: translateY(0.5px); }

.btn-secondary {
  background-color: #ffffff;
  color: var(--text-primary);
  border-color: var(--border-strong);
  box-shadow: var(--shadow-xs);
}
.btn-secondary:hover { background-color: var(--bg-muted); }

.btn-danger {
  background-color: #dc2626;
  color: #ffffff;
  box-shadow: var(--shadow-xs);
}
.btn-danger:hover { background-color: #b91c1c; }

.btn-ghost {
  background-color: transparent;
  color: var(--text-secondary);
}
.btn-ghost:hover { background-color: var(--bg-muted); color: var(--text-primary); }

/* ------------------------------------------------------------
   SEGMENTED CONTROL — toolbar view switchers (cards/list,
   list/board, etc.). Wrap buttons in .seg; mark the active
   one with .is-active. Heights line up with .btn.
   ------------------------------------------------------------ */
.seg {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  padding: 3px;
  background-color: var(--bg-muted);
  border-radius: var(--radius-md);
}
.seg-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.375rem;
  padding: 0.375rem 0.75rem;
  border-radius: calc(var(--radius-md) - 3px);
  font-size: 0.8125rem;
  font-weight: 500;
  line-height: 1.25rem;
  color: var(--text-secondary);
  background: transparent;
  border: none;
  cursor: pointer;
  white-space: nowrap;
  transition: background-color var(--transition-fast),
              color var(--transition-fast),
              box-shadow var(--transition-fast);
}
.seg-btn:hover { color: var(--text-primary); }
.seg-btn:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.25);
}
.seg-btn.is-active {
  background-color: var(--bg-surface);
  color: var(--brand-600);
  box-shadow: var(--shadow-xs);
}

/* ============================================================
   INPUTS — unified height, border, and focus ring across text,
   select, and textarea controls.
   ============================================================ */
.input,
input[type="text"].input,
input[type="email"].input,
input[type="password"].input,
input[type="number"].input,
input[type="search"].input,
input[type="url"].input,
input[type="tel"].input {
  width: 100%;
  padding: 0.5rem 0.75rem;
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-md);
  font-size: 0.875rem;
  line-height: 1.25rem;
  background-color: #ffffff;
  color: var(--text-primary);
  transition: border-color var(--transition-fast),
              box-shadow var(--transition-fast);
}
.input::placeholder { color: var(--text-tertiary); }
.input:focus,
.input:focus-visible {
  outline: none;
  border-color: var(--brand-600);
  box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.18);
}
.input:disabled {
  background-color: var(--bg-muted);
  color: var(--text-tertiary);
  cursor: not-allowed;
}

/* ============================================================
   SAFARI NORMALIZATION — date/time inputs and select boxes
   render with native OS chrome in Safari; strip it so they
   match the rest of the design system.
   ============================================================ */

/* Date / time inputs — strip native chrome */
input[type="date"],
input[type="time"],
input[type="datetime-local"],
input[type="month"],
input[type="week"] {
  -webkit-appearance: none;
  appearance: none;
  font-family: var(--font-sans);
  font-size: 0.875rem;
  line-height: 1.25rem;
  color: var(--text-primary);
  background-color: #ffffff;
  /* Prevent Safari from collapsing height */
  min-height: 2.25rem;
}

/* Safari centers date text by default — force left alignment */
input[type="date"]::-webkit-date-and-time-value,
input[type="time"]::-webkit-date-and-time-value,
input[type="datetime-local"]::-webkit-date-and-time-value {
  text-align: left;
  min-height: 1.25rem;
}

/* Tame Safari's oversized calendar/clock picker icon */
input[type="date"]::-webkit-calendar-picker-indicator,
input[type="time"]::-webkit-calendar-picker-indicator,
input[type="datetime-local"]::-webkit-calendar-picker-indicator {
  opacity: 0.45;
  cursor: pointer;
  padding: 0;
  margin-left: 0.25rem;
}

/* Select — strip OS chrome, inject a consistent chevron */
select {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  font-family: var(--font-sans);
  font-size: 0.875rem;
  color: var(--text-primary);
  background-color: #ffffff;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%236b7280' d='M6 8L1 3h10z'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 0.625rem center;
  padding-right: 2rem !important;
  cursor: pointer;
}

.label {
  display: block;
  font-size: 0.8125rem;
  font-weight: 500;
  color: var(--text-secondary);
  margin-bottom: 0.375rem;
  letter-spacing: -0.005em;
}

/* ============================================================
   CARDS — surface containers. Soft shadow + subtle border so
   they read on both the gray app background and white surfaces.
   ============================================================ */
.card {
  background: var(--bg-surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-xs);
  padding: 1.25rem 1.5rem;
}
.card-hover { transition: box-shadow var(--transition-base), transform var(--transition-base); }
.card-hover:hover { box-shadow: var(--shadow-md); transform: translateY(-1px); }

/* ============================================================
   LOADING SPINNER — brand-tinted ring.
   ============================================================ */
.spinner {
  border: 2px solid var(--bg-muted);
  border-top: 2px solid var(--brand-600);
  border-radius: 50%;
  width: 20px;
  height: 20px;
  animation: spin 0.7s linear infinite;
  display: inline-block;
}

@keyframes spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

/* Custom scrollbar */
::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}

::-webkit-scrollbar-track {
  background: #f1f1f1;
}

::-webkit-scrollbar-thumb {
  background: #cbd5e0;
  border-radius: 4px;
}

::-webkit-scrollbar-thumb:hover {
  background: #a0aec0;
}

/* Utility classes */
.!hidden {
  display: none !important;
}

/* Scrollable strips (tabs, filter chips, toolbars) that should scroll
   horizontally on narrow screens without showing a visible scrollbar. */
.no-scrollbar {
  scrollbar-width: none;
  -ms-overflow-style: none;
}
.no-scrollbar::-webkit-scrollbar {
  display: none;
}

/* ============================================================
   MOBILE SIDEBAR OVERLAY
   On phones the sidebar is hidden by default and slides over the
   main content as a fixed drawer when the menu button toggles
   off `.hidden`. The Tailwind class set on the <aside> doesn't
   include a mobile display utility (only `md:flex`), so we
   restore flex layout here and pin it as a drawer. Above the
   md breakpoint this rule is inert — the sidebar stays in-flow.
   ============================================================ */
@media (max-width: 767px) {
  #sidebar:not(.hidden) {
    display: flex;
    position: fixed;
    top: 0;
    bottom: 0;
    left: 0;
    z-index: 40;
    box-shadow: var(--shadow-lg);
  }
}

/* ============================================================
   COLLAPSIBLE SIDEBAR
   ============================================================ */
/* Suppress transitions on initial load */
#sidebar.no-transition,
#sidebar.no-transition * {
  transition: none !important;
}

#sidebar {
  transition: width 0.2s ease;
  overflow: hidden;
  white-space: nowrap;
  will-change: width;
}

#sidebar.sidebar-expanded {
  width: 14rem; /* w-56 */
}

#sidebar.sidebar-collapsed {
  width: 4rem;
}

#sidebar.sidebar-collapsed .sidebar-label {
  opacity: 0;
  width: 0;
  overflow: hidden;
  pointer-events: none;
}

#sidebar.sidebar-collapsed .nav-link {
  justify-content: center;
  padding-left: 0;
  padding-right: 0;
  gap: 0;
}

#sidebar.sidebar-collapsed .nav-link i {
  width: auto;
  font-size: 1rem;
}

#sidebar.sidebar-collapsed #user-info {
  justify-content: center;
}

#sidebar.sidebar-collapsed #sidebar-collapse-btn {
  margin: 0 auto;
}

/* Collapsed header: the logo mark (~32px) and the toggle button (44px) can't
   sit side-by-side inside the 4rem sidebar without overflowing — which the
   sidebar's `overflow: hidden` then clips off the left edge. Stack them
   vertically so each fits the narrow rail. */
#sidebar.sidebar-collapsed > div:first-child {
  flex-direction: column;
  gap: 0.5rem;
  justify-content: center;
  padding-left: 0.5rem;
  padding-right: 0.5rem;
}

/* Drop the gap left behind by the now-zero-width "Autovella" label so the
   mark centers cleanly on the rail. */
#sidebar.sidebar-collapsed > div:first-child > div {
  gap: 0;
}

.sidebar-collapse-icon {
  transition: transform 0.2s ease;
}

#sidebar.sidebar-collapsed .sidebar-collapse-icon {
  transform: rotate(180deg);
}

/* Prevent nav links from triggering reflows */
#sidebar .nav-link {
  white-space: nowrap;
  overflow: hidden;
}

/* Access-disabled nav items: visible but greyed out and unclickable.
   Communicates "feature exists, you can't use it" without hiding the
   navigation entirely. */
.nav-link--disabled {
  opacity: 0.45;
  cursor: not-allowed !important;
  pointer-events: auto; /* keep tooltip on hover; click guard is in app.js */
}
.nav-link--disabled:hover {
  background-color: transparent !important;
  color: inherit !important;
}
.nav-link--disabled i {
  color: inherit !important;
}

/* In-page controls disabled because the user lacks the feature
   permission. Mirrors the nav-link--disabled treatment so the visual
   language is consistent. The `data-access-disabled` attribute is set
   by the disabledUnless() helper in core/permissions.js; the global
   click guard in core/app.js catches aria-disabled and prevents the
   handler from firing. */
[data-access-disabled] {
  opacity: 0.5 !important;
  cursor: not-allowed !important;
  filter: grayscale(0.3);
}
[data-access-disabled]:hover {
  background-color: inherit !important;
  color: inherit !important;
}

/* Display container for Quill-authored rich text (description, notes,
   etc.). Tailwind preflight resets list-style and paragraph margins to
   zero, which strips the visual structure from our sanitized output.
   Restore the minimum needed so bullets/numbers/links look right. */
.rich-content p { margin: 0 0 0.5em 0; }
.rich-content p:last-child { margin-bottom: 0; }
.rich-content ul { list-style: disc; padding-left: 1.5em; margin: 0.25em 0 0.5em 0; }
.rich-content ol { list-style: decimal; padding-left: 1.5em; margin: 0.25em 0 0.5em 0; }
.rich-content li { margin: 0.15em 0; }
/* Quill encodes bullet lists as <ol> with data-list="bullet" on <li>.
   Override list-style so those render as bullets, not numbers. */
.rich-content ol li[data-list="bullet"] { list-style: disc; }
.rich-content ol li[data-list="ordered"] { list-style: decimal; }
/* The .ql-ui spans Quill injects for editor cursors are noise in a
   read-only view. Hide them entirely. */
.rich-content .ql-ui { display: none; }
.rich-content a { color: #2563eb; text-decoration: underline; }
.rich-content a:hover { color: #1d4ed8; }
.rich-content blockquote { border-left: 3px solid #e5e7eb; padding-left: 0.75em; color: #6b7280; margin: 0.5em 0; }
.rich-content code { background: #f3f4f6; padding: 0.1em 0.35em; border-radius: 3px; font-size: 0.875em; }
.rich-content pre { background: #f9fafb; padding: 0.75em; border-radius: 6px; overflow-x: auto; margin: 0.5em 0; }
.rich-content h1, .rich-content h2, .rich-content h3, .rich-content h4 { font-weight: 600; margin: 0.5em 0 0.25em; }
.rich-content strong { font-weight: 600; }
.rich-content em { font-style: italic; }

/* --- Appearance settings theme cards --- */
.theme-option-card { cursor: pointer; }

/* ============================================================
   SHARED POLISH — refinements that span multiple components.
   Loaded last so they win over earlier rules.
   ============================================================ */

/* Sidebar nav — refined active + hover states.
   The router (router.js:updateActiveNav) marks the active link by
   adding the Tailwind utilities `bg-blue-50 text-blue-600` rather
   than a semantic class, so we target that pair here. */
#sidebar .nav-link {
  position: relative;
  font-weight: 500;
  color: var(--text-secondary);
  transition: background-color var(--transition-fast),
              color var(--transition-fast);
}
#sidebar .nav-link:hover {
  background-color: var(--bg-muted);
  color: var(--text-primary);
}
#sidebar .nav-link.bg-blue-50.text-blue-600 {
  background-color: var(--brand-50) !important;
  color: var(--brand-700) !important;
  font-weight: 600;
}
#sidebar .nav-link.bg-blue-50.text-blue-600 i {
  color: var(--brand-600) !important;
}
#sidebar .nav-link.bg-blue-50.text-blue-600::before {
  content: '';
  position: absolute;
  left: 0;
  top: 6px;
  bottom: 6px;
  width: 3px;
  border-radius: 0 3px 3px 0;
  background-color: var(--brand-600);
}
#sidebar.sidebar-collapsed .nav-link.bg-blue-50.text-blue-600::before { display: none; }

/* Top bar refinements */
header {
  box-shadow: var(--shadow-xs);
}

/* Dropdown menus — consistent shadow and padding */
#user-menu-dropdown,
#notification-dropdown {
  box-shadow: var(--shadow-lg);
  border-color: var(--border);
  border-radius: var(--radius-md);
  overflow: hidden;
}
#user-menu-dropdown a,
#user-menu-dropdown button {
  padding: 0.5rem 0.875rem;
  font-size: 0.8125rem;
  transition: background-color var(--transition-fast);
}

/* Modals — consistent shadow + radius. Targets Modal.js output. */
#modal-container .bg-white {
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
}

/* Notyf toast — match the design system's radius/shadow/font */
.notyf__toast {
  border-radius: var(--radius-md) !important;
  box-shadow: var(--shadow-lg) !important;
  font-family: var(--font-sans) !important;
  font-size: 0.875rem !important;
  min-width: 320px !important;
  max-width: 480px !important;
}

/* Tabulator typography sync — Tabulator brings its own font; force ours. */
.tabulator,
.tabulator-header,
.tabulator-row,
.tabulator-cell,
.tabulator-paginator {
  font-family: var(--font-sans) !important;
}
.tabulator-header { font-size: 0.75rem; letter-spacing: 0.025em; text-transform: uppercase; }

/* DHTMLX Gantt + FullCalendar — same font-family enforcement */
.gantt_container,
.gantt_grid,
.gantt_task,
.fc {
  font-family: var(--font-sans) !important;
}

/* Quill editor inherits its own font; force consistency. */
.ql-editor,
.ql-toolbar.ql-snow {
  font-family: var(--font-sans) !important;
}

/* Tighten focus ring on form controls so it matches our brand
   color (3px halo) instead of the browser default. Scoped to form
   inputs only — buttons keep their own focus styles via .btn. */
input:not([type="checkbox"]):not([type="radio"]):not([type="submit"]):not([type="button"]):focus-visible,
select:focus-visible,
textarea:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.18);
  border-color: var(--brand-600);
}

/* ============================================================
   GLOBAL FOCUS-VISIBLE
   Buttons, anchors and other interactive controls had no visible
   focus indicator (Tailwind preflight removes the browser default).
   This restores a brand-colored focus ring only for keyboard users.
   ============================================================ */
a:focus-visible,
button:focus-visible,
[role="button"]:focus-visible,
[tabindex]:not([tabindex="-1"]):focus-visible,
summary:focus-visible {
  outline: 2px solid var(--brand-600);
  outline-offset: 2px;
  border-radius: var(--radius-sm);
}
/* Skip link — only visible when focused. Lets keyboard users jump
   past the sidebar/header to the main content area. */
.skip-link {
  position: absolute;
  top: -100px;
  left: 0;
  z-index: 1000;
  padding: 8px 16px;
  background: var(--brand-700);
  color: #ffffff;
  font-size: 0.875rem;
  font-weight: 500;
  border-radius: 0 0 var(--radius-md) 0;
  text-decoration: none;
  transition: top var(--transition-fast);
}
.skip-link:focus-visible {
  top: 0;
  outline: 2px solid #ffffff;
  outline-offset: -4px;
}

/* Press feedback for nav links, dashboard cards, and dropdown items
   so mobile/touch users get a tap response (hover doesn't apply on
   touch). Subtle scale instead of layout shift. */
.nav-link:active,
[data-route]:active {
  filter: brightness(0.97);
}

/* Accessible numeric column alignment — opt-in via the
   `.tabular-nums` utility (matches Tailwind v3 utility name). */
.tabular-nums {
  font-variant-numeric: tabular-nums;
}

/* ============================================================
   SIDEBAR SECTION HEADERS
   Shrink the MAIN / CRM / WORK / FINANCE labels so they read as
   quiet separators, not competing chrome. Tighten the gap above
   each section so the list packs more compactly.
   ============================================================ */
aside#sidebar nav .sidebar-label > p.text-xs.font-semibold.text-gray-500 {
  font-size: 11px;
  letter-spacing: 0.08em;
  margin-bottom: 2px;
  opacity: 0.8;
}
aside#sidebar nav .sidebar-label.mt-4 {
  margin-top: 0.625rem; /* 10px, was 16px */
}
/* Section header divs are click/keyboard toggles (sidebarSections.js) -
   pad them so the clickable area is ~38-40px tall, not just the 10px label text. */
aside#sidebar nav div.sidebar-label {
  padding-top: 12px;
  padding-bottom: 12px;
}

/* ============================================================
   ROW-LEVEL ACTION ICONS
   Tables (Accounts, Holidays, Attendance, Invoices, Expenses, …)
   render a row of saturated colored icons (view/edit/delete).
   At list scale that becomes a rainbow stripe down the page.
   Dim icon-only action buttons to gray at rest; their Tailwind
   `text-{blue,green,red}-{6,9}00 hover:` classes restore the
   semantic color on hover so meaning is preserved.
   ============================================================ */
button:is(.text-blue-600, .text-green-600, .text-red-600, .text-purple-600):not(:hover):not(:focus-visible):has(> i.fas:only-child),
a:is(.text-blue-600, .text-green-600, .text-red-600, .text-purple-600):not(:hover):not(:focus-visible):has(> i.fas:only-child) {
  color: rgb(156 163 175); /* gray-400 */
}
/* Minimum 28×28 px click target for icon-only action buttons in table cells.
   Applies to any <button> whose sole child is a <i class="fas …"> icon. */
table td button:has(> i.fas:only-child),
table td button:has(> i.far:only-child) {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 28px;
  min-height: 28px;
  border-radius: 6px;
  margin: 0 2px;
  transition: background-color 0.1s;
}
table td button:has(> i.fas:only-child):hover,
table td button:has(> i.far:only-child):hover {
  background-color: rgba(0, 0, 0, 0.06);
}
/* ============================================================
   TIMESHEET — Column resize
   Resizable table columns. Widths are persisted to localStorage
   so layout sticks between sessions. The handle sits on the
   right edge of each <th>; the table itself has table-layout:
   fixed and an explicit width (sum of cols), so widening a
   column grows the table and the parent's overflow-x-auto
   surfaces a horizontal scrollbar automatically.
   ============================================================ */
.ts-table {
  table-layout: fixed;
  border-collapse: separate;
  border-spacing: 0;
}
.ts-table th {
  position: relative;
  white-space: nowrap;
}
.ts-table td {
  overflow: hidden;
}
.ts-table .col-resize-handle {
  position: absolute;
  right: 0;
  top: 0;
  bottom: 0;
  width: 6px;
  cursor: col-resize;
  user-select: none;
  z-index: 5;
  transition: background-color 0.15s ease;
}
.ts-table .col-resize-handle::after {
  content: '';
  position: absolute;
  right: 2px;
  top: 25%;
  bottom: 25%;
  width: 1px;
  background: transparent;
}
.ts-table .col-resize-handle:hover::after,
.ts-table .col-resize-handle.dragging::after {
  background: var(--brand-600);
}
.ts-table .col-resize-handle:hover {
  background: rgba(37, 99, 235, 0.08);
}
.ts-table .col-resize-handle.dragging {
  background: rgba(37, 99, 235, 0.15);
}
body.ts-resizing {
  cursor: col-resize !important;
  user-select: none !important;
}
body.ts-resizing * {
  cursor: col-resize !important;
}
@keyframes ts-row-flash {
  0%   { background-color: #eff6ff; }
  40%  { background-color: #bfdbfe; }
  100% { background-color: transparent; }
}
.ts-row-highlight {
  animation: ts-row-flash 1.5s ease-out forwards;
}

/* ============================================================
   SF-TABLE — Salesforce Lightning–style list table
   Row numbers, checkboxes, compact rows, resizable column
   handles (drag right edge of header), per-row action dropdown.
   Applied to all main list views: Contacts, Accounts, Deals,
   Tasks, Projects.
   ============================================================ */

.at-table {
  width: 100%;
  border-collapse: collapse;
  table-layout: fixed;
  font-size: 13px;
}

/* Header */
.at-table thead tr {
  background: #f3f3f3;
  border-bottom: 2px solid #dddbda;
}

.at-table th.at-th {
  position: relative;
  height: 36px;
  padding: 0;
  font-size: 12px;
  font-weight: 700;
  color: #514f4d;
  text-align: left;
  white-space: nowrap;
  border-right: 1px solid #dddbda;
  overflow: visible;
  user-select: none;
  vertical-align: middle;
}

.at-table th.at-th:last-child {
  border-right: none;
}

.at-table th.at-th-rownum {
  width: 40px;
  text-align: right;
  padding-right: 8px;
  font-weight: 400;
  color: #706e6b;
}

.at-table th.at-th-check {
  width: 36px;
  text-align: center;
  padding: 0 4px;
}

.at-table th.at-th-actions {
  width: 60px;
  border-right: none;
}

/* Data column header inner layout */
.at-th-content {
  display: flex;
  align-items: center;
  height: 36px;
  padding: 0 6px 0 12px;
  gap: 4px;
  overflow: hidden;
}

.at-th-label {
  flex: 1;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  letter-spacing: 0.02em;
}

.at-th-sort {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  border-radius: 3px;
  font-size: 9px;
  color: #706e6b;
  background: transparent;
  border: 1px solid transparent;
  line-height: 1;
  cursor: pointer;
  transition: background 0.1s, border-color 0.1s, color 0.1s;
}

.at-th-sort:hover {
  background: #e8e8e8;
  border-color: #c9c7c5;
  color: #3e3e3c;
}

/* Resize handle on right edge of each data <th> */
.at-table th.at-th[data-col] .at-resize-handle {
  position: absolute;
  right: 0;
  top: 0;
  bottom: 0;
  width: 6px;
  cursor: col-resize;
  z-index: 5;
  user-select: none;
}

.at-table th.at-th[data-col] .at-resize-handle::after {
  content: '';
  position: absolute;
  right: 1px;
  top: 20%;
  bottom: 20%;
  width: 2px;
  border-radius: 1px;
  background: transparent;
  transition: background 0.1s;
}

.at-table th.at-th[data-col] .at-resize-handle:hover::after,
.at-table th.at-th[data-col] .at-resize-handle.dragging::after {
  background: var(--brand-600, #2563eb);
}

body.at-col-resizing {
  cursor: col-resize !important;
  user-select: none !important;
}

body.at-col-resizing * {
  cursor: col-resize !important;
}

/* Data rows */
.at-table td {
  height: 36px;
  padding: 6px 12px !important;
  font-size: 13px !important;
  color: #181818;
  border-bottom: 1px solid #e9e9e9;
  overflow: hidden;
  white-space: nowrap;
  vertical-align: middle;
}

.at-table tbody tr:last-child td {
  border-bottom: none;
}

.at-table tbody tr.at-row:hover td {
  background: #f3f2f2;
}

.at-table td.at-td-rownum {
  text-align: right;
  font-size: 11px !important;
  color: #706e6b;
  padding-right: 8px !important;
  padding-left: 6px !important;
  background: #fafafa;
}

.at-table td.at-td-check {
  text-align: center;
  padding: 0 4px !important;
}

.at-table td.at-td-actions {
  text-align: center;
  padding: 0 !important;
  overflow: visible;
  width: 60px;
}

/* Row action dropdown (▼ caret per row) */
.at-action-wrap {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 100%;
}

.at-action-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 52px;
  height: 26px;
  border-radius: 4px;
  background: transparent;
  border: 1px solid transparent;
  color: #706e6b;
  font-size: 10px;
  cursor: pointer;
  transition: background 0.1s, border-color 0.1s, color 0.1s;
}

.at-action-btn:hover {
  background: #f0f0ef;
  border-color: #c9c7c5;
  color: #3e3e3c;
}

.at-action-btn:focus-visible {
  outline: none;
  box-shadow: none;
}

.at-row-menu {
  position: absolute;
  right: 0;
  top: 100%;
  z-index: 200;
  min-width: 140px;
  width: max-content;
  background: #fff;
  border: 1px solid #dddbda;
  border-radius: 6px;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.14);
  padding: 3px 0;
  margin-top: 2px;
}

.at-row-menu button {
  display: flex;
  align-items: center;
  width: 100%;
  padding: 6px 12px;
  font-size: 12px;
  color: #3e3e3c;
  background: transparent;
  border: none;
  cursor: pointer;
  text-align: left;
  transition: background 0.08s;
}

.at-row-menu button:hover {
  background: #f3f3f3;
}

.at-row-menu button.danger {
  color: #c23934;
}

.at-row-menu button.danger:hover {
  background: #fef2f2;
}

/* Column header dropdown (Clip text / Wrap text) */
.at-col-menu {
  position: absolute;
  left: 0;
  top: 100%;
  z-index: 210;
  min-width: 140px;
  background: #fff;
  border: 1px solid #dddbda;
  border-radius: 6px;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.14);
  padding: 4px 0;
  margin-top: 2px;
}

.at-col-menu button {
  display: flex;
  align-items: center;
  width: 100%;
  padding: 7px 14px;
  font-size: 13px;
  color: #3e3e3c;
  background: transparent;
  border: none;
  cursor: pointer;
  text-align: left;
  transition: background 0.08s;
}

.at-col-menu button:hover {
  background: #f3f3f3;
}

.at-col-menu button.at-col-active {
  font-weight: 600;
  color: var(--brand-600, #2563eb);
}

.at-col-menu button.at-col-active::before {
  content: '✓';
  margin-right: 6px;
  font-size: 11px;
}

.at-col-menu button:not(.at-col-active)::before {
  content: '';
  display: inline-block;
  width: 17px;
}

/* Ensure links inside at-table use brand colour */
.at-table a {
  color: var(--brand-600, #2563eb);
  text-decoration: none;
}

.at-table a:hover {
  text-decoration: underline;
}

/* ============================================================
   REDUCED MOTION
   Respect user preference: collapse durations to near-zero so any
   transition/animation completes instantly. Keeps state changes
   visible (no flash) without disorientation.
   ============================================================ */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* ============================================================
   MOBILE BOTTOM NAVIGATION
   Fixed tab bar for quick section switching on phones.
   Hidden on md+ via Tailwind's md:hidden.
   ============================================================ */
#mobile-bottom-nav {
  height: calc(3.5rem + env(safe-area-inset-bottom, 0px));
  padding-bottom: env(safe-area-inset-bottom, 0px);
}

#mobile-bottom-nav .mobile-nav-item {
  color: var(--text-tertiary);
  text-decoration: none;
  transition: color var(--transition-fast);
  -webkit-tap-highlight-color: transparent;
}

#mobile-bottom-nav .mobile-nav-item.is-active {
  color: var(--brand-600);
}

#mobile-bottom-nav .mobile-nav-item:active {
  opacity: 0.7;
}

/* ============================================================
   MOBILE CONTENT ADJUSTMENTS
   ============================================================ */
@media (max-width: 767px) {
  /* Clear space for the bottom nav so last content rows aren't hidden behind it */
  #main-content {
    padding-bottom: calc(3.5rem + env(safe-area-inset-bottom, 0px) + 0.75rem) !important;
  }

  /* Table wrappers that use overflow-hidden would clip wide tables —
     switch them to horizontal scroll on mobile instead */
  #main-content .overflow-hidden:has(> table) {
    overflow-x: auto !important;
    overflow-y: visible !important;
    -webkit-overflow-scrolling: touch;
  }

  /* Give tables a minimum width so key columns stay readable;
     the wrapper above handles the scroll */
  #main-content table.min-w-full {
    min-width: 520px;
  }
}

/* ============================================================
   MY WORK — single checkbox column (done-toggle vs bulk-select)
   Each row stacks both inputs in one cell: the "done" checkbox
   shows by default and swaps for the "select" checkbox on hover.
   Once any row is selected, every row sticks on the select
   checkbox so the bulk action bar stays usable without hovering.
   ============================================================ */
#mw-content.selecting .task-done-cb   { display: none !important; }
#mw-content.selecting .task-select-cb { display: block !important; }
}