:root {
  --app-bg: #f4f7fb;
  --app-panel: #ffffff;
  --app-panel-soft: #f8fafc;
  --app-ink: #162536;
  --app-muted: #5d6b7c;
  --app-navy: #0d2c54;
  --app-blue: #17699e;
  --app-teal: #1f7a6d;
  --app-gold: #d59b2d;
  --app-coral: #b94a48;
  --app-line: #d9e3ec;
  --app-shadow: 0 18px 45px rgba(13, 44, 84, 0.1);
}

body[data-page-id] {
  background:
    linear-gradient(180deg, rgba(244, 247, 251, 0.96), rgba(244, 247, 251, 0.98)),
    url("/img/background.png") center / cover fixed no-repeat;
  color: var(--app-ink);
  font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
}

body[data-page-id] main,
body[data-page-id] .container,
body[data-page-id] .content-wrapper,
body[data-page-id] .account-container,
body[data-page-id] .payment-container,
body[data-page-id] .auth-card,
body[data-page-id] .content,
body[data-page-id] .welcome-card,
body[data-page-id] .form-card,
body[data-page-id] .card,
body[data-page-id] main > section:not(:has(table)) {
  color: var(--app-ink);
}

body[data-page-id] .container,
body[data-page-id] .content-wrapper,
body[data-page-id] .account-container,
body[data-page-id] .payment-container,
body[data-page-id] .auth-card,
body[data-page-id] .content,
body[data-page-id] .welcome-card,
body[data-page-id] .form-card,
body[data-page-id] .card,
body[data-page-id] main > section:not(:has(table)) {
  background: var(--app-panel);
  border: 1px solid var(--app-line);
  border-radius: 8px;
  box-sizing: border-box;
  box-shadow: var(--app-shadow);
}

body[data-page-id] h1,
body[data-page-id] h2 {
  color: var(--app-navy);
  letter-spacing: 0;
  text-shadow: none;
}

body[data-page-id] .container h1,
body[data-page-id] .content-wrapper h1,
body[data-page-id] .account-container h1,
body[data-page-id] .payment-container h1,
body[data-page-id] .auth-card h2,
body[data-page-id] .content h2,
body[data-page-id] .welcome-card h1,
body[data-page-id] .form-card h2,
body[data-page-id] .card h2,
body[data-page-id] .page-title {
  text-align: left;
}

body[data-page-id] button,
body[data-page-id] .btn,
body[data-page-id] input[type="submit"] {
  border-radius: 6px;
  font-weight: 750;
  min-height: 40px;
}

body[data-page-id] button:not(.icon-action):not(.gear-button):not(.navbar-toggle):not(.close):not(.close-button),
body[data-page-id] .btn,
body[data-page-id] input[type="submit"] {
  background: var(--app-navy);
  color: white;
  border: 1px solid var(--app-navy);
  box-shadow: 0 6px 16px rgba(13, 44, 84, 0.12);
}

body[data-page-id] button:not(.icon-action):not(.gear-button):not(.navbar-toggle):not(.close):not(.close-button):hover,
body[data-page-id] .btn:hover,
body[data-page-id] input[type="submit"]:hover {
  background: var(--app-blue);
  border-color: var(--app-blue);
}

body[data-page-id] .dashboard-header,
body[data-page-id] .toolbar-actions {
  align-items: center;
  display: flex;
  gap: 12px;
  justify-content: space-between;
}

body[data-page-id] .toolbar-actions {
  justify-content: flex-end;
  margin-bottom: 14px;
}

body[data-page-id] .dashboard-status,
body[data-page-id] .properties-status,
body[data-page-id] .ticket-summary {
  color: var(--app-muted);
  letter-spacing: 0;
}

body[data-page-id] .quick-filter-bar button {
  background: var(--app-panel-soft);
  border: 1px solid var(--app-line);
  box-shadow: none;
  color: var(--app-navy);
}

body[data-page-id] .quick-filter-bar button:hover,
body[data-page-id] .quick-filter-bar button:focus-visible,
body[data-page-id] .quick-filter-bar button.is-active {
  background: var(--app-navy);
  border-color: var(--app-navy);
  color: #fff;
}

body[data-page-id] .metric-card,
body[data-page-id] .property-count-card,
body[data-page-id] .property-list-panel {
  border-radius: 8px;
  box-shadow: 0 10px 28px rgba(13, 44, 84, 0.08);
}

body[data-page-id] input,
body[data-page-id] select,
body[data-page-id] textarea {
  border: 1px solid var(--app-line);
  border-radius: 6px;
  color: var(--app-ink);
  font-family: inherit;
}

body[data-page-id] input::placeholder,
body[data-page-id] textarea::placeholder {
  color: #5f7084;
  opacity: 1;
}

body[data-page-id] select option,
body[data-page-id] select optgroup {
  background: #ffffff;
  color: #102238;
}

body[data-page-id] input:focus,
body[data-page-id] select:focus,
body[data-page-id] textarea:focus {
  border-color: var(--app-blue);
  box-shadow: 0 0 0 3px rgba(23, 105, 158, 0.14);
  outline: none;
}

body[data-page-id] .filter-container,
body[data-page-id] .filters,
body[data-page-id] .filter-bar {
  background: var(--app-panel-soft);
  border: 1px solid var(--app-line);
  border-radius: 8px;
  box-shadow: none;
}

body[data-page-id] .filter-bar {
  padding: 14px;
}

body[data-page-id] .filter-group label,
body[data-page-id] .filters label,
body[data-page-id] label {
  color: var(--app-navy);
  font-weight: 750;
  letter-spacing: 0;
}

body[data-page-id] .table-container,
body[data-page-id] .table-scroll-wrapper,
body[data-page-id] section:has(table) {
  background: var(--app-panel);
  border: 1px solid var(--app-line);
  border-radius: 8px;
  box-shadow: 0 10px 28px rgba(13, 44, 84, 0.08);
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

body[data-page-id] table {
  background: var(--app-panel);
  border-collapse: separate;
  border-spacing: 0;
  box-shadow: none;
  margin-top: 0;
}

body[data-page-id] table th,
body[data-page-id] table td {
  border: 0;
  border-bottom: 1px solid var(--app-line);
  padding: 12px 14px;
}

body[data-page-id] table thead th,
body[data-page-id] table th {
  background: var(--app-navy);
  color: white;
  font-size: 0.78rem;
  letter-spacing: 0;
  text-transform: uppercase;
}

body[data-page-id] table tbody tr:nth-child(even) {
  background: var(--app-panel-soft);
}

body[data-page-id] table tbody tr:hover {
  background: #eef6f8;
}

body[data-page-id] table tfoot th {
  background: #edf5f7;
  color: var(--app-navy);
}

body[data-page-id] .chart-wrapper,
body[data-page-id] .chart-container canvas {
  background: var(--app-panel);
  border-color: var(--app-line);
  border-radius: 8px;
  box-shadow: 0 10px 28px rgba(13, 44, 84, 0.08);
}

body[data-page-id] .ticket {
  background: var(--app-panel);
  border: 1px solid var(--app-line);
  border-left: 5px solid var(--app-teal);
  border-radius: 8px;
  box-shadow: 0 10px 28px rgba(13, 44, 84, 0.08);
}

body[data-page-id] .ticket:nth-child(even) {
  background: var(--app-panel);
}

body[data-page-id] .ticket h3 {
  color: var(--app-navy);
}

body[data-page-id] .ticket-alert-history {
  background: #f8fbfc;
  border: 1px solid var(--app-line);
  border-radius: 8px;
  margin: 14px 0 10px;
  padding: 12px;
}

body[data-page-id] .ticket-alert-history h4 {
  color: var(--app-navy);
  font-size: 0.9rem;
  letter-spacing: 0;
  margin: 0 0 8px;
}

body[data-page-id] .ticket-alert-empty {
  color: var(--app-muted);
  margin: 0;
}

body[data-page-id] .ticket-alert-list {
  display: grid;
  gap: 8px;
  list-style: none;
  margin: 0;
  padding: 0;
}

body[data-page-id] .ticket-alert-log {
  align-items: center;
  display: grid;
  gap: 8px;
  grid-template-columns: minmax(72px, max-content) minmax(0, 1fr) minmax(120px, max-content);
}

body[data-page-id] .ticket-alert-status {
  border: 1px solid var(--app-line);
  border-radius: 999px;
  color: var(--app-navy);
  font-size: 0.75rem;
  font-weight: 800;
  line-height: 1;
  padding: 6px 8px;
  text-align: center;
  text-transform: uppercase;
}

body[data-page-id] .alert-status-sent {
  background: #e9f7ef;
  border-color: #b9e1c5;
  color: #19653c;
}

body[data-page-id] .alert-status-failed {
  background: #fff1f0;
  border-color: #f1b6b0;
  color: #9c2b22;
}

body[data-page-id] .alert-status-skipped {
  background: #fff8e5;
  border-color: #ead28c;
  color: #72540f;
}

body[data-page-id] .ticket-alert-summary {
  color: var(--app-ink);
  min-width: 0;
  overflow-wrap: anywhere;
}

body[data-page-id] .ticket-alert-time {
  color: var(--app-muted);
  font-size: 0.82rem;
  text-align: right;
}

body[data-page-id] .gpt-response,
body[data-page-id] .fee-disclosure,
body[data-page-id] .total-display,
body[data-page-id] .empty-state,
body[data-page-id] #revokeAccessSection {
  background: var(--app-panel-soft) !important;
  border: 1px solid var(--app-line);
  border-left: 4px solid var(--app-gold);
  border-radius: 8px;
}

body[data-page-id] .empty-state {
  color: var(--app-muted);
  font-weight: 650;
  margin: 12px 0;
  padding: 12px 14px;
}

body[data-page-id] .metric-banner {
  border-radius: 8px;
  box-shadow: none;
}

body[data-page-id] #map-container {
  border: 1px solid var(--app-line);
  border-radius: 8px;
  box-shadow: var(--app-shadow);
}

body[data-page-id] .auth-card,
body[data-page-id] .content,
body[data-page-id] .welcome-card,
body[data-page-id] .form-card,
body[data-page-id] .card {
  margin-left: auto;
  margin-right: auto;
}

body[data-page-id] .welcome-card,
body[data-page-id] .form-card,
body[data-page-id] .card {
  box-sizing: border-box;
  max-width: min(92vw, 620px);
}

body[data-page-id] .welcome-card p,
body[data-page-id] .form-card p,
body[data-page-id] .card p {
  color: var(--app-muted);
  line-height: 1.6;
}

body[data-page-id] .next-button {
  border-radius: 999px;
}

body[data-page-id] .back-button {
  border-radius: 6px;
  box-shadow: 0 6px 16px rgba(13, 44, 84, 0.12);
}

body[data-page-id] .modal-content,
body[data-page-id] .modal {
  border: 1px solid var(--app-line);
  border-radius: 8px;
  box-shadow: var(--app-shadow);
}

@media (max-width: 768px) {
  body[data-page-id] .container,
  body[data-page-id] .content-wrapper,
  body[data-page-id] .account-container,
  body[data-page-id] .payment-container {
    margin-left: 12px;
    margin-right: 12px;
    padding: 18px;
  }

  body[data-page-id] .auth-card,
  body[data-page-id] .content {
    width: calc(100% - 24px);
  }

  body[data-page-id] .container h1,
  body[data-page-id] .content-wrapper h1,
  body[data-page-id] .account-container h1,
  body[data-page-id] .payment-container h1,
  body[data-page-id] .auth-card h2,
  body[data-page-id] .content h2,
  body[data-page-id] .page-title {
    font-size: 1.85rem;
  }

  body[data-page-id] .ticket-alert-log {
    align-items: flex-start;
    grid-template-columns: 1fr;
  }

  body[data-page-id] .ticket-alert-status {
    justify-self: start;
  }

  body[data-page-id] .ticket-alert-time {
    text-align: left;
  }
}