/* r135 - Portal experience layer for APP DOORS OPEN.
   This file is intentionally loaded last: it reorganizes the interface without
   changing operational data, API routes, or business logic. */
:root {
  --do-green-dark: #2F3834;
  --do-green-900: #22292B;
  --do-green-mid: #7A856E;
  --do-green-soft: #B8BEA5;
  --do-green-pale: #E7E5D7;
  --do-gold: #B59060;
  --do-gold-dark: #8C6941;
  --do-gold-soft: #E9DDCC;
  --do-off: #ECE4D9;
  --do-off-2: #F7F2EA;
  --do-paper: #FFFDF9;
  --do-text: #252A2F;
  --do-muted: #61605B;
  --do-line: rgba(47, 56, 52, 0.14);
  --do-success: #3F6E58;
  --do-danger: #9E4B3D;
  --do-info: #3F6675;
  --do-shadow: 0 18px 44px rgba(21, 39, 32, 0.08);
  --do-shadow-soft: 0 10px 28px rgba(21, 39, 32, 0.055);
  --bg: var(--do-off-2) !important;
  --surface: var(--do-paper) !important;
  --surface-raised: #FFFFFF !important;
  --surface-subtle: rgba(231, 229, 215, 0.52) !important;
  --surface-alt: rgba(184, 190, 165, 0.22) !important;
  --ink: var(--do-text) !important;
  --muted: var(--do-muted) !important;
  --line: var(--do-line) !important;
  --brand-ink: var(--do-green-dark) !important;
  --brand-ink-deep: var(--do-green-900) !important;
  --brand-mint: var(--do-green-soft) !important;
  --brand-mint-soft: rgba(184, 190, 165, 0.22) !important;
  --brand-tan: var(--do-gold) !important;
  --brand-tan-soft: rgba(181, 144, 96, 0.18) !important;
  --shadow: var(--do-shadow-soft) !important;
  --radius: 22px !important;
}

html {
  background: var(--do-off);
}

body {
  background: linear-gradient(180deg, #F5F0E8 0%, #ECE4D9 100%) !important;
  color: var(--do-text) !important;
  font-family: Aptos, "Segoe UI", Arial, Helvetica, sans-serif !important;
  line-height: 1.48;
  -webkit-font-smoothing: antialiased;
  text-rendering: geometricPrecision;
}

.auth-screen {
  background:
    linear-gradient(110deg, rgba(47, 56, 52, 0.98) 0%, rgba(47, 56, 52, 0.98) 42%, rgba(231, 229, 215, 0.94) 42%, rgba(247, 242, 234, 0.98) 100%) !important;
}

.auth-card {
  width: min(1040px, calc(100vw - 44px)) !important;
  border-radius: 26px !important;
  border-color: rgba(47, 56, 52, 0.14) !important;
  box-shadow: 0 26px 70px rgba(21, 39, 32, 0.16) !important;
}

.auth-visual {
  background: linear-gradient(180deg, rgba(255, 253, 249, 0.94), rgba(231, 229, 215, 0.74)) !important;
  place-items: center !important;
}

.auth-logo {
  width: min(380px, 90%) !important;
  margin: 0 auto !important;
}

.auth-panel h1,
.section-head h1,
.view > .section-head h1 {
  color: var(--do-green-dark) !important;
  font-weight: 780 !important;
  letter-spacing: 0 !important;
}

.auth-form label > span,
.task-form label > span,
.finance-ledger-filter span,
.unit-status-field span {
  color: var(--do-muted) !important;
  font-weight: 860 !important;
}

.app-shell {
  grid-template-columns: 282px minmax(0, 1fr) !important;
  background: transparent !important;
}

.sidebar {
  margin: 18px 0 18px 18px !important;
  height: calc(100vh - 36px) !important;
  border: 1px solid rgba(47, 56, 52, 0.13) !important;
  border-radius: 28px !important;
  background: rgba(255, 253, 249, 0.78) !important;
  box-shadow: var(--do-shadow-soft) !important;
  overflow: hidden !important;
}

.brand {
  min-height: 98px !important;
  padding: 18px 14px !important;
  margin: 0 0 18px !important;
}

.brand-logo-horizontal {
  width: 228px !important;
  max-height: 82px !important;
}

.nav-list {
  gap: 7px !important;
  padding: 0 6px !important;
}

.nav-link {
  min-height: 46px !important;
  border-radius: 18px !important;
  color: var(--do-muted) !important;
  font-weight: 850 !important;
  border: 1px solid transparent !important;
}

.nav-link:hover {
  color: var(--do-green-dark) !important;
  background: rgba(184, 190, 165, 0.18) !important;
}

.nav-link.active {
  color: var(--do-green-dark) !important;
  background: var(--do-green-pale) !important;
  border-color: rgba(47, 56, 52, 0.08) !important;
  box-shadow: inset 4px 0 0 var(--do-gold) !important;
}

.sync-panel {
  margin: auto 8px 8px !important;
  border-radius: 22px !important;
  background: rgba(47, 56, 52, 0.94) !important;
  border-color: rgba(255, 253, 249, 0.16) !important;
  color: #FFFFFF !important;
}

.sync-panel .button.secondary {
  background: rgba(255, 253, 249, 0.96) !important;
  color: var(--do-green-dark) !important;
}

.workspace {
  min-width: 0;
}

.topbar {
  top: 18px !important;
  margin: 18px 18px 0 !important;
  min-height: 74px !important;
  border-radius: 26px !important;
  border: 1px solid rgba(47, 56, 52, 0.12) !important;
  background: rgba(255, 253, 249, 0.82) !important;
  backdrop-filter: blur(18px);
  box-shadow: var(--do-shadow-soft) !important;
}

.search-wrap,
.mode-switch,
.segmented,
.finance-period-control {
  border-radius: 18px !important;
  background: rgba(255, 253, 249, 0.86) !important;
  border-color: rgba(47, 56, 52, 0.14) !important;
}

.mode-switch button,
.segmented button,
.finance-period-control button {
  border-radius: 14px !important;
  font-weight: 900 !important;
}

.mode-switch button.active,
.segmented button.active,
.finance-period-control button.active {
  background: var(--do-green-dark) !important;
  color: #FFFFFF !important;
}

.content {
  max-width: 1740px !important;
  padding: 34px 28px 56px !important;
}

.view.active {
  gap: 18px !important;
}

.section-head {
  min-height: 0 !important;
  align-items: center !important;
  gap: 18px !important;
}

.view > .section-head.is-summary-hidden {
  display: none !important;
}

.view > .section-head.is-summary-actions-only {
  display: flex !important;
  justify-content: flex-end !important;
  min-height: 0 !important;
  margin: 0 0 12px !important;
  padding: 0 !important;
}

.view > .section-head.is-summary-actions-only > div:first-child {
  display: none !important;
}

.portal-experience .channel-booking,
.portal-experience .badge.channel-booking,
.portal-experience [data-channel="booking"],
.portal-experience [data-source="booking"] {
  display: none !important;
}

.section-head .eyebrow,
.eyebrow {
  color: var(--do-gold-dark) !important;
  font-size: 11px !important;
  font-weight: 950 !important;
  letter-spacing: 0.05em !important;
}

.section-lead,
.muted,
small {
  color: var(--do-muted) !important;
}

.button {
  min-height: 40px !important;
  border-radius: 999px !important;
  font-weight: 900 !important;
  transition: background 160ms ease, border-color 160ms ease, box-shadow 160ms ease, transform 160ms ease;
}

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

.button.primary {
  background: var(--do-green-dark) !important;
  border-color: var(--do-green-dark) !important;
  color: #FFFFFF !important;
}

.button.primary:hover {
  background: var(--do-green-900) !important;
  box-shadow: 0 14px 26px rgba(47, 56, 52, 0.16) !important;
}

.button.secondary,
.button.ghost {
  background: rgba(255, 253, 249, 0.88) !important;
  border-color: rgba(47, 56, 52, 0.14) !important;
  color: var(--do-green-dark) !important;
}

.button.danger {
  background: rgba(158, 75, 61, 0.12) !important;
  color: var(--do-danger) !important;
  border-color: rgba(158, 75, 61, 0.2) !important;
}

.metric-card,
.panel,
.unit-card,
.owner-card,
.integration-card,
.report-card,
.task-card,
.conversation-card,
.calendar-panel,
.operation-calendar,
.todo-summary-card,
.do-module {
  border-radius: 24px !important;
  border: 1px solid rgba(47, 56, 52, 0.12) !important;
  background: rgba(255, 253, 249, 0.92) !important;
  box-shadow: var(--do-shadow-soft) !important;
}

.metric-card {
  min-height: 118px !important;
  border-top: 0 !important;
  padding: 18px !important;
}

.metric-card:nth-child(2n) {
  border-top: 0 !important;
}

.metric-icon,
.do-summary-icon,
.do-section-icon {
  border-radius: 16px !important;
  background: rgba(184, 190, 165, 0.28) !important;
  color: var(--do-green-dark) !important;
}

.badge,
.status-pill,
.chip,
.filter-chip {
  border-radius: 999px !important;
  font-weight: 900 !important;
}

.soft-green,
.badge.soft-green,
.status-pill.soft-green {
  background: rgba(63, 110, 88, 0.12) !important;
  color: var(--do-success) !important;
}

.soft-amber,
.badge.soft-amber,
.status-pill.soft-amber {
  background: rgba(181, 144, 96, 0.18) !important;
  color: var(--do-gold-dark) !important;
}

.soft-red,
.badge.soft-red,
.status-pill.soft-red {
  background: rgba(158, 75, 61, 0.12) !important;
  color: var(--do-danger) !important;
}

.soft-blue,
.badge.soft-blue,
.status-pill.soft-blue {
  background: rgba(63, 102, 117, 0.12) !important;
  color: var(--do-info) !important;
}

input:not([type="checkbox"]),
select,
textarea {
  border-radius: 16px !important;
  border-color: rgba(47, 56, 52, 0.14) !important;
  background: rgba(255, 253, 249, 0.88) !important;
  color: var(--do-text) !important;
}

input:not([type="checkbox"]):focus,
select:focus,
textarea:focus,
.search-wrap:focus-within {
  border-color: rgba(181, 144, 96, 0.55) !important;
  box-shadow: 0 0 0 4px rgba(181, 144, 96, 0.14) !important;
}

.do-section-summary {
  display: grid;
  grid-template-columns: minmax(260px, 0.92fr) minmax(0, 2fr);
  gap: 16px;
  align-items: stretch;
}

.do-section-identity,
.do-summary-card {
  min-width: 0;
  border: 1px solid rgba(47, 56, 52, 0.12);
  border-radius: 24px;
  background: rgba(255, 253, 249, 0.88);
  box-shadow: var(--do-shadow-soft);
}

.do-section-identity {
  padding: 18px;
  display: flex;
  align-items: center;
  gap: 14px;
}

.do-section-icon,
.do-summary-icon {
  width: 44px;
  height: 44px;
  display: grid;
  place-items: center;
  flex: 0 0 auto;
}

.do-section-identity strong {
  display: block;
  color: var(--do-green-dark);
  font-size: 17px;
}

.do-section-identity em {
  display: block;
  margin-bottom: 6px;
  color: var(--do-gold-dark);
  font-size: 11px;
  font-style: normal;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

.do-section-identity small {
  display: block;
  margin-top: 4px;
  font-size: 12px;
}

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

.do-summary-card {
  padding: 14px;
  display: flex;
  align-items: center;
  gap: 12px;
  text-align: left;
  color: var(--do-text);
  cursor: pointer;
  transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease;
}

.do-summary-card:hover,
.do-summary-card:focus-visible {
  transform: translateY(-1px);
  border-color: rgba(181, 144, 96, 0.32);
  box-shadow: 0 16px 34px rgba(21, 39, 32, 0.09);
}

.do-summary-card strong {
  display: block;
  color: var(--do-green-dark);
  font-size: 21px;
  line-height: 1.05;
}

.do-summary-card small,
.do-summary-card em {
  display: block;
  font-size: 11px;
  font-style: normal;
}

.do-summary-card small {
  margin-top: 4px;
  color: var(--do-text) !important;
  font-weight: 900;
}

.do-summary-card em {
  margin-top: 2px;
  color: var(--do-muted);
}

.do-tone-ok {
  border-color: rgba(63, 110, 88, 0.18);
}

.do-tone-ok .do-summary-icon {
  background: rgba(63, 110, 88, 0.13) !important;
  color: var(--do-success) !important;
}

.do-tone-attention,
.do-tone-gold {
  border-color: rgba(181, 144, 96, 0.22);
}

.do-tone-attention .do-summary-icon,
.do-tone-gold .do-summary-icon {
  background: rgba(181, 144, 96, 0.16) !important;
  color: var(--do-gold-dark) !important;
}

.do-tone-critical {
  border-color: rgba(158, 75, 61, 0.24);
}

.do-tone-critical .do-summary-icon {
  background: rgba(158, 75, 61, 0.12) !important;
  color: var(--do-danger) !important;
}

.do-module {
  overflow: hidden;
}

.do-module-header,
.panel-head,
.preview-head,
.conversation-head,
.operation-list-head,
.integration-card > header,
.owner-card > header,
.report-card > header,
.do-module-head {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 14px !important;
}

.do-module-header h2,
.do-module-head h2,
.panel-head h2,
.preview-head h2,
.integration-card h2,
.owner-card h2,
.report-card h2 {
  color: var(--do-green-dark) !important;
  letter-spacing: 0 !important;
}

.do-module-head {
  padding: 16px 18px;
}

.unit-grid > .do-module-head,
.owner-grid > .do-module-head,
.report-grid > .do-module-head,
.network-grid > .do-module-head,
.todo-board > .do-module-head {
  grid-column: 1 / -1;
  background: rgba(255, 253, 249, 0.72);
  border: 1px solid rgba(47, 56, 52, 0.1);
  border-radius: 22px;
}

.do-module-meta {
  margin-left: auto;
  padding: 7px 10px;
  border-radius: 999px;
  background: rgba(231, 229, 215, 0.65);
  color: var(--do-muted);
  font-size: 11px;
  font-weight: 900;
  white-space: nowrap;
}

.do-module-toggle {
  min-height: 34px !important;
  padding: 0 11px !important;
  flex: 0 0 auto;
}

.do-module.is-collapsed > :not(.panel-head):not(.preview-head):not(.conversation-head):not(.operation-list-head):not(header):not(.do-module-head) {
  display: none !important;
}

.do-module.is-collapsed .panel-head,
.do-module.is-collapsed .preview-head,
.do-module.is-collapsed .conversation-head,
.do-module.is-collapsed .operation-list-head,
.do-module.is-collapsed > header,
.do-module.is-collapsed > .do-module-head {
  margin-bottom: 0 !important;
}

.integration-card.do-module.is-collapsed > .integration-row {
  display: flex !important;
}

.integration-card.do-module.is-collapsed > .connector-detail,
.integration-card.do-module.is-collapsed > .integration-resolution-panel,
.integration-card.do-module.is-collapsed > .table-wrap,
.integration-card.do-module.is-collapsed > .card-actions {
  display: none !important;
}

.overview-quick-actions {
  gap: 10px !important;
}

.unit-grid {
  grid-template-columns: repeat(auto-fit, minmax(270px, 1fr)) !important;
}

.unit-card {
  display: grid !important;
  grid-template-columns: 148px minmax(0, 1fr) !important;
  min-height: 188px;
}

.unit-photo-wrap {
  min-height: 100% !important;
}

.unit-thumb {
  height: 100% !important;
  min-height: 188px !important;
}

.unit-body {
  padding: 16px !important;
  gap: 10px !important;
}

.unit-title h2 {
  font-size: 17px !important;
}

.unit-meta-compact,
.unit-mini-compact {
  background: rgba(231, 229, 215, 0.38) !important;
  border-color: rgba(47, 56, 52, 0.1) !important;
}

.unit-card-actions {
  gap: 7px !important;
}

.unit-details {
  margin-top: 2px;
}

.unit-details summary {
  border-radius: 16px;
  padding: 0 10px;
  background: rgba(184, 190, 165, 0.18);
}

.table-wrap {
  border-radius: 20px !important;
  border-color: rgba(47, 56, 52, 0.12) !important;
  background: rgba(255, 253, 249, 0.68);
}

thead {
  background: rgba(231, 229, 215, 0.62) !important;
}

th {
  color: var(--do-green-dark) !important;
  font-weight: 950 !important;
}

tbody tr:hover {
  background: rgba(184, 190, 165, 0.12) !important;
}

.todo-summary-grid,
.finance-kpi-grid,
.metric-grid {
  gap: 12px !important;
}

.todo-board,
.integration-grid,
.report-grid,
.network-grid,
.owner-grid {
  gap: 14px !important;
}

.operation-calendar,
.agenda-calendar-board,
.finance-line-chart {
  border-radius: 22px !important;
}

.toast {
  border-radius: 18px !important;
  background: rgba(47, 56, 52, 0.94) !important;
  color: #FFFFFF !important;
  border-color: rgba(255, 253, 249, 0.18) !important;
}

@media (max-width: 1280px) {
  .app-shell {
    grid-template-columns: 88px minmax(0, 1fr) !important;
  }

  .sidebar {
    margin-left: 12px !important;
    border-radius: 24px !important;
  }

  .brand-logo-horizontal,
  .nav-link span,
  .sync-panel > div {
    display: none !important;
  }

  .brand-mark {
    display: grid !important;
    width: 48px !important;
    height: 48px !important;
  }

  .nav-link {
    justify-content: center !important;
    padding: 0 !important;
  }

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

@media (max-width: 920px) {
  .app-shell {
    display: block !important;
  }

  .sidebar {
    position: sticky !important;
    top: 0 !important;
    z-index: 60;
    height: auto !important;
    margin: 0 !important;
    border-radius: 0 0 24px 24px !important;
    padding: 10px !important;
    overflow-x: auto !important;
  }

  .brand,
  .sync-panel {
    display: none !important;
  }

  .nav-list {
    display: grid !important;
    grid-auto-flow: column !important;
    grid-auto-columns: 48px !important;
    overflow-x: auto !important;
    padding: 0 !important;
  }

  .nav-link {
    width: 48px !important;
    min-height: 44px !important;
  }

  .topbar {
    position: static !important;
    margin: 12px !important;
    grid-template-columns: 1fr !important;
    border-radius: 22px !important;
    padding: 14px !important;
  }

  .content {
    padding: 18px 12px 34px !important;
  }

  .section-head {
    align-items: stretch !important;
    display: grid !important;
  }

  .section-actions,
  .topbar-actions {
    align-items: stretch !important;
  }

  .do-summary-grid,
  #overview .metric-grid,
  .metric-grid {
    grid-template-columns: 1fr 1fr !important;
  }

  .unit-card {
    grid-template-columns: 1fr !important;
  }

  .unit-thumb {
    height: 172px !important;
    min-height: 172px !important;
  }

  .do-module-header,
  .panel-head,
  .preview-head,
  .conversation-head,
  .operation-list-head,
  .integration-card > header,
  .owner-card > header,
  .report-card > header,
  .do-module-head {
    align-items: flex-start !important;
    flex-wrap: wrap !important;
  }

  .do-module-meta {
    margin-left: 0;
    max-width: 100%;
    white-space: normal;
  }
}

/* r138 preview - operational overview refinement */
.local-preview-mode .brand {
  justify-content: center !important;
  align-items: center !important;
  min-height: 86px !important;
  padding: 10px !important;
}

.local-preview-mode .brand-logo-horizontal {
  display: none !important;
}

.local-preview-mode .brand-mark {
  display: grid !important;
  width: 62px !important;
  height: 62px !important;
  border-radius: 999px !important;
  background: transparent !important;
  border: 0 !important;
  overflow: visible !important;
  place-items: center !important;
  flex: 0 0 62px !important;
}

.local-preview-mode .brand-mark img {
  display: block !important;
  width: 62px !important;
  height: 62px !important;
  max-width: none !important;
  object-fit: contain !important;
  border-radius: 999px !important;
}

.local-preview-mode .topbar {
  grid-template-columns: minmax(220px, auto) minmax(260px, 1fr) auto !important;
}

.local-preview-mode .search-wrap {
  justify-self: stretch !important;
}

.local-preview-mode .mode-switch {
  display: none !important;
}

.global-period-control {
  display: grid;
  grid-template-columns: minmax(260px, 2fr) minmax(170px, 1fr) minmax(170px, 1fr);
  gap: 10px;
  width: 100%;
  padding: 10px;
  border: 1px solid rgba(47, 56, 52, 0.13);
  border-radius: 18px;
  background: rgba(255, 253, 249, 0.88);
  box-shadow: var(--do-shadow-soft);
}

.global-period-control label {
  display: grid;
  gap: 4px;
  min-width: 0;
}

.global-period-control span {
  color: var(--do-muted);
  font-size: 11px;
  font-weight: 900;
}

.global-period-control select,
.global-period-control input {
  min-height: 38px;
  width: 100%;
  border: 1px solid rgba(47, 56, 52, 0.14);
  border-radius: 12px;
  background: #fffdfa;
  color: var(--do-green-dark);
  font: inherit;
  font-weight: 800;
  padding: 0 12px;
}

.finance-period-wide.finance-period-control {
  display: none !important;
}

#overview > .overview-quick-actions {
  margin-top: 0 !important;
  margin-bottom: 12px !important;
}

.metric-grid.overview-dashboard {
  display: grid !important;
  grid-template-columns: 1fr !important;
  gap: 14px !important;
}

#overview .metric-grid.overview-dashboard {
  grid-template-columns: 1fr !important;
}

#overview .section-head {
  display: block !important;
  min-height: 0 !important;
  margin-top: 0 !important;
  padding-bottom: 0 !important;
}

#overview .overview-intro {
  display: none !important;
}

#overview .global-period-control {
  max-width: none !important;
}

#overview .split-grid {
  display: grid !important;
  grid-template-columns: 1fr !important;
  gap: 16px !important;
}

#overview .split-grid > .panel {
  width: 100% !important;
}

.overview-kpi-section {
  border: 1px solid rgba(47, 56, 52, 0.12);
  border-radius: 24px;
  background: rgba(255, 253, 249, 0.86);
  box-shadow: var(--do-shadow-soft);
  overflow: hidden;
}

.overview-kpi-section summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  min-height: 58px;
  padding: 14px 18px;
  cursor: pointer;
  list-style: none;
}

.overview-kpi-section summary::-webkit-details-marker {
  display: none;
}

.overview-kpi-section summary strong {
  display: block;
  color: var(--do-green-dark);
  font-size: 18px;
  font-weight: 920;
}

.overview-kpi-section summary small {
  display: block;
  margin-top: 2px;
  font-size: 12px;
}

.summary-action {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 32px;
  padding: 7px 10px;
  border: 1px solid rgba(47, 58, 64, 0.12);
  border-radius: 999px;
  background: rgba(255, 253, 250, 0.96);
  color: var(--do-muted);
  box-shadow: none;
  font-size: 11px;
  font-weight: 900;
  white-space: nowrap;
}

.summary-action svg {
  width: 14px;
  height: 14px;
  transition: transform 160ms ease;
}

#overview .do-module-toggle {
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
  min-height: 32px !important;
  padding: 7px 10px !important;
  border: 0 !important;
  border-radius: 999px !important;
  background: rgba(231, 229, 215, 0.72) !important;
  color: var(--do-muted) !important;
  box-shadow: none !important;
  font-size: 11px !important;
  font-weight: 900 !important;
  white-space: nowrap !important;
}

#overview .do-module-toggle:hover {
  background: rgba(199, 162, 124, 0.2) !important;
  color: var(--do-green-dark) !important;
}

#overview .do-module-toggle svg {
  width: 14px !important;
  height: 14px !important;
}

#overview .do-module.is-collapsed > .today-list,
#overview .do-module.is-collapsed > .next-reservation-list,
#overview .do-module.is-collapsed > .table-wrap,
#overview .do-module.is-collapsed > .card-list,
#overview .do-module.is-collapsed > .empty-state {
  display: none !important;
}

.overview-kpi-section:not([open]) .summary-action .is-open-label,
.overview-kpi-section[open] .summary-action .is-closed-label {
  display: none;
}

.overview-kpi-section:not([open]) .summary-action svg {
  transform: rotate(180deg);
}

#overview .overview-kpi-section summary:hover .summary-action {
  background: rgba(199, 162, 124, 0.18);
  color: var(--do-green-dark);
}

.metric-grid-inner {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 12px;
  padding: 0 18px 18px;
}

.finance-kpis .metric-grid-inner {
  grid-template-columns: repeat(5, minmax(0, 1fr));
}

.metric-card.tone-attention .metric-icon,
.metric-card.tone-gold .metric-icon {
  background: rgba(199, 162, 124, 0.2) !important;
  color: var(--do-gold-dark) !important;
}

.metric-card.tone-ok .metric-icon {
  background: rgba(63, 110, 88, 0.14) !important;
  color: var(--do-success) !important;
}

.operation-detail-row,
.next-reservation-item {
  align-items: center !important;
  min-height: 76px;
}

.operation-detail-row .overview-unit-photo,
.next-reservation-item .overview-unit-photo {
  width: 54px;
  height: 54px;
  border-radius: 12px;
  overflow: hidden;
  background: rgba(231, 229, 215, 0.68);
}

.operation-detail-row .today-main small,
.next-reservation-item .today-main small {
  line-height: 1.35;
}

#overview .table-panel .preview-table th {
  vertical-align: top;
}

#overview .table-panel .preview-table th small {
  display: block;
  margin-top: 3px;
  color: var(--do-muted);
  font-size: 10px;
  font-weight: 760;
  line-height: 1.25;
  text-transform: none;
}

#overview .table-panel .preview-table td small {
  display: block;
  margin-top: 4px;
  line-height: 1.28;
}

.overview-performance-panel {
  width: 100% !important;
  margin-top: 16px !important;
}

.overview-performance-panel .performance-table td:nth-child(n + 2) {
  min-width: 140px;
}

#units .do-summary-grid {
  grid-template-columns: repeat(5, minmax(0, 1fr));
}

#units .toolbar {
  margin: -4px 0 14px !important;
}

#units .unit-list-view {
  display: grid !important;
  grid-template-columns: 1fr !important;
  gap: 10px !important;
}

#units .unit-row-card {
  display: grid !important;
  grid-template-columns: 96px minmax(0, 1fr) !important;
  align-items: stretch !important;
  min-height: 108px !important;
  padding: 10px !important;
  overflow: visible !important;
}

#units .unit-row-photo {
  width: 96px !important;
  height: 96px !important;
  min-height: 96px !important;
  border-radius: 16px !important;
  overflow: hidden !important;
}

#units .unit-row-photo .unit-thumb {
  width: 100% !important;
  height: 96px !important;
  min-height: 96px !important;
  object-fit: cover !important;
}

#units .unit-row-photo .unit-photo-badge {
  left: 8px !important;
  right: 8px !important;
  bottom: 8px !important;
  justify-content: center !important;
  font-size: 9px !important;
}

#units .unit-row-body {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) auto !important;
  gap: 8px 14px !important;
  padding: 4px 8px 4px 14px !important;
}

#units .unit-row-title {
  grid-column: 1 / 2;
  align-items: start !important;
}

#units .unit-row-title h2 {
  font-size: 16px !important;
  line-height: 1.2 !important;
}

#units .unit-row-title .badge {
  display: none !important;
}

#units .unit-row-info {
  grid-column: 1 / 2;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px;
}

#units .unit-row-info span {
  min-width: 0;
  padding: 9px 10px;
  border: 1px solid rgba(47, 56, 52, 0.1);
  border-radius: 14px;
  background: rgba(231, 229, 215, 0.34);
  color: var(--do-muted);
  font-size: 11px;
  line-height: 1.25;
}

#units .unit-row-info strong {
  display: block;
  margin-top: 2px;
  color: var(--do-green-dark);
  font-size: 12px;
}

#units .unit-row-actions {
  grid-column: 2 / 3;
  grid-row: 1 / 3;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  justify-content: center;
  gap: 7px;
  min-width: 132px;
}

#units .unit-row-actions .button {
  width: 100%;
  min-height: 32px;
  justify-content: center;
}

#units .unit-row-details {
  grid-column: 1 / -1;
}

#units .unit-row-details summary {
  width: fit-content;
  min-height: 30px;
  margin-top: 2px;
}

.unit-airbnb-links-chip {
  display: inline-flex !important;
  align-items: center;
  width: fit-content;
  margin-top: 8px;
  padding: 5px 8px;
  border-radius: 999px;
  background: rgba(199, 162, 124, 0.18);
  color: var(--do-gold-dark);
  font-size: 10px !important;
  font-weight: 920;
  cursor: pointer;
}

.unit-airbnb-links-chip:hover {
  background: rgba(199, 162, 124, 0.28);
  color: var(--do-green-dark);
}

.unit-links-popover-backdrop {
  position: fixed;
  inset: 0;
  z-index: 80;
  display: grid;
  place-items: center;
  padding: 24px;
  background: rgba(47, 58, 64, 0.16);
  backdrop-filter: blur(4px);
}

.unit-links-popover {
  width: min(620px, 100%);
  max-height: min(680px, calc(100vh - 48px));
  overflow: hidden;
  border: 1px solid rgba(47, 56, 52, 0.12);
  border-radius: 24px;
  background: #fffdfa;
  box-shadow: 0 28px 70px rgba(21, 39, 32, 0.2);
}

.unit-links-popover-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 18px 20px;
  border-bottom: 1px solid rgba(47, 56, 52, 0.1);
}

.unit-links-popover-head strong,
.unit-links-popover-item strong {
  color: var(--do-green-dark);
}

.unit-links-popover-head small,
.unit-links-popover-item small {
  display: block;
  margin-top: 3px;
  color: var(--do-muted);
}

.unit-links-popover-list {
  display: grid;
  gap: 8px;
  max-height: 520px;
  overflow: auto;
  padding: 14px;
}

.unit-links-popover-item {
  display: grid;
  grid-template-columns: 54px minmax(0, 1fr) auto;
  align-items: center;
  gap: 12px;
  padding: 9px;
  border: 1px solid rgba(47, 56, 52, 0.1);
  border-radius: 16px;
  color: inherit;
  text-decoration: none;
  background: rgba(255, 253, 249, 0.9);
}

.unit-links-popover-item:hover {
  border-color: rgba(199, 162, 124, 0.36);
  background: rgba(231, 229, 215, 0.36);
}

.unit-links-popover-item img,
.unit-links-placeholder {
  width: 54px;
  height: 44px;
  border-radius: 12px;
  object-fit: cover;
  background: rgba(183, 209, 194, 0.34);
}

.unit-links-empty {
  padding: 18px;
  border-radius: 16px;
  background: rgba(231, 229, 215, 0.34);
  color: var(--do-muted);
  font-weight: 800;
}

.automation-panel {
  border-color: rgba(183, 209, 194, 0.54) !important;
  background: linear-gradient(135deg, rgba(255, 253, 249, 0.96), rgba(245, 243, 238, 0.98)) !important;
}

.automation-status-grid {
  grid-template-columns: repeat(5, minmax(0, 1fr));
}

.automation-status-grid span small {
  display: block;
  margin-top: 4px;
  color: var(--do-muted);
  font-size: 11px;
  font-weight: 700;
}

@media (max-width: 1180px) {
  .metric-grid-inner,
  .finance-kpis .metric-grid-inner {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .global-period-control {
    grid-template-columns: 1fr 1fr;
  }

  .global-period-control label:first-child {
    grid-column: 1 / -1;
  }

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

  #units .do-summary-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  #units .unit-row-info {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 760px) {
  .local-preview-mode .topbar {
    grid-template-columns: 1fr !important;
  }

  .global-period-control,
  .metric-grid-inner,
  .finance-kpis .metric-grid-inner,
  .automation-status-grid {
    grid-template-columns: 1fr;
  }

  #units .unit-row-card,
  #units .unit-row-body {
    grid-template-columns: 1fr !important;
  }

  #units .unit-row-photo {
    width: 100% !important;
    height: 180px !important;
  }

  #units .unit-row-photo .unit-thumb {
    height: 180px !important;
  }

  #units .unit-row-actions {
    grid-column: 1 / -1;
    grid-row: auto;
    min-width: 0;
  }

  #units .unit-row-info {
    grid-template-columns: 1fr;
  }

  .summary-action {
    display: none;
  }
}

@media (max-width: 560px) {
  .auth-card {
    width: min(100%, calc(100vw - 24px)) !important;
    grid-template-columns: 1fr !important;
  }

  .auth-visual {
    min-height: 260px !important;
  }

  .do-summary-grid,
  #overview .metric-grid,
  .metric-grid {
    grid-template-columns: 1fr !important;
  }

  .do-summary-card,
  .do-section-identity {
    border-radius: 20px;
  }

  .button {
    width: 100%;
  }

  .button.icon-only,
  .do-module-toggle,
  .password-toggle {
    width: auto;
  }
}