* { box-sizing: border-box; }
body { margin: 0; font-family: -apple-system, "Segoe UI", Roboto, Arial, sans-serif; color: #1f2d3d; background: #f4f6f9; }
header {
  background: #1f2d3d; color: #fff; padding: 12px 20px;
  display: flex; align-items: center; gap: 16px; flex-wrap: wrap;
}
header h1 { font-size: 18px; margin: 0; flex: 0 0 auto; }
/* Wrapping matters: five buttons in a nowrap row are ~650px, which pushed the
   whole page wider than a phone screen and squeezed every other element. */
header nav { margin-left: auto; display: flex; gap: 8px; flex-wrap: wrap; }
button {
  border: 0; border-radius: 6px; padding: 8px 14px; font-size: 14px; cursor: pointer;
  background: #e3e8ef; color: #1f2d3d;
}
button.primary { background: #2f80ed; color: #fff; }
button.danger { background: #eb5757; color: #fff; }
button:hover { filter: brightness(0.96); }

main { display: flex; gap: 16px; padding: 16px; align-items: flex-start; }
aside { width: 300px; flex: 0 0 auto; background: #fff; border-radius: 10px; padding: 12px; box-shadow: 0 1px 4px rgba(0,0,0,.06); }
#search { width: 100%; padding: 9px 10px; border: 1px solid #d0d7de; border-radius: 6px; margin-bottom: 10px; }
/* Pagination keeps the list short, so it no longer needs its own scrollbar. */
#clientList { list-style: none; margin: 0; padding: 0; }
#clientList li { padding: 10px; border-radius: 6px; cursor: pointer; border: 1px solid transparent; }
#clientList li:hover { background: #f0f4fa; }
#clientList li.active { background: #e7f0ff; border-color: #b9d4ff; }
#clientList .n { font-weight: 600; }
#clientList .s { font-size: 12px; color: #67707b; }

/* Client list pager */
.pager { display: flex; align-items: center; justify-content: center; gap: 10px; margin-top: 10px; min-height: 24px; }
.pager button { padding: 4px 12px; font-size: 18px; line-height: 1.2; min-width: 40px; }
.pager button[disabled] { opacity: .45; cursor: default; }
.pager .pager-info { font-size: 12px; color: #67707b; white-space: nowrap; }

section#panel { flex: 1; background: #fff; border-radius: 10px; padding: 18px; box-shadow: 0 1px 4px rgba(0,0,0,.06); min-height: 70vh; }
.empty { color: #8a93a0; }

.grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px 16px; }
.grid .wide { grid-column: 1 / -1; }
.field label { display: block; font-size: 12px; color: #67707b; margin-bottom: 3px; }
/* Selects (fields declaring `options` in fields.js) must line up with the text
   inputs beside them — a bare <select> shrink-wraps to its content instead. */
.field input,
.field select {
  width: 100%; padding: 8px 9px; border: 1px solid #d0d7de; border-radius: 6px;
  font: inherit; color: inherit; background: #fff; height: 37px;
}
.field select { appearance: none; -webkit-appearance: none; padding-right: 28px; cursor: pointer; }
/* Chevron drawn with a gradient so no external image is needed under the CSP. */
.field select {
  background-image:
    linear-gradient(45deg, transparent 50%, #67707b 50%),
    linear-gradient(135deg, #67707b 50%, transparent 50%);
  background-position: calc(100% - 15px) 16px, calc(100% - 10px) 16px;
  background-size: 5px 5px, 5px 5px;
  background-repeat: no-repeat;
}
.field select:disabled { background-color: #f6f8fa; cursor: not-allowed; }
.group-title { grid-column: 1 / -1; font-weight: 700; margin: 10px 0 2px; color: #2f80ed; border-bottom: 1px solid #eef1f5; padding-bottom: 4px; }

.section-h { font-size: 15px; margin: 18px 0 8px; }
.templates { display: flex; flex-wrap: wrap; gap: 12px; margin: 6px 0 14px; }
.templates label { display: flex; align-items: center; gap: 6px; background: #f0f4fa; padding: 8px 12px; border-radius: 6px; cursor: pointer; }

.row-actions { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 14px; }

.modal { position: fixed; inset: 0; background: rgba(0,0,0,.5); display: flex; align-items: center; justify-content: center; }
/* Utility, and it must win: #userForm also carries .grid (display:grid), so a
   plain `.hidden { display: none }` would lose to it and the form would never
   actually disappear. */
.hidden { display: none !important; }
.modal-box { background: #fff; border-radius: 10px; padding: 20px; width: min(680px, 92vw); max-height: 88vh; overflow: auto; }
.modal-actions { display: flex; gap: 8px; justify-content: flex-end; margin-top: 14px; }

#usersList { display: grid; gap: 10px; margin-top: 14px; }
.user-row { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 12px 14px; border-radius: 8px; border: 1px solid #e4e9f2; background: #fbfcff; flex-wrap: wrap; }
.user-row strong { font-size: 14px; }
.user-row .role { font-size: 12px; color: #5f7a9d; margin-left: 6px; }
.user-actions { display: flex; gap: 8px; }
.note { margin: 8px 0 0; color: #6b7280; font-size: 13px; }

.toast {
  position: fixed;
  bottom: 18px;
  right: 18px;
  background: rgba(47, 128, 237, 0.95);
  color: #fff;
  padding: 12px 16px;
  border-radius: 10px;
  box-shadow: 0 10px 30px rgba(16, 46, 101, 0.18);
  font-size: 14px;
  z-index: 1000;
  opacity: 0;
  transform: translateY(14px);
  transition: opacity 180ms ease, transform 180ms ease;
}
.toast.show {
  opacity: 1;
  transform: translateY(0);
}
.toast.error { background: rgba(235, 87, 87, 0.95); }

@media (max-width: 720px) {
  main { flex-direction: column; padding: 10px; gap: 10px; }
  aside { width: 100%; }
  .grid { grid-template-columns: 1fr; }

  /* Reclaim horizontal space on a phone. */
  header { padding: 10px 12px; gap: 10px; }
  header h1 { font-size: 16px; }
  header nav { width: 100%; margin-left: 0; }
  /* Buttons share the row evenly instead of overflowing, and are wide enough
     to hit with a thumb. */
  header nav button { flex: 1 1 auto; min-width: 88px; }
  section#panel { padding: 12px; min-height: auto; }
  aside { padding: 10px; }

  /* 44px is the usual minimum comfortable touch target. */
  button { min-height: 44px; padding: 10px 14px; }
  .field input, .field select, #search, .cars-add input { min-height: 44px; }
  /* 16px keeps iOS Safari from zooming in when a field is focused. */
  .field input, .field select, #search, .cars-add input,
  #userForm input, #userForm select, #sellerForm input { font-size: 16px; }

  .pager button { min-height: 44px; }

  .modal { padding: 10px; align-items: flex-start; }
  .modal-box { width: 100%; max-height: 94vh; padding: 16px; }
  .cars-list { max-height: 34vh; }
  .cars-add input { flex: 1 1 60%; }
  .user-actions { width: 100%; }
  .user-actions button { flex: 1 1 auto; }
  .row-actions button { flex: 1 1 auto; }
}

/* Classes replacing inline style="..." attributes: the CSP forbids inline style
   attributes (style-src has no 'unsafe-inline'), so styling must live here. */
.list-empty { cursor: default; }
.hint { color: #8a93a0; }
.user-row button[disabled] { opacity: .5; cursor: not-allowed; }

/* Modal close (X) — top-right of the dialog. */
.modal-box { position: relative; }
.modal-close {
  position: absolute; top: 10px; right: 12px;
  width: 32px; height: 32px; padding: 0;
  border: 1px solid transparent; border-radius: 6px;
  background: transparent; color: #67707b;
  font-size: 26px; line-height: 1; cursor: pointer;
}
.modal-close:hover { background: #f0f2f5; color: #1f2d3d; }
.modal-close:focus-visible { outline: 2px solid #2f80ed; outline-offset: 1px; }
.user-panel-header { padding-right: 40px; }

/* ---- Mașini dashboard: makes on the left, models of the selected make right ---- */
.cars-box { width: min(860px, 94vw); }
.cars-panes { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-top: 14px; }
.cars-pane { min-width: 0; }
.cars-pane-head { display: flex; align-items: center; justify-content: space-between; }
.cars-pane h3 { font-size: 14px; margin: 0 0 8px; color: #2f80ed; }
.cars-add { display: flex; gap: 8px; margin-bottom: 10px; flex-wrap: wrap; }
.cars-add input {
  flex: 1; min-width: 0; padding: 8px 9px; border: 1px solid #d0d7de; border-radius: 6px;
  font: inherit; height: 37px;
}
.cars-list { display: grid; gap: 6px; max-height: 46vh; overflow: auto; }
.car-row {
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
  padding: 8px 10px; border: 1px solid #e4e9f2; border-radius: 8px; background: #fbfcff;
}
.car-row.selected { background: #e7f0ff; border-color: #b9d4ff; }
.car-row .car-name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.car-row.clickable .car-name { cursor: pointer; }
.car-row .count { font-size: 12px; color: #5f7a9d; }
.car-row button { padding: 5px 9px; font-size: 13px; }
.cars-empty { color: #8a93a0; font-size: 13px; padding: 6px 2px; }

@media (max-width: 720px) {
  .cars-panes { grid-template-columns: 1fr; }
}