/* Shared selection standard for Passenger, Admin and future Driver screens.
   State comes from native :checked / option:checked or ARIA, never a color-only flag.
   Load after page styles. Existing components are mapped to reusable aliases below. */
:root {
  --choice-bg: #123853;
  --choice-border: #5da9d2;
  --choice-text: #e5f5ff;
  --choice-muted: #c0dfef;
  --choice-hover: #1a4b6a;
  --choice-selected-bg: #ffd166;
  --choice-selected-border: #ffdd8d;
  --choice-selected-text: #15263a;
  --choice-focus: #ffffff;
  --choice-disabled-bg: #263445;
  --choice-disabled-text: #a7b4c4;
}
.selection-key { display:flex; flex-wrap:wrap; gap:10px 20px; align-items:center; margin:0 0 20px; color:#dceaf6; font-size:.875rem; line-height:1.8; }
.selection-key>span { display:inline-flex; align-items:center; gap:9px; }
.selection-key i { display:inline-grid; place-items:center; flex:0 0 24px; width:24px; height:24px; border:2px solid var(--choice-border); border-radius:7px; background:var(--choice-bg); color:var(--choice-text); font:800 16px/1 system-ui,sans-serif; font-style:normal; }
.selection-key .is-selected { background:var(--choice-selected-bg); border-color:var(--choice-selected-border); color:var(--choice-selected-text); }
.auth-card>.selection-key { padding:16px 20px 0; margin:0; font-size:.875rem; }
.choice-section legend { font-size:.875rem; line-height:1.9; }
.choice-section legend::after { content:"တစ်ခုသာရွေးပါ"; display:inline-block; margin-inline-start:10px; color:var(--choice-muted); font-weight:400; font-size:.875rem; }

/* Single-choice chips, cards, tabs and selectable list rows. */
:is(.chip-grid label>span,.license-color>span,.choice-card,.selection-option>.selection-surface,.selection-card,.tab,.selection-tab,.user-row,.selection-item) {
  border:2px solid var(--choice-border);
  background:var(--choice-bg);
  color:var(--choice-text);
  box-shadow:none;
  cursor:pointer;
  font-size:.875rem;
  line-height:1.8;
  transition:background-color .15s,border-color .15s;
}
:is(.chip-grid label,.license-color,.selection-option) { position:relative; min-width:0; }
:is(.chip-grid label>span,.license-color>span,.selection-option>.selection-surface) { display:flex; align-items:center; justify-content:center; gap:9px; min-height:50px; padding:10px 12px; overflow-wrap:anywhere; }
:is(.choice-card,.selection-card) { position:relative; min-height:88px; }
.selection-option>.selection-surface { border-radius:11px; }
.selection-card { display:flex; align-items:center; gap:12px; padding:15px; margin:0; border-radius:13px; }
.selection-tab { padding:12px 14px; border-radius:11px; }
.selection-item { display:block; width:100%; text-align:left; padding:16px 16px 16px 52px; border-radius:13px; }
.choice-card .choice-icon { display:none; }
:is(.choice-card,.selection-card) small,.license-color small,.user-row small { color:var(--choice-muted); font-size:.875rem; }
.license-color>span { justify-content:flex-start; flex-wrap:wrap; }
.license-color i { flex:0 0 26px; }
.license-color small { margin-left:auto; }
:is(.chip-grid label>span,.license-color>span,.choice-card,.selection-option>.selection-surface,.selection-card,.tab,.selection-tab,.user-row,.selection-item)::before {
  content:"";
  display:inline-grid;
  place-items:center;
  width:22px;
  height:22px;
  flex:0 0 22px;
  border:2px solid var(--choice-border);
  border-radius:50%;
  background:transparent;
  font:900 15px/1 system-ui,sans-serif;
  vertical-align:middle;
}
:is(.tab,.selection-tab)::before { margin-inline-end:8px; }
.tabs { gap:8px; }
:is(.user-row,.selection-item) { position:relative; padding-inline-start:52px; }
:is(.user-row,.selection-item)::before { position:absolute; inset-inline-start:16px; top:20px; }

/* Native checked state also handles browser-restored values and form.reset(). */
:is(.chip-grid input:checked+span,.license-color input:checked+span,.selection-option>input:checked+.selection-surface,.choice-card:has(input:checked),.selection-card:has(input:checked),.tab[aria-selected="true"],.selection-tab[aria-selected="true"],.user-row[aria-pressed="true"],.selection-item[aria-pressed="true"]) {
  background:var(--choice-selected-bg);
  border-color:var(--choice-selected-border);
  color:var(--choice-selected-text);
  box-shadow:0 0 0 1px var(--choice-selected-border);
  font-weight:800;
}
:is(.chip-grid input:checked+span,.license-color input:checked+span,.selection-option>input:checked+.selection-surface,.choice-card:has(input:checked),.selection-card:has(input:checked),.tab[aria-selected="true"],.selection-tab[aria-selected="true"],.user-row[aria-pressed="true"],.selection-item[aria-pressed="true"])::before {
  content:"✓";
  background:var(--choice-selected-text);
  border-color:var(--choice-selected-text);
  color:var(--choice-selected-bg);
}
:is(.choice-card,.selection-card):has(input:checked) small,.license-color:has(input:checked) small,.user-row[aria-pressed="true"] small { color:#314459; }
/* Keep account status a distinct semantic badge on selected rows. */
.user-row[aria-pressed="true"] .account-status { background:#12283e; }

/* Visually hidden radios retain native keyboard and screen-reader behavior. */
:is(.chip-grid,.license-color,.choice-card,.selection-option,.selection-card) input[type=radio],.selection-option input[type=checkbox] {
  position:absolute; width:1px; height:1px; padding:0; margin:0; overflow:hidden; clip-path:inset(50%); opacity:0;
}
:is(.chip-grid input:focus-visible+span,.license-color input:focus-visible+span,.selection-option>input:focus-visible+.selection-surface,.choice-card:has(input:focus-visible),.selection-card:has(input:focus-visible),.tab:focus-visible,.selection-tab:focus-visible,.user-row:focus-visible,.selection-item:focus-visible) {
  outline:3px solid var(--choice-focus); outline-offset:4px;
}

/* Independent on/off choices use the same blue -> gold rule. */
:is(.remember,.auto-location,.add-stop-toggle,.selection-toggle) {
  display:flex; align-items:center; gap:12px; width:fit-content; max-width:100%; min-height:48px; padding:12px 14px; margin-block:8px 18px;
  border:2px solid var(--choice-border); border-radius:11px; background:var(--choice-bg); color:var(--choice-text); cursor:pointer; font-size:.875rem; line-height:1.8;
}
:is(.remember,.auto-location,.add-stop-toggle,.selection-toggle) input[type=checkbox] {
  appearance:none; position:relative; display:inline-block; flex:0 0 22px; width:22px; height:22px; margin:0; padding:0; border:2px solid var(--choice-border); border-radius:5px; background:var(--choice-bg); box-shadow:none; cursor:pointer;
}
:is(.remember,.auto-location,.add-stop-toggle,.selection-toggle):has(input:checked) { background:var(--choice-selected-bg); color:var(--choice-selected-text); border-color:var(--choice-selected-border); font-weight:800; }
:is(.remember,.auto-location,.add-stop-toggle,.selection-toggle) input:checked { background:var(--choice-selected-text); border-color:var(--choice-selected-text); }
:is(.remember,.auto-location,.add-stop-toggle,.selection-toggle) input:checked::after { content:""; position:absolute; top:2px; left:6px; width:6px; height:11px; border:solid var(--choice-selected-bg); border-width:0 2px 2px 0; transform:rotate(45deg); }
:is(.remember,.auto-location,.add-stop-toggle,.selection-toggle):has(input:focus-visible) { outline:3px solid var(--choice-focus); outline-offset:4px; }

/* Required identity-image pickers follow the same available/selected standard. */
.file-field>span { border:2px solid var(--choice-border); background:var(--choice-bg); color:var(--choice-text); font-size:.875rem; }
.file-field>span em { color:inherit; font-size:.875rem; }
.file-field>span b { display:none; }
.file-field>span::before { content:"＋"; display:grid; place-items:center; width:24px; height:24px; border:2px solid var(--choice-border); border-radius:50%; font:800 16px/1 system-ui,sans-serif; }
.file-field:has(input:valid)>span { background:var(--choice-selected-bg); border-color:var(--choice-selected-border); color:var(--choice-selected-text); }
.file-field:has(input:valid)>span::before { content:"✓"; background:var(--choice-selected-text); color:var(--choice-selected-bg); border-color:var(--choice-selected-text); }
.file-field:has(input:focus-visible)>span { outline:3px solid var(--choice-focus); outline-offset:4px; }

/* Native dropdowns: arrow means changeable, checkmark means a value is set.
   :has(option:checked) covers dynamic options and programmatic value changes. */
body :is(.admin-filters,.report-page,#outcomeDialog,.selection-field) select,body select.selection-select {
  appearance:none; display:block; width:100%; min-height:50px; margin-top:8px; padding:12px 44px 12px 14px;
  border:2px solid var(--choice-border); border-radius:11px; background-color:var(--choice-bg); color:var(--choice-text); font:inherit; font-size:.875rem; font-weight:600; line-height:1.8; cursor:pointer;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 18 18'%3E%3Cpath d='m4 6 5 5 5-5' fill='none' stroke='%23e5f5ff' stroke-width='2'/%3E%3C/svg%3E");
  background-repeat:no-repeat; background-position:right 14px center; background-size:18px;
}
body :is(.admin-filters,.report-page,#outcomeDialog,.selection-field) select:has(option:checked:not([value=""]):not(:disabled)),body select.selection-select:has(option:checked:not([value=""]):not(:disabled)) {
  background-color:var(--choice-selected-bg); border-color:var(--choice-selected-border); color:var(--choice-selected-text); padding-inline-start:42px;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 18 18'%3E%3Cpath d='m3 9 4 4 8-9' fill='none' stroke='%2315263a' stroke-width='2.5'/%3E%3C/svg%3E"),url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 18 18'%3E%3Cpath d='m4 6 5 5 5-5' fill='none' stroke='%2315263a' stroke-width='2'/%3E%3C/svg%3E");
  background-position:left 14px center,right 14px center; background-size:18px,18px;
}
body :is(.admin-filters,.report-page,#outcomeDialog,.selection-field) select:focus-visible,body select.selection-select:focus-visible { outline:3px solid var(--choice-focus); outline-offset:4px; }
select option { background:var(--choice-bg); color:var(--choice-text); }
select option:checked { background:var(--choice-selected-bg); color:var(--choice-selected-text); }
select option:disabled { background:var(--choice-disabled-bg); color:var(--choice-disabled-text); }

@media(hover:hover) {
  .chip-grid label:not(:has(input:disabled)):hover>span,:is(.license-color,.selection-option):not(:has(input:disabled)):hover>span,:is(.choice-card,.selection-card):not(:has(input:disabled)):hover,:is(.tab,.selection-tab,.user-row,.selection-item):not(:disabled):hover { border-color:#b9eaff; }
  .chip-grid label:hover>input:enabled:not(:checked)+span,:is(.license-color,.selection-option):hover>input:enabled:not(:checked)+span,:is(.choice-card,.selection-card):hover:has(input:enabled:not(:checked)),:is(.tab,.selection-tab):not(:disabled):hover:not([aria-selected="true"]),:is(.user-row,.selection-item):not(:disabled):hover:not([aria-pressed="true"]) { background:var(--choice-hover); }
  .file-field:not(:has(input:disabled)):has(input:invalid)>span:hover { background:var(--choice-hover); border-color:#b9eaff; }
}
:is(.chip-grid input:disabled+span,.license-color input:disabled+span,.selection-option>input:disabled+.selection-surface,.choice-card:has(input:disabled),.selection-card:has(input:disabled),.remember:has(input:disabled),.auto-location:has(input:disabled),.add-stop-toggle:has(input:disabled),.selection-toggle:has(input:disabled),.tab:disabled,.selection-tab:disabled,.user-row:disabled,.selection-item:disabled) { cursor:not-allowed; background:var(--choice-disabled-bg); border-color:#738195; color:var(--choice-disabled-text); box-shadow:none; opacity:1; }
:is(.choice-card,.selection-card):has(input:disabled) small,.license-color:has(input:disabled) small,.user-row:disabled small { color:var(--choice-disabled-text); }
body :is(.admin-filters,.report-page,#outcomeDialog,.selection-field) select:disabled,body select.selection-select:disabled { cursor:not-allowed; background-color:var(--choice-disabled-bg); color:var(--choice-disabled-text); border-color:#738195; }
@media(max-width:520px) { .selection-key { gap:8px 14px; } .license-color small { flex-basis:100%; margin-inline-start:32px; } .tab { padding:12px 8px; } }
@media(prefers-reduced-motion:reduce) { .selection-option,.selection-card,.selection-toggle,.selection-tab,.selection-item,.chip-grid span,.choice-card,.license-color>span,.tab,.user-row { transition:none; } }
@media(forced-colors:active) {
  :is(.chip-grid input:checked+span,.license-color input:checked+span,.choice-card:has(input:checked),.selection-card:has(input:checked),.selection-option>input:checked+.selection-surface,.user-row[aria-pressed="true"],.selection-item[aria-pressed="true"],.tab[aria-selected="true"],.selection-tab[aria-selected="true"]) { outline:2px solid Highlight; }
}
@media print { .selection-key { display:none!important; } }
