@import "tailwindcss/theme" layer(theme);
@import "tailwindcss/utilities" layer(utilities);

/* ────────────────────────────────────────────────────────────────────────
   Visible sl-checkbox control

   index.html sets --sl-input-background-color: transparent globally so
   sl-input / sl-textarea / sl-select render borderless on dark surfaces.
   That CSS variable inherits through shadow DOM into every sl-checkbox,
   leaving the unchecked control box invisible against dark dialog
   backgrounds (e.g. the Public Access modal).

   Shoelace exposes the box as the `control` part. ::part() only crosses
   ONE shadow boundary, so to reach the part on a checkbox that lives
   inside a Lit component (workspace-home, etc.) the rules must live
   INSIDE that component's shadow root. Lit components in this app
   `import style from "../../styles.css?inline"` and add it to their
   `static styles`, so anything declared here ends up in their shadow
   root and can target child sl-checkbox parts.
   ──────────────────────────────────────────────────────────────────── */
sl-checkbox::part(control) {
  background-color: var(--tb-bg);
  border: 2px solid var(--tb-text-muted);
  box-shadow: none;
}

sl-checkbox:hover::part(control) {
  border-color: var(--tb-text-secondary);
}

sl-checkbox::part(control--checked),
sl-checkbox::part(control--indeterminate) {
  background-color: var(--sl-color-primary-600);
  border-color: var(--sl-color-primary-600);
}

sl-checkbox[disabled]::part(control) {
  background-color: var(--tb-bg-muted);
  border-color: var(--tb-border);
  opacity: 0.6;
}