/*
 * Kit controls on the accounting pages (public/js/acct/controls.js): native selects and date inputs that open the
 * invoice builder's select menu and date picker (the layers are styled in builder.css). Solid colours only.
 */
select.ac-select { -webkit-appearance: none; appearance: none; padding-right: 34px; cursor: pointer; text-overflow: ellipsis;
  background: var(--surface) 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='%236b6d66' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") no-repeat right 10px center / 16px 16px; }
input.ac-date { position: relative; cursor: pointer; padding-right: 36px; font-variant-numeric: tabular-nums;
  background: var(--surface) 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='%236b6d66' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='4' width='18' height='18' rx='2'/%3E%3Cpath d='M16 2v4M8 2v4M3 10h18'/%3E%3C/svg%3E") no-repeat right 11px center / 16px 16px; }
input.ac-date::-webkit-calendar-picker-indicator { display: none; }
input.ac-date::-webkit-datetime-edit { cursor: pointer; }
select.ac-select:hover:not(:disabled), input.ac-date:hover:not(:disabled) { border-color: var(--muted); }
select.ac-select[aria-expanded="true"], input.ac-date[aria-expanded="true"] { border-color: var(--accent); box-shadow: 0 0 0 3px var(--ring); }
select.ac-select:disabled, input.ac-date:disabled { background-color: var(--surface-2); color: var(--text-2); cursor: default; opacity: 1; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) select.ac-select { background-image: 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='%239a9c94' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E"); }
  :root:not([data-theme="light"]) input.ac-date { background-image: 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='%239a9c94' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='4' width='18' height='18' rx='2'/%3E%3Cpath d='M16 2v4M8 2v4M3 10h18'/%3E%3C/svg%3E"); }
}
:root[data-theme="dark"] select.ac-select { background-image: 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='%239a9c94' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E"); }
:root[data-theme="dark"] input.ac-date { background-image: 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='%239a9c94' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='4' width='18' height='18' rx='2'/%3E%3Cpath d='M16 2v4M8 2v4M3 10h18'/%3E%3C/svg%3E"); }

/* list layers */
.bd-option.disabled { opacity: .5; cursor: default; }
.bd-pop-select .bd-menu-head:first-child { padding-top: 4px; }
.bd-pop-select input.bd-pop-search { height: 34px; margin-bottom: 4px; box-shadow: none; }
.bd-select-sheet .bd-panel-body { display: flex; flex-direction: column; overflow: hidden; padding: 12px 12px calc(12px + var(--safe-b)); }
.bd-select-sheet .bd-sheet-list { flex: 1; min-height: 0; }
.bd-select-sheet .bd-listbox { flex: 1; min-height: 0; overflow: auto; overscroll-behavior: contain; }
.bd-select-sheet input.bd-pop-search { flex: none; height: 44px; margin: 0 0 8px; font-size: 16px; box-shadow: none; }
.bd-select-sheet .bd-option { min-height: 44px; padding: 10px 12px; font-size: 15px; border-radius: 8px; }
.bd-select-sheet .bd-menu-head { padding: 12px 12px 4px; }
.bd-pop-cal input.bd-cal-input { height: 34px; box-shadow: none; }

/* switches and numbered steps outside the builder */
label.ac-switch { margin: 4px 0 14px; font-size: 13.5px; color: var(--text); }
label.ac-switch .bd-switch-label { font-weight: 500; }
.ab-sec-head.ac-step { margin: 18px 0 12px; }
.ab-sec-head.ac-step:first-child { margin-top: 0; }
.ab-sec-head.ac-step h3 { margin: 0; font-size: 15px; line-height: 28px; }
.ab-sec-head.ac-step p { margin: 0; color: var(--muted); font-size: 13px; }
.ac-switches { display: flex; flex-direction: column; gap: 10px; margin-top: 16px; }
.ac-switches label.ac-switch { margin: 0; }
label.ac-switch input { inset: auto; left: 0; top: calc(50% - 10px); width: 34px; height: 20px; z-index: 1; } /* the text stays a plain label (a press on it toggles the switch) */
label.ac-switch[hidden], .ab-sec-head.ac-step[hidden] { display: none; }