/*
 * ARBITR RIGHT DRAWER TEMPLATE
 * Canonical contract for every contextual panel in the application.
 * Keep section-specific CSS out of this file unless it extends this contract.
 */

.entity-drawer {
  width: min(440px, calc(100vw - 52px));
  grid-template-rows: auto minmax(0, 1fr) auto;
}

.entity-drawer-header {
  min-height: 54px;
  padding-inline: 16px 12px;
}

.entity-drawer-header strong {
  font-size: 16px;
  line-height: 1.3;
  font-weight: 600;
}

.entity-drawer-body { padding: 12px 14px 20px; }

.entity-overview {
  min-height: 64px;
  padding: 10px 12px;
  display: flex;
  align-items: center;
  gap: 11px;
  color: var(--ui-text);
  background: var(--ui-surface);
  border: 1px solid var(--ui-border);
  border-radius: 8px;
}

.entity-overview > div { min-width: 0; }
.entity-overview small,
.entity-overview strong { display: block; }

.entity-overview small {
  color: var(--ui-text-subtle);
  font-size: 11px;
  line-height: 1.25;
}

.entity-overview strong {
  margin-top: 3px;
  overflow: hidden;
  color: var(--green);
  font-size: 13px;
  line-height: 1.3;
  font-weight: 600;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.entity-overview strong.inactive { color: var(--ui-text-secondary); }

.entity-overview + .entity-property-group,
.entity-overview + .camera-drawer-preview,
.entity-overview + .operation-evidence-group { margin-top: 10px; }

.entity-property-group,
.entity-drawer-form-card,
.operation-review-card,
.operation-download-card,
.drawer-event-log,
.camera-drawer-preview { border-radius: 8px; }

.entity-property-group { padding: 6px 13px; }

.entity-property-group-title {
  padding: 9px 0 7px;
  color: var(--ui-text-subtle);
  font-size: 12px;
  line-height: 1.25;
  font-weight: 600;
  letter-spacing: .035em;
}

.entity-property-row {
  min-height: 42px;
  padding: 9px 0;
  gap: 14px;
  font-size: 13px;
  line-height: 1.35;
}

.entity-property-row > span:first-child {
  flex: 0 0 40%;
  color: var(--ui-text-secondary);
}

.entity-property-row strong {
  max-width: 60%;
  color: var(--ui-text);
  font-size: 13px;
  line-height: 1.35;
  font-weight: 500;
}

.entity-drawer-form-heading {
  min-height: 62px;
  padding: 11px 13px;
}

.entity-drawer-form-heading p {
  margin: 0;
  color: var(--ui-text-secondary);
  font-size: 12px;
  line-height: 1.45;
}

#entity-drawer-form-host .settings-form {
  gap: 13px;
  padding: 13px;
}

#entity-drawer-form-host .field,
#entity-drawer-form-host .toggle {
  font-size: 12px;
  line-height: 1.35;
}

#entity-drawer-form-host .field input,
#entity-drawer-form-host .field select,
#entity-drawer-form-host .field textarea { font-size: 13px; }

#entity-drawer-form-host .user-form-actions,
#entity-drawer-form-host .network-actions {
  width: 100%;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}

#entity-drawer-form-host .user-form-actions[data-action-count="1"],
#entity-drawer-form-host .network-actions[data-action-count="1"] {
  grid-template-columns: minmax(0, 1fr);
}

#entity-drawer-form-host .user-form-actions button,
#entity-drawer-form-host .network-actions button {
  width: 100%;
  min-width: 0;
  min-height: 40px;
  padding-inline: 8px;
  overflow: hidden;
  font-size: 12px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.entity-drawer-actions {
  min-height: 62px;
  padding: 10px 14px;
  display: grid;
  gap: 8px;
}

.entity-drawer-actions[data-action-count="0"] { display: none; }
.entity-drawer-actions[data-action-count="1"] { grid-template-columns: minmax(0, 1fr); }
.entity-drawer-actions[data-action-count="2"] { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.entity-drawer-actions[data-action-count="3"] { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.entity-drawer-actions[data-action-count="4"] { grid-template-columns: repeat(2, minmax(0, 1fr)); }

.entity-drawer-actions button {
  width: 100%;
  min-width: 0;
  min-height: 40px;
  padding-inline: 8px;
  overflow: hidden;
  border-radius: 6px;
  font-size: 12px;
  line-height: 1.2;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.access-card-panel {
  display: grid;
  gap: 14px;
}

.access-card-preview {
  position: relative;
  aspect-ratio: 85.6 / 53.98;
  overflow: hidden;
  border: 1px solid var(--ui-border);
  border-top: 7px solid var(--primary);
  border-radius: 14px;
  background: var(--ui-surface);
  color: var(--ui-text);
}

.access-card-brand {
  position: absolute;
  top: 8%;
  left: 5.5%;
  display: flex;
  align-items: center;
  gap: 8px;
}

.access-card-brand img {
  width: 38px;
  height: 38px;
  object-fit: contain;
  background: #fff;
  border-radius: 8px;
}

.access-card-brand span,
.access-card-name,
.access-card-expiry {
  display: grid;
}

.access-card-brand strong { font-size: 15px; }
.access-card-brand small,
.access-card-name small,
.access-card-expiry small {
  color: var(--ui-text-subtle);
  font-size: 9px;
  letter-spacing: .04em;
}

.access-card-photo {
  position: absolute;
  left: 5%;
  bottom: 9%;
  width: 26.8%;
  height: 55%;
  display: grid;
  place-items: center;
  overflow: hidden;
  border: 1px solid var(--ui-border);
  border-radius: 11px;
  background: var(--ui-surface-soft);
  color: var(--ui-text-subtle);
}

.access-card-photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.access-card-name {
  position: absolute;
  top: 36%;
  left: 36.5%;
  width: 28.5%;
  gap: 4px;
}

.access-card-name strong {
  line-height: 1.04;
  overflow-wrap: anywhere;
  word-break: normal;
  hyphens: none;
  max-height: 3.15em;
  overflow: hidden;
}

.access-card-name strong.name-short { font-size: 16px; }
.access-card-name strong.name-medium { font-size: 14px; }
.access-card-name strong.name-long { font-size: 12px; }

.access-card-expiry {
  position: absolute;
  left: 36.5%;
  bottom: 13%;
  width: 28.5%;
  gap: 3px;
  padding-top: 8px;
  border-top: 1px solid var(--ui-border);
}

.access-card-expiry strong { font-size: 13px; }

.access-card-qr-placeholder {
  position: absolute;
  right: 5%;
  bottom: 9%;
  width: 25.5%;
  aspect-ratio: 1;
  display: grid;
  place-items: center;
  border: 1px solid var(--ui-border);
  border-radius: 11px;
  background: #fff;
  color: #111827;
}

.access-card-qr-placeholder span { font-size: 52px; line-height: 1; }
.access-card-qr-placeholder small { color: #667085; text-align: center; }

.access-card-summary {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1px;
  overflow: hidden;
  border: 1px solid var(--ui-border);
  border-radius: 10px;
  background: var(--ui-border);
}

.access-card-summary div {
  display: grid;
  gap: 4px;
  padding: 12px;
  background: var(--ui-surface);
}

.access-card-summary span,
.access-card-note { color: var(--ui-text-secondary); font-size: 12px; }
.access-card-summary strong.ready { color: var(--success-text); }
.access-card-summary strong.muted { color: var(--ui-text-secondary); }

.access-card-actions {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}

.access-card-actions button {
  min-height: 44px;
  width: 100%;
}

.access-card-note {
  margin: 0;
  line-height: 1.45;
}

@media (max-width: 520px) {
  .access-card-brand img { width: 30px; height: 30px; }
  .access-card-brand strong { font-size: 12px; }
  .access-card-name strong.name-short { font-size: 13px; }
  .access-card-name strong.name-medium { font-size: 11.5px; }
  .access-card-name strong.name-long { font-size: 10px; }
  .access-card-qr-placeholder span { font-size: 38px; }
}

.operation-drawer .entity-drawer-actions .primary-action {
  order: initial;
  margin-right: 0;
}

.operation-review-card {
  gap: 11px;
  padding: 13px;
}

.operation-review-head > strong,
.operation-dispute-summary > strong,
.operation-download-head strong,
.drawer-event-log > summary {
  font-size: 13px;
  line-height: 1.35;
  font-weight: 600;
}

.operation-dispute-summary {
  min-height: 54px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.operation-dispute-summary .secondary-action { min-width: 96px; }

.review-lock-note,
.empty-settings-hint,
.review-download-permission {
  font-size: 12px;
  line-height: 1.4;
}

.review-link-row strong,
.incident-event-row strong {
  font-size: 13px;
  line-height: 1.35;
  font-weight: 550;
}

.review-link-row small,
.incident-event-row small,
.operation-download-head small,
.operation-download-camera small {
  font-size: 11px;
  line-height: 1.4;
}

.drawer-event-log > summary { min-height: 48px; }

.event-log-loading {
  min-height: 64px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  color: var(--ui-text-secondary);
  font-size: 12px;
}

.event-log-loading .preview-spinner {
  width: 20px;
  height: 20px;
  border-width: 2px;
  border-color: var(--ui-border-strong);
  border-top-color: var(--accent-solid);
}

.event-log-retry {
  width: 100%;
  min-height: 38px;
  margin: 10px 0;
}

@media (max-width: 760px) {
  .entity-drawer {
    width: 100vw;
    max-width: 100vw;
  }
}

@media (max-width: 430px) {
  .entity-drawer-actions[data-action-count="3"] {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .entity-drawer-actions[data-action-count="3"] button:first-child {
    grid-column: 1 / -1;
  }

  .entity-property-row > span:first-child { flex-basis: 38%; }
  .entity-property-row strong { max-width: 62%; }
}