.customer-tools {
  display: flex;
  gap: 10px;
  align-items: center;
  margin-bottom: 14px;
}
@font-face {
  font-family: "Dubai";
  src: url("assets/fonts/dubai/Dubai-Bold.ttf") format("truetype");
  font-style: normal;
  font-weight: 700;
  font-display: swap;
}
.loyalty-badge { display:inline-flex; align-items:center; align-self:start; gap:6px; padding:6px 10px; border:1px solid currentColor; border-radius:8px; font-family:"Dubai", "Tajawal", sans-serif; font-size:16px; font-weight:700; line-height:1.5; white-space:nowrap; }
.loyalty-badge svg { width:16px; height:16px; fill:none; stroke:currentColor; stroke-width:1.7; stroke-linejoin:round; }
.loyalty-badge .loyalty-medal { width:20px; height:20px; flex-shrink:0; stroke-width:1.3; }
.loyalty-medal .medal-ribbon { fill:currentColor; fill-opacity:.2; }
.loyalty-medal .medal-face { fill:currentColor; fill-opacity:.12; }
.loyalty-medal .medal-mark { fill:currentColor; stroke:none; }
.loyalty-bronze { background:#fff1e5; color:#80431c; }
.loyalty-silver { background:#f0f3f6; color:#4b596b; }
.loyalty-gold { background:#fff6d9; color:#765500; }
.loyalty-platinum { background:#e9f4f6; color:#265e67; }
.customer-loyalty-field select { width:100%; min-height:48px; padding:10px 12px; font:inherit; font-size:16px; color:var(--ink); background:var(--white); border:1px solid var(--line); border-radius:10px; }
.customer-loyalty-field select:focus-visible { outline:3px solid var(--blue); outline-offset:2px; }
.customer-tools label {
  flex: 1;
}
.customer-tools input {
  width: 100%;
  height: 44px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--white);
  padding: 0 13px;
}
.customer-tools button {
  height: 44px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--white);
  padding: 0 15px;
  font-weight: 700;
}
.customer-tools .primary-action {
  background: var(--blue);
  color: var(--white);
  border-color: var(--blue);
}
.customer-notice,
.customer-dialog-notice {
  min-height: 18px;
  margin: 5px 0;
  color: var(--green);
}
.customer-dialog-notice.error,
.form-error {
  color: var(--red);
}
.customer-cards {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
}
.customer-card-container {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  min-height: 0;
  padding: 18px 18px 10px;
  /* Same surface as the car, booking and unit cards: light grey, no border or resting shadow. */
  border: 1px solid transparent;
  border-radius: 20px;
  background: var(--card, #f0f2f5);
  color: var(--ink);
  text-align: start;
  /* Cards rise in one after another; hover lifts the card a little. */
  animation: customer-in 420ms cubic-bezier(.2, .7, .2, 1) backwards; /* not "both": a held end state would block the hover lift */
  animation-delay: calc(min(var(--card-order), 14) * 45ms);
  transition:
    transform 220ms cubic-bezier(.2, .7, .2, 1),
    box-shadow 220ms ease,
    border-color 220ms ease;
}
.customer-card-container:hover,
.customer-card-container:focus-within {
  border-color: var(--card-hover-line);
  box-shadow: var(--card-hover-shadow);
  transform: translateY(-3px);
}
.customer-card-container:has(.customer-card:active) { transform: translateY(-1px) scale(.995); }
.customer-card-rail {
  position: absolute;
  inset-block: 3px;
  inset-inline-start: 0;
  width: 4px;
  border-radius: 4px;
  background: var(--blue);
  clip-path: inset(0 0 calc(100% - 24px) 0 round 4px);
  transition: clip-path 320ms cubic-bezier(.2, .7, .2, 1);
}
.customer-card-container:is(:hover, :focus-within) .customer-card-rail { clip-path: inset(0 round 4px); }
.customer-card {
  position: relative;
  display: flex;
  flex: 1;
  flex-direction: column;
  align-items: stretch;
  min-height: 0;
  padding: 0;
  padding-inline: 16px 36px;
  border: 0;
  background: transparent;
  color: inherit;
  text-align: start;
  font: inherit;
  cursor: pointer;
}
/* "Open" chevron: glides in along the reading direction when the card is hovered or focused. */
.customer-card::after {
  content: "";
  position: absolute;
  inset-block-start: 4px;
  inset-inline-end: 0;
  width: 22px;
  height: 22px;
  background: var(--blue);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m9 5 7 7-7 7'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m9 5 7 7-7 7'/%3E%3C/svg%3E") center / contain no-repeat;
  opacity: 0;
  transform: translateX(-8px);
  transition: opacity 220ms ease, transform 320ms cubic-bezier(.2, .7, .2, 1);
}
[dir="rtl"] .customer-card::after { transform: translateX(8px) scaleX(-1); }
.customer-card-container:is(:hover, :focus-within) .customer-card::after { opacity: 1; transform: none; }
[dir="rtl"] .customer-card-container:is(:hover, :focus-within) .customer-card::after { transform: scaleX(-1); }
/* Touch screens have no hover: keep the chevron visible there, resting and quiet. */
@media (hover: none) { .customer-card::after { opacity: .45; transform: none; } [dir="rtl"] .customer-card::after { transform: scaleX(-1); } }
.customer-card-block {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  flex-shrink: 0;
  padding: 6px;
  border: 1px solid transparent;
  border-radius: 12px;
  background: transparent;
  color: var(--muted);
  font: 700 14px/1.5 var(--body);
  cursor: pointer;
  transition: background-color 160ms ease, color 160ms ease, border-color 160ms ease;
}
.customer-card-block:is(:hover, :focus-visible):not(:disabled) { background: var(--red-soft); border-color: var(--red-line); color: var(--red); }
.customer-card-block:disabled { opacity: 1; color: #6d4141; background: #f4eeee; cursor: default; }
.customer-card-block svg { width: 17px; height: 17px; flex-shrink: 0; fill: none; stroke: currentColor; stroke-width: 1.8; }
.customer-card.needs-review .customer-card-rail {
  background: var(--amber);
}
.customer-card.blacklisted .customer-card-rail {
  background: var(--red);
}
.customer-card-head {
  /* Meta strip under the name: tier on one side, rentals and the block action on the other. */
  order: 2;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
  margin-top: 14px;
  padding-top: 8px;
  border-top: 1px solid var(--line);
}
.customer-card-head > .loyalty-badge { margin-inline-end:auto; }
.customer-badges {
  display: flex;
  justify-content: flex-end;
  gap: 4px;
  flex-wrap: wrap;
}
.customer-connection { display: flex; align-items: center; gap: 6px; }
.customer-card-actions { display: flex; align-items: center; justify-content: center; gap: 8px; }
.customer-rental-count { display: inline-flex; align-items: center; gap: 4px; color: var(--muted); font-size: 13px; font-weight: 700; line-height: 1.4; font-variant-numeric: tabular-nums; }
.customer-rental-count svg { width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.customer-badge {
  display: inline-flex;
  width: max-content;
  border-radius: 999px;
  padding: 3px 7px;
  background: var(--blue-soft);
  color: var(--blue);
  font-size:12px;
  font-weight: 700;
}
.customer-badge.muted {
  background: var(--cloud);
  color: var(--muted);
}
.customer-badge.review {
  background: var(--amber-soft);
  color: var(--amber-ink);
}
.customer-badge.danger {
  background: var(--red-soft);
  color: var(--red);
}
.customer-card > strong {
  font: 700 20px/1.4 var(--display, "Dubai", "Tajawal", sans-serif);
  margin-bottom: 4px;
  overflow-wrap: anywhere;
}
.customer-card > span:not(.customer-card-head) {
  color: var(--muted);
  font-size: 14px;
  margin-top: 2px;
  font-variant-numeric: tabular-nums;
}
.customer-card > .customer-id { font-size: 13px; }
.customer-empty {
  grid-column: 1/-1;
  padding: 30px;
  border: 1px dashed var(--line);
  border-radius: 15px;
  background: var(--white);
  text-align: center;
}
.customer-detail-dialog,
.customer-blacklist-dialog {
  width: min(1120px, calc(100% - 30px));
  max-height: calc(100vh - 30px);
  padding: 0;
  border: 0;
  border-radius: 18px;
  background: var(--cloud);
  color: var(--ink);
  box-shadow: 0 28px 80px rgba(16, 24, 32, 0.28);
}
.customer-detail-dialog::backdrop,
.customer-blacklist-dialog::backdrop {
  background: rgba(16, 24, 32, 0.52);
  backdrop-filter: blur(3px);
}
.customer-detail-shell {
  padding: 20px;
}
.customer-detail-head,
.customer-blacklist-dialog header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
}
.customer-detail-head p,
.customer-blacklist-dialog header p {
  margin: 0;
  color: var(--blue);
  font-size:12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.1em;
}
.customer-detail-head h2,
.customer-blacklist-dialog h2 {
  margin: 2px 0;
  font: 700 34px/1 var(--display);
}
.customer-detail-head > button,
.customer-blacklist-dialog header > button {
  width: 40px;
  height: 40px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--white);
  font-size: 24px;
}
.customer-detail-columns {
  display: grid;
  grid-template-columns: minmax(0, 1.5fr) minmax(260px, 0.75fr);
  gap: 14px;
  margin-top: 12px;
}
.customer-record-form,
.customer-side-panel,
.customer-rentals,
.customer-activity,
.customer-blacklist-dialog form {
  padding: 16px;
  border: 1px solid transparent;
  border-radius: 20px;
  background: var(--card, #f0f2f5);
}
.customer-side-panel + .customer-side-panel {
  margin-top: 14px;
}
.customer-loyalty-summary dl { margin: 0; }
.customer-loyalty-summary dl > div { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding-block: 10px; }
.customer-loyalty-summary dl > div + div { border-top: 1px solid var(--line); }
.customer-loyalty-summary dt { color: var(--muted); }
.customer-loyalty-summary dd { margin: 0; min-width: 0; overflow-wrap: anywhere; }
.customer-loyalty-points { color: var(--blue); font-size: 30px; font-weight: 700; font-variant-numeric: tabular-nums; line-height: 1.25; }
.customer-record-form h3,
.customer-side-panel h3,
.customer-rentals h3,
.customer-activity h3 {
  margin: 0 0 13px;
}
.customer-form-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 11px;
}
.customer-form-grid label,
.customer-side-panel label {
  display: flex;
  flex-direction: column;
  gap: 5px;
  color: var(--muted);
  font-size:12px;
  font-weight: 700;
}
.customer-form-grid .wide {
  grid-column: 1/-1;
}
.customer-form-grid input,
.customer-form-grid textarea,
.customer-side-panel input {
  padding: 10px;
  border: 1px solid var(--line);
  border-radius: 9px;
  background: var(--white);
  color: var(--ink);
  font: inherit;
  font-size: 16px;
  font-weight: 500;
  line-height: 1.5;
  min-width: 0;
  width: 100%;
}
.customer-phone-input { display: grid; grid-template-columns: 36px minmax(0, 1fr); align-items: center; gap: 8px; min-width: 0; }
.customer-phone-call { display: inline-flex; align-items: center; justify-content: center; width: 36px; height: 36px; box-sizing: border-box; border: 1px solid var(--line); border-radius: 7px; color: var(--blue); text-decoration: none; cursor: pointer; }
.customer-phone-call:hover { background: var(--blue-soft); }
.customer-phone-call:focus-visible { outline: 2px solid var(--blue); outline-offset: 1px; }
.customer-phone-call[aria-disabled="true"] { color: var(--control-border); background: transparent; cursor: not-allowed; }
.customer-phone-input svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; pointer-events: none; }
.customer-record-form .primary-action,
.customer-side-panel .primary-action {
  padding: 10px 14px;
  border: 0;
  border-radius: 9px;
  background: var(--blue);
  color: var(--white);
  font-weight: 700;
}
.field-help,
.warning-copy {
  color: var(--muted);
  font-size: 12px;
  line-height: 1.5;
}
.warning-copy {
  padding: 10px;
  border-inline-start: 3px solid var(--amber);
  background: var(--amber-soft);
}
.blacklist-entry {
  padding: 10px 0;
  border-top: 1px solid var(--line);
}
.blacklist-entry p {
  margin: 4px 0;
  color: var(--muted);
}
.customer-side-panel button {
  padding: 6px 9px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--white);
}
.customer-rentals,
.customer-activity {
  margin-top: 14px;
}
.customer-table-wrap {
  overflow: auto;
}
.customer-table-wrap table {
  width: 100%;
  min-width: 760px;
  border-collapse: collapse;
}
.customer-table-wrap th,
.customer-table-wrap td {
  padding: 10px;
  border-bottom: 1px solid var(--line);
  text-align: start;
  vertical-align: top;
}
.customer-table-wrap th {
  color: var(--muted);
  font-size:12px;
  text-transform: uppercase;
}
.customer-rentals td,
.customer-rentals td .customer-badge {
  font-size: 12px;
}
.review-actions {
  display: flex;
  gap: 4px;
  margin-top: 6px;
}
.review-actions button {
  padding: 4px;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: var(--white);
}
.customer-activity ol {
  list-style: none;
  padding: 0;
  margin: 0;
}
.customer-activity li {
  display: grid;
  grid-template-columns: 1fr 2fr auto;
  gap: 10px;
  padding: 9px 0;
  border-bottom: 1px solid var(--line);
}
.customer-activity li p {
  margin: 0;
  color: var(--muted);
}
.customer-activity time {
  color: var(--muted);
  font-size:12px;
}
.customer-blacklist-dialog {
  width: min(640px, calc(100% - 30px));
}
.customer-blacklist-dialog form {
  margin: 0;
  border: 0;
}
.customer-blacklist-dialog .modal-actions {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  margin-top: 12px;
}
.customer-dialog-loading,
.customer-dialog-error {
  padding: 30px;
}
.access-administration {
  margin-top: 18px;
  overflow: hidden;
}
.access-administration > summary {
  padding: 14px;
  cursor: pointer;
  font-weight: 700;
}
.access-administration[open] > summary {
  border-bottom: 1px solid var(--line);
}
@keyframes customer-in {
  from {
    opacity: 0;
    transform: translateY(14px) scale(.985);
  }
  to {
    opacity: 1;
    transform: none;
  }
}
@media (max-width: 1050px) {
  .customer-cards {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
@media (max-width: 760px) {
  .customer-tools {
    flex-wrap: wrap;
    align-items: stretch;
  }
  .customer-tools label {
    flex-basis: 100%;
  }
  .customer-cards {
    grid-template-columns: 1fr;
  }
  .customer-detail-columns,
  .customer-form-grid {
    grid-template-columns: 1fr;
  }
  .customer-form-grid .wide {
    grid-column: auto;
  }
  .customer-activity li {
    grid-template-columns: 1fr;
  }
  .customer-detail-dialog {
    width: 100%;
    max-width: 100%;
    height: 100dvh;
    max-height: 100dvh;
    overscroll-behavior: contain;
    margin: 0;
    border-radius: 0;
  }
  .customer-tools input { font-size: 16px; min-height: 48px; }
  .customer-tools label { min-width: 0; }
  .customer-tools > button { flex: 1 1 120px; min-height: 48px; font-size: 14px; }
  .customer-card-container { padding: 16px 16px 8px; }
  .customer-card-container:hover { transform: none; }
  .customer-card > strong { overflow-wrap: anywhere; }
  .customer-card-block { width: 44px; height: 44px; }
  .customer-detail-shell { padding: 12px; padding-bottom: max(16px, env(safe-area-inset-bottom)); }
  .customer-detail-head { position: sticky; top: 0; z-index: 2; gap: 12px; padding-block: 12px; background: var(--cloud); border-bottom: 1px solid var(--line); }
  .customer-detail-head > div { min-width: 0; }
  .customer-detail-head h2, .customer-blacklist-dialog h2 { font-size: 26px; line-height: 1.3; overflow-wrap: anywhere; }
  .customer-detail-head > button, .customer-blacklist-dialog header > button { width: 44px; height: 44px; flex-shrink: 0; }
  .customer-record-form, .customer-side-panel, .customer-rentals, .customer-activity, .customer-blacklist-dialog form { min-width: 0; padding: 14px; }
  .customer-detail-columns { grid-template-columns: minmax(0, 1fr); }
  .customer-detail-columns > div, .customer-detail-columns > aside { min-width: 0; }
  .customer-form-grid { grid-template-columns: minmax(0, 1fr); }
  .customer-form-grid label, .customer-side-panel label { min-width: 0; font-size: 13px; }
  .customer-form-grid input, .customer-side-panel input { min-height: 48px; }
  .customer-form-grid textarea { min-height: 96px; }
  .customer-phone-input { grid-template-columns: 44px minmax(0, 1fr); }
  .customer-phone-call { width: 44px; height: 44px; }
  .customer-record-form .primary-action, .customer-side-panel button, .customer-blacklist-dialog .modal-actions > button { min-height: 44px; height: auto; font-size: 14px; }
  .customer-record-form .primary-action, .customer-side-panel .primary-action { width: 100%; }
  .customer-table-wrap { max-width: 100%; overscroll-behavior-x: contain; }
  .customer-table-wrap th { font-size: 12px; }
  .customer-table-wrap td { font-size: 14px; }
  .customer-rentals td { font-size: 16px; }
  .customer-table-wrap a, .review-actions button { display: inline-flex; align-items: center; min-height: 44px; padding: 8px; }
  .customer-blacklist-dialog { max-width: 100%; width: calc(100% - 16px); max-height: calc(100dvh - 16px); }
  .customer-blacklist-dialog header { gap: 12px; }
  .customer-blacklist-dialog .modal-actions { flex-wrap: wrap; }
}
@media (prefers-reduced-motion: reduce) {
  .customer-card-container {
    animation: none;
    transition: none;
  }
}

/* Blacklist page inside the admin shell. */
.blacklist-page-header { display:flex; align-items:center; justify-content:space-between; gap:1rem; margin-bottom:1.25rem; }
.blacklist-page-header h2 { margin:0; }
.blacklist-page-layout { display:grid; grid-template-columns:minmax(0,1.2fr) minmax(0,1fr); align-items:start; gap:1.25rem; }
.blacklist-page-list,.blacklist-page-add { min-width:0; background:var(--surface,#122c5e); border:1px solid var(--border,#294b88); border-radius:20px; padding:1.25rem; }
.blacklist-page-list h3,.blacklist-page-add h3 { margin:0 0 1rem; }
.blacklist-count { color:var(--accent,#fbc513); font-size:.9em; }
.blacklist-page-entry { padding:1rem 0; border-top:1px solid var(--border,#294b88); }
.blacklist-person { display:grid; gap:.35rem; overflow-wrap:anywhere; }
.blacklist-person span,.blacklist-selection > span { color:var(--muted,#b9c9e8); font-size:.9rem; }
.blacklist-reason { white-space:pre-wrap; overflow-wrap:anywhere; margin:.75rem 0; }
.blacklist-page-add label,.blacklist-page-entry label { display:grid; gap:.5rem; margin:.9rem 0 .5rem; }
.blacklist-page-add input,.blacklist-page-add textarea,.blacklist-page-entry textarea { width:100%; box-sizing:border-box; }
.blacklist-page-add textarea,.blacklist-page-entry textarea { min-height:5.5rem; }
.blacklist-page-add > .primary-action { margin-top:1rem; }
.blacklist-customer-results { list-style:none; margin:.6rem 0 1rem; padding:0; max-height:19rem; overflow:auto; }
.blacklist-customer-results button { display:grid; width:100%; text-align:start; gap:.3rem; padding:.75rem; margin-bottom:.4rem; border-radius:12px; min-height:44px; overflow-wrap:anywhere; }
.blacklist-customer-results button span { font-size:.85rem; color:var(--muted,#b9c9e8); }
.blacklist-customer-results button:disabled { opacity:.55; }
.blacklist-selection { padding:1rem; border:1px solid var(--border,#294b88); border-radius:12px; display:grid; gap:.65rem; }
.blacklist-selection button { justify-self:start; }
@media(max-width:900px) { .blacklist-page-layout { grid-template-columns:1fr; } .blacklist-page-header { flex-wrap:wrap; } }
:root .blacklist-page button { font:inherit; font-weight:700; color:var(--on-dark); background:var(--card-raised); border:1px solid var(--line); border-radius:12px; padding:.65rem .9rem; min-height:44px; cursor:pointer; }
:root .blacklist-page button:hover:not(:disabled) { border-color:var(--accent); }
:root .blacklist-page button:disabled { cursor:default; }
:root .blacklist-page button.primary-action { background:var(--accent); color:var(--on-accent); border-color:var(--accent); }
:root .blacklist-page :is(input,textarea) { font:inherit; color:#172438; background:#f5f8ff; border:1px solid #aabbd6; border-radius:12px; padding:.75rem; min-height:46px; }
:root .blacklist-page :is(button,input,textarea):focus-visible { outline:2px solid var(--accent); outline-offset:3px; }
.blacklist-page-list,.blacklist-page-add { background:var(--card); border-color:var(--line); }
.blacklist-customer-results { max-height:14rem; }
.blacklist-page .form-error { color:var(--danger-ink); }
.blacklist-page > .customer-notice:empty { display:none; }