@tailwind base;
@tailwind components;
@tailwind utilities;

@layer utilities {
  .scrollbar-hide {
    -ms-overflow-style: none;
    scrollbar-width: none;
  }
  .scrollbar-hide::-webkit-scrollbar {
    display: none;
  }
}

.material-symbols-outlined,
.material-icons-outlined {
  font-family: 'Material Symbols Outlined', 'Material Icons Outlined';
  font-weight: normal;
  font-style: normal;
  line-height: 1;
  letter-spacing: normal;
  text-transform: none;
  display: inline-block;
  white-space: nowrap;
  word-wrap: normal;
  direction: ltr;
  font-variation-settings:
    'FILL' 0,
    'wght' 400,
    'GRAD' 0,
    'opsz' 24;
  -webkit-font-feature-settings: 'liga';
  font-feature-settings: 'liga';
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

.material-symbols-outlined.icon-fill {
  font-variation-settings:
    'FILL' 1,
    'wght' 400,
    'GRAD' 0,
    'opsz' 24;
}

.material-symbols-outlined[data-icon],
.material-icons-outlined[data-icon] {
  font-size: 0 !important;
  position: relative;
  width: 1em;
  height: 1em;
  overflow: hidden;
}

.scan-scroll {
  scrollbar-width: thin;
  scrollbar-color: #969FAF transparent;
}
.scan-scroll::-webkit-scrollbar {
  width: 8px;
}
.scan-scroll::-webkit-scrollbar-track {
  background: transparent;
}
.scan-scroll::-webkit-scrollbar-thumb {
  background-color: #969FAF;
  border-radius: 9999px;
  border: 2px solid transparent;
  background-clip: content-box;
}

.material-symbols-outlined[data-icon]::before,
.material-icons-outlined[data-icon]::before {
  content: attr(data-icon);
  font-size: 24px;
  font-family: 'Material Symbols Outlined', 'Material Icons Outlined';
  font-variation-settings:
    'FILL' 0,
    'wght' 400,
    'GRAD' 0,
    'opsz' 24;
  -webkit-font-feature-settings: 'liga';
  font-feature-settings: 'liga';
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  line-height: 1;
  display: block;
}

/* Respect custom font sizes from classes */
.material-symbols-outlined[data-icon].text-\[16px\],
.material-icons-outlined[data-icon].text-\[16px\] {
  font-size: 0 !important;
}

.material-symbols-outlined[data-icon].text-\[16px\]::before,
.material-icons-outlined[data-icon].text-\[16px\]::before {
  font-size: 16px;
}

@layer components {
  /* Light / dark mode text + background on the root element */
  html {
    @apply text-app-shade2 bg-app-shade9;

    /* Theme toggle HSL variables */
    --toggle-bg: 222 40% 96%;
    --toggle-shadow: 222 25% 60%;
    --toggle-light: 0 0% 100%;
    --toggle-dark: 220 27% 12%; /* ~ #151B25 */
    --toggle-light-icon: 140 70% 55%;
    --toggle-dark-icon: 220 25% 20%;
  }

  /* When the html element has the `dark` class, use the dark background #293040 (app-dark) */
  html.dark {
    background-color: #293040;
    @apply text-app-shade8;
  }

  /* Modern vertical theme toggle switch */
  .theme-toggle {
    @apply relative border-0;
    font-size: 0;
    line-height: 0;
    color: transparent;
  }

  .theme-toggle svg {
    font-size: initial;
  }

  .theme-toggle__container {
    @apply relative;
  }

  .theme-toggle__track {
    @apply relative h-14 w-8 rounded-full transition-all duration-300 ease-in-out;
    background-color: hsl(var(--toggle-bg));
    box-shadow: -2px -2px 6px 0px rgba(255, 255, 255, 0.8), 2px 2px 6px 0px rgba(0, 0, 0, 0.1);
  }

  /* Dark mode toggle background */
  html.dark .theme-toggle__track {
    background-color: #293040;
    box-shadow: -1px -1px 3px 0px #272727, 1px 1px 3px 0px rgba(255, 255, 255, 0.15);
  }

  .theme-toggle__slider {
    @apply absolute left-1/2 top-1 h-6 w-6 -translate-x-1/2 rounded-full transition-all duration-300 ease-in-out;
    background-color: hsl(var(--toggle-light));
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
  }

  /* Light mode state - slider at top */
  .theme-toggle[data-mode="light"] .theme-toggle__slider {
    @apply top-1;
    background-color: hsl(var(--toggle-light));
  }

  /* Dark mode state - slider at bottom */
  .theme-toggle[data-mode="dark"] .theme-toggle__slider {
    @apply top-[calc(100%-1.5rem-0.25rem)];
    background-color: #D3D7E0;
  }

  .theme-toggle__icon {
    @apply absolute inset-0 transition-all duration-300;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  /* Sun icon - visible in light mode */
  .theme-toggle__icon--sun {
    @apply opacity-100 scale-100;
  }

  .theme-toggle[data-mode="light"] .theme-toggle__icon--sun svg,
  .theme-toggle[data-mode="light"] .theme-toggle__icon--sun path,
  .theme-toggle[data-mode="light"] .theme-toggle__icon--sun circle {
    fill: hsl(var(--toggle-light-icon));
  }

  .theme-toggle[data-mode="dark"] .theme-toggle__icon--sun {
    @apply opacity-0 scale-75;
  }

  /* Moon icon - visible in dark mode */
  .theme-toggle__icon--moon {
    @apply opacity-0 scale-75;
  }

  .theme-toggle[data-mode="dark"] .theme-toggle__icon--moon {
    @apply opacity-100 scale-100;
  }

  .theme-toggle[data-mode="dark"] .theme-toggle__icon--moon svg,
  .theme-toggle[data-mode="dark"] .theme-toggle__icon--moon path,
  .theme-toggle[data-mode="dark"] .theme-toggle__icon--moon circle {
    fill: #69D661;
  }

  .label {
    @apply text-app-shade1 font-bold;
  }

  .bruno-ace {
    font-family: "Bruno Ace", sans-serif;
    font-weight: 400;
    font-style: normal;
  }

  .inter {
    font-family: "Inter var", sans-serif;
    font-weight: 400;
    font-style: normal;
  }

  a {
    @apply text-blue-700;
  }

  input:disabled {
    @apply bg-gray-200 opacity-30;
  }

  a[disabled] {
    @apply opacity-30 pointer-events-none;
  }

  a.btn[disabled] {
    @apply bg-gray-200;
  }

  .menu {
    @apply grid grid-cols-3 gap-4 p-4 border [&>*]:menu-item;
  }

  .menu-item {
    @apply text-center p-4;
  }

  .shadow-modal {
    box-shadow: 2px 2px 6px 0 rgba(105, 110, 120, 0.5),
      -1px 0 4px 0 rgba(131, 136, 145, 0.25);
  }

  .modal {
    @apply shadow-modal bg-app-shade9 dark:bg-app-dark rounded-xl;
  }

  button, .button, input[type="submit"], [role="button"] {
    @apply px-3 py-1 border disabled:bg-opacity-30 font-bold cursor-pointer disabled:cursor-default hover:bg-opacity-80 rounded ;
  }

  .button-icon {
    @apply size-[36px] border border-app-shade7 dark:border-app-shade3 flex justify-center items-center rounded-full disabled:!opacity-30 [&:is([disabled],.disabled)]:!opacity-30 cursor-pointer disabled:cursor-default [&:is([disabled],.disabled)]:cursor-default;
  }

  summary.button-icon::marker {
    display: none;
  }

  .button-icon:not(.dark) {
    @apply bg-app-shade9 dark:bg-app-dark;

    & > i.icon, & > svg.icon {
      @apply text-app-shade1 dark:text-white size-[18px] text-[18px];
    }
  }

  .button-icon.dark {
    @apply bg-app-shade1;

    .icon {
      @apply text-app-shade9 size-[18px] text-[18px];
    }
  }

  .toggle-button {
    @apply dark:text-white dark:border-app-shade3;

    &.active {
      @apply bg-app-shade1 text-white dark:bg-transparent dark:text-app-green;
    }
  }

  html.dark .button-icon.dark {
    @apply bg-transparent;
  }

  html.dark .button-icon.dark .icon {
    @apply text-app-green;
  }

  .button-icon-sm {
    @apply w-[24px] h-[24px] flex justify-center items-center text-app-muted border-transparent hover:border-app-muted;
  }

  .button-plain {
    @apply p-1 border-none font-normal;
  }

  button.button-primary,
  .button.button-primary,
  input[type="submit"].button-primary {
    @apply bg-blue-600 text-white py-2;
  }

  .button-small {
    @apply h-9 flex justify-center items-center !py-0;
  }

  .state-button {
    @apply bg-app-shade8 text-app-muted font-normal border-none;
  }

  .state-button.active {
    @apply text-app-green;
  }

  .action-button {
    @apply h-12 min-w-20 px-2 font-normal rounded-lg flex justify-center items-center border border-app-shade7 dark:border-app-shade3 text-app-shade1 dark:text-white;
  }

  .input {
    @apply h-[60px] text-[24px] bg-app-gray dark:bg-app-dark dark:text-white border-none outline-none rounded px-6 py-4;
  }

  .input-field {
    @apply border-0 rounded invalid:!border-2 invalid:border-red-400;
  }

  .notice {
    @apply border border-blue-400 p-4;
  }

  .alert {
    @apply border border-red-400 p-4;
  }

  .table thead th {
    @apply p-2 text-gray-500 dark:text-app-shade8 font-normal whitespace-nowrap align-middle;
  }


  /* Date bar navigation arrows - white in dark mode */
  html.dark .date-bar-arrow {
    color: white !important;
  }

  html.dark .date-bar-arrow svg path {
    fill: currentColor !important;
  }

  .table tbody td {
    @apply p-2 border-t dark:border-app-shade3;
  }

  .table tbody tr:last-child td {
    @apply border-b dark:border-app-shade3;
  }

  /* Dark mode: table text should be white */
  html.dark .table tbody td {
    @apply text-white;
  }

  .table thead tr {
    @apply [&>th:first-child]:text-center [&>th:not(:first-child)]:text-left;
  }

  .avatar {
    @apply size-[22px] border rounded-full flex justify-center items-center font-bold text-xs;
  }

  .logo-text {
    @apply bruno-ace text-[#DE3754] text-[24px];
  }

  .dropdown {
    @apply min-w-32 absolute mt-[3px] top-[100%] -right-4 border border-app-shade7 dark:border-app-shade3 shadow-md bg-white dark:bg-app-dark dark:text-white;
  }

  .dropdown-item-sm {
    @apply h-10 [&:not(:first-child)]:border-b [&:not(:first-child)]:border-app-shade7 dark:[&:not(:first-child)]:border-app-shade3 px-3 py-2 hover:bg-gray-50 dark:hover:bg-app-shade3 font-normal dark:text-white;
  }

  .dropdown-item {
    @apply px-6 py-5 text-sm text-app-shade1 dark:text-white transition-colors;
  }

  .dropdown-item:first-of-type {
    @apply pt-6;
  }

  .dropdown-item:last-of-type {
    @apply pb-6;
  }

  .dropdown-item:hover {
    @apply bg-app-shade9 dark:bg-app-shade3;
  }

  .dropdown-item a,
  .dropdown-item {
    @apply text-app-shade1 dark:text-white;
  }

  .dropdown-item a {
    @apply hover:no-underline;
  }

  .dropdown-item i {
    @apply text-app-shade5 dark:text-app-shade8;
  }

  .icon {
    @apply w-5 h-5 text-[22px];
  }

  .home-icon path {
    @apply fill-app-shade1 group-hover:fill-app-white;
  }

  /* Dark mode: home icons should be white */
  html.dark .home-icon {
    @apply text-white;
  }

  html.dark .home-icon path {
    @apply fill-white;
  }

  html.dark .home-icon circle {
    @apply fill-white stroke-white;
  }

  /* Dark mode: on hover, icons should be dark when tile is white */
  html.dark .group:hover .home-icon {
    @apply text-app-black2;
  }

  html.dark .group:hover .home-icon path {
    @apply fill-app-black2;
  }

  html.dark .group:hover .home-icon circle {
    @apply fill-app-black2 stroke-app-black2;
  }

  .bar-icon {
    @apply text-app-shade1;

    &.active {
      @apply text-app-green;
    }

    path {
      @apply fill-app-shade1;
    }
    circle {
      @apply stroke-app-shade1;
    }

    &.active path {
      @apply fill-app-green;
    }
    &.active circle {
      @apply stroke-app-green;
    }
  }

  /* Dark mode: sidebar icons should be white (except active which stays green) */
  html.dark .sidebar-item .bar-icon:not(.active) {
    @apply text-white;
  }

  html.dark .sidebar-item .bar-icon:not(.active) path {
    @apply fill-white;
  }

  html.dark .sidebar-item .bar-icon:not(.active) circle {
    @apply stroke-white;
  }

  .select-wrapper {
    @apply relative;
  }
  .select-control {
    @apply w-60 h-[38px] py-[6px] px-[10px] border border-app-shade7 dark:border-app-shade3 rounded flex items-center gap-2 relative bg-white dark:bg-app-dark dark:text-white transition-colors;
    border-width: 1px !important;
  }
  .select-control:hover {
    border-color: #69D661 !important;
  }

  .select-wrapper.queue-inline-field-select .select-control {
    border: none !important;
    border-width: 0 !important;
    box-shadow: none !important;
    background: transparent !important;
    border-radius: 0 !important;
    height: auto !important;
    min-height: 0 !important;
    padding: 0 !important;
  }

  .select-wrapper.queue-inline-field-select .select-control:hover {
    border-color: transparent !important;
  }

  .select-wrapper.queue-inline-field-select label.group\/select {
    padding-left: 0;
  }
  .select-wrapper [data-select-target="input"] {
    @apply w-full border-none outline-none p-0;
  }
  .select-control .select-clear,
  .select-control [data-select-target="close"] {
    @apply flex items-center justify-center shrink-0 self-stretch leading-none;
  }
  .select-wrapper [data-select-target="close"] {
    @apply cursor-pointer;
  }
  .select-wrapper [data-select-target="list"] {
    @apply hidden min-w-full w-max max-h-96 absolute left-0 top-[100%] mt-[1px] z-50 bg-white dark:bg-app-dark dark:text-white text-app-black overflow-auto overscroll-contain touch-pan-y border dark:border-app-shade3 empty:!hidden;
    -webkit-overflow-scrolling: touch;

    &[data-open] {
      display: block;
    }
  }

  .select-wrapper [data-select-target="list"].select-list--fixed {
    @apply z-[200] shadow-md border border-app-shade7 dark:border-app-shade3;
  }

  /* Keep header hover actions visible while the column-move menu is open. */
  .group:has(.select-wrapper[data-select-open-value="true"]) > div.absolute {
    display: flex !important;
  }

  .group:has(.select-wrapper[data-select-open-value="true"]) .select-wrapper {
    display: block !important;
  }

  /* Open upward when there isn't enough room below the control. */
  .select-wrapper [data-select-target="list"].select-list--up {
    @apply top-auto bottom-[100%] mt-0 mb-[1px];
  }
  .select-wrapper[data-select-open-value="true"] .search-input input {
    opacity: 1;
  }
  .select-wrapper[data-select-open-value="false"][data-select-no-clear-on-close-value="false"] .search-input input {
    opacity: 0;
  }
  /* Shift board: a column per worker under each day, with availability drawn as
     blocks against a fixed hour range. */
  .shift-calendar-table { @apply border-separate border-spacing-0; }
  .shift-calendar-day-head {
    @apply text-center py-2 px-2 border-b border-l border-app-shade7 dark:border-app-shade3 dark:text-white;
  }
  /* Weekday sits above the date, quieter than it, so a week scans by day name
     without the date losing its place as the heading. */
  .shift-calendar-day-head__dow {
    @apply text-[10px] uppercase tracking-wide text-app-shade5 dark:text-app-shade8 leading-none mb-[2px];
  }
  .shift-calendar-day-head--today .shift-calendar-day-head__dow {
    @apply text-emerald-600 dark:text-emerald-400 font-semibold;
  }
  .shift-calendar-worker-head {
    @apply text-xs font-normal text-app-shade5 dark:text-app-shade8 py-1 px-1 border-b border-l border-app-shade7 dark:border-app-shade3;
  }
  .shift-calendar-gutter {
    @apply text-[10px] text-app-shade5 dark:text-app-shade8 pr-2 text-right align-top w-12;
  }
  .shift-calendar-hour { @apply h-8 leading-8; }
  .shift-calendar-cell { @apply align-top p-0 border-l border-app-shade7 dark:border-app-shade3; }
  .shift-calendar-column {
    @apply relative cursor-pointer;
    width: var(--shift-col-w, 110px);
    /* hours drawn x .shift-calendar-hour — the count comes from the component,
       which widens the range to fit the shifts actually on screen. */
    height: calc(var(--shift-hours, 14) * 2rem);
  }
  .shift-calendar-column:hover { @apply bg-app-shade8/40 dark:bg-app-shade3/30; }
  .shift-calendar-column--override { @apply bg-amber-50/60 dark:bg-amber-500/5; }
  .shift-block {
    @apply absolute left-1 right-1 rounded-md text-[11px] leading-tight px-1 py-[2px] overflow-hidden;
  }
  .shift-block--default { @apply bg-emerald-400/80 text-emerald-950; }
  .shift-block--override { @apply bg-emerald-500 text-white ring-2 ring-amber-400; }
  .shift-block--off {
    @apply bg-app-shade8 dark:bg-app-shade3 text-app-shade5 dark:text-app-shade8;
    background-image: repeating-linear-gradient(45deg, transparent, transparent 4px, rgba(0,0,0,.06) 4px, rgba(0,0,0,.06) 8px);
  }
  .shift-calendar-total {
    @apply text-center text-[11px] py-1 text-app-shade5 dark:text-app-shade8 border-t border-app-shade7 dark:border-app-shade3;
  }
  .shift-calendar-total--off { @apply opacity-60; }

  /* The day editor, drawn under the cell it belongs to so it does not need to
     be positioned against the scrolling board. */
  /* Held to the column's own width: the editor sits inside the cell, so letting
     its contents size it stretched the column wider than the day header above
     and knocked the whole grid out of alignment. */
  .shift-calendar-editor {
    @apply border-t border-app-shade7 dark:border-app-shade3 p-1 text-[11px] bg-white dark:bg-app-dark;
    width: var(--shift-col-w, 110px);
    box-sizing: border-box;
  }
  .shift-calendar-editor__hint { @apply text-app-shade5 dark:text-app-shade8 mb-1 leading-tight; }
  .shift-calendar-editor__label { @apply block text-[10px] text-app-shade5 dark:text-app-shade8 leading-none mb-[1px]; }
  /* Two radios on one row: the editor column is 130px wide, so they are sized
     to fit side by side rather than wrapping under each other. */
  .shift-calendar-editor__availability { @apply flex items-center gap-2 mb-1; }
  .shift-calendar-editor__availability-option {
    @apply flex items-center gap-1 text-[10px] text-app-shade5 dark:text-app-shade8 cursor-pointer leading-none;
  }
  .shift-calendar-editor__availability-option input { @apply m-0 w-[11px] h-[11px] accent-emerald-500; }
  /* Full width and stacked. A native time input needs room for HH:MM plus the
     browser's own clock affordance — at the 46px it had, the digits were cut
     off. */
  .shift-calendar-editor__time {
    @apply w-full border border-app-shade7 dark:border-app-shade3 rounded px-1 py-[2px] mb-1
           bg-white dark:bg-app-dark dark:text-white outline-none text-[11px];
    box-sizing: border-box;
  }
  .shift-calendar-editor__buttons { @apply flex flex-wrap items-center gap-1; }
  .shift-calendar-editor__save { @apply px-2 py-[2px] rounded bg-app-green text-white; }
  .shift-calendar-editor__off,
  .shift-calendar-editor__cancel {
    @apply px-2 py-[2px] rounded border border-app-shade7 dark:border-app-shade3 dark:text-white;
  }

  /* Utilization cells: a pill per day showing how full a worker's schedule is.
     Bands match the report's mockup — over capacity, comfortably full, spare
     capacity, and no shift at all. */
  .utilization-pill {
    @apply inline-block min-w-[54px] px-2 py-[2px] rounded-md text-sm font-medium tabular-nums;
  }
  .utilization-pill--over {
    @apply bg-rose-100 text-rose-700 dark:bg-rose-500/20 dark:text-rose-200;
  }
  .utilization-pill--full {
    @apply bg-emerald-100 text-emerald-700 dark:bg-emerald-500/20 dark:text-emerald-200;
  }
  .utilization-pill--under {
    @apply bg-violet-100 text-violet-700 dark:bg-violet-500/20 dark:text-violet-200;
  }
  .utilization-pill--none {
    @apply bg-transparent text-app-shade5 dark:text-app-shade5 font-normal;  }

  .select-list-item {
    @apply max-h-[40px] border-b dark:border-app-shade3 px-3 py-2 cursor-default select-none whitespace-nowrap hover:bg-gray-500 dark:hover:bg-app-shade3 hover:text-white dark:hover:text-white [&:hover>*]:text-white dark:text-white;

    &[data-selected] {
      @apply bg-app-green dark:bg-app-green text-white;
    }

    &[data-selected].highlighted {
      @apply opacity-50;
    }

    &:not([data-selected]).highlighted {
      @apply bg-gray-500 dark:bg-app-shade3 text-white;
    }
  }

  /* Subheader above a group of select options. Deliberately NOT a
     .select-list-item: it is a heading, not something you can land on, so it
     takes no border, no hover and no selected state. `group-label` stays on the
     element as the hook select_controller.js filters and hides groups by. */
  .select-group-label {
    @apply px-3 pt-3 pb-1 text-xs font-semibold uppercase tracking-wide whitespace-nowrap cursor-default select-none pointer-events-none text-app-shade5 dark:text-app-shade5;
  }

  .select2 {
    @apply w-full rounded-20 pl-[6px] [&>*:nth-child(2)]:ml-[6px];
  }

  .queue-label-filter .select-list-item[data-selected] {
    @apply bg-app-shade9 dark:bg-app-shade3 text-app-shade1 dark:text-white;

    &:hover {
      @apply bg-app-shade9 dark:bg-app-shade3 text-app-shade1 dark:text-white;
    }
  }

  .queue-label-filter .select-list-item[data-selected] * {
    @apply text-inherit;
  }

  .select-wrapper.select-add-mode .select-control {
    @apply !border-app-green;
  }

  .select-wrapper.select-add-mode .search-input > :not(input) {
    @apply invisible;
  }

  .select-wrapper.select-add-mode .search-input input {
    @apply !opacity-100;

    &::placeholder {
      @apply text-app-shade5 dark:text-app-shade8;
    }
  }

  /* Hover cursor in a lane that is picking a time: a rule at the minute under the pointer,
     the time label under it, and — when the work has a dependency chain — the button that
     opens the scheduling-mode menu at the rule's right end.

     The container is pointer-events-none so the lane underneath still receives the mousemove
     that positions it; only the button opts back in. The button also stays display:none until
     the controller adds .is-ready, which one mousemove does and anything that replaces the
     lane undoes: it commits a minute it cannot re-read from its own click, so an un-armed
     button must not be clickable at all. */
  .calendar-pick-cursor {
    @apply hidden group-hover/picking:block z-20 absolute top-0 left-0 right-0 pointer-events-none;
  }

  /* Zero-height on purpose: the row's own top edge is the picked minute (the controller
     writes it into the cursor's `top`), and `items-center` on a 0px line box makes every
     child straddle that edge instead of sitting below it. Give the row a height and the
     rule paints at half the mode button's height -- 10px, ten minutes -- under the pointer. */
  .calendar-pick-cursor__line {
    @apply flex items-center gap-1 h-0;
  }

  .calendar-pick-cursor__rule {
    @apply flex-1 h-0.5 bg-app-green;
  }

  .calendar-pick-cursor__mode {
    @apply hidden shrink-0 p-0 size-5 rounded-full border-0 bg-app-green text-white
           items-center justify-center shadow-sm cursor-pointer pointer-events-auto;
  }

  .calendar-pick-cursor.is-ready .calendar-pick-cursor__mode {
    @apply flex;
  }

  .calendar-pick-cursor__time {
    @apply inline-block mt-1 px-2 py-0.5 rounded-md text-xs font-medium font-mono leading-none
           whitespace-nowrap bg-app-green text-white shadow-sm;
  }

  /* The scheduling-mode menu the cursor button opens. Hidden until the controller adds
     .is-open — it is rendered once per calendar and holds no pick of its own until then. */
  .calendar-pick-mode {
    @apply hidden fixed inset-0 z-[100] items-center justify-center bg-black/30 px-4;
  }

  .calendar-pick-mode.is-open {
    @apply flex;
  }

  .calendar-pick-mode__sheet {
    @apply w-full max-w-[460px] max-h-[calc(100vh-1rem)] overflow-y-auto rounded-3xl
           border border-app-shade7 dark:border-app-shade3
           bg-white dark:bg-app-dark shadow-2xl;
  }

  /* Set by the controller when the menu was opened from the pick cursor: the sheet leaves the
     backdrop's flex centring and is placed on the pointer instead, at coordinates the
     controller has already clamped to the window. Fixed rather than absolute so `left`/`top`
     are window coordinates -- the backdrop carries px-4, and an absolutely positioned child
     measures from the padding box, which would shift it 16px right and hand the controller a
     different origin than the one it clamped against. */
  .calendar-pick-mode__sheet.is-anchored {
    position: fixed;
    max-width: min(460px, calc(100vw - 1rem));
  }

  .calendar-pick-mode__header {
    @apply flex items-start justify-between gap-3 border-b border-app-shade7
           dark:border-app-shade3 px-5 py-4;
  }

  .calendar-pick-mode__title {
    @apply flex items-center gap-2 font-bold text-black dark:text-white;
  }

  .calendar-pick-mode__subtitle {
    @apply mt-1 text-xs text-app-shade5 dark:text-app-shade8;
  }

  .calendar-pick-mode__options {
    @apply flex flex-col gap-2 p-3;
  }

  .calendar-pick-mode__option {
    @apply relative flex items-center gap-1 w-full rounded-2xl border border-app-shade7
           dark:border-app-shade3 bg-white dark:bg-app-dark pr-2 text-left
           hover:border-app-green;
  }

  /* border-none: the global `button` rule gives every button one, and inside the option's
     own rounded border that reads as a second box drawn within the first. */
  .calendar-pick-mode__option-choose {
    @apply flex-1 min-w-0 p-3 text-left border-y-0 border-l-0 rounded-none;
  }

  .calendar-pick-mode__option-label {
    @apply flex items-center gap-2 text-sm font-semibold text-black dark:text-white;
  }

  .calendar-pick-mode__info {
    @apply shrink-0 flex items-center justify-center size-8 rounded-full border-none
           text-app-shade5 dark:text-app-shade8 hover:text-app-green;
  }

  /* Only one explanation is open at a time, so the icon has to say which one it belongs to.
     Keyed off aria-expanded, which the controller already toggles -- a second class for the
     highlight would be one more thing to keep in step with the tooltip. */
  .calendar-pick-mode__info[aria-expanded="true"] {
    @apply text-app-green dark:text-app-green bg-app-green/10;
  }

  .calendar-pick-mode__info[aria-expanded="true"] .material-symbols-outlined {
    font-variation-settings: "FILL" 1, "wght" 400, "GRAD" 0, "opsz" 20;
  }

  /* Shown only while the controller has put .is-open on it -- the info button is the one way
     in. There is no hover rule: the text is several lines long, so a tooltip that opens on
     the way past covers the option under it, and a touch screen never triggers one at all. */
  .calendar-pick-mode__tooltip {
    @apply invisible opacity-0 absolute bottom-full left-3 right-3 mb-2 z-[110] rounded-lg
           bg-gray-900 dark:bg-gray-700 px-3 py-2 text-xs font-normal leading-snug text-white
           shadow-lg transition-opacity duration-200 whitespace-normal;
  }

  .calendar-pick-mode__tooltip.is-open {
    @apply visible opacity-100;
  }

  .calendar-timeslot {
    @apply left-0 right-0 rounded-md flex flex-col justify-start items-stretch border border-[#D3D7E0] bg-app-gray text-app-muted absolute overflow-hidden;
    isolation: isolate;

    /* Render only when in/near the viewport. The slot's geometry is set by absolute
       positioning (top/height inline, left-0/right-0), not content, so size containment
       (applied only while skipped) has nothing to collapse — no layout shift. */
    content-visibility: auto;
    contain-intrinsic-size: auto;

    & a {
      @apply text-white;
    }

    &.overtime {
      background: rgb(253, 163, 99);
    }

    html.dark &.overtime {
      background: rgb(253, 163, 99);
    }
  }

  /* Fixed chrome: status icon + time on one left-aligned row.
     Slot is a tight hit-target; the clickable wrapper + WorkStatusIcon (.icon-xs)
     nest inside it, so every layer must fill + center — otherwise 20px material
     glyphs / 15px icon-xs clip unevenly and look cramped. */
  .calendar-timeslot .calendar-ts-status {
    flex: 0 0 14px;
    width: 14px;
    height: 14px;
    min-width: 14px;
    min-height: 14px;
    overflow: hidden;
    border-radius: 3px;
    line-height: 0;
    cursor: pointer;
    position: relative;
    z-index: 1;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .calendar-timeslot .calendar-ts-status > *,
  .calendar-timeslot .calendar-ts-status .icon-xs,
  .calendar-timeslot .calendar-ts-status .icon-xs2,
  .calendar-timeslot .calendar-ts-status .icon-sm,
  .calendar-timeslot .calendar-ts-status .icon-md {
    width: 14px !important;
    height: 14px !important;
    min-width: 14px !important;
    max-width: 14px !important;
    min-height: 14px !important;
    max-height: 14px !important;
    box-sizing: border-box;
    display: flex !important;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    border-radius: 3px;
    line-height: 0;
  }

  .calendar-timeslot .calendar-ts-status img {
    width: 12px !important;
    height: 12px !important;
    max-width: 12px !important;
    max-height: 12px !important;
    object-fit: contain;
  }

  .calendar-timeslot .calendar-ts-status .material-symbols-outlined {
    font-size: 12px !important;
    line-height: 1 !important;
    width: 12px !important;
    height: 12px !important;
    display: flex !important;
    align-items: center;
    justify-content: center;
    font-variation-settings: "FILL" 1, "wght" 400, "GRAD" 0, "opsz" 20;
  }

  /* Ready-to-do nests person + schedule; keep the person glyph only, hide the badge. */
  .calendar-timeslot .calendar-ts-status .icon-xs > .relative,
  .calendar-timeslot .calendar-ts-status .icon-xs > div {
    width: 100% !important;
    height: 100% !important;
    display: flex !important;
    align-items: center;
    justify-content: center;
    position: relative;
  }

  /* Use an attribute selector (not `.absolute`) so Tailwind doesn't treat this
     as a redefinition of the `absolute` utility and choke `@apply absolute`. */
  .calendar-timeslot .calendar-ts-status [class~="absolute"] {
    display: none !important;
  }

  /* Keep chrome padding tight — wide px/pt eats time labels in packed columns
     ("00:00 - 01:00" was clipping after the padding bump). */
  .calendar-timeslot .calendar-ts-chrome {
    @apply flex items-center justify-start gap-1 w-full min-w-0 px-0.5 pt-0.5 pb-0.5 box-border;
  }

  .calendar-timeslot .calendar-ts-chrome > span:last-child {
    font-size: 11px;
    line-height: 1.1;
    letter-spacing: -0.02em;
  }


  .calendar-timeslot .work-details > tbody > tr > th,
  .calendar-timeslot .work-details > tbody > tr > td {
    padding-top: 2px;
    padding-bottom: 2px;
    padding-left: 3px;
    padding-right: 3px;
  }

  .calendar-timeslot .work-details .calendar-ts-chrome {
    /* chrome owns its own padding; don't stack cell padding on top of it */
    margin: 0;
  }

  .calendar-timeslot .work-details > tbody > tr:has(.calendar-ts-chrome) > td {
    padding: 0;
  }

  .calendar-timeslot .calendar-ts-row-color {
    height: 2px;
    border-radius: 1px;
    margin: 1px 2px 2px;
  }

  /* Collapse mode only (.calendar-timeslot-packed). Normal / collapsed timeslots never get this class.
     Resting z comes from --pack-z so hover can raise above neighbors — an inline z-index
     would always win over the hover class and leave expanded field rows underneath. */
  .calendar-timeslot-packed {
    @apply right-auto box-border;
    padding-left: 1px;
    padding-right: 1px;
    z-index: var(--pack-z, 1);
  }

  .calendar-timeslot-hover {
    @apply hover:z-[5] hover:brightness-105 hover:!h-[unset] hover:shadow hover:min-w-max;

    /* Per-slot hover min-height, previously an inline <style> block per timeslot
       (one <style> element x thousands of slots was a global style-recalc cost). */
    &:hover,
    &:focus-within {
      min-height: var(--ts-hover-h);
      overflow: visible;
    }
  }


  .calendar-timeslot-hover.is-pinned {
    @apply z-[5] brightness-105 shadow min-w-max;
    height: unset !important;
    min-height: var(--ts-hover-h);
    overflow: visible !important;
  }

  .calendar-timeslot.is-pinned .lazy-fields > tr {
    display: none !important;
  }

  .calendar-timeslot.is-pinned .detail-fields > tr {
    display: table-row !important;
  }

  .calendar-timeslot-packed:not(:hover):not(:focus-within):not(.is-pinned) {
    overflow: hidden;
  }

  .calendar-timeslot-packed:not(:hover):not(:focus-within):not(.is-pinned) .detail-fields {
    display: none;
  }

  .calendar-timeslot-packed.calendar-timeslot-hover:hover,
  .calendar-timeslot-packed.calendar-timeslot-hover:focus-within,
  .calendar-timeslot-packed.calendar-timeslot-hover.is-pinned {
    @apply min-w-0 brightness-100;
    z-index: 30;
    isolation: isolate;
    overflow: visible;
  }

  /* .work-details forces text-black; on still-colored packed shells (predicted /
     picked / available) inherit the slot color at rest and on hover so Preview
     stays legible. Neutral work-status shells don't need this. */
  .calendar-timeslot-packed:is(
    .calendar-timeslot-predicted,
    .calendar-timeslot-picked,
    .calendar-timeslot-available
  ) .work-details {
    @apply text-inherit [&_a]:text-inherit;
  }

  /* Lazily-fetched per-work field table inside a timeslot; gate its render too so
     scrolling it out of view skips re-render. */
  .calendar-work {
    content-visibility: auto;
    contain-intrinsic-size: auto 14px;
  }

  /* Per-field wrapper (content-visibility is a no-op on <tr>/<td>, so it lives here) so
     that within a tall slot the off-screen field rows also skip browser render. Keep the
     intrinsic fallback tight so empty placeholders don't stretch rows. */
  .calendar-field {
    content-visibility: auto;
    contain-intrinsic-size: auto 14px;
  }

  /* Even row rhythm + dark-mode contrast for label / value columns */
  .work-details th {
    @apply text-app-muted font-normal text-left align-middle;
  }

  html.dark .work-details {
    @apply text-white;
  }

  html.dark .work-details th {
    @apply text-app-shade8;
  }

  html.dark .work-details a {
    @apply text-white;
  }

  .work-details .time-component {
    @apply gap-x-1 leading-none;
  }

  .work-details .time-component__main {
    @apply leading-none;
  }

  .work-details .time-component__sub {
    @apply leading-none;
  }

  .work-details .work-status-label,
  .work-details .work-status-time {
    @apply leading-none;
  }

  .calendar-timeslot-unavailable {
    background: repeating-linear-gradient(-45deg, #ddd, #ddd 1px, #e7ebf3 2px, #e7ebf3 12px);
  }

  .blocking-overlay {
    @apply pointer-events-none select-none;
    opacity: 0.4;
    background: repeating-linear-gradient(
      -45deg,
      rgba(220, 38, 38, 0.15),
      rgba(220, 38, 38, 0.15) 10px,
      rgba(239, 68, 68, 0.15) 10px,
      rgba(239, 68, 68, 0.15) 20px
    );
  }

  html.dark .blocking-overlay {
    background: repeating-linear-gradient(
      -45deg,
      rgba(185, 28, 28, 0.25),
      rgba(185, 28, 28, 0.25) 10px,
      rgba(220, 38, 38, 0.25) 10px,
      rgba(220, 38, 38, 0.25) 20px
    );
  }

  /* A slot lying entirely inside the blocked band (CalendarHelper#calendar_timeslot_blocked?).
     The band itself is one wash over the whole column at 0.4 opacity, which barely reads on top
     of a slot's own status paint -- so the slot carries a tint of its own and is told apart from
     the offers below the floor.

     Drawn as an overlay child rather than a background or a box-shadow: the slot's background is
     already spoken for by its status (the unavailable hatch is a `background` shorthand), and
     `.calendar-timeslot-hover:hover` sets `box-shadow`, which would drop an inset one on hover. */
  .calendar-timeslot-blocked {
    border-color: rgba(248, 113, 113, 0.6);
  }

  /* Plain properties, not `@apply absolute inset-0`: @apply inlines EVERY rule whose selector
     carries that class, so applying a utility the app itself extends (`.group:has(...) >
     div.absolute`) drags that rule's declarations in here under a rewritten selector. */
  .calendar-timeslot-blocked::before {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    background: rgba(220, 38, 38, 0.18);
  }

  html.dark .calendar-timeslot-blocked::before {
    background: rgba(220, 38, 38, 0.28);
  }

  .calendar-timeslot-available {
    @apply border-[#9D938B] bg-[#A39A92] text-white;
  }
  /* Work-lifecycle status used to tint the whole bubble (red/green/orange/blue),
     which drowns Preview text. Keep a neutral shell and show status via the
     icon in the work body instead (same idea as the queue table). Available /
     unavailable / predicted / picked keep their own paint — those aren't
     "read the event" shells. */
  .calendar-timeslot-pending,
  .calendar-timeslot-behind,
  .calendar-timeslot-late,
  .calendar-timeslot-in-progress-late,
  .calendar-timeslot-in-progress,
  .calendar-timeslot-completed {
    @apply border-app-shade6 bg-white text-app-dark2;

    & a {
      @apply text-blue-700;
    }
  }

  html.dark .calendar-timeslot-pending,
  html.dark .calendar-timeslot-behind,
  html.dark .calendar-timeslot-late,
  html.dark .calendar-timeslot-in-progress-late,
  html.dark .calendar-timeslot-in-progress,
  html.dark .calendar-timeslot-completed {
    @apply border-app-shade3 bg-app-dark text-white;

    & a {
      @apply text-app-green;
    }
  }

  .calendar-timeslot-predicted {
    @apply border-2 border-app-pink bg-app-green text-white;
  }
  .calendar-timeslot-picked {
    @apply border-2 bg-[#B4EBB0] text-white;
  }

  .nm-shadow {
    box-shadow: -2px -2px 6px 0px #FFFFFF4D, 2px 2px 6px 0px #CBCFD7;
  }

  .nm-shadow-md {
    box-shadow: -2.18px -2.18px 6.54px 0px #FFFFFFE5, 2.18px 2.18px 6.54px 1px #8C97AC66;
  }

  .nm-shadow-sm {
    box-shadow: -1px -1px 3px 0px #FFFFFF, 1.5px 1.5px 6.54px 1px #00000026;
  }

  /* Dark mode shadows: softer white border (~30% white) on dark surfaces */
  html.dark .nm-shadow {
    box-shadow: 0 0 0 1px #FFFFFF4D;
  }

  html.dark .nm-shadow-md {
    box-shadow: 0 0 0 1px #FFFFFF4D;
  }

  html.dark .nm-shadow-sm {
    box-shadow: 0 0 0 1px #FFFFFF33;
  }

  .nm-shadow-dark {
    box-shadow: -1px -1px 3px 0px #272727, 1px 1px 3px 0px rgba(255, 255, 255, 0.15) !important;
  }

  html.dark .nm-shadow-dark {
    box-shadow: -1px -1px 3px 0px #272727, 1px 1px 3px 0px rgba(255, 255, 255, 0.15) !important;
  }

  html.dark .nm-shadow-md.nm-shadow-dark {
    box-shadow: -1px -1px 3px 0px #272727, 1px 1px 3px 0px rgba(255, 255, 255, 0.15) !important;
  }

  #panels-container .panel-container {
    @apply border border-app-shade7 dark:border-app-shade3;
  }

  @media (max-width: 1023px) {
    #panels-container.chat-panels > .panel-container {
      width: 100% !important;
      max-width: 100% !important;
      min-width: 0 !important;
    }

    #panels-container.chat-panels:has(> .panel-container:nth-child(2)) > .panel-container:not(:last-of-type) {
      display: none !important;
    }
  }

  .chat-command-bar {
    @apply w-full min-w-0;
  }

  .chat-command-bar .chat-command-bar__toolbar {
    @apply overflow-x-auto overflow-y-hidden [-webkit-overflow-scrolling:touch] scrollbar-hide;
  }

  .chat-command-bar .chat-command-bar__toolbar > * {
    @apply shrink-0;
  }

  #panels-container.panels-container--multi .panel-container.panel-container--active {
    @apply z-10;
    box-shadow: -2.18px -2.18px 6.54px 0px #FFFFFFE5, 2.18px 2.18px 6.54px 1px #8C97AC66,
      0 4px 16px rgba(105, 214, 97, 0.35), 0 0 28px rgba(105, 214, 97, 0.28) !important;
  }

  #panels-container.panels-container--multi .panel-container.panel-container--active::after {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: inherit;
    pointer-events: none;
    z-index: 30;
    box-shadow: inset 0 0 0 2px rgba(105, 214, 97, 0.85);
  }

  html.dark #panels-container.panels-container--multi .panel-container.panel-container--active {
    box-shadow: 0 4px 20px rgba(105, 214, 97, 0.4), 0 0 32px rgba(105, 214, 97, 0.32),
      0 8px 24px rgba(0, 0, 0, 0.35) !important;
  }

  html.dark #panels-container.panels-container--multi .panel-container.panel-container--active::after {
    box-shadow: inset 0 0 0 2px rgba(105, 214, 97, 0.9);
  }

  #panels-container.panels-container--multi .panel-container.panel-container--inactive {
    box-shadow: -2.18px -2.18px 6.54px 0px #FFFFFFE5, 2.18px 2.18px 6.54px 1px #8C97AC66,
      0 2px 8px rgba(140, 151, 172, 0.18), 0 1px 3px rgba(109, 116, 131, 0.1) !important;
  }

  html.dark #panels-container.panels-container--multi .panel-container.panel-container--inactive {
    box-shadow: 0 0 0 1px rgba(150, 159, 175, 0.15), 0 2px 10px rgba(109, 116, 131, 0.25),
      0 1px 4px rgba(60, 67, 83, 0.3) !important;
  }

  .sidebar-item {
    @apply w-[32px] h-[32px] shrink-0 flex justify-center items-center rounded-lg
           hover:nm-shadow-sm focus:outline-none focus-visible:outline-none;
  }

  .sidebar-item .bar-icon {
    @apply block leading-none;
  }

  /* Ensure sidebar container has no background in light mode */
  .page-container > div:first-child,
  .page-container > div:first-child > div {
    background-color: transparent !important;
  }

  @media (max-width: 1023px) {
    html:not(.dark) .page-container > div:first-child,
    html:not(.dark) .page-container > div:first-child > div {
      background-color: #ffffff !important;
    }
  }

  /* Dark mode: sidebar background */
  html.dark .page-container > div:first-child,
  html.dark .page-container > div:first-child > div {
    background-color: #293040 !important;
  }

  /* Queue detail overlay: full screen dim; sidebar nav pill stays above (see data-queue-panels-backdrop-exempt) */
  [data-queue-panels-backdrop-exempt].queue-panels-backdrop-active {
    @apply relative z-[60] bg-white dark:bg-[#293040] !important;
  }

  /* Panel top bar only: sit above the work list's sticky frozen headers (z-50).
     Do NOT put z-index on every .list-container — schedule rows, catalog rows, and
     table cells also use that class, and a global z-60 breaks their stacking
     (calendar events paint through the schedule Time frame row, freeze tiers fight). */
  .list-container {
    @apply min-h-[48px] border-b border-app-shade8 dark:border-app-shade3;
  }

  .panel-container > .list-container {
    @apply relative z-[60];
  }


  .shadow-t {
    box-shadow: 0 -2px 4px 0 #E7EBF3B2;
  }

  html.dark .shadow-t {
    box-shadow: 0 -2px 4px 0 rgba(0, 0, 0, 0.3);
  }

  .list-left {
    @apply w-[36%];
  }

  .subitems-table {
    @apply w-full;

    & thead td {
      @apply list-container h-[48px] text-xs text-app-shade5 p-0;
    }

    & tbody td {
      @apply list-container h-[48px] p-0;
    }

    & thead td:first-child, & tbody td:first-child {
      @apply list-left pl-5;
    }

    & thead td:last-child, & tbody td:last-child {
      @apply pr-1;
    }

    & thead td:not(:first-child), & tbody td:not(:first-child) {
      @apply pl-2;
    }
  }

  .icon-xs {
    @apply min-w-[15px] max-w-[15px] min-h-[15px] max-h-[15px];
  }
  .icon-xs2 {
    @apply min-w-[18px] max-w-[18px] min-h-[18px] max-h-[18px];
  }
  .icon-matrix {
    @apply min-w-[24px] max-w-[24px] min-h-[24px] max-h-[24px];
  }
  .icon-sm {
    @apply min-w-[20px] max-w-[20px] min-h-[20px] max-h-[20px];
  }
  .icon-md {
    @apply min-w-[30px] max-w-[30px] min-h-[30px] max-h-[30px];
  }

  input.unlock-input--armed {
    @apply !border !border-app-green-dark focus:!border-app-green-dark hover:!border-app-green-dark cursor-text;
  }

  .field-filters-table {
    @apply w-full;

    & thead td {
      @apply text-xs text-app-shade5 p-0;
    }

    & thead td:first-child, & thead td:nth-child(3) {
      @apply w-[45%];
    }

    & tbody td {
      @apply h-[48px] py-1 pl-0 pr-2;
    }
  }

  .toggle-btn {
    @apply h-[36px] flex flex-nowrap items-center shrink-0 border border-app-shade7 rounded-full text-sm font-normal relative;

    & input {
      @apply w-0 opacity-0;
    }
  }

  .home-role-filter {
    @apply flex items-center gap-1 min-w-0 w-full py-1;
  }

  .home-role-filter__roles {
    @apply flex items-center gap-2 flex-nowrap flex-1 min-w-0 overflow-x-auto overflow-y-hidden;
    scroll-behavior: smooth;
    scrollbar-width: none;
    -ms-overflow-style: none;
    -webkit-overflow-scrolling: touch;
  }

  .home-role-filter__roles::-webkit-scrollbar {
    display: none;
  }

  .home-role-filter__arrow {
    @apply shrink-0 flex items-center justify-center size-[26px] p-0 rounded-full border border-app-shade7 dark:border-app-shade3 bg-transparent text-app-black dark:text-white cursor-pointer;
  }

  .home-role-filter__arrow i {
    @apply text-[18px] leading-none;
  }

  .home-role-filter__arrow:hover {
    background-color: rgba(0, 0, 0, 0.04);
  }

  html.dark .home-role-filter__arrow:hover {
    background-color: rgba(255, 255, 255, 0.06);
  }

  .toggle-left, .toggle-right {
    @apply h-full flex justify-center items-center rounded-full whitespace-nowrap z-10 text-app-shade5 transition-all ease-in;
  }

  .toggle-left {
    @apply pl-4 pr-2;
  }

  .toggle-right {
    @apply pr-4 pl-2;
  }

  .toggle-text-highlight {
    @apply text-white;
  }

  .toggle-highlight {
    @apply absolute top-0 bottom-0 bg-app-green text-white rounded-full transition-all ease-in;
  }

  .toggle-highlight.toggle-highlight-left {
    @apply left-0 right-[52%];
  }

  .toggle-highlight.toggle-highlight-right {
    @apply left-[45%] right-0;
  }

  input.no-spinner {
    &::-webkit-outer-spin-button, &::-webkit-inner-spin-button {
      -webkit-appearance: none; /* Remove default appearance */
      margin: 0; /* Remove margin */
    }
  }

  .table2 {
    @apply w-full;

    & thead th {
      @apply border-b font-normal text-xs text-app-shade5 dark:text-white text-left py-4 px-2;
    }

    & tbody td {
      @apply border-b dark:border-app-shade3 whitespace-nowrap text-left py-4 px-2 dark:text-white;
    }
  }

  .item-permissions-table {
    & th:first-child, & td:first-child {
      @apply w-full;
    }

    & th:nth-child(2), & td:nth-child(2) {
      @apply text-center;
    }
  }

  .view-option-permissions-table {
    & th:first-child, & td:first-child {
      @apply w-full;
    }

    & th:nth-child(2), & td:nth-child(2) {
      @apply text-center;
    }

    & th:nth-child(3), & td:nth-child(3) {
      @apply text-center;
    }
  }

  .role-item-permissions-table {
    & thead th:not(:first-child), & tbody td:not(:first-child) {
      @apply text-center;
    }
  }

  .duration-inputs {
    & input[type="number"] {
      @apply w-11 h-7 text-sm text-right border-app-shade7 dark:border-app-shade3 dark:bg-app-dark dark:text-white rounded p-1;
    }
  }

  .minutes-input {
    @apply w-[64px] h-7 rounded p-1 border-app-shade7 text-right;
  }

  .pill {
    @apply h-9 border border-app-shade6 text-app-shade1 dark:text-white px-3 rounded-20 flex justify-center items-center;
  }


  .queue-table-scroll {
    @apply block w-full max-w-full min-w-0;
    flex: 1 1 0%;
    min-height: 0;
    overflow: auto;
    -webkit-overflow-scrolling: touch;
  }


  /* Hide only the pane's own horizontal scrollbar; .sticky-hscroll-bar below is
     the one the user drags. A ::-webkit-scrollbar rule that ONLY ever matches
     with the :horizontal qualifier does not opt the element into custom
     scrollbars at all — Chromium keeps the native pair and both bars show,
     stacked. The unqualified rule underneath is what switches this pane over,
     which is why the vertical bar is styled below rather than left native.
     Firefox has no per-axis control, so it still shows both. */
  .queue-table-scroll::-webkit-scrollbar {
    width: 8px;
  }

  .queue-table-scroll::-webkit-scrollbar:horizontal {
    height: 0;
    display: none;
  }

  .panel-content:has(.queue-table-scroll) {
    overflow: hidden;
    display: flex;
    flex-direction: column;
  }

  .panel-content:has(.queue-table-scroll) :has(.queue-table-scroll) {
    flex: 1 1 0%;
    min-height: 0;
    min-width: 0;
    display: flex;
    flex-direction: column;
  }


  .sticky-hscroll-bar {
    position: relative;
    flex-shrink: 0;
    bottom: auto;
    z-index: 30;
    overflow-x: auto;
    overflow-y: hidden;
    background: transparent;
  }

  .sticky-hscroll-bar > div {
    height: 1px;
  }

  .sticky-hscroll-bar::-webkit-scrollbar {
    height: 8px;
  }

  /* The work list's two scrollbars — the pane's vertical bar and this horizontal
     proxy — are styled together so they cannot drift apart. Both go through
     ::-webkit-scrollbar, so NEITHER may set `scrollbar-width` or
     `scrollbar-color`: Chromium switches such an element to the standard
     scrollbar and ignores every ::-webkit-scrollbar rule on it. `scrollbar-width:
     thin` here is exactly what made this bar paint as a native 10px bar with
     arrow buttons and a track, beside the pane's styled 8px pill. Firefox
     understands only the standard properties, so it keeps its own scrollbars. */
  .queue-table-scroll::-webkit-scrollbar-track,
  .sticky-hscroll-bar::-webkit-scrollbar-track {
    background: transparent;
  }

  .queue-table-scroll::-webkit-scrollbar-thumb,
  .sticky-hscroll-bar::-webkit-scrollbar-thumb {
    background-color: rgba(0, 0, 0, 0.25);
    border-radius: 4px;
  }

  html.dark .queue-table-scroll::-webkit-scrollbar-thumb,
  html.dark .sticky-hscroll-bar::-webkit-scrollbar-thumb {
    background-color: rgba(255, 255, 255, 0.28);
  }

  body:has(.queue-table-scroll) > div.overflow-auto {
    overflow-x: hidden;
  }

  table.table-layout,
  table.list-view-layout {
    & th.queue-col-frozen,
    & td.queue-col-frozen {
      position: sticky;
      z-index: 20;
      isolation: isolate;
    }

    & thead th.queue-col-frozen {
      z-index: 50;
      @apply bg-white dark:bg-app-dark;
      background-color: rgb(255 255 255) !important;
    }

    & tbody td:not(.queue-col-frozen) {
      position: relative;
      z-index: 1;
    }

    /* Stick column titles to the top of .queue-table-scroll. Opaque fill so
       rows do not show through; frozen header cells also keep sticky left. */
    & thead th {
      position: sticky;
      top: 0;
      z-index: 40;
      overflow: visible;
      @apply bg-white dark:bg-app-dark;
      background-color: rgb(255 255 255) !important;
    }

    /* Inline column-move menu above frozen body cells while open. */
    & thead th:has(.select-wrapper[data-select-open-value="true"]) {
      z-index: 100 !important;
    }

    & thead th .select-wrapper[data-select-open-value="true"] [data-select-target="list"] {
      z-index: 200 !important;
    }


    & td:has(.select-wrapper[data-select-open-value="true"]) {
      z-index: 60 !important;
      isolation: isolate;
      overflow: visible;
    }

    & td:has(.select-wrapper[data-select-open-value="true"]) [data-select-target="list"] {
      z-index: 200 !important;
      background-color: rgb(255 255 255) !important;
    }

    & td:has(.work-status-chips:hover) {
      z-index: 60 !important;
      overflow: visible;
    }

    & td:has(.work-status-chips:hover) {
      z-index: 60 !important;
      overflow: visible;
    }

    & td.queue-col-frozen {
      @apply bg-app-shade8 dark:bg-app-dark;
      background-color: rgb(231 235 243) !important;
    }

    & td.queue-col-frozen-last,
    & th.queue-col-frozen-last {
      /* Opaque strip in the frozen fill covers 1px subpixel gaps so scrolling
         cells cannot flash through the seam; the second shadow is the visible edge. */
      box-shadow:
        2px 0 0 0 rgb(231 235 243),
        3px 0 0 0 rgba(140, 151, 172, 0.45);
      /* Keep digit-preview / copy icons off the hard edge. */
      padding-right: 0.625rem;
    }

    & th.queue-col-frozen-last {
      box-shadow:
        2px 0 0 0 rgb(255 255 255),
        3px 0 0 0 rgba(140, 151, 172, 0.45);
    }
  }

  html.dark table.table-layout td.queue-col-frozen,
  html.dark table.list-view-layout td.queue-col-frozen {
    background-color: rgb(29 35 47) !important;
  }

  html.dark table.table-layout td:has(.select-wrapper[data-select-open-value="true"]) [data-select-target="list"],
  html.dark table.list-view-layout td:has(.select-wrapper[data-select-open-value="true"]) [data-select-target="list"] {
    background-color: rgb(29 35 47) !important;
  }

  html.dark table.table-layout thead th,
  html.dark table.list-view-layout thead th {
    background-color: rgb(29 35 47) !important;
  }

  html.dark table.table-layout td.queue-col-frozen-last,
  html.dark table.table-layout th.queue-col-frozen-last,
  html.dark table.list-view-layout td.queue-col-frozen-last,
  html.dark table.list-view-layout th.queue-col-frozen-last {
    box-shadow:
      2px 0 0 0 rgb(29 35 47),
      3px 0 0 0 rgba(100, 110, 130, 0.7);
  }

  @media (max-width: 1023px) {
    table.table-layout th.queue-col-frozen,
    table.table-layout td.queue-col-frozen,
    table.list-view-layout th.queue-col-frozen,
    table.list-view-layout td.queue-col-frozen {
      position: static !important;
      left: auto !important;
      z-index: auto;
      isolation: auto;
    }

    table.table-layout thead th,
    table.list-view-layout thead th {
      position: sticky !important;
      top: 0;
      left: auto !important;
      z-index: 40;
    }

    table.table-layout td.queue-col-frozen-last,
    table.table-layout th.queue-col-frozen-last,
    table.list-view-layout td.queue-col-frozen-last,
    table.list-view-layout th.queue-col-frozen-last {
      box-shadow: none;
    }
  }

  table.table-layout[data-font-zoom="xs"],
  table.list-view-layout[data-font-zoom="xs"] {
    zoom: 0.75;
  }

  table.table-layout[data-font-zoom="s"],
  table.list-view-layout[data-font-zoom="s"] {
    zoom: 0.875;
  }

  table.table-layout[data-font-zoom="l"],
  table.list-view-layout[data-font-zoom="l"] {
    zoom: 1.125;
  }

  table.table-layout[data-font-zoom="xl"],
  table.list-view-layout[data-font-zoom="xl"] {
    zoom: 1.25;
  }

  table.table-layout {
    @apply border-separate;
    border-collapse: separate !important;
    --tw-border-spacing-y: 0 !important;
    --tw-border-spacing-x: 0 !important;
    border-spacing: 0 !important;

    & td.queue-col-frozen {
      @apply bg-app-shade8 dark:bg-app-dark;
    }

    & tr {
      margin: 0 !important;
      padding: 0 !important;
    }

    & td {
      @apply min-h-[62px];
      background-color: transparent !important;
      border-bottom: none;
    }

    & th {
      @apply text-xs text-app-shade5 dark:text-app-shade8 pt-2 pb-[2px] leading-[12px];
    }

    & td {
      @apply bg-app-shade8 dark:bg-app-dark text-black dark:text-white;
      border-bottom: none !important;
      border-radius: 0 !important;
    }

    & td.subheader {
      @apply h-[48px] bg-app-white dark:bg-app-dark border-0 dark:text-white;
    }

    & td:first-child {
      @apply pl-5;
      border-radius: 0 !important;
    }

    & td:last-child {
      @apply pr-4;
      border-radius: 0 !important;
    }
  }

  html.dark table.table-layout td {
    border-bottom: none;
  }

  .work-list-item {
    @apply h-[62px] px-[18px] rounded-lg border flex items-center gap-[10px];

    &.work-completed {
      @apply border-app-purple2 bg-app-purple-light;
    }
  }

  /* The ACTIONS pane, not the whole picker. `.work-status-picker button` also
     matched the delete confirmation's own Delete and Cancel, and won against
     their utility classes on specificity (0-1-1 and, on hover, 0-2-1, against a
     utility's 0-1-0) whatever the layer order — so the red Delete button drew
     its label in `text-inherit` and turned green on hover. */
  .work-status-actions button,
  .work-status-actions a.button {
    @apply rounded-20 whitespace-nowrap px-[16px] py-2 transition-colors text-inherit;
  }

  .work-status-actions button:hover,
  .work-status-actions a.button:hover {
    @apply border-app-green text-app-green;
  }

  /* The item delete confirmation. One set of rules for both surfaces that render
     it — the item panel's delete dropdown and the work status dropdown — which
     is the point of it being one component: the two used to carry their own
     `window.confirm` strings and had already drifted apart. */
  .delete-confirm-actions {
    @apply flex justify-between;
  }

  .delete-confirm-submit {
    @apply h-[36px] bg-app-red text-white px-4 rounded-20;
  }

  /* A refused Delete has to READ as refused. Everything above it is unchanged
     while the tree builds, so without this the button looks live and a press
     does nothing — the state would be handled and invisible. */
  .delete-confirm-submit:disabled {
    @apply opacity-50 cursor-not-allowed;
  }

  .delete-confirm-cancel {
    @apply h-[36px] px-4 rounded-20;
  }

  .delete-confirm-building {
    @apply text-app-blue dark:text-app-blue-light font-bold;
  }

  .filter-field {
    @apply flex;

    & > * {
      @apply border border-app-shade7 dark:border-app-shade3;
    }

    & > :nth-child(1) {
      @apply min-w-[120px] w-[120px] rounded-l-lg text-sm text-app-shade1 dark:text-white px-[10px];
    }

    & > :nth-child(2) {
      @apply min-w-[98px] w-[98px] border-x-0 rounded-none text-sm text-app-shade5 dark:text-app-shade8;
    }

    & > :nth-child(3) {
      @apply text-sm text-app-shade1 dark:text-white;
      flex: 1 1 auto;
      min-width: 0;
    }

    & > :nth-child(4):not(:last-child) {
      @apply border-l-0 rounded-none text-sm text-app-shade1 dark:text-white px-[10px];
      flex: 0 0 auto;
    }

    & > :last-child {
      @apply w-[39px] flex justify-center items-center border-l-0 rounded-r-lg text-app-shade5 dark:text-app-shade8;
    }
  }

  /* Dark mode: remove white border on focus for filter fields */
  html.dark .filter-field > *:focus {
    outline: none;
    border-color: #3C4353 !important;
    box-shadow: none;
  }

  .disabled, [disabled] {
    @apply opacity-30 pointer-events-none cursor-default;
  }

  .panel-settings {
    @apply bg-gray-50 pt-5 pb-7 pl-5 pr-1;
  }

  @media (max-width: 1023px) {
    .item-panel > .panel-content {
      -webkit-overflow-scrolling: touch;
      touch-action: pan-x pan-y;
    }

    .item-panel > .panel-content > * {
      min-width: 670px;
    }


    .queue-panel-header-actions {
      scrollbar-width: none;
      -ms-overflow-style: none;
    }

    .queue-panel-header-actions::-webkit-scrollbar {
      display: none;
    }

    .queue-panel-header-actions > * {
      flex-shrink: 0;
    }

    /* Header scrolls horizontally on narrow screens; that clip + iOS touch
       scrolling traps absolute/fixed menus behind the results bar. Same escape
       the view-options modal already uses. */
    .queue-panel-header-actions:has(.view-options-modal:not(.hidden)),
    .queue-panel-header-actions:has(.select-wrapper[data-select-open-value="true"]) {
      overflow: visible;
      -webkit-overflow-scrolling: auto;
    }

    .queue-panel-header-actions .select-wrapper[data-select-open-value="true"] [data-select-target="list"].select-list--fixed {
      z-index: 100050 !important;
    }

    .view-options-modal:not(.hidden) {
      position: fixed !important;
      left: 0.75rem !important;
      right: 0.75rem !important;
      top: 0.75rem !important;
      width: auto !important;
      max-width: none !important;
      max-height: calc(100dvh - 1.5rem);
      margin-top: 0 !important;
      overflow-x: hidden;
      overflow-y: auto;
      -webkit-overflow-scrolling: touch;
      z-index: 100050 !important;
      transform: none !important;
    }
  }

  table.list-view-layout {
    @apply border-separate;
    border-collapse: separate !important;
    border-spacing: 0 !important;
    --tw-border-spacing-x: 0 !important;
    --tw-border-spacing-y: 0 !important;

    & td.queue-col-frozen {
      @apply bg-app-shade8 dark:bg-app-dark;
    }

    & tr {
      margin: 0 !important;
      padding: 0 !important;
    }

    & td {
      background-color: transparent !important;
      border-radius: 0 !important;
    }

    & th {
      @apply text-xs text-app-shade5 dark:text-app-shade8 pt-2 pb-[2px] leading-[12px];
    }

    & td {
      @apply bg-app-shade8 dark:bg-app-dark border-app-shade7 dark:border-app-shade3 text-black dark:text-white;

      &:not(.work-status-icon) * {
        @apply dark:text-white;
      }

      &:not(.work-status-icon) a {
        @apply dark:text-white;
      }
    }

    & td:not(.work-status-icon) .work-status-delayed,
    & td:not(.work-status-icon) .work-status-delayed * {
      color: #DE3754 !important;
    }

    & td.subheader {
      @apply h-[48px] bg-app-white dark:bg-app-dark border-0 dark:text-white;
    }

    & td:first-child {
      @apply pl-5;
      border-radius: 0 !important;
    }

    & td:last-child {
      @apply pr-4;
      border-radius: 0 !important;
    }
  }



  table.mobile-layout td:last-child {
    display: none !important;
  }

  /* Mobile layout (cards) */
  .mobile-columns-bar {
    @apply flex items-center justify-between gap-3 pt-1 pb-2;
  }

  .mobile-columns-title {
    @apply text-sm font-semibold text-app-shade2 dark:text-white;
  }

  .mobile-columns-action {
    @apply flex-shrink-0;
  }

  .mobile-work-cards {
    @apply w-full max-w-full grid grid-cols-1 sm:grid-cols-2 xl:grid-cols-3 gap-3 pb-2;

    /* One rendered row, header excluded: label 11px over a 20px value, py-2 either side, plus
       the 1px divider. mobile-card-rows overwrites this inline with a measurement taken off a
       card that actually rendered, so wrapping values are accounted for. */
    --mobile-card-row-h: 37px;
  }

  /* A shell reserves the height its rows will take once fetched, so filling it in does not
     shove everything below it down the page. The row counts come from the list (they are the
     same for every card); the two states show different row sets, so they get different
     heights. 0.75rem is the body's own pb-3. */
  .mobile-work-card[data-loaded="false"] .mobile-work-card__body {
    min-height: calc(var(--mobile-card-preview-rows, 0) * var(--mobile-card-row-h) + 0.75rem);
  }

  .mobile-work-card--expanded[data-loaded="false"] .mobile-work-card__body {
    min-height: calc(var(--mobile-card-columns-rows, 0) * var(--mobile-card-row-h) + 0.75rem);
  }

  .mobile-work-card {
    @apply w-full max-w-none block rounded-2xl border border-app-shade7 dark:border-app-shade3 bg-white dark:bg-app-dark shadow-sm hover:shadow-md transition-shadow overflow-visible;
  }

  .mobile-work-card__header {
    @apply p-3 flex items-center gap-1.5;
  }

  /* .button-icon defaults to 36px; shrink so the chevron + eye sit on one line */
  .mobile-work-card__detail-toggle.button-icon {
    @apply !h-6 !w-6 !min-h-6 !min-w-6 !p-0 flex items-center justify-center;
  }

  .mobile-work-card__icon {
    @apply flex-shrink-0;
  }

  .mobile-work-card__title {
    @apply min-w-0 flex-1;
  }

  .mobile-work-card__work {
    @apply text-[16px] leading-tight font-bold text-app-black dark:text-white truncate;
  }

  .mobile-work-card__chevron {
    @apply h-6 w-6 flex flex-shrink-0 items-center justify-center text-app-shade5 dark:text-app-shade8;
  }

  .mobile-work-card__chevron .material-symbols-outlined,
  .mobile-work-card__detail-toggle .material-symbols-outlined {
    @apply !text-[18px] leading-none;
  }

  .mobile-work-card__body {
    @apply px-3 pb-3 flex flex-col divide-y divide-solid divide-app-shade7/70 dark:divide-app-shade3/70;
  }

  .mobile-work-card__row {
    @apply grid grid-cols-[112px_minmax(0,1fr)] gap-3 items-center py-2;
  }

  .mobile-work-card:not(.mobile-work-card--expanded) .mobile-work-card__row {
    order: var(--mobile-row-preview-order);
  }

  .mobile-work-card--expanded .mobile-work-card__row {
    order: var(--mobile-row-column-order);
  }

  .mobile-work-card__row--st-pt {
    @apply grid grid-cols-2 gap-x-3 gap-y-0 items-start py-2;
  }

  .mobile-work-card__split {
    @apply min-w-0 flex flex-row items-baseline gap-1.5;
  }

  .mobile-work-card__split--divider {
    @apply border-l border-app-shade7/70 pl-3 dark:border-app-shade3/70;
  }

  .mobile-work-card__label {
    @apply text-[11px] leading-[1.35] uppercase tracking-[0.04em] text-app-shade5 dark:text-app-shade8 break-words;
  }

  .mobile-work-card__value {
    @apply text-sm leading-5 text-app-shade2 dark:text-white text-left min-w-0 break-words;
  }

.mobile-work-card__value--delivery-appointment .grow .flex.gap-1,
  .mobile-work-card__value--delivery-appointment .st-pt-range {
    @apply !inline-flex flex-col items-start gap-0;
  }

  .mobile-work-card__value--delivery-appointment .time-component__sub,
  .st-pt-range .time-component__sub {
    @apply !static left-0 top-auto bottom-auto ml-0 mt-[-5px];
  }

  .st-pt-range .time-component {
    @apply flex flex-col gap-0 min-h-[1.625rem] justify-center;
  }

  table.list-view-layout tr.queue-card-row td {
    @apply text-black dark:text-white p-3 align-middle;
    /* background-color: #ffffff; */
    border-top: 1px solid #e5e7eb;
    border-bottom: 2px solid #1D232F;
  }

  table.list-view-layout tr.queue-card-row td:first-child {
    @apply pl-5;
    border-radius: 0 !important;
  }

  table.list-view-layout tr.queue-card-row td:last-child {
    @apply pr-4;
    border-radius: 0 !important;
  }

  table.list-view-layout tr.queue-card-row td:not(:first-child):not(:last-child) {
    border-left: none;
    border-right: none;
  }

  html.dark table.list-view-layout tr.queue-card-row td {
    background-color: #111827;
    border-top-color: #374151;
    border-bottom: 2px solid #6B7280;
  }

  html.dark table.list-view-layout tr.queue-card-row td:first-child {
    border-left-color: #374151;
  }

  html.dark table.list-view-layout tr.queue-card-row td:last-child {
    border-right-color: #374151;
  }

  table tr.queue-card-row td {
    @apply align-middle;
    border-bottom: 2px solid #1D232F;
  }

  html.dark table tr.queue-card-row td {
    border-bottom-color: #6B7280;
  }

  table.table-layout tr.queue-card-row td {
    border-bottom: 2px solid #1D232F !important;
  }

  html.dark table.table-layout tr.queue-card-row td {
    border-bottom: 2px solid #6B7280 !important;
  }

  table.table-layout tr.last-in-date-group td,
  table.list-view-layout tr.last-in-date-group td {
    border-bottom: 1px solid #E7EBF3 !important;
  }

  /* Quick add's queue pin. Disabled for the window between the row appearing
     and QuickAddDescendantsJob finishing its item tree. */
  .queue-pin-done-wrap {
    @apply inline-flex;
  }

  /* The wrapper carries the tooltip and the cursor while the button is disabled,
     since a disabled button is inert to the pointer. */
  .queue-pin-done-wrap--building {
    @apply cursor-not-allowed;
  }

  .queue-pin-done {
    @apply px-2.5 py-1 rounded-lg bg-app-green-light border border-app-green !text-app-green-dark text-xs font-medium whitespace-nowrap transition-colors;
  }

  .queue-pin-done:not(:disabled):hover {
    @apply bg-app-green !text-white border-app-green;
  }

  .queue-pin-done:disabled {
    @apply opacity-50 animate-pulse pointer-events-none;
  }

  .mobile-work-card__header .queue-pin-done-wrap {
    @apply shrink-0 mr-2;
  }

  html.dark table.table-layout tr.last-in-date-group td,
  html.dark table.list-view-layout tr.last-in-date-group td {
    border-bottom: 1px solid #3C4353 !important;
  }

  .duration-picker-input.active {
    @apply bg-app-shade7;
  }

  .line-indicator {
    @apply relative;
  }

  .line-indicator::before,
  .line-indicator::after {
    content: '';
    position: absolute;
    left: -5px;
    width: 0;
    height: 0;
    border-left: 6px solid transparent !important;
    border-right: 6px solid transparent !important;
  }

  .line-indicator::before {
    top: 0;
    border-top: 10px solid;
    border-bottom: none !important;
  }

  .line-indicator::after {
    bottom: 0;
    border-bottom: 10px solid;
    border-top: none !important;
  }

  .work-item.selected {
    @apply !bg-app-green-light;
  }

  .work-item.queue-pin-scroll-highlight,
  tr.work-item.queue-pin-scroll-highlight,
  .mobile-work-card.queue-pin-scroll-highlight {
    @apply ring-2 ring-inset ring-app-green;
  }

  /* Dark mode: selected work item green background */
  html.dark .work-item.selected,
  html.dark tr.work-item.selected {
    background-color: #222322 !important;
  }

  html.dark .work-item.selected a,
  html.dark tr.work-item.selected a,
  html.dark .work-item.selected td a,
  html.dark tr.work-item.selected td a {
    @apply text-white !important;
  }

  html.dark .work-item td a.text-black {
    @apply text-white !important;
  }

  /* Dark mode: work list items darker background */
  /* html.dark .work-item {
    background-color: #1e2330;
  } */

  .work-item:hover:not(.selected),
  tr.work-item:hover:not(.selected) {
    background-color: #F3F4FA;
  }

  html.dark .work-item:hover {
    background-color: #252a3a;
  }

  .dropdown-panel {
    @apply !w-[622px] max-w-[calc(100vw-49px-670px-21px)];
  }

  /* Dark mode: native form elements */
  html.dark select,
  html.dark input[type="text"],
  html.dark input[type="email"],
  html.dark input[type="password"],
  html.dark input[type="number"],
  html.dark input[type="time"],
  html.dark input[type="datetime-local"],
  html.dark textarea {
    @apply bg-app-dark text-white border-app-shade3;
  }

  html.dark select option {
    @apply bg-app-dark text-white;
  }

  html.dark input[type="checkbox"] {
    @apply accent-app-shade3;
  }

  /* Dark mode: time input clock icons should be white */
  html.dark input[type="time"]::-webkit-calendar-picker-indicator,
  html.dark input[type="datetime-local"]::-webkit-calendar-picker-indicator {
    filter: invert(1) brightness(2);
    cursor: pointer;
  }

  html.dark input[type="time"]::-moz-calendar-picker-indicator,
  html.dark input[type="datetime-local"]::-moz-calendar-picker-indicator {
    filter: invert(1) brightness(2);
    cursor: pointer;
  }

  html.dark input[type="date"].date-field-input::-webkit-calendar-picker-indicator {
    filter: invert(1) !important;
    cursor: pointer;
    opacity: 1 !important;
  }

  html.dark input[type="date"].date-field-input::-moz-calendar-picker-indicator {
    filter: invert(1) !important;
    cursor: pointer;
    opacity: 1 !important;
  }

  .date-field-input {
    transition: border-color 0.2s ease;
  }

  /* Date fields: show the same green hover/focus border as other inputs */
  .date-field-input:hover:not(:disabled),
  .date-field-input:focus:not(:disabled),
  .date-field-input:focus-visible:not(:disabled) {
    border: 1px solid #69D661 !important; /* app-green */
  }

  .unscheduled-time {
    @apply italic font-medium !text-app-shade5;
  }

  .item-panel-name-icon-picker {
    @apply relative;
  }

  .item-panel-name-icon-picker__trigger--empty {
    @apply border-dashed;
  }

  .item-panel-name-icon-picker__panel {
    @apply absolute right-0 top-[calc(100%+4px)] z-[130] w-[280px] rounded-xl border border-app-shade7 bg-white shadow-md dark:border-app-shade3 dark:bg-app-dark;
  }

  .item-panel-name-icon-picker__search {
    @apply flex items-center gap-2 border-b border-app-shade7 px-3 py-2 dark:border-app-shade3;
  }

  .item-panel-name-icon-picker__search input {
    @apply border-0 shadow-none ring-0 outline-none;

    &:focus,
    &:focus-visible {
      border: none !important;
      outline: none !important;
      box-shadow: none !important;
    }
  }

  .item-panel-name-icon-picker__grid {
    @apply grid max-h-[280px] grid-cols-6 gap-1 overflow-y-auto p-2;
  }

  .item-panel-name-icon-picker__option {
    @apply flex size-9 cursor-pointer items-center justify-center rounded-lg border border-transparent text-app-shade1 hover:border-app-green hover:bg-app-shade9 dark:text-white dark:hover:bg-app-shade3;

    &[hidden] {
      display: none;
    }
  }

  .item-panel-name-icon-picker__option--selected {
    @apply border-app-green bg-app-green/10;
  }

  .tasks-panel-filter-btn {
    @apply h-[26px] px-4 !py-0 rounded-lg text-sm font-normal leading-none whitespace-nowrap transition-colors border inline-flex items-center justify-center;
    border-color: #151b25;
  }

  .tasks-panel-filter-btn--active {
    background-color: #151b25;
    border-color: #151b25;
    @apply text-white;
  }

  .tasks-panel-filter-btn--inactive {
    @apply bg-white text-[#151b25];
    border-color: #151b25;
  }

  html.dark .tasks-panel-filter-btn--inactive {
    @apply bg-transparent text-white;
    border-color: #151b25;
  }

  .tasks-panel-checkbox {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    box-sizing: border-box;
    width: 14px;
    height: 13px;
    border: 1px solid theme('colors.app-shade1');
    border-radius: 4px;
    background-color: theme('colors.app-shade9');
    cursor: pointer;
    position: relative;
    outline: none;
    margin: 0;
    padding: 0;
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    vertical-align: middle;
  }

  .tasks-panel-checkbox:focus {
    outline: 1px solid theme('colors.app-shade1');
    outline-offset: 1px;
    box-shadow: none;
  }

  .tasks-panel-checkbox:checked {
    background-color: theme('colors.app-shade1');
    border-color: theme('colors.app-shade1');
  }

  .tasks-panel-checkbox:checked::after {
    content: '\2713';
    color: theme('colors.app-shade9');
    font-size: 9px;
    font-weight: bold;
    line-height: 1;
  }

  html.dark .tasks-panel-checkbox {
    background-color: theme('colors.app-shade9');
    border-color: theme('colors.app-shade1');
  }

  html.dark .tasks-panel-checkbox:checked {
    background-color: theme('colors.app-shade1');
    border-color: theme('colors.app-shade1');
  }

  .work-tasks-panel__row--root {
    @apply mt-1 py-2;
  }

  .work-tasks-panel__row--root .work-tasks-panel__name {
    @apply text-sm font-bold leading-snug;
  }

  .work-tasks-panel__row:not(.work-tasks-panel__row--root) {
    @apply py-1;
  }

  .work-tasks-panel__row:not(.work-tasks-panel__row--root) .work-tasks-panel__name {
    @apply text-sm font-normal leading-snug;
  }

  .work-tasks-panel__row--completed .work-tasks-panel__name,
  .work-tasks-panel__row--completed .work-tasks-panel__activity {
    @apply line-through opacity-60;
  }

  .work-tasks-panel__row-link:hover {
    @apply !text-app-green underline decoration-app-green;
  }

  .work-tasks-panel__row--completed .work-tasks-panel__row-link:hover {
    @apply !text-app-black dark:!text-white no-underline opacity-60;
  }

  .work-tasks-panel__status-icon .material-symbols-outlined {
    font-size: 14px !important;
  }

  .work-tasks-panel__status-icon img {
    width: 18px !important;
    height: 18px !important;
    min-width: 18px !important;
    max-width: 18px !important;
  }

  /* Stacked time: sub sits in normal flow directly under the time (no reserved gap when hidden). */
  .time-component[class~="flex-col"] .time-component__sub {
    @apply mt-0.5;
  }

  .work-status-time .time-component[class~="flex-col"] {
    @apply min-w-[2.75rem];
  }
}

.turbo-progress-bar,
div[class*="turbo-progress"],
div[class^="turbo-progress"] {
  display: none !important;
  visibility: hidden !important;
  opacity: 0 !important;
  width: 0 !important;
  height: 0 !important;
  position: absolute !important;
  top: -9999px !important;
  pointer-events: none !important;
}

/* Custom black checkbox */
.custom-black-checkbox {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  width: 16px;
  height: 16px;
  border: 2px solid #1D232F;
  border-radius: 3px;
  background-color: white;
  cursor: pointer;
  position: relative;
  outline: none;
  margin: 0;
  padding: 0;
  display: inline-block;
  vertical-align: middle;
}

.custom-black-checkbox:focus {
  outline: 2px solid #1D232F;
  outline-offset: 2px;
  box-shadow: none;
  background-color: white;
}

.custom-black-checkbox:active {
  background-color: white;
}

.custom-black-checkbox:checked {
  background-color: #1D232F;
  border-color: black;
}

.custom-black-checkbox:checked:focus {
  background-color: #1D232F;
}

.custom-black-checkbox:checked:active {
  background-color: #1D232F;
}

.page-container turbo-cable-stream-source {
  display: contents;
}

.custom-black-checkbox:checked::after {
  content: '\2713';
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  color: white;
  font-size: 12px;
  font-weight: bold;
  line-height: 1;
}

/* Green checkbox for timeslot options */
.green-checkbox {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  width: 16px;
  height: 16px;
  border: 2px solid #D3D7E0;
  border-radius: 3px;
  background-color: white;
  cursor: pointer;
  position: relative;
  outline: none;
  margin: 0;
  padding: 0;
  display: inline-block;
  vertical-align: middle;
}

html.dark .green-checkbox {
  border-color: #4A5568;
  background-color: #1D232F;
}

.green-checkbox:checked {
  background-color: #69D661;
  border-color: #69D661;
}

.green-checkbox:checked::after {
  content: '\2713';
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  color: white;
  font-size: 12px;
  font-weight: bold;
  line-height: 1;
}

.green-checkbox:focus {
  outline: 2px solid #69D661;
  outline-offset: 2px;
}

/* Which rows and which row controls a mobile queue card shows, per state: collapsed shows the
   Preview set, expanded (the eye button) shows the Columns set. Deliberately OUTSIDE
   @layer components — Tailwind emits a components-layer rule only for class names it finds in
   the files it scans, and every one of these four names lives in a single ERB partial. That
   already cost this feature twice: once when the name was built by string interpolation, and
   once when the watcher never scanned the partial after it was created, leaving both control
   groups visible on every row in both states. Plain CSS is copied through whatever the scan
   sees. */
.mobile-work-card:not(.mobile-work-card--expanded) .mobile-work-card__row--extra {
  display: none;
}

.mobile-work-card--expanded .mobile-work-card__row--preview-only {
  display: none;
}

.mobile-work-card:not(.mobile-work-card--expanded) .mobile-work-card__row-actions--columns {
  display: none;
}

.mobile-work-card--expanded .mobile-work-card__row-actions--preview {
  display: none;
}

/* Sunnie AI replies rendered from Markdown (ChatMarkdown), the image lightbox, and the live
   turn (streamed text + thinking row). Plain CSS outside @layer for the reason given above the
   mobile card rules: several of these class names are only ever written in a Ruby string
   (app/services/chat_markdown.rb), which the Tailwind content scan does not read. */
.chat-markdown {
  font-size: 13px;
  line-height: 1.5;
  overflow-wrap: anywhere;
  min-width: 0;
}
.chat-markdown > * + * { margin-top: 0.6em; }
.chat-markdown h1, .chat-markdown h2, .chat-markdown h3,
.chat-markdown h4, .chat-markdown h5, .chat-markdown h6 { font-weight: 600; line-height: 1.3; }
.chat-markdown h1 { font-size: 1.25em; }
.chat-markdown h2 { font-size: 1.15em; }
.chat-markdown h3 { font-size: 1.05em; }
.chat-markdown ul { list-style: disc; padding-left: 1.25rem; }
.chat-markdown ol { list-style: decimal; padding-left: 1.25rem; }
.chat-markdown li + li { margin-top: 0.2em; }
.chat-markdown a { text-decoration: underline; }
.chat-markdown blockquote {
  border-left: 3px solid theme('colors.app-shade6');
  padding-left: 0.75rem;
  color: theme('colors.app-shade4');
}
.chat-markdown code {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 0.9em;
  background: theme('colors.app-shade8');
  border-radius: 4px;
  padding: 0.05em 0.3em;
}
.chat-markdown pre {
  background: theme('colors.app-shade8');
  border-radius: 6px;
  padding: 0.6rem 0.75rem;
  overflow-x: auto;
}
.chat-markdown pre code { background: none; padding: 0; }
.chat-markdown hr { border-color: theme('colors.app-shade7'); }
.chat-markdown-table { overflow-x: auto; max-width: 100%; }
.chat-markdown table { border-collapse: collapse; font-variant-numeric: tabular-nums; }
.chat-markdown th, .chat-markdown td {
  border: 1px solid theme('colors.app-shade7');
  padding: 0.3rem 0.6rem;
  text-align: left;
  white-space: nowrap;
}
.chat-markdown th { background: theme('colors.app-shade8'); font-weight: 600; }
.chat-markdown tbody tr:nth-child(even) td { background: theme('colors.app-shade9'); }
html.dark .chat-markdown code, html.dark .chat-markdown pre,
html.dark .chat-markdown th { background: theme('colors.app-shade2'); }
html.dark .chat-markdown th, html.dark .chat-markdown td { border-color: theme('colors.app-shade3'); }
html.dark .chat-markdown tbody tr:nth-child(even) td { background: theme('colors.app-shade1'); }
html.dark .chat-markdown blockquote { border-color: theme('colors.app-shade3'); color: theme('colors.app-shade6'); }

.chat-image-thumbnail {
  display: inline-block;
  max-height: 10rem;
  max-width: min(15rem, 100%);
  object-fit: cover;
  border-radius: 8px;
  border: 1px solid theme('colors.app-shade7');
  cursor: zoom-in;
  vertical-align: top;
}
.chat-image-thumbnail:hover { opacity: 0.9; }

.image-lightbox {
  max-width: 100vw;
  max-height: 100vh;
  width: 100vw;
  height: 100vh;
  margin: 0;
  padding: 1.5rem;
  border: 0;
  background: transparent;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: zoom-out;
}
.image-lightbox:not([open]) { display: none; }
.image-lightbox::backdrop { background: rgb(0 0 0 / 0.8); }
.image-lightbox img {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
  border-radius: 6px;
  box-shadow: 0 10px 40px rgb(0 0 0 / 0.5);
}
.image-lightbox__close {
  position: fixed;
  top: 0.75rem;
  right: 0.75rem;
  width: 2.25rem;
  height: 2.25rem;
  border-radius: 9999px;
  color: #fff;
  background: rgb(0 0 0 / 0.5);
  display: flex;
  align-items: center;
  justify-content: center;
}

.ai-chip {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  font-size: 12px;
  line-height: 1.2;
  padding: 0.35rem 0.75rem;
  border-radius: 9999px;
  border: 1px solid theme('colors.app-shade6');
  background: #fff;
  color: theme('colors.app-shade2');
}
.ai-chip:hover { background: theme('colors.app-shade8'); }
/* Doubled class so it outranks .ai-chip:hover. With a single class the generic hover won and
   painted the light background under the primary's white text: a blank pill. */
.ai-chip.ai-chip--primary { background: theme('colors.app-shade1'); border-color: theme('colors.app-shade1'); color: #fff; }
.ai-chip.ai-chip--primary:hover { background: theme('colors.app-shade3'); border-color: theme('colors.app-shade3'); color: #fff; }
html.dark .ai-chip { background: theme('colors.app-shade2'); border-color: theme('colors.app-shade3'); color: #fff; }

/* The proposed view's settings. One grid for every row (each row's div is display: contents),
   so the label column is as wide as the LONGEST label and every value starts on the same line. */
.ai-proposal__rows {
  display: grid;
  grid-template-columns: max-content minmax(0, 1fr);
  /* Hug the content instead of stretching across the chat column. */
  align-self: flex-start;
  min-width: min(20rem, 100%);
  max-width: 100%;
  margin: 0;
  padding: 0.5rem 0.75rem;
  border: 1px solid theme('colors.app-shade7');
  border-radius: 8px;
  font-size: 13px;
  line-height: 1.35;
}
.ai-proposal__row { display: contents; }
.ai-proposal__row > dt,
.ai-proposal__row > dd {
  margin: 0;
  padding: 0.3rem 0;
  border-top: 1px solid theme('colors.app-shade8');
}
.ai-proposal__row:first-child > dt,
.ai-proposal__row:first-child > dd { border-top: 0; }
/* Spacing as padding, not column-gap, so the row dividers run unbroken across both columns. */
.ai-proposal__row > dt { color: theme('colors.app-shade4'); padding-right: 1.5rem; }
.ai-proposal__row > dd { color: theme('colors.app-shade1'); font-weight: 500; overflow-wrap: anywhere; }
html.dark .ai-proposal__rows { border-color: theme('colors.app-shade3'); }
html.dark .ai-proposal__row > dt,
html.dark .ai-proposal__row > dd { border-color: theme('colors.app-shade3'); }
html.dark .ai-proposal__row > dt { color: theme('colors.app-shade6'); }
html.dark .ai-proposal__row > dd { color: #fff; }

.ai-thinking {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  font-size: 12px;
  color: theme('colors.app-shade4');
  padding: 0.25rem 0.5rem 0.5rem;
}
html.dark .ai-thinking { color: theme('colors.app-shade6'); }
.ai-thinking__sun {
  font-size: 16px !important;
  color: #F5A524;
  animation: ai-thinking-spin 2.4s linear infinite;
}
.ai-thinking__word {
  background: linear-gradient(90deg, currentColor 0%, #F5A524 50%, currentColor 100%);
  background-size: 200% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  animation: ai-thinking-shimmer 2s linear infinite;
}
.ai-thinking__elapsed { opacity: 0.7; font-variant-numeric: tabular-nums; }
.ai-thinking--stale .ai-thinking__sun { animation: none; color: theme('colors.app-red'); }
.ai-thinking--stale { color: theme('colors.app-red'); }
@keyframes ai-thinking-spin { to { transform: rotate(360deg); } }

/* Reasoning and tool-call rows (chat_messages/_ai_step). Plain CSS for the same reason as the
   rest of the ai-* classes: some class names are built in ERB strings the scan may not read. */
.ai-steps { display: flex; flex-direction: column; gap: 0.125rem; padding: 0 0.5rem; }
.ai-steps:empty { display: none; }
.ai-step, .ai-step-log { font-size: 12px; color: theme('colors.app-shade4'); min-width: 0; }
.ai-step-log > .ai-steps { padding: 0.25rem 0 0 0.75rem; border-left: 1px solid theme('colors.app-shade7'); margin-left: 0.5rem; }
html.dark .ai-step, html.dark .ai-step-log { color: theme('colors.app-shade6'); }
.ai-step__summary {
  display: flex; align-items: center; gap: 0.35rem;
  list-style: none; cursor: pointer; padding: 0.2rem 0.25rem; border-radius: 0.375rem;
  min-width: 0; user-select: none;
}
.ai-step__summary::-webkit-details-marker { display: none; }
.ai-step__summary:hover { background: theme('colors.app-shade8'); }
html.dark .ai-step__summary:hover { background: theme('colors.app-shade2'); }
.ai-step__icon { font-size: 15px !important; flex-shrink: 0; }
.ai-step__icon--running { animation: ai-thinking-spin 1s linear infinite; }
.ai-step__icon--failed, .ai-step__icon--interrupted { color: theme('colors.app-red'); }
.ai-step__icon--ok { color: theme('colors.app-green'); }
.ai-step__label { font-weight: 600; white-space: nowrap; }
.ai-step__meta { opacity: 0.75; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.ai-step__chevron { display: inline-block; line-height: 1; font-size: 16px !important; margin-left: auto; flex-shrink: 0; transition: transform 0.15s; }
details[open] > .ai-step__summary .ai-step__chevron { transform: rotate(180deg); }
.ai-step__body { padding: 0.25rem 0.25rem 0.5rem 1.6rem; min-width: 0; }
.ai-step__section { font-weight: 600; margin-top: 0.25rem; }
.ai-step__text { white-space: pre-wrap; word-break: break-word; max-height: 20rem; overflow: auto; }
.ai-step__pre {
  white-space: pre-wrap; word-break: break-word; max-height: 16rem; overflow: auto;
  font-size: 11px; padding: 0.4rem 0.5rem; border-radius: 0.375rem;
  background: theme('colors.app-shade8'); color: theme('colors.app-shade2');
}
html.dark .ai-step__pre { background: theme('colors.app-shade2'); color: theme('colors.app-shade7'); }
@media (prefers-reduced-motion: reduce) { .ai-step__icon--running { animation: none; } }
@keyframes ai-thinking-shimmer { from { background-position: 100% 0; } to { background-position: -100% 0; } }
@media (prefers-reduced-motion: reduce) {
  .ai-thinking__sun, .ai-thinking__word { animation: none; }
}
/*
 * This is a manifest file that'll be compiled into application.css, which will include all the files
 * listed below.
 *
 * Any CSS (and SCSS, if configured) file within this directory, lib/assets/stylesheets, or any plugin's
 * vendor/assets/stylesheets directory can be referenced here using a relative path.
 *
 * You're free to add application-wide styles to this file and they'll appear at the bottom of the
 * compiled file so the styles you add here take precedence over styles defined in any other CSS
 * files in this directory. Styles in this file should be added after the last require_* statement.
 * It is generally better to create a new file per style scope.
 *


 */

html[progress-spinner] body {
  pointer-events: none;
}

html[progress-spinner] #global-spinner {
  display: flex !important;
  pointer-events: auto;
}

html[progress-spinner] .progress-container {
  display: flex !important;
}

.gutter {
  display: flex;
  justify-content: center;
  align-items: center;
  overflow: visible;
  background-color: #ddd;
  cursor: col-resize;
}

.gutter-handle {
  min-width: 8px;
  width: 8px;
  height: 36px;
  background-color: #ddd;
  cursor: col-resize;
}

.calendar-lines {
  background: repeating-linear-gradient(
    to bottom,
    #D3D7E0,
    #D3D7E0 1px,
    transparent 1px,
    transparent 15px,
    #E7EBF3 15px,
    transparent 16px,
    transparent 30px,
    #E7EBF3 30px,
    transparent 31px,
    transparent 45px,
    #E7EBF3 45px,
    transparent 46px,
    transparent 60px
  );
}

.text-editor-container {
  &.edit-mode {
    padding-top: 12px;
    padding-bottom: 12px;

    & .ql-editor {
      min-height: 240px !important;
    }
  }

  &:not(.edit-mode) .ql-container {
    border-width: 0 !important;
  }
}

/* Notes pad: Quill snow as a full-height notepad, not a chat composer. */
.item-notes-pad {
  & .ql-toolbar.ql-snow {
    border: 0;
    border-bottom: 1px solid #E7EBF3;
    flex-shrink: 0;
  }

  & .ql-container.ql-snow {
    border: 0;
    flex: 1 1 auto;
    min-height: 240px;
    overflow-y: auto;
    font-size: 0.875rem;
  }

  & .ql-editor {
    min-height: 240px;
    padding: 0.75rem 1rem;
  }

  & .ql-editor.ql-blank::before {
    color: #6D7483;
    font-style: normal;
    left: 1rem;
  }
}

.dark .item-notes-pad {
  & .ql-toolbar.ql-snow {
    border-bottom-color: #3C4353;
  }

  & .ql-snow .ql-stroke {
    stroke: #D3D7E0;
  }

  & .ql-snow .ql-fill {
    fill: #D3D7E0;
  }

  & .ql-snow .ql-picker-label {
    color: #D3D7E0;
  }

  & .ql-editor {
    color: #fff;
  }

  & .ql-editor.ql-blank::before {
    color: #D3D7E0;
  }
}

.email-message-pad {
  & .ql-container.ql-snow {
    min-height: 180px;
  }

  & .ql-editor {
    min-height: 180px;
  }
}

.select-list-item[hidden] {
  display: none !important;
}

.timeline-grid {
  background:
    repeating-linear-gradient(
      to right,
      transparent 0 44px,
      #E7EBF3 44px 45px,
      transparent 45px 152px
    ),
    repeating-linear-gradient(
      to bottom,
      transparent 0 49px,
      #E7EBF3 49px 50px
    );
}

.folded-hour::before {
  content: '...';
  position: absolute;
  top: 50%;
  left: -50px;
  transform: translateY(-50%);
  opacity: 0.4;
}

.badge::after {
  content: '';
  position: absolute;
  top: 0;
  right: 0;
  width: 8px;
  height: 8px;
  background-color: #DE3754; /* Red color for the badge */
  border-radius: 50%;
}

.field-selection-container *:not(.field-selection-option-label) [data-select-target="close"] {
  display: none;
}

/* Force transparent background on list-view-layout table cells - override compiled Tailwind CSS */
/* Must override: background-color: rgb(243 244 250/var(--tw-bg-opacity)) */
table.list-view-layout td,
table.list-view-layout tbody td,
table.list-view-layout > tbody > tr > td,
table.list-view-layout tbody tr td {
  --tw-bg-opacity: 0 !important;
  background-color: transparent !important;
  background: transparent !important;
}

table.list-view-layout tr.queue-card-row td,
table.list-view-layout tr.queue-card-row > td {
  --tw-bg-opacity: 0 !important;
  background-color: transparent !important;
  background: transparent !important;
}

html.dark table.list-view-layout td,
html.dark table.list-view-layout tbody td,
html.dark table.list-view-layout > tbody > tr > td,
html.dark table.list-view-layout tbody tr td,
html.dark table.list-view-layout tr.queue-card-row td {
  --tw-bg-opacity: 0 !important;
  background-color: transparent !important;
  background: transparent !important;
}

/* Ensure notifications panel is above theme toggle */
#notifications-panel {
  z-index: 99999 !important;
}

/* Force color picker to be circular - maximum specificity */
.clr-field,
div.clr-field,
.clr-field.clr-field,
* .clr-field,
* > .clr-field {
  width: 24px !important;
  height: 24px !important;
  min-width: 24px !important;
  min-height: 24px !important;
  max-width: 24px !important;
  max-height: 24px !important;
  border-radius: 9999px !important;
  -webkit-border-radius: 9999px !important;
  -moz-border-radius: 9999px !important;
  overflow: hidden !important;
  display: inline-block !important;
}

.clr-field button,
.clr-field button[type="button"],
div.clr-field button,
.clr-field.clr-field button,
* .clr-field button,
* > .clr-field button {
  border-radius: 9999px !important;
  -webkit-border-radius: 9999px !important;
  -moz-border-radius: 9999px !important;
  width: 24px !important;
  height: 24px !important;
  min-width: 24px !important;
  min-height: 24px !important;
  max-width: 24px !important;
  max-height: 24px !important;
  top: 0 !important;
  right: 0 !important;
  left: auto !important;
  bottom: auto !important;
  transform: none !important;
  -webkit-transform: none !important;
  -moz-transform: none !important;
  position: absolute !important;
  margin: 0 !important;
  padding: 0 !important;
}

.clr-field button:after,
.clr-field button::after,
div.clr-field button:after,
.clr-field.clr-field button:after {
  border-radius: 9999px !important;
  -webkit-border-radius: 9999px !important;
  -moz-border-radius: 9999px !important;
  width: 100% !important;
  height: 100% !important;
}

.item-panel .list-container .item-panel-color-picker-wrap {
  position: relative !important;
  overflow: hidden !important;
  background-color: transparent !important;
}

.item-panel .list-container .item-panel-color-picker-wrap form {
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  margin: 0 !important;
  padding: 0 !important;
}

.item-panel .list-container .item-panel-color-picker-wrap .clr-field {
  position: absolute !important;
  inset: 0 !important;
  display: block !important;
  width: 100% !important;
  height: 100% !important;
  min-width: 0 !important;
  min-height: 0 !important;
  max-width: none !important;
  max-height: none !important;
  border-radius: inherit !important;
}

.item-panel .list-container .item-panel-color-picker-wrap .clr-field input.item-panel-color-picker {
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  margin: 0 !important;
  padding: 0 !important;
  opacity: 0 !important;
  cursor: pointer !important;
  border: 0 !important;
}

.item-panel .list-container .item-panel-color-picker-wrap .clr-field button {
  position: absolute !important;
  inset: 0 !important;
  top: 0 !important;
  right: 0 !important;
  left: 0 !important;
  bottom: 0 !important;
  width: 100% !important;
  height: 100% !important;
  min-width: 0 !important;
  min-height: 0 !important;
  max-width: none !important;
  max-height: none !important;
  transform: none !important;
  pointer-events: none !important;
}

.item-panel .list-container .item-panel-color-picker-wrap .clr-field button::after {
  background-color: currentColor !important;
}

.item-panel-title-name {
  line-height: 1.25;
}