.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-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:#fff; border:1px solid var(--line); border-radius:10px; }
.customer-loyalty-field select:focus-visible { outline:3px solid #9dbcfb; outline-offset:2px; }
.customer-tools label {
  flex: 1;
}
.customer-tools input {
  width: 100%;
  height: 44px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: #fff;
  padding: 0 13px;
}
.customer-tools button {
  height: 44px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: #fff;
  padding: 0 15px;
  font-weight: 700;
}
.customer-tools .primary-action {
  background: #0057ff;
  color: #fff;
  border-color: #0057ff;
}
.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: 16px;
  border: 1px solid var(--line);
  border-radius: 15px;
  background: #fff;
  color: var(--ink);
  text-align: start;
  overflow: hidden;
  box-shadow: 0 2px 7px rgba(16, 24, 32, 0.04);
  animation: customer-in 160ms ease both;
  animation-delay: calc(var(--card-order) * 18ms);
  transition:
    transform 150ms,
    box-shadow 150ms,
    border-color 150ms;
}
.customer-card-container:hover,
.customer-card-container:focus-within {
  transform: translateY(-2px);
  border-color: #8db2ff;
  box-shadow: 0 9px 24px rgba(16, 24, 32, 0.09);
}
.customer-card-rail {
  position: absolute;
  inset-block: 0;
  inset-inline-start: 0;
  width: 4px;
  background: #0057ff;
}
.customer-card {
  display: flex;
  flex: 1;
  flex-direction: column;
  align-items: stretch;
  min-height: 0;
  padding: 0;
  border: 0;
  background: transparent;
  color: inherit;
  text-align: start;
  font: inherit;
}
.customer-card-block {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  flex-shrink: 0;
  padding: 6px;
  border: 1px solid #f0c8c8;
  border-radius: 10px;
  background: #fff5f5;
  color: #a4262c;
  font: 700 14px/1.5 var(--body);
}
.customer-card-block:hover:not(:disabled) { background: #ffe7e7; border-color: #d89090; }
.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: #996000;
}
.customer-card.blacklisted .customer-card-rail {
  background: var(--red);
}
.customer-card-head {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 8px;
  margin-bottom: 18px;
}
.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; flex-direction: column; 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: #53606d; 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: #e8f6f0;
  color: #0057ff;
  font-size: 10px;
  font-weight: 700;
}
.customer-badge.muted {
  background: #eef0f3;
  color: #53606d;
}
.customer-badge.review {
  background: #fff2cc;
  color: #765000;
}
.customer-badge.danger {
  background: #ffe8e5;
  color: #922b23;
}
.customer-card > strong {
  font-size: 17px;
  margin-bottom: 7px;
}
.customer-card > span:not(.customer-card-head) {
  color: #53606d;
  font-size: 13px;
  margin-top: 4px;
  font-variant-numeric: tabular-nums;
}
.customer-empty {
  grid-column: 1/-1;
  padding: 30px;
  border: 1px dashed #ccd3dc;
  border-radius: 15px;
  background: #fff;
  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: #0057ff;
  font-size: 10px;
  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: #fff;
  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 var(--line);
  border-radius: 14px;
  background: #fff;
}
.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: #53606d;
  font-size: 11px;
  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 #ccd3dc;
  border-radius: 9px;
  background: #fff;
  color: var(--ink);
  font: inherit;
  font-size: 16px;
  font-weight: 500;
  line-height: 1.5;
  min-width: 0;
  width: 100%;
}
.customer-phone-input { position: relative; display: block; min-width: 0; }
.customer-phone-call { position: absolute; inset-inline-start: 4px; top: 50%; transform: translateY(-50%); display: inline-flex; align-items: center; justify-content: center; width: 36px; height: 36px; border-radius: 7px; color: #0057ff; text-decoration: none; cursor: pointer; }
.customer-phone-call:hover { background: #edf3ff; }
.customer-phone-call:focus-visible { outline: 2px solid #0057ff; outline-offset: 1px; }
.customer-phone-call[aria-disabled="true"] { color: #87909b; 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-form-grid .customer-phone-input input { padding-inline-start: 46px; }
.customer-record-form .primary-action,
.customer-side-panel .primary-action {
  padding: 10px 14px;
  border: 0;
  border-radius: 9px;
  background: #0057ff;
  color: #fff;
  font-weight: 700;
}
.field-help,
.warning-copy {
  color: #53606d;
  font-size: 12px;
  line-height: 1.5;
}
.warning-copy {
  padding: 10px;
  border-inline-start: 3px solid #996000;
  background: #fff5d8;
}
.blacklist-entry {
  padding: 10px 0;
  border-top: 1px solid #e5e8ec;
}
.blacklist-entry p {
  margin: 4px 0;
  color: #53606d;
}
.customer-side-panel button {
  padding: 6px 9px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fff;
}
.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 #e7eaee;
  text-align: start;
  vertical-align: top;
}
.customer-table-wrap th {
  color: #53606d;
  font-size: 10px;
  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: #fff;
}
.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 #e7eaee;
}
.customer-activity li p {
  margin: 0;
  color: #53606d;
}
.customer-activity time {
  color: #53606d;
  font-size: 11px;
}
.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(6px);
  }
  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: 14px; }
  .customer-card-container:hover { transform: none; }
  .customer-card-head { margin-bottom: 10px; }
  .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-call { width: 44px; height: 44px; inset-inline-start: 2px; }
  .customer-form-grid .customer-phone-input input { padding-inline-start: 50px; }
  .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;
  }
}