:root {
  --ink: #102027;
  --muted: #607080;
  --line: #dbe8e6;
  --paper: #ffffff;
  --soft: #f6fbfa;
  --accent: #0f8f7f;
  --accent-dark: #086d62;
  --danger: #b42318;
  --warn: #b45309;
  --ok: #147a50;
  --shadow: 0 20px 55px rgba(16, 32, 39, 0.10);
  --shadow-soft: 0 10px 28px rgba(16, 32, 39, 0.08);
  --radius-lg: 18px;
  --radius-md: 14px;
}

* {
  box-sizing: border-box;
}

body {
  margin: 0;
  color: var(--ink);
  background:
    radial-gradient(circle at top right, rgba(15, 143, 127, 0.12), transparent 30%),
    linear-gradient(180deg, #f5fbfa 0%, #eef6f5 100%);
  font-family: "Noto Sans Thai", "Sarabun", "Inter", "Segoe UI", Arial, sans-serif;
  line-height: 1.5;
}

a {
  color: inherit;
  text-decoration: none;
}

.auth-page {
  min-height: 100vh;
  display: grid;
  place-items: center;
  padding: clamp(22px, 4vw, 48px);
  overflow-x: hidden;
  background:
    radial-gradient(circle at 18% 16%, rgba(15, 143, 127, 0.16), transparent 28%),
    linear-gradient(145deg, #f4fbf8 0%, #ffffff 48%, #edf8f5 100%);
}

.login-shell {
  width: min(1140px, 100%);
  min-height: min(760px, calc(100vh - 64px));
  display: grid;
  align-items: stretch;
}

.login-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.08fr) minmax(360px, 0.92fr);
  gap: clamp(18px, 3vw, 36px);
  align-items: center;
}

.login-brand-panel {
  min-height: 620px;
  display: grid;
  align-content: center;
  gap: 32px;
  padding: clamp(28px, 5vw, 64px);
  border: 1px solid rgba(15, 143, 127, 0.18);
  border-radius: 28px;
  color: #ffffff;
  background:
    linear-gradient(135deg, rgba(15, 143, 127, 0.92), rgba(8, 109, 98, 0.96)),
    radial-gradient(circle at 20% 10%, rgba(255, 255, 255, 0.28), transparent 34%);
  box-shadow: 0 28px 70px rgba(8, 109, 98, 0.22);
}

.login-logo-row {
  display: flex;
  align-items: center;
  gap: 14px;
}

.login-logo-mark {
  width: 52px;
  height: 52px;
  display: inline-grid;
  place-items: center;
  border-radius: 16px;
  background: rgba(255, 255, 255, 0.16);
  border: 1px solid rgba(255, 255, 255, 0.28);
  color: #ffffff;
  font-size: 1.1rem;
  font-weight: 900;
}

.login-logo-name {
  display: grid;
  gap: 2px;
  font-weight: 900;
  line-height: 1.2;
}

.login-logo-name span {
  color: rgba(255, 255, 255, 0.72);
  font-size: 0.86rem;
  font-weight: 700;
}

.login-brand-copy {
  display: grid;
  gap: 16px;
}

.login-brand-copy h1 {
  margin: 0;
  max-width: 620px;
  color: #ffffff;
  font-size: clamp(2.4rem, 5vw, 4.6rem);
  line-height: 1.03;
  letter-spacing: 0;
  overflow-wrap: anywhere;
}

.login-brand-copy p {
  margin: 0;
  max-width: 560px;
  color: rgba(255, 255, 255, 0.82);
  font-size: 1.05rem;
}

.feature-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.feature-chips span {
  display: inline-flex;
  align-items: center;
  min-height: 38px;
  padding: 8px 13px;
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 999px;
  color: rgba(255, 255, 255, 0.9);
  background: rgba(255, 255, 255, 0.1);
  font-size: 0.92rem;
  font-weight: 800;
  white-space: nowrap;
}

.login-card,
.auth-card {
  width: min(460px, 100%);
  border: 1px solid var(--line);
  border-radius: 24px;
  background: rgba(255, 255, 255, 0.96);
  box-shadow: var(--shadow);
  padding: clamp(24px, 4vw, 40px);
}

.login-card {
  justify-self: end;
}

.login-badge {
  display: inline-flex;
  align-items: center;
  min-height: 32px;
  margin-bottom: 16px;
  padding: 6px 11px;
  border-radius: 999px;
  color: var(--accent-dark);
  background: rgba(15, 143, 127, 0.1);
  font-size: 0.78rem;
  font-weight: 900;
}

.login-card h1 {
  margin: 0;
  font-size: clamp(1.7rem, 3vw, 2.25rem);
  line-height: 1.18;
  letter-spacing: 0;
  overflow-wrap: anywhere;
}

.login-card-copy {
  margin: 10px 0 0;
  color: var(--muted);
}

.login-helper {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 10px;
  margin-top: 14px;
  color: var(--muted);
  font-size: 0.9rem;
}

.login-legal-links {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  margin: 8px 0 0;
  color: var(--muted);
  font-size: 0.86rem;
  line-height: 1.5;
  text-align: center;
}

.login-legal-links a {
  color: var(--primary);
  font-weight: 800;
  text-decoration: none;
}

.login-legal-links a:hover {
  text-decoration: underline;
}
.login-footer {
  margin-top: 22px;
  color: var(--muted);
  font-size: 0.86rem;
  text-align: center;
}

.login-card .auth-form {
  margin-top: 24px;
  gap: 16px;
}

.login-card input {
  min-height: 52px;
  border-radius: 14px;
}

.login-card button,
body[data-page="login"] .login-card .primary-button {
  width: 100%;
  min-height: 52px;
  border-radius: 14px;
}

.auth-card h1,
.sidebar h1,
.topbar h2 {
  margin: 0;
  overflow-wrap: anywhere;
}

.auth-card h1 {
  font-size: 2rem;
}

.eyebrow {
  margin: 0 0 10px;
  color: var(--accent-dark);
  font-size: 0.78rem;
  font-weight: 900;
  letter-spacing: 0;
  text-transform: uppercase;
}

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

.auth-form,
label {
  display: grid;
  gap: 9px;
}

.auth-form {
  margin-top: 24px;
  gap: 16px;
}

input,
select {
  width: 100%;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #ffffff;
  color: var(--ink);
  font: inherit;
  padding: 12px 13px;
}

textarea {
  width: 100%;
  min-height: 98px;
  resize: vertical;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #ffffff;
  color: var(--ink);
  font: inherit;
  padding: 12px 13px;
}

textarea:focus {
  outline: 3px solid rgba(15, 127, 120, 0.18);
  border-color: var(--accent);
}

input:focus,
select:focus {
  outline: 3px solid rgba(15, 127, 120, 0.18);
  border-color: var(--accent);
}

button,
.primary-link {
  min-height: 44px;
  border-radius: 12px;
  border: 1px solid var(--line);
  background: #ffffff;
  color: var(--ink);
  padding: 11px 15px;
  font: inherit;
  font-weight: 850;
  cursor: pointer;
}

button:disabled {
  cursor: not-allowed;
  opacity: 0.55;
}

.primary-button,
.primary-link {
  border-color: var(--accent);
  background: var(--accent);
  color: #ffffff;
}

.danger-button {
  border-color: var(--danger);
  color: #ffffff;
  background: var(--danger);
}

.ghost-button {
  width: 100%;
  color: var(--muted);
}

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

.sidebar {
  position: sticky;
  top: 0;
  height: 100vh;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  border-right: 1px solid rgba(219, 232, 230, 0.9);
  background: rgba(255, 255, 255, 0.94);
  padding: 24px 20px;
  overflow-y: auto;
  scrollbar-width: none;
  box-shadow: 10px 0 35px rgba(16, 32, 39, 0.05);
}

.sidebar::-webkit-scrollbar {
  display: none;
}

.sidebar h1 {
  color: var(--ink);
  font-size: 1.08rem;
  font-weight: 800;
  letter-spacing: 0;
}

nav {
  display: grid;
  gap: 18px;
  margin: 24px 0 auto;
}

.nav-section {
  display: grid;
  gap: 4px;
}

.nav-title {
  color: var(--muted);
  font-size: 0.68rem;
  font-weight: 800;
  text-transform: uppercase;
  margin: 0 0 9px;
}

nav a {
  border-radius: 12px;
  color: #2d3d43;
  display: flex;
  align-items: center;
  gap: 5px;
  min-height: 42px;
  padding: 10px 12px;
  font-weight: 500;
  line-height: 1.25;
  transition: background-color 0.18s ease, color 0.18s ease, transform 0.18s ease;
}

nav a.active,
nav a:hover {
  color: #063d37;
  background: #e5f6f3;
}

nav a:hover {
  transform: translateX(1px);
}

.nav-primary {
  color: inherit;
  font-weight: 800;
  white-space: nowrap;
}

.nav-secondary {
  color: #374151;
  font-weight: 400;
  overflow-wrap: anywhere;
}

.content {
  width: min(1220px, calc(100% - 36px));
  margin: 0 auto;
  padding: 18px 0 48px;
}

.portal-header {
  position: sticky;
  top: 0;
  z-index: 30;
  margin: 0 0 22px;
  border: 1px solid rgba(219, 232, 230, 0.95);
  border-radius: var(--radius-lg);
  background: rgba(255, 255, 255, 0.92);
  box-shadow: var(--shadow-soft);
  backdrop-filter: blur(18px);
  padding: 18px;
}

.portal-header-main {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 18px;
}

.portal-title-block {
  min-width: 0;
}

.portal-kicker,
.portal-subtitle {
  margin: 0;
  color: var(--muted);
}

.portal-kicker {
  color: var(--accent-dark);
  font-size: 0.82rem;
  font-weight: 800;
}

.portal-title-block h1 {
  margin: 3px 0 4px;
  color: var(--ink);
  font-size: clamp(1.35rem, 2.1vw, 2rem);
  line-height: 1.18;
  letter-spacing: 0;
}

.portal-subtitle {
  max-width: 760px;
  font-size: 0.94rem;
}

.portal-header-actions,
.portal-header-meta {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px;
}

.portal-header-actions {
  justify-content: flex-end;
}

.portal-header-meta {
  margin-top: 14px;
}

.tenant-chip,
.branch-chip,
.env-chip,
.user-chip,
.system-status,
.ai-chip {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  min-height: 34px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: #ffffff;
  color: #244049;
  padding: 7px 11px;
  font-size: 0.86rem;
  font-weight: 750;
  white-space: nowrap;
}

.system-status {
  border-color: rgba(15, 143, 127, 0.28);
  background: #ecfbf8;
  color: #086d62;
}

.status-dot {
  width: 8px;
  height: 8px;
  border-radius: 999px;
  background: var(--accent);
  box-shadow: 0 0 0 4px rgba(15, 143, 127, 0.12);
}

.ai-chip {
  color: #5d6d74;
  background: #f7faf9;
  cursor: pointer;
  border-color: rgba(15, 143, 127, 0.22);
}

.language-switcher {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  min-height: 38px;
  padding: 4px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: #f7fbfa;
}

.language-switcher button {
  min-height: 30px;
  border: 0;
  border-radius: 999px;
  background: transparent;
  color: var(--muted);
  padding: 6px 11px;
  font-size: 0.82rem;
  font-weight: 900;
}

.language-switcher button.active {
  background: var(--accent);
  color: #ffffff;
  box-shadow: 0 8px 18px rgba(15, 143, 127, 0.22);
}

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

.topbar-clean {
  justify-content: flex-end;
  margin: 0 0 16px;
}

.topbar-clean .topbar-title-block,
.topbar-clean #admin-label,
.topbar-clean h2 {
  display: none;
}

.topbar-empty {
  display: none;
}

.metrics {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 14px;
  margin-bottom: 18px;
}

.metrics article,
.panel,
.detail-card {
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  background: var(--paper);
  box-shadow: var(--shadow-soft);
}

.metrics article {
  min-height: 118px;
  padding: 18px;
}

.metrics span {
  display: block;
  color: var(--muted);
  font-size: 0.92rem;
}

.metrics strong {
  display: block;
  margin-top: 12px;
  font-size: 1.9rem;
}

.panel {
  padding: 20px;
}

.narrow-panel {
  max-width: 680px;
}

.panel-head {
  display: flex;
  justify-content: space-between;
  gap: 14px;
  align-items: center;
  margin-bottom: 14px;
}

.panel-head h3 {
  margin: 0;
}

.table-wrap {
  overflow-x: auto;
  border-radius: var(--radius-md);
}

.staff-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(320px, 380px);
  gap: 18px;
  align-items: start;
}

.staff-hero {
  margin-bottom: 18px;
}

.staff-table {
  min-width: 980px;
}

.staff-editor {
  position: sticky;
  top: 150px;
}

.compact-select {
  min-width: 128px;
  padding: 8px 10px;
  border-radius: 10px;
  font-size: 0.92rem;
}

.compact-action {
  min-width: 96px;
  min-height: 38px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 8px 12px;
  white-space: nowrap;
}

.form-actions {
  display: flex;
  gap: 10px;
  align-items: center;
  flex-wrap: wrap;
}

.audit-hero {
  margin-bottom: 18px;
}

.audit-filters {
  display: grid;
  grid-template-columns: repeat(6, minmax(130px, 1fr)) auto;
  gap: 12px;
  align-items: end;
  margin-bottom: 16px;
}

.audit-table {
  min-width: 1080px;
}

.pagination-row {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  gap: 12px;
  margin-top: 14px;
}

.audit-detail {
  margin-top: 18px;
}

.audit-detail.hidden {
  display: none;
}

.audit-detail-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
  margin-bottom: 14px;
}

.audit-detail-grid article {
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--soft);
  padding: 12px;
}

.audit-detail-grid span {
  display: block;
  color: var(--muted);
  font-size: 0.82rem;
}

.audit-detail-grid strong {
  display: block;
  margin-top: 4px;
  overflow-wrap: anywhere;
}

.audit-json {
  overflow-x: auto;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: #0f172a;
  color: #e5f3f1;
  padding: 14px;
  font-size: 0.86rem;
  line-height: 1.55;
}

.ai-overlay {
  position: fixed;
  inset: 0;
  z-index: 80;
  display: none;
  justify-content: flex-end;
  background: rgba(15, 23, 42, 0.28);
  backdrop-filter: blur(5px);
}

.ai-overlay.open {
  display: flex;
}

.ai-drawer {
  width: min(460px, calc(100vw - 24px));
  min-height: 100vh;
  overflow-y: auto;
  border-left: 1px solid var(--line);
  background: linear-gradient(180deg, #ffffff 0%, #f6fbfa 100%);
  box-shadow: -22px 0 55px rgba(16, 32, 39, 0.18);
  padding: 22px;
}

.ai-drawer-head {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 14px;
  margin-bottom: 18px;
}

.ai-drawer-head h2 {
  margin: 0 0 6px;
}

.ai-safety-note {
  display: grid;
  gap: 8px;
  margin-bottom: 16px;
}

.ai-safety-note span {
  border: 1px solid rgba(15, 143, 127, 0.22);
  border-radius: 999px;
  background: #ecfbf8;
  color: var(--accent-dark);
  padding: 9px 12px;
  font-weight: 750;
}

.ai-suggestion-list {
  display: grid;
  gap: 12px;
}

.ai-suggestion-card {
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  background: #ffffff;
  box-shadow: var(--shadow-soft);
  padding: 14px;
}

.ai-suggestion-card span {
  display: block;
  color: var(--muted);
  font-size: 0.82rem;
}

.ai-suggestion-card strong {
  display: block;
  margin: 6px 0 12px;
  line-height: 1.35;
}

table {
  width: 100%;
  border-collapse: collapse;
  min-width: 1040px;
  background: #ffffff;
}

th,
td {
  border-bottom: 1px solid var(--line);
  padding: 16px 12px;
  text-align: left;
  vertical-align: middle;
}

th {
  color: var(--muted);
  font-size: 0.84rem;
  white-space: nowrap;
  font-weight: 850;
}

.badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
  min-width: 74px;
  padding: 6px 10px;
  font-size: 0.78rem;
  font-weight: 900;
  background: #edf2f3;
  color: var(--muted);
  white-space: nowrap;
}

.badge.pending {
  color: var(--warn);
  background: #fff7ed;
}

.badge.confirmed,
.badge.paid {
  color: var(--ok);
  background: #edfdf4;
}

.badge.cancelled,
.badge.failed {
  color: var(--danger);
  background: #fff1f0;
}

.badge.maintenance {
  color: #92400e;
  background: #fff7ed;
}

.badge.inactive {
  color: #475569;
  background: #f1f5f9;
}

.booking-code {
  font-family: "SFMono-Regular", Consolas, "Liberation Mono", monospace;
  font-size: 0.95rem;
  letter-spacing: 0;
  white-space: nowrap;
}

.date-cell {
  min-width: 164px;
  white-space: nowrap;
}

.date-line {
  display: block;
  line-height: 1.45;
}

.amount-cell {
  min-width: 132px;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}

.payment-cell {
  min-width: 104px;
}

.action-cell {
  width: 150px;
  text-align: center;
}

.action-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 120px;
  white-space: nowrap;
  padding: 10px 14px;
}

.vehicle-editor[hidden] {
  display: none;
}

.compact-button {
  width: auto;
  min-height: 38px;
  padding: 8px 12px;
}

.calendar-filters {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 12px;
  align-items: end;
}

.calendar-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.35fr) minmax(320px, 0.65fr);
  gap: 16px;
}

.calendar-list,
.availability-list {
  display: grid;
  gap: 16px;
}

.calendar-day h4 {
  margin: 0 0 10px;
}

.booking-card-list,
.availability-list {
  display: grid;
  gap: 12px;
}

.booking-calendar-card,
.availability-card {
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #ffffff;
  display: grid;
  gap: 10px;
  padding: 14px;
}

.booking-calendar-card.success {
  border-left: 5px solid var(--ok);
}

.booking-calendar-card.warning {
  border-left: 5px solid var(--warn);
}

.booking-calendar-card.danger {
  border-left: 5px solid var(--danger);
}

.booking-calendar-card.active {
  border-left: 5px solid var(--accent);
}

.booking-calendar-card.done {
  border-left: 5px solid #64748b;
}

.calendar-card-footer {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px;
}

.status-pill.ready {
  border-color: #16a34a;
  color: #166534;
  background: #f0fdf4;
}

.status-pill.busy {
  border-color: #f59e0b;
  color: #92400e;
  background: #fff7ed;
}

.slot-list {
  display: grid;
  gap: 8px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.slot-list li {
  display: grid;
  gap: 2px;
  border-top: 1px solid var(--line);
  padding-top: 8px;
}

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

.detail-card {
  padding: 18px;
}

.detail-card h3 {
  margin: 0 0 12px;
}

.info-list {
  display: grid;
  gap: 8px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.info-list li {
  display: flex;
  justify-content: space-between;
  gap: 14px;
  border-bottom: 1px solid var(--line);
  padding: 8px 0;
}

.info-list strong {
  text-align: right;
}

.action-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.message {
  display: none;
  margin-top: 14px;
  border-radius: 8px;
  padding: 12px 14px;
  font-weight: 850;
}

.message.show {
  display: block;
}

.message.ok {
  color: var(--ok);
  background: #edfdf4;
}

.message.error {
  color: var(--danger);
  background: #fff1f0;
}

.message.info {
  color: var(--accent-dark);
  background: #e8f5f4;
}

.loading {
  color: var(--muted);
  padding: 18px;
}

.back-link {
  display: inline-block;
  margin-bottom: 8px;
  color: var(--accent-dark);
  font-weight: 850;
}

.filter {
  min-width: 220px;
}

.module-content {
  display: grid;
  gap: 16px;
}

.module-hero {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 18px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--paper);
  box-shadow: var(--shadow);
  padding: clamp(20px, 4vw, 30px);
}

.module-hero h2,
.module-hero p {
  margin: 0;
}

.module-hero p:not(.eyebrow) {
  color: var(--muted);
  margin-top: 10px;
  max-width: 760px;
}

.status-pill {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid #f59e0b;
  border-radius: 999px;
  background: #fff7ed;
  color: #92400e;
  font-size: 0.78rem;
  font-weight: 900;
  padding: 8px 12px;
  white-space: nowrap;
}

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

.permission-shell {
  margin-top: 18px;
}

.permission-table {
  min-width: 920px;
}

.permission-table th,
.permission-table td {
  text-align: center;
}

.permission-table th:first-child,
.permission-table td:first-child {
  text-align: left;
  min-width: 150px;
}

.permission-dot {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  border-radius: 999px;
  border: 1px solid var(--line);
  color: var(--muted);
  background: #f7fbfa;
  font-weight: 900;
}

.permission-dot.allowed {
  color: #ffffff;
  border-color: var(--accent);
  background: var(--accent);
  box-shadow: 0 8px 18px rgba(15, 143, 127, 0.22);
}

.submodule-list {
  display: grid;
  gap: 10px;
  margin: 0;
  padding-left: 18px;
}

.submodule-list li {
  color: var(--muted);
}

.submodule-list li::marker {
  color: var(--ok);
}

.submodule-list.missing li::marker {
  color: var(--warn);
}

.settings-form {
  display: grid;
  gap: 22px;
}

.settings-section {
  display: grid;
  gap: 14px;
  border-bottom: 1px solid var(--line);
  padding-bottom: 20px;
}

.settings-section:last-of-type {
  border-bottom: 0;
}

.settings-section h3 {
  margin: 0;
}

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

.span-2 {
  grid-column: 1 / -1;
}

.checkbox-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}

.check-row {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  min-height: 46px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #ffffff;
  padding: 10px 12px;
}

.check-row input {
  width: auto;
}

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


.business-center-breadcrumb {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
  margin: 0 0 14px;
  color: var(--muted);
  font-size: 0.86rem;
  font-weight: 750;
}

.business-center-breadcrumb a {
  color: var(--accent-dark);
  font-weight: 900;
}

.business-center-hero {
  align-items: stretch;
}

.business-center-grid {
  display: grid;
  grid-template-columns: minmax(240px, 0.85fr) minmax(0, 1.15fr);
  gap: 16px;
  margin-top: 16px;
}

.business-center-status-card {
  display: flex;
  align-items: flex-start;
  gap: 12px;
}

.business-center-status-card .status-dot {
  margin-top: 6px;
}

.business-center-status-card h3,
.business-center-empty-state h3 {
  margin: 0 0 6px;
  font-size: 1rem;
}

.business-center-status-card p,
.business-center-empty-state p {
  margin: 0;
  color: var(--muted);
}

.business-center-empty-state {
  min-height: 220px;
  display: grid;
  align-content: center;
  gap: 10px;
  background: linear-gradient(180deg, #ffffff 0%, #f6fbfa 100%);
}

.business-center-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 8px;
}

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

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

  .sidebar {
    position: static;
    height: auto;
    gap: 18px;
  }

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

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

  .portal-header {
    top: 0;
  }

  .portal-header-main {
    align-items: stretch;
    flex-direction: column;
  }

  .portal-header-actions {
    justify-content: flex-start;
  }

  .portal-header-meta {
    align-items: stretch;
  }

  .tenant-chip,
  .branch-chip,
  .env-chip,
  .user-chip,
  .system-status,
  .ai-chip {
    max-width: 100%;
    white-space: normal;
  }

  .calendar-filters,
  .calendar-grid {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 620px) {
  .content {
    width: min(100% - 22px, 1180px);
    padding-top: 18px;
  }

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

  .module-hero {
    flex-direction: column;
  }

  .status-pill {
    white-space: normal;
  }

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

  .form-actions {
    align-items: stretch;
    flex-direction: column;
  }

  .panel-head,
  .action-grid {
    align-items: stretch;
    flex-direction: column;
  }

  .portal-header {
    border-radius: var(--radius-md);
    padding: 15px;
  }

  .portal-header-meta,
  .portal-header-actions {
    gap: 8px;
  }

  .action-grid button,
  .primary-link {
    width: 100%;
    text-align: center;
  }

  .table-wrap {
    overflow-x: visible;
  }

  table {
    min-width: 0;
  }

  table,
  thead,
  tbody,
  tr,
  th,
  td {
    display: block;
  }

  thead {
    display: none;
  }

  tr {
    border: 1px solid var(--line);
    border-radius: 8px;
    background: #ffffff;
    margin-bottom: 12px;
    padding: 10px;
  }

  td {
    display: flex;
    justify-content: space-between;
    gap: 14px;
    border-bottom: 1px solid var(--line);
    padding: 10px 4px;
  }

  td::before {
    content: attr(data-label);
    color: var(--muted);
    font-weight: 850;
  }

  td:last-child {
    border-bottom: 0;
  }

  .action-cell {
    width: 100%;
  }

  .action-link {
    width: 100%;
  }
}

/* Vehicle compact luxury layout 2026-06-19 */
body[data-page="vehicles"] {
  background:
    linear-gradient(135deg, rgba(15, 143, 127, 0.08), transparent 34%),
    linear-gradient(180deg, #f8fbfa 0%, #eef6f5 100%);
}

body[data-page="vehicles"] .content {
  width: min(1160px, calc(100% - 28px));
  padding-top: 12px;
}

body[data-page="vehicles"] .topbar {
  align-items: flex-start;
  margin-bottom: 14px;
}

body[data-page="vehicles"] .topbar h2 {
  font-size: 1.42rem;
  line-height: 1.18;
}

body[data-page="vehicles"] #vehicle-new-button {
  min-height: 38px;
  border-radius: 10px;
  padding: 8px 14px;
  box-shadow: 0 10px 22px rgba(15, 143, 127, 0.18);
}

body[data-page="vehicles"] .panel {
  border-color: rgba(199, 218, 216, 0.9);
  border-radius: 14px;
  padding: 16px 18px 18px;
  box-shadow: 0 16px 38px rgba(16, 32, 39, 0.075);
}

body[data-page="vehicles"] .vehicle-toolbar {
  display: grid;
  grid-template-columns: 96px minmax(170px, 1.05fr) minmax(132px, 0.7fr) minmax(132px, 0.7fr) minmax(150px, 0.8fr) minmax(138px, 0.72fr);
  gap: 10px 12px;
  align-items: end;
  margin-bottom: 12px;
}

body[data-page="vehicles"] .vehicle-toolbar h3 {
  align-self: center;
  font-size: 1rem;
  letter-spacing: 0;
  white-space: nowrap;
}

body[data-page="vehicles"] .filter {
  min-width: 0;
  gap: 5px;
}

body[data-page="vehicles"] .filter span {
  color: #263d45;
  font-size: 0.76rem;
  font-weight: 700;
}

body[data-page="vehicles"] .filter input,
body[data-page="vehicles"] .filter select {
  min-height: 38px;
  border-radius: 9px;
  border-color: rgba(196, 215, 212, 0.95);
  background: linear-gradient(180deg, #ffffff 0%, #fbfefd 100%);
  padding: 8px 11px;
  font-size: 0.88rem;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.9);
}

body[data-page="vehicles"] .table-wrap {
  border-radius: 10px;
}

body[data-page="vehicles"] table {
  min-width: 980px;
  font-size: 0.88rem;
}

body[data-page="vehicles"] th,
body[data-page="vehicles"] td {
  padding: 10px 12px;
}

body[data-page="vehicles"] th {
  color: #667789;
  font-size: 0.74rem;
  letter-spacing: 0;
}

body[data-page="vehicles"] td {
  color: #4c6073;
  line-height: 1.35;
}

body[data-page="vehicles"] td:first-child,
body[data-page="vehicles"] .booking-code,
body[data-page="vehicles"] .amount-cell {
  color: #506174;
  font-size: 0.83rem;
  font-weight: 850;
}

body[data-page="vehicles"] .amount-cell {
  color: #425568;
  min-width: 112px;
}

body[data-page="vehicles"] .badge {
  min-width: 0;
  padding: 5px 9px;
  font-size: 0.7rem;
  background: #eef4f4;
  color: #526577;
}

body[data-page="vehicles"] .action-cell {
  width: 104px;
}

body[data-page="vehicles"] .action-cell .primary-button,
body[data-page="vehicles"] .action-cell button,
body[data-page="vehicles"] .action-link {
  min-width: 86px;
  min-height: 36px;
  border-radius: 10px;
  padding: 7px 12px;
  font-size: 0.86rem;
  box-shadow: 0 8px 18px rgba(15, 143, 127, 0.16);
}

body[data-page="vehicles"] .vehicle-editor {
  margin-top: 14px;
}

body[data-page="vehicles"] .vehicle-editor .form-grid {
  gap: 12px;
}

body[data-page="vehicles"] .vehicle-editor input,
body[data-page="vehicles"] .vehicle-editor select,
body[data-page="vehicles"] .vehicle-editor textarea {
  padding: 9px 11px;
  font-size: 0.9rem;
}

@media (max-width: 1120px) {
  body[data-page="vehicles"] .vehicle-toolbar {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  body[data-page="vehicles"] .vehicle-toolbar h3 {
    grid-column: 1 / -1;
  }
}

@media (max-width: 720px) {
  body[data-page="vehicles"] .content {
    width: min(100% - 18px, 1160px);
  }

  body[data-page="vehicles"] .panel {
    padding: 14px 12px;
  }

  body[data-page="vehicles"] .vehicle-toolbar {
    grid-template-columns: 1fr;
  }
}

/* Trial setup dashboard widget 2026-06-19 */
.trial-setup-panel {
  margin-bottom: 18px;
}

.trial-setup-widget {
  display: grid;
  gap: 14px;
}

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

.trial-setup-grid article {
  border: 1px solid var(--line);
  border-radius: 10px;
  background: #f8fbfa;
  padding: 12px;
}

.trial-setup-grid span,
.trial-checklist span {
  color: var(--muted);
}

.trial-setup-grid strong {
  display: block;
  margin-top: 4px;
}

.trial-checklist {
  display: grid;
  gap: 8px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.trial-checklist li {
  display: grid;
  grid-template-columns: 30px minmax(0, 1fr) auto;
  gap: 10px;
  align-items: center;
  border-bottom: 1px solid var(--line);
  padding: 8px 0;
}

.trial-actions .primary-link {
  min-width: 124px;
}

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

  .trial-checklist li {
    grid-template-columns: 30px minmax(0, 1fr);
  }

  .trial-checklist li strong {
    grid-column: 2;
  }
}


.integration-timeline-card { grid-column: 1 / -1; }
.integration-timeline { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
.integration-timeline-item { display: grid; grid-template-columns: 14px minmax(0, 1fr); gap: 10px; align-items: start; padding: 10px 0; border-bottom: 1px solid rgba(15, 118, 110, 0.14); }
.integration-timeline-item:last-child { border-bottom: 0; }
.integration-timeline-item .timeline-dot { width: 10px; height: 10px; border-radius: 999px; margin-top: 5px; background: #0f766e; box-shadow: 0 0 0 4px rgba(15, 118, 110, 0.12); }
.integration-timeline-item.failed .timeline-dot,
.integration-timeline-item.error .timeline-dot { background: #b91c1c; box-shadow: 0 0 0 4px rgba(185, 28, 28, 0.12); }
.integration-timeline-item.retrying .timeline-dot,
.integration-timeline-item.queued .timeline-dot { background: #b45309; box-shadow: 0 0 0 4px rgba(180, 83, 9, 0.14); }
.integration-timeline-item p { margin: 3px 0; color: #475569; }
.integration-timeline-item small { color: #64748b; font-weight: 700; }


nav a.nav-child {
  min-height: 32px;
  margin: -2px 0 2px 14px;
  padding: 7px 10px 7px 18px;
  border-radius: 8px;
  position: relative;
  font-size: 13px;
  color: #31535a;
}

nav a.nav-child::before {
  content: "";
  position: absolute;
  left: 4px;
  top: -8px;
  width: 10px;
  height: 22px;
  border-left: 1px solid #8fb8b2;
  border-bottom: 1px solid #8fb8b2;
}

nav a.nav-child .nav-primary {
  font-weight: 700;
}

nav a.nav-child.active,
nav a.nav-child:hover {
  background: #d9f4ef;
  color: #005e52;
}


/* Staff compact boundary layout 2026-06-20 */
html,
body {
  max-width: 100%;
  overflow-x: hidden;
}

body[data-module="staff"] .content {
  width: min(100% - 24px, 1480px);
  padding-top: 14px;
  padding-bottom: 18px;
}

body[data-module="staff"] .portal-header,
body[data-module="staff"] .module-hero,
body[data-module="staff"] .panel {
  border-radius: 8px;
}

body[data-module="staff"] .portal-header {
  margin-bottom: 14px;
}

body[data-module="staff"] .module-content {
  gap: 12px;
}

body[data-module="staff"] .module-hero {
  padding: 18px 20px;
  margin-bottom: 10px;
}

body[data-module="staff"] .staff-grid {
  grid-template-columns: minmax(0, 1fr) minmax(280px, 340px);
  gap: 14px;
  max-width: 100%;
}

body[data-module="staff"] .panel {
  min-width: 0;
  padding: 16px 18px;
}

body[data-module="staff"] .panel-head {
  gap: 10px;
  margin-bottom: 10px;
}

body[data-module="staff"] .table-wrap {
  max-width: 100%;
  overflow-x: hidden;
}

body[data-module="staff"] table,
body[data-module="staff"] .staff-table,
body[data-module="staff"] .permission-table {
  min-width: 0;
  width: 100%;
  table-layout: fixed;
}

body[data-module="staff"] th,
body[data-module="staff"] td {
  padding: 10px 8px;
  overflow-wrap: anywhere;
}

body[data-module="staff"] th {
  white-space: normal;
  line-height: 1.25;
}

body[data-module="staff"] .staff-table th:nth-child(1),
body[data-module="staff"] .staff-table td:nth-child(1) { width: 22%; }
body[data-module="staff"] .staff-table th:nth-child(2),
body[data-module="staff"] .staff-table td:nth-child(2) { width: 25%; }
body[data-module="staff"] .staff-table th:nth-child(3),
body[data-module="staff"] .staff-table td:nth-child(3) { width: 15%; }
body[data-module="staff"] .staff-table th:nth-child(4),
body[data-module="staff"] .staff-table td:nth-child(4) { width: 15%; }
body[data-module="staff"] .staff-table th:nth-child(5),
body[data-module="staff"] .staff-table td:nth-child(5) { width: 14%; }
body[data-module="staff"] .staff-table th:nth-child(6),
body[data-module="staff"] .staff-table td:nth-child(6) { width: 9%; }

body[data-module="staff"] .compact-select {
  min-width: 0;
  width: 100%;
  max-width: 128px;
  padding: 7px 8px;
}

body[data-module="staff"] .compact-action {
  min-width: 74px;
  min-height: 34px;
  padding: 7px 9px;
}

body[data-module="staff"] .staff-editor {
  position: static;
  top: auto;
}

body[data-module="staff"] .staff-editor .settings-form {
  gap: 12px;
}

body[data-module="staff"] .staff-editor input,
body[data-module="staff"] .staff-editor select {
  min-height: 40px;
  padding: 9px 11px;
}

body[data-module="staff"] .permission-shell {
  margin-top: 10px;
}

body[data-module="staff"] .permission-table th,
body[data-module="staff"] .permission-table td {
  padding: 9px 6px;
  font-size: 0.82rem;
}

body[data-module="staff"] .permission-table th:first-child,
body[data-module="staff"] .permission-table td:first-child {
  min-width: 0;
  width: 11%;
}

body[data-module="staff"] .permission-dot {
  width: 28px;
  height: 28px;
}

@media (max-width: 1280px) {
  body[data-module="staff"] .staff-grid {
    grid-template-columns: 1fr;
  }

  body[data-module="staff"] .staff-editor .settings-form {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    align-items: end;
  }

  body[data-module="staff"] .staff-editor .form-actions {
    grid-column: 1 / -1;
  }
}

@media (max-width: 760px) {
  body[data-module="staff"] .content {
    width: min(100% - 18px, 1480px);
  }

  body[data-module="staff"] .staff-editor .settings-form {
    grid-template-columns: 1fr;
  }

  body[data-module="staff"] .table-wrap {
    overflow-x: visible;
  }

  body[data-module="staff"] .permission-table th,
  body[data-module="staff"] .permission-table td {
    font-size: 0.78rem;
  }
}

.role-matrix-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
  flex-wrap: wrap;
}

.compact-button {
  min-height: 34px;
  padding: 8px 12px;
  white-space: nowrap;
}

.permission-toggle {
  width: 46px;
  height: 26px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}

.permission-toggle input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

.permission-toggle span {
  width: 42px;
  height: 24px;
  border-radius: 999px;
  border: 1px solid #c7dad7;
  background: #eef7f5;
  position: relative;
  transition: background .16s ease, border-color .16s ease;
}

.permission-toggle span::after {
  content: '';
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: #ffffff;
  box-shadow: 0 1px 4px rgba(14, 47, 43, .16);
  position: absolute;
  left: 3px;
  top: 2px;
  transition: transform .16s ease;
}

.permission-toggle input:checked + span {
  background: #089c86;
  border-color: #089c86;
}

.permission-toggle input:checked + span::after {
  transform: translateX(18px);
}

.permission-toggle input:disabled + span {
  opacity: .55;
  cursor: not-allowed;
}

.restricted-panel {
  border-color: #f0c27a;
  background: #fffaf0;
}

@media (max-width: 760px) {
  .role-matrix-actions {
    justify-content: flex-start;
  }
  .permission-toggle {
    width: 40px;
  }
}

.payment-hero {
  border-color: #bde8dc;
  background: linear-gradient(135deg, #ffffff 0%, #eefaf5 100%);
}

.payment-ready {
  background: #dcfce7;
  color: #166534;
  border-color: #86efac;
}

.payment-metrics {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
  margin: 16px 0;
}

.payment-metric {
  min-height: 92px;
  border: 1px solid #d9ebe5;
  border-radius: 8px;
  background: #fff;
  padding: 14px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.payment-metric span {
  color: #527064;
  font-size: 12px;
  font-weight: 700;
}

.payment-metric strong {
  color: #0f2f25;
  font-size: 20px;
  line-height: 1.2;
  overflow-wrap: anywhere;
}

.payment-actions {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px;
  margin: 12px 0 18px;
}

.payment-actions span {
  color: #8a5a11;
  font-size: 12px;
  font-weight: 800;
}

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

.table-scroll {
  overflow-x: auto;
}

.payment-table-grid table {
  width: 100%;
  border-collapse: collapse;
  min-width: 520px;
}

.payment-table-grid th,
.payment-table-grid td {
  border-bottom: 1px solid #e4efeb;
  padding: 10px 8px;
  text-align: left;
  font-size: 13px;
}

.payment-table-grid th {
  color: #45645a;
  font-size: 11px;
  text-transform: uppercase;
}

@media (max-width: 920px) {
  .payment-metrics,
  .payment-table-grid {
    grid-template-columns: 1fr;
  }
}

/* Booking Management A++ */
body[data-page="bookings"] .content {
  width: min(100% - 28px, 1560px);
}

body[data-page="bookings"] .booking-hero {
  align-items: center;
  padding: 20px 22px;
}

.booking-metrics {
  grid-template-columns: repeat(7, minmax(140px, 1fr));
  gap: 12px;
}

.booking-metrics article {
  min-height: 82px;
  border-radius: 8px;
  padding: 13px 14px;
}

.booking-filter-panel,
.booking-table-panel {
  border-radius: 8px;
}

.booking-filter-grid {
  display: grid;
  grid-template-columns: minmax(240px, 1.4fr) repeat(3, minmax(150px, 1fr)) repeat(4, minmax(138px, 0.8fr));
  gap: 12px;
  align-items: end;
}

.booking-filter-grid label {
  min-width: 0;
  gap: 6px;
}

.booking-filter-grid span {
  color: #4d626c;
  font-size: 0.78rem;
  font-weight: 800;
}

.booking-filter-grid input,
.booking-filter-grid select {
  min-height: 40px;
  padding: 9px 11px;
}

.booking-toolbar {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
  margin-top: 14px;
}

.booking-toolbar .compact-button {
  width: auto;
  min-width: 128px;
}

.booking-table-wrap {
  max-width: 100%;
  border: 1px solid var(--line);
  background: #ffffff;
  overflow-x: auto;
}

.booking-management-table {
  min-width: 1320px;
  font-size: 0.86rem;
}

.booking-management-table th,
.booking-management-table td {
  padding: 11px 10px;
}

.booking-management-table th {
  position: sticky;
  top: 0;
  z-index: 2;
  background: #f8fbfa;
}

.booking-management-table .sticky-action-col {
  position: sticky;
  right: 0;
  z-index: 3;
  background: #ffffff;
  box-shadow: -12px 0 18px rgba(16, 32, 39, 0.06);
}

.booking-management-table th.sticky-action-col {
  background: #f8fbfa;
}

.booking-action-group {
  display: flex;
  flex-wrap: nowrap;
  gap: 7px;
  justify-content: flex-end;
  min-width: 640px;
}

.booking-action-group .compact-action {
  min-width: auto;
  min-height: 34px;
  border-radius: 8px;
  padding: 7px 10px;
  font-size: 0.78rem;
  white-space: nowrap;
}

.mini-badge {
  display: inline-flex;
  margin-left: 6px;
  border-radius: 999px;
  padding: 3px 7px;
  font-size: 0.68rem;
  font-weight: 850;
  white-space: nowrap;
}

.mini-badge.warn {
  color: var(--warn);
  background: #fff7ed;
}

.badge.checked_in,
.badge.deposit_paid {
  color: #1d4ed8;
  background: #eff6ff;
}

.badge.completed,
.badge.refunded {
  color: #475569;
  background: #f1f5f9;
}

.badge.unpaid {
  color: var(--warn);
  background: #fff7ed;
}

.booking-empty,
.booking-skeleton {
  display: grid;
  gap: 8px;
  place-items: center;
  min-height: 220px;
  color: var(--muted);
  text-align: center;
}

.booking-empty strong {
  color: var(--ink);
  font-size: 1.1rem;
}

.booking-skeleton span,
.skeleton-card span,
.skeleton-card strong {
  display: block;
  width: min(100%, 760px);
  height: 16px;
  border-radius: 999px;
  background: linear-gradient(90deg, #edf6f4, #ffffff, #edf6f4);
  background-size: 220% 100%;
  animation: skeletonPulse 1.35s ease-in-out infinite;
}

.booking-skeleton span:nth-child(even) {
  width: min(80%, 620px);
}

.skeleton-card strong {
  width: 62px;
  height: 26px;
  margin-top: 12px;
}

@keyframes skeletonPulse {
  0% { background-position: 120% 0; }
  100% { background-position: -120% 0; }
}

.mobile-booking-list {
  display: none;
}

.booking-mobile-card {
  display: grid;
  gap: 12px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #ffffff;
  padding: 14px;
}

.booking-mobile-card > div:first-child {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  align-items: flex-start;
}

.booking-card-badges,
.booking-card-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.booking-mobile-card dl {
  display: grid;
  grid-template-columns: 110px minmax(0, 1fr);
  gap: 6px 10px;
  margin: 0;
}

.booking-mobile-card dt {
  color: var(--muted);
  font-weight: 750;
}

.booking-mobile-card dd {
  margin: 0;
  overflow-wrap: anywhere;
}

.booking-drawer {
  position: fixed;
  inset: 0;
  z-index: 90;
  display: none;
  justify-content: flex-end;
  background: rgba(15, 23, 42, 0.28);
  backdrop-filter: blur(5px);
}

.booking-drawer.open {
  display: flex;
}

.booking-drawer-panel {
  width: min(760px, calc(100vw - 20px));
  min-height: 100vh;
  overflow-y: auto;
  border-left: 1px solid var(--line);
  background: #ffffff;
  box-shadow: -24px 0 55px rgba(16, 32, 39, 0.18);
  padding: 22px;
}

.booking-drawer-head {
  display: flex;
  justify-content: space-between;
  gap: 14px;
  align-items: flex-start;
  margin-bottom: 10px;
}

.booking-drawer-head h2 {
  margin: 2px 0 0;
}

.drawer-close {
  min-width: 74px;
  border-radius: 8px;
}

.drawer-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 16px 0;
}

.drawer-tabs span {
  border: 1px solid var(--line);
  border-radius: 999px;
  background: #f6fbfa;
  padding: 7px 10px;
  color: #31535a;
  font-size: 0.82rem;
  font-weight: 800;
}

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

.drawer-wide {
  margin-top: 16px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #ffffff;
  padding: 14px;
}

.drawer-wide h3 {
  margin: 0 0 10px;
}

@media (max-width: 1280px) {
  .booking-metrics {
    grid-template-columns: repeat(4, minmax(140px, 1fr));
  }

  .booking-filter-grid {
    grid-template-columns: repeat(4, minmax(150px, 1fr));
  }
}

@media (max-width: 920px) {
  .booking-metrics,
  .booking-filter-grid,
  .drawer-section-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .booking-management-table {
    display: none;
  }

  .mobile-booking-list {
    display: grid;
    gap: 12px;
    padding: 12px;
  }

  .booking-table-wrap {
    overflow-x: visible;
  }
}

@media (max-width: 620px) {
  body[data-page="bookings"] .content {
    width: min(100% - 18px, 100%);
  }

  .booking-hero,
  .booking-toolbar,
  .booking-mobile-card > div:first-child {
    flex-direction: column;
    align-items: stretch;
  }

  .booking-metrics,
  .booking-filter-grid,
  .drawer-section-grid,
  .booking-mobile-card dl {
    grid-template-columns: 1fr;
  }

  .booking-toolbar .compact-button {
    width: 100%;
  }

  .booking-action-group,
  .booking-card-actions {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    min-width: 0;
  }

  .booking-action-group .compact-action,
  .booking-card-actions .compact-action {
    width: 100%;
  }

  .booking-drawer-panel {
    width: 100vw;
    padding: 16px;
  }
}


/* Tenant Portal grouped sidebar upgrade 2026-06-21 */
.layout {
  grid-template-columns: 286px minmax(0, 1fr);
}

.sidebar {
  justify-content: flex-start;
  gap: 18px;
  border-right: 1px solid rgba(28, 112, 99, 0.18);
  background: linear-gradient(180deg, #e9f8f3 0%, #d9f0e8 48%, #c7e6dc 100%);
  box-shadow: 12px 0 38px rgba(20, 83, 73, 0.12);
  scrollbar-width: thin;
  scrollbar-color: rgba(9, 119, 104, 0.42) rgba(210, 235, 226, 0.5);
}

.sidebar::-webkit-scrollbar {
  display: block;
  width: 8px;
}

.sidebar::-webkit-scrollbar-track {
  background: rgba(210, 235, 226, 0.45);
}

.sidebar::-webkit-scrollbar-thumb {
  background: rgba(9, 119, 104, 0.38);
  border-radius: 999px;
}

.sidebar > div:first-child {
  padding: 4px 4px 16px;
  border-bottom: 1px solid rgba(18, 126, 107, 0.18);
}

.sidebar .eyebrow {
  color: #04736a;
  font-size: 0.66rem;
  font-weight: 900;
  letter-spacing: 0;
}

.sidebar h1 {
  color: #0f2f3f;
  font-size: 1.14rem;
  font-weight: 900;
}

.sidebar nav {
  display: flex;
  flex-direction: column;
  gap: 0;
  margin: 0 0 18px;
}

.tenant-sidebar-group {
  display: grid;
  gap: 6px;
}

.tenant-sidebar-group + .tenant-sidebar-group {
  margin-top: 10px;
  padding-top: 10px;
  border-top: 1px solid rgba(18, 126, 107, 0.16);
}

.tenant-sidebar-group-button {
  width: 100%;
  min-height: 42px;
  border: 1px solid rgba(15, 118, 110, 0.18);
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.62);
  color: #184a51;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 10px 12px;
  font: inherit;
  font-size: 0.82rem;
  font-weight: 900;
  letter-spacing: 0;
  text-align: left;
  cursor: pointer;
  box-shadow: 0 10px 24px rgba(20, 83, 73, 0.06);
  transition: background-color 0.18s ease, border-color 0.18s ease, color 0.18s ease, box-shadow 0.18s ease;
}

.tenant-sidebar-group-button:hover,
.tenant-sidebar-group-button:focus-visible,
.tenant-sidebar-group-button.is-open {
  background: rgba(255, 255, 255, 0.86);
  border-color: rgba(5, 150, 125, 0.36);
  color: #005e52;
  outline: none;
  box-shadow: 0 12px 26px rgba(13, 148, 136, 0.12);
}

.tenant-sidebar-group-button.is-active {
  background: #f3fffb;
  border-color: rgba(5, 150, 125, 0.42);
}

.tenant-sidebar-chevron {
  flex: 0 0 auto;
  color: #08766b;
  font-size: 1rem;
  line-height: 1;
  transition: transform 0.18s ease;
}

.tenant-sidebar-group-button.is-open .tenant-sidebar-chevron {
  transform: rotate(180deg);
}

.tenant-sidebar-submenu {
  display: none;
  flex-direction: column;
  gap: 3px;
  margin: 0 0 4px 10px;
  padding-left: 10px;
  border-left: 1px solid rgba(11, 128, 113, 0.24);
}

.tenant-sidebar-submenu.is-open {
  display: flex;
}

.tenant-sidebar-submenu a,
.tenant-sidebar-submenu a.nav-child {
  min-height: 34px;
  margin: 0;
  border-radius: 10px;
  padding: 8px 10px;
  color: #284f59;
  font-size: 0.78rem;
  font-weight: 750;
  line-height: 1.25;
  background: transparent;
}

.tenant-sidebar-submenu a::before,
.tenant-sidebar-submenu a.nav-child::before {
  display: none;
}

.tenant-sidebar-submenu a:hover,
.tenant-sidebar-submenu a.active,
.tenant-sidebar-submenu a.is-active,
.tenant-sidebar-submenu a.nav-child:hover,
.tenant-sidebar-submenu a.nav-child.active {
  color: #004d43;
  background: rgba(255, 255, 255, 0.78);
  box-shadow: inset 3px 0 0 #0d9488;
  transform: none;
}

.tenant-sidebar-submenu .nav-primary {
  display: block;
  min-width: 0;
  white-space: normal;
  overflow-wrap: anywhere;
  font-weight: 800;
}


.tenant-sidebar-group-label {
  min-width: 0;
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.tenant-sidebar-group-icon {
  position: relative;
  width: 16px;
  height: 14px;
  flex: 0 0 16px;
  border: 2px solid currentColor;
  border-radius: 4px;
  opacity: 0.85;
}

.tenant-sidebar-group-icon::before {
  content: "";
  position: absolute;
  left: 4px;
  right: 4px;
  top: -5px;
  height: 5px;
  border: 2px solid currentColor;
  border-bottom: 0;
  border-radius: 4px 4px 0 0;
}

.tenant-sidebar-nested-group {
  display: grid;
  gap: 3px;
  padding: 4px 0 7px;
}

.tenant-sidebar-nested-group + .tenant-sidebar-nested-group {
  border-top: 1px solid rgba(11, 128, 113, 0.12);
  padding-top: 8px;
}

.tenant-sidebar-nested-heading {
  display: flex;
  align-items: center;
  min-height: 30px;
  padding: 5px 9px;
  color: #0b6258;
  font-size: 0.75rem;
  font-weight: 900;
  line-height: 1.25;
}

.tenant-sidebar-nested-group.is-active .tenant-sidebar-nested-heading {
  color: #004d43;
  background: rgba(255, 255, 255, 0.58);
  border-radius: 8px;
}

.tenant-sidebar-nested-list {
  display: grid;
  gap: 2px;
  padding-left: 8px;
}

.sidebar #logout-button {
  margin-top: auto;
  border-color: rgba(15, 118, 110, 0.22);
  background: rgba(255, 255, 255, 0.66);
  color: #184a51;
  font-weight: 850;
}

.sidebar #logout-button:hover,
.sidebar #logout-button:focus-visible {
  background: #fff7ed;
  border-color: rgba(234, 88, 12, 0.34);
  color: #9a3412;
}

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

  .sidebar {
    position: static;
    height: auto;
    max-height: none;
    overflow: visible;
    padding: 18px;
  }

  .sidebar nav {
    margin-bottom: 12px;
  }
}

@media (max-width: 620px) {
  .sidebar {
    padding: 14px;
  }

  .tenant-sidebar-group-button {
    min-height: 40px;
    padding: 9px 10px;
  }

  .tenant-sidebar-submenu {
    margin-left: 6px;
    padding-left: 8px;
  }
}

/* Vehicle Production UX + Fleet Commercial Engine 2026-06-21 */
body[data-page="vehicles"] {
  overflow-x: hidden;
}

body[data-page="vehicles"] .content {
  width: min(1240px, calc(100% - 32px));
}

body[data-page="vehicles"] .panel:has(.vehicle-toolbar),
body[data-page="vehicles"] .panel:has(#vehicle-list) {
  overflow: visible;
}

body[data-page="vehicles"] .vehicle-toolbar,
body[data-page="vehicles"] .panel-head {
  position: sticky;
  top: 0;
  z-index: 8;
  background: rgba(255, 255, 255, 0.94);
  backdrop-filter: blur(14px);
  border-radius: 12px;
}

body[data-page="vehicles"] .table-wrap {
  overflow-x: visible;
}

body[data-page="vehicles"] .vehicle-production-table {
  min-width: 0;
  width: 100%;
  table-layout: fixed;
}

body[data-page="vehicles"] .vehicle-production-table th,
body[data-page="vehicles"] .vehicle-production-table td {
  vertical-align: middle;
  overflow-wrap: anywhere;
}

body[data-page="vehicles"] .vehicle-title-cell {
  display: grid;
  grid-template-columns: 48px minmax(0, 1fr);
  align-items: center;
  gap: 10px;
  min-width: 0;
}

body[data-page="vehicles"] .vehicle-title-cell b,
body[data-page="vehicles"] td small {
  display: block;
  margin-top: 3px;
  color: #71808c;
  font-size: 0.76rem;
  line-height: 1.3;
}

body[data-page="vehicles"] .vehicle-thumb {
  width: 48px;
  aspect-ratio: 4 / 3;
  display: grid;
  place-items: center;
  border: 1px solid rgba(159, 197, 190, 0.8);
  border-radius: 8px;
  background: linear-gradient(135deg, #e9f7f1 0%, #f7fbfa 52%, #dcefeb 100%);
  color: #087e71;
  font-weight: 900;
  letter-spacing: 0;
}

body[data-page="vehicles"] .vehicle-mini-count {
  display: inline-flex;
  min-height: 26px;
  align-items: center;
  border: 1px solid rgba(180, 206, 202, 0.95);
  border-radius: 999px;
  padding: 4px 8px;
  margin: 2px 4px 2px 0;
  color: #48606a;
  background: #f8fcfb;
  font-size: 0.74rem;
  font-weight: 800;
  white-space: nowrap;
}

body[data-page="vehicles"] .vehicle-action-menu {
  display: flex;
  gap: 6px;
  align-items: center;
  justify-content: flex-end;
  flex-wrap: wrap;
}

.vehicle-create-panel[hidden],
.vehicle-drawer-shell[hidden] {
  display: none !important;
}

body[data-page="vehicles"] .vehicle-create-panel {
  overflow: hidden;
  animation: vehicleSlideDown 180ms ease-out;
}

body[data-page="vehicles"] .vehicle-editor-create {
  margin: 10px 0 16px;
  border: 1px solid rgba(162, 205, 197, 0.95);
  border-radius: 12px;
  background: #fbfefd;
  box-shadow: 0 16px 34px rgba(15, 143, 127, 0.1);
}

.vehicle-drawer-shell {
  position: fixed;
  inset: 0;
  z-index: 80;
  display: grid;
  justify-items: end;
}

.vehicle-drawer-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(8, 24, 32, 0.24);
}

.vehicle-drawer {
  position: relative;
  width: min(680px, 100vw);
  height: 100vh;
  overflow-y: auto;
  background: #f8fbfa;
  box-shadow: -24px 0 52px rgba(16, 32, 39, 0.2);
  animation: vehicleDrawerIn 180ms ease-out;
}

.vehicle-drawer-open {
  overflow: hidden;
}

body[data-page="vehicles"] .vehicle-editor-drawer {
  min-height: 100%;
  border: 0;
  border-radius: 0;
  box-shadow: none;
  background: #f8fbfa;
}

body[data-page="vehicles"] .vehicle-editor-head {
  top: 0;
  z-index: 4;
  padding: 16px 18px;
  border-bottom: 1px solid var(--line);
  border-radius: 0;
}

body[data-page="vehicles"] .vehicle-production-form {
  display: grid;
  gap: 14px;
  padding: 16px 18px 92px;
}

body[data-page="vehicles"] .vehicle-form-section {
  border: 1px solid rgba(194, 217, 213, 0.95);
  border-radius: 10px;
  background: #ffffff;
  padding: 14px;
}

body[data-page="vehicles"] .vehicle-form-section h4 {
  margin: 0 0 12px;
  color: #006f66;
  font-size: 0.9rem;
}

body[data-page="vehicles"] .vehicle-production-form .form-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}

body[data-page="vehicles"] .vehicle-production-form label {
  min-width: 0;
}

body[data-page="vehicles"] .vehicle-production-form input,
body[data-page="vehicles"] .vehicle-production-form select,
body[data-page="vehicles"] .vehicle-production-form textarea {
  width: 100%;
  min-width: 0;
  box-sizing: border-box;
}

body[data-page="vehicles"] .vehicle-price-preview {
  border: 1px solid rgba(130, 197, 181, 0.9);
  border-radius: 9px;
  background: #ecfbf6;
  color: #087e71;
  font-weight: 850;
  padding: 10px 12px;
}

body[data-page="vehicles"] .vehicle-image-uploader input[type="file"] {
  border: 1px dashed rgba(15, 143, 127, 0.42);
  background: #f6fcfa;
  border-radius: 10px;
  padding: 14px;
}

body[data-page="vehicles"] .vehicle-image-preview {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
  margin-top: 10px;
}

body[data-page="vehicles"] .vehicle-image-preview > strong {
  grid-column: 1 / -1;
  color: #51636c;
}

body[data-page="vehicles"] .vehicle-image-card {
  position: relative;
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 8px;
  background: #fff;
}

body[data-page="vehicles"] .vehicle-image-card img {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  border-radius: 6px;
  display: block;
}

body[data-page="vehicles"] .vehicle-image-card span {
  position: absolute;
  top: 12px;
  left: 12px;
  border-radius: 999px;
  background: #099789;
  color: #fff;
  padding: 3px 7px;
  font-size: 0.72rem;
  font-weight: 850;
}

body[data-page="vehicles"] .vehicle-options-list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}

body[data-page="vehicles"] .vehicle-option-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 92px 72px;
  align-items: center;
  gap: 8px;
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 8px;
  background: #fbfefd;
}

body[data-page="vehicles"] .vehicle-custom-option {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 8px;
  margin-top: 10px;
}

body[data-page="vehicles"] .vehicle-sticky-actions {
  position: sticky;
  bottom: 0;
  z-index: 5;
  border-top: 1px solid var(--line);
  background: rgba(248, 251, 250, 0.96);
  backdrop-filter: blur(12px);
  padding: 12px 0 0;
}

@keyframes vehicleDrawerIn {
  from { transform: translateX(28px); opacity: 0.7; }
  to { transform: translateX(0); opacity: 1; }
}

@keyframes vehicleSlideDown {
  from { transform: translateY(-8px); opacity: 0; max-height: 0; }
  to { transform: translateY(0); opacity: 1; max-height: 1400px; }
}

@media (max-width: 900px) {
  body[data-page="vehicles"] .vehicle-production-table,
  body[data-page="vehicles"] .vehicle-production-table thead,
  body[data-page="vehicles"] .vehicle-production-table tbody,
  body[data-page="vehicles"] .vehicle-production-table tr,
  body[data-page="vehicles"] .vehicle-production-table td {
    display: block;
    width: 100%;
    min-width: 0;
  }

  body[data-page="vehicles"] .vehicle-production-table thead {
    display: none;
  }

  body[data-page="vehicles"] .vehicle-production-table tr {
    border: 1px solid var(--line);
    border-radius: 10px;
    background: #fff;
    margin-bottom: 10px;
    padding: 10px;
  }

  body[data-page="vehicles"] .vehicle-production-table td {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 12px;
    border-bottom: 1px solid var(--line);
    padding: 10px 0;
  }

  body[data-page="vehicles"] .vehicle-production-table td::before {
    content: attr(data-label);
    color: #6c7a86;
    font-weight: 850;
    flex: 0 0 104px;
  }

  body[data-page="vehicles"] .vehicle-production-table td:first-child::before {
    content: none;
  }

  body[data-page="vehicles"] .vehicle-title-cell {
    width: 100%;
  }

  body[data-page="vehicles"] .vehicle-action-menu {
    width: 100%;
    justify-content: stretch;
  }

  body[data-page="vehicles"] .vehicle-action-menu > * {
    flex: 1 1 auto;
  }
}

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

  body[data-page="vehicles"] .vehicle-production-form,
  body[data-page="vehicles"] .vehicle-editor-head {
    padding-left: 12px;
    padding-right: 12px;
  }

  body[data-page="vehicles"] .vehicle-production-form .form-grid,
  body[data-page="vehicles"] .vehicle-options-list,
  body[data-page="vehicles"] .vehicle-image-preview {
    grid-template-columns: 1fr;
  }

  body[data-page="vehicles"] .vehicle-option-row {
    grid-template-columns: 1fr;
  }

  body[data-page="vehicles"] .vehicle-custom-option {
    grid-template-columns: 1fr;
  }
}


/* Phase 3.14E Vehicle List UX Refinement */
body[data-page="vehicles"] .portal-header-meta .company-chip { display: inline-flex; align-items: center; min-height: 30px; border: 1px solid rgba(166, 207, 198, 0.95); border-radius: 999px; padding: 6px 12px; background: #f9fffd; color: #173f45; font-weight: 850; white-space: nowrap; }
body[data-page="vehicles"] .table-wrap, body[data-page="vehicles"] #vehicle-list { max-width: 100%; overflow-x: auto; overflow-y: visible; }
body[data-page="vehicles"] .vehicle-table-compact { min-width: 1180px; border-collapse: collapse; }
body[data-page="vehicles"] .vehicle-table-compact th, body[data-page="vehicles"] .vehicle-table-compact td { padding: 10px 9px; white-space: nowrap; overflow-wrap: normal; vertical-align: middle; line-height: 1.22; }
body[data-page="vehicles"] .vehicle-col-cover { width: 58px; } body[data-page="vehicles"] .vehicle-col-code { width: 94px; } body[data-page="vehicles"] .vehicle-col-name { width: 214px; } body[data-page="vehicles"] .vehicle-col-plate { width: 126px; } body[data-page="vehicles"] .vehicle-col-type { width: 78px; } body[data-page="vehicles"] .vehicle-col-seats { width: 66px; } body[data-page="vehicles"] .vehicle-col-price { width: 142px; } body[data-page="vehicles"] .vehicle-col-status { width: 132px; } body[data-page="vehicles"] .vehicle-col-counts { width: 126px; } body[data-page="vehicles"] .vehicle-col-actions { width: 176px; }
body[data-page="vehicles"] .vehicle-thumb { width: 40px; border-radius: 7px; }
body[data-page="vehicles"] .vehicle-name, body[data-page="vehicles"] .vehicle-code-cell, body[data-page="vehicles"] .vehicle-plate, body[data-page="vehicles"] .vehicle-type-cell, body[data-page="vehicles"] .vehicle-price { display: block; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
body[data-page="vehicles"] .vehicle-name { max-width: 190px; font-weight: 850; } body[data-page="vehicles"] .vehicle-code-cell { max-width: 82px; } body[data-page="vehicles"] .vehicle-plate { max-width: 112px; } body[data-page="vehicles"] .vehicle-price { color: #173f45; font-weight: 900; } body[data-page="vehicles"] .vehicle-seats { font-weight: 850; }
body[data-page="vehicles"] .vehicle-meta-line, body[data-page="vehicles"] .vehicle-status-stack small { display: block; max-width: 128px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; margin-top: 2px; color: #6a7d85; font-size: 0.71rem; }
body[data-page="vehicles"] .vehicle-table-compact .badge, body[data-page="vehicles"] .vehicle-table-compact .vehicle-mini-count { min-height: 22px; padding: 3px 7px; font-size: 0.7rem; white-space: nowrap; }
body[data-page="vehicles"] .vehicle-actions { position: relative; display: flex; justify-content: flex-end; align-items: center; gap: 6px; white-space: nowrap; }
body[data-page="vehicles"] .vehicle-menu-wrap { position: relative; }
body[data-page="vehicles"] .vehicle-action-dropdown { position: absolute; right: 0; top: calc(100% + 6px); z-index: 42; min-width: 178px; border: 1px solid rgba(170, 205, 200, 0.95); border-radius: 10px; padding: 6px; background: #ffffff; box-shadow: 0 18px 42px rgba(12, 38, 45, 0.16); }
body[data-page="vehicles"] .vehicle-action-dropdown.align-left { right: auto; left: 0; } body[data-page="vehicles"] .vehicle-action-dropdown[hidden] { display: none !important; }
body[data-page="vehicles"] .vehicle-action-dropdown button { display: block; width: 100%; border: 0; border-radius: 7px; padding: 9px 10px; background: transparent; color: #173f45; text-align: left; font-weight: 800; cursor: pointer; }
body[data-page="vehicles"] .vehicle-action-dropdown button:hover, body[data-page="vehicles"] .vehicle-action-dropdown button:focus-visible { background: #ecfbf6; outline: none; } body[data-page="vehicles"] .vehicle-action-dropdown .danger { color: #b42318; }
.vehicle-status-modal-shell[hidden] { display: none !important; } .vehicle-status-modal-shell { position: fixed; inset: 0; z-index: 90; display: grid; place-items: center; padding: 20px; } .vehicle-status-backdrop { position: absolute; inset: 0; background: rgba(8, 24, 32, 0.28); } .vehicle-status-modal { position: relative; width: min(620px, 100%); max-height: min(720px, calc(100vh - 32px)); overflow-y: auto; border-radius: 12px; background: #f8fbfa; box-shadow: 0 24px 64px rgba(12, 38, 45, 0.24); } .vehicle-status-form { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; padding: 16px 18px 18px; } .vehicle-status-form .span-2 { grid-column: 1 / -1; } .vehicle-status-form textarea { min-height: 96px; }
@media (max-width: 900px) { body[data-page="vehicles"] #vehicle-list { overflow-x: visible; } body[data-page="vehicles"] .vehicle-table-compact { min-width: 0; } body[data-page="vehicles"] .vehicle-table-compact th, body[data-page="vehicles"] .vehicle-table-compact td { white-space: normal; } body[data-page="vehicles"] .vehicle-actions { justify-content: stretch; width: 100%; } body[data-page="vehicles"] .vehicle-menu-wrap { flex: 1 1 auto; } body[data-page="vehicles"] .vehicle-menu-button { width: 100%; } body[data-page="vehicles"] .vehicle-action-dropdown { left: 0; right: auto; min-width: 100%; } .vehicle-status-form { grid-template-columns: 1fr; } }

/* Tenant Portal Sidebar Slide Control 2026-06-22 */
:root {
  --tenant-sidebar-width: 286px;
  --tenant-sidebar-transition: 300ms cubic-bezier(0.22, 1, 0.36, 1);
}

body:not([data-page="login"]) {
  overflow-x: hidden;
}

.app-shell,
.layout.app-shell {
  min-height: 100vh;
  display: grid;
  grid-template-columns: var(--tenant-sidebar-width) minmax(0, 1fr);
  transition: grid-template-columns var(--tenant-sidebar-transition);
  overflow-x: clip;
}

.app-shell.sidebar-collapsed,
.layout.app-shell.sidebar-collapsed {
  grid-template-columns: 0 minmax(0, 1fr);
}

.sidebar,
.sidebar.tenant-sidebar {
  width: var(--tenant-sidebar-width);
  max-width: var(--tenant-sidebar-width);
  transform: translateX(0);
  transition: transform var(--tenant-sidebar-transition), box-shadow var(--tenant-sidebar-transition), opacity var(--tenant-sidebar-transition);
  will-change: transform;
  z-index: 80;
}

.app-shell.sidebar-collapsed .sidebar,
.app-shell.sidebar-collapsed .sidebar.tenant-sidebar,
.sidebar.is-collapsed {
  transform: translateX(calc(-1 * var(--tenant-sidebar-width)));
  pointer-events: none;
  opacity: 0.98;
}

.main-content,
.content.main-content {
  min-width: 0;
  width: 100%;
  transition: padding var(--tenant-sidebar-transition), width var(--tenant-sidebar-transition);
}

.main-content.sidebar-collapsed,
.content.main-content.sidebar-collapsed {
  width: 100%;
}

.sidebar-toggle {
  position: fixed;
  top: 22px;
  left: calc(var(--tenant-sidebar-width) - 18px);
  z-index: 140;
  width: 38px;
  height: 38px;
  border: 1px solid rgba(15, 118, 110, 0.24);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.94);
  color: #006b5f;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 1.45rem;
  font-weight: 900;
  line-height: 1;
  cursor: pointer;
  box-shadow: 0 12px 28px rgba(15, 118, 110, 0.18);
  transition: left var(--tenant-sidebar-transition), background-color 0.18s ease, color 0.18s ease, transform 0.18s ease, box-shadow 0.18s ease;
}

.sidebar-toggle:hover,
.sidebar-toggle:focus-visible {
  background: #ecfdf7;
  color: #004d43;
  outline: none;
  transform: translateY(-1px);
  box-shadow: 0 14px 32px rgba(15, 118, 110, 0.24);
}

.sidebar-toggle:active {
  transform: translateY(0) scale(0.98);
}

.app-shell.sidebar-collapsed ~ .sidebar-toggle,
body.sidebar-state-collapsed .sidebar-toggle {
  left: 18px;
}

.sidebar-backdrop {
  position: fixed;
  inset: 0;
  z-index: 70;
  border: 0;
  padding: 0;
  background: rgba(10, 35, 42, 0.38);
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--tenant-sidebar-transition);
}

.sidebar-section,
.tenant-sidebar-group {
  min-width: 0;
}

.sidebar-menu-item,
.tenant-sidebar-submenu a {
  min-width: 0;
}

.sidebar-menu-item.active,
.tenant-sidebar-submenu a.active,
.tenant-sidebar-submenu a.is-active {
  color: #004d43;
  background: rgba(255, 255, 255, 0.86);
  box-shadow: inset 3px 0 0 #0d9488;
}

@media (min-width: 981px) {
  .app-shell.sidebar-collapsed .sidebar,
  .app-shell.sidebar-collapsed .sidebar.tenant-sidebar {
    visibility: hidden;
  }

  body.sidebar-state-collapsed .portal-header,
  body.sidebar-state-collapsed .content.main-content {
    max-width: none;
  }

  body.sidebar-state-collapsed .content.main-content {
    padding-left: clamp(24px, 4vw, 64px);
    padding-right: clamp(24px, 4vw, 64px);
  }
}

@media (max-width: 980px) {
  .app-shell,
  .layout.app-shell,
  .app-shell.sidebar-collapsed,
  .layout.app-shell.sidebar-collapsed {
    display: block;
    grid-template-columns: 1fr;
    overflow-x: hidden;
  }

  .sidebar,
  .sidebar.tenant-sidebar {
    position: fixed;
    top: 0;
    left: 0;
    width: min(86vw, var(--tenant-sidebar-width));
    max-width: min(86vw, var(--tenant-sidebar-width));
    height: 100vh;
    max-height: 100vh;
    padding: 22px 18px;
    overflow-y: auto;
    transform: translateX(-105%);
    box-shadow: 18px 0 42px rgba(10, 35, 42, 0.2);
    pointer-events: none;
  }

  .app-shell.sidebar-mobile-open .sidebar,
  .app-shell.sidebar-mobile-open .sidebar.tenant-sidebar {
    transform: translateX(0);
    pointer-events: auto;
    opacity: 1;
    visibility: visible;
  }

  .sidebar-toggle,
  .app-shell.sidebar-collapsed ~ .sidebar-toggle,
  body.sidebar-state-collapsed .sidebar-toggle {
    top: 14px;
    left: 14px;
    width: 40px;
    height: 40px;
  }

  body.sidebar-drawer-open .sidebar-backdrop {
    opacity: 1;
    pointer-events: auto;
  }

  body.sidebar-drawer-open {
    overflow: hidden;
  }

  .content.main-content,
  .content.main-content.sidebar-collapsed {
    width: 100%;
    min-width: 0;
  }
}
@media (max-width: 980px) {
  .auth-page {
    align-items: start;
  }

  .login-shell {
    min-height: auto;
  }

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

  .login-brand-panel {
    min-height: auto;
    padding: clamp(28px, 6vw, 46px);
  }

  .login-card {
    justify-self: stretch;
    width: min(560px, 100%);
    margin: 0 auto;
  }
}

@media (max-width: 620px) {
  .auth-page {
    padding: 18px;
  }

  .login-brand-panel {
    padding: 24px;
    border-radius: 22px;
  }

  .login-logo-mark {
    width: 46px;
    height: 46px;
    border-radius: 14px;
  }

  .feature-chips span {
    white-space: normal;
  }

  .login-card,
  .auth-card {
    border-radius: 20px;
    padding: 24px;
  }
}

/* Customers module production UI */
.customer-summary-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px;margin:18px 0}.customer-metric{min-height:92px}.customer-metric span{display:block;color:#607486;font-size:12px;font-weight:800}.customer-metric strong{display:block;margin-top:8px;font-size:28px;color:#082235}.customers-panel-head{align-items:center}.customer-toolbar{display:grid;grid-template-columns:2fr 1fr 1fr;gap:10px;margin:14px 0 10px;padding:12px;border:1px solid #cfe7e2;border-radius:12px;background:#f8fffc}.customer-toolbar label{display:grid;gap:5px;font-size:12px;font-weight:800;color:#315466}.customer-toolbar input,.customer-toolbar select{height:38px;border:1px solid #cfe1dd;border-radius:10px;padding:0 12px;background:#fff;color:#102438;font:inherit}.customers-table{min-width:980px}.customers-table th{background:#edf9f5}.customers-table td{vertical-align:middle}.customers-table td strong{display:block;color:#163956;font-weight:900}.customers-table td small{display:block;margin-top:2px;color:#667b89;font-size:11px}.customers-table tbody tr:nth-child(even){background:#f8fffc}.customers-table tbody tr:hover{background:#eefbf6}.customer-actions{display:flex;gap:6px;align-items:center;justify-content:flex-end;white-space:nowrap}.danger-soft{border-color:#fecaca!important;color:#b91c1c!important;background:#fffafa!important}.customer-pagination{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-top:12px;color:#607486;font-size:13px}.customer-pagination>div{display:flex;gap:6px}.customer-drawer{position:fixed;top:0;right:0;width:min(560px,calc(100vw - 24px));height:100vh;z-index:70;transform:translateX(110%);transition:transform .28s ease;background:#fff;border-left:1px solid #cfe1dd;box-shadow:-24px 0 60px rgba(8,34,53,.16);padding:22px;overflow:auto}.customer-drawer.open{transform:translateX(0)}.customer-drawer-head{display:flex;justify-content:space-between;gap:12px;align-items:flex-start;margin-bottom:16px;padding-bottom:12px;border-bottom:1px solid #d7ebe6}.customer-drawer-head h3{margin:0;color:#102438}.customer-form{grid-template-columns:repeat(2,minmax(0,1fr))}.customer-form .span-2{grid-column:1/-1}.checkbox-line{display:flex!important;align-items:center;gap:8px;flex-direction:row}.checkbox-line input{width:18px;height:18px}.customer-duplicate-warning{border:1px solid #fed7aa;background:#fff7ed;color:#9a3412;border-radius:12px;padding:10px 12px;font-weight:800}.customer-detail-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px}.customer-detail-grid article,.customer-history{border:1px solid #d7ebe6;border-radius:12px;background:#fbfefd;padding:14px;margin-bottom:12px}.customer-detail-grid h4,.customer-history h4{margin:0 0 8px;color:#0f4f46}.customer-detail-grid p{margin:4px 0;color:#43596a}.customer-history ul{list-style:none;margin:0;padding:0;display:grid;gap:8px}.customer-history li{border-bottom:1px solid #e0efeb;padding-bottom:8px}.customer-history li:last-child{border-bottom:0;padding-bottom:0}.customer-history strong,.customer-history span,.customer-history small{display:block}.customer-history small{color:#607486}.status-pill.danger{background:#fee2e2;border-color:#fecaca;color:#b91c1c}.status-pill.muted-pill{background:#f4f8f7;border-color:#d7ebe6;color:#607486}
@media(max-width:900px){.customer-summary-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.customer-toolbar{grid-template-columns:1fr}.customer-detail-grid{grid-template-columns:1fr}.customer-form{grid-template-columns:1fr}.customer-form .span-2{grid-column:auto}}
@media(max-width:720px){.customers-table-wrap{overflow:visible;border:0;background:transparent}.customers-table{min-width:0;border-collapse:separate;border-spacing:0 10px}.customers-table thead{display:none}.customers-table,.customers-table tbody,.customers-table tr,.customers-table td{display:block;width:100%}.customers-table tr{border:1px solid #cfe7e2;border-radius:14px;background:#fff;box-shadow:0 10px 28px rgba(8,34,53,.06);padding:8px 10px}.customers-table tbody tr:nth-child(even){background:#fff}.customers-table td{display:grid;grid-template-columns:118px minmax(0,1fr);gap:10px;border:0!important;padding:7px 2px}.customers-table td::before{content:attr(data-label);color:#607486;font-size:12px;font-weight:900}.customer-actions{justify-content:flex-start;flex-wrap:wrap}.customer-summary-grid{grid-template-columns:1fr}.customer-drawer{width:100vw;max-width:100vw;padding:18px}.customer-pagination{align-items:flex-start;flex-direction:column}.module-hero.customers-hero{align-items:flex-start}}

/* Customers table fit refinement */
.customers-table{min-width:0!important;width:100%;table-layout:fixed}.customers-table th,.customers-table td{padding:9px 8px}.customers-table th:nth-child(1){width:12%}.customers-table th:nth-child(2){width:17%}.customers-table th:nth-child(3){width:19%}.customers-table th:nth-child(4){width:10%}.customers-table th:nth-child(5){width:8%}.customers-table th:nth-child(6){width:12%}.customers-table th:nth-child(7){width:8%}.customers-table th:nth-child(8){width:14%}.customers-table td{overflow-wrap:anywhere}.customer-actions .compact-button{min-height:30px;padding:0 8px;font-size:12px}.customers-table-wrap{overflow-x:visible}
@media(max-width:1180px){.customers-table th:nth-child(6),.customers-table td:nth-child(6),.customers-table th:nth-child(7),.customers-table td:nth-child(7){display:none}.customers-table th:nth-child(1){width:14%}.customers-table th:nth-child(2){width:22%}.customers-table th:nth-child(3){width:24%}.customers-table th:nth-child(4){width:12%}.customers-table th:nth-child(5){width:9%}.customers-table th:nth-child(8){width:19%}}

/* Bookings viewport overflow containment 2026-06-27 */
body[data-page="bookings"],
body[data-page="bookings"] .layout.app-shell,
body[data-page="bookings"] .content.main-content,
body[data-page="bookings"] .module-content {
  max-width: 100vw;
}

body[data-page="bookings"] .content.main-content {
  min-width: 0;
  overflow-x: hidden;
}

body[data-page="bookings"] .booking-filter-panel,
body[data-page="bookings"] .booking-table-panel {
  min-width: 0;
  max-width: 100%;
  overflow: hidden;
}

body[data-page="bookings"] .booking-filter-grid {
  grid-template-columns: repeat(auto-fit, minmax(min(210px, 100%), 1fr));
}

body[data-page="bookings"] .booking-filter-grid input,
body[data-page="bookings"] .booking-filter-grid select {
  width: 100%;
  min-width: 0;
}

body[data-page="bookings"] .booking-table-wrap {
  width: 100%;
  max-width: 100%;
  overflow-x: auto;
  overflow-y: visible;
  overscroll-behavior-x: contain;
}

body[data-page="bookings"] .booking-management-table {
  min-width: 1180px;
  width: 100%;
  table-layout: fixed;
}

body[data-page="bookings"] .booking-management-table th,
body[data-page="bookings"] .booking-management-table td {
  overflow-wrap: anywhere;
}

body[data-page="bookings"] .booking-management-table th:nth-child(1),
body[data-page="bookings"] .booking-management-table td:nth-child(1) { width: 17%; }
body[data-page="bookings"] .booking-management-table th:nth-child(2),
body[data-page="bookings"] .booking-management-table td:nth-child(2) { width: 12%; }
body[data-page="bookings"] .booking-management-table th:nth-child(3),
body[data-page="bookings"] .booking-management-table td:nth-child(3) { width: 9%; }
body[data-page="bookings"] .booking-management-table th:nth-child(4),
body[data-page="bookings"] .booking-management-table td:nth-child(4) { width: 7%; }
body[data-page="bookings"] .booking-management-table th:nth-child(5),
body[data-page="bookings"] .booking-management-table td:nth-child(5) { width: 12%; }
body[data-page="bookings"] .booking-management-table th:nth-child(6),
body[data-page="bookings"] .booking-management-table td:nth-child(6) { width: 8%; }
body[data-page="bookings"] .booking-management-table th:nth-child(7),
body[data-page="bookings"] .booking-management-table td:nth-child(7) { width: 8%; }
body[data-page="bookings"] .booking-management-table th:nth-child(8),
body[data-page="bookings"] .booking-management-table td:nth-child(8) { width: 8%; }
body[data-page="bookings"] .booking-management-table th:nth-child(9),
body[data-page="bookings"] .booking-management-table td:nth-child(9) { width: 19%; }

body[data-page="bookings"] .booking-management-table .sticky-action-col {
  min-width: 250px;
  max-width: 320px;
}

body[data-page="bookings"] .booking-action-group {
  min-width: 0;
  width: 100%;
  max-width: 310px;
  flex-wrap: wrap;
  justify-content: flex-start;
}

body[data-page="bookings"] .booking-action-group .compact-action {
  min-width: 0;
  min-height: 32px;
  padding: 6px 9px;
}

body[data-page="bookings"] .booking-action-group .booking-detail-button {
  flex: 1 1 132px;
}

body[data-page="bookings"] .booking-action-group .booking-menu-button {
  flex: 0 0 38px;
}

@media (min-width: 921px) and (max-width: 1320px) {
  body[data-page="bookings"] .booking-management-table {
    min-width: 1080px;
  }

  body[data-page="bookings"] .booking-management-table th:nth-child(3),
  body[data-page="bookings"] .booking-management-table td:nth-child(3),
  body[data-page="bookings"] .booking-management-table th:nth-child(4),
  body[data-page="bookings"] .booking-management-table td:nth-child(4) {
    display: none;
  }

  body[data-page="bookings"] .booking-management-table th:nth-child(9),
  body[data-page="bookings"] .booking-management-table td:nth-child(9) {
    width: 24%;
  }
}



/* Booking List UI Hotfix V2 2026-06-27 */
body[data-page="bookings"],
body[data-page="bookings"] .portal-main,
body[data-page="bookings"] .content.main-content,
body[data-page="bookings"] .module-content {
  max-width: 100%;
  overflow-x: hidden;
}

body[data-page="bookings"] .booking-filter-panel,
body[data-page="bookings"] .booking-table-panel,
body[data-page="bookings"] .bookings-table-card {
  width: 100%;
  max-width: 100%;
  min-width: 0;
}

body[data-page="bookings"] .bookings-table-card {
  overflow: hidden;
  border-radius: 16px;
  border: 1px solid #cfe5df;
  background: #fff;
}

body[data-page="bookings"] .bookings-table-scroll {
  width: 100%;
  max-width: 100%;
  overflow-x: auto;
  overflow-y: visible;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior-x: contain;
}

body[data-page="bookings"] .booking-table-wrap {
  overflow: visible;
}

body[data-page="bookings"] .bookings-table {
  width: max-content;
  min-width: 1280px;
  border-collapse: collapse;
  table-layout: fixed;
}

body[data-page="bookings"] .bookings-table th,
body[data-page="bookings"] .bookings-table td {
  padding: 14px 16px;
  vertical-align: middle;
  line-height: 1.45;
  height: auto;
  min-height: 0;
  overflow-wrap: normal;
  word-break: normal;
}

body[data-page="bookings"] .bookings-table th:nth-child(1),
body[data-page="bookings"] .bookings-table td:nth-child(1) { width: 220px; }
body[data-page="bookings"] .bookings-table th:nth-child(2),
body[data-page="bookings"] .bookings-table td:nth-child(2) { width: 220px; }
body[data-page="bookings"] .bookings-table th:nth-child(3),
body[data-page="bookings"] .bookings-table td:nth-child(3) { width: 140px; }
body[data-page="bookings"] .bookings-table th:nth-child(4),
body[data-page="bookings"] .bookings-table td:nth-child(4) { width: 140px; }
body[data-page="bookings"] .bookings-table th:nth-child(5),
body[data-page="bookings"] .bookings-table td:nth-child(5) { width: 220px; }
body[data-page="bookings"] .bookings-table th:nth-child(6),
body[data-page="bookings"] .bookings-table td:nth-child(6) { width: 130px; }
body[data-page="bookings"] .bookings-table th:nth-child(7),
body[data-page="bookings"] .bookings-table td:nth-child(7) { width: 150px; }
body[data-page="bookings"] .bookings-table th:nth-child(8),
body[data-page="bookings"] .bookings-table td:nth-child(8) { width: 130px; }
body[data-page="bookings"] .bookings-table th:nth-child(9),
body[data-page="bookings"] .bookings-table td:nth-child(9) { width: 150px; }
body[data-page="bookings"] .bookings-table th:nth-child(10),
body[data-page="bookings"] .bookings-table td:nth-child(10) { width: 180px; }

body[data-page="bookings"] .bookings-table .sticky-action-col {
  min-width: 180px;
  max-width: 180px;
  position: static;
}

body[data-page="bookings"] .customer-name-line,
body[data-page="bookings"] .booking-code,
body[data-page="bookings"] .pending-vehicle-chip {
  white-space: nowrap;
}

body[data-page="bookings"] .customer-cell .mini-badge {
  display: inline-flex;
  margin-top: 6px;
}

body[data-page="bookings"] .date-cell,
body[data-page="bookings"] .date-line {
  line-height: 1.45;
}

body[data-page="bookings"] .booking-filter-grid {
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 16px;
}

body[data-page="bookings"] .booking-date-filter small {
  display: block;
  margin-top: 6px;
  color: #6b7d8a;
  font-size: 12px;
  line-height: 1.25;
}

body[data-page="bookings"] .booking-toolbar {
  justify-content: flex-end;
  flex-wrap: wrap;
  gap: 10px;
}

body[data-page="bookings"] .booking-action-group {
  width: 100%;
  max-width: 180px;
  min-width: 0;
  display: flex;
  gap: 8px;
  align-items: center;
  justify-content: flex-start;
  flex-wrap: nowrap;
}

body[data-page="bookings"] .booking-action-group .booking-detail-button,
body[data-page="bookings"] .booking-action-group .booking-menu-button {
  min-height: 32px;
  padding: 6px 10px;
  font-size: 12px;
  white-space: nowrap;
}

body[data-page="bookings"] .booking-action-group .booking-detail-button {
  flex: 0 0 auto;
}

body[data-page="bookings"] .booking-action-menu {
  position: relative;
  flex: 0 0 auto;
}

body[data-page="bookings"] .booking-action-menu summary {
  list-style: none;
  cursor: pointer;
}


body[data-page="bookings"] .booking-menu-button::after {
  content: "";
  display: inline-block;
  width: 0;
  height: 0;
  margin-left: 7px;
  border-left: 4px solid transparent;
  border-right: 4px solid transparent;
  border-top: 5px solid currentColor;
  vertical-align: middle;
}

body[data-page="bookings"] .booking-action-menu summary::-webkit-details-marker {
  display: none;
}

body[data-page="bookings"] .booking-action-dropdown {
  margin-top: 8px;
  padding: 8px;
  min-width: 158px;
  max-width: 170px;
  border: 1px solid #cfe5df;
  border-radius: 10px;
  background: #fff;
  box-shadow: 0 14px 30px rgba(15, 51, 48, 0.16);
}

body[data-page="bookings"] .booking-action-dropdown button {
  display: block;
  width: 100%;
  min-height: 30px;
  border: 0;
  border-radius: 8px;
  background: transparent;
  color: #183d3a;
  text-align: left;
  font-weight: 800;
  font-size: 12px;
  cursor: pointer;
}

body[data-page="bookings"] .booking-action-dropdown button:hover:not(:disabled) {
  background: #e8f7f2;
}

body[data-page="bookings"] .booking-action-dropdown button:disabled {
  color: #9aa8b1;
  cursor: not-allowed;
}

body[data-page="bookings"] .booking-action-dropdown button.danger {
  color: #b42318;
}

body[data-page="bookings"] .mini-badge.neutral {
  color: #24544d;
  background: #e9f6f2;
}

@media (max-width: 720px) {
  body[data-page="bookings"] .booking-filter-grid {
    grid-template-columns: 1fr;
  }
}


/* Booking List UI Hotfix V2 tablet table mode 2026-06-27 */
@media (min-width: 721px) and (max-width: 920px) {
  body[data-page="bookings"] .bookings-table {
    display: table;
    width: max-content;
    min-width: 1280px;
  }

  body[data-page="bookings"] .mobile-booking-list {
    display: none;
  }
}


/* Booking List UI Hotfix V2 action dropdown containment 2026-06-27 */
body[data-page="bookings"] .booking-action-menu {
  position: relative;
}

body[data-page="bookings"] .booking-action-dropdown {
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  z-index: 30;
  margin-top: 0;
}

/* Phase 3.14F Vehicle List Final Clean-up 2026-06-27 */
body[data-page="vehicles"] .vehicle-list-panel {
  padding-top: 16px;
}
body[data-page="vehicles"] .vehicle-toolbar {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 18px;
  padding: 16px 16px 14px;
  margin-bottom: 12px;
  position: relative;
}
body[data-page="vehicles"] .vehicle-toolbar > div {
  min-width: 0;
  flex: 1 1 auto;
}
body[data-page="vehicles"] .vehicle-toolbar h3 {
  margin-bottom: 6px;
}
body[data-page="vehicles"] .vehicle-list-summary {
  max-width: 760px;
  line-height: 1.45;
  white-space: normal;
  word-break: normal;
  overflow-wrap: normal;
}
body[data-page="vehicles"] #vehicle-new-button {
  flex: 0 0 auto;
  align-self: flex-start;
  min-height: 42px;
  padding: 0 18px;
  border-radius: 11px;
  box-shadow: 0 14px 30px rgba(15, 143, 127, 0.16);
}
body[data-page="vehicles"] .vehicle-filters {
  display: grid;
  grid-template-columns: minmax(260px, 2fr) repeat(4, minmax(132px, 1fr));
  gap: 10px;
  align-items: end;
  margin: 0 0 10px;
  padding: 10px;
  border: 1px solid rgba(178, 215, 208, 0.95);
  border-radius: 12px;
  background: #f6fffb;
}
body[data-page="vehicles"] .vehicle-filters label {
  display: grid;
  gap: 4px;
  min-width: 0;
  margin: 0;
}
body[data-page="vehicles"] .vehicle-filters span {
  font-size: 0.72rem;
  line-height: 1.2;
  color: #315466;
  font-weight: 850;
}
body[data-page="vehicles"] .vehicle-filters input,
body[data-page="vehicles"] .vehicle-filters select {
  height: 36px;
  min-width: 0;
  padding: 0 10px;
  border-radius: 9px;
  box-sizing: border-box;
}
body[data-page="vehicles"] .vehicle-col-actions { width: 116px; }
body[data-page="vehicles"] .vehicle-table-compact { min-width: 1110px; }
body[data-page="vehicles"] .vehicle-table-compact th,
body[data-page="vehicles"] .vehicle-table-compact td {
  padding-top: 8px;
  padding-bottom: 8px;
}
body[data-page="vehicles"] .vehicle-actions {
  justify-content: flex-end;
  gap: 0;
}
body[data-page="vehicles"] .vehicle-menu-wrap {
  display: inline-flex;
  justify-content: flex-end;
}
body[data-page="vehicles"] .vehicle-menu-button {
  min-height: 32px;
  padding: 0 11px;
  border-radius: 10px;
  border-color: rgba(162, 205, 197, 0.95);
  background: #ffffff;
  color: #173f45;
  font-size: 0.78rem;
  font-weight: 850;
  white-space: nowrap;
}
body[data-page="vehicles"] .vehicle-menu-button[aria-expanded="true"] {
  background: #e7f8f2;
  border-color: #0f9f86;
  color: #087567;
}
body[data-page="vehicles"] .vehicle-action-dropdown {
  min-width: 208px;
  border-radius: 14px;
  padding: 8px;
  z-index: 95;
  box-shadow: 0 22px 52px rgba(12, 38, 45, 0.18);
}
body[data-page="vehicles"] .vehicle-action-dropdown button {
  min-height: 36px;
  border-radius: 10px;
  padding: 8px 10px;
  font-size: 0.81rem;
}
body[data-page="vehicles"] .vehicle-action-dropdown .danger {
  margin-top: 5px;
  border-top: 1px solid #fde2e2;
  border-radius: 0 0 10px 10px;
}
@media (max-width: 1180px) {
  body[data-page="vehicles"] .vehicle-filters {
    grid-template-columns: minmax(220px, 1.5fr) repeat(2, minmax(132px, 1fr));
  }
}
@media (max-width: 900px) {
  body[data-page="vehicles"] .vehicle-toolbar {
    position: relative;
    flex-direction: column;
    align-items: stretch;
    gap: 12px;
  }
  body[data-page="vehicles"] #vehicle-new-button {
    align-self: stretch;
  }
  body[data-page="vehicles"] .vehicle-filters {
    grid-template-columns: 1fr;
  }
  body[data-page="vehicles"] .vehicle-action-dropdown {
    min-width: min(100%, 220px);
  }
}
/* Vehicle fixed action menu final clipping guard */
body[data-page="vehicles"] .vehicle-action-dropdown { position: fixed; }

/* Vehicle fixed dropdown compact width guard */
body[data-page="vehicles"] .vehicle-action-dropdown { right: auto; width: 208px; max-width: calc(100vw - 24px); }

/* Business Center production real-data modules 2026-06-29 */
.business-center-toolbar {
  display: grid;
  grid-template-columns: minmax(220px, 1.4fr) minmax(150px, 0.7fr) minmax(150px, 0.7fr) auto auto;
  gap: 10px;
  align-items: end;
  padding: 12px;
  border: 1px solid #cfe7e2;
  border-radius: 12px;
  background: #f8fffc;
  margin: 12px 0;
}
.business-center-toolbar label {
  display: grid;
  gap: 5px;
  min-width: 0;
  margin: 0;
  color: #315466;
  font-size: 12px;
  font-weight: 850;
}
.business-center-toolbar input {
  height: 38px;
  min-width: 0;
  border: 1px solid #cfe1dd;
  border-radius: 10px;
  padding: 0 12px;
  background: #fff;
  color: #102438;
  font: inherit;
}
.business-center-metrics {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
  margin: 12px 0;
}
.business-center-metric {
  min-height: 94px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 8px;
  padding: 14px;
  border: 1px solid #d7ebe6;
  border-radius: 12px;
  background: #ffffff;
  box-shadow: 0 10px 28px rgba(8,34,53,.06);
}
.business-center-metric span,
.business-center-metric small {
  color: #607486;
  font-size: 12px;
  font-weight: 850;
}
.business-center-metric strong {
  color: #0f4f46;
  font-size: 24px;
  line-height: 1.15;
  overflow-wrap: anywhere;
}
.business-center-table-wrap {
  width: 100%;
  max-width: 100%;
}
.business-center-table {
  min-width: 980px;
}
.business-center-table th {
  background: #edf9f5;
  color: #173f45;
  font-size: 12px;
  font-weight: 900;
}
.business-center-table td {
  vertical-align: middle;
}
.business-center-table tbody tr:nth-child(even) {
  background: #f8fffc;
}
.business-center-table .compact-button {
  min-height: 32px;
  padding: 6px 10px;
  margin: 2px;
  white-space: nowrap;
}
.business-center-source-note {
  margin-top: 10px;
  color: #607486;
  font-size: 12px;
  font-weight: 800;
}
.business-center-empty-state {
  min-height: 180px;
}
@media (max-width: 1180px) {
  .business-center-toolbar {
    grid-template-columns: minmax(220px, 1fr) repeat(2, minmax(140px, .7fr));
  }
  .business-center-toolbar button {
    width: 100%;
  }
  .business-center-metrics {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
@media (max-width: 760px) {
  .business-center-toolbar,
  .business-center-metrics {
    grid-template-columns: 1fr;
  }
  .business-center-table-wrap {
    overflow: visible;
    border: 0;
    background: transparent;
  }
  .business-center-table {
    min-width: 0;
    border-collapse: separate;
    border-spacing: 0 10px;
  }
  .business-center-table thead {
    display: none;
  }
  .business-center-table,
  .business-center-table tbody,
  .business-center-table tr,
  .business-center-table td {
    display: block;
    width: 100%;
  }
  .business-center-table tr {
    border: 1px solid #cfe7e2;
    border-radius: 14px;
    background: #fff;
    box-shadow: 0 10px 28px rgba(8,34,53,.06);
    padding: 8px 10px;
  }
  .business-center-table td {
    display: grid;
    grid-template-columns: 118px minmax(0,1fr);
    gap: 10px;
    border: 0 !important;
    padding: 7px 2px;
    word-break: break-word;
  }
  .business-center-table td::before {
    content: attr(data-label);
    color: #607486;
    font-size: 12px;
    font-weight: 900;
  }
}

/* Global sticky enterprise header refactor 2026-06-29 */
.content {
  padding-top: 12px;
}

.portal-header.enterprise-header {
  position: sticky;
  top: 0;
  z-index: 120;
  display: grid;
  grid-template-columns: minmax(230px, 0.9fr) minmax(260px, 1fr) minmax(420px, 1.25fr);
  align-items: center;
  gap: 14px;
  min-height: 72px;
  margin: 0 0 14px;
  padding: 9px 14px;
  border: 1px solid rgba(15, 143, 127, 0.18);
  border-top: 3px solid #0f8f7f;
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.97);
  box-shadow: 0 12px 30px rgba(7, 45, 40, 0.09);
  backdrop-filter: blur(16px);
}

.enterprise-header-brand,
.enterprise-header-status,
.enterprise-header-actions {
  min-width: 0;
}

.enterprise-header-brand {
  display: flex;
  align-items: center;
  gap: 10px;
}

.enterprise-brand-mark {
  flex: 0 0 auto;
  width: 38px;
  height: 38px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 8px;
  background: #0f8f7f;
  color: #ffffff;
  font-size: 0.82rem;
  font-weight: 900;
  letter-spacing: 0;
}

.enterprise-brand-copy {
  display: grid;
  gap: 1px;
  min-width: 0;
}

.enterprise-product-name,
.enterprise-brand-copy small {
  color: #607080;
  font-size: 0.72rem;
  font-weight: 800;
  line-height: 1.25;
}

.enterprise-brand-copy strong {
  overflow: hidden;
  color: #102a35;
  font-size: 0.96rem;
  font-weight: 900;
  line-height: 1.25;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.enterprise-header-status,
.enterprise-header-actions {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 7px;
}

.enterprise-header-actions {
  justify-content: flex-end;
}

.enterprise-status-pill,
.enterprise-user {
  display: inline-flex;
  align-items: center;
  min-width: 0;
  max-width: 100%;
  min-height: 28px;
  padding: 5px 9px;
  border: 1px solid rgba(15, 143, 127, 0.15);
  border-radius: 999px;
  background: #f7fcfa;
  color: #39535d;
  font-size: 0.78rem;
  font-weight: 800;
  line-height: 1.2;
  white-space: nowrap;
}

.enterprise-user {
  max-width: 180px;
  overflow: hidden;
  background: #ffffff;
  text-overflow: ellipsis;
}

.enterprise-action,
.enterprise-icon-button,
.enterprise-logout {
  min-height: 32px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 8px;
  font-size: 0.8rem;
  font-weight: 900;
  line-height: 1.2;
  text-decoration: none;
  white-space: nowrap;
}

.enterprise-action {
  padding: 0 11px;
  border: 1px solid rgba(15, 143, 127, 0.18);
}

.enterprise-action-primary {
  border-color: #0f8f7f;
  background: #0f8f7f;
  color: #ffffff;
  box-shadow: 0 8px 18px rgba(15, 143, 127, 0.18);
}

.enterprise-action-secondary,
.enterprise-icon-button,
.enterprise-logout {
  background: #ffffff;
  color: #0f766e;
}

.enterprise-icon-button {
  width: 32px;
  padding: 0;
  border: 1px solid rgba(15, 143, 127, 0.2);
}

.enterprise-logout {
  padding: 0 10px;
  border: 1px solid rgba(148, 163, 184, 0.36);
}

.enterprise-language.language-switcher {
  min-height: 32px;
  padding: 2px;
  border-radius: 8px;
}

.enterprise-language.language-switcher button {
  min-height: 26px;
  padding: 0 8px;
}

.topbar-clean {
  justify-content: space-between;
  align-items: flex-start;
  gap: 14px;
  margin: 0 0 14px;
}

.topbar-clean .topbar-title-block,
.topbar-clean h2,
.topbar-clean #admin-label.topbar-summary {
  display: block;
}

.topbar-clean .topbar-title-block {
  min-width: 0;
}

.topbar-clean h2 {
  margin: 0;
  color: #102a35;
  font-size: 1.5rem;
  line-height: 1.25;
}

.topbar-clean #admin-label.topbar-summary {
  margin: 4px 0 0;
  color: #607080;
  font-size: 0.92rem;
  line-height: 1.45;
}

.command-title {
  display: grid;
  gap: 4px;
  margin: 0;
}

.command-title h2 {
  margin: 0;
  color: #102a35;
  font-size: 1.56rem;
  line-height: 1.28;
}

.command-title p {
  max-width: 900px;
  margin: 0;
  color: #607080;
  font-size: 0.94rem;
  line-height: 1.55;
}

.command-meta {
  display: none !important;
}

@media (max-width: 1220px) {
  .portal-header.enterprise-header {
    grid-template-columns: minmax(220px, 0.8fr) minmax(0, 1.2fr);
    min-height: 76px;
  }

  .enterprise-header-status {
    order: 3;
    grid-column: 1 / -1;
  }

  .enterprise-header-actions [data-header-priority="low"],
  .enterprise-package {
    display: none;
  }
}

@media (max-width: 820px) {
  .portal-header.enterprise-header {
    grid-template-columns: 1fr;
    align-items: stretch;
    min-height: auto;
    padding: 10px 12px;
  }

  .enterprise-header-actions {
    justify-content: flex-start;
  }

  .enterprise-header-status {
    flex-wrap: nowrap;
    overflow-x: auto;
    padding-bottom: 2px;
  }

  .enterprise-header-status::-webkit-scrollbar {
    height: 0;
  }

  .topbar-clean {
    flex-direction: column;
  }
}

@media (max-width: 520px) {
  .content,
  .content.main-content,
  body[data-page="vehicles"] .content,
  body[data-module="staff"] .content {
    width: min(100% - 18px, 100%);
  }

  .portal-header.enterprise-header {
    gap: 9px;
    margin-bottom: 12px;
  }

  .enterprise-header-status,
  .enterprise-header-actions [data-header-priority="medium"],
  .enterprise-header-actions [data-header-priority="low"],
  .enterprise-user {
    display: none;
  }

  .enterprise-header-actions {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 32px auto auto;
    gap: 7px;
  }

  .enterprise-action-primary {
    min-width: 0;
    overflow: hidden;
    padding: 0 9px;
    text-overflow: ellipsis;
  }

  .enterprise-brand-copy small {
    display: none;
  }

  .topbar-clean h2,
  .command-title h2 {
    font-size: 1.28rem;
  }
}
/* Compact height correction for global sticky header 2026-06-29 */
.portal-header.enterprise-header {
  grid-template-columns: minmax(210px, 0.75fr) minmax(320px, 1fr) minmax(500px, 1.35fr);
  gap: 10px;
  min-height: 72px;
  padding: 7px 12px;
}
.enterprise-header-status,
.enterprise-header-actions {
  flex-wrap: nowrap;
  overflow: hidden;
}
.enterprise-status-pill {
  min-height: 26px;
  max-width: 132px;
  overflow: hidden;
  padding: 4px 8px;
  text-overflow: ellipsis;
}
.enterprise-status-pill.status-online {
  max-width: 104px;
}
.enterprise-package {
  max-width: 96px;
}
.enterprise-action,
.enterprise-icon-button,
.enterprise-logout {
  min-height: 30px;
  font-size: 0.76rem;
}
.enterprise-action {
  padding: 0 9px;
}
.enterprise-user {
  max-width: 92px;
  min-height: 28px;
  padding: 4px 8px;
}
.enterprise-language.language-switcher {
  display: none;
}
@media (max-width: 1360px) {
  .portal-header.enterprise-header {
    grid-template-columns: minmax(200px, 0.7fr) minmax(300px, 0.95fr) minmax(420px, 1.2fr);
  }
  .enterprise-package,
  .enterprise-header-actions [data-header-priority="low"] {
    display: none;
  }
}
@media (max-width: 1220px) {
  .portal-header.enterprise-header {
    grid-template-columns: minmax(210px, 0.8fr) minmax(0, 1.2fr);
    min-height: 76px;
  }
  .enterprise-header-status {
    order: initial;
    grid-column: auto;
  }
  .enterprise-header-actions [data-header-priority="medium"] {
    display: none;
  }
}
@media (max-width: 820px) {
  .portal-header.enterprise-header {
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 8px;
    min-height: 74px;
  }
  .enterprise-header-status,
  .enterprise-header-actions [data-header-priority="medium"],
  .enterprise-header-actions [data-header-priority="low"],
  .enterprise-user {
    display: none;
  }
  .enterprise-header-actions {
    justify-content: flex-end;
  }
}
/* Sticky header refinement: menus, badge readability, responsive priority 2026-06-30 */
.portal-sticky-header {
  position: sticky;
  top: 0;
  z-index: 120;
  margin: 0 0 14px;
  border: 1px solid rgba(15, 143, 127, 0.18);
  border-top: 3px solid #0f8f7f;
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.98);
  box-shadow: 0 12px 30px rgba(7, 45, 40, 0.09);
  backdrop-filter: blur(16px);
}

.portal-sticky-header .portal-header-inner {
  display: grid;
  grid-template-columns: minmax(280px, 1.4fr) minmax(330px, 1fr) max-content;
  align-items: center;
  gap: 12px;
  min-height: 62px;
  padding: 6px 12px;
  min-width: 0;
}

.portal-header-brand,
.portal-header-badges,
.portal-header-actions {
  min-width: 0;
}

.portal-header-brand {
  display: flex;
  align-items: center;
  gap: 10px;
  overflow: hidden;
}

.portal-header-logo {
  flex: 0 0 auto;
  width: 38px;
  height: 38px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 8px;
  background: #0f8f7f;
  color: #ffffff;
  font-size: 0.82rem;
  font-weight: 900;
  letter-spacing: 0;
}

.portal-header-company {
  display: grid;
  gap: 1px;
  min-width: 0;
}

.portal-header-product,
.portal-header-subtitle {
  color: #607080;
  font-size: 0.72rem;
  font-weight: 800;
  line-height: 1.25;
}

.portal-header-company strong {
  display: block;
  max-width: min(42vw, 440px);
  overflow: hidden;
  color: #102a35;
  font-size: 0.98rem;
  font-weight: 900;
  line-height: 1.25;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.portal-header-badges,
.portal-header-actions {
  display: flex;
  align-items: center;
  gap: 7px;
  flex-wrap: nowrap;
}

.portal-header-badges {
  justify-content: flex-start;
  overflow: hidden;
}

.portal-status-badge {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 28px;
  max-width: 160px;
  overflow: hidden;
  padding: 5px 9px;
  border: 1px solid rgba(15, 143, 127, 0.16);
  border-radius: 999px;
  background: #f7fcfa;
  color: #39535d;
  font-size: 0.78rem;
  font-weight: 850;
  line-height: 1.2;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.portal-status-tenant { max-width: 132px; }
.portal-status-branch { max-width: 170px; }
.portal-status-api { max-width: 118px; }

.portal-header-actions {
  justify-content: flex-end;
  overflow: visible;
}

.portal-action-primary,
.portal-action-secondary,
.portal-menu > summary,
.portal-notification-btn {
  min-height: 32px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 8px;
  font-size: 0.8rem;
  font-weight: 900;
  line-height: 1.2;
  text-decoration: none;
  white-space: nowrap;
}

.portal-action-primary {
  padding: 0 12px;
  border: 1px solid #0f8f7f;
  background: #0f8f7f;
  color: #ffffff;
  box-shadow: 0 8px 18px rgba(15, 143, 127, 0.18);
}

.portal-action-secondary,
.portal-menu > summary,
.portal-notification-btn {
  border: 1px solid rgba(15, 143, 127, 0.2);
  background: #ffffff;
  color: #0f766e;
}

.portal-action-secondary {
  padding: 0 10px;
}

.portal-notification-btn {
  position: relative;
  width: 34px;
  padding: 0;
  cursor: default;
}

.portal-notification-btn svg {
  width: 17px;
  height: 17px;
}

.portal-notification-dot {
  position: absolute;
  top: 7px;
  right: 8px;
  width: 7px;
  height: 7px;
  border: 2px solid #ffffff;
  border-radius: 999px;
  background: #0f8f7f;
}

.portal-menu {
  position: relative;
  flex: 0 0 auto;
}

.portal-menu > summary {
  list-style: none;
  padding: 0 10px;
  cursor: pointer;
  user-select: none;
}

.portal-menu > summary::-webkit-details-marker {
  display: none;
}

.portal-system-info-menu > summary::after,
.portal-actions-menu > summary::after,
.portal-user-menu > summary::after {
  content: "";
  width: 6px;
  height: 6px;
  margin-left: 7px;
  border-right: 1.8px solid currentColor;
  border-bottom: 1.8px solid currentColor;
  transform: rotate(45deg) translateY(-1px);
}

.portal-user-menu > summary {
  gap: 7px;
  max-width: 142px;
  padding-left: 6px;
}

.portal-user-avatar {
  width: 24px;
  height: 24px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
  background: #e7f7f3;
  color: #0f766e;
  font-size: 0.76rem;
  font-weight: 950;
}

.portal-user-short {
  max-width: 78px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.portal-menu-panel {
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  z-index: 160;
  min-width: 220px;
  max-width: min(320px, calc(100vw - 28px));
  display: grid;
  gap: 6px;
  padding: 10px;
  border: 1px solid rgba(15, 143, 127, 0.18);
  border-radius: 8px;
  background: #ffffff;
  box-shadow: 0 18px 38px rgba(7, 45, 40, 0.16);
}

.portal-system-info-panel {
  left: 0;
  right: auto;
  min-width: 260px;
}

.portal-system-info-panel span,
.portal-user-dropdown strong {
  display: grid;
  gap: 2px;
  min-width: 0;
}

.portal-system-info-panel b {
  color: #607080;
  font-size: 0.72rem;
  font-weight: 850;
}

.portal-system-info-panel strong,
.portal-user-dropdown strong {
  overflow-wrap: anywhere;
  color: #102a35;
  font-size: 0.84rem;
  line-height: 1.3;
}

.portal-actions-panel a,
.portal-user-dropdown a,
.portal-user-dropdown button {
  min-height: 34px;
  display: flex;
  align-items: center;
  padding: 0 10px;
  border: 0;
  border-radius: 8px;
  background: #f7fcfa;
  color: #0f766e;
  font: inherit;
  font-size: 0.84rem;
  font-weight: 850;
  text-align: left;
  text-decoration: none;
  cursor: pointer;
}

.portal-user-dropdown button {
  color: #b42318;
  background: #fff7f5;
}

.portal-actions-menu {
  display: none;
}


@media (max-width: 1420px) {
  .portal-sticky-header .portal-header-inner {
    grid-template-columns: minmax(280px, 1.35fr) minmax(300px, 0.9fr) max-content;
  }
  .portal-header-actions > .portal-action-secondary[data-header-priority="low"] {
    display: none;
  }
  .portal-header-company strong {
    max-width: min(36vw, 400px);
  }
}

@media (max-width: 1279px) {
  .portal-sticky-header .portal-header-inner {
    grid-template-columns: minmax(260px, 1fr) minmax(170px, auto) max-content;
    min-height: 76px;
  }
  .portal-status-branch,
  .portal-header-actions > .portal-action-primary,
  .portal-header-actions > .portal-action-secondary {
    display: none;
  }
  .portal-actions-menu {
    display: block;
  }
  .portal-status-tenant,
  .portal-status-api {
    max-width: 130px;
  }
}

@media (max-width: 767px) {
  .portal-sticky-header .portal-header-inner {
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 8px;
    min-height: 70px;
    padding: 8px 10px;
  }
  .portal-header-badges {
    grid-column: 2;
    grid-row: 1;
  }
  .portal-header-badges .portal-status-badge {
    display: none;
  }
  .portal-system-info-menu > summary {
    width: 34px;
    padding: 0;
    font-size: 0;
  }
  .portal-system-info-menu > summary::before {
    content: "i";
    font-size: 0.86rem;
    font-weight: 950;
  }
  .portal-system-info-menu > summary::after {
    display: none;
  }
  .portal-header-actions {
    grid-column: 1 / -1;
    justify-content: flex-start;
  }
  .portal-actions-menu > summary {
    min-width: 112px;
  }
  .portal-notification-btn {
    margin-left: auto;
  }
  .portal-user-short {
    display: none;
  }
  .portal-user-menu > summary {
    width: 42px;
    padding: 0 6px;
  }
  .portal-user-menu > summary::after {
    display: none;
  }
  .portal-header-company strong {
    max-width: calc(100vw - 150px);
    font-size: 0.9rem;
  }
  .portal-header-subtitle {
    display: none;
  }
  .portal-system-info-panel {
    left: auto;
    right: -42px;
  }
}
/* Governance staff/branch/location package-limit UI */
.governance-limit-banner{display:flex;align-items:center;justify-content:space-between;gap:14px;margin:12px 0 14px;border-color:#bfe6dd;background:#f5fffb}.governance-limit-banner.limit-reached{border-color:#fed7aa;background:#fff7ed}.governance-limit-banner h3{margin:2px 0 4px;color:#0f3f39}.governance-grid{align-items:start}.governance-toolbar{display:grid;grid-template-columns:minmax(0,1.6fr) minmax(160px,.7fr);gap:10px;margin:10px 0 12px}.governance-toolbar input,.governance-toolbar select{height:38px;border:1px solid #cfe1dd;border-radius:10px;background:#fff;padding:0 12px;font:inherit;color:#173f45}.governance-table{min-width:0;width:100%;table-layout:fixed}.governance-table th,.governance-table td{overflow-wrap:anywhere;vertical-align:middle}.governance-table td strong,.governance-table td small{display:block}.governance-table td small{margin-top:2px;color:#607486}.governance-actions{display:flex;gap:6px;align-items:center;flex-wrap:wrap}.governance-editor .settings-form{gap:12px}.governance-editor .check-row{display:flex;align-items:center;gap:8px;flex-direction:row}.governance-editor .check-row input{width:18px;height:18px}@media(max-width:1280px){.governance-grid{grid-template-columns:1fr}.governance-editor .settings-form{grid-template-columns:repeat(3,minmax(0,1fr));align-items:end}}@media(max-width:860px){.governance-toolbar{grid-template-columns:1fr}.governance-editor .settings-form{grid-template-columns:1fr}.governance-table-wrap{overflow:visible;border:0;background:transparent}.governance-table{border-collapse:separate;border-spacing:0 10px}.governance-table thead{display:none}.governance-table,.governance-table tbody,.governance-table tr,.governance-table td{display:block;width:100%}.governance-table tr{border:1px solid #cfe7e2;border-radius:14px;background:#fff;box-shadow:0 10px 28px rgba(8,34,53,.06);padding:8px 10px}.governance-table td{display:grid;grid-template-columns:128px minmax(0,1fr);gap:10px;border:0!important;padding:7px 2px}.governance-table td::before{content:attr(data-label);color:#607486;font-size:12px;font-weight:900}.governance-limit-banner{align-items:flex-start;flex-direction:column}}

/* Governance release: keep staff permission matrix inside its panel */
body[data-module="staff"] .permission-shell .table-wrap{max-width:100%;overflow-x:auto!important;overflow-y:visible}body[data-module="staff"] .permission-table{width:max-content;min-width:960px}body[data-module="staff"] .permission-shell{max-width:100%;overflow:hidden}@media(max-width:860px){body[data-module="staff"] .permission-shell .table-wrap{overflow-x:auto!important}body[data-module="staff"] .permission-table{min-width:820px}}

.portal-language-switcher {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  min-height: 32px;
  padding: 2px;
  border: 1px solid rgba(15, 143, 127, 0.2);
  border-radius: 8px;
  background: #f7fcfa;
  flex: 0 0 auto;
}

.portal-language-switcher button {
  min-width: 32px;
  min-height: 26px;
  border: 0;
  border-radius: 7px;
  background: transparent;
  color: #557078;
  cursor: pointer;
  font-size: 0.78rem;
  font-weight: 900;
  line-height: 1;
}

.portal-language-switcher button.active {
  background: #0f8f7f;
  color: #ffffff;
  box-shadow: 0 7px 16px rgba(15, 143, 127, 0.18);
}

.portal-ai-button {
  padding: 0 10px;
  cursor: pointer;
}

@media (max-width: 1280px) {
  .portal-ai-button,
  .portal-header-actions > .portal-action-secondary[data-header-priority="low"] {
    display: none;
  }
}

@media (max-width: 860px) {
  .portal-language-switcher {
    order: -1;
  }
}
/* Governance release: keep hidden permission-toggle inputs inside their switch. */
body[data-module="staff"] .permission-toggle {
  position: relative !important;
  overflow: hidden !important;
}

body[data-module="staff"] .permission-toggle input {
  position: absolute !important;
  inset: 0 auto auto 0 !important;
  width: 1px !important;
  height: 1px !important;
  min-width: 1px !important;
  max-width: 1px !important;
  opacity: 0 !important;
  pointer-events: none !important;
}.branch-hero{display:flex;align-items:flex-start;justify-content:space-between;gap:18px;margin-bottom:18px}.branch-hero h1{margin:4px 0 8px}.branch-hero-badges{display:flex;gap:8px;align-items:center;flex-wrap:wrap;justify-content:flex-end}.branch-usage-card{display:flex;align-items:center;justify-content:space-between;gap:16px;border:1px solid #bfe6dd;background:#f4fffb;border-radius:18px;padding:20px;margin:8px 0 18px}.branch-usage-card.limit-reached{border-color:#fed7aa;background:#fff7ed}.branch-usage-copy{min-width:0;flex:1}.branch-usage-copy h2{margin:6px 0 8px;font-size:22px;color:#0b3c38}.branch-progress{height:8px;max-width:340px;background:#dff3ed;border-radius:999px;overflow:hidden;margin:10px 0}.branch-progress span{display:block;height:100%;background:linear-gradient(90deg,#0f9f7a,#7fcdb8);border-radius:inherit}.branch-usage-card.limit-reached .branch-progress span{background:#f59e0b}.branch-usage-actions{display:flex;align-items:center;gap:10px;flex-wrap:wrap;justify-content:flex-end}.branch-management-panel{border:1px solid #d7e8e5;border-radius:18px;background:#fff;box-shadow:0 20px 50px rgba(15,63,57,.08);padding:20px;min-width:0}.branch-management-head{display:flex;align-items:flex-start;justify-content:space-between;gap:14px;margin-bottom:14px}.branch-management-head h2{margin:4px 0 0}.branch-toolbar-actions{display:flex;gap:8px;align-items:center;justify-content:flex-end;flex-wrap:wrap}.branch-toolbar-actions .btn{white-space:nowrap}.branch-filters{display:grid;grid-template-columns:minmax(240px,1fr) repeat(3,minmax(150px,220px));gap:10px;margin-bottom:14px}.branch-filters input,.branch-filters select{height:40px;border:1px solid #cfe1dd;border-radius:10px;background:#fff;padding:0 12px;font:inherit;color:#173f45;min-width:0}.branch-limit-warning{display:none;align-items:flex-start;gap:10px;border:1px solid #fed7aa;background:#fff7ed;border-radius:12px;color:#9a3412;font-weight:800;padding:12px 14px;margin-bottom:14px}.branch-limit-warning.is-visible{display:flex}.branch-table-wrap{width:100%;overflow:auto;border:1px solid #dcebe8;border-radius:14px}.branch-table{min-width:1120px;width:100%;table-layout:fixed;border-collapse:collapse}.branch-table th,.branch-table td{vertical-align:middle;overflow-wrap:anywhere}.branch-table th{background:#f5fbf9;color:#355269;font-size:13px}.branch-table td{font-size:14px}.branch-table td strong,.branch-table td small{display:block}.branch-table td small{color:#607486;margin-top:3px}.branch-row-actions{display:flex;align-items:center;gap:8px;position:relative}.branch-action-menu{position:relative}.branch-action-panel{display:none;position:absolute;right:0;top:calc(100% + 8px);z-index:20;min-width:230px;border:1px solid #d8e8e5;border-radius:12px;background:#fff;box-shadow:0 18px 40px rgba(8,34,53,.18);padding:8px}.branch-action-panel.is-open{display:grid;gap:4px}.branch-action-panel button{display:flex;align-items:center;width:100%;min-height:34px;border:0;background:transparent;border-radius:8px;padding:7px 10px;text-align:left;color:#173f45;font:inherit;font-weight:800;cursor:pointer}.branch-action-panel button:hover{background:#eef8f5}.branch-action-panel button.is-danger{color:#9a3412}.branch-action-panel button:disabled{cursor:not-allowed;color:#94a3b8;background:#f8fafc}.branch-modal-backdrop,.branch-detail-backdrop{position:fixed;inset:0;z-index:80;display:flex;align-items:center;justify-content:center;background:rgba(15,43,42,.42);padding:18px}.branch-modal,.branch-detail-drawer{width:min(760px,100%);max-height:calc(100vh - 36px);overflow:auto;border-radius:20px;border:1px solid #d8e8e5;background:#fff;box-shadow:0 28px 70px rgba(8,34,53,.24)}.branch-modal-head,.branch-detail-head{display:flex;align-items:flex-start;justify-content:space-between;gap:14px;padding:20px 22px;border-bottom:1px solid #e1eeeb}.branch-modal-head h2,.branch-detail-head h2{margin:2px 0 4px}.branch-modal-body,.branch-detail-body{padding:20px 22px}.branch-modal-form{display:grid;gap:14px}.branch-form-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}.branch-form-grid label{display:grid;gap:6px;color:#183f45;font-weight:900}.branch-form-grid label.is-wide{grid-column:1/-1}.branch-form-grid input,.branch-form-grid select,.branch-form-grid textarea{width:100%;min-width:0;border:1px solid #cfe1dd;border-radius:10px;background:#fff;color:#173f45;font:inherit;padding:10px 12px}.branch-form-grid textarea{min-height:86px;resize:vertical}.branch-form-error{display:none;border:1px solid #fecaca;background:#fff1f2;color:#991b1b;border-radius:12px;padding:10px 12px;font-weight:800}.branch-form-error.is-visible{display:block}.branch-modal-actions{display:flex;justify-content:flex-end;gap:10px;flex-wrap:wrap;padding-top:4px}.branch-detail-list{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}.branch-detail-item{border:1px solid #e0eeeb;background:#f9fffd;border-radius:12px;padding:12px}.branch-detail-item span{display:block;color:#607486;font-size:12px;font-weight:900;margin-bottom:5px}.branch-detail-item strong{display:block;color:#0b3c38;overflow-wrap:anywhere}.branch-detail-drawer{margin-left:auto;height:100%;max-height:100%;border-radius:18px 0 0 18px}.branch-detail-backdrop{align-items:stretch;justify-content:flex-end;padding:0}.branch-detail-actions{display:flex;justify-content:flex-end;gap:10px;margin-top:16px;flex-wrap:wrap}@media(max-width:1180px){.branch-filters{grid-template-columns:repeat(2,minmax(0,1fr))}.branch-usage-card{align-items:flex-start;flex-direction:column}.branch-usage-actions{justify-content:flex-start}}@media(max-width:760px){.branch-hero,.branch-management-head{flex-direction:column}.branch-hero-badges,.branch-toolbar-actions{justify-content:flex-start}.branch-filters{grid-template-columns:1fr}.branch-table-wrap{overflow:visible;border:0;background:transparent}.branch-table{min-width:0;border-collapse:separate;border-spacing:0 10px}.branch-table thead{display:none}.branch-table,.branch-table tbody,.branch-table tr,.branch-table td{display:block;width:100%}.branch-table tr{border:1px solid #cfe7e2;border-radius:14px;background:#fff;box-shadow:0 10px 26px rgba(8,34,53,.06);padding:10px}.branch-table td{display:grid;grid-template-columns:118px minmax(0,1fr);gap:10px;border:0!important;padding:7px 2px}.branch-table td::before{content:attr(data-label);color:#607486;font-size:12px;font-weight:900}.branch-row-actions{align-items:stretch;flex-direction:column}.branch-action-panel{position:static;box-shadow:none;margin-top:8px}.branch-modal-backdrop{align-items:flex-start;padding:10px}.branch-modal{max-height:calc(100vh - 20px);border-radius:16px}.branch-modal-head,.branch-modal-body{padding:16px}.branch-form-grid,.branch-detail-list{grid-template-columns:1fr}.branch-detail-backdrop{padding:10px;align-items:flex-start}.branch-detail-drawer{width:100%;height:auto;max-height:calc(100vh - 20px);border-radius:16px}.branch-detail-head,.branch-detail-body{padding:16px}}
.branch-action-menu[open] .branch-action-panel{display:grid;gap:4px}.branch-action-panel button.danger{color:#9a3412}.branch-detail-list>div{border:1px solid #e0eeeb;background:#f9fffd;border-radius:12px;padding:12px}.branch-detail-list dt{color:#607486;font-size:12px;font-weight:900;margin-bottom:5px}.branch-detail-list dd{margin:0;color:#0b3c38;font-weight:900;overflow-wrap:anywhere}
.branch-modal-backdrop,.branch-detail-backdrop{z-index:3000}
.promotions-admin-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 18px;
  padding: 20px;
  border: 1px solid rgba(20, 148, 96, .16);
  border-radius: 18px;
  background: linear-gradient(135deg, #f5fffa, #ffffff);
  box-shadow: 0 14px 34px rgba(17, 86, 56, .08);
}
.promotions-admin-head h3 { margin: 0; color: #045f3e; }
.promotions-admin-head p { margin: 6px 0 0; color: #53665f; }
.promotions-toolbar {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items: center;
  margin-bottom: 14px;
}
.promotions-toolbar input,
.promotions-toolbar select {
  min-height: 40px;
  border: 1px solid rgba(15, 95, 66, .18);
  border-radius: 12px;
  padding: 0 12px;
  background: #fff;
}
.promotions-table-wrap {
  overflow-x: auto;
  border: 1px solid rgba(15, 95, 66, .12);
  border-radius: 16px;
  background: #fff;
  box-shadow: 0 14px 34px rgba(17, 86, 56, .07);
}
.promotions-table {
  width: 100%;
  border-collapse: collapse;
  min-width: 980px;
}
.promotions-table th,
.promotions-table td {
  padding: 12px;
  border-bottom: 1px solid rgba(15, 95, 66, .10);
  text-align: left;
  vertical-align: top;
}
.promotions-table th { color: #52635d; font-size: .78rem; text-transform: uppercase; }
.promotions-table td strong { display: block; color: #10251d; }
.promotions-table td small { display: block; color: #6a7b74; margin-top: 4px; }
.promotion-thumb img,
.promotion-thumb-empty {
  width: 96px;
  height: 54px;
  border-radius: 10px;
  object-fit: cover;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: #edf8f2;
  color: #6a7b74;
}
.promotion-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  min-width: 260px;
}
.promotion-actions .danger { color: #a33; border-color: rgba(170, 51, 51, .22); }
.promotions-source-note { margin-top: 12px; }
.promotion-admin-modal-backdrop {
  position: fixed;
  inset: 0;
  z-index: 80;
  display: grid;
  place-items: center;
  padding: 20px;
  background: rgba(12, 38, 29, .34);
}
.promotion-admin-modal {
  width: min(920px, 100%);
  max-height: calc(100vh - 40px);
  overflow: auto;
  border-radius: 18px;
  background: #fff;
  box-shadow: 0 28px 80px rgba(10, 58, 40, .24);
}
.promotion-form {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
  padding: 18px;
}
.promotion-form label {
  display: grid;
  gap: 6px;
  color: #253b34;
  font-weight: 700;
}
.promotion-form input,
.promotion-form select,
.promotion-form textarea {
  width: 100%;
  min-height: 40px;
  border: 1px solid rgba(15, 95, 66, .18);
  border-radius: 12px;
  padding: 9px 11px;
  font: inherit;
}
.promotion-form textarea { resize: vertical; }
.promotion-form .modal-actions {
  grid-column: 1 / -1;
  display: flex;
  justify-content: flex-end;
  gap: 10px;
}
@media (max-width: 760px) {
  .promotions-admin-head { display: block; }
  .promotion-form { grid-template-columns: 1fr; }
  .promotion-actions { min-width: 220px; }
}


/* CARD Promotions Management A++ */
.promotion-head-badges{display:flex;gap:8px;flex-wrap:wrap;justify-content:flex-end}
.promotion-stat-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px;margin:14px 0 16px}
.promotion-stat-card{border:1px solid rgba(20,151,111,.18);background:linear-gradient(180deg,#ffffff,#f4fffa);border-radius:16px;padding:14px;box-shadow:0 14px 34px rgba(15,88,56,.08);display:grid;gap:5px;min-width:0}
.promotion-stat-card span{font-size:12px;font-weight:800;color:#416158;line-height:1.35}
.promotion-stat-card strong{font-size:26px;color:#047044;line-height:1}
.promotion-stat-card small{color:#6f7f79;font-weight:700}
.promotions-toolbar{grid-template-columns:repeat(4,max-content) minmax(180px,1fr) minmax(150px,180px) minmax(180px,220px)}
.promotion-preview-modal{max-width:620px}
.promotion-preview-card{display:grid;grid-template-columns:190px minmax(0,1fr);gap:16px;padding:18px;border-top:1px solid rgba(20,151,111,.14)}
.promotion-preview-card img{width:100%;aspect-ratio:16/9;object-fit:cover;border-radius:14px;background:#e9f7f0;border:1px solid rgba(20,151,111,.14)}
.promotion-preview-card div{display:grid;gap:8px;align-content:start;min-width:0}
.promotion-preview-card h3{margin:0;color:#074f38;font-size:20px;line-height:1.25}
.promotion-preview-card p{margin:0;color:#52645c;line-height:1.55}
.promotion-preview-card small{color:#6f7f79;font-weight:700}
@media (max-width: 920px){.promotion-stat-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.promotions-toolbar{grid-template-columns:1fr 1fr}.promotion-preview-card{grid-template-columns:1fr}.promotion-head-badges{justify-content:flex-start}}
@media (max-width: 560px){.promotion-stat-grid{grid-template-columns:1fr}.promotions-toolbar{grid-template-columns:1fr}.promotion-stat-card strong{font-size:22px}}

/* CARD Promotions UI Polish Final A++ */
.promotions-toolbar{display:flex;flex-wrap:wrap;gap:10px;align-items:center;justify-content:flex-start;margin:0 0 10px}.promotions-toolbar .primary-button{box-shadow:0 12px 24px rgba(5,128,84,.16)}.promotions-filter-bar{display:grid;grid-template-columns:minmax(220px,1fr) minmax(150px,190px) minmax(190px,240px) max-content;gap:10px;align-items:center;margin:0 0 14px}.promotions-filter-bar input,.promotions-filter-bar select{min-height:42px;border:1px solid rgba(15,95,66,.18);border-radius:12px;padding:0 12px;background:#fff;color:#15372f;font:inherit;box-shadow:0 8px 20px rgba(12,75,51,.04)}.promotions-table{min-width:1040px;table-layout:fixed}.promotion-col-image{width:112px}.promotion-col-title{width:22%}.promotion-col-code{width:12%}.promotion-col-placement{width:15%}.promotion-col-period{width:14%}.promotion-col-status{width:116px}.promotion-col-visible{width:126px}.promotion-col-order{width:72px}.promotion-col-actions{width:220px}.promotion-title-cell strong,.promotion-title-cell small{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;line-height:1.35}.promotion-status-badge,.promotion-visibility-badge{display:inline-flex;align-items:center;justify-content:center;min-height:28px;border-radius:999px;padding:5px 10px;font-size:12px;font-weight:900;white-space:nowrap;border:1px solid transparent}.promotion-status-badge.status-active,.promotion-visibility-badge.visibility-visible{color:#067246;background:#e9fbf2;border-color:#bcebd1}.promotion-status-badge.status-draft{color:#7a5200;background:#fff7dc;border-color:#f3d785}.promotion-status-badge.status-inactive,.promotion-visibility-badge.visibility-hidden{color:#56636b;background:#f1f5f4;border-color:#d8e3df}.promotion-status-badge.status-expired{color:#9a3412;background:#fff0e7;border-color:#f5c4a8}.promotion-status-badge.status-archived{color:#4b5563;background:#eef2f7;border-color:#d7dee8}.promotion-actions{display:flex;align-items:flex-start;gap:6px;min-width:0}.promotion-actions>.ghost-button{white-space:nowrap}.promotion-action-menu{position:relative}.promotion-action-menu summary{list-style:none;cursor:pointer;user-select:none}.promotion-action-menu summary::-webkit-details-marker{display:none}.promotion-action-menu[open] summary{background:#e9fbf2;border-color:#9ee1bd;color:#047044}.promotion-action-menu-panel{position:absolute;right:0;top:calc(100% + 6px);z-index:25;display:grid;gap:4px;min-width:172px;padding:8px;border:1px solid rgba(15,95,66,.16);border-radius:14px;background:#fff;box-shadow:0 18px 42px rgba(12,58,42,.18)}.promotion-action-menu-panel button{appearance:none;border:0;background:transparent;border-radius:10px;padding:9px 10px;text-align:left;color:#173b31;font-weight:800;cursor:pointer}.promotion-action-menu-panel button:hover{background:#eefbf5;color:#047044}.promotion-action-menu-panel button.danger{color:#b42318}.promotion-action-menu-panel button.danger:hover{background:#fff1f0;color:#8f1d12}.promotions-table td[data-label="Action"]{overflow:visible}.promotions-table-wrap{overflow-x:auto;overflow-y:visible}
@media (max-width: 920px){.promotions-filter-bar{grid-template-columns:1fr 1fr}.promotion-col-title{width:24%}.promotion-col-actions{width:210px}}
@media (max-width: 760px){.promotions-filter-bar{grid-template-columns:1fr}.promotions-table{min-width:0;table-layout:auto}.promotions-table colgroup,.promotions-table thead{display:none}.promotions-table,.promotions-table tbody,.promotions-table tr,.promotions-table td{display:block;width:100%}.promotions-table tr{padding:12px;border-bottom:1px solid rgba(15,95,66,.12)}.promotions-table td{display:grid;grid-template-columns:120px minmax(0,1fr);gap:10px;border-bottom:0;padding:8px 0}.promotions-table td::before{content:attr(data-label);color:#607486;font-size:12px;font-weight:900}.promotion-thumb img,.promotion-thumb-empty{width:120px;height:68px}.promotion-actions{justify-content:flex-start;flex-wrap:wrap}.promotion-action-menu-panel{left:0;right:auto}.promotion-title-cell strong,.promotion-title-cell small{-webkit-line-clamp:2}}.promotions-table td:last-child{overflow:visible}

/* Promotion Image Upload SEO/AEO/GEO A++ */
.promotion-field-wide,
.promotion-image-uploader {
  grid-column: 1 / -1;
}
.promotion-image-uploader {
  display: grid;
  grid-template-columns: minmax(220px, 1.15fr) minmax(220px, .85fr);
  gap: 12px;
  padding: 14px;
  border: 1px solid rgba(20,151,111,.18);
  border-radius: 16px;
  background: linear-gradient(180deg, #f8fffb 0%, #ffffff 100%);
  box-shadow: 0 12px 28px rgba(12,75,51,.06);
}
.promotion-upload-head {
  grid-column: 1 / -1;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
}
.promotion-upload-head div { display: grid; gap: 4px; min-width: 0; }
.promotion-upload-head strong { color: #074f38; font-size: 15px; }
.promotion-upload-head small { color: #60746b; line-height: 1.45; }
.promotion-dropzone {
  grid-row: span 4;
  min-height: 196px;
  border: 1.5px dashed rgba(15,143,85,.34);
  border-radius: 16px;
  background: #f2fbf6;
  display: grid;
  place-items: center;
  padding: 10px;
  cursor: pointer;
  transition: border-color .18s ease, background .18s ease, box-shadow .18s ease, transform .18s ease;
}
.promotion-dropzone:hover,
.promotion-dropzone:focus-visible,
.promotion-dropzone.dragging {
  outline: none;
  border-color: #0f8f55;
  background: #e9fbf2;
  box-shadow: 0 0 0 4px rgba(15,143,85,.08);
  transform: translateY(-1px);
}
.promotion-upload-preview {
  width: 100%;
  min-height: 170px;
  border-radius: 12px;
  display: grid;
  place-items: center;
  overflow: hidden;
  color: #33735b;
  font-weight: 800;
  text-align: center;
}
.promotion-upload-preview img {
  width: 100%;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  border-radius: 12px;
  background: #e9f7f0;
  border: 1px solid rgba(20,151,111,.14);
}
.promotion-upload-actions {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  align-items: center;
}
.promotion-upload-error {
  grid-column: 1 / -1;
  margin: 0;
  padding: 10px 12px;
  border-radius: 12px;
  color: #b42318;
  background: #fff4f2;
  border: 1px solid #ffc9c2;
  font-weight: 800;
}
.promotion-upload-error[hidden],
.promotion-upload-actions .hidden { display: none !important; }
@media (max-width: 760px) {
  .promotion-image-uploader { grid-template-columns: 1fr; }
  .promotion-dropzone { grid-row: auto; min-height: 180px; }
  .promotion-upload-head { display: grid; }
}


.promotion-upload-guidance {
  margin: 10px 0 0;
  padding-left: 18px;
  color: var(--muted);
  font-size: 0.82rem;
  line-height: 1.55;
}

.promotion-upload-guidance li + li {
  margin-top: 3px;
}

/* Sticky Header Business Metrics Upgrade 20260702 */
.portal-sticky-header .portal-header-inner {
  grid-template-columns: minmax(250px, 1.25fr) minmax(280px, 1fr) max-content;
}

.portal-business-badge {
  flex: 0 1 auto;
  min-width: 108px;
  max-width: 190px;
  min-height: 34px;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  position: relative;
  overflow: hidden;
  border: 1px solid rgba(15, 143, 127, 0.22);
  border-radius: 999px;
  background: #f8fffd;
  color: #143c42;
  padding: 7px 11px 8px;
  font-size: 0.78rem;
  font-weight: 850;
  white-space: nowrap;
}

.portal-business-badge span,
.portal-business-badge strong {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.portal-business-badge span {
  color: #47626b;
  font-weight: 850;
}

.portal-business-badge strong {
  color: #0a3b3f;
  font-weight: 950;
}

.portal-business-badge i {
  position: absolute;
  left: 10px;
  right: 10px;
  bottom: 4px;
  height: 3px;
  border-radius: 999px;
  background: rgba(15, 143, 127, 0.12);
}

.portal-business-badge i::after {
  content: "";
  display: block;
  width: var(--usage, 0%);
  height: 100%;
  border-radius: inherit;
  background: #0f8f7f;
}

.portal-business-badge.is-warn {
  border-color: rgba(245, 158, 11, 0.42);
  background: #fffaf0;
}

.portal-business-badge.is-warn i::after {
  background: #f59e0b;
}

.portal-business-badge.is-danger {
  border-color: rgba(220, 38, 38, 0.42);
  background: #fff5f5;
}

.portal-business-badge.is-danger i::after {
  background: #dc2626;
}

.portal-notification-menu {
  position: relative;
}

.portal-notification-menu > summary {
  list-style: none;
}

.portal-notification-menu > summary::-webkit-details-marker {
  display: none;
}

.portal-notification-count {
  position: absolute;
  top: -5px;
  right: -5px;
  min-width: 17px;
  height: 17px;
  display: grid;
  place-items: center;
  border-radius: 999px;
  border: 2px solid #ffffff;
  background: #ef4444;
  color: #ffffff;
  font-size: 0.66rem;
  font-weight: 950;
  line-height: 1;
}

.portal-notification-panel {
  width: min(320px, calc(100vw - 28px));
  padding: 10px;
}

.portal-notification-panel h3,
.portal-notification-panel p {
  margin: 0;
}

.portal-notification-panel h3 {
  padding: 2px 4px 8px;
  color: #102a35;
  font-size: 0.9rem;
}

.portal-notification-panel a {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  padding: 9px 8px;
  border-radius: 8px;
  color: #173f45;
  text-decoration: none;
}

.portal-notification-panel a:hover {
  background: #eefaf7;
}

.portal-notification-panel a strong {
  color: #0f766e;
  white-space: nowrap;
}

.portal-notification-panel p {
  padding: 10px 8px;
  color: #607080;
}

@media (max-width: 1279px) {
  .portal-package-badge {
    max-width: 150px;
  }
}

@media (max-width: 767px) {
  .portal-business-badge {
    display: none;
  }
  .portal-notification-menu {
    margin-left: auto;
  }
}
/* Portal Header Balance Lock 20260702: fixed metric geometry across portal pages */
.portal-sticky-header {
  --portal-header-height: 72px;
  --portal-header-control-height: 36px;
  --portal-header-metric-width: 164px;
  --portal-header-system-width: 108px;
  --portal-header-gap: 8px;
}

.portal-sticky-header .portal-header-inner {
  grid-template-columns: minmax(290px, 1fr) minmax(444px, 444px) max-content;
  gap: var(--portal-header-gap);
  min-height: var(--portal-header-height);
  padding: 7px 12px;
}

.portal-header-brand,
.portal-header-badges,
.portal-header-actions {
  min-height: var(--portal-header-control-height);
}

.portal-header-brand {
  align-self: stretch;
}

.portal-header-logo {
  width: 40px;
  height: 40px;
}

.portal-header-company {
  align-content: center;
  min-height: 44px;
}

.portal-header-company strong {
  max-width: min(35vw, 420px);
}

.portal-header-badges {
  justify-content: center;
  gap: var(--portal-header-gap);
  overflow: visible;
}

.portal-business-badge {
  box-sizing: border-box;
  flex: 0 0 var(--portal-header-metric-width);
  width: var(--portal-header-metric-width);
  min-width: var(--portal-header-metric-width);
  max-width: var(--portal-header-metric-width);
  height: var(--portal-header-control-height);
  min-height: var(--portal-header-control-height);
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  align-content: center;
  justify-items: start;
  gap: 1px;
  padding: 5px 12px 8px;
  border-radius: 10px;
}

.portal-business-badge span,
.portal-business-badge strong {
  display: block;
  width: 100%;
  line-height: 1.05;
}

.portal-business-badge span {
  font-size: 0.67rem;
}

.portal-business-badge strong {
  font-size: 0.82rem;
}

.portal-business-badge i {
  left: 12px;
  right: 12px;
  bottom: 4px;
}

.portal-system-info-menu > summary {
  box-sizing: border-box;
  width: var(--portal-header-system-width);
  min-width: var(--portal-header-system-width);
  height: var(--portal-header-control-height);
  min-height: var(--portal-header-control-height);
  padding: 0 10px;
}

.portal-action-primary,
.portal-action-secondary,
.portal-menu > summary,
.portal-notification-btn,
.portal-language-switcher {
  box-sizing: border-box;
  height: var(--portal-header-control-height);
  min-height: var(--portal-header-control-height);
}

.portal-language-switcher button {
  min-height: 30px;
}

.portal-user-menu > summary {
  width: 122px;
  max-width: 122px;
}

.portal-user-short {
  max-width: 58px;
}

.portal-notification-btn {
  width: var(--portal-header-control-height);
}

@media (max-width: 1420px) {
  .portal-sticky-header {
    --portal-header-metric-width: 150px;
    --portal-header-system-width: 96px;
  }
  .portal-sticky-header .portal-header-inner {
    grid-template-columns: minmax(260px, 1fr) minmax(404px, 404px) max-content;
  }
  .portal-header-company strong {
    max-width: min(31vw, 360px);
  }
}

@media (max-width: 1360px) {
  .portal-header-actions > .portal-action-secondary[data-header-priority="medium"] {
    display: none;
  }
}

@media (max-width: 1279px) {
  .portal-sticky-header {
    --portal-header-height: 72px;
    --portal-header-metric-width: 128px;
    --portal-header-system-width: 38px;
  }
  .portal-sticky-header .portal-header-inner {
    grid-template-columns: minmax(190px, 1fr) minmax(310px, 310px) max-content;
    min-height: var(--portal-header-height);
  }
  .portal-system-info-menu > summary {
    padding: 0;
    font-size: 0;
  }
  .portal-system-info-menu > summary::before {
    content: "i";
    font-size: 0.86rem;
    font-weight: 950;
  }
  .portal-system-info-menu > summary::after {
    display: none;
  }
  .portal-business-badge span {
    font-size: 0.62rem;
  }
  .portal-business-badge strong {
    font-size: 0.76rem;
  }
}

@media (max-width: 900px) {
  .portal-sticky-header {
    --portal-header-metric-width: 118px;
  }
  .portal-sticky-header .portal-header-inner {
    grid-template-columns: minmax(172px, 1fr) minmax(288px, 288px) max-content;
    padding-inline: 10px;
  }
  .portal-actions-menu > summary {
    width: var(--portal-header-control-height);
    min-width: var(--portal-header-control-height);
    padding: 0;
    font-size: 0;
  }
  .portal-actions-menu > summary::before {
    content: "+";
    font-size: 1rem;
    line-height: 1;
  }
  .portal-actions-menu > summary::after,
  .portal-user-menu > summary::after,
  .portal-user-short {
    display: none;
  }
  .portal-user-menu > summary {
    width: var(--portal-header-control-height);
    max-width: var(--portal-header-control-height);
    padding: 0 5px;
  }
  .portal-user-avatar {
    width: 24px;
    height: 24px;
  }
}

@media (max-width: 767px) {
  .portal-sticky-header {
    --portal-header-height: 78px;
    --portal-header-control-height: 34px;
  }
  .portal-sticky-header .portal-header-inner {
    grid-template-columns: minmax(0, 1fr) auto;
    min-height: var(--portal-header-height);
  }
  .portal-header-badges {
    justify-content: flex-end;
    min-width: var(--portal-header-control-height);
  }
  .portal-business-badge {
    display: none;
  }
  .portal-system-info-menu > summary,
  .portal-notification-btn,
  .portal-actions-menu > summary,
  .portal-user-menu > summary {
    width: var(--portal-header-control-height);
    min-width: var(--portal-header-control-height);
    height: var(--portal-header-control-height);
    min-height: var(--portal-header-control-height);
  }
  .portal-header-company {
    min-height: 40px;
  }
}


/* Portal Auth Header Balance Lock 20260702 */
.auth-page .login-shell {
  align-content: center;
  gap: 14px;
}

.auth-portal-header {
  min-height: 90px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding: 7px 12px;
  border: 1px solid rgba(15, 143, 127, 0.18);
  border-top: 3px solid #0f8f7f;
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.98);
  box-shadow: 0 12px 30px rgba(7, 45, 40, 0.09);
  backdrop-filter: blur(16px);
}

.auth-portal-brand,
.auth-portal-meta {
  min-width: 0;
  min-height: 36px;
  display: flex;
  align-items: center;
}

.auth-portal-brand {
  gap: 10px;
}

.auth-portal-logo {
  flex: 0 0 auto;
  width: 40px;
  height: 40px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 8px;
  background: #0f8f7f;
  color: #ffffff;
  font-size: 0.82rem;
  font-weight: 900;
}

.auth-portal-brand div {
  min-width: 0;
  display: grid;
  gap: 1px;
}

.auth-portal-brand strong {
  overflow: hidden;
  color: #102a35;
  font-size: 0.98rem;
  font-weight: 900;
  line-height: 1.25;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.auth-portal-brand span,
.auth-portal-meta span {
  overflow: hidden;
  color: #607080;
  font-size: 0.72rem;
  font-weight: 800;
  line-height: 1.25;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.auth-portal-meta {
  justify-content: flex-end;
  gap: 8px;
}

.auth-portal-meta strong,
.auth-portal-meta i {
  box-sizing: border-box;
  height: 36px;
  min-height: 36px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid rgba(15, 143, 127, 0.2);
  border-radius: 8px;
  background: #ffffff;
  color: #0f766e;
  font-size: 0.78rem;
  font-style: normal;
  font-weight: 900;
  line-height: 1.2;
  white-space: nowrap;
}

.auth-portal-meta strong {
  padding: 0 10px;
}

.auth-portal-meta i {
  width: 36px;
  background: #0f8f7f;
  color: #ffffff;
}

@media (max-width: 980px) {
  .auth-page .login-shell {
    width: min(1140px, 100%);
  }
  .auth-portal-header {
    min-height: 97px;
  }
}

@media (max-width: 620px) {
  .auth-page .login-shell {
    gap: 12px;
  }
  .auth-portal-header {
    width: 100%;
    max-width: 100%;
    min-height: 114px;
    align-items: flex-start;
    flex-direction: column;
    justify-content: center;
  }
  .login-card,
  .auth-card {
    width: 100%;
    max-width: 100%;
  }
  .auth-portal-meta {
    width: 100%;
    justify-content: space-between;
  }
  .auth-portal-meta span {
    max-width: calc(100vw - 158px);
  }
}


/* Portal Auth Mobile Width Lock 20260702 */
@media (max-width: 620px) {
  body.auth-page {
    padding: 10px;
  }
  body.auth-page .login-shell {
    width: 100%;
    max-width: calc(100vw - 20px);
  }
  body.auth-page .auth-portal-header,
  body.auth-page .login-card,
  body.auth-page .auth-card {
    width: 100%;
    max-width: 100%;
  }
}


/* Portal Final Business Metrics Alignment 20260702 */
.portal-page-title {
  display: block;
  margin: 0 0 18px;
  padding: 0 2px;
  border: 0;
  background: transparent;
  box-shadow: none;
}

.portal-page-title h1,
.portal-page-title p {
  margin: 0;
}

.portal-page-title h1 {
  color: #102438;
  font-size: clamp(1.35rem, 1.1rem + 0.7vw, 1.9rem);
  font-weight: 950;
  line-height: 1.18;
}

.portal-page-title p {
  margin-top: 6px;
  max-width: 840px;
  color: #607486;
  font-size: 0.94rem;
  line-height: 1.5;
}

.content > .topbar,
.content > .portal-header-meta,
.content > .tenant-status-strip,
.content > .page-header-meta {
  display: none !important;
}

@media (max-width: 767px) {
  .portal-page-title {
    margin-bottom: 14px;
  }

  .portal-page-title h1 {
    font-size: 1.28rem;
  }

  .portal-page-title p {
    font-size: 0.86rem;
  }
}


/* Portal Final Notification Center Placement 20260702 */
.portal-sticky-header {
  --portal-header-metrics-total-width: 500px;
}

.portal-sticky-header .portal-header-inner {
  grid-template-columns: minmax(290px, 1fr) minmax(var(--portal-header-metrics-total-width), var(--portal-header-metrics-total-width)) max-content;
}

.portal-header-badges .portal-notification-menu {
  flex: 0 0 var(--portal-header-control-height);
  width: var(--portal-header-control-height);
}

.portal-header-badges .portal-notification-btn {
  height: var(--portal-header-control-height);
  min-height: var(--portal-header-control-height);
}

@media (max-width: 1420px) {
  .portal-sticky-header {
    --portal-header-metrics-total-width: 452px;
  }
  .portal-sticky-header .portal-header-inner {
    grid-template-columns: minmax(250px, 1fr) minmax(var(--portal-header-metrics-total-width), var(--portal-header-metrics-total-width)) max-content;
  }
}

@media (max-width: 1279px) {
  .portal-sticky-header {
    --portal-header-metrics-total-width: 400px;
  }
  .portal-sticky-header .portal-header-inner {
    grid-template-columns: minmax(178px, 1fr) minmax(var(--portal-header-metrics-total-width), var(--portal-header-metrics-total-width)) max-content;
  }
}

@media (max-width: 900px) {
  .portal-sticky-header {
    --portal-header-metrics-total-width: 368px;
  }
  .portal-sticky-header .portal-header-inner {
    grid-template-columns: minmax(160px, 1fr) minmax(var(--portal-header-metrics-total-width), var(--portal-header-metrics-total-width)) max-content;
  }
}

@media (max-width: 767px) {
  .portal-sticky-header .portal-header-inner {
    grid-template-columns: minmax(0, 1fr) auto;
  }

  .portal-header-badges .portal-notification-menu {
    display: inline-flex;
  }
}


/* Portal Final 1440 Sidebar Fit 20260702 */
@media (max-width: 1600px) {
  .portal-sticky-header {
    --portal-header-metric-width: 118px;
    --portal-header-system-width: 84px;
    --portal-header-metrics-total-width: 394px;
  }

  .portal-sticky-header .portal-header-inner {
    grid-template-columns: minmax(220px, 0.85fr) minmax(var(--portal-header-metrics-total-width), var(--portal-header-metrics-total-width)) max-content;
  }

  .portal-header-company strong {
    max-width: min(24vw, 280px);
  }

  .portal-header-actions > .portal-action-secondary[data-header-priority] {
    display: none;
  }
}

@media (max-width: 1180px) {
  .portal-ai-button {
    display: none;
  }
}


/* Portal Compact Language Menu 20260703 */
.portal-sticky-header {
  --portal-header-metrics-total-width: 286px;
}

.portal-sticky-header .portal-header-inner {
  grid-template-columns: minmax(280px, 1fr) minmax(var(--portal-header-metrics-total-width), var(--portal-header-metrics-total-width)) max-content;
}

.portal-system-info-menu,
.portal-ai-button {
  display: none !important;
}

.portal-language-menu > summary {
  box-sizing: border-box;
  width: 48px;
  min-width: 48px;
  height: var(--portal-header-control-height);
  min-height: var(--portal-header-control-height);
  padding: 0 10px;
  justify-content: center;
  font-weight: 950;
}

.portal-language-panel {
  right: 0;
  min-width: 92px;
  padding: 6px;
}

.portal-language-panel button {
  width: 100%;
  min-height: 34px;
  border: 0;
  border-radius: 8px;
  background: transparent;
  color: #315466;
  font: inherit;
  font-weight: 900;
  text-align: left;
  cursor: pointer;
}

.portal-language-panel button:hover,
.portal-language-panel button.active {
  background: #0f8f7f;
  color: #ffffff;
}

@media (max-width: 1600px) {
  .portal-sticky-header {
    --portal-header-metrics-total-width: 286px;
  }

  .portal-sticky-header .portal-header-inner {
    grid-template-columns: minmax(250px, 1fr) minmax(var(--portal-header-metrics-total-width), var(--portal-header-metrics-total-width)) max-content;
  }
}

@media (max-width: 900px) {
  .portal-sticky-header {
    --portal-header-metrics-total-width: 284px;
  }
}

@media (max-width: 767px) {
  .portal-sticky-header .portal-header-inner {
    grid-template-columns: minmax(0, 1fr) auto;
  }
}


/* Portal Native Language Select 20260703 */
.portal-language-menu {
  display: none !important;
}

.portal-language-select-wrap {
  box-sizing: border-box;
  width: 58px;
  min-width: 58px;
  height: var(--portal-header-control-height);
  min-height: var(--portal-header-control-height);
  display: inline-flex;
  align-items: center;
  position: relative;
}

.portal-language-select {
  width: 100%;
  height: 100%;
  min-height: var(--portal-header-control-height);
  border: 1px solid rgba(15, 143, 127, 0.2);
  border-radius: 8px;
  background: #ffffff;
  color: #0f766e;
  font: inherit;
  font-size: 0.78rem;
  font-weight: 950;
  cursor: pointer;
  outline: none;
  padding: 0 8px;
}

.portal-language-select:focus {
  border-color: #0f8f7f;
  box-shadow: 0 0 0 3px rgba(15, 143, 127, 0.12);
}


/* Portal Notice Right Placement 20260703 */
.portal-header-actions > .portal-notification-menu {
  order: 90;
}

.portal-header-actions > .portal-user-menu {
  order: 80;
}

.portal-header-actions > .portal-notification-menu .portal-notification-btn {
  cursor: pointer;
}

@media (max-width: 767px) {
  .portal-header-actions > .portal-notification-menu {
    display: inline-flex;
  }
}


/* Portal Header No Overlap Balance 20260703 */
.portal-sticky-header {
  --portal-header-gap: 12px;
}

.portal-sticky-header .portal-header-inner {
  column-gap: var(--portal-header-gap);
}

.portal-header-badges,
.portal-header-actions {
  min-width: 0;
}

.portal-business-badge {
  overflow: hidden;
}

.portal-business-badge span,
.portal-business-badge strong {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.portal-action-primary {
  flex: 0 0 auto;
  white-space: nowrap;
}

@media (max-width: 1600px) {
  .portal-sticky-header {
    --portal-header-metric-width: 112px;
    --portal-header-metrics-total-width: 248px;
  }

  .portal-business-badge {
    padding-left: 10px;
    padding-right: 10px;
  }

  .portal-business-badge strong {
    font-size: 0.76rem;
  }
}

@media (max-width: 1320px) {
  .portal-header-actions > .portal-action-primary {
    min-width: 42px;
    width: 42px;
    padding: 0;
    overflow: hidden;
    color: transparent;
    font-size: 0;
  }

  .portal-header-actions > .portal-action-primary::before {
    content: "+";
    color: #ffffff;
    font-size: 1rem;
    font-weight: 950;
    line-height: 1;
  }
}


/* Phase 3.14G vehicle tenant data binding polish */
body[data-page="vehicles"] .vehicle-thumb {
  overflow: hidden;
  display: grid;
  place-items: center;
  background: linear-gradient(135deg, #e9f8f3, #ffffff);
  border: 1px solid rgba(15, 143, 127, 0.2);
}
body[data-page="vehicles"] .vehicle-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
body[data-page="vehicles"] .vehicle-thumb.has-image span {
  display: none;
}
body[data-page="vehicles"] .vehicle-documents-panel {
  display: grid;
  gap: 12px;
}
body[data-page="vehicles"] .vehicle-document-contract {
  display: flex;
  flex-direction: column;
  gap: 4px;
  border: 1px solid rgba(15, 143, 127, 0.2);
  border-radius: 12px;
  background: #f3fffa;
  padding: 12px 14px;
  color: #174047;
}
body[data-page="vehicles"] .vehicle-document-contract span {
  color: #5b6f76;
  font-size: 12px;
  line-height: 1.45;
}
body[data-page="vehicles"] .vehicle-document-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}
body[data-page="vehicles"] .vehicle-document-card {
  border: 1px solid #d7ebe6;
  border-radius: 12px;
  background: #fff;
  padding: 11px 12px;
  display: flex;
  justify-content: space-between;
  gap: 10px;
  align-items: center;
  min-width: 0;
}
body[data-page="vehicles"] .vehicle-document-card strong {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
body[data-page="vehicles"] .vehicle-document-card span {
  flex: 0 0 auto;
  font-size: 11px;
  font-weight: 800;
  color: #8a5b00;
  background: #fff8e5;
  border: 1px solid #f4d38a;
  border-radius: 999px;
  padding: 4px 8px;
}
body[data-page="vehicles"] .vehicle-note-grid label {
  display: grid;
  gap: 6px;
}
@media (max-width: 720px) {
  body[data-page="vehicles"] .vehicle-document-grid {
    grid-template-columns: 1fr;
  }
}

/* Portal Login Mockup Refresh 20260706 */
body.auth-page.portal-login-v2 {
  min-height: 100svh;
  height: 100svh;
  place-items: stretch;
  padding: 0;
  overflow: hidden;
  background:
    radial-gradient(circle at 12% 18%, rgba(15, 143, 127, 0.16), transparent 24%),
    radial-gradient(circle at 82% 78%, rgba(13, 116, 105, 0.13), transparent 24%),
    linear-gradient(135deg, #f7fbfa 0%, #edf7f4 48%, #ffffff 100%);
}
body.portal-login-v2 .login-shell {
  width: 100%;
  min-height: 100svh;
  height: 100svh;
  display: grid;
  align-items: stretch;
}
body.portal-login-v2 .portal-login-grid-v2 {
  height: 100svh;
  min-height: 0;
  display: grid;
  grid-template-columns: minmax(0, 1.14fr) minmax(390px, 0.86fr);
  gap: 0;
  align-items: stretch;
}
body.portal-login-v2 .portal-login-hero {
  position: relative;
  min-height: 0;
  height: 100%;
  padding: clamp(34px, 5vw, 72px);
  overflow: hidden;
  border: 0;
  border-radius: 0;
  color: #f8fffd;
  background:
    linear-gradient(145deg, rgba(5, 53, 48, 0.94), rgba(9, 117, 103, 0.9)),
    radial-gradient(circle at 20% 22%, rgba(107, 255, 224, 0.34), transparent 28%);
  box-shadow: none;
}
body.portal-login-v2 .portal-login-hero::before,
body.portal-login-v2 .portal-login-hero::after {
  content: "";
  position: absolute;
  inset: auto;
  pointer-events: none;
  border-radius: 999px;
  filter: blur(1px);
}
body.portal-login-v2 .portal-login-hero::before {
  width: 560px;
  height: 560px;
  right: -180px;
  top: -120px;
  background: radial-gradient(circle, rgba(119, 255, 224, 0.18), transparent 64%);
}
body.portal-login-v2 .portal-login-hero::after {
  width: 520px;
  height: 520px;
  left: -190px;
  bottom: -170px;
  background: radial-gradient(circle, rgba(255, 255, 255, 0.14), transparent 66%);
}
body.portal-login-v2 .portal-login-hero-content {
  position: relative;
  z-index: 1;
  height: 100%;
  display: grid;
  grid-template-rows: auto auto minmax(220px, 1fr) auto;
  gap: clamp(18px, 3.2vw, 34px);
  max-width: 760px;
}
body.portal-login-v2 .portal-login-brand-line {
  display: flex;
  align-items: center;
  gap: 14px;
}
body.portal-login-v2 .portal-login-brand-mark {
  width: 52px;
  height: 52px;
  display: inline-grid;
  place-items: center;
  border-radius: 16px;
  background: rgba(255, 255, 255, 0.13);
  border: 1px solid rgba(255, 255, 255, 0.24);
  color: #ffffff;
  font-weight: 950;
}
body.portal-login-v2 .portal-login-brand-line .eyebrow {
  margin: 0 0 2px;
  color: #aef4e6;
  letter-spacing: 0;
}
body.portal-login-v2 .portal-login-brand-line strong {
  color: rgba(255, 255, 255, 0.88);
  font-size: 0.96rem;
}
body.portal-login-v2 .portal-login-hero-copy h1 {
  max-width: 720px;
  margin: 0;
  color: #ffffff;
  font-size: clamp(2.45rem, 5.2vw, 5.1rem);
  line-height: 1.03;
  letter-spacing: 0;
}
body.portal-login-v2 .portal-login-hero-copy p {
  max-width: 620px;
  margin: 18px 0 0;
  color: rgba(239, 255, 251, 0.82);
  font-size: clamp(1rem, 1.5vw, 1.18rem);
  line-height: 1.78;
}
body.portal-login-v2 .portal-login-map {
  position: relative;
  min-height: 260px;
  border: 1px solid rgba(204, 255, 244, 0.2);
  border-radius: 28px;
  background:
    linear-gradient(rgba(255,255,255,.055) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.055) 1px, transparent 1px),
    radial-gradient(circle at 44% 52%, rgba(167, 255, 234, 0.18), transparent 34%),
    rgba(255, 255, 255, 0.06);
  background-size: 42px 42px, 42px 42px, auto, auto;
  overflow: hidden;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.12), 0 26px 60px rgba(0,0,0,.16);
}
body.portal-login-v2 .map-line {
  position: absolute;
  height: 2px;
  transform-origin: left center;
  background: linear-gradient(90deg, transparent, rgba(179, 255, 240, 0.86), transparent);
  opacity: .82;
}
body.portal-login-v2 .line-a { width: 44%; left: 18%; top: 42%; transform: rotate(-13deg); }
body.portal-login-v2 .line-b { width: 36%; left: 38%; top: 56%; transform: rotate(18deg); }
body.portal-login-v2 .line-c { width: 30%; left: 25%; top: 66%; transform: rotate(-24deg); }
body.portal-login-v2 .map-point {
  position: absolute;
  width: 18px;
  height: 18px;
  border-radius: 999px;
  background: #9af7e6;
  box-shadow: 0 0 0 8px rgba(154,247,230,.12), 0 0 28px rgba(154,247,230,.8);
}
body.portal-login-v2 .map-point i {
  position: absolute;
  inset: 5px;
  border-radius: inherit;
  background: #064d45;
}
body.portal-login-v2 .point-a { left: 17%; top: 36%; }
body.portal-login-v2 .point-b { left: 43%; top: 49%; }
body.portal-login-v2 .point-c { left: 69%; top: 61%; }
body.portal-login-v2 .point-d { left: 31%; top: 70%; }
body.portal-login-v2 .map-card {
  position: absolute;
  min-width: 178px;
  padding: 13px 14px;
  border: 1px solid rgba(214,255,247,.22);
  border-radius: 18px;
  color: #ffffff;
  background: rgba(5, 36, 34, 0.48);
  backdrop-filter: blur(14px);
  box-shadow: 0 16px 42px rgba(0,0,0,.18);
}
body.portal-login-v2 .map-card b,
body.portal-login-v2 .map-card small { display: block; }
body.portal-login-v2 .map-card b { font-size: .94rem; }
body.portal-login-v2 .map-card small { margin-top: 3px; color: rgba(239,255,251,.72); font-weight: 750; }
body.portal-login-v2 .map-card-a { left: 7%; top: 8%; }
body.portal-login-v2 .map-card-b { right: 7%; bottom: 9%; }
body.portal-login-v2 .portal-login-metrics {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
}
body.portal-login-v2 .portal-login-metrics span {
  min-height: 78px;
  display: grid;
  align-content: center;
  gap: 2px;
  padding: 14px;
  border: 1px solid rgba(214,255,247,.22);
  border-radius: 20px;
  background: rgba(255,255,255,.08);
}
body.portal-login-v2 .portal-login-metrics strong {
  color: #fff;
  font-size: 1.42rem;
  line-height: 1;
}
body.portal-login-v2 .portal-login-metrics small {
  color: rgba(239,255,251,.74);
  font-weight: 800;
}
body.portal-login-v2 .portal-login-card {
  width: 100%;
  max-width: none;
  height: 100%;
  min-height: 0;
  justify-self: stretch;
  display: grid;
  align-content: center;
  padding: clamp(36px, 5.2vw, 82px);
  border: 0;
  border-left: 1px solid rgba(15, 143, 127, 0.16);
  border-radius: 0;
  background: rgba(255, 255, 255, 0.96);
  box-shadow: none;
}
body.portal-login-v2 .portal-login-card-head { max-width: 460px; }
body.portal-login-v2 .login-badge {
  margin: 0 0 18px;
  color: #086d62;
  background: rgba(15, 143, 127, 0.1);
}
body.portal-login-v2 .portal-login-card h1 {
  margin: 0;
  color: #0d2533;
  font-size: clamp(2rem, 3vw, 3.3rem);
  line-height: 1.08;
  letter-spacing: 0;
}
body.portal-login-v2 .login-card-copy {
  max-width: 460px;
  margin: 14px 0 0;
  color: #5e7280;
  line-height: 1.7;
}
body.portal-login-v2 .login-card .auth-form,
body.portal-login-v2 .auth-form {
  width: min(460px, 100%);
  margin-top: 28px;
  gap: 15px;
}
body.portal-login-v2 .auth-form label span {
  color: #263f4f;
  font-size: .9rem;
  font-weight: 900;
}
body.portal-login-v2 .login-card input {
  min-height: 54px;
  border: 1px solid #cfe2df;
  border-radius: 16px;
  background: #fbfefd;
  color: #102027;
  font-size: 1rem;
  transition: border-color .18s ease, box-shadow .18s ease, background .18s ease;
}
body.portal-login-v2 .login-card input:focus {
  border-color: #0f8f7f;
  background: #ffffff;
  box-shadow: 0 0 0 4px rgba(15,143,127,.12);
  outline: 0;
}
body.portal-login-v2 .login-card button,
body.portal-login-v2 .login-card .primary-button {
  min-height: 54px;
  border-radius: 16px;
  box-shadow: 0 18px 36px rgba(15,143,127,.22);
}
body.portal-login-v2 .portal-login-pdpa {
  width: min(460px, 100%);
  margin: 18px 0 0;
  padding: 13px 14px;
  border: 1px solid #d7ebe6;
  border-radius: 16px;
  color: #557080;
  background: #f7fbfa;
  font-size: .84rem;
  line-height: 1.62;
}
body.portal-login-v2 .login-legal-links,
body.portal-login-v2 .login-footer,
body.portal-login-v2 .message {
  width: min(460px, 100%);
}
body.portal-login-v2 .login-legal-links {
  justify-content: flex-start;
  margin-top: 13px;
}
body.portal-login-v2 .login-legal-links a { color: #086d62; }
body.portal-login-v2 .login-footer {
  margin-top: 14px;
  text-align: left;
}
@media (max-width: 980px) {
  body.auth-page.portal-login-v2 { overflow: hidden; }
  body.portal-login-v2 .portal-login-grid-v2 {
    grid-template-columns: 1fr;
    grid-template-rows: minmax(210px, 36vh) 1fr;
  }
  body.portal-login-v2 .portal-login-hero {
    padding: 26px 28px;
  }
  body.portal-login-v2 .portal-login-hero-content {
    max-width: none;
    grid-template-rows: auto auto 1fr;
    gap: 14px;
  }
  body.portal-login-v2 .portal-login-hero-copy h1 { font-size: clamp(1.72rem, 4vw, 2.6rem); max-width: 760px; }
  body.portal-login-v2 .portal-login-hero-copy p { margin-top: 8px; font-size: .95rem; line-height: 1.5; max-width: 700px; }
  body.portal-login-v2 .portal-login-map { min-height: 92px; border-radius: 20px; }
  body.portal-login-v2 .map-card { display: none; }
  body.portal-login-v2 .portal-login-metrics { display: none; }
  body.portal-login-v2 .portal-login-card {
    padding: 26px 28px;
    align-content: start;
    border-left: 0;
    border-top: 1px solid rgba(15, 143, 127, 0.16);
  }
  body.portal-login-v2 .portal-login-card-head,
  body.portal-login-v2 .login-card .auth-form,
  body.portal-login-v2 .portal-login-pdpa,
  body.portal-login-v2 .login-legal-links,
  body.portal-login-v2 .login-footer,
  body.portal-login-v2 .message { width: min(560px, 100%); max-width: 560px; margin-left: auto; margin-right: auto; }
}
@media (max-width: 430px) {
  body.portal-login-v2 .portal-login-grid-v2 { grid-template-rows: 142px 1fr; }
  body.portal-login-v2 .portal-login-hero { padding: 14px 16px; }
  body.portal-login-v2 .portal-login-brand-mark { width: 38px; height: 38px; border-radius: 12px; }
  body.portal-login-v2 .portal-login-brand-line { gap: 10px; }
  body.portal-login-v2 .portal-login-brand-line strong { font-size: .78rem; }
  body.portal-login-v2 .portal-login-brand-line .eyebrow { font-size: .68rem; }
  body.portal-login-v2 .portal-login-hero-copy h1 { font-size: 1.24rem; line-height: 1.15; }
  body.portal-login-v2 .portal-login-hero-copy p { display: none; }
  body.portal-login-v2 .portal-login-map { min-height: 34px; border-radius: 14px; }
  body.portal-login-v2 .map-point { width: 12px; height: 12px; box-shadow: 0 0 0 5px rgba(154,247,230,.12); }
  body.portal-login-v2 .map-point i { inset: 4px; }
  body.portal-login-v2 .portal-login-card { padding: 16px; }
  body.portal-login-v2 .login-badge { min-height: 26px; margin-bottom: 8px; padding: 4px 9px; font-size: .68rem; }
  body.portal-login-v2 .portal-login-card h1 { font-size: 1.48rem; line-height: 1.12; }
  body.portal-login-v2 .login-card-copy { margin-top: 7px; font-size: .82rem; line-height: 1.42; }
  body.portal-login-v2 .login-card .auth-form,
  body.portal-login-v2 .auth-form { margin-top: 12px; gap: 9px; }
  body.portal-login-v2 .auth-form label span { font-size: .78rem; }
  body.portal-login-v2 .login-card input,
  body.portal-login-v2 .login-card button,
  body.portal-login-v2 .login-card .primary-button { min-height: 43px; border-radius: 12px; font-size: .92rem; }
  body.portal-login-v2 .portal-login-pdpa { margin-top: 10px; padding: 9px 10px; font-size: .72rem; line-height: 1.38; border-radius: 12px; }
  body.portal-login-v2 .login-legal-links { margin-top: 8px; gap: 6px; font-size: .74rem; justify-content: center; }
  body.portal-login-v2 .login-footer { display: none; }
  body.portal-login-v2 .message { margin-top: 8px; }
}
@media (max-width: 370px) {
  body.portal-login-v2 .portal-login-grid-v2 { grid-template-rows: 124px 1fr; }
  body.portal-login-v2 .portal-login-hero { padding: 12px 14px; }
  body.portal-login-v2 .portal-login-hero-copy h1 { font-size: 1.08rem; }
  body.portal-login-v2 .portal-login-map { display: none; }
  body.portal-login-v2 .portal-login-card { padding: 12px 14px; }
  body.portal-login-v2 .login-card-copy { display: none; }
  body.portal-login-v2 .portal-login-card h1 { font-size: 1.34rem; }
  body.portal-login-v2 .login-card .auth-form,
  body.portal-login-v2 .auth-form { margin-top: 10px; gap: 8px; }
  body.portal-login-v2 .portal-login-pdpa { font-size: .69rem; line-height: 1.3; }
}
/* Phase 3.16 Pickup / Return Locations production polish */
body[data-module="pickup-return-locations"] .pickup-return-panel {
  overflow: visible;
}
body[data-module="pickup-return-locations"] .pickup-return-panel .panel-head {
  align-items: flex-start;
  gap: 16px;
}
body[data-module="pickup-return-locations"] .pickup-return-editor-panel {
  margin: 14px 0 16px;
  padding: 16px;
  border: 1px solid #bfe7dc;
  border-radius: 16px;
  background: linear-gradient(180deg, #f8fffc 0%, #ffffff 100%);
  box-shadow: 0 18px 45px rgba(15, 118, 110, 0.12);
}
body[data-module="pickup-return-locations"] .pickup-return-form-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}
body[data-module="pickup-return-locations"] .pickup-return-form label {
  display: grid;
  gap: 6px;
  color: #173c3a;
  font-weight: 700;
}
body[data-module="pickup-return-locations"] .pickup-return-form input,
body[data-module="pickup-return-locations"] .pickup-return-form select,
body[data-module="pickup-return-locations"] .pickup-return-form textarea {
  min-height: 42px;
  border: 1px solid #cfe5df;
  border-radius: 12px;
  padding: 9px 11px;
  background: #fff;
  color: #183b43;
  font: inherit;
}
body[data-module="pickup-return-locations"] .pickup-return-form textarea {
  min-height: 86px;
  resize: vertical;
}
body[data-module="pickup-return-locations"] .pickup-return-form .span-2 {
  grid-column: 1 / -1;
}
body[data-module="pickup-return-locations"] .pickup-return-form .check-row {
  display: flex;
  align-items: center;
  gap: 8px;
  min-height: 38px;
}
body[data-module="pickup-return-locations"] .pickup-return-form .check-row input {
  min-height: auto;
  width: 18px;
  height: 18px;
}
body[data-module="pickup-return-locations"] .pickup-return-table-wrap {
  overflow: visible;
}
body[data-module="pickup-return-locations"] .pickup-return-table th {
  background: #ecfaf5;
  color: #23424b;
  white-space: nowrap;
}
body[data-module="pickup-return-locations"] .pickup-return-table td {
  vertical-align: middle;
}
body[data-module="pickup-return-locations"] .pickup-return-table td strong {
  color: #173c3a;
}
body[data-module="pickup-return-locations"] .pickup-return-table td small {
  display: block;
  margin-top: 3px;
  color: #607882;
  font-size: 12px;
}
body[data-module="pickup-return-locations"] .pickup-return-menu {
  position: relative;
}
body[data-module="pickup-return-locations"] .pickup-return-menu > summary {
  list-style: none;
  min-width: 92px;
  justify-content: center;
}
body[data-module="pickup-return-locations"] .pickup-return-menu > summary::-webkit-details-marker {
  display: none;
}
body[data-module="pickup-return-locations"] .pickup-return-menu-panel {
  position: absolute;
  right: 0;
  top: calc(100% + 8px);
  z-index: 30;
  min-width: 220px;
  padding: 8px;
  border: 1px solid #bfe7dc;
  border-radius: 14px;
  background: #ffffff;
  box-shadow: 0 18px 42px rgba(15, 76, 70, 0.18);
}
body[data-module="pickup-return-locations"] .pickup-return-menu-panel button {
  display: flex;
  width: 100%;
  align-items: center;
  justify-content: flex-start;
  min-height: 36px;
  padding: 0 10px;
  border: 0;
  border-radius: 10px;
  background: transparent;
  color: #173c3a;
  font-weight: 700;
  text-align: left;
  cursor: pointer;
}
body[data-module="pickup-return-locations"] .pickup-return-menu-panel button:hover {
  background: #e9f8f2;
}
body[data-module="pickup-return-locations"] .pickup-return-menu-panel .danger {
  margin-top: 6px;
  border-top: 1px solid #edf2f0;
  color: #b42318;
}
@media (max-width: 900px) {
  body[data-module="pickup-return-locations"] .pickup-return-form-grid {
    grid-template-columns: 1fr;
  }
  body[data-module="pickup-return-locations"] .pickup-return-table-wrap {
    overflow-x: visible;
  }
  body[data-module="pickup-return-locations"] .pickup-return-table,
  body[data-module="pickup-return-locations"] .pickup-return-table thead,
  body[data-module="pickup-return-locations"] .pickup-return-table tbody,
  body[data-module="pickup-return-locations"] .pickup-return-table tr,
  body[data-module="pickup-return-locations"] .pickup-return-table th,
  body[data-module="pickup-return-locations"] .pickup-return-table td {
    display: block;
    width: 100%;
  }
  body[data-module="pickup-return-locations"] .pickup-return-table thead {
    display: none;
  }
  body[data-module="pickup-return-locations"] .pickup-return-table tr {
    margin: 0 0 12px;
    padding: 12px;
    border: 1px solid #d4ebe4;
    border-radius: 14px;
    background: #ffffff;
  }
  body[data-module="pickup-return-locations"] .pickup-return-table td {
    display: grid;
    grid-template-columns: 120px minmax(0, 1fr);
    gap: 10px;
    padding: 8px 0;
    border-bottom: 1px solid #eef6f3;
  }
  body[data-module="pickup-return-locations"] .pickup-return-table td::before {
    content: attr(data-label);
    color: #607882;
    font-weight: 700;
  }
  body[data-module="pickup-return-locations"] .pickup-return-menu-panel {
    position: static;
    margin-top: 8px;
    min-width: 0;
    width: 100%;
    box-shadow: none;
  }
  body[data-module="pickup-return-locations"] .pickup-return-table td:last-child {
    grid-template-columns: 1fr;
  }
  body[data-module="pickup-return-locations"] .pickup-return-table td:last-child::before {
    margin-bottom: 4px;
  }
  body[data-module="pickup-return-locations"] .pickup-return-menu > summary {
    width: 100%;
  }
}

/* Phase 3.16 final mobile overflow guard */
@media (max-width: 900px) {
  body[data-module="pickup-return-locations"] .pickup-return-table-wrap,
  body[data-module="pickup-return-locations"] .pickup-return-table,
  body[data-module="pickup-return-locations"] .pickup-return-table tbody,
  body[data-module="pickup-return-locations"] .pickup-return-table tr,
  body[data-module="pickup-return-locations"] .pickup-return-table td,
  body[data-module="pickup-return-locations"] .pickup-return-menu,
  body[data-module="pickup-return-locations"] .pickup-return-menu-panel {
    box-sizing: border-box;
    max-width: 100%;
  }
  body[data-module="pickup-return-locations"] .pickup-return-table tr {
    width: 100%;
  }
  body[data-module="pickup-return-locations"] .pickup-return-table td {
    min-width: 0;
  }
  body[data-module="pickup-return-locations"] .pickup-return-menu-panel {
    min-width: 0;
    width: 100%;
  }
}
/* Vehicle document upload production panel 20260709 */
body[data-page="vehicles"] .vehicle-document-summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  border: 1px solid rgba(15, 143, 127, 0.22);
  background: linear-gradient(180deg, #f5fffb, #ffffff);
  border-radius: 12px;
  padding: 12px 14px;
  color: #173f3d;
}
body[data-page="vehicles"] .vehicle-document-summary span {
  color: #55706d;
  font-size: 12px;
  font-weight: 800;
}
body[data-page="vehicles"] .vehicle-document-grid.production-documents {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}
body[data-page="vehicles"] .vehicle-document-card {
  align-items: stretch;
  flex-direction: column;
  justify-content: flex-start;
  min-width: 0;
  border-color: #d3ebe5;
  background: #ffffff;
  box-shadow: 0 10px 24px rgba(15, 68, 61, 0.06);
}
body[data-page="vehicles"] .vehicle-document-card-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}
body[data-page="vehicles"] .vehicle-document-card-head strong {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: #163f4a;
}
body[data-page="vehicles"] .vehicle-document-badge {
  border-radius: 999px;
  padding: 4px 8px;
  font-size: 11px;
  font-weight: 900;
  border: 1px solid #d5e8e4;
  background: #f4fbf8;
  color: #476660;
  white-space: nowrap;
}
body[data-page="vehicles"] .document-status-valid .vehicle-document-badge,
body[data-page="vehicles"] .document-status-uploaded .vehicle-document-badge {
  border-color: #a8ddd2;
  background: #e8f9f4;
  color: #087567;
}
body[data-page="vehicles"] .document-status-expiring_soon .vehicle-document-badge {
  border-color: #f3d489;
  background: #fff8e5;
  color: #8a5b00;
}
body[data-page="vehicles"] .document-status-expired .vehicle-document-badge,
body[data-page="vehicles"] .document-status-rejected .vehicle-document-badge {
  border-color: #fac6c6;
  background: #fff0f0;
  color: #b42318;
}
body[data-page="vehicles"] .vehicle-document-file {
  margin: 0;
  color: #60757a;
  font-size: 12px;
  line-height: 1.45;
  word-break: break-word;
}
body[data-page="vehicles"] .vehicle-document-meta {
  display: grid;
  grid-template-columns: minmax(130px, 0.75fr) minmax(0, 1.25fr);
  gap: 10px;
}
body[data-page="vehicles"] .vehicle-document-meta label,
body[data-page="vehicles"] .vehicle-note-grid label {
  display: grid;
  gap: 6px;
  min-width: 0;
}
body[data-page="vehicles"] .vehicle-document-meta span,
body[data-page="vehicles"] .vehicle-note-grid span {
  color: #516b71;
  font-size: 12px;
  font-weight: 800;
}
body[data-page="vehicles"] .vehicle-document-meta textarea,
body[data-page="vehicles"] .vehicle-note-grid textarea {
  min-height: 58px;
  resize: vertical;
}
body[data-page="vehicles"] .vehicle-document-upload,
body[data-page="vehicles"] .vehicle-document-actions {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
}
body[data-page="vehicles"] .vehicle-document-upload input[type="file"] {
  min-width: 0;
  flex: 1 1 170px;
  border: 1px dashed #b8dcd5;
  border-radius: 10px;
  padding: 8px;
  background: #fbfffd;
}
body[data-page="vehicles"] .vehicle-note-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
  margin-top: 12px;
}
@media (max-width: 720px) {
  body[data-page="vehicles"] .vehicle-document-grid.production-documents,
  body[data-page="vehicles"] .vehicle-document-meta,
  body[data-page="vehicles"] .vehicle-note-grid {
    grid-template-columns: 1fr;
  }
  body[data-page="vehicles"] .vehicle-document-summary {
    align-items: flex-start;
    flex-direction: column;
  }
}

/* Vehicle document upload UI polish 20260709 */
body[data-page="vehicles"] .vehicle-documents-section { padding-bottom: 18px; }
body[data-page="vehicles"] #vehicle-documents-panel { display: grid; gap: 14px; }
body[data-page="vehicles"] .vehicle-document-summary.polished {
  align-items: flex-start;
  border-color: rgba(15, 159, 134, 0.28);
  background: linear-gradient(180deg, #f3fffa, #ffffff);
  box-shadow: 0 10px 28px rgba(15, 68, 61, 0.06);
}
body[data-page="vehicles"] .vehicle-document-summary-title { display: grid; gap: 4px; min-width: 170px; }
body[data-page="vehicles"] .vehicle-document-summary-title strong { color: #0f3f3b; font-size: 15px; font-weight: 900; }
body[data-page="vehicles"] .vehicle-document-summary-chips { display: flex; flex-wrap: wrap; gap: 8px; justify-content: flex-end; }
body[data-page="vehicles"] .doc-summary-chip {
  border: 1px solid #cce8e1;
  border-radius: 999px;
  background: #ffffff;
  color: #315861;
  font-size: 12px;
  font-weight: 900;
  line-height: 1;
  padding: 8px 10px;
  white-space: nowrap;
}
body[data-page="vehicles"] .doc-chip-uploaded { background: #e8f9f4; border-color: #a8ddd2; color: #087567; }
body[data-page="vehicles"] .doc-chip-expiring { background: #fff7df; border-color: #f1d08a; color: #875700; }
body[data-page="vehicles"] .doc-chip-expired { background: #fff0f0; border-color: #fac6c6; color: #b42318; }
body[data-page="vehicles"] .vehicle-document-grid.polished-documents {
  align-items: stretch;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
}
body[data-page="vehicles"] .vehicle-document-card { display: flex; min-height: 292px; padding: 14px; gap: 12px; border-radius: 14px; }
body[data-page="vehicles"] .vehicle-document-card-head { min-height: 30px; }
body[data-page="vehicles"] .vehicle-document-badge { padding: 6px 9px; line-height: 1; }
body[data-page="vehicles"] .vehicle-document-badge.status-missing { border-color: #ead9a6; background: #fffaf0; color: #785b12; }
body[data-page="vehicles"] .vehicle-document-badge.status-uploaded { border-color: #b7d8ff; background: #eef6ff; color: #1d5f99; }
body[data-page="vehicles"] .vehicle-document-badge.status-valid { border-color: #9edfd0; background: #e4f9f2; color: #087567; }
body[data-page="vehicles"] .vehicle-document-badge.status-expiring_soon { border-color: #f1cf80; background: #fff4d8; color: #875700; }
body[data-page="vehicles"] .vehicle-document-badge.status-expired { border-color: #fac6c6; background: #fff0f0; color: #b42318; }
body[data-page="vehicles"] .vehicle-document-badge.status-rejected { border-color: #ef9f9f; background: #fffafa; color: #b42318; }
body[data-page="vehicles"] .vehicle-document-file {
  align-items: center;
  background: #f8fffc;
  border: 1px solid #dcefea;
  border-radius: 10px;
  display: block;
  min-height: 34px;
  overflow: hidden;
  padding: 8px 10px;
  text-overflow: ellipsis;
  white-space: nowrap;
}
body[data-page="vehicles"] .vehicle-document-meta { align-items: start; grid-template-columns: minmax(150px, 0.9fr) minmax(0, 1.1fr); }
body[data-page="vehicles"] .vehicle-document-meta input[type="date"],
body[data-page="vehicles"] .vehicle-document-meta textarea {
  border: 1px solid #cfe4df;
  border-radius: 10px;
  color: #163f4a;
  font-size: 13px;
}
body[data-page="vehicles"] .vehicle-document-expiry-field small,
body[data-page="vehicles"] .vehicle-document-upload small { color: #6b8084; font-size: 11px; line-height: 1.35; }
body[data-page="vehicles"] .vehicle-document-meta textarea { min-height: 72px; resize: vertical; }
body[data-page="vehicles"] .polished-file-control { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 8px 10px; align-items: center; margin-top: auto; }
body[data-page="vehicles"] .vehicle-document-native-file {
  border: 0 !important;
  clip: rect(0 0 0 0);
  height: 1px;
  margin: -1px;
  overflow: hidden;
  padding: 0 !important;
  position: absolute;
  width: 1px;
}
body[data-page="vehicles"] .document-file-choose { background: #eefbf6; border-color: #a7dcd1; color: #087567; font-weight: 900; }
body[data-page="vehicles"] .vehicle-document-selected-file { color: #48636b; font-size: 12px; font-weight: 800; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
body[data-page="vehicles"] .polished-file-control small { grid-column: 1 / -1; }
body[data-page="vehicles"] .document-card-footer { border-top: 1px solid #e1efeb; margin-top: 2px; padding-top: 10px; }
body[data-page="vehicles"] .document-card-footer .compact-button { min-height: 32px; border-radius: 10px; font-size: 12px; padding: 0 10px; }
body[data-page="vehicles"] .document-upload-action { background: #0f9f86; border-color: #0f9f86; color: #ffffff; box-shadow: 0 8px 18px rgba(15, 159, 134, 0.18); }
body[data-page="vehicles"] .document-save-action { background: #ffffff; border-color: #9edfd0; color: #087567; }
body[data-page="vehicles"] .document-delete-action { margin-left: auto; }
body[data-page="vehicles"] .vehicle-form-body,
body[data-page="vehicles"] .vehicle-drawer-body { padding-bottom: 96px; }
body[data-page="vehicles"] .vehicle-sticky-actions { z-index: 4; margin-top: 12px; box-shadow: 0 -12px 28px rgba(15, 68, 61, 0.08); }
body[data-page="vehicles"] .vehicle-note-grid textarea { min-height: 76px; }
@media (max-width: 720px) {
  body[data-page="vehicles"] .vehicle-document-grid.polished-documents,
  body[data-page="vehicles"] .vehicle-document-meta,
  body[data-page="vehicles"] .vehicle-note-grid { grid-template-columns: 1fr; }
  body[data-page="vehicles"] .vehicle-document-card { min-height: auto; }
  body[data-page="vehicles"] .vehicle-document-summary.polished { gap: 12px; }
  body[data-page="vehicles"] .vehicle-document-summary-chips { justify-content: flex-start; }
  body[data-page="vehicles"] .polished-file-control { grid-template-columns: 1fr; }
  body[data-page="vehicles"] .vehicle-document-selected-file { white-space: normal; }
  body[data-page="vehicles"] .document-card-footer .compact-button,
  body[data-page="vehicles"] .document-upload-action { flex: 1 1 auto; }
  body[data-page="vehicles"] .document-delete-action { margin-left: 0; }
}
body[data-page="vehicles"] .vehicle-document-native-file { display: none !important; }