/* CADCAM Partner — shared palette & layout (New Task page art direction) */
@import url('fonts.css');

:root, [data-theme="light"] {
  --text-xs:   0.8125rem;
  --text-sm:   0.875rem;
  --text-base: 0.9375rem;
  --text-lg:   1.0625rem;
  --fw-regular: 400;
  --fw-medium: 500;
  --fw-semibold: 500;
  --fw-bold: 560;

  --space-1: 0.25rem; --space-2: 0.5rem; --space-3: 0.75rem;
  --space-4: 1rem;    --space-5: 1.25rem; --space-6: 1.5rem;
  --space-8: 2rem;    --space-10: 2.5rem; --space-12: 3rem;

  --color-bg:             #e8e4df;
  --color-surface:        #faf8f6;
  --color-surface-2:      #f3f0ec;
  --color-surface-offset: #ebe6e0;
  --color-border:         oklch(0 0 0 / 0.10);
  --color-divider:        oklch(0 0 0 / 0.06);
  --color-text:           #111111;
  --color-text-muted:     #666666;
  --color-text-faint:     #aaaaaa;
  --color-text-inverse:   #ffffff;
  /* Brand red — matches .btn-new-task in site-header.css */
  --color-brand:            #c0000a;
  --color-brand-hover:      #960008;
  --color-brand-light:      #fdf0f0;
  --color-primary:          var(--color-brand);
  --color-primary-hover:    var(--color-brand-hover);
  --color-primary-light:    var(--color-brand-light);
  --color-row-selected:   #f3f0ec;
  --color-table-header:        #4a4744;
  --color-table-header-text:   #f5f2ee;
  --color-table-header-muted:  #c4bfb8;

  --color-task-cad:              #fb923c;
  --color-task-cad-bg:           #fff7ed;
  --color-task-cnc:              #38bdf8;
  --color-task-cnc-bg:           #e0f2fe;
  --color-task-production:       #6d28d9;
  --color-task-production-bg:    #f3effc;
  --color-task-proto:            #db2777;
  --color-task-proto-bg:         #fdf2f8;

  --color-panel-header:        var(--color-surface);
  --panel-header-stripes:      none;
  --color-panel-header-border: var(--color-divider);
  --panel-header-height:       3.25rem;
  --panel-header-padding-y:    var(--space-3);
  --panel-header-padding-x:    var(--space-4);

  --color-view-toggle:       var(--color-surface-2);
  --color-view-toggle-hover: var(--color-surface-offset);
  --color-view-toggle-text:  var(--color-text-muted);
  /* Graphite accent — matches dark mode --color-text-faint */
  --color-graphite:          #7a746e;

  --page-options-fab-bg:            #6a6762;
  --page-options-fab-bg-hover:      #78746e;
  --page-options-fab-border:        #949088;
  --page-options-fab-text:            #f5f2ee;
  --page-options-fab-label:           #d8d4ce;
  --page-options-fab-icon-bg:         #3a3834;
  --page-options-fab-icon-color:      #eceae6;
  --page-options-fab-drag-dot:        #b8b4ae;
  --page-options-fab-shadow:          0 4px 16px oklch(0 0 0 / 0.42);
  --page-options-fab-shadow-hover:    0 8px 22px oklch(0 0 0 / 0.5);

  --radius-sm: 0.375rem; --radius-md: 0.5rem;
  --radius-lg: 0.75rem;  --radius-xl: 1rem;
  --shadow-sm: 0 1px 2px oklch(0 0 0 / 0.08);
  --shadow-md: 0 4px 12px oklch(0 0 0 / 0.10);
  --transition: 160ms cubic-bezier(0.16, 1, 0.3, 1);
  --font-body: 'Rubik', system-ui, sans-serif;
  --app-ui-scale: 0.85;
  --page-min-width: 1280px;

  /* UI icons — base sizes (laptop-first density) */
  --icon-scale: 1;
  --icon-10: calc(10px * var(--icon-scale));
  --icon-11: calc(11px * var(--icon-scale));
  --icon-12: calc(12px * var(--icon-scale));
  --icon-13: calc(13px * var(--icon-scale));
  --icon-14: calc(14px * var(--icon-scale));
  --icon-16: calc(16px * var(--icon-scale));
  --icon-18: calc(18px * var(--icon-scale));
  --icon-20: calc(20px * var(--icon-scale));
  --icon-22: calc(22px * var(--icon-scale));
  --icon-24: calc(24px * var(--icon-scale));
  --icon-26: calc(26px * var(--icon-scale));
  --icon-28: calc(28px * var(--icon-scale));
  --icon-32: calc(32px * var(--icon-scale));
  --icon-btn: calc(36px * var(--icon-scale));
  --icon-fab: calc(46px * var(--icon-scale));

  --scrollbar-size: 5px;
  --scrollbar-thumb: #b8b2ac;
  --scrollbar-thumb-hover: #8a8480;
}

[data-theme="dark"] {
  --color-bg:             #121110;
  --color-surface:        #1e1c1a;
  --color-surface-2:      #2e2c28;
  --color-surface-offset: #3a3632;
  --color-border:         oklch(1 0 0 / 0.10);
  --color-divider:        oklch(1 0 0 / 0.06);
  --color-text:           #f0ece8;
  --color-text-muted:     #b0aaa4;
  --color-text-faint:     #7a746e;
  --color-brand:            #c0000a;
  --color-brand-hover:      #960008;
  --color-brand-light:      #2a1212;
  --color-primary:          var(--color-brand);
  --color-primary-hover:    var(--color-brand-hover);
  --color-primary-light:    var(--color-brand-light);
  --color-row-selected:   #3a3834;
  --color-table-header:        #2a2826;
  --color-table-header-text:   #f0ece7;
  --color-table-header-muted:  #a8a29a;

  --color-task-cad:              #fdba74;
  --color-task-cad-bg:           #2e2218;
  --color-task-cnc:              #7dd3fc;
  --color-task-cnc-bg:           #152536;
  --color-task-production:       #a78bfa;
  --color-task-production-bg:    #261e36;
  --color-task-proto:            #f472b6;
  --color-task-proto-bg:         #361828;

  --color-panel-header:        var(--color-surface);
  --panel-header-stripes:      none;
  --color-panel-header-border: var(--color-divider);
  --panel-header-height:       3.25rem;
  --panel-header-padding-y:    var(--space-3);
  --panel-header-padding-x:    var(--space-4);

  --color-view-toggle:       var(--color-surface-2);
  --color-view-toggle-hover: var(--color-surface-offset);
  --color-view-toggle-text:  var(--color-text-muted);
  --shadow-sm: 0 1px 2px oklch(0 0 0 / 0.35);
  --shadow-md: 0 4px 12px oklch(0 0 0 / 0.45);

  --scrollbar-thumb: #6a6560;
  --scrollbar-thumb-hover: #8a8480;
}

/* Keep header New Task button on the same brand red as the rest of the app */
.top-bar {
  --header-primary: var(--color-brand);
  --header-primary-hover: var(--color-brand-hover);
  --header-primary-light: var(--color-brand-light);
}

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

html {
  height: 100%;
  zoom: var(--app-ui-scale);
  overflow-x: auto;
  background: var(--color-bg);
  color-scheme: light;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  font-optical-sizing: auto;
  font-synthesis: none;
}
html[data-theme="dark"] {
  color-scheme: dark;
}

/* Firefox: no zoom — scale typography instead */
@supports not (zoom: 1) {
  html {
    font-size: calc(100% * var(--app-ui-scale));
  }
}

body {
  font-family: var(--font-body);
  font-size: var(--text-sm);
  font-weight: var(--fw-regular, 400);
  letter-spacing: 0.012em;
  color: var(--color-text);
  background: var(--color-bg);
  min-width: var(--page-min-width, 1280px);
  min-height: calc(100dvh / var(--app-ui-scale));
  height: calc(100dvh / var(--app-ui-scale));
  display: flex;
  flex-direction: column;
  overflow-x: auto;
  overflow-y: hidden;
}

/* Rubik reads heavier than Inter at the same numeric weight. */
small,
.label,
.field > label,
.field label,
.meta,
.hint,
.muted,
input,
select,
textarea {
  font-weight: var(--fw-regular, 400);
  letter-spacing: 0.015em;
}

/* Tickboxes: Windows Chromium applies the I-beam to real <input type="checkbox">
   under the cursor even with appearance:none + pointer-events:none. Last try —
   clip the native control out of the hit area and paint a non-input face. */
:root {
  --ui-check-size: 16px;
  --ui-check-border: 1.5px solid var(--color-border, #c8c4be);
  --ui-check-bg: var(--color-surface, #fff);
  --ui-check-mark: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='none' stroke='%23ffffff' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round' d='M3.5 8.5l3 3 6-6'/%3E%3C/svg%3E");
}

input[type="checkbox"],
input[type="radio"] {
  -webkit-appearance: none !important;
  appearance: none !important;
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0, 0, 0, 0) !important;
  clip-path: inset(50%) !important;
  border: 0 !important;
  white-space: nowrap !important;
  opacity: 0 !important;
  pointer-events: none !important;
  cursor: pointer !important;
  color: transparent;
  caret-color: transparent;
  accent-color: var(--color-primary, #c0000a);
}

/* Label / filter hosts: ::before is the visible tickbox (never a form control). */
label:has(> input[type="checkbox"]),
label:has(> input[type="radio"]),
.list-filter-check:has(> input[type="checkbox"]) {
  position: relative;
  cursor: pointer !important;
}

label:has(> input[type="checkbox"])::before,
label:has(> input[type="radio"])::before,
.list-filter-check:has(> input[type="checkbox"])::before {
  content: '';
  display: inline-block;
  flex-shrink: 0;
  box-sizing: border-box;
  width: var(--ui-check-size);
  height: var(--ui-check-size);
  margin-top: 2px;
  border: var(--ui-check-border);
  background-color: var(--ui-check-bg);
  background-position: center;
  background-repeat: no-repeat;
  background-size: 12px 12px;
  vertical-align: middle;
  pointer-events: none;
}

label:has(> input[type="checkbox"])::before,
.list-filter-check:has(> input[type="checkbox"])::before {
  border-radius: 3px;
}
label:has(> input[type="radio"])::before {
  border-radius: 50%;
}

label:has(> input[type="checkbox"]:checked)::before,
.list-filter-check:has(> input[type="checkbox"]:checked)::before {
  background-color: var(--color-primary, #c0000a);
  border-color: var(--color-primary, #c0000a);
  background-image: var(--ui-check-mark);
}
label:has(> input[type="radio"]:checked)::before {
  border-color: var(--color-primary, #c0000a);
  background-image: radial-gradient(circle, var(--color-primary, #c0000a) 38%, transparent 42%);
}

label:has(> input[type="checkbox"]:disabled)::before,
label:has(> input[type="radio"]:disabled)::before,
.list-filter-check:has(> input[type="checkbox"]:disabled)::before {
  opacity: 0.55;
}

label:has(> input[type="checkbox"]:focus-visible)::before,
label:has(> input[type="radio"]:focus-visible)::before,
.list-filter-check:has(> input[type="checkbox"]:focus-visible)::before {
  outline: 2px solid var(--color-primary, #c0000a);
  outline-offset: 2px;
}

/* Picker rows: face lives on the actions span; row supplies the hand cursor. */
.workers-picker__actions,
.meeting-invite-picker__actions,
.machine-options-picker__actions {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: var(--ui-check-size);
  height: var(--ui-check-size);
  pointer-events: none;
}

.machine-options-picker__actions {
  width: 22px;
  height: 22px;
}

.workers-picker__actions::before,
.meeting-invite-picker__actions::before,
.machine-options-picker__actions::before {
  content: '';
  position: absolute;
  inset: 0;
  box-sizing: border-box;
  border: var(--ui-check-border);
  border-radius: 3px;
  background-color: var(--ui-check-bg);
  background-position: center;
  background-repeat: no-repeat;
  background-size: 12px 12px;
  pointer-events: none;
}

.workers-picker__item:has(.workers-picker__check:checked) .workers-picker__actions::before,
.meeting-invite-picker__item:has(.meeting-invite-picker__check:checked) .meeting-invite-picker__actions::before,
.machine-options-picker__item:has(.machine-options-picker__check:checked) .machine-options-picker__actions::before {
  background-color: var(--color-primary, #c0000a);
  border-color: var(--color-primary, #c0000a);
  background-image: var(--ui-check-mark);
}

.workers-picker__item:has(.workers-picker__check:focus-visible) .workers-picker__actions::before,
.meeting-invite-picker__item:has(.meeting-invite-picker__check:focus-visible) .meeting-invite-picker__actions::before,
.machine-options-picker__item:has(.machine-options-picker__check:focus-visible) .machine-options-picker__actions::before {
  outline: 2px solid var(--color-primary, #c0000a);
  outline-offset: 2px;
}

button,
.btn {
  font-weight: var(--fw-medium, 500);
  letter-spacing: 0.02em;
}


@media (min-width: 1921px) {
  :root, [data-theme="light"], [data-theme="dark"] {
    --app-ui-scale: 0.88;
    --text-xs: 0.8125rem;
    --text-sm: 0.875rem;
    --text-base: 1rem;
    --text-lg: 1.125rem;
  }
}

/* Scrollbars — thin thumb only, no visible track */
* {
  scrollbar-width: thin;
  scrollbar-color: var(--scrollbar-thumb) transparent;
}

*::-webkit-scrollbar {
  width: var(--scrollbar-size);
  height: var(--scrollbar-size);
}

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

*::-webkit-scrollbar-thumb {
  background-color: var(--scrollbar-thumb);
  border-radius: 999px;
}

*::-webkit-scrollbar-thumb:hover {
  background-color: var(--scrollbar-thumb-hover);
}

*::-webkit-scrollbar-corner {
  background: transparent;
}

.panel {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow-sm);
  display: flex;
  flex-direction: column;
  min-height: 0;
}

.panel-header {
  flex-shrink: 0;
  box-sizing: border-box;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  height: auto;
  min-height: var(--panel-header-height);
  max-height: none;
  padding: var(--panel-header-padding-y) var(--panel-header-padding-x);
  border-bottom: none;
  background-color: var(--color-panel-header);
  background-image: var(--panel-header-stripes);
}

.panel-header::after,
.pref-section-header::after,
.settings-card > h3::after,
.settings-card__header::after,
.settings-card > .settings-cnc-preview-head::after,
.settings-pref-guide-list__title::after,
.settings-pref-editor__header::after,
.settings-pref-preview-col .panel-header--file-preview::after {
  content: '';
  position: absolute;
  left: var(--panel-header-padding-x);
  right: var(--panel-header-padding-x);
  bottom: 0;
  height: 1px;
  background: var(--color-panel-header-border);
  pointer-events: none;
}

.panel-header,
.pref-section-header,
.settings-card > h3,
.settings-card__header,
.settings-card > .settings-cnc-preview-head,
.settings-pref-guide-list__title,
.settings-pref-editor__header,
.settings-pref-preview-col .panel-header--file-preview {
  position: relative;
}

/* Shared solid panel-header look across pages (no stripes) */
.panel-header,
.kanban-column-header,
.kanban-on-hold-header,
.kanban-archived-header,
.pref-section-header,
.settings-card > h3,
.settings-card__header,
.settings-card > .settings-cnc-preview-head,
.settings-pref-guide-list__title,
.settings-pref-editor__header,
.settings-pref-preview-col .panel-header--file-preview {
  background-color: var(--color-panel-header);
  background-image: var(--panel-header-stripes);
}

/* Same height + bottom rule as New Task panel headers */
.panel-header,
.pref-section-header,
.settings-card > h3,
.settings-card__header,
.settings-card > .settings-cnc-preview-head,
.settings-pref-guide-list__title,
.settings-pref-editor__header,
.settings-pref-preview-col .panel-header--file-preview,
.kanban-column-header,
.kanban-on-hold-header,
.kanban-archived-header {
  box-sizing: border-box;
  display: flex;
  align-items: center;
  height: auto;
  min-height: var(--panel-header-height);
  max-height: none;
  padding: var(--panel-header-padding-y) var(--panel-header-padding-x);
}

.panel-header,
.pref-section-header,
.settings-card > h3,
.settings-card__header,
.settings-card > .settings-cnc-preview-head,
.settings-pref-guide-list__title,
.settings-pref-editor__header,
.settings-pref-preview-col .panel-header--file-preview {
  border-bottom: none;
}

.kanban-column-header,
.kanban-on-hold-header,
.kanban-archived-header {
  border-bottom: 1px solid var(--color-panel-header-border);
}

.kanban-column-header {
  border-bottom-width: 3px;
  border-bottom-color: var(--col-accent);
  padding-left: var(--space-4);
  padding-right: var(--space-4);
  justify-content: space-between;
  gap: var(--space-2);
}

.kanban-on-hold-header {
  border-bottom-width: 3px;
  border-bottom-color: var(--status-hold);
}

.kanban-archived-header {
  border-bottom-width: 3px;
  border-bottom-color: var(--status-archived);
}

.panel-header h2,
.pref-section-header h2,
.settings-card > h3,
.settings-card__header h3,
.settings-card > .settings-cnc-preview-head h3,
.settings-pref-guide-list__title,
.settings-pref-editor__header h3 {
  margin: 0;
  line-height: 1.25;
  font-size: var(--text-lg);
  font-weight: 600;
  letter-spacing: -0.01em;
  color: var(--color-text);
}

.kanban-column-header h2 {
  margin: 0;
  line-height: 1.2;
  font-size: var(--text-xs);
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--color-text);
}

.panel-header p {
  font-size: var(--text-xs);
  color: var(--color-text-muted);
  margin: 0;
  line-height: 1.2;
}

/* Header action icons — match New Task (28px) */
.panel-header .task-edit-controls,
.pref-section-header .task-edit-controls,
.settings-cnc-preview-head .task-edit-controls,
.settings-pref-editor__header .task-edit-controls {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 6px;
  flex-shrink: 0;
  min-width: calc(var(--icon-28) * 3 + 6px * 2);
  min-height: var(--icon-28);
}

.panel-header .task-edit-toggle,
.panel-header .task-edit-action,
.pref-section-header .task-edit-toggle,
.pref-section-header .task-edit-action,
.settings-cnc-preview-head .task-edit-toggle,
.settings-cnc-preview-head .task-edit-action,
.settings-pref-editor__header .task-edit-toggle,
.settings-pref-editor__header .task-edit-action {
  width: var(--icon-28) !important;
  height: var(--icon-28) !important;
}

.panel-body {
  flex: 1 1 auto;
  min-height: 0;
  overflow-x: hidden;
  overflow-y: auto;
  padding: var(--space-4) var(--space-5);
  -webkit-overflow-scrolling: touch;
}

.panel-footer {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: var(--space-3);
  padding: var(--panel-header-padding-y) var(--panel-header-padding-x);
  border-top: none;
  background: var(--color-panel-header);
  position: relative;
}

.panel-footer::before {
  content: '';
  position: absolute;
  left: var(--panel-header-padding-x);
  right: var(--panel-header-padding-x);
  top: 0;
  height: 1px;
  background: var(--color-panel-header-border);
  pointer-events: none;
}

.page-options-fab {
  position: fixed;
  left: 0;
  bottom: var(--space-6);
  top: auto;
  z-index: 1000;
  width: auto;
  height: auto;
  touch-action: pan-y;
}

/* Custom Y is applied as inline bottom (px) — keep top:auto so it never stretches. */
.page-options-fab.is-custom-pos {
  top: auto;
}

.page-options-fab.is-dragging .page-options-fab__trigger {
  cursor: grabbing;
  box-shadow: var(--page-options-fab-shadow-hover);
}

.page-options-fab.is-dragging .ui-hover-hint {
  opacity: 0 !important;
}

.ui-hint-wrap {
  position: relative;
  display: inline-flex;
  align-items: center;
}

.ui-hint-wrap--block {
  display: block;
  width: 100%;
}

.ui-hover-hint {
  position: absolute;
  top: 50%;
  pointer-events: none;
  white-space: nowrap;
  padding: var(--space-1) var(--space-3);
  font-family: var(--font-body);
  font-size: var(--text-xs);
  font-weight: var(--fw-medium, 500);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--color-text-muted);
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  box-shadow: var(--shadow-md);
  opacity: 0;
  transition: opacity var(--transition), transform var(--transition);
  transition-delay: 0s;
  z-index: 10;
}

.ui-hover-hint--left {
  right: calc(100% + var(--space-2));
  transform: translateY(-50%) translateX(6px);
}

.ui-hover-hint--right {
  left: calc(100% + var(--space-2));
  transform: translateY(-50%) translateX(-6px);
}

.ui-hover-hint--bottom {
  top: calc(100% + var(--space-2));
  left: 50%;
  right: auto;
  transform: translateX(-50%) translateY(-4px);
}

.ui-hover-hint--top {
  top: auto;
  bottom: calc(100% + var(--space-2));
  left: 50%;
  right: auto;
  transform: translateX(-50%) translateY(4px);
}

.ui-hint-wrap:hover .ui-hover-hint,
.ui-hint-wrap:focus-within .ui-hover-hint {
  opacity: 1;
  transition-delay: 1s;
}

.ui-hint-wrap:hover .ui-hover-hint--left,
.ui-hint-wrap:focus-within .ui-hover-hint--left {
  transform: translateY(-50%) translateX(0);
}

.ui-hint-wrap:hover .ui-hover-hint--right,
.ui-hint-wrap:focus-within .ui-hover-hint--right {
  transform: translateY(-50%) translateX(0);
}

.ui-hint-wrap:hover .ui-hover-hint--bottom,
.ui-hint-wrap:focus-within .ui-hover-hint--bottom {
  transform: translateX(-50%) translateY(0);
}

.ui-hint-wrap:hover .ui-hover-hint--top,
.ui-hint-wrap:focus-within .ui-hover-hint--top {
  transform: translateX(-50%) translateY(0);
}

.page-options-fab__hint-wrap {
  position: relative;
  display: inline-flex;
}

.page-options-fab.is-open .ui-hover-hint {
  opacity: 0 !important;
}

.page-options-fab.is-dragging .ui-hover-hint {
  opacity: 0 !important;
}

.page-options-fab__trigger {
  position: relative;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  gap: 0;
  width: 2.5rem;
  min-width: 2.5rem;
  height: 2.5rem;
  padding: 0;
  border: 1px solid var(--page-options-fab-border);
  border-left: 3px solid var(--page-options-fab-icon-bg);
  border-radius: 0 var(--radius-md) var(--radius-md) 0;
  background: var(--page-options-fab-bg);
  color: var(--page-options-fab-text);
  box-shadow: var(--page-options-fab-shadow);
  cursor: grab;
  overflow: hidden;
  transition:
    width var(--transition),
    min-width var(--transition),
    padding var(--transition),
    gap var(--transition),
    color var(--transition),
    background var(--transition),
    border-color var(--transition),
    box-shadow var(--transition);
}

.page-options-fab__trigger:focus-visible {
  outline: 2px solid oklch(0.72 0 0 / 0.55);
  outline-offset: 2px;
}

.page-options-fab:hover .page-options-fab__trigger,
.page-options-fab.is-open .page-options-fab__trigger,
.page-options-fab.is-dragging .page-options-fab__trigger,
.page-options-fab:focus-within .page-options-fab__trigger {
  justify-content: flex-start;
  gap: var(--space-2);
  width: auto;
  min-width: 9.5rem;
  padding: 0 var(--space-3) 0 var(--space-2);
  color: var(--page-options-fab-text);
  background: var(--page-options-fab-bg-hover);
  border-color: var(--page-options-fab-border);
  box-shadow: var(--page-options-fab-shadow-hover);
}

.page-options-fab__bookmark-label {
  font-family: var(--font-body);
  font-size: 0.625rem;
  font-weight: var(--fw-medium, 500);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--page-options-fab-label);
  line-height: 1;
  white-space: nowrap;
  user-select: none;
  max-width: 0;
  opacity: 0;
  overflow: hidden;
  transition: max-width var(--transition), opacity var(--transition);
}

.page-options-fab:hover .page-options-fab__bookmark-label,
.page-options-fab.is-open .page-options-fab__bookmark-label,
.page-options-fab.is-dragging .page-options-fab__bookmark-label,
.page-options-fab:focus-within .page-options-fab__bookmark-label {
  max-width: 6rem;
  opacity: 1;
}

.page-options-fab__bookmark-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 1.875rem; /* ~15% larger than 1.625rem */
  height: 1.875rem;
  margin-left: 0;
  border-radius: 50%;
  border: 1px solid oklch(1 0 0 / 0.14);
  background: var(--page-options-fab-icon-bg);
  color: var(--page-options-fab-icon-color);
  box-shadow: inset 0 1px 0 oklch(1 0 0 / 0.08);
  transition: margin-left var(--transition);
}

.page-options-fab:hover .page-options-fab__bookmark-icon,
.page-options-fab.is-open .page-options-fab__bookmark-icon,
.page-options-fab.is-dragging .page-options-fab__bookmark-icon,
.page-options-fab:focus-within .page-options-fab__bookmark-icon {
  margin-left: auto;
}

.page-options-fab__bookmark-icon svg {
  width: calc(var(--icon-18) * 1.15);
  height: calc(var(--icon-18) * 1.15);
}

.page-options-fab__drag-hint {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 3px;
  opacity: 0;
  user-select: none;
  flex-shrink: 0;
  max-width: 0;
  overflow: hidden;
  transition: max-width var(--transition), opacity var(--transition);
}

.page-options-fab:hover .page-options-fab__drag-hint,
.page-options-fab.is-open .page-options-fab__drag-hint,
.page-options-fab.is-dragging .page-options-fab__drag-hint,
.page-options-fab:focus-within .page-options-fab__drag-hint {
  max-width: 1rem;
  opacity: 0.55;
}

.page-options-fab__drag-dot {
  display: block;
  width: 3px;
  height: 3px;
  border-radius: 50%;
  background: var(--page-options-fab-drag-dot);
}

.page-options-fab__menu {
  position: absolute;
  left: calc(100% + var(--space-2));
  right: auto;
  bottom: 0;
  top: auto;
  min-width: 210px;
  margin: 0;
  padding: var(--space-1);
  list-style: none;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  box-shadow: var(--shadow-md, 0 8px 24px oklch(0 0 0 / 0.12));
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transform: translateX(-6px);
  transition: opacity var(--transition), transform var(--transition), visibility var(--transition);
  transition-delay: 0s;
}

.page-options-fab:hover .page-options-fab__menu,
.page-options-fab.is-open .page-options-fab__menu,
.page-options-fab:focus-within .page-options-fab__menu {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transform: translateX(0);
  transition-delay: 0.12s;
}

.page-options-fab.is-dragging .page-options-fab__menu {
  opacity: 0 !important;
  visibility: hidden !important;
  pointer-events: none !important;
}

.page-options-fab__branch {
  display: block;
  width: 100%;
}

.page-options-fab__branch-toggle {
  width: 100%;
}

.page-options-fab__branch-chevron {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: var(--icon-16);
  height: var(--icon-16);
  margin-left: auto;
  color: var(--color-text-muted);
  transition: transform var(--transition);
}

.page-options-fab__branch-chevron svg {
  width: var(--icon-14, 14px);
  height: var(--icon-14, 14px);
}

.page-options-fab__branch.is-open .page-options-fab__branch-chevron {
  transform: rotate(90deg);
}

.page-options-fab__branch-panel {
  display: block;
  margin: 0 0 0.2rem 0.55rem;
  padding: 0.1rem 0 0.15rem 0.45rem;
  border-left: 2px solid var(--color-border);
}

.page-options-fab__branch-panel[hidden] {
  display: none !important;
}

.page-options-fab__branch-panel .page-options-fab__item {
  padding-left: var(--space-2);
}

.page-options-fab__item {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  width: 100%;
  padding: var(--space-2) var(--space-3);
  border: none;
  border-radius: var(--radius-sm);
  background: transparent;
  color: var(--color-text);
  font-family: var(--font-body);
  font-size: var(--text-xs);
  font-weight: var(--fw-medium, 500);
  line-height: 1.35;
  text-align: left;
  cursor: pointer;
  transition: background var(--transition), color var(--transition);
}

a.page-options-fab__item {
  text-decoration: none;
  box-sizing: border-box;
  color: var(--color-text);
  font-weight: var(--fw-medium, 500);
}

.page-options-fab__item--control,
.page-options-fab__item-label,
.page-options-fab__item-label--stack {
  font-weight: var(--fw-medium, 500);
}

.page-options-fab__item:last-child {
  min-height: 2.5rem;
}

.page-options-fab__item:hover,
.page-options-fab__item:focus-visible {
  outline: none;
  background: var(--color-surface-2);
  color: var(--color-text);
}

.page-options-fab__item-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: var(--icon-18);
  height: var(--icon-18);
  color: var(--color-text-muted);
}

.page-options-fab__item-icon svg {
  width: var(--icon-16);
  height: var(--icon-16);
}

.page-options-fab__item-label {
  flex: 1 1 auto;
  min-width: 0;
}

.page-options-fab__item-label--stack {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.35rem;
}

.page-options-fab__item--control {
  cursor: default;
  align-items: flex-start;
}

.page-options-fab__item--control:hover,
.page-options-fab__item--control:focus-visible {
  background: transparent;
  color: var(--color-text);
}

.page-options-fab__interval-row {
  display: flex;
  align-items: center;
  gap: 0.35rem;
  width: 100%;
}

.page-options-fab__interval-input {
  width: 4.5rem;
  min-height: 1.75rem;
  padding: 0.2rem 0.4rem;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  background: var(--color-surface);
  color: var(--color-text);
  font-family: var(--font-body);
  font-size: var(--text-xs);
}

.page-options-fab__interval-unit {
  color: var(--color-text-muted);
  font-size: var(--text-xs);
}

.page-options-fab__interval-save {
  margin-left: auto;
  padding: 0.2rem 0.55rem;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  background: var(--color-surface-2);
  color: var(--color-text);
  font-family: var(--font-body);
  font-size: var(--text-xs);
  cursor: pointer;
}

.page-options-fab__interval-save:hover,
.page-options-fab__interval-save:focus-visible {
  outline: none;
  border-color: var(--color-accent, var(--color-border-strong, #888));
}

/* Legacy FABs — removed from markup; keep rules for any stale cache */
.theme-fab,
.panel-layout-reset-fab {
  position: fixed;
  left: auto;
  right: var(--space-6);
  z-index: 100;
  width: var(--icon-fab);
  height: var(--icon-fab);
  border-radius: 50%;
  border: 1px solid var(--color-border);
  background: var(--color-surface);
  color: var(--color-text);
  box-shadow: var(--shadow-md);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: color var(--transition), background var(--transition), border-color var(--transition), transform var(--transition);
}

.theme-fab {
  bottom: var(--space-6);
}

.panel-layout-reset-fab {
  bottom: calc(var(--space-6) + var(--icon-fab) + var(--space-3));
}

.theme-fab:hover,
.panel-layout-reset-fab:hover {
  color: var(--color-text);
  background: var(--color-surface-2);
  transform: scale(1.05);
}

.theme-fab svg,
.panel-layout-reset-fab svg {
  width: var(--icon-20);
  height: var(--icon-20);
}

/* App-wide UI icon sizing (uses --icon-scale) */
.icon-btn svg {
  width: var(--icon-24);
  height: var(--icon-24);
}
.list-page-icon-btn {
  width: var(--icon-btn);
  height: var(--icon-btn);
}
.list-page-icon-btn svg {
  width: var(--icon-18);
  height: var(--icon-18);
}
.list-search svg {
  width: var(--icon-14);
  height: var(--icon-14);
}
.btn-filter-toggle svg {
  width: var(--icon-16);
  height: var(--icon-16);
}
.chat-upload-btn,
.chat-emoji-btn {
  width: var(--icon-btn) !important;
  height: var(--icon-btn) !important;
}
.chat-upload-btn svg,
.chat-emoji-btn svg {
  width: var(--icon-16) !important;
  height: var(--icon-16) !important;
}
.chat-send-btn {
  width: calc(var(--icon-btn) + 6px) !important;
  height: calc(var(--icon-btn) + 6px) !important;
}
.chat-send-btn svg {
  width: var(--icon-18) !important;
  height: var(--icon-18) !important;
}
.chats-sidebar-tab svg,
.task-list-sidebar-tab svg,
.list-filter-sidebar-tab svg {
  width: var(--icon-14);
  height: var(--icon-14);
}
.file-group-toggle svg,
.file-preview-fullscreen-btn svg,
.center-panel-collapse-btn svg,
.task-edit-toggle svg,
.task-edit-action svg,
.task-more-toggle svg {
  width: var(--icon-14);
  height: var(--icon-14);
}
/* Upload panels: scale only the glyph inside the button, not the button box */
.upload-panel .upload-btn--compact svg,
.upload-panel .upload-btn svg {
  width: var(--icon-26);
  height: var(--icon-26);
  flex-shrink: 0;
}
.file-group-toggle,
.file-preview-fullscreen-btn,
.center-panel-collapse-btn,
.task-more-toggle {
  width: var(--icon-28) !important;
  height: var(--icon-28) !important;
}
.chat-member-btn {
  width: var(--icon-28) !important;
  height: var(--icon-28) !important;
}
.task-edit-toggle,
.task-edit-action {
  width: var(--icon-28) !important;
  height: var(--icon-28) !important;
}
.task-edit-toggle--compact,
.task-edit-action--compact {
  width: 28px !important;
  height: 28px !important;
}
.task-edit-toggle--compact svg,
.task-edit-action--compact svg {
  width: var(--icon-14) !important;
  height: var(--icon-14) !important;
}
.impersonation-edit-controls {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  flex-shrink: 0;
}
.impersonation-edit-confirm-group {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.impersonation-edit-confirm-group[hidden] {
  display: none !important;
}
.user-menu-chevron {
  width: var(--icon-14);
  height: var(--icon-14);
}

/* Icon hovers — neutral highlight (no brand-red) */
.chat-upload-btn:hover:not(:disabled),
.chat-composer.is-dragover .chat-upload-btn:not(:disabled),
.chat-upload-btn.is-dragover:not(:disabled) {
  color: var(--color-text) !important;
  background: var(--color-surface-2) !important;
  border-color: oklch(from var(--color-primary) l c h / 0.45) !important;
  box-shadow: 0 0 0 3px oklch(from var(--color-primary) l c h / 0.1) !important;
}
.chat-upload-btn:hover:not(:disabled) svg {
  color: currentColor !important;
}
.center-panel-collapse-btn:hover:not(:disabled) {
  color: var(--color-text) !important;
  background: var(--color-surface-2) !important;
  border-color: oklch(from var(--color-text) l c h / 0.2) !important;
}
.upload-panel .upload-btn--compact:hover:not(:disabled),
.upload-panel.is-dragover .upload-btn--compact:not(:disabled),
.upload-btn--compact.is-dragover:not(:disabled) {
  color: var(--color-text) !important;
  background: var(--color-surface-2) !important;
  border-color: oklch(from var(--color-primary) l c h / 0.45) !important;
  border-style: solid !important;
  box-shadow: 0 0 0 3px oklch(from var(--color-primary) l c h / 0.1) !important;
}
.upload-panel .upload-btn--compact:hover:not(:disabled) svg,
.upload-panel.is-dragover .upload-btn--compact:not(:disabled) svg,
.upload-btn--compact.is-dragover:not(:disabled) svg {
  color: currentColor !important;
  opacity: 1;
}

/* Prevent global icon-btn rules from shrinking task upload controls */
.upload-panel .upload-btn--compact {
  width: 100%;
  height: auto;
  min-width: 0;
  min-height: 0;
  max-width: none;
}
.list-page-icon-btn.has-filters:hover {
  color: var(--color-text);
  border-color: oklch(from var(--color-text) l c h / 0.2);
  background: var(--color-surface-2);
}

/* Centered alert dialog for all pages */
.gattech-alert-overlay {
  position: fixed;
  inset: 0;
  z-index: 10050;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--space-4);
  background: oklch(0 0 0 / 0.38);
  backdrop-filter: blur(1px);
}
.gattech-alert-box {
  width: min(460px, calc(100vw - 2 * var(--space-4)));
  background: var(--color-surface);
  color: var(--color-text);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-md);
  padding: var(--space-5);
}
.gattech-alert-title {
  font-size: var(--text-base);
  font-weight: var(--fw-medium, 500);
  margin-bottom: var(--space-2);
}
.gattech-alert-message {
  font-size: var(--text-sm);
  line-height: 1.5;
  color: var(--color-text-muted);
  white-space: pre-wrap;
}
.gattech-alert-actions {
  margin-top: var(--space-4);
  display: flex;
  justify-content: flex-end;
  gap: var(--space-2);
  flex-wrap: wrap;
}
.gattech-alert-btn {
  min-width: 88px;
  padding: var(--space-2) var(--space-4);
  border: 1px solid var(--color-primary);
  border-radius: var(--radius-sm);
  background: var(--color-primary);
  color: var(--color-text-inverse);
  font: inherit;
  font-weight: var(--fw-medium, 500);
  cursor: pointer;
}
.gattech-alert-btn:hover {
  background: var(--color-primary-hover);
  border-color: var(--color-primary-hover);
}
.gattech-alert-btn--secondary {
  background: transparent;
  color: var(--color-text-muted);
  border-color: var(--color-border);
}
.gattech-alert-btn--secondary:hover {
  background: var(--color-surface-2);
  border-color: var(--color-border);
  color: var(--color-text);
}
.gattech-alert-btn--danger {
  background: var(--color-primary);
  border-color: var(--color-primary);
  color: var(--color-text-inverse);
}
.gattech-alert-btn--danger:hover {
  background: var(--color-primary-hover);
  border-color: var(--color-primary-hover);
}

/* Report-a-bug modal image picker */
.bug-report-image {
  margin-top: var(--space-3);
}
.bug-report-image__label {
  display: block;
  font-size: var(--text-xs);
  font-weight: var(--fw-medium, 500);
  margin-bottom: var(--space-1);
  color: var(--color-text);
}
.bug-report-image__dropzone {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  min-height: 88px;
  padding: var(--space-3);
  border: 1.5px dashed var(--color-border);
  border-radius: var(--radius-sm);
  background: var(--color-surface-2);
  cursor: pointer;
  transition: border-color var(--transition), background var(--transition), box-shadow var(--transition);
}
.bug-report-image__dropzone:hover,
.bug-report-image__dropzone:focus-visible {
  border-color: var(--color-primary);
  outline: none;
}
.bug-report-image__dropzone.is-dragover {
  border-color: var(--color-primary);
  background: var(--color-primary-light);
  box-shadow: inset 0 0 0 1px var(--color-primary);
}
.bug-report-image__dropzone.has-image {
  border-style: solid;
}
.bug-report-image__drop-copy {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
  color: var(--color-text-muted);
  font-size: var(--text-xs);
  line-height: 1.35;
}
.bug-report-image__drop-copy strong {
  color: var(--color-text);
  font-weight: var(--fw-medium, 500);
}
.bug-report-image__drop-copy[hidden] {
  display: none !important;
}
.bug-report-image__preview {
  display: none;
  width: 72px;
  height: 72px;
  flex-shrink: 0;
  border-radius: var(--radius-sm);
  border: 1px solid var(--color-border);
  object-fit: cover;
  background: var(--color-surface);
}
.bug-report-image__preview.is-visible {
  display: block;
}
.bug-report-image__meta {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  min-width: 0;
  flex: 1;
}
.bug-report-image__meta[hidden] {
  display: none !important;
}
.bug-report-image__name {
  font-size: var(--text-xs);
  color: var(--color-text-muted);
  min-width: 0;
  flex: 1 1 auto;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.bug-report-image__clear {
  font: inherit;
  font-size: var(--text-xs);
  padding: var(--space-1) var(--space-3);
  border-radius: var(--radius-sm);
  border: 1px solid var(--color-border);
  background: var(--color-surface);
  color: var(--color-text);
  cursor: pointer;
  flex-shrink: 0;
}
.bug-report-image__clear:hover {
  border-color: var(--color-primary);
  color: var(--color-primary);
}

.gattech-alert-overlay--notice {
  cursor: pointer;
}

.gattech-alert-overlay--notice .gattech-alert-box {
  cursor: pointer;
}

.gattech-alert-overlay--notice .gattech-alert-message::after {
  content: 'Click anywhere to dismiss.';
  display: block;
  margin-top: var(--space-3);
  font-size: var(--text-xs);
  color: var(--color-text-faint);
}

/* Segmented view / channel toggles (Kanban–List, Task–Support–Team chat) */
.view-toggle {
  display: inline-flex;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  overflow: hidden;
  background: var(--color-border);
}
.view-toggle-btn {
  padding: var(--space-2) var(--space-4);
  font-family: var(--font-body);
  font-size: var(--text-xs);
  font-weight: var(--fw-medium, 500);
  border: none;
  background: var(--color-view-toggle);
  color: var(--color-view-toggle-text);
  cursor: pointer;
  transition: background var(--transition), color var(--transition);
  white-space: nowrap;
}
.view-toggle-btn + .view-toggle-btn {
  border-left: 1px solid var(--color-border);
}
.view-toggle-btn.is-active {
  background: var(--color-primary);
  color: var(--color-text-inverse);
}
.view-toggle-btn:hover:not(.is-active) {
  background: var(--color-view-toggle-hover);
  color: var(--color-text);
}
.view-toggle-btn[hidden] {
  display: none !important;
}

/* Custom dropdown rows: hover and click apply to the whole row, not just the label or box */
.workers-picker__item,
.meeting-invite-picker__item,
.machine-options-picker__item,
.settings-picker__item:not(.settings-picker__item--add),
.priority-picker__item {
  cursor: pointer;
  user-select: none;
}
.workers-picker__check,
.meeting-invite-picker__check,
.machine-options-picker__check {
  /* Native control stays clipped (see rules above); face is on __actions::before */
  pointer-events: none !important;
  cursor: pointer !important;
}

/* Page FAB — floating options; position can be dragged */

html body > .theme-fab,
html body > .panel-layout-reset-fab {
  left: auto !important;
  right: var(--space-6) !important;
}

/* Light mode action icons: black glyph, no frame at rest; red glyph + frame on hover.
   Delete (and discard) also paint the frame red. */
html[data-theme="light"] .task-edit-action,
html[data-theme="light"] .task-edit-action--cancel,
html[data-theme="light"] .task-edit-action--confirm,
html[data-theme="light"] .task-edit-action--delete,
html[data-theme="light"] .task-edit-action--reset,
html[data-theme="light"] .time-entry-icon-btn,
html[data-theme="light"] .list-page-icon-btn,
html[data-theme="light"] .chat-emoji-btn,
html[data-theme="light"] .chat-upload-btn,
html[data-theme="light"] .chat-member-btn,
html[data-theme="light"] .file-group-toggle,
html[data-theme="light"] .task-quote-link-btn,
html[data-theme="light"] .task-more-toggle,
html[data-theme="light"] .remove-part-btn,
html[data-theme="light"] .file-preview-fullscreen-close,
html[data-theme="light"] .time-timer-btn,
html[data-theme="light"] .time-log-mode-switch-btn,
html[data-theme="light"] .users-list-sign-in-btn,
html[data-theme="light"] .screenshot-folder-close,
html[data-theme="light"] .screenshot-preview-delete-selected,
html[data-theme="light"] .production-add-btn,
html[data-theme="light"] .upload-panel .upload-btn--compact {
  color: var(--color-text) !important;
  background: transparent !important;
  border: 1px solid transparent !important;
  border-radius: var(--radius-sm) !important;
  box-shadow: none !important;
  box-sizing: border-box;
}

html[data-theme="light"] .quote-item-upload-panel.upload-panel--quote > .quote-row-remove,
.quote-item-upload-panel.upload-panel--quote > .quote-row-remove {
  color: var(--color-text-muted) !important;
  background: var(--color-surface) !important;
  border: 1px solid var(--color-border) !important;
}

/* Match task/client/user delete, cancel, confirm to time-tracker list icons */
html[data-theme="light"] .task-edit-action,
html[data-theme="light"] .task-edit-action--cancel,
html[data-theme="light"] .task-edit-action--confirm,
html[data-theme="light"] .task-edit-action--delete,
html[data-theme="light"] .task-edit-action--reset,
html[data-theme="light"] .task-edit-action--compact,
html[data-theme="light"] .file-group-toggle,
html[data-theme="light"] .task-quote-link-btn {
  width: 2.3rem !important;
  height: 2.3rem !important;
  min-width: 2.3rem !important;
  min-height: 2.3rem !important;
}
html[data-theme="light"] .task-edit-action svg,
html[data-theme="light"] .task-edit-action--compact svg,
html[data-theme="light"] .file-group-toggle svg,
html[data-theme="light"] .task-quote-link-btn svg {
  width: 1.25rem !important;
  height: 1.25rem !important;
  min-width: 1.25rem !important;
  min-height: 1.25rem !important;
}
html[data-theme="light"] .task-edit-action--confirm.task-edit-action--request {
  width: auto !important;
  height: 2.3rem !important;
}
html[data-theme="light"] .panel-header .task-edit-controls,
html[data-theme="light"] .pref-section-header .task-edit-controls,
html[data-theme="light"] .settings-cnc-preview-head .task-edit-controls,
html[data-theme="light"] .settings-pref-editor__header .task-edit-controls,
html[data-theme="light"] .client-detail-panel-actions,
html[data-theme="light"] .user-detail-panel-actions,
html[data-theme="light"] .roles-detail-panel-actions {
  min-width: calc(2.3rem * 3 + 6px * 2);
  min-height: 2.3rem;
}

html[data-theme="light"] .chat-upload-btn svg,
html[data-theme="light"] .upload-panel .upload-btn--compact svg,
html[data-theme="light"] .chat-emoji-btn svg,
html[data-theme="light"] .task-edit-action svg,
html[data-theme="light"] .time-entry-icon-btn svg,
html[data-theme="light"] .list-page-icon-btn svg {
  color: currentColor !important;
  opacity: 1 !important;
}

html[data-theme="light"] .task-edit-action:hover:not(:disabled),
html[data-theme="light"] .task-edit-action:focus-visible:not(:disabled),
html[data-theme="light"] .task-edit-action--cancel:hover:not(:disabled),
html[data-theme="light"] .task-edit-action--cancel:focus-visible:not(:disabled),
html[data-theme="light"] .task-edit-action--confirm:hover:not(:disabled),
html[data-theme="light"] .task-edit-action--confirm:focus-visible:not(:disabled),
html[data-theme="light"] .task-edit-action--reset:hover:not(:disabled),
html[data-theme="light"] .task-edit-action--reset:focus-visible:not(:disabled),
html[data-theme="light"] .time-entry-icon-btn:hover:not(:disabled):not(.time-entry-icon-btn--disabled),
html[data-theme="light"] .time-entry-icon-btn:focus-visible:not(:disabled):not(.time-entry-icon-btn--disabled),
html[data-theme="light"] .list-page-icon-btn:hover:not(:disabled),
html[data-theme="light"] .list-page-icon-btn:focus-visible:not(:disabled),
html[data-theme="light"] .list-page-icon-btn.is-active,
html[data-theme="light"] .list-page-icon-btn.has-filters,
html[data-theme="light"] .chat-emoji-btn:hover:not(:disabled),
html[data-theme="light"] .chat-emoji-btn:focus-visible:not(:disabled),
html[data-theme="light"] .chat-emoji-btn[aria-expanded="true"],
html[data-theme="light"] .chat-upload-btn:hover:not(:disabled),
html[data-theme="light"] .chat-upload-btn:focus-visible:not(:disabled),
html[data-theme="light"] .chat-member-btn:hover:not(:disabled),
html[data-theme="light"] .chat-member-btn:focus-visible:not(:disabled),
html[data-theme="light"] .file-group-toggle:hover:not(:disabled),
html[data-theme="light"] .file-group-toggle:focus-visible:not(:disabled),
html[data-theme="light"] .task-quote-link-btn:hover:not(:disabled),
html[data-theme="light"] .task-quote-link-btn:focus-visible:not(:disabled),
html[data-theme="light"] .task-more-toggle:hover:not(:disabled),
html[data-theme="light"] .task-more-toggle:focus-visible:not(:disabled),
html[data-theme="light"] .task-more-toggle[aria-expanded="true"],
html[data-theme="light"] .task-more-menu.is-open .task-more-toggle,
html[data-theme="light"] .time-timer-btn:hover:not(:disabled),
html[data-theme="light"] .time-timer-btn:focus-visible:not(:disabled),
html[data-theme="light"] .time-log-mode-switch-btn:hover:not(:disabled),
html[data-theme="light"] .time-log-mode-switch-btn:focus-visible:not(:disabled),
html[data-theme="light"] .time-log-mode-switch-btn.is-active,
html[data-theme="light"] .users-list-sign-in-btn:hover:not(:disabled),
html[data-theme="light"] .users-list-sign-in-btn:focus-visible:not(:disabled),
html[data-theme="light"] .production-add-btn:hover:not(:disabled),
html[data-theme="light"] .production-add-btn:focus-visible:not(:disabled),
html[data-theme="light"] .upload-panel .upload-btn--compact:hover:not(:disabled),
html[data-theme="light"] .upload-panel .upload-btn--compact:focus-visible:not(:disabled),
html[data-theme="light"] .upload-panel.is-dragover .upload-btn--compact:not(:disabled),
html[data-theme="light"] .upload-btn--compact.is-dragover:not(:disabled) {
  color: var(--color-primary) !important;
  background: var(--color-surface-2) !important;
  border-color: oklch(from var(--color-primary) l c h / 0.45) !important;
  border-style: solid !important;
  box-shadow: 0 0 0 3px oklch(from var(--color-primary) l c h / 0.1) !important;
}

html[data-theme="light"] .task-edit-action--delete:hover:not(:disabled),
html[data-theme="light"] .task-edit-action--delete:focus-visible:not(:disabled),
html[data-theme="light"] .time-entry-icon-btn--delete:hover:not(:disabled):not(.time-entry-icon-btn--disabled),
html[data-theme="light"] .time-entry-icon-btn--delete:focus-visible:not(:disabled):not(.time-entry-icon-btn--disabled),
html[data-theme="light"] .time-timer-btn--discard:hover:not(:disabled),
html[data-theme="light"] .time-timer-btn--discard:focus-visible:not(:disabled),
html[data-theme="light"] .screenshot-folder-close:hover,
html[data-theme="light"] .screenshot-folder-close:focus-visible,
html[data-theme="light"] .screenshot-preview-delete-selected:hover,
html[data-theme="light"] .screenshot-preview-delete-selected:focus-visible,
html[data-theme="light"] .remove-part-btn:hover:not(:disabled),
html[data-theme="light"] .remove-part-btn:focus-visible:not(:disabled),
html[data-theme="light"] .file-preview-fullscreen-close:hover,
html[data-theme="light"] .file-preview-fullscreen-close:focus-visible {
  color: var(--color-primary) !important;
  background: var(--color-surface) !important;
  border-color: var(--color-primary) !important;
  box-shadow: none !important;
}

html[data-theme="light"] .time-timer-btn:disabled,
html[data-theme="light"] .time-log-mode-switch-btn:disabled,
html[data-theme="light"] .chat-emoji-btn:disabled,
html[data-theme="light"] .chat-upload-btn:disabled,
html[data-theme="light"] .file-group-toggle:disabled,
html[data-theme="light"] .task-quote-link-btn:disabled {
  color: var(--color-text-faint) !important;
  background: transparent !important;
  border-color: transparent !important;
}