
/* =========================================================
   SAFARI / WEBKIT HIDDEN STATE
   Keep JavaScript-driven hidden elements truly hidden even
   when component classes define their own display property.
   ========================================================= */

[hidden] {
  display: none !important;
}

/* =========================================================
   CREASIONES NERYS — ADMIN UI V15.3
   Clean desktop-first workspace with calm spacing and minimal clutter.
   ========================================================= */

:root {
  --admin-brand: #39d1e1;
  --admin-brand-dark: #0b7e89;
  --admin-brand-deep: #075f67;
  --admin-ink: #14383c;
  --admin-text: #38575b;
  --admin-muted: #70878a;
  --admin-line: #dcebed;
  --admin-soft: #f2fafb;
  --admin-page: #f7fbfc;
  --admin-card: #ffffff;
  --admin-danger: #b53a4b;
  --admin-warning: #9a6b12;
  --admin-success: #22785b;
  --admin-shadow: 0 18px 50px rgba(21, 77, 83, 0.08);
  --admin-radius: 22px;
  --admin-radius-small: 14px;
}

* {
  box-sizing: border-box;
}

html {
  min-height: 100%;
}

body {
  min-height: 100vh;
  margin: 0;
  background: var(--admin-page);
  color: var(--admin-ink);
  font-family:
    -apple-system,
    BlinkMacSystemFont,
    "Segoe UI",
    sans-serif;
}

button,
input,
select {
  font: inherit;
}

button,
a {
  -webkit-tap-highlight-color: transparent;
}


/* MARK: Shared Brand */

.admin-brand {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  color: inherit;
  text-decoration: none;
}

.admin-brand img {
  width: 46px;
  height: 46px;
  object-fit: contain;
}

.admin-brand-copy {
  display: grid;
  gap: 2px;
}

.admin-brand-copy strong {
  color: var(--admin-brand-deep);
  font-size: 15px;
}

.admin-brand-copy small {
  color: var(--admin-muted);
  font-size: 11px;
}

.admin-eyebrow {
  color: var(--admin-brand-dark);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.13em;
  text-transform: uppercase;
}


/* =========================================================
   LOGIN
   ========================================================= */

.admin-login-page {
  display: grid;
  place-items: center;
  padding: 28px;
  background:
    radial-gradient(
      circle at 10% 20%,
      rgba(57, 209, 225, 0.17),
      transparent 31%
    ),
    radial-gradient(
      circle at 90% 80%,
      rgba(57, 209, 225, 0.09),
      transparent 28%
    ),
    var(--admin-page);
}

.admin-login-shell {
  width: min(100%, 470px);
}

.admin-login-brand {
  justify-content: center;
  width: 100%;
  margin-bottom: 22px;
}

.admin-login-card {
  padding: 36px;
  border: 1px solid var(--admin-line);
  border-radius: 28px;
  background: rgba(255, 255, 255, 0.97);
  box-shadow: var(--admin-shadow);
}

.admin-login-heading {
  margin-bottom: 26px;
  text-align: center;
}

.admin-login-heading h1 {
  margin: 8px 0 8px;
  font-size: clamp(28px, 4vw, 36px);
  line-height: 1.05;
}

.admin-login-heading p {
  margin: 0;
  color: var(--admin-text);
  font-size: 14px;
  line-height: 1.55;
}

.admin-form {
  display: grid;
  gap: 17px;
}

.admin-field {
  display: grid;
  gap: 7px;
}

.admin-field span {
  color: var(--admin-ink);
  font-size: 13px;
  font-weight: 700;
}

.admin-field input {
  width: 100%;
  height: 52px;
  padding: 0 15px;
  border: 1px solid #cfe2e5;
  border-radius: var(--admin-radius-small);
  outline: none;
  background: #fbfefe;
  color: var(--admin-ink);
  transition:
    border-color 160ms ease,
    box-shadow 160ms ease;
}

.admin-field input:focus {
  border-color: var(--admin-brand);
  box-shadow: 0 0 0 4px rgba(57, 209, 225, 0.13);
}

.admin-primary-button {
  min-height: 52px;
  border: 0;
  border-radius: var(--admin-radius-small);
  background: var(--admin-brand);
  color: #063e44;
  font-weight: 800;
  cursor: pointer;
  transition:
    transform 140ms ease,
    opacity 140ms ease;
}

.admin-primary-button:hover {
  transform: translateY(-1px);
}

.admin-primary-button:disabled {
  cursor: wait;
  opacity: 0.6;
}

.admin-text-button {
  justify-self: center;
  padding: 6px 10px;
  border: 0;
  background: transparent;
  color: var(--admin-brand-deep);
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
}

.admin-form-status {
  min-height: 22px;
  margin: 0;
  color: var(--admin-text);
  font-size: 13px;
  line-height: 1.45;
  text-align: center;
}

.admin-form-status[data-type="error"] {
  color: var(--admin-danger);
}

.admin-form-status[data-type="success"] {
  color: var(--admin-success);
}

.admin-form-status[data-type="working"] {
  color: var(--admin-brand-dark);
}

.admin-login-note {
  display: flex;
  gap: 9px;
  align-items: flex-start;
  margin-top: 24px;
  padding: 14px 16px;
  border-radius: var(--admin-radius-small);
  background: var(--admin-soft);
  color: var(--admin-text);
  font-size: 12px;
  line-height: 1.5;
}

.admin-login-note strong {
  color: var(--admin-brand-deep);
}


/* =========================================================
   LOADING
   ========================================================= */

.admin-loading {
  display: grid;
  min-height: 100vh;
  place-items: center;
  padding: 28px;
}

.admin-loading-card {
  display: grid;
  width: min(100%, 390px);
  gap: 8px;
  padding: 28px;
  border: 1px solid var(--admin-line);
  border-radius: var(--admin-radius);
  background: var(--admin-card);
  box-shadow: var(--admin-shadow);
  text-align: center;
}

.admin-loading-card span {
  color: var(--admin-text);
  font-size: 13px;
}

.admin-loading-card a {
  margin-top: 10px;
  color: var(--admin-brand-deep);
  font-weight: 700;
}


/* =========================================================
   DASHBOARD LAYOUT
   ========================================================= */

.admin-app {
  min-height: 100vh;
}

.admin-layout {
  display: grid;
  min-height: 100vh;
  grid-template-columns: 236px minmax(0, 1fr);
}

.admin-sidebar {
  position: sticky;
  top: 0;
  height: 100vh;
  padding: 24px 18px;
  border-right: 1px solid var(--admin-line);
  background: #ffffff;
}

.admin-sidebar-inner {
  display: flex;
  height: 100%;
  flex-direction: column;
}

.admin-sidebar .admin-brand {
  padding: 0 8px 22px;
}

.admin-nav {
  display: grid;
  gap: 6px;
  margin-top: 8px;
}

.admin-nav-link {
  display: flex;
  min-height: 46px;
  align-items: center;
  gap: 11px;
  padding: 0 13px;
  border-radius: 13px;
  color: var(--admin-text);
  font-size: 14px;
  font-weight: 700;
  text-decoration: none;
}

.admin-nav-link:hover {
  background: var(--admin-soft);
}

.admin-nav-link.is-active {
  background: rgba(57, 209, 225, 0.15);
  color: var(--admin-brand-deep);
}

.admin-nav-icon {
  width: 22px;
  text-align: center;
}

.admin-sidebar-bottom {
  display: grid;
  gap: 10px;
  margin-top: auto;
  padding: 16px 8px 0;
  border-top: 1px solid var(--admin-line);
}

.admin-admin-name {
  display: grid;
  gap: 2px;
}

.admin-admin-name strong {
  font-size: 13px;
}

.admin-admin-name span {
  overflow: hidden;
  color: var(--admin-muted);
  font-size: 11px;
  text-overflow: ellipsis;
}

.admin-signout {
  width: fit-content;
  padding: 6px 0;
  border: 0;
  background: transparent;
  color: var(--admin-brand-deep);
  font-size: 12px;
  font-weight: 800;
  cursor: pointer;
}

.admin-main {
  min-width: 0;
  padding: 26px clamp(20px, 3vw, 42px) 46px;
}

.admin-topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  margin-bottom: 30px;
}

.admin-topbar-copy h1 {
  margin: 5px 0 4px;
  font-size: clamp(28px, 4vw, 40px);
  line-height: 1;
}

.admin-topbar-copy p {
  margin: 0;
  color: var(--admin-text);
  font-size: 14px;
}

.live-indicator {
  display: inline-flex;
  min-height: 34px;
  align-items: center;
  gap: 8px;
  padding: 0 12px;
  border: 1px solid var(--admin-line);
  border-radius: 999px;
  background: #fff;
  color: var(--admin-text);
  font-size: 12px;
  font-weight: 800;
}

.live-indicator::before {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #a4b7ba;
  content: "";
}

.live-indicator[data-state="live"]::before {
  background: #33a675;
}

.live-indicator[data-state="working"]::before {
  background: #d7a437;
}

.live-indicator[data-state="error"]::before {
  background: #c94a5c;
}

.admin-menu-button {
  display: none;
  width: 42px;
  height: 42px;
  border: 1px solid var(--admin-line);
  border-radius: 12px;
  background: #fff;
  color: var(--admin-ink);
  cursor: pointer;
}


/* =========================================================
   SUMMARY
   ========================================================= */

.summary-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 14px;
}

.summary-card {
  display: grid;
  min-height: 128px;
  align-content: space-between;
  padding: 20px;
  border: 1px solid var(--admin-line);
  border-radius: var(--admin-radius);
  background: var(--admin-card);
  box-shadow: 0 8px 28px rgba(23, 86, 92, 0.035);
}

.summary-card span {
  color: var(--admin-text);
  font-size: 12px;
  font-weight: 700;
}

.summary-card strong {
  font-size: 34px;
  line-height: 1;
}

.summary-card small {
  color: var(--admin-muted);
  font-size: 11px;
}


/* =========================================================
   REQUESTS
   ========================================================= */

.requests-section {
  margin-top: 28px;
  padding: 23px;
  border: 1px solid var(--admin-line);
  border-radius: var(--admin-radius);
  background: var(--admin-card);
  box-shadow: 0 8px 28px rgba(23, 86, 92, 0.035);
}

.section-heading {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 18px;
  margin-bottom: 19px;
}

.section-heading h2 {
  margin: 0 0 4px;
  font-size: 20px;
}

.section-heading p {
  margin: 0;
  color: var(--admin-muted);
  font-size: 12px;
}

.request-tools {
  display: flex;
  gap: 10px;
}

.request-search {
  width: min(280px, 35vw);
  height: 42px;
  padding: 0 13px;
  border: 1px solid var(--admin-line);
  border-radius: 12px;
  outline: none;
  background: #fbfefe;
  color: var(--admin-ink);
}

.request-filter {
  height: 42px;
  padding: 0 12px;
  border: 1px solid var(--admin-line);
  border-radius: 12px;
  outline: none;
  background: #fff;
  color: var(--admin-ink);
}

.request-search:focus,
.request-filter:focus {
  border-color: var(--admin-brand);
  box-shadow: 0 0 0 3px rgba(57, 209, 225, 0.11);
}

.request-list {
  display: grid;
  gap: 9px;
}

.request-card {
  display: grid;
  width: 100%;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 20px;
  padding: 17px 17px;
  border: 1px solid transparent;
  border-radius: 16px;
  background: var(--admin-soft);
  color: inherit;
  text-align: left;
  cursor: pointer;
  transition:
    border-color 140ms ease,
    background 140ms ease,
    transform 140ms ease;
}

.request-card:hover {
  border-color: #c9e6e9;
  background: #f7fcfd;
  transform: translateY(-1px);
}

.request-card-main {
  display: grid;
  min-width: 0;
  gap: 7px;
}

.request-card-title-row {
  display: flex;
  min-width: 0;
  align-items: center;
  gap: 10px;
}

.request-card-title-row strong {
  overflow: hidden;
  font-size: 14px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.request-card-event {
  display: flex;
  gap: 6px;
  color: var(--admin-text);
  font-size: 12px;
}

.request-card-services,
.detail-chip-row {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
}

.admin-chip {
  display: inline-flex;
  min-height: 25px;
  align-items: center;
  padding: 0 9px;
  border: 1px solid #cdebed;
  border-radius: 999px;
  background: #fff;
  color: var(--admin-brand-deep);
  font-size: 10px;
  font-weight: 800;
}

.admin-chip-muted {
  color: var(--admin-muted);
}

.request-card-meta {
  display: flex;
  align-items: center;
  gap: 13px;
  color: var(--admin-muted);
  font-size: 11px;
}

.request-card-arrow {
  color: var(--admin-brand-dark);
  font-size: 26px;
  line-height: 1;
}

.status-pill {
  display: inline-flex;
  min-height: 25px;
  flex: none;
  align-items: center;
  padding: 0 9px;
  border-radius: 999px;
  background: #e9f3f4;
  color: #4d6e72;
  font-size: 9px;
  font-weight: 900;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

.status-pill.is-new {
  background: #dcf7fa;
  color: #087783;
}

.status-pill.is-review {
  background: #fff1d6;
  color: #8b6011;
}

.status-pill.is-waiting {
  background: #edf0ff;
  color: #5360a0;
}

.status-pill.is-complete {
  background: #e0f4e9;
  color: #267157;
}

.status-pill.is-cancelled {
  background: #f9e5e9;
  color: #a04251;
}

.request-empty {
  padding: 40px 20px;
  color: var(--admin-muted);
  font-size: 13px;
  text-align: center;
}

.dashboard-error {
  display: grid;
  gap: 5px;
  padding: 24px;
  border-radius: 15px;
  background: #fff1f3;
  color: var(--admin-danger);
}

.dashboard-error span {
  font-size: 12px;
}


/* =========================================================
   DETAIL DIALOG
   ========================================================= */

.request-detail-dialog {
  width: min(920px, calc(100vw - 32px));
  max-height: min(88vh, 920px);
  padding: 0;
  border: 0;
  border-radius: 25px;
  background: var(--admin-card);
  box-shadow: 0 28px 90px rgba(17, 59, 64, 0.22);
}

.request-detail-dialog::backdrop {
  background: rgba(8, 35, 39, 0.43);
  backdrop-filter: blur(4px);
}

.request-detail-toolbar {
  position: sticky;
  z-index: 2;
  top: 0;
  display: flex;
  justify-content: flex-end;
  padding: 12px 15px 0;
  background: linear-gradient(#fff 80%, rgba(255,255,255,0));
}

.request-detail-close {
  display: grid;
  width: 40px;
  height: 40px;
  place-items: center;
  border: 1px solid var(--admin-line);
  border-radius: 50%;
  background: #fff;
  color: var(--admin-ink);
  font-size: 22px;
  cursor: pointer;
}

.request-detail-content {
  padding: 0 26px 28px;
}

.request-detail-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 18px;
  padding: 4px 4px 22px;
}

.request-detail-header h2 {
  margin: 6px 0 5px;
  font-size: 28px;
}

.request-detail-header p {
  margin: 0;
  color: var(--admin-text);
  font-size: 13px;
}

.request-id {
  max-width: 210px;
  overflow: hidden;
  padding: 7px 9px;
  border-radius: 9px;
  background: var(--admin-soft);
  color: var(--admin-muted);
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 9px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.detail-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 13px;
}

.detail-card {
  min-width: 0;
  padding: 18px;
  border: 1px solid var(--admin-line);
  border-radius: 17px;
  background: #fbfefe;
}

.detail-card-wide {
  grid-column: 1 / -1;
}

.detail-card h3 {
  margin: 0 0 13px;
  font-size: 14px;
}

.detail-card-heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.detail-card-heading span {
  color: var(--admin-muted);
  font-size: 11px;
}

.detail-list {
  display: grid;
  gap: 10px;
  margin: 0;
}

.detail-list > div {
  display: grid;
  gap: 2px;
}

.detail-list dt {
  color: var(--admin-muted);
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.detail-list dd {
  margin: 0;
  overflow-wrap: anywhere;
  color: var(--admin-ink);
  font-size: 12px;
  line-height: 1.4;
}

.detail-list-compact {
  margin-top: 13px;
}

.service-answer-details {
  margin-top: 15px;
  padding-top: 13px;
  border-top: 1px solid var(--admin-line);
}

.service-answer-details summary {
  color: var(--admin-brand-deep);
  font-size: 12px;
  font-weight: 800;
  cursor: pointer;
}

.photo-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 9px;
}

.photo-card {
  display: grid;
  grid-template-rows: minmax(135px, 1fr) auto;
  overflow: hidden;
  min-height: 135px;
  border: 1px solid var(--admin-line);
  border-radius: 13px;
  background: #fff;
  color: inherit;
}

.photo-preview-button {
  position: relative;
  display: block;
  width: 100%;
  min-width: 0;
  min-height: 135px;
  padding: 0;
  overflow: hidden;
  border: 0;
  background: var(--admin-soft);
  color: inherit;
  font: inherit;
  text-align: left;
  cursor: zoom-in;
}

.photo-preview-button:focus-visible {
  z-index: 1;
  outline: 3px solid #075f67;
  outline-offset: -3px;
  box-shadow: inset 0 0 0 5px #fff;
}

.photo-preview-button.is-preview-unavailable {
  cursor: pointer;
}

.photo-card-media {
  display: block;
  min-height: 135px;
}

.photo-card img {
  display: block;
  width: 100%;
  height: 135px;
  object-fit: cover;
}

.photo-card-label {
  position: absolute;
  right: 7px;
  bottom: 7px;
  left: 7px;
  overflow: hidden;
  padding: 6px 7px;
  border-radius: 8px;
  background: rgba(255,255,255,0.96);
  color: #074f57;
  font-size: 11px;
  font-weight: 800;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.photo-card-fallback {
  display: grid;
  min-height: 135px;
  padding: 16px;
  place-content: center;
  gap: 5px;
  color: #365b60;
  text-align: center;
}

.photo-card-fallback[hidden],
.photo-card img[hidden] {
  display: none;
}

.photo-card-fallback strong {
  color: #14383c;
  font-size: 13px;
}

.photo-card-fallback small {
  overflow-wrap: anywhere;
  color: #365b60;
  font-size: 12px;
  line-height: 1.45;
}

.photo-card-download {
  display: flex;
  min-height: 38px;
  padding: 9px 11px;
  align-items: center;
  justify-content: center;
  border-top: 1px solid var(--admin-line);
  background: #fff;
  color: #075f67;
  font-size: 12px;
  font-weight: 900;
  text-align: center;
  text-decoration: none;
}

.photo-card-download:hover {
  background: rgba(57, 209, 225, 0.08);
}

.photo-card-download:focus-visible {
  outline: 3px solid #075f67;
  outline-offset: 2px;
  box-shadow: 0 0 0 2px #fff;
}

.photo-card-error {
  display: grid;
  place-content: center;
  padding: 12px;
  color: var(--admin-danger);
  text-align: center;
}

.photo-card-error small {
  color: #49666a;
  font-size: 12px;
}

.photo-upload-pending {
  display: grid;
  max-width: 520px;
  margin: 0 auto;
  gap: 6px;
  color: #365b60;
  font-size: 13px;
  line-height: 1.5;
}

.photo-upload-pending strong {
  color: #14383c;
  font-size: 14px;
}


/* =========================================================
   V16.9.6.1 — ADMIN INSPIRATION PHOTO VIEWER
   ========================================================= */

.admin-photo-viewer {
  width: min(960px, calc(100vw - 32px));
  height: min(780px, calc(100vh - 32px));
  height: min(780px, calc(100dvh - 32px));
  max-width: none;
  max-height: calc(100vh - 32px);
  max-height: calc(100dvh - 32px);
  padding: 0;
  overflow: hidden;
  border: 0;
  border-radius: 22px;
  background: #fff;
  color: var(--admin-ink);
  box-shadow: 0 28px 80px rgba(12, 48, 53, 0.28);
}

.admin-photo-viewer::backdrop {
  background: rgba(5, 25, 29, 0.76);
  backdrop-filter: blur(5px);
}

.admin-photo-viewer-shell {
  display: grid;
  width: 100%;
  height: 100%;
  min-height: 0;
  grid-template-rows: auto minmax(0, 1fr) auto;
}

.admin-photo-viewer-header,
.admin-photo-viewer-footer {
  display: flex;
  padding: 16px 18px;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  background: #fff;
}

.admin-photo-viewer-header {
  border-bottom: 1px solid var(--admin-line);
}

.admin-photo-viewer-header h2 {
  margin: 3px 0 0;
  color: var(--admin-ink);
  font-size: 18px;
}

.admin-photo-viewer-close {
  display: grid;
  width: 38px;
  height: 38px;
  flex: 0 0 auto;
  padding: 0;
  place-items: center;
  border: 1px solid var(--admin-line);
  border-radius: 50%;
  background: #fff;
  color: var(--admin-ink);
  font-size: 25px;
  line-height: 1;
  cursor: pointer;
}

.admin-photo-viewer-close:hover {
  background: var(--admin-soft);
}

.admin-photo-viewer-close:focus-visible {
  outline: 3px solid #075f67;
  outline-offset: 2px;
  box-shadow: 0 0 0 2px #fff;
}

.admin-photo-viewer-media {
  display: grid;
  min-width: 0;
  min-height: 0;
  overflow: auto;
  place-items: center;
  background: #12272b;
}

.admin-photo-viewer-media img {
  display: block;
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
}

.admin-photo-viewer-media img[hidden],
.admin-photo-viewer-unavailable[hidden] {
  display: none;
}

.admin-photo-viewer-unavailable {
  display: grid;
  max-width: 460px;
  padding: 36px 24px;
  gap: 8px;
  color: rgba(255, 255, 255, 0.90);
  font-size: 13px;
  line-height: 1.5;
  text-align: center;
}

.admin-photo-viewer-unavailable strong {
  color: #fff;
  font-size: 16px;
}

.admin-photo-viewer-footer {
  border-top: 1px solid var(--admin-line);
}

.admin-photo-viewer-footer p {
  min-width: 0;
  max-height: 3em;
  margin: 0;
  overflow: auto;
  overflow-wrap: anywhere;
  color: #365b60;
  font-size: 12px;
  line-height: 1.5;
}

.admin-photo-download {
  display: inline-flex;
  min-height: 40px;
  flex: 0 0 auto;
  padding: 10px 15px;
  align-items: center;
  justify-content: center;
  border-radius: 11px;
  background: var(--admin-brand-deep);
  color: #fff;
  font-size: 12px;
  font-weight: 900;
  text-decoration: none;
}

.admin-photo-download:hover {
  filter: brightness(1.06);
}

.admin-photo-download:focus-visible {
  outline: 3px solid #075f67;
  outline-offset: 2px;
  box-shadow: 0 0 0 2px #fff;
}

@media (max-width: 560px) {
  .admin-photo-viewer {
    width: calc(100vw - 20px);
    height: calc(100vh - 20px);
    height: calc(100dvh - 20px);
    max-height: calc(100vh - 20px);
    max-height: calc(100dvh - 20px);
    border-radius: 17px;
  }

  .admin-photo-viewer-footer {
    align-items: stretch;
    flex-direction: column;
  }

  .admin-photo-download {
    width: 100%;
  }
}

@media (max-height: 520px) {
  .admin-photo-viewer-header,
  .admin-photo-viewer-footer {
    padding: 9px 14px;
  }

  .admin-photo-viewer-header .admin-eyebrow {
    display: none;
  }

  .admin-photo-viewer-header h2 {
    margin-top: 0;
    font-size: 16px;
  }

  .admin-photo-viewer-close {
    width: 34px;
    height: 34px;
  }

  .admin-photo-viewer-footer {
    align-items: center;
    flex-direction: row;
  }

  .admin-photo-download {
    width: auto;
  }
}

.detail-empty {
  padding: 18px;
  border-radius: 12px;
  background: var(--admin-soft);
  color: #49666a;
  font-size: 13px;
  text-align: center;
}

.workflow-list {
  display: grid;
  gap: 8px;
}

.workflow-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding-bottom: 8px;
  border-bottom: 1px solid var(--admin-line);
}

.workflow-row:last-child {
  padding-bottom: 0;
  border-bottom: 0;
}

.workflow-row span {
  color: var(--admin-muted);
  font-size: 11px;
}

.workflow-row strong {
  font-size: 11px;
  text-align: right;
}

.pricing-placeholder {
  display: grid;
  gap: 5px;
  padding: 14px;
  border-radius: 13px;
  background: rgba(57, 209, 225, 0.10);
}

.pricing-placeholder strong {
  color: var(--admin-brand-deep);
  font-size: 12px;
}

.pricing-placeholder span {
  color: var(--admin-text);
  font-size: 11px;
  line-height: 1.45;
}

.detail-loading {
  padding: 60px 20px;
  color: var(--admin-muted);
  font-size: 13px;
  text-align: center;
}


/* =========================================================
   RESPONSIVE
   ========================================================= */

@media (max-width: 980px) {
  .summary-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .photo-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@media (max-width: 760px) {
  .admin-layout {
    grid-template-columns: 1fr;
  }

  .admin-sidebar {
    position: fixed;
    z-index: 20;
    top: 0;
    bottom: 0;
    left: 0;
    width: 236px;
    transform: translateX(-105%);
    box-shadow: 20px 0 50px rgba(12, 48, 53, 0.14);
    transition: transform 180ms ease;
  }

  .admin-sidebar.is-open {
    transform: translateX(0);
  }

  .admin-menu-button {
    display: grid;
    place-items: center;
  }

  .admin-topbar {
    align-items: flex-start;
  }

  .admin-topbar-actions {
    display: flex;
    align-items: center;
    gap: 9px;
  }

  .section-heading {
    align-items: stretch;
    flex-direction: column;
  }

  .request-tools {
    width: 100%;
  }

  .request-search,
  .request-filter {
    width: 100%;
  }

  .request-card {
    grid-template-columns: 1fr;
  }

  .request-card-meta {
    justify-content: space-between;
  }

  .detail-grid {
    grid-template-columns: 1fr;
  }

  .detail-card-wide {
    grid-column: auto;
  }

  .photo-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 520px) {
  .admin-main {
    padding: 18px 14px 34px;
  }

  .summary-grid {
    grid-template-columns: 1fr;
  }

  .requests-section {
    padding: 16px;
  }

  .request-tools {
    flex-direction: column;
  }

  .request-detail-content {
    padding: 0 16px 20px;
  }

  .request-detail-header {
    flex-direction: column;
  }

  .request-id {
    max-width: 100%;
  }

  .photo-grid {
    grid-template-columns: 1fr;
  }

  .admin-login-card {
    padding: 27px 21px;
  }
}


/* =========================================================
   V15.3 — REQUEST TABS
   ========================================================= */

.request-price {
  padding: 5px 8px;
  border-radius: 999px;
  background: rgba(57, 209, 225, 0.12);
  color: var(--admin-brand-deep);
  font-size: 10px;
  font-weight: 900;
}

.request-detail-tabs {
  position: sticky;
  z-index: 1;
  top: 50px;
  display: flex;
  gap: 6px;
  margin: 0 0 18px;
  padding: 5px;
  overflow-x: auto;
  border: 1px solid var(--admin-line);
  border-radius: 15px;
  background: rgba(255, 255, 255, 0.96);
  backdrop-filter: blur(12px);
}

.request-detail-tab {
  display: inline-flex;
  min-height: 38px;
  flex: none;
  align-items: center;
  gap: 7px;
  padding: 0 13px;
  border: 0;
  border-radius: 11px;
  background: transparent;
  color: var(--admin-text);
  font-size: 12px;
  font-weight: 800;
  cursor: pointer;
}

.request-detail-tab span {
  display: inline-grid;
  min-width: 20px;
  height: 20px;
  place-items: center;
  border-radius: 999px;
  background: var(--admin-soft);
  color: var(--admin-muted);
  font-size: 9px;
}

.request-detail-tab.is-active {
  background: rgba(57, 209, 225, 0.16);
  color: var(--admin-brand-deep);
}

.request-detail-panel {
  min-height: 260px;
}

.detail-paragraph {
  margin: 0;
  color: var(--admin-text);
  font-size: 12px;
  line-height: 1.65;
}

.workflow-panel-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 13px;
}

.next-flow-card {
  display: grid;
  gap: 5px;
  padding: 15px;
  border-radius: 13px;
  background: rgba(57, 209, 225, 0.10);
}

.next-flow-card strong {
  color: var(--admin-brand-deep);
  font-size: 12px;
}

.next-flow-card span {
  color: var(--admin-text);
  font-size: 11px;
  line-height: 1.5;
}


/* =========================================================
   V15.3 — QUOTE PREPARATION WORKSPACE
   ========================================================= */

.quote-prep-shell {
  display: grid;
  gap: 13px;
}

.quote-prep-notice {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding: 15px 17px;
  border: 1px solid #cfecee;
  border-radius: 15px;
  background: rgba(57, 209, 225, 0.08);
}

.quote-prep-notice > div {
  display: grid;
  gap: 3px;
}

.quote-prep-notice strong {
  color: var(--admin-brand-deep);
  font-size: 12px;
}

.quote-prep-notice span {
  color: var(--admin-text);
  font-size: 11px;
  line-height: 1.45;
}

.quote-prep-cloud-badge {
  flex: none;
  padding: 6px 9px;
  border-radius: 999px;
  background: #ffffff;
  color: var(--admin-success) !important;
  font-size: 9px !important;
  font-weight: 900;
  text-transform: uppercase;
}

.quote-prep-section {
  padding: 18px;
  border: 1px solid var(--admin-line);
  border-radius: 17px;
  background: #fbfefe;
}

.quote-prep-heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 13px;
  margin-bottom: 14px;
}

.quote-prep-heading h3 {
  margin: 3px 0 0;
  font-size: 15px;
}

.quote-prep-help {
  margin: -4px 0 14px;
  color: var(--admin-muted);
  font-size: 11px;
  line-height: 1.5;
}

.quote-prep-help strong {
  color: var(--admin-text);
}

.admin-secondary-button,
.admin-secondary-link {
  display: inline-flex;
  min-height: 38px;
  align-items: center;
  justify-content: center;
  padding: 0 12px;
  border: 1px solid #cfe2e5;
  border-radius: 11px;
  background: #ffffff;
  color: var(--admin-brand-deep);
  font-size: 11px;
  font-weight: 800;
  text-decoration: none;
  cursor: pointer;
}

.admin-secondary-button:hover,
.admin-secondary-link:hover {
  border-color: var(--admin-brand);
  background: var(--admin-soft);
}

.pricing-line-list {
  display: grid;
  gap: 8px;
}

.pricing-line-item {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 145px 34px;
  gap: 8px;
  align-items: center;
}

.pricing-line-item input,
.pricing-field input,
.pricing-field textarea {
  width: 100%;
  border: 1px solid #d3e5e7;
  border-radius: 11px;
  outline: none;
  background: #ffffff;
  color: var(--admin-ink);
}

.pricing-line-item input,
.pricing-field input {
  height: 42px;
  padding: 0 12px;
}

.pricing-field textarea {
  min-height: 110px;
  padding: 11px 12px;
  resize: vertical;
  line-height: 1.5;
}

.pricing-line-item input:focus,
.pricing-field input:focus,
.pricing-field textarea:focus {
  border-color: var(--admin-brand);
  box-shadow: 0 0 0 3px rgba(57, 209, 225, 0.10);
}

.money-input-wrap,
.suffix-input-wrap {
  display: flex;
  min-width: 0;
  align-items: center;
  border: 1px solid #d3e5e7;
  border-radius: 11px;
  background: #ffffff;
}

.money-input-wrap:focus-within,
.suffix-input-wrap:focus-within {
  border-color: var(--admin-brand);
  box-shadow: 0 0 0 3px rgba(57, 209, 225, 0.10);
}

.money-input-wrap > span,
.suffix-input-wrap > span {
  flex: none;
  padding-left: 11px;
  color: var(--admin-muted);
  font-size: 11px;
  font-weight: 800;
}

.suffix-input-wrap > span {
  padding: 0 11px 0 5px;
}

.money-input-wrap input,
.suffix-input-wrap input {
  border: 0 !important;
  box-shadow: none !important;
}

.money-input-wrap input {
  padding-left: 5px;
}

.pricing-line-remove {
  display: grid;
  width: 34px;
  height: 34px;
  place-items: center;
  border: 0;
  border-radius: 10px;
  background: transparent;
  color: var(--admin-muted);
  font-size: 20px;
  cursor: pointer;
}

.pricing-line-remove:hover {
  background: #f7e8eb;
  color: var(--admin-danger);
}

.pricing-mini-total {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 15px;
  margin-top: 12px;
  padding-top: 12px;
  border-top: 1px solid var(--admin-line);
}

.pricing-mini-total span {
  color: var(--admin-muted);
  font-size: 11px;
  font-weight: 700;
}

.pricing-mini-total strong {
  color: var(--admin-brand-deep);
  font-size: 15px;
}

.pricing-field-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
}

.pricing-field-grid-3 {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.pricing-field {
  display: grid;
  gap: 6px;
}

.pricing-field > span {
  color: var(--admin-text);
  font-size: 10px;
  font-weight: 800;
}

.quote-total-card {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  margin-top: 14px;
}

.quote-total-card > div {
  display: grid;
  gap: 4px;
  padding: 16px;
  border-radius: 13px;
  background: rgba(57, 209, 225, 0.10);
}

.quote-total-card span {
  color: var(--admin-text);
  font-size: 10px;
  font-weight: 700;
}

.quote-total-card strong {
  color: var(--admin-brand-deep);
  font-size: 21px;
}

.pricing-note-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}

.quote-prep-delivery-note {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  padding: 14px 16px;
  border: 1px dashed #cfe2e5;
  border-radius: 14px;
  background: #ffffff;
  color: var(--admin-text);
  font-size: 11px;
  line-height: 1.5;
}

.quote-prep-delivery-note strong {
  color: var(--admin-brand-deep);
}

.quote-prep-footer {
  position: sticky;
  bottom: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding: 13px 0 2px;
  background: linear-gradient(
    rgba(255,255,255,0),
    #ffffff 26%
  );
}

.quote-prep-actions {
  display: flex;
  flex: none;
  gap: 8px;
}

.quote-prep-actions .admin-primary-button {
  min-height: 42px;
  padding: 0 17px;
}

.quote-prep-status {
  min-height: 18px;
  margin: 0;
  color: var(--admin-muted);
  font-size: 11px;
  line-height: 1.4;
}

.quote-prep-status[data-type="success"] {
  color: var(--admin-success);
  font-weight: 800;
}

.quote-prep-status[data-type="error"] {
  color: var(--admin-danger);
  font-weight: 800;
}

.quote-prep-status[data-type="working"] {
  color: var(--admin-brand-dark);
  font-weight: 800;
}

.quote-send-button {
  min-width: 115px;
}


/* =========================================================
   V15.3 — RESPONSIVE QUOTE EDITOR
   ========================================================= */

@media (max-width: 760px) {
  .workflow-panel-grid {
    grid-template-columns: 1fr;
  }

  .pricing-field-grid,
  .pricing-field-grid-3,
  .pricing-note-grid,
  .quote-total-card {
    grid-template-columns: 1fr;
  }

  .pricing-line-item {
    grid-template-columns: minmax(0, 1fr) 120px 34px;
  }

  .quote-prep-footer {
    align-items: stretch;
    flex-direction: column;
  }

  .quote-prep-actions {
    width: 100%;
  }

  .quote-prep-actions button {
    flex: 1;
  }
}

@media (max-width: 520px) {
  .request-detail-tabs {
    top: 46px;
  }

  .quote-prep-notice,
  .quote-prep-heading {
    align-items: flex-start;
    flex-direction: column;
  }

  .pricing-line-item {
    grid-template-columns: minmax(0, 1fr) 34px;
  }

  .pricing-line-item .money-input-wrap {
    grid-column: 1 / -1;
    grid-row: 2;
  }

  .pricing-line-remove {
    grid-column: 2;
    grid-row: 1;
  }
}


/* =========================================================
   V15.3 — PRIVATE SETTINGS + AUTOMATIC ROUTING
   ========================================================= */

.admin-nav-button {
  width: 100%;
  border: 0;
  font-family: inherit;
  text-align: left;
  cursor: pointer;
}

.business-settings-dialog {
  width: min(620px, calc(100vw - 28px));
  max-height: min(760px, calc(100vh - 28px));
  padding: 0;
  border: 0;
  border-radius: 22px;
  background: transparent;
  overflow: visible;
}

.business-settings-dialog::backdrop {
  background: rgba(25, 52, 56, 0.38);
  backdrop-filter: blur(6px);
}

.business-settings-card {
  padding: 24px;
  border: 1px solid var(--admin-line);
  border-radius: 22px;
  background: #ffffff;
  box-shadow: 0 24px 80px rgba(27, 70, 77, 0.16);
}

.business-settings-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 20px;
}

.business-settings-header h2 {
  margin: 5px 0 5px;
  color: var(--admin-ink);
  font-size: 24px;
}

.business-settings-header p {
  max-width: 460px;
  margin: 0;
  color: var(--admin-muted);
  font-size: 12px;
  line-height: 1.55;
}

.business-settings-loading {
  padding: 24px 0;
  color: var(--admin-muted);
  font-size: 12px;
}

.business-settings-fields {
  display: grid;
  gap: 16px;
}

.pricing-field small {
  color: var(--admin-muted);
  font-size: 9px;
  line-height: 1.45;
}

.private-settings-note {
  display: flex;
  gap: 9px;
  padding: 13px 14px;
  border: 1px dashed #cfe2e5;
  border-radius: 13px;
  background: #f8fcfc;
  color: var(--admin-text);
  font-size: 10px;
  line-height: 1.5;
}

.business-settings-actions {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
}

.travel-heading-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
  justify-content: flex-end;
}

.automatic-route-status {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  margin-bottom: 14px;
  padding: 12px 13px;
  border: 1px solid #d9e9eb;
  border-radius: 13px;
  background: #fbfefe;
}

.automatic-route-status[data-type="success"] {
  border-color: #cce9dc;
  background: #f4fbf7;
}

.automatic-route-status[data-type="warning"] {
  border-color: #f0dfb6;
  background: #fffaf0;
}

.automatic-route-status[data-type="error"] {
  border-color: #efd5da;
  background: #fff7f8;
}

.automatic-route-status[data-type="working"] {
  border-color: #bee8ec;
  background: #f2fcfd;
}

.automatic-route-icon {
  display: grid;
  width: 26px;
  height: 26px;
  flex: none;
  place-items: center;
  border-radius: 999px;
  background: rgba(57, 209, 225, 0.14);
  color: var(--admin-brand-deep);
  font-size: 13px;
  font-weight: 900;
}

.automatic-route-status > div {
  display: grid;
  gap: 2px;
}

.automatic-route-status strong {
  color: var(--admin-text);
  font-size: 11px;
}

.automatic-route-status span {
  color: var(--admin-muted);
  font-size: 10px;
  line-height: 1.45;
}

.travel-route-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
  margin-top: 11px;
}

.travel-route-meta span {
  padding: 5px 8px;
  border-radius: 999px;
  background: var(--admin-soft);
  color: var(--admin-text);
  font-size: 9px;
  font-weight: 800;
}

@media (max-width: 620px) {
  .business-settings-card {
    padding: 18px;
  }

  .travel-heading-actions {
    width: 100%;
    justify-content: flex-start;
  }
}

/* =========================================================
   V15.6 — SHARED CUSTOMER / ADMIN MESSAGING
   ========================================================= */

.admin-message-shell {
  display: grid;
  gap: 16px;
  padding: 18px;
  border: 1px solid var(--admin-line);
  border-radius: 18px;
  background: #fbfefe;
}

.admin-message-heading {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 18px;
}

.admin-message-heading h3 {
  margin: 5px 0 5px;
  font-size: 18px;
}

.admin-message-heading p {
  max-width: 650px;
  margin: 0;
  color: var(--admin-text);
  font-size: 12px;
  line-height: 1.55;
}

.admin-message-count {
  display: inline-grid;
  min-width: 32px;
  height: 32px;
  place-items: center;
  padding: 0 9px;
  border-radius: 999px;
  background: rgba(57, 209, 225, .15);
  color: var(--admin-brand-deep);
  font-size: 12px;
  font-weight: 900;
}

.admin-message-change-note {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding: 12px 14px;
  border-radius: 13px;
  background: rgba(57, 209, 225, .09);
}

.admin-message-change-note > div {
  display: grid;
  gap: 4px;
}

.admin-message-change-note strong {
  color: var(--admin-brand-deep);
  font-size: 12px;
}

.admin-message-change-note span {
  color: var(--admin-text);
  font-size: 11px;
  line-height: 1.5;
}

.admin-message-unavailable,
.admin-message-empty {
  margin: 0;
  padding: 18px;
  border-radius: 13px;
  background: #f3f7f8;
  color: var(--admin-muted);
  font-size: 12px;
  line-height: 1.5;
  text-align: center;
}

.admin-message-thread {
  display: grid;
  max-height: 430px;
  min-height: 180px;
  gap: 10px;
  overflow-y: auto;
  padding: 12px;
  border: 1px solid var(--admin-line);
  border-radius: 15px;
  background: #fff;
  scroll-behavior: smooth;
}

.admin-message-row {
  display: flex;
}

.admin-message-row.is-customer {
  justify-content: flex-start;
}

.admin-message-row.is-admin {
  justify-content: flex-end;
}

.admin-message-bubble {
  display: grid;
  max-width: min(78%, 560px);
  gap: 6px;
  padding: 11px 13px;
  border-radius: 15px;
}

.admin-message-row.is-customer .admin-message-bubble {
  border: 1px solid #dfeaec;
  border-bottom-left-radius: 5px;
  background: #f5f9fa;
}

.admin-message-row.is-admin .admin-message-bubble {
  border-bottom-right-radius: 5px;
  background: #dff8fb;
}

.admin-message-bubble p {
  margin: 0;
  color: var(--admin-ink);
  font-size: 13px;
  line-height: 1.5;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}

.admin-message-bubble span {
  color: var(--admin-muted);
  font-size: 10px;
}

.admin-message-composer {
  display: grid;
  gap: 9px;
}

.admin-message-composer textarea {
  width: 100%;
  min-height: 84px;
  max-height: 180px;
  resize: vertical;
  border: 1px solid #cfe2e5;
  border-radius: 14px;
  padding: 12px 13px;
  outline: none;
  background: #fff;
  color: var(--admin-ink);
  font: inherit;
  font-size: 13px;
  line-height: 1.5;
}

.admin-message-composer textarea:focus {
  border-color: var(--admin-brand);
  box-shadow: 0 0 0 4px rgba(57, 209, 225, .11);
}

.admin-message-composer-bottom {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.admin-message-composer-bottom > span {
  color: var(--admin-muted);
  font-size: 10px;
}

.admin-message-send {
  min-height: 42px;
  padding: 0 16px;
}

.admin-message-status {
  min-height: 18px;
  margin: 0;
  color: var(--admin-muted);
  font-size: 11px;
}

.admin-message-status[data-type="working"] {
  color: var(--admin-brand-dark);
}

.admin-message-status[data-type="success"] {
  color: var(--admin-success);
}

.admin-message-status[data-type="error"] {
  color: var(--admin-danger);
  font-weight: 700;
}

@media (max-width: 620px) {
  .admin-message-heading,
  .admin-message-change-note,
  .admin-message-composer-bottom {
    align-items: stretch;
    flex-direction: column;
  }

  .admin-message-bubble {
    max-width: 90%;
  }

  .admin-message-send {
    width: 100%;
  }
}

/* =========================================================
   V15.8 — ADMIN DEPOSIT / PAYMENT
   ========================================================= */

.admin-payment-card {
  display: grid;
  gap: 18px;
}

.admin-payment-heading {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 18px;
}

.admin-payment-heading h3 {
  margin: 5px 0 5px;
  font-size: 16px;
}

.admin-payment-heading p {
  max-width: 610px;
  margin: 0;
  color: var(--admin-text);
  font-size: 12px;
  line-height: 1.55;
}

.admin-payment-status {
  display: inline-flex;
  min-height: 30px;
  flex: 0 0 auto;
  align-items: center;
  padding: 0 10px;
  border-radius: 999px;
  background: var(--admin-soft);
  color: var(--admin-text);
  font-size: 10px;
  font-weight: 900;
}

.admin-payment-status.success {
  background: #e0f4e9;
  color: #267157;
}

.admin-payment-status.warning {
  background: #fff1d6;
  color: #8b6011;
}

.admin-payment-summary {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}

.admin-payment-summary > div {
  display: grid;
  gap: 4px;
  padding: 13px 14px;
  border-radius: 13px;
  background: var(--admin-soft);
}

.admin-payment-summary span {
  color: var(--admin-muted);
  font-size: 10px;
  font-weight: 800;
  text-transform: uppercase;
}

.admin-payment-summary strong {
  color: var(--admin-brand-deep);
  font-size: 17px;
}

.admin-payment-form {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}

.admin-payment-field {
  display: grid;
  gap: 7px;
}

.admin-payment-field-wide {
  grid-column: 1 / -1;
}

.admin-payment-field > span {
  color: var(--admin-text);
  font-size: 11px;
  font-weight: 800;
}

.admin-payment-field input,
.admin-payment-field select {
  width: 100%;
  min-height: 44px;
  padding: 0 12px;
  border: 1px solid var(--admin-line);
  border-radius: 12px;
  outline: none;
  background: #fff;
  color: var(--admin-ink);
}

.admin-payment-field input:focus,
.admin-payment-field select:focus {
  border-color: var(--admin-brand);
  box-shadow: 0 0 0 3px rgba(57, 209, 225, .11);
}

.admin-payment-money-input {
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: center;
  min-height: 44px;
  overflow: hidden;
  border: 1px solid var(--admin-line);
  border-radius: 12px;
  background: #fff;
}

.admin-payment-money-input:focus-within {
  border-color: var(--admin-brand);
  box-shadow: 0 0 0 3px rgba(57, 209, 225, .11);
}

.admin-payment-money-input > span {
  padding-left: 12px;
  color: var(--admin-muted);
  font-weight: 800;
}

.admin-payment-money-input input {
  min-height: 42px;
  border: 0;
  box-shadow: none !important;
}

.admin-payment-actions {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
}

.admin-payment-message {
  min-height: 18px;
  margin: 0;
  color: var(--admin-text);
  font-size: 11px;
}

.admin-payment-message[data-type="error"] {
  color: var(--admin-danger);
}

.admin-payment-message[data-type="working"] {
  color: var(--admin-brand-dark);
}

.admin-payment-message[data-type="success"] {
  color: var(--admin-success);
  font-weight: 800;
}

.admin-payment-save {
  min-width: 170px;
  min-height: 44px;
}

.admin-payment-unavailable {
  padding: 14px 15px;
  border-radius: 13px;
  background: var(--admin-soft);
  color: var(--admin-muted);
  font-size: 12px;
  line-height: 1.5;
}

@media (max-width: 620px) {
  .admin-payment-heading,
  .admin-payment-actions {
    align-items: stretch;
    flex-direction: column;
  }

  .admin-payment-summary,
  .admin-payment-form {
    grid-template-columns: 1fr;
  }

  .admin-payment-field-wide {
    grid-column: auto;
  }

  .admin-payment-save {
    width: 100%;
  }
}

/* =========================================================
   V15.9 — ELECTRONIC CONTRACT WORKSPACE
   ========================================================= */

.admin-contract-card {
  display: grid;
  gap: 18px;
}

.admin-contract-heading {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 18px;
}

.admin-contract-heading h3 {
  margin: 3px 0 6px;
}

.admin-contract-heading p {
  margin: 0;
  max-width: 720px;
  color: var(--admin-muted);
  line-height: 1.55;
}

.admin-contract-eyebrow {
  color: var(--admin-brand-deep);
  font-size: 11px;
  font-weight: 900;
  letter-spacing: .12em;
}

.admin-contract-status {
  flex: 0 0 auto;
  border-radius: 999px;
  padding: 8px 11px;
  background: #f0f4f5;
  color: var(--admin-muted);
  font-size: 11px;
  font-weight: 900;
}

.admin-contract-status.is-pending {
  background: #fff7df;
  color: #7c5a00;
}

.admin-contract-status.is-success {
  background: #e7f8ef;
  color: #176940;
}

.admin-contract-warning,
.admin-contract-pending,
.admin-contract-signed {
  border-radius: 14px;
  padding: 14px 16px;
  line-height: 1.45;
}

.admin-contract-warning {
  background: #fff3f2;
  color: #8b3d37;
}

.admin-contract-pending {
  background: #fff9e9;
  color: #6f580e;
}

.admin-contract-signed {
  display: grid;
  gap: 3px;
  background: #eaf9f1;
  color: #176940;
}

.admin-contract-signed small {
  opacity: .82;
}

.admin-contract-damage-audit,
.admin-contract-damage-notice {
  display: grid;
  gap: 4px;
  padding: 14px 16px;
  border-radius: 14px;
  line-height: 1.5;
}

.admin-contract-damage-audit.is-complete {
  border: 2px solid #b42318;
  background: #fff4f2;
  color: #7a271a;
}

.admin-contract-damage-audit.is-warning,
.admin-contract-damage-notice {
  border: 1px solid #f0b4ae;
  background: #fff7f6;
  color: #8b3028;
}

.admin-contract-damage-audit span,
.admin-contract-damage-audit small,
.admin-contract-damage-notice span {
  font-size: 11px;
}

.admin-contract-damage-audit small {
  opacity: .84;
}

.admin-contract-active {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr)) auto;
  gap: 12px;
  align-items: end;
  border: 1px solid var(--admin-border);
  border-radius: 16px;
  padding: 14px;
  background: #fbfefe;
}

.admin-contract-active > div {
  display: grid;
  gap: 4px;
}

.admin-contract-active span,
.admin-contract-form label > span {
  color: var(--admin-muted);
  font-size: 11px;
  font-weight: 800;
}

.admin-contract-form {
  display: grid;
  gap: 14px;
}

.admin-contract-form label {
  display: grid;
  gap: 7px;
}

.admin-contract-form input,
.admin-contract-form select {
  width: 100%;
  min-height: 44px;
  border: 1px solid var(--admin-border);
  border-radius: 12px;
  padding: 0 12px;
  background: #fff;
  color: var(--admin-text);
  font: inherit;
}

.admin-contract-two-column {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}

.admin-contract-consent {
  display: flex !important;
  grid-template-columns: none !important;
  align-items: flex-start;
  gap: 10px !important;
  padding: 12px 14px;
  border: 1px dashed var(--admin-border);
  border-radius: 12px;
  background: #f8fcfd;
}

.admin-contract-consent input {
  width: 18px;
  min-height: 18px;
  margin-top: 1px;
}

.admin-contract-consent span {
  color: var(--admin-text) !important;
  line-height: 1.5;
}

.admin-contract-footer {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 12px;
  min-height: 42px;
}

.admin-contract-footer > span {
  margin-right: auto;
  font-size: 12px;
  font-weight: 800;
}

.admin-contract-footer > span.is-error {
  color: #a13c35;
}

.admin-contract-footer > span.is-success {
  color: #176940;
}

.admin-contract-footer > span.is-working {
  color: var(--admin-brand-deep);
}

.admin-contract-primary,
.admin-contract-secondary {
  border: 0;
  border-radius: 12px;
  min-height: 42px;
  padding: 0 16px;
  font: inherit;
  font-weight: 900;
  cursor: pointer;
}

.admin-contract-primary {
  background: var(--admin-brand);
  color: #06383c;
}

.admin-contract-secondary {
  border: 1px solid var(--admin-border);
  background: #fff;
  color: var(--admin-brand-deep);
}

.admin-contract-primary:disabled,
.admin-contract-secondary:disabled {
  opacity: .55;
  cursor: wait;
}

@media (max-width: 760px) {
  .admin-contract-heading,
  .admin-contract-footer {
    align-items: stretch;
    flex-direction: column;
  }

  .admin-contract-active,
  .admin-contract-two-column {
    grid-template-columns: 1fr;
  }

  .admin-contract-footer > span {
    margin-right: 0;
  }
}


/* =========================================================
   V16.2 — FINAL BOOKING CONFIRMATION
   ========================================================= */

.admin-booking-shell {
  display: grid;
  gap: 16px;
  padding: 18px;
  border: 1px solid #cfe8eb;
  border-radius: 17px;
  background: linear-gradient(
    145deg,
    #fbfefe,
    #f1fbfc
  );
}

.admin-booking-shell.is-confirmed {
  border-color: #cce9dc;
  background: linear-gradient(
    145deg,
    #fbfffd,
    #f1fbf6
  );
}

.admin-booking-shell.is-waiting {
  background: #fbfefe;
}

.admin-booking-heading {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
}

.admin-booking-heading > div {
  display: grid;
  gap: 4px;
}

.admin-booking-heading h3 {
  margin: 0;
  font-size: 16px;
}

.admin-booking-heading p {
  max-width: 660px;
  margin: 0;
  color: var(--admin-text);
  font-size: 11px;
  line-height: 1.55;
}

.admin-booking-eyebrow {
  color: var(--admin-brand-dark);
  font-size: 9px;
  font-weight: 900;
  letter-spacing: 0.12em;
}

.admin-booking-badge {
  flex: none;
  padding: 7px 10px;
  border-radius: 999px;
  background: #eaf6f7;
  color: var(--admin-brand-deep);
  font-size: 9px;
  font-weight: 900;
}

.admin-booking-badge.is-confirmed {
  background: #def3e7;
  color: var(--admin-success);
}

.admin-booking-checks,
.admin-booking-summary,
.admin-booking-final {
  display: grid;
  gap: 9px;
}

.admin-booking-checks {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.admin-booking-summary {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.admin-booking-final {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.admin-booking-checks > div,
.admin-booking-summary > div,
.admin-booking-final > div {
  display: grid;
  gap: 3px;
  padding: 13px;
  border: 1px solid var(--admin-line);
  border-radius: 12px;
  background: #ffffff;
}

.admin-booking-checks span,
.admin-booking-summary span,
.admin-booking-final span {
  color: var(--admin-muted);
  font-size: 9px;
  font-weight: 800;
  text-transform: uppercase;
}

.admin-booking-checks strong,
.admin-booking-summary strong,
.admin-booking-final strong {
  overflow-wrap: anywhere;
  color: var(--admin-ink);
  font-size: 12px;
}

.admin-booking-warning,
.admin-booking-note {
  margin: 0;
  padding: 12px 13px;
  border-radius: 12px;
  color: var(--admin-text);
  font-size: 10px;
  line-height: 1.5;
}

.admin-booking-warning {
  border: 1px solid #f0dfb6;
  background: #fffaf0;
}

.admin-booking-note {
  border: 1px solid #cce9dc;
  background: #f4fbf7;
}

.admin-booking-actions {
  display: flex;
  min-height: 42px;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.admin-booking-status {
  color: var(--admin-muted);
  font-size: 10px;
  font-weight: 800;
}

.admin-booking-status[data-type="working"] {
  color: var(--admin-brand-dark);
}

.admin-booking-status[data-type="success"] {
  color: var(--admin-success);
}

.admin-booking-status[data-type="error"] {
  color: var(--admin-danger);
}

.admin-confirm-booking-button {
  min-height: 42px;
  padding: 0 18px;
}

@media (max-width: 700px) {
  .admin-booking-heading,
  .admin-booking-actions {
    align-items: stretch;
    flex-direction: column;
  }

  .admin-booking-checks,
  .admin-booking-summary,
  .admin-booking-final {
    grid-template-columns: 1fr;
  }

  .admin-confirm-booking-button {
    width: 100%;
  }
}


/* =========================================================
   V16.4 — POST-BOOKING BALANCE PAYMENTS
   ========================================================= */

.admin-booking-payment-card {
  display: grid;
  gap: 18px;
  padding: 22px;
  border: 1px solid rgba(25, 111, 120, .14);
  border-radius: 20px;
  background:
    linear-gradient(145deg, #f8fdfe 0%, #ffffff 72%);
}

.admin-booking-payment-heading {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 18px;
}

.admin-booking-payment-heading h3 {
  margin: 4px 0 6px;
}

.admin-booking-payment-heading p {
  max-width: 720px;
  margin: 0;
  color: #688287;
  line-height: 1.55;
}

.admin-booking-payment-status {
  flex: 0 0 auto;
  padding: 7px 11px;
  border-radius: 999px;
  background: #fff3d7;
  color: #805d0a;
  font-size: 11px;
  font-weight: 900;
}

.admin-booking-payment-status.is-paid {
  background: #e1f6e9;
  color: #26754a;
}

.admin-booking-payment-summary {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
}

.admin-booking-payment-summary > div {
  display: grid;
  gap: 5px;
  min-width: 0;
  padding: 14px;
  border: 1px solid #dfeaec;
  border-radius: 14px;
  background: #fff;
}

.admin-booking-payment-summary span {
  color: #71878b;
  font-size: 10px;
  font-weight: 900;
  letter-spacing: .06em;
  text-transform: uppercase;
}

.admin-booking-payment-summary strong {
  color: #214a50;
  font-size: 18px;
}

.admin-booking-payment-summary .is-due {
  border-color: #f1d79a;
  background: #fffaf0;
}

.admin-booking-payment-summary .is-paid {
  border-color: #caebd8;
  background: #f1fbf5;
}

.admin-booking-payment-form {
  display: grid;
  grid-template-columns: minmax(0, .8fr) minmax(0, 1fr);
  gap: 14px;
  padding: 18px;
  border: 1px solid #e1ecee;
  border-radius: 16px;
  background: #fff;
}

.admin-booking-payment-form label {
  display: grid;
  gap: 7px;
  color: #365d62;
  font-size: 12px;
  font-weight: 800;
}

.admin-booking-payment-form input,
.admin-booking-payment-form select {
  min-height: 44px;
  width: 100%;
  padding: 10px 12px;
  border: 1px solid #cfdfe1;
  border-radius: 11px;
  background: #fff;
  color: #173f44;
  font: inherit;
}

.admin-booking-payment-form input:focus,
.admin-booking-payment-form select:focus {
  outline: none;
  border-color: #39d1e1;
  box-shadow: 0 0 0 3px rgba(57, 209, 225, .12);
}

.admin-booking-payment-note,
.admin-booking-payment-warning,
.admin-booking-payment-actions {
  grid-column: 1 / -1;
}

.admin-booking-payment-note small {
  color: #8aa0a3;
  font-weight: 700;
}

.admin-money-input {
  position: relative;
}

.admin-money-input > span {
  position: absolute;
  left: 12px;
  top: 50%;
  transform: translateY(-50%);
  color: #6d868a;
  font-weight: 900;
}

.admin-money-input input {
  padding-left: 28px;
}

.admin-booking-payment-warning {
  padding: 11px 13px;
  border: 1px solid #f0ddb1;
  border-radius: 11px;
  background: #fffaf0;
  color: #735d25;
  font-size: 11px;
  line-height: 1.5;
}

.admin-booking-payment-actions {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.admin-booking-payment-message {
  color: #a14b3b;
  font-size: 12px;
  font-weight: 800;
}

.admin-booking-payment-complete {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 14px;
  border: 1px solid #ccebd8;
  border-radius: 14px;
  background: #f0fbf4;
  color: #2b6f49;
}

.admin-booking-payment-complete span {
  color: #5e7d69;
  font-size: 12px;
}

.admin-booking-payment-history {
  display: grid;
  gap: 10px;
  padding-top: 2px;
}

.admin-booking-payment-history-heading {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 14px;
}

.admin-booking-payment-history-heading strong {
  color: #244b50;
  font-size: 13px;
}

.admin-booking-payment-history-heading span,
.admin-booking-payment-history-empty {
  color: #809598;
  font-size: 11px;
}

.admin-booking-payment-history-empty {
  padding: 12px 14px;
  border-radius: 12px;
  background: #f7fbfc;
}

.admin-booking-payment-history-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding: 12px 14px;
  border: 1px solid #e2ecee;
  border-radius: 12px;
  background: #fff;
}

.admin-booking-payment-history-row > div {
  display: grid;
  gap: 3px;
}

.admin-booking-payment-history-row strong {
  color: #214a50;
}

.admin-booking-payment-history-row span,
.admin-booking-payment-history-row time {
  color: #748c90;
  font-size: 11px;
}

@media (max-width: 760px) {
  .admin-booking-payment-heading,
  .admin-booking-payment-actions,
  .admin-booking-payment-history-heading,
  .admin-booking-payment-history-row {
    align-items: stretch;
    flex-direction: column;
  }

  .admin-booking-payment-summary,
  .admin-booking-payment-form {
    grid-template-columns: 1fr;
  }

  .admin-booking-payment-note,
  .admin-booking-payment-warning,
  .admin-booking-payment-actions {
    grid-column: auto;
  }
}


/* =========================================================
   V16.5.2 — SHARED BOOKING CALENDAR
   ========================================================= */

.admin-calendar-section {
  margin-top: 28px;
  padding: 23px;
  border: 1px solid var(--admin-line);
  border-radius: var(--admin-radius);
  background: var(--admin-card);
  box-shadow: 0 8px 28px rgba(23, 86, 92, 0.035);
  scroll-margin-top: 22px;
}

.admin-calendar-heading {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 20px;
  margin-bottom: 18px;
}

.admin-calendar-heading h2 {
  margin: 5px 0 5px;
  font-size: 22px;
}

.admin-calendar-heading p {
  max-width: 650px;
  margin: 0;
  color: var(--admin-muted);
  font-size: 12px;
  line-height: 1.5;
}

.admin-calendar-view-switch {
  display: inline-flex;
  flex: none;
  gap: 4px;
  padding: 4px;
  border: 1px solid var(--admin-line);
  border-radius: 13px;
  background: var(--admin-soft);
}

.admin-calendar-view-button {
  min-height: 36px;
  padding: 0 13px;
  border: 0;
  border-radius: 9px;
  background: transparent;
  color: var(--admin-text);
  font-size: 11px;
  font-weight: 800;
  cursor: pointer;
}

.admin-calendar-view-button.is-active {
  background: #fff;
  color: var(--admin-brand-deep);
  box-shadow: 0 2px 8px rgba(20, 56, 60, 0.07);
}

.admin-calendar-status {
  margin-bottom: 14px;
  padding: 9px 11px;
  border-radius: 11px;
  background: var(--admin-soft);
  color: var(--admin-muted);
  font-size: 10px;
  font-weight: 700;
}

.admin-calendar-status[data-state="live"] {
  background: #edf9f3;
  color: var(--admin-success);
}

.admin-calendar-status[data-state="error"] {
  background: #fff1f3;
  color: var(--admin-danger);
}

.admin-calendar-panel {
  min-width: 0;
}

.admin-calendar-toolbar {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 14px;
  margin-bottom: 14px;
}

.admin-calendar-month-nav {
  display: flex;
  gap: 6px;
  justify-self: start;
}

.admin-calendar-nav-button,
.admin-calendar-today-button {
  min-height: 34px;
  border: 1px solid var(--admin-line);
  border-radius: 10px;
  background: #fff;
  color: var(--admin-ink);
  font-weight: 800;
  cursor: pointer;
}

.admin-calendar-nav-button {
  width: 36px;
  font-size: 20px;
}

.admin-calendar-today-button {
  padding: 0 11px;
  font-size: 10px;
}

.admin-calendar-nav-button:hover,
.admin-calendar-today-button:hover {
  border-color: var(--admin-brand);
  background: var(--admin-soft);
}

.admin-calendar-month-label {
  justify-self: center;
  font-size: 16px;
}

.admin-calendar-legend {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 9px;
  color: var(--admin-muted);
  font-size: 9px;
  font-weight: 700;
}

.admin-calendar-legend span {
  display: inline-flex;
  align-items: center;
  gap: 5px;
}

.admin-calendar-legend span::before {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #7fa2a7;
  content: "";
}

.admin-calendar-legend span[data-kind="live"]::before {
  background: #dc8b2d;
}

.admin-calendar-legend span[data-kind="completed"]::before {
  background: #829194;
}

.admin-calendar-legend span[data-kind="cancelled"]::before {
  background: #c95b69;
}

.admin-calendar-weekdays,
.admin-calendar-grid {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
}

.admin-calendar-weekdays {
  border: 1px solid var(--admin-line);
  border-bottom: 0;
  border-radius: 14px 14px 0 0;
  overflow: hidden;
  background: #f8fcfc;
}

.admin-calendar-weekdays span {
  padding: 9px 7px;
  color: var(--admin-muted);
  font-size: 9px;
  font-weight: 900;
  text-align: center;
  text-transform: uppercase;
}

.admin-calendar-grid {
  overflow: hidden;
  border-top: 1px solid var(--admin-line);
  border-left: 1px solid var(--admin-line);
  border-radius: 0 0 14px 14px;
}

.admin-calendar-day {
  min-width: 0;
  min-height: 118px;
  padding: 8px;
  border-right: 1px solid var(--admin-line);
  border-bottom: 1px solid var(--admin-line);
  background: #fff;
}

.admin-calendar-day.is-outside {
  background: #fafcfc;
}

.admin-calendar-day.is-outside .admin-calendar-day-number {
  opacity: 0.42;
}

.admin-calendar-day.is-today {
  box-shadow: inset 0 0 0 2px rgba(57, 209, 225, 0.55);
}

.admin-calendar-day-number {
  display: grid;
  width: 25px;
  height: 25px;
  place-items: center;
  margin-bottom: 6px;
  border-radius: 999px;
  color: var(--admin-text);
  font-size: 10px;
  font-weight: 900;
}

.admin-calendar-day.is-today .admin-calendar-day-number {
  background: var(--admin-brand);
  color: #063e44;
}

.admin-calendar-day-events {
  display: grid;
  gap: 4px;
}

.admin-calendar-event {
  display: grid;
  width: 100%;
  gap: 1px;
  padding: 5px 6px;
  overflow: hidden;
  border: 0;
  border-left: 3px solid #78a6ab;
  border-radius: 7px;
  background: #eff8f9;
  color: var(--admin-ink);
  text-align: left;
}

.admin-calendar-event strong,
.admin-calendar-event span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.admin-calendar-event strong {
  font-size: 9px;
}

.admin-calendar-event span {
  color: var(--admin-muted);
  font-size: 8px;
}

.admin-calendar-event[data-status="live"] {
  border-left-color: #dc8b2d;
  background: #fff7eb;
}

.admin-calendar-event[data-status="completed"] {
  border-left-color: #829194;
  background: #f1f4f4;
}

.admin-calendar-event[data-status="cancelled"] {
  border-left-color: #c95b69;
  background: #fff0f2;
  opacity: 0.78;
}

.admin-calendar-more {
  margin-top: 2px;
  color: var(--admin-brand-deep);
  font-size: 8px;
  font-weight: 900;
}

.admin-upcoming-bookings {
  display: grid;
  gap: 9px;
}

.admin-upcoming-booking {
  display: grid;
  grid-template-columns: 72px minmax(0, 1fr) auto;
  align-items: center;
  gap: 14px;
  padding: 14px 15px;
  border: 1px solid var(--admin-line);
  border-radius: 14px;
  background: #fbfefe;
}

.admin-upcoming-date {
  display: grid;
  gap: 1px;
  text-align: center;
}

.admin-upcoming-date strong {
  color: var(--admin-brand-deep);
  font-size: 22px;
  line-height: 1;
}

.admin-upcoming-date span {
  color: var(--admin-muted);
  font-size: 9px;
  font-weight: 900;
  text-transform: uppercase;
}

.admin-upcoming-main {
  display: grid;
  min-width: 0;
  gap: 4px;
}

.admin-upcoming-main strong {
  overflow: hidden;
  font-size: 13px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.admin-upcoming-main span {
  overflow: hidden;
  color: var(--admin-text);
  font-size: 10px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.admin-booking-status-pill {
  display: inline-flex;
  min-height: 25px;
  align-items: center;
  padding: 0 9px;
  border-radius: 999px;
  background: #e7f5f6;
  color: var(--admin-brand-deep);
  font-size: 8px;
  font-weight: 900;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.admin-booking-status-pill[data-status="live"] {
  background: #fff0d8;
  color: #946011;
}

.admin-booking-status-pill[data-status="completed"] {
  background: #edf1f1;
  color: #66777a;
}

.admin-booking-status-pill[data-status="cancelled"] {
  background: #fae8eb;
  color: #a34250;
}

.admin-calendar-empty {
  padding: 34px 18px;
  color: var(--admin-muted);
  font-size: 12px;
  text-align: center;
}

@media (max-width: 980px) {
  .admin-calendar-toolbar {
    grid-template-columns: 1fr auto;
  }

  .admin-calendar-legend {
    grid-column: 1 / -1;
    justify-content: flex-start;
  }

  .admin-calendar-day {
    min-height: 100px;
  }
}

@media (max-width: 760px) {
  .admin-calendar-heading {
    align-items: stretch;
    flex-direction: column;
  }

  .admin-calendar-view-switch {
    width: fit-content;
  }

  .admin-calendar-weekdays,
  .admin-calendar-grid {
    min-width: 700px;
  }

  .admin-calendar-panel {
    overflow-x: auto;
    padding-bottom: 4px;
  }

  .admin-upcoming-booking {
    grid-template-columns: 60px minmax(0, 1fr);
  }

  .admin-booking-status-pill {
    grid-column: 2;
    width: fit-content;
  }
}

@media (max-width: 520px) {
  .admin-calendar-section {
    padding: 16px;
  }

  .admin-calendar-toolbar {
    grid-template-columns: 1fr;
  }

  .admin-calendar-month-nav,
  .admin-calendar-month-label {
    justify-self: start;
  }
}


/* =========================================================
   V16.5.2.1 — CALENDAR LIFECYCLE + BOOKING CLICK-THROUGH
   ========================================================= */

.admin-calendar-event,
.admin-upcoming-booking {
  font-family: inherit;
  cursor: pointer;
}

.admin-calendar-event:hover {
  filter: brightness(0.985);
  box-shadow: 0 3px 10px rgba(20, 56, 60, 0.08);
}

.admin-calendar-event:focus-visible,
.admin-upcoming-booking:focus-visible {
  outline: 3px solid rgba(57, 209, 225, 0.28);
  outline-offset: 2px;
}

.admin-upcoming-booking {
  width: 100%;
  color: inherit;
  text-align: left;
  cursor: pointer;
  transition:
    border-color 140ms ease,
    background 140ms ease,
    transform 140ms ease;
}

.admin-upcoming-booking:hover {
  border-color: #c5e6e9;
  background: #f6fcfd;
  transform: translateY(-1px);
}


/* MARK: Private admin-only booking travel snapshot */

.admin-booking-private {
  display: grid;
  gap: 10px;
  padding: 13px;
  border: 1px dashed #c9e0e3;
  border-radius: 13px;
  background: #f8fbfb;
}

.admin-booking-private-heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.admin-booking-private-heading span {
  color: var(--admin-brand-dark);
  font-size: 9px;
  font-weight: 900;
  letter-spacing: 0.1em;
}

.admin-booking-private-heading strong {
  color: var(--admin-muted);
  font-size: 9px;
}

.admin-booking-private-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
}

.admin-booking-private-grid > div {
  display: grid;
  gap: 3px;
  padding: 10px 11px;
  border: 1px solid var(--admin-line);
  border-radius: 10px;
  background: #fff;
}

.admin-booking-private-grid span {
  color: var(--admin-muted);
  font-size: 8px;
  font-weight: 800;
  text-transform: uppercase;
}

.admin-booking-private-grid strong {
  color: var(--admin-ink);
  font-size: 11px;
}

@media (max-width: 700px) {
  .admin-booking-private-heading {
    align-items: flex-start;
    flex-direction: column;
  }

  .admin-booking-private-grid {
    grid-template-columns: 1fr;
  }
}


/* =========================================================
   V16.6.1 — AVAILABILITY / DOUBLE-BOOKING WARNING
   ========================================================= */

.admin-booking-availability {
  display: grid;
  gap: 7px;
  margin-top: 12px;
  padding: 12px 13px;
  border: 1px solid var(--admin-line);
  border-radius: 12px;
  background: #f8fbfb;
}

.admin-booking-availability > div:first-child {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.admin-booking-availability span {
  color: var(--admin-muted);
  font-size: 8px;
  font-weight: 900;
  letter-spacing: 0.09em;
}

.admin-booking-availability strong {
  color: var(--admin-ink);
  font-size: 11px;
}

.admin-booking-availability p {
  margin: 0;
  color: var(--admin-muted);
  font-size: 9px;
  line-height: 1.5;
}

.admin-booking-availability.is-checking {
  border-color: #d8e9eb;
  background: #f7fbfc;
}

.admin-booking-availability.is-clear {
  border-color: #cbe9d8;
  background: #f0faf4;
}

.admin-booking-availability.is-clear > div:first-child strong {
  color: #2d7b4c;
}

.admin-booking-availability.is-warning {
  border-color: #efd6a8;
  background: #fff9ef;
}

.admin-booking-availability.is-warning > div:first-child strong {
  color: #8a651d;
}

.admin-booking-availability.is-conflict {
  border-color: #efc6cb;
  background: #fff4f5;
}

.admin-booking-availability.is-conflict > div:first-child strong {
  color: #a23e4b;
}

.admin-booking-conflict-list {
  display: grid;
  gap: 7px;
  margin-top: 3px;
}

.admin-booking-conflict-row {
  display: grid;
  grid-template-columns: minmax(130px, 0.8fr) minmax(180px, 1.3fr) auto;
  align-items: center;
  gap: 10px;
  padding: 9px 10px;
  border: 1px solid rgba(162, 62, 75, 0.13);
  border-radius: 10px;
  background: #fff;
}

.admin-booking-conflict-row > div {
  display: grid;
  min-width: 0;
  gap: 2px;
}

.admin-booking-conflict-row strong,
.admin-booking-conflict-row span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.admin-booking-conflict-row strong {
  color: var(--admin-ink);
  font-size: 9px;
}

.admin-booking-conflict-row span {
  color: var(--admin-muted);
  font-size: 8px;
  letter-spacing: normal;
}

.admin-booking-conflict-id {
  max-width: 180px;
  padding: 5px 7px;
  border-radius: 999px;
  background: #fae8eb;
  color: #9b3c49 !important;
  font-weight: 800 !important;
}

@media (max-width: 760px) {
  .admin-booking-availability > div:first-child {
    align-items: flex-start;
    flex-direction: column;
  }

  .admin-booking-conflict-row {
    grid-template-columns: 1fr;
  }

  .admin-booking-conflict-id {
    width: fit-content;
    max-width: 100%;
  }
}


/* =========================================================
   V16.6.2 — POLISHED ADMIN DECISION DIALOGS
   Replaces native Safari alert/confirm boxes.
   ========================================================= */

.admin-decision-dialog {
  width: min(570px, calc(100vw - 32px));
  max-height: min(88vh, 760px);
  padding: 0;
  overflow: visible;
  border: 0;
  border-radius: 24px;
  background: transparent;
  color: var(--admin-ink);
}

.admin-decision-dialog::backdrop {
  background: rgba(8, 35, 39, 0.54);
  backdrop-filter: blur(7px);
}

.admin-decision-shell {
  overflow: hidden;
  border: 1px solid rgba(198, 224, 227, 0.92);
  border-radius: 24px;
  background: #fff;
  box-shadow:
    0 34px 100px rgba(10, 43, 47, 0.30),
    0 8px 24px rgba(10, 43, 47, 0.10);
}

.admin-decision-header {
  display: grid;
  grid-template-columns: 46px minmax(0, 1fr);
  gap: 14px;
  padding: 22px 22px 18px;
}

.admin-decision-icon {
  display: grid;
  width: 44px;
  height: 44px;
  place-items: center;
  border-radius: 14px;
  background: rgba(57, 209, 225, 0.14);
  color: var(--admin-brand-deep);
  font-size: 20px;
  font-weight: 900;
}

.admin-decision-heading {
  min-width: 0;
}

.admin-decision-eyebrow {
  display: block;
  margin-bottom: 5px;
  color: var(--admin-brand-deep);
  font-size: 9px;
  font-weight: 900;
  letter-spacing: 0.12em;
}

.admin-decision-heading h3 {
  margin: 0;
  color: var(--admin-ink);
  font-size: 20px;
  line-height: 1.2;
}

.admin-decision-heading p {
  margin: 7px 0 0;
  color: var(--admin-muted);
  font-size: 11px;
  line-height: 1.55;
}

.admin-decision-details {
  display: grid;
  gap: 8px;
  max-height: 285px;
  margin: 0 22px;
  overflow-y: auto;
}

.admin-decision-detail {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding: 12px 13px;
  border: 1px solid var(--admin-line);
  border-radius: 13px;
  background: #f9fcfc;
}

.admin-decision-detail-copy {
  display: grid;
  min-width: 0;
  gap: 2px;
}

.admin-decision-detail-copy strong,
.admin-decision-detail-copy span,
.admin-decision-detail-copy small {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.admin-decision-detail-copy strong {
  color: var(--admin-ink);
  font-size: 11px;
}

.admin-decision-detail-copy span {
  color: var(--admin-text);
  font-size: 10px;
  font-weight: 700;
}

.admin-decision-detail-copy small {
  color: var(--admin-muted);
  font-size: 9px;
}

.admin-decision-detail-badge {
  flex: none;
  max-width: 180px;
  padding: 5px 8px;
  overflow: hidden;
  border-radius: 999px;
  background: #edf8f9;
  color: var(--admin-brand-deep);
  font-size: 8px;
  font-weight: 900;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.admin-decision-note {
  margin: 14px 22px 0;
  padding: 10px 12px;
  border-radius: 11px;
  background: #f6fafb;
  color: var(--admin-muted);
  font-size: 9px;
  line-height: 1.5;
}

.admin-decision-actions {
  display: flex;
  justify-content: flex-end;
  gap: 9px;
  margin-top: 18px;
  padding: 15px 22px 20px;
  border-top: 1px solid var(--admin-line);
  background: #fbfdfd;
}

.admin-decision-button {
  min-height: 42px;
  padding: 0 17px;
  border-radius: 12px;
  font: inherit;
  font-size: 11px;
  font-weight: 900;
  cursor: pointer;
}

.admin-decision-button.is-cancel {
  border: 1px solid var(--admin-line);
  background: #fff;
  color: var(--admin-text);
}

.admin-decision-button.is-cancel:hover {
  background: #f5f9fa;
}

.admin-decision-button.is-confirm {
  border: 1px solid transparent;
  background: var(--admin-brand);
  color: #073f45;
  box-shadow: 0 7px 18px rgba(57, 209, 225, 0.20);
}

.admin-decision-button.is-confirm:hover {
  filter: brightness(0.98);
}

.admin-decision-button:focus-visible {
  outline: 3px solid rgba(57, 209, 225, 0.32);
  outline-offset: 2px;
}


/* MARK: Conflict tone */

.admin-decision-dialog.is-conflict .admin-decision-icon {
  background: #fae9ec;
  color: #a8404d;
}

.admin-decision-dialog.is-conflict .admin-decision-eyebrow {
  color: #a8404d;
}

.admin-decision-dialog.is-conflict .admin-decision-detail {
  border-color: #efd3d7;
  background: #fff8f8;
}

.admin-decision-dialog.is-conflict .admin-decision-detail-badge {
  background: #fae9ec;
  color: #9b3c49;
}

.admin-decision-dialog.is-conflict .admin-decision-note {
  background: #fff3f4;
  color: #8f4a54;
}

.admin-decision-dialog.is-conflict .admin-decision-button.is-confirm {
  background: #b9505d;
  color: #fff;
  box-shadow: 0 7px 18px rgba(185, 80, 93, 0.18);
}


/* MARK: Warning tone */

.admin-decision-dialog.is-warning .admin-decision-icon {
  background: #fff0d8;
  color: #936011;
}

.admin-decision-dialog.is-warning .admin-decision-eyebrow {
  color: #936011;
}

.admin-decision-dialog.is-warning .admin-decision-note {
  background: #fff8ed;
  color: #7f641f;
}

.admin-decision-dialog.is-warning .admin-decision-button.is-confirm {
  background: #e4ad43;
  color: #402b06;
}


/* MARK: Info tone */

.admin-decision-dialog.is-info .admin-decision-icon {
  background: #eaf7f8;
  color: var(--admin-brand-deep);
}


@media (max-width: 560px) {
  .admin-decision-header {
    grid-template-columns: 38px minmax(0, 1fr);
    gap: 11px;
    padding: 18px 17px 15px;
  }

  .admin-decision-icon {
    width: 38px;
    height: 38px;
    border-radius: 12px;
  }

  .admin-decision-heading h3 {
    font-size: 17px;
  }

  .admin-decision-details {
    margin: 0 17px;
  }

  .admin-decision-detail {
    align-items: flex-start;
    flex-direction: column;
  }

  .admin-decision-detail-badge {
    max-width: 100%;
  }

  .admin-decision-note {
    margin-right: 17px;
    margin-left: 17px;
  }

  .admin-decision-actions {
    padding: 14px 17px 17px;
  }

  .admin-decision-button {
    flex: 1;
  }
}


/* =========================================================
   V16.7.1 — BOOKING CANCELLATION MANAGEMENT
   ========================================================= */

.admin-booking-management {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  margin-top: 13px;
  padding: 13px;
  border: 1px solid var(--admin-line);
  border-radius: 13px;
  background: #fbfdfd;
}

.admin-booking-management > div:first-child {
  display: grid;
  gap: 3px;
}

.admin-booking-management strong {
  color: var(--admin-ink);
  font-size: 11px;
}

.admin-booking-management span {
  color: var(--admin-muted);
  font-size: 9px;
  line-height: 1.45;
}

.admin-booking-management-actions {
  display: flex;
  flex: none;
  align-items: center;
  gap: 10px;
}

.admin-secondary-danger-button {
  min-height: 40px;
  padding: 0 15px;
  border: 1px solid #e8bcc2;
  border-radius: 11px;
  background: #fff7f8;
  color: #a23e4b;
  font: inherit;
  font-size: 10px;
  font-weight: 900;
  cursor: pointer;
}

.admin-secondary-danger-button:hover {
  background: #fae9ec;
}

.admin-secondary-danger-button:disabled {
  cursor: default;
  opacity: 0.62;
}

.admin-booking-shell.is-cancelled {
  border-color: #edcbd0;
  background: #fffafa;
}

.admin-booking-badge.is-cancelled {
  background: #fae8eb;
  color: #a34250;
}

.admin-booking-cancelled-note {
  margin-top: 12px;
  padding: 11px 12px;
  border: 1px solid #efd4d8;
  border-radius: 11px;
  background: #fff6f7;
  color: #8f4a54;
  font-size: 9px;
  line-height: 1.5;
}

@media (max-width: 760px) {
  .admin-booking-management {
    align-items: stretch;
    flex-direction: column;
  }

  .admin-booking-management-actions {
    justify-content: space-between;
  }
}


/* =========================================================
   V16.7.2 — FULL-PAGE ADMIN REQUEST WORKSPACE
   ========================================================= */

.request-card {
  text-decoration: none;
}

.admin-request-page-body {
  min-height: 100vh;
  background:
    radial-gradient(
      circle at 80% 0%,
      rgba(57, 209, 225, 0.10),
      transparent 28rem
    ),
    #f6fafb;
}

.admin-request-page {
  min-height: 100vh;
}

.admin-request-page-topbar {
  position: sticky;
  z-index: 30;
  top: 0;
  display: grid;
  min-height: 78px;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 20px;
  padding: 12px clamp(20px, 4vw, 58px);
  border-bottom: 1px solid rgba(204, 226, 229, 0.94);
  background: rgba(255, 255, 255, 0.94);
  box-shadow: 0 5px 24px rgba(17, 59, 64, 0.045);
  backdrop-filter: blur(18px);
}

.admin-request-back {
  display: inline-flex;
  width: fit-content;
  min-height: 40px;
  align-items: center;
  gap: 8px;
  padding: 0 13px;
  border: 1px solid var(--admin-line);
  border-radius: 12px;
  background: #fff;
  color: var(--admin-brand-deep);
  font-size: 11px;
  font-weight: 900;
  text-decoration: none;
}

.admin-request-back:hover {
  border-color: #b9e5e9;
  background: var(--admin-soft);
}

.admin-request-back > span:first-child {
  font-size: 17px;
  line-height: 1;
}

.admin-request-brand {
  display: inline-flex;
  align-items: center;
  justify-self: center;
  gap: 9px;
  color: inherit;
  text-decoration: none;
}

.admin-request-brand img {
  width: 43px;
  height: 43px;
  object-fit: contain;
}

.admin-request-brand > span {
  display: grid;
  gap: 1px;
}

.admin-request-brand strong {
  color: var(--admin-brand-dark);
  font-size: 13px;
}

.admin-request-brand small {
  color: var(--admin-muted);
  font-size: 9px;
  font-weight: 800;
}

.admin-request-page-actions {
  display: flex;
  align-items: center;
  justify-self: end;
  gap: 13px;
}

.admin-request-user {
  display: flex;
  align-items: center;
  gap: 11px;
}

.admin-request-user > span {
  display: grid;
  gap: 1px;
  min-width: 0;
  text-align: right;
}

.admin-request-user strong {
  overflow: hidden;
  max-width: 180px;
  color: var(--admin-ink);
  font-size: 10px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.admin-request-user small {
  overflow: hidden;
  max-width: 180px;
  color: var(--admin-muted);
  font-size: 8px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.admin-request-page-main {
  width: 100%;
  max-width: 1480px;
  margin: 0 auto;
  padding: 36px clamp(24px, 5vw, 74px) 84px;
}

.admin-request-workspace {
  width: 100%;
}

.request-page-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 30px;
  margin-bottom: 22px;
  padding: 28px 30px;
  border: 1px solid var(--admin-line);
  border-radius: 22px;
  background:
    linear-gradient(
      135deg,
      #ffffff,
      #f7fcfd
    );
  box-shadow: 0 12px 38px rgba(17, 59, 64, 0.055);
}

.request-page-header-copy {
  min-width: 0;
}

.request-page-header h1 {
  margin: 6px 0 6px;
  color: var(--admin-ink);
  font-size: clamp(28px, 3vw, 40px);
  line-height: 1.08;
}

.request-page-header p {
  margin: 0;
  color: var(--admin-text);
  font-size: 14px;
  line-height: 1.5;
}

.request-page-header-meta {
  display: grid;
  flex: none;
  gap: 6px;
  justify-items: end;
}

.request-page-header-meta > span {
  color: var(--admin-muted);
  font-size: 8px;
  font-weight: 900;
  letter-spacing: 0.12em;
}

.request-page-header-meta .request-id {
  max-width: 330px;
  padding: 8px 11px;
  font-size: 9px;
}

.request-page-tabs {
  top: 90px;
  z-index: 20;
  margin-bottom: 26px;
  padding: 7px;
  border-radius: 17px;
  box-shadow: 0 6px 24px rgba(17, 59, 64, 0.05);
}

.admin-request-page .request-detail-tab {
  min-height: 42px;
  padding: 0 17px;
  font-size: 12px;
}

.admin-request-page .request-detail-panel {
  min-height: 420px;
}

.admin-request-page .detail-grid {
  gap: 18px;
}

.admin-request-page .detail-card {
  padding: 23px;
  border-radius: 19px;
  background: rgba(255, 255, 255, 0.92);
  box-shadow: 0 6px 22px rgba(17, 59, 64, 0.025);
}

.admin-request-page .detail-card h3 {
  margin-bottom: 16px;
  font-size: 15px;
}

.admin-request-page .detail-list {
  gap: 13px;
}

.admin-request-page .detail-list dd {
  font-size: 13px;
  line-height: 1.5;
}

.admin-request-page .workflow-panel-grid {
  gap: 18px;
}

.admin-request-page .quote-prep-section,
.admin-request-page .admin-message-shell,
.admin-request-page .admin-booking-shell,
.admin-request-page .admin-booking-payment-shell,
.admin-request-page .admin-contract-shell,
.admin-request-page .admin-payment-shell {
  border-radius: 19px;
}

.request-page-photo-loading {
  padding: 42px 18px;
  color: #365b60;
  font-size: 13px;
  text-align: center;
}

.request-page-error {
  display: grid;
  max-width: 720px;
  gap: 12px;
  margin: 80px auto;
  padding: 34px;
  border: 1px solid #f0d0d5;
  border-radius: 22px;
  background: #fff;
  box-shadow: 0 18px 50px rgba(17, 59, 64, 0.08);
}

.request-page-error h1 {
  margin: 0;
  color: var(--admin-ink);
  font-size: 28px;
}

.request-page-error p {
  margin: 0 0 8px;
  color: var(--admin-text);
  font-size: 13px;
  line-height: 1.6;
}

.request-page-error .admin-primary-button {
  width: fit-content;
  text-decoration: none;
}

@media (min-width: 1180px) {
  .admin-request-page .workflow-panel-grid {
    grid-template-columns: minmax(0, 0.82fr) minmax(0, 1.18fr);
  }
}

@media (max-width: 900px) {
  .admin-request-page-topbar {
    grid-template-columns: auto 1fr;
  }

  .admin-request-brand {
    display: none;
  }

  .admin-request-page-actions {
    justify-self: end;
  }

  .admin-request-user > span {
    display: none;
  }

  .request-page-tabs {
    top: 82px;
  }
}

@media (max-width: 760px) {
  .admin-request-page-topbar {
    min-height: 70px;
    gap: 10px;
    padding: 10px 14px;
  }

  .admin-request-back {
    min-height: 38px;
    padding: 0 10px;
  }

  .admin-request-back > span:last-child {
    display: none;
  }

  .admin-request-page-actions {
    gap: 8px;
  }

  .admin-request-page-actions .live-indicator {
    display: none;
  }

  .admin-request-page-main {
    padding: 22px 14px 60px;
  }

  .request-page-header {
    align-items: stretch;
    flex-direction: column;
    gap: 18px;
    padding: 21px 19px;
  }

  .request-page-header-meta {
    justify-items: start;
  }

  .request-page-header-meta .request-id {
    max-width: 100%;
  }

  .request-page-tabs {
    top: 78px;
    margin-bottom: 18px;
  }

  .admin-request-page .detail-card {
    padding: 18px;
  }

  .admin-request-page .request-detail-panel {
    min-height: 300px;
  }
}

@media (max-width: 520px) {
  .admin-request-page .request-detail-tab {
    min-height: 39px;
    padding: 0 12px;
    font-size: 11px;
  }

  .request-page-header h1 {
    font-size: 27px;
  }
}


/* =========================================================
   V16.7.3 — RESCHEDULE BOOKING
   ========================================================= */

.admin-reschedule-open {
  white-space: nowrap;
}

.admin-booking-reschedule-history {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 12px 13px;
  border: 1px solid #cfe7ea;
  border-radius: 12px;
  background: #f5fbfc;
}

.admin-booking-reschedule-history > div {
  display: grid;
  gap: 3px;
}

.admin-booking-reschedule-history span {
  color: var(--admin-muted);
  font-size: 8px;
  font-weight: 900;
  letter-spacing: .08em;
}

.admin-booking-reschedule-history strong {
  color: var(--admin-brand-deep);
  font-size: 10px;
}

.admin-booking-reschedule-history p {
  margin: 0;
  color: var(--admin-text);
  font-size: 9px;
  line-height: 1.45;
  text-align: right;
}

.admin-reschedule-panel {
  display: grid;
  gap: 16px;
  margin-top: 2px;
  padding: 20px;
  border: 1px solid #cce8eb;
  border-radius: 16px;
  background:
    linear-gradient(
      145deg,
      #f8fdfe,
      #ffffff
    );
}

.admin-reschedule-heading {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 18px;
}

.admin-reschedule-heading h4 {
  margin: 4px 0 5px;
  color: var(--admin-ink);
  font-size: 17px;
}

.admin-reschedule-heading p {
  max-width: 680px;
  margin: 0;
  color: var(--admin-text);
  font-size: 11px;
  line-height: 1.55;
}

.admin-reschedule-close {
  min-height: 36px;
  flex: none;
  padding: 0 11px;
  border: 1px solid var(--admin-line);
  border-radius: 10px;
  background: #fff;
  color: var(--admin-muted);
  font: inherit;
  font-size: 10px;
  font-weight: 800;
  cursor: pointer;
}

.admin-reschedule-current {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding: 12px 14px;
  border-radius: 12px;
  background: #eef9fa;
}

.admin-reschedule-current span {
  color: var(--admin-muted);
  font-size: 9px;
  font-weight: 900;
  text-transform: uppercase;
}

.admin-reschedule-current strong {
  color: var(--admin-brand-deep);
  font-size: 11px;
  text-align: right;
}

.admin-reschedule-fields {
  display: grid;
  grid-template-columns: minmax(180px, 1.25fr) repeat(2, minmax(145px, .8fr));
  gap: 12px;
}

.admin-reschedule-fields label {
  display: grid;
  gap: 7px;
  color: var(--admin-text);
  font-size: 10px;
  font-weight: 900;
}

.admin-reschedule-fields input {
  width: 100%;
  min-height: 44px;
  padding: 0 12px;
  border: 1px solid #cfe0e2;
  border-radius: 11px;
  outline: none;
  background: #fff;
  color: var(--admin-ink);
  font: inherit;
}

.admin-reschedule-fields input:focus {
  border-color: var(--admin-brand);
  box-shadow: 0 0 0 3px rgba(57, 209, 225, .11);
}

.admin-reschedule-time-note {
  margin: -4px 0 0;
  color: var(--admin-muted);
  font-size: 9px;
  line-height: 1.5;
}

.admin-reschedule-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 10px;
}

.admin-reschedule-actions > span {
  margin-right: auto;
}

@media (max-width: 860px) {
  .admin-booking-management {
    align-items: stretch;
    flex-direction: column;
  }

  .admin-booking-management-actions {
    flex-wrap: wrap;
    justify-content: flex-end;
  }

  .admin-reschedule-fields {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 620px) {
  .admin-booking-reschedule-history,
  .admin-reschedule-current,
  .admin-reschedule-heading,
  .admin-reschedule-actions {
    align-items: stretch;
    flex-direction: column;
  }

  .admin-booking-reschedule-history p,
  .admin-reschedule-current strong {
    text-align: left;
  }

  .admin-reschedule-actions > span {
    margin-right: 0;
  }

  .admin-reschedule-actions button {
    width: 100%;
  }
}

/* =========================================================
   V16.7.4 — CUSTOMER-REQUESTED SCHEDULE CHANGE WORKFLOW
   ========================================================= */

.admin-schedule-change-card {
  display: grid;
  gap: 14px;
  margin-top: 14px;
  padding: 17px;
  border: 1px solid var(--admin-line);
  border-radius: 15px;
  background: #fbfdfd;
}

.admin-schedule-change-card.is-requested {
  border-color: #c9e8eb;
  background: #f7fcfd;
}

.admin-schedule-change-card.is-approved,
.admin-schedule-change-card.is-signed {
  border-color: #cce8d7;
  background: #f6fcf8;
}

.admin-schedule-change-card.is-unavailable {
  border-color: #efd2d7;
  background: #fff8f8;
}

.admin-schedule-change-heading {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 18px;
}

.admin-schedule-change-heading h4 {
  margin: 4px 0 4px;
  color: var(--admin-ink);
  font-size: 15px;
  line-height: 1.25;
}

.admin-schedule-change-heading p {
  max-width: 760px;
  margin: 0;
  color: var(--admin-muted);
  font-size: 10px;
  line-height: 1.55;
}

.admin-schedule-change-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}

.admin-schedule-change-grid > div,
.admin-schedule-change-proof > div {
  display: grid;
  gap: 5px;
  padding: 12px;
  border: 1px solid var(--admin-line);
  border-radius: 12px;
  background: #fff;
}

.admin-schedule-change-grid span,
.admin-schedule-change-proof span,
.admin-schedule-change-note > span {
  color: var(--admin-muted);
  font-size: 8px;
  font-weight: 900;
  letter-spacing: .09em;
}

.admin-schedule-change-grid strong,
.admin-schedule-change-proof strong {
  color: var(--admin-ink);
  font-size: 11px;
  line-height: 1.45;
}

.admin-schedule-change-note {
  padding: 11px 12px;
  border-radius: 11px;
  background: #f4f9fa;
}

.admin-schedule-change-note p {
  margin: 4px 0 0;
  color: var(--admin-text);
  font-size: 10px;
  line-height: 1.55;
}

.admin-schedule-change-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  flex-wrap: wrap;
  gap: 9px;
}

.admin-schedule-change-actions .admin-booking-status {
  margin-right: auto;
}

.admin-schedule-change-proof {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}

.admin-schedule-change-proof.is-waiting {
  grid-template-columns: 1fr;
  padding: 12px;
  border: 1px solid #d8e9eb;
  border-radius: 12px;
  background: #f6fafb;
}

.admin-schedule-change-proof.is-waiting strong,
.admin-schedule-change-proof.is-waiting span {
  display: block;
}

.admin-schedule-change-proof.is-waiting strong {
  color: var(--admin-ink);
  font-size: 11px;
}

.admin-schedule-change-proof.is-waiting span {
  margin-top: 3px;
  color: var(--admin-muted);
  font-size: 9px;
  line-height: 1.5;
}

@media (max-width: 760px) {
  .admin-schedule-change-heading {
    flex-direction: column;
  }

  .admin-schedule-change-grid,
  .admin-schedule-change-proof {
    grid-template-columns: 1fr;
  }

  .admin-schedule-change-actions {
    align-items: stretch;
    flex-direction: column;
  }

  .admin-schedule-change-actions .admin-booking-status {
    margin-right: 0;
  }
}


/* =========================================================
   V16.7.5 — BOOKING HISTORY & AMENDMENTS
   ========================================================= */

.admin-booking-history {
  margin-top: 16px;
  overflow: hidden;
  border: 1px solid #d8e9eb;
  border-radius: 17px;
  background: rgba(255, 255, 255, 0.82);
}

.admin-booking-history > summary {
  display: flex;
  min-height: 74px;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  padding: 15px 17px;
  cursor: pointer;
  list-style: none;
  user-select: none;
}

.admin-booking-history > summary::-webkit-details-marker {
  display: none;
}

.admin-booking-history > summary:hover {
  background: rgba(57, 209, 225, 0.045);
}

.admin-booking-history > summary > div {
  display: grid;
  min-width: 0;
  gap: 3px;
}

.admin-booking-history > summary strong {
  color: #173f44;
  font-size: 13px;
}

.admin-booking-history > summary small {
  color: #6b8589;
  font-size: 9px;
  font-weight: 800;
}

.admin-booking-history-chevron {
  flex: none;
  color: #177f89;
  font-size: 24px;
  font-weight: 800;
  line-height: 1;
  transform: rotate(90deg);
  transition: transform 0.2s ease;
}

.admin-booking-history[open] .admin-booking-history-chevron {
  transform: rotate(-90deg);
}

.admin-booking-history-body {
  padding: 0 17px 18px;
  border-top: 1px solid #e4eff0;
}

.admin-booking-history-timeline {
  position: relative;
  display: grid;
  gap: 0;
  padding-top: 4px;
}

.admin-booking-history-item {
  position: relative;
  display: grid;
  grid-template-columns: 18px minmax(0, 1fr);
  gap: 11px;
  padding: 17px 0;
}

.admin-booking-history-item:not(:last-child) {
  border-bottom: 1px solid #edf3f4;
}

.admin-booking-history-dot {
  width: 10px;
  height: 10px;
  margin-top: 5px;
  border: 2px solid #fff;
  border-radius: 999px;
  background: #4ec9d6;
  box-shadow: 0 0 0 2px rgba(78, 201, 214, 0.22);
}

.admin-booking-history-item.is-cancelled .admin-booking-history-dot {
  background: #d86878;
  box-shadow: 0 0 0 2px rgba(216, 104, 120, 0.18);
}

.admin-booking-history-item.is-reschedule .admin-booking-history-dot {
  background: #2ba8b5;
}

.admin-booking-history-copy {
  display: grid;
  min-width: 0;
  gap: 8px;
}

.admin-booking-history-title {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px;
}

.admin-booking-history-title strong {
  color: #173f44;
  font-size: 12px;
}

.admin-booking-history-title span {
  flex: none;
  color: #789095;
  font-size: 9px;
  font-weight: 800;
}

.admin-booking-history-copy > p {
  margin: 0;
  color: #607d82;
  font-size: 10px;
  line-height: 1.5;
}

.admin-booking-history-schedule {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  color: #6a8589;
  font-size: 10px;
}

.admin-booking-history-schedule b {
  color: #36aebb;
  font-size: 13px;
}

.admin-booking-history-schedule strong {
  color: #173f44;
}

.admin-booking-history-proof {
  color: #718a8e;
  font-size: 9px;
  line-height: 1.5;
}

.admin-booking-history-proof strong {
  color: #315d62;
}

.admin-booking-amendment {
  margin-top: 3px;
  overflow: hidden;
  border: 1px solid #dcebed;
  border-radius: 13px;
  background: #f8fcfc;
}

.admin-booking-amendment > summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding: 11px 13px;
  cursor: pointer;
  list-style: none;
}

.admin-booking-amendment > summary::-webkit-details-marker {
  display: none;
}

.admin-booking-amendment > summary span {
  color: #1e6670;
  font-size: 10px;
  font-weight: 900;
}

.admin-booking-amendment > summary strong {
  color: #718a8e;
  font-size: 9px;
}

.admin-booking-amendment-body {
  display: grid;
  gap: 13px;
  padding: 13px;
  border-top: 1px solid #e2eeef;
}

.admin-booking-amendment-schedules {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}

.admin-booking-amendment-schedules > div {
  display: grid;
  gap: 4px;
  padding: 11px;
  border: 1px solid #e2edef;
  border-radius: 11px;
  background: #fff;
}

.admin-booking-amendment-schedules span,
.admin-booking-amendment-proof span {
  color: #789095;
  font-size: 8px;
  font-weight: 800;
}

.admin-booking-amendment-schedules strong {
  color: #173f44;
  font-size: 10px;
  line-height: 1.45;
}

.admin-booking-amendment-text {
  margin: 0;
  padding: 12px 13px;
  border-radius: 11px;
  background: #eef8f9;
  color: #527176;
  font-size: 10px;
  line-height: 1.6;
}

.admin-booking-amendment-proof {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 16px;
}

.admin-booking-amendment-proof strong {
  color: #315d62;
}

@media (max-width: 720px) {
  .admin-booking-history-title {
    align-items: flex-start;
    flex-direction: column;
    gap: 4px;
  }

  .admin-booking-amendment-schedules {
    grid-template-columns: 1fr;
  }
}


/* =========================================================
   V16.8.1 — ADMIN INFORMATION HIERARCHY + BREATHING ROOM
   Visual-only polish. No booking/workflow behavior changed.
   ========================================================= */

.admin-request-page .workflow-panel-grid {
  gap: 22px;
}

.admin-request-page .workflow-module-card {
  padding: 0;
  overflow: visible;
  border: 0;
  background: transparent;
  box-shadow: none;
}

.admin-request-page .workflow-module-card > div:empty {
  display: none;
}

.admin-request-page .admin-payment-card,
.admin-request-page .admin-contract-card,
.admin-request-page .admin-booking-shell,
.admin-request-page .admin-booking-payment-card,
.admin-request-page .admin-schedule-change-card,
.admin-request-page .admin-booking-history {
  border-radius: 21px;
  box-shadow: 0 10px 30px rgba(31, 91, 99, .045);
}

.admin-request-page .admin-payment-card,
.admin-request-page .admin-contract-card {
  padding: 23px;
  border: 1px solid rgba(35, 127, 136, .14);
  background: #fbfefe;
}

.admin-request-page .admin-booking-shell,
.admin-request-page .admin-booking-payment-card {
  padding: 23px;
}

.admin-request-page .admin-payment-heading,
.admin-request-page .admin-contract-heading,
.admin-request-page .admin-booking-heading,
.admin-request-page .admin-booking-payment-heading,
.admin-request-page .admin-schedule-change-heading {
  align-items: center;
  padding-bottom: 15px;
  border-bottom: 1px solid #e4edef;
}

.admin-request-page .admin-payment-heading h3,
.admin-request-page .admin-contract-heading h3,
.admin-request-page .admin-booking-heading h3,
.admin-request-page .admin-booking-payment-heading h3 {
  margin-top: 5px;
  color: #173f44;
  font-size: 20px;
  line-height: 1.25;
  letter-spacing: -.01em;
}

.admin-request-page .admin-schedule-change-heading h4 {
  font-size: 18px;
  line-height: 1.3;
}

.admin-request-page .admin-contract-eyebrow,
.admin-request-page .admin-booking-eyebrow,
.admin-request-page .admin-schedule-change-heading .admin-booking-eyebrow {
  color: #167b85;
  font-size: 10px;
  font-weight: 950;
  letter-spacing: .14em;
}

.admin-request-page .admin-payment-heading p,
.admin-request-page .admin-contract-heading p,
.admin-request-page .admin-booking-heading p,
.admin-request-page .admin-booking-payment-heading p,
.admin-request-page .admin-schedule-change-heading p {
  font-size: 11px;
  line-height: 1.7;
}

.admin-request-page .admin-payment-summary > div,
.admin-request-page .admin-booking-checks > div,
.admin-request-page .admin-booking-summary > div,
.admin-request-page .admin-booking-final > div,
.admin-request-page .admin-booking-payment-summary > div,
.admin-request-page .admin-schedule-change-grid > div,
.admin-request-page .admin-schedule-change-proof > div {
  padding: 15px;
}

.admin-request-page .admin-booking-warning,
.admin-request-page .admin-booking-note,
.admin-request-page .admin-payment-unavailable,
.admin-request-page .admin-contract-warning,
.admin-request-page .admin-contract-pending,
.admin-request-page .admin-contract-signed {
  padding: 14px 15px;
  line-height: 1.65;
}

.admin-request-page .admin-booking-history {
  margin-top: 20px;
}

.admin-request-page .admin-booking-history > summary {
  min-height: 84px;
  padding: 18px 20px;
}

.admin-request-page .admin-booking-history > summary strong {
  font-size: 16px;
}

.admin-request-page .admin-booking-history > summary small {
  font-size: 10px;
  line-height: 1.45;
}

.admin-request-page .admin-booking-history-body {
  padding: 2px 20px 20px;
}

.admin-request-page .admin-booking-history-item {
  padding: 19px 0;
}

.admin-request-page .admin-booking-history-title strong {
  font-size: 13px;
}

.admin-request-page .admin-booking-history-title span,
.admin-request-page .admin-booking-history-copy > p,
.admin-request-page .admin-booking-history-schedule,
.admin-request-page .admin-booking-history-proof {
  font-size: 10px;
  line-height: 1.6;
}

.admin-request-page .admin-booking-amendment > summary {
  padding: 13px 15px;
}

.admin-request-page .admin-booking-amendment-body {
  gap: 15px;
  padding: 15px;
}

@media (max-width: 720px) {
  .admin-request-page .admin-payment-card,
  .admin-request-page .admin-contract-card,
  .admin-request-page .admin-booking-shell,
  .admin-request-page .admin-booking-payment-card {
    padding: 18px;
  }

  .admin-request-page .admin-payment-heading,
  .admin-request-page .admin-contract-heading,
  .admin-request-page .admin-booking-heading,
  .admin-request-page .admin-booking-payment-heading,
  .admin-request-page .admin-schedule-change-heading {
    align-items: flex-start;
  }
}


/* =========================================================
   V16.8.3 — ADMIN FULL-PAGE WORKFLOW HIERARCHY
   Major workflow tools are compact, collapsible, and status-aware.
   ========================================================= */

.admin-request-page .workflow-panel-grid {
  gap: 22px;
}

.admin-request-page .admin-workflow-snapshot-card {
  padding: 20px;
  border-color: rgba(37, 111, 120, .12);
  border-radius: 20px;
  box-shadow:
    0 7px 22px rgba(32, 79, 86, .045),
    0 1px 3px rgba(32, 79, 86, .025);
}

.admin-request-page .admin-workflow-snapshot-heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  margin-bottom: 14px;
  padding-bottom: 13px;
  border-bottom: 1px solid #e6eef0;
}

.admin-request-page .admin-workflow-snapshot-heading > div {
  display: grid;
  gap: 4px;
}

.admin-request-page .admin-workflow-snapshot-heading > div > span {
  color: #167b85;
  font-size: 9px;
  font-weight: 950;
  letter-spacing: .14em;
}

.admin-request-page .admin-workflow-snapshot-heading h3 {
  margin: 0;
  color: #163f45;
  font-size: 18px;
  line-height: 1.2;
}

.admin-request-page .admin-workflow-snapshot-stage {
  display: inline-flex;
  min-height: 29px;
  align-items: center;
  padding: 5px 10px;
  border-radius: 999px;
  background: #eaf7f8;
  color: #237b84;
  font-size: 9px;
  font-weight: 900;
  white-space: nowrap;
}

.admin-request-page .admin-workflow-financial-list {
  gap: 10px;
}

.admin-request-page .admin-workflow-financial-list > div {
  min-height: 58px;
  padding: 12px 13px;
  border: 1px solid #e4edef;
  border-radius: 13px;
  background: #fbfefe;
}

.admin-request-page .admin-workflow-major-sections {
  display: grid;
  gap: 15px;
}

.admin-request-page .admin-workflow-accordion {
  overflow: hidden;
  border: 1px solid rgba(37, 111, 120, .13);
  border-radius: 20px;
  background: rgba(255, 255, 255, .97);
  box-shadow:
    0 7px 20px rgba(32, 79, 86, .055),
    0 1px 3px rgba(32, 79, 86, .035);
  transition:
    transform .18s ease,
    border-color .18s ease,
    box-shadow .18s ease,
    background .18s ease;
}

.admin-request-page .admin-workflow-accordion[hidden] {
  display: none !important;
}

.admin-request-page .admin-workflow-accordion:hover {
  border-color: rgba(35, 127, 136, .23);
  box-shadow:
    0 12px 30px rgba(32, 79, 86, .085),
    0 2px 5px rgba(32, 79, 86, .04);
  transform: translateY(-1px);
}

.admin-request-page .admin-workflow-accordion[open] {
  border-color: rgba(35, 127, 136, .2);
  background: #fff;
  box-shadow:
    0 14px 36px rgba(32, 79, 86, .08),
    0 2px 6px rgba(32, 79, 86, .035);
  transform: none;
}

.admin-request-page .admin-workflow-accordion > summary {
  list-style: none;
}

.admin-request-page .admin-workflow-accordion > summary::-webkit-details-marker {
  display: none;
}

.admin-request-page .admin-workflow-accordion-summary {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 18px;
  min-height: 90px;
  padding: 20px;
  cursor: pointer;
  user-select: none;
}

.admin-request-page .admin-workflow-accordion-summary:focus-visible {
  outline: 3px solid rgba(57, 209, 225, .25);
  outline-offset: -3px;
}

.admin-request-page .admin-workflow-accordion-copy {
  display: grid;
  min-width: 0;
  gap: 5px;
}

.admin-request-page .admin-workflow-accordion-title {
  color: #153f45;
  font-size: 20px;
  font-weight: 900;
  line-height: 1.15;
  letter-spacing: -.018em;
}

.admin-request-page .admin-workflow-accordion-subtitle {
  color: #71878b;
  font-size: 10px;
  font-weight: 600;
  line-height: 1.5;
}

.admin-request-page .admin-workflow-accordion-side {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 11px;
}

.admin-request-page .admin-workflow-accordion-badge {
  display: inline-flex;
  min-height: 29px;
  align-items: center;
  justify-content: center;
  padding: 5px 10px;
  border-radius: 999px;
  font-size: 9px;
  font-weight: 900;
  line-height: 1;
  white-space: nowrap;
}

.admin-request-page .admin-workflow-accordion-badge.is-success {
  background: #e3f6ea;
  color: #267349;
}

.admin-request-page .admin-workflow-accordion-badge.is-negative {
  background: #fbe7e9;
  color: #a44351;
}

.admin-request-page .admin-workflow-accordion-badge.is-attention {
  background: #fff5df;
  color: #956414;
}

.admin-request-page .admin-workflow-accordion-badge.is-neutral {
  background: #eaf7f8;
  color: #237b84;
}

.admin-request-page .admin-workflow-accordion-chevron {
  display: grid;
  width: 34px;
  height: 34px;
  flex: 0 0 auto;
  place-items: center;
  border-radius: 999px;
  background: #eef9fa;
  color: #167d87;
  font-size: 25px;
  font-weight: 900;
  line-height: 1;
  transform: rotate(90deg);
  transition: transform .2s ease, background .2s ease;
}

.admin-request-page .admin-workflow-accordion[open]
  .admin-workflow-accordion-chevron {
  transform: rotate(-90deg);
  background: #dcf5f7;
}

.admin-request-page .admin-workflow-accordion[open]
  > .admin-workflow-accordion-summary {
  border-bottom: 1px solid #e5eef0;
  background: linear-gradient(
    90deg,
    rgba(238, 249, 250, .72),
    rgba(255, 255, 255, .96)
  );
}

.admin-request-page .admin-workflow-accordion-body {
  padding: 18px;
}

/* The outer accordion owns depth and the large title. Flatten the old
   module shell so we do not re-create box-inside-box hierarchy. */
.admin-request-page .admin-workflow-accordion-body
  > div
  > .admin-payment-card,
.admin-request-page .admin-workflow-accordion-body
  > div
  > .admin-contract-card,
.admin-request-page .admin-workflow-accordion-body
  > div
  > .admin-booking-shell,
.admin-request-page .admin-workflow-accordion-body
  > div
  > .admin-booking-payment-card {
  margin: 0;
  padding: 3px;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}

.admin-request-page #adminPaymentMount
  > .admin-payment-card
  > .admin-payment-heading,
.admin-request-page #adminContractMount
  > .admin-contract-card
  > .admin-contract-heading,
.admin-request-page #adminBookingMount
  > .admin-booking-shell
  > .admin-booking-heading,
.admin-request-page #adminBookingPaymentMount
  > .admin-booking-payment-card
  > .admin-booking-payment-heading {
  display: none;
}

/* Booking-owned sections moved into their own top-level accordions. */
.admin-request-page #adminScheduleMount
  > .admin-schedule-change-card,
.admin-request-page #adminCancellationMount
  > .admin-booking-shell,
.admin-request-page #adminBookingHistoryMount
  > .admin-booking-history {
  margin: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}

.admin-request-page #adminScheduleMount
  > .admin-schedule-change-card {
  padding: 3px;
}

.admin-request-page #adminCancellationMount
  > .admin-booking-shell {
  padding: 3px;
}

.admin-request-page #adminBookingHistoryMount
  > .admin-booking-history.is-embedded
  > summary {
  display: none;
}

.admin-request-page #adminBookingHistoryMount
  > .admin-booking-history.is-embedded
  > .admin-booking-history-body {
  padding: 0;
}

.admin-request-page #adminBookingHistoryMount
  .admin-booking-history-item:first-child {
  padding-top: 5px;
}

.admin-request-page .admin-workflow-lifecycle-card {
  padding: 0;
  overflow: hidden;
  border-color: rgba(37, 111, 120, .08);
  box-shadow: none;
}

.admin-request-page .admin-workflow-lifecycle-card .next-flow-card {
  border: 0;
  border-radius: 16px;
  background: #f3fbfc;
}

@media (max-width: 720px) {
  .admin-request-page .admin-workflow-accordion-summary {
    grid-template-columns: 1fr;
    min-height: 82px;
    gap: 12px;
    padding: 17px;
  }

  .admin-request-page .admin-workflow-accordion-title {
    font-size: 18px;
  }

  .admin-request-page .admin-workflow-accordion-side {
    justify-content: space-between;
  }

  .admin-request-page .admin-workflow-accordion-badge {
    white-space: normal;
  }

  .admin-request-page .admin-workflow-accordion-body {
    padding: 15px;
  }
}


/* =========================================================
   V16.8.4 — ADMIN WORKSPACE SEPARATION
   Overview / Requests / Calendar / Settings now occupy the
   main canvas one at a time instead of stacking vertically.
   ========================================================= */

/* Sidebar states are intentionally explicit so anchors and buttons
   can never fall back to Safari's gray button appearance. */
.admin-nav-link,
.admin-nav-link:visited {
  border: 0;
  background: transparent;
  color: var(--admin-text);
  appearance: none;
  -webkit-appearance: none;
}

.admin-nav-link:hover {
  background: rgba(57, 209, 225, .09);
  color: var(--admin-brand-deep);
}

.admin-nav-link.is-active,
.admin-nav-link[aria-current="page"] {
  background: rgba(57, 209, 225, .16);
  color: var(--admin-brand-deep);
  box-shadow: inset 3px 0 0 rgba(57, 209, 225, .78);
}

.admin-nav-link:focus-visible {
  outline: 3px solid rgba(57, 209, 225, .22);
  outline-offset: 2px;
}

.admin-workspace[hidden] {
  display: none !important;
}

.admin-workspace {
  animation: adminWorkspaceEnter .18s ease both;
}

@keyframes adminWorkspaceEnter {
  from {
    opacity: 0;
    transform: translateY(5px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Overview stays light and deliberately brief. */
.overview-shortcuts {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
  margin-top: 18px;
}

.overview-shortcut {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 14px;
  min-height: 92px;
  padding: 18px 19px;
  border: 1px solid var(--admin-line);
  border-radius: 18px;
  background: #fff;
  color: var(--admin-ink);
  font: inherit;
  text-align: left;
  cursor: pointer;
  box-shadow: 0 8px 24px rgba(23, 86, 92, .035);
  transition: transform .18s ease, border-color .18s ease, box-shadow .18s ease;
}

.overview-shortcut:hover {
  transform: translateY(-1px);
  border-color: rgba(57, 209, 225, .4);
  box-shadow: 0 12px 28px rgba(23, 86, 92, .065);
}

.overview-shortcut-icon {
  display: grid;
  width: 42px;
  height: 42px;
  place-items: center;
  border-radius: 13px;
  background: rgba(57, 209, 225, .12);
  color: var(--admin-brand-deep);
  font-size: 18px;
}

.overview-shortcut > span:nth-child(2) {
  display: grid;
  gap: 4px;
}

.overview-shortcut strong {
  font-size: 15px;
}

.overview-shortcut small {
  color: var(--admin-muted);
  font-size: 11px;
  line-height: 1.5;
}

.overview-shortcut-arrow {
  color: var(--admin-brand-deep);
  font-size: 25px;
  font-weight: 900;
}

/* Dedicated workspaces use the whole available canvas. */
.requests-section-workspace,
.admin-calendar-section-workspace {
  margin-top: 0;
  min-height: calc(100vh - 190px);
}

.requests-section-workspace {
  padding: 25px;
}

.admin-calendar-section-workspace {
  padding: 25px;
}

/* Settings now has its own page/space. Existing business settings
   still open through their established secure settings component. */
.settings-workspace-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
}

.settings-workspace-card {
  display: grid;
  align-content: start;
  gap: 8px;
  padding: 23px;
  border: 1px solid var(--admin-line);
  border-radius: 20px;
  background: #fff;
  box-shadow: 0 8px 28px rgba(23, 86, 92, .04);
}

.settings-workspace-card-primary {
  grid-column: 1 / -1;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 18px;
  min-height: 150px;
}

.settings-workspace-card-icon {
  display: grid;
  width: 54px;
  height: 54px;
  place-items: center;
  border-radius: 16px;
  background: rgba(57, 209, 225, .13);
  color: var(--admin-brand-deep);
  font-size: 23px;
}

.settings-workspace-card h2,
.settings-workspace-card h3 {
  margin: 4px 0 3px;
  color: var(--admin-ink);
}

.settings-workspace-card h2 {
  font-size: 22px;
}

.settings-workspace-card h3 {
  font-size: 17px;
}

.settings-workspace-card p {
  max-width: 720px;
  margin: 0;
  color: var(--admin-muted);
  font-size: 12px;
  line-height: 1.65;
}

.settings-workspace-kicker {
  color: var(--admin-brand-deep);
  font-size: 10px;
  font-weight: 900;
  letter-spacing: .13em;
}

.settings-workspace-action {
  min-height: 44px;
  padding: 0 17px;
  border: 0;
  border-radius: 13px;
  background: #39d1e1;
  color: #123f45;
  font: inherit;
  font-size: 12px;
  font-weight: 900;
  cursor: pointer;
  box-shadow: 0 8px 20px rgba(57, 209, 225, .18);
}

.settings-workspace-action:hover {
  filter: brightness(.98);
  transform: translateY(-1px);
}

@media (max-width: 900px) {
  .overview-shortcuts,
  .settings-workspace-grid {
    grid-template-columns: 1fr;
  }

  .settings-workspace-card-primary {
    grid-column: auto;
    grid-template-columns: auto minmax(0, 1fr);
  }

  .settings-workspace-action {
    grid-column: 1 / -1;
    width: 100%;
  }
}

@media (max-width: 620px) {
  .overview-shortcut {
    grid-template-columns: auto minmax(0, 1fr);
  }

  .overview-shortcut-arrow {
    display: none;
  }

  .settings-workspace-card-primary {
    grid-template-columns: 1fr;
  }

  .requests-section-workspace,
  .admin-calendar-section-workspace {
    padding: 18px;
  }
}

/* =========================================================
   V17.0 — SHARED MESSAGE PHOTO ATTACHMENTS
   ========================================================= */

.admin-message-photo-tools {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}

.admin-message-photo-tools > span {
  color: var(--admin-muted);
  font-size: 10px;
}

.admin-message-photo-button {
  min-height: 38px;
}

.admin-message-photo {
  position: relative;
  display: grid;
  width: min(100%, 320px);
  min-height: 130px;
  place-items: center;
  overflow: hidden;
  border: 1px solid #dbeaec;
  border-radius: 13px;
  padding: 0;
  background: rgba(57, 209, 225, .10);
  color: var(--admin-brand-deep);
  font: inherit;
  cursor: pointer;
}

.admin-message-photo img {
  display: block;
  width: 100%;
  max-height: 260px;
  object-fit: cover;
}

.admin-message-photo.is-loaded > span {
  display: none;
}

.admin-message-photo.is-error {
  color: var(--admin-danger);
  cursor: default;
}

.admin-message-photo-modal {
  position: fixed;
  z-index: 10000;
  inset: 0;
  display: grid;
  place-items: center;
  padding: 28px;
  background: rgba(8, 18, 20, .88);
}

.admin-message-photo-modal img {
  display: block;
  max-width: min(1200px, 94vw);
  max-height: 88vh;
  border-radius: 16px;
  object-fit: contain;
  box-shadow: 0 24px 80px rgba(0, 0, 0, .36);
}

.admin-message-photo-modal-close {
  position: fixed;
  top: max(18px, env(safe-area-inset-top));
  right: 18px;
  display: grid;
  width: 46px;
  height: 46px;
  place-items: center;
  border: 1px solid rgba(255,255,255,.34);
  border-radius: 999px;
  background: rgba(16, 28, 30, .74);
  color: #fff;
  font-size: 30px;
  line-height: 1;
  cursor: pointer;
}

@media (max-width: 620px) {
  .admin-message-photo-tools {
    align-items: stretch;
    flex-direction: column;
  }
}
