:root {
  color-scheme: light dark;
  --accent: #1f5fbf;
  --accent-contrast: #fff;
  --bg: #f4f6f9;
  --card: #fff;
  --text: #1c2430;
  --muted: #5b6573;
  --border: #c9d0da;
  --error: #c5221f;
  --error-bg: #fdecea;
  --ok: #1e7e34;
  --radius: 8px;

  /* Toate câmpurile cu o singură linie au aceeași înălțime, același colț și aceeași săgeată */
  --control-h: 2.75rem;
  --control-radius: 6px;
  --control-pad: 12px;
  --chevron-size: 16px;
  --pop-shadow: 0 10px 30px rgb(15 23 42 / .16), 0 2px 6px rgb(15 23 42 / .08);
  --option-hover: color-mix(in srgb, var(--accent) 12%, transparent);
  --focus-ring: 0 0 0 3px color-mix(in srgb, var(--accent) 30%, transparent);
  --chevron-down: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M4 6l4 4 4-4' fill='none' stroke='%235b6573' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  --chevron-up: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M4 10l4-4 4 4' fill='none' stroke='%235b6573' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}
@media (prefers-color-scheme: dark) {
  :root {
    --accent: #6ea8ff;
    --accent-contrast: #0b1320;
    --bg: #12161c;
    --card: #1b2129;
    --text: #e6eaf0;
    --muted: #9aa5b4;
    --border: #3a4452;
    --error: #ff8a80;
    --error-bg: #3a1d1c;
    --ok: #7bd88f;
    --pop-shadow: 0 12px 32px rgb(0 0 0 / .5), 0 2px 6px rgb(0 0 0 / .3);
    --chevron-down: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M4 6l4 4 4-4' fill='none' stroke='%239aa5b4' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
    --chevron-up: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M4 10l4-4 4 4' fill='none' stroke='%239aa5b4' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  }
}

* { box-sizing: border-box; }
body {
  margin: 0;
  font: 16px/1.45 "Segoe UI", system-ui, -apple-system, sans-serif;
  background: var(--bg);
  color: var(--text);
}
main { max-width: 760px; margin: 0 auto; padding: 24px 16px 48px; }
h1 { font-size: 1.5rem; margin: 0 0 6px; }
.lead { margin: 0 0 20px; color: var(--muted); }

form { display: grid; gap: 16px; }
fieldset {
  margin: 0;
  padding: 16px 18px 18px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--card);
  display: grid;
  gap: 14px;
}
legend { padding: 0 6px; font-weight: 700; font-size: 1.05rem; }
.grid { display: grid; gap: 14px; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); }

.field { display: grid; gap: 6px; align-content: start; }
label, .label { font-weight: 600; font-size: .92rem; }
.req { color: var(--error); }
.opt { font-weight: 400; color: var(--muted); }
.hint { margin: 0; font-size: .85rem; color: var(--muted); }

/* ---------- Câmpuri ---------- */
input, select, textarea {
  font: inherit;
  color: inherit;
  background-color: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--control-radius);
  width: 100%;
  transition: border-color .12s, box-shadow .12s;
}
input, select { height: var(--control-h); padding: 0 var(--control-pad); }
textarea { padding: 10px var(--control-pad); resize: vertical; min-height: calc(var(--control-h) * 3); }
::placeholder { color: var(--muted); opacity: 1; }

/* Focus la fel pe toate câmpurile, și cu mouse-ul (un <select> deschis cu click nu are :focus-visible) */
:is(input, select, textarea):focus {
  outline: 2px solid transparent; /* rămâne vizibil în modul de contrast ridicat din Windows */
  border-color: var(--accent);
  box-shadow: var(--focus-ring);
}
button:focus-visible, .link:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
input[readonly] { background-color: transparent; color: var(--muted); }
/* Cascadă: Departament / Sediu așteaptă câmpul de deasupra */
select:disabled { cursor: not-allowed; background-color: var(--bg); }
.field:has(> select:disabled) > label { color: var(--muted); }

/* Aceeași săgeată, în același loc, pentru <select> și pentru câmpurile cu căutare */
select, .combo input {
  padding-right: calc(var(--control-pad) * 2 + var(--chevron-size));
  background-image: var(--chevron-down);
  background-repeat: no-repeat;
  background-position: right var(--control-pad) center;
  background-size: var(--chevron-size) var(--chevron-size);
}
select { appearance: none; cursor: pointer; }
.combo input[aria-expanded="true"] { background-image: var(--chevron-up); }
/* „Alegeți…” arată ca un placeholder, la fel ca în câmpurile text */
select:has(> option[value=""]:checked) { color: var(--muted); }
select option { color: var(--text); }

/* Lista unui <select>, stilizată ca lista câmpurilor cu căutare (Chrome / Edge 135+; altfel rămâne lista sistemului) */
@supports (appearance: base-select) {
  select, ::picker(select) { appearance: base-select; }
  select { display: flex; align-items: center; }
  select::picker-icon { display: none; } /* folosim săgeata noastră */
  select:open { background-image: var(--chevron-up); }
  ::picker(select) {
    width: anchor-size(width); /* exact cât câmpul, ca lista câmpurilor cu căutare */
    margin-block: 4px;
    padding: 4px;
    max-block-size: min(18rem, 50vh);
    border: 1px solid var(--border);
    border-radius: var(--control-radius);
    background: var(--card);
    color: var(--text);
    box-shadow: var(--pop-shadow);
  }
  select option { padding: 8px 10px; border-radius: 4px; gap: 8px; cursor: pointer; white-space: normal; line-height: 1.3; }
  select option:is(:hover, :focus-visible) { background: var(--option-hover); outline: none; }
  select option:checked { font-weight: 600; }
  select option::checkmark { order: 1; margin-inline-start: auto; color: var(--accent); }
  select option[value=""] { display: none; }
  /* Textul ales pe un singur rând, cu „…” (<button><selectedcontent> pus de app.js în listele din cascadă) */
  select > button { all: unset; flex: 1; min-width: 0; }
  selectedcontent { display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
}

/* ---------- Câmp cu căutare (liste lungi) ---------- */
.combo { position: relative; }
.combo-list {
  position: absolute;
  z-index: 20;
  inset-inline: 0;
  top: calc(100% + 4px);
  margin: 0;
  padding: 4px;
  list-style: none;
  max-height: min(18rem, 50vh);
  overflow-y: auto;
  overscroll-behavior: contain;
  border: 1px solid var(--border);
  border-radius: var(--control-radius);
  background: var(--card);
  color: var(--text);
  box-shadow: var(--pop-shadow);
}
.combo--up .combo-list { top: auto; bottom: calc(100% + 4px); }
.combo-option { display: flex; align-items: center; gap: 8px; padding: 8px 10px; border-radius: 4px; cursor: pointer; line-height: 1.3; }
.combo-option.is-active { background: var(--option-hover); }
.combo-option.is-chosen { font-weight: 600; }
.combo-option.is-chosen::after { content: "✓"; margin-inline-start: auto; color: var(--accent); }
.combo-option mark { background: none; color: var(--accent); font-weight: 700; }
.combo-empty { padding: 8px 10px; color: var(--muted); }

/* ---------- Erori: doar după interacțiune sau după o încercare de trimitere ---------- */
.error-msg { display: none; margin: 0; font-size: .85rem; color: var(--error); }
.error-msg::before { content: "⚠ "; }
.field:has(:user-invalid) > .error-msg { display: block; }
:is(input, select, textarea):user-invalid { border-color: var(--error); background-color: var(--error-bg); }
:is(input, select, textarea):user-invalid:focus { box-shadow: 0 0 0 3px color-mix(in srgb, var(--error) 30%, transparent); }
:is(input, select, textarea):required:user-valid { border-color: var(--ok); }

.host { max-width: 260px; }
.host label { font-weight: 400; color: var(--muted); }

/* ---------- Atașamente ---------- */
.dropzone {
  border: 2px dashed var(--border);
  border-radius: var(--radius);
  padding: 18px;
  text-align: center;
  transition: border-color .15s, background-color .15s;
}
.dropzone p { margin: 0 0 4px; }
body.dragging .dropzone { border-color: var(--accent); background: color-mix(in srgb, var(--accent) 10%, transparent); }
.link { color: var(--accent); text-decoration: underline; cursor: pointer; font-weight: 600; font-size: inherit; }
.visually-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.files-msg { margin: 0; font-size: .85rem; color: var(--error); }

.file-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.file-list li {
  display: grid;
  grid-template-columns: 56px 1fr auto;
  align-items: center;
  gap: 10px;
  padding: 6px 8px;
  border: 1px solid var(--border);
  border-radius: 6px;
}
.file-list .thumb {
  width: 56px; height: 42px; object-fit: cover; border-radius: 4px;
  display: grid; place-items: center; background: var(--bg); font-size: .75rem; color: var(--muted);
}
.file-list .name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.file-list .size { color: var(--muted); font-size: .85rem; }

/* ---------- Butoane și mesaje ---------- */
button {
  font: inherit;
  font-weight: 600;
  padding: 10px 18px;
  border: 0;
  border-radius: 6px;
  background: var(--accent);
  color: var(--accent-contrast);
  cursor: pointer;
  justify-self: start;
}
button:disabled { opacity: .6; cursor: progress; }
button.secondary { background: transparent; color: var(--accent); border: 1px solid var(--border); }
button.remove { padding: 4px 10px; background: transparent; color: var(--muted); border: 1px solid var(--border); font-weight: 400; }

.form-error {
  margin: 0;
  padding: 10px 12px;
  border-radius: 6px;
  background: var(--error-bg);
  color: var(--error);
  font-weight: 600;
}
#done { background: var(--card); border: 1px solid var(--border); border-radius: var(--radius); padding: 20px; }
#done h2 { margin-top: 0; }
.actions { display: flex; gap: 10px; flex-wrap: wrap; }
.hp { position: absolute; left: -9999px; }