/* shadcn NativeSelect-style form controls */
:root {
  --pd-native-select-height: 36px;
  --pd-native-select-radius: 10px;
  --pd-native-select-border: var(--input, #d4d4d8);
  --pd-native-select-bg: var(--background, #ffffff);
  --pd-native-select-fg: var(--foreground, #18181b);
  --pd-native-select-muted: var(--muted-foreground, #71717a);
  --pd-native-select-ring: color-mix(in srgb, var(--ring, #a1a1aa) 38%, transparent);
  --pd-native-select-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%2371717a' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
}

select:not([multiple]):not([size]),
.detail-panel select:not([multiple]):not([size]),
.settings-dialog select:not([multiple]):not([size]),
.toolbar select:not([multiple]):not([size]),
.toolbar-actions select:not([multiple]):not([size]),
.dashboard-shell select:not([multiple]):not([size]),
.dashboard-filter-panel select:not([multiple]):not([size]),
.dashboard-expert-filterbar select:not([multiple]):not([size]),
.dashboard-slicer-bar select:not([multiple]):not([size]),
.smart-dashboard-toolbar select:not([multiple]):not([size]),
.advanced-pivot-filters select:not([multiple]):not([size]),
.advanced-pivot-builder select:not([multiple]):not([size]),
.advanced-pivot-grouping select:not([multiple]):not([size]),
.premium-area-controls select:not([multiple]):not([size]),
.widget-attached-filterbar select:not([multiple]):not([size]),
.calendar-filter-panel select:not([multiple]):not([size]),
.calendar-right-panel .calendar-filter-panel select:not([multiple]):not([size]),
.global-search-filter select:not([multiple]):not([size]),
.ai-decision-filter select:not([multiple]):not([size]),
.finance-panel select:not([multiple]):not([size]),
.license-field-grid select:not([multiple]):not([size]),
.training-roster-toolbar select:not([multiple]):not([size]),
.routine-responsible-row select:not([multiple]):not([size]),
.menu-package-duplicate-label select:not([multiple]):not([size]),
.menu3-document-form-header-actions select:not([multiple]):not([size]),
.document-page-size-label select:not([multiple]):not([size]) {
  display: inline-flex !important;
  width: 100% !important;
  min-width: 0 !important;
  max-width: 100% !important;
  min-height: var(--pd-native-select-height) !important;
  height: var(--pd-native-select-height) !important;
  align-items: center !important;
  padding: 0 38px 0 12px !important;
  border: 1px solid var(--pd-native-select-border) !important;
  border-radius: var(--pd-native-select-radius) !important;
  appearance: none !important;
  -webkit-appearance: none !important;
  background-color: var(--pd-native-select-bg) !important;
  background-image: var(--pd-native-select-icon) !important;
  background-repeat: no-repeat !important;
  background-position: right 12px center !important;
  background-size: 16px 16px !important;
  color: var(--pd-native-select-fg) !important;
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.05) !important;
  font-family: var(--pd-english-ui-font, "Inter", "Segoe UI", "Khmer OS Siemreap", "Noto Sans Khmer", Arial, sans-serif) !important;
  font-size: 14px !important;
  font-weight: 400 !important;
  line-height: 1 !important;
  letter-spacing: 0 !important;
  text-transform: none !important;
  cursor: pointer !important;
  transition: color 150ms ease, background-color 150ms ease, border-color 150ms ease, box-shadow 150ms ease !important;
}

select:not([multiple]):not([size]):hover,
.detail-panel select:not([multiple]):not([size]):hover,
.settings-dialog select:not([multiple]):not([size]):hover,
.dashboard-shell select:not([multiple]):not([size]):hover,
.toolbar select:not([multiple]):not([size]):hover {
  border-color: color-mix(in srgb, var(--ring, #a1a1aa) 42%, var(--pd-native-select-border)) !important;
  background-color: color-mix(in srgb, var(--pd-native-select-bg) 92%, var(--muted, #f4f4f5)) !important;
}

select:not([multiple]):not([size]):focus,
select:not([multiple]):not([size]):focus-visible,
.detail-panel select:not([multiple]):not([size]):focus,
.detail-panel select:not([multiple]):not([size]):focus-visible,
.settings-dialog select:not([multiple]):not([size]):focus,
.settings-dialog select:not([multiple]):not([size]):focus-visible,
.dashboard-shell select:not([multiple]):not([size]):focus,
.dashboard-shell select:not([multiple]):not([size]):focus-visible,
.toolbar select:not([multiple]):not([size]):focus,
.toolbar select:not([multiple]):not([size]):focus-visible {
  outline: none !important;
  border-color: var(--ring, #a1a1aa) !important;
  box-shadow: 0 0 0 3px var(--pd-native-select-ring) !important;
}

select:not([multiple]):not([size]):disabled {
  pointer-events: none !important;
  cursor: not-allowed !important;
  opacity: 0.5 !important;
}

select:not([multiple]):not([size]) option,
select:not([multiple]):not([size]) optgroup {
  background: Canvas !important;
  color: CanvasText !important;
  font: inherit !important;
}

select:not([multiple]):not([size]) optgroup {
  font-weight: 600 !important;
}

select[multiple],
select[size]:not([size="1"]) {
  min-height: 112px !important;
  padding: 8px !important;
  border-radius: var(--pd-native-select-radius) !important;
  border-color: var(--pd-native-select-border) !important;
  background-image: none !important;
}

.document-page-size-label {
  gap: 8px !important;
}

.document-page-size-label select:not([multiple]):not([size]) {
  width: auto !important;
  min-width: 84px !important;
  height: 30px !important;
  min-height: 30px !important;
  padding-right: 30px !important;
  border-radius: 8px !important;
  background-position: right 9px center !important;
  background-size: 14px 14px !important;
  font-size: 12px !important;
  font-weight: 500 !important;
}

body.dark-theme,
body.midnight-theme,
body.deep-navy-theme,
body.charcoal-theme,
body.dark-emerald-theme {
  --pd-native-select-border: var(--input, #3f3f46);
  --pd-native-select-bg: color-mix(in srgb, var(--background, #09090b) 76%, var(--input, #3f3f46));
  --pd-native-select-fg: var(--foreground, #fafafa);
  --pd-native-select-muted: var(--muted-foreground, #a1a1aa);
  --pd-native-select-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23a1a1aa' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
}

/* shadcn Switch-style settings controls */
:root {
  --pd-switch-width: 2rem;
  --pd-switch-height: 1.15rem;
  --pd-switch-thumb: 1rem;
  --pd-switch-bg: var(--input, #e4e4e7);
  --pd-switch-bg-checked: var(--primary, #18181b);
  --pd-switch-thumb-bg: var(--background, #ffffff);
  --pd-switch-ring: color-mix(in srgb, var(--ring, #a1a1aa) 48%, transparent);
  --pd-switch-label: var(--foreground, #18181b);
  --pd-switch-muted: var(--muted-foreground, #71717a);
}

.settings-checkbox {
  gap: 8px !important;
  color: var(--pd-switch-label) !important;
  font-family: var(--pd-english-ui-font, "Inter", "Segoe UI", "Khmer OS Siemreap", "Noto Sans Khmer", Arial, sans-serif) !important;
  font-size: 12px !important;
  font-weight: 500 !important;
  line-height: 1.25 !important;
  cursor: pointer !important;
}

.settings-checkbox input[type="checkbox"] {
  position: relative !important;
  display: inline-flex !important;
  width: var(--pd-switch-width) !important;
  min-width: var(--pd-switch-width) !important;
  height: var(--pd-switch-height) !important;
  min-height: var(--pd-switch-height) !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 1px solid transparent !important;
  border-radius: 999px !important;
  appearance: none !important;
  -webkit-appearance: none !important;
  background: var(--pd-switch-bg) !important;
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.05) !important;
  cursor: pointer !important;
  outline: none !important;
  transition: background-color 160ms ease, border-color 160ms ease, box-shadow 160ms ease, opacity 160ms ease !important;
}

.settings-checkbox input[type="checkbox"]::before {
  content: "" !important;
  position: absolute !important;
  top: 50% !important;
  left: 1px !important;
  width: var(--pd-switch-thumb) !important;
  height: var(--pd-switch-thumb) !important;
  border-radius: 999px !important;
  background: var(--pd-switch-thumb-bg) !important;
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.14) !important;
  transform: translateY(-50%) !important;
  transition: left 160ms ease, background-color 160ms ease, box-shadow 160ms ease !important;
}

.settings-checkbox input[type="checkbox"]:checked {
  background: var(--pd-switch-bg-checked) !important;
}

.settings-checkbox input[type="checkbox"]:checked::before {
  left: calc(100% - var(--pd-switch-thumb) - 1px) !important;
}

.settings-checkbox input[type="checkbox"]:focus-visible {
  border-color: var(--ring, #a1a1aa) !important;
  box-shadow: 0 0 0 3px var(--pd-switch-ring) !important;
}

.settings-checkbox input[type="checkbox"]:disabled {
  cursor: not-allowed !important;
  opacity: 0.5 !important;
}

.settings-switch-field {
  display: inline-flex;
  align-items: center;
  justify-content: flex-start;
  gap: 8px;
  min-height: 34px;
  color: var(--pd-switch-label);
  font-family: var(--pd-english-ui-font, "Inter", "Segoe UI", "Khmer OS Siemreap", "Noto Sans Khmer", Arial, sans-serif);
  font-size: 12px;
  font-weight: 600;
  line-height: 1.25;
  white-space: nowrap;
}

.settings-switch-field[data-disabled="true"] {
  color: var(--pd-switch-muted);
}

.settings-switch-button[data-slot="switch"] {
  position: relative !important;
  display: inline-flex !important;
  align-items: center !important;
  width: var(--pd-switch-width) !important;
  min-width: var(--pd-switch-width) !important;
  max-width: var(--pd-switch-width) !important;
  height: var(--pd-switch-height) !important;
  min-height: var(--pd-switch-height) !important;
  max-height: var(--pd-switch-height) !important;
  padding: 0 !important;
  border: 1px solid transparent !important;
  border-radius: 999px !important;
  background: var(--pd-switch-bg) !important;
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.05) !important;
  cursor: pointer !important;
  outline: none !important;
  transition: background-color 160ms ease, border-color 160ms ease, box-shadow 160ms ease, opacity 160ms ease !important;
}

.settings-switch-button[data-slot="switch"][data-state="checked"] {
  background: var(--pd-switch-bg-checked) !important;
}

.settings-switch-button[data-slot="switch"]:focus-visible {
  border-color: var(--ring, #a1a1aa) !important;
  box-shadow: 0 0 0 3px var(--pd-switch-ring) !important;
}

.settings-switch-button[data-slot="switch"]:disabled {
  cursor: not-allowed !important;
  opacity: 0.5 !important;
}

.settings-switch-thumb[data-slot="switch-thumb"] {
  pointer-events: none !important;
  position: absolute !important;
  left: 1px !important;
  top: 50% !important;
  display: block !important;
  width: var(--pd-switch-thumb) !important;
  height: var(--pd-switch-thumb) !important;
  border-radius: 999px !important;
  background: var(--pd-switch-thumb-bg) !important;
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.14) !important;
  transform: translateY(-50%) !important;
  transition: left 160ms ease, background-color 160ms ease, box-shadow 160ms ease !important;
}

.settings-switch-button[data-slot="switch"][data-state="checked"] .settings-switch-thumb {
  left: calc(100% - var(--pd-switch-thumb) - 1px) !important;
}

.settings-dialog button.settings-switch-button[data-slot="switch"]:not(.icon-button):not(.theme-palette-button):not(.theme-color-button),
.settings-dialog button.settings-switch-button[data-slot="switch"]:not(.icon-button):not(.theme-palette-button):not(.theme-color-button):hover {
  width: var(--pd-switch-width) !important;
  min-width: var(--pd-switch-width) !important;
  max-width: var(--pd-switch-width) !important;
  height: var(--pd-switch-height) !important;
  min-height: var(--pd-switch-height) !important;
  max-height: var(--pd-switch-height) !important;
  padding: 0 !important;
  border: 1px solid transparent !important;
  border-radius: 999px !important;
  color: transparent !important;
  background: var(--pd-switch-bg) !important;
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.05) !important;
  transform: none !important;
}

.settings-dialog button.settings-switch-button[data-slot="switch"][data-state="checked"]:not(.icon-button):not(.theme-palette-button):not(.theme-color-button),
.settings-dialog button.settings-switch-button[data-slot="switch"][data-state="checked"]:not(.icon-button):not(.theme-palette-button):not(.theme-color-button):hover {
  background: var(--pd-switch-bg-checked) !important;
}

.settings-switch-label {
  overflow: hidden;
  text-overflow: ellipsis;
}

.dashboard-widget-visibility-switch,
.dashboard-enabled-switch {
  justify-self: end;
}

.dashboard-widget-row .dashboard-widget-visibility-switch {
  min-width: 92px;
}

body.dark-theme,
body.midnight-theme,
body.deep-navy-theme,
body.charcoal-theme,
body.dark-emerald-theme {
  --pd-switch-bg: color-mix(in srgb, var(--input, #3f3f46) 86%, transparent);
  --pd-switch-bg-checked: var(--primary, #fafafa);
  --pd-switch-thumb-bg: var(--background, #09090b);
  --pd-switch-label: var(--foreground, #fafafa);
  --pd-switch-muted: var(--muted-foreground, #a1a1aa);
}

/* shadcn Toggle-style floating right navigation bookmark */
#floatingDocumentationButton.shadcn-toggle-bookmark[data-slot="toggle"] {
  --pd-toggle-bg: #ffffff;
  --pd-toggle-fg: #18181b;
  --pd-toggle-border: #e4e4e7;
  --pd-toggle-hover-bg: #f4f4f5;
  --pd-toggle-hover-fg: #18181b;
  --pd-toggle-ring: rgba(161, 161, 170, 0.5);
  width: calc(40px * var(--floating-button-scale, 1)) !important;
  min-width: calc(40px * var(--floating-button-scale, 1)) !important;
  max-width: calc(40px * var(--floating-button-scale, 1)) !important;
  height: calc(32px * var(--floating-button-scale, 1)) !important;
  min-height: calc(32px * var(--floating-button-scale, 1)) !important;
  max-height: calc(32px * var(--floating-button-scale, 1)) !important;
  padding: 0 calc(6px * var(--floating-button-scale, 1)) !important;
  border: 1px solid var(--pd-toggle-border) !important;
  border-radius: calc(8px * var(--floating-button-scale, 1)) !important;
  background: var(--pd-toggle-bg) !important;
  color: var(--pd-toggle-fg) !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: calc(8px * var(--floating-button-scale, 1)) !important;
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.05) !important;
  overflow: visible !important;
  text-shadow: none !important;
  transition:
    color 150ms ease,
    background-color 150ms ease,
    border-color 150ms ease,
    box-shadow 150ms ease !important;
}

#floatingDocumentationButton.shadcn-toggle-bookmark[data-slot="toggle"]::before,
#floatingDocumentationButton.shadcn-toggle-bookmark[data-slot="toggle"]::after {
  content: none !important;
  display: none !important;
  animation: none !important;
}

#floatingDocumentationButton.shadcn-toggle-bookmark[data-slot="toggle"]:hover {
  background: var(--pd-toggle-hover-bg) !important;
  color: var(--pd-toggle-hover-fg) !important;
}

#floatingDocumentationButton.shadcn-toggle-bookmark[data-slot="toggle"]:focus-visible {
  border-color: #a1a1aa !important;
  box-shadow: 0 0 0 3px var(--pd-toggle-ring) !important;
  outline: none !important;
}

#floatingDocumentationButton.shadcn-toggle-bookmark[data-slot="toggle"][data-state="on"],
#floatingDocumentationButton.shadcn-toggle-bookmark[data-slot="toggle"][aria-pressed="true"] {
  background: var(--pd-toggle-hover-bg) !important;
  color: var(--pd-toggle-hover-fg) !important;
}

#floatingDocumentationButton.shadcn-toggle-bookmark.is-snapped-left,
#floatingDocumentationButton.shadcn-toggle-bookmark.is-snapped-right,
#floatingDocumentationButton.shadcn-toggle-bookmark.is-snapped-top,
#floatingDocumentationButton.shadcn-toggle-bookmark.is-snapped-bottom {
  border-radius: calc(8px * var(--floating-button-scale, 1)) !important;
}

#floatingDocumentationButton .floating-bookmark-icon {
  pointer-events: none !important;
  width: calc(16px * var(--floating-button-scale, 1)) !important;
  height: calc(16px * var(--floating-button-scale, 1)) !important;
  flex: 0 0 auto !important;
  color: currentColor !important;
  fill: none !important;
  stroke: currentColor !important;
}

#floatingDocumentationButton.shadcn-toggle-bookmark[data-state="on"] .floating-bookmark-icon,
#floatingDocumentationButton.shadcn-toggle-bookmark[aria-pressed="true"] .floating-bookmark-icon {
  fill: currentColor !important;
}

body.dark-theme #floatingDocumentationButton.shadcn-toggle-bookmark[data-slot="toggle"],
body.midnight-theme #floatingDocumentationButton.shadcn-toggle-bookmark[data-slot="toggle"],
body.deep-navy-theme #floatingDocumentationButton.shadcn-toggle-bookmark[data-slot="toggle"],
body.charcoal-theme #floatingDocumentationButton.shadcn-toggle-bookmark[data-slot="toggle"],
body.dark-emerald-theme #floatingDocumentationButton.shadcn-toggle-bookmark[data-slot="toggle"] {
  --pd-toggle-bg: #09090b;
  --pd-toggle-fg: #fafafa;
  --pd-toggle-border: #27272a;
  --pd-toggle-hover-bg: #27272a;
  --pd-toggle-hover-fg: #fafafa;
  --pd-toggle-ring: rgba(161, 161, 170, 0.35);
}

body.dark-theme #floatingDocumentationButton.shadcn-toggle-bookmark[data-slot="toggle"]:hover,
body.midnight-theme #floatingDocumentationButton.shadcn-toggle-bookmark[data-slot="toggle"]:hover,
body.deep-navy-theme #floatingDocumentationButton.shadcn-toggle-bookmark[data-slot="toggle"]:hover,
body.charcoal-theme #floatingDocumentationButton.shadcn-toggle-bookmark[data-slot="toggle"]:hover,
body.dark-emerald-theme #floatingDocumentationButton.shadcn-toggle-bookmark[data-slot="toggle"]:hover,
body.dark-theme #floatingDocumentationButton.shadcn-toggle-bookmark[data-slot="toggle"][data-state="on"],
body.midnight-theme #floatingDocumentationButton.shadcn-toggle-bookmark[data-slot="toggle"][data-state="on"],
body.deep-navy-theme #floatingDocumentationButton.shadcn-toggle-bookmark[data-slot="toggle"][data-state="on"],
body.charcoal-theme #floatingDocumentationButton.shadcn-toggle-bookmark[data-slot="toggle"][data-state="on"],
body.dark-emerald-theme #floatingDocumentationButton.shadcn-toggle-bookmark[data-slot="toggle"][data-state="on"] {
  background: var(--pd-toggle-hover-bg) !important;
  color: var(--pd-toggle-hover-fg) !important;
}