/* Cool champagne app colors. Load after styles.css and theme.css. */
:root {
  color-scheme: dark;
  --pb-error-line: #885a53;
  --pb-sim: #c4c6e3;
  --pb-sim-surface: #303142;
}

body {
  background: var(--pb-page);
  color: var(--pb-ink);
}

::selection {
  background: var(--pb-accent);
  color: var(--pb-page);
}

button:focus-visible,
a:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
summary:focus-visible,
.flight-table tbody tr:focus-visible,
.file-button:focus-within {
  outline-color: var(--pb-accent);
}

summary:focus-visible,
.flight-table tbody tr:focus-visible {
  outline: 3px solid var(--pb-accent);
  outline-offset: -3px;
}

/* Navigation, including the compact sidebar and mobile bottom bar. */
.sidebar {
  background: var(--pb-deep);
  color: var(--pb-deep-muted);
}

.brand,
.workspace strong,
.profile strong {
  color: var(--pb-deep-ink);
}

.brand-mark,
.brand-dot,
.tiny-plane {
  color: var(--pb-accent);
}

.brand-mark path[stroke="#26372f"] {
  stroke: var(--pb-deep);
}

.workspace,
.nav-new,
.profile {
  border-color: var(--pb-line);
}

.workspace-avatar,
.avatar,
.nav-count {
  background: var(--pb-soft);
  color: var(--pb-soft-ink);
}

.workspace small,
.nav-caption,
.nav-item,
.field-note,
.profile {
  color: var(--pb-deep-muted);
}

.nav-item:hover {
  background: var(--pb-soft);
  color: var(--pb-deep-ink);
}

.nav-item.active {
  background: var(--pb-accent);
  color: var(--pb-page);
  border-top-color: var(--pb-accent);
}

.nav-divider,
.field-note-line {
  background: var(--pb-line);
}

.topbar {
  background: var(--pb-page);
}

.breadcrumb,
.breadcrumb span,
.demo-label,
.icon-button,
.intro-copy,
.topbar-changelog {
  color: var(--pb-muted);
}

.breadcrumb strong,
.mobile-brand {
  color: var(--pb-ink);
}

.eyebrow,
.footer-star {
  color: var(--pb-emphasis);
}

.demo-label i,
.status-dot {
  background: var(--pb-success);
}

.icon-button:hover {
  background: var(--pb-soft);
  color: var(--pb-soft-ink);
}

.button-primary,
.button-accent {
  background: var(--pb-accent);
  color: var(--pb-accent-ink);
}

.button-primary:hover,
.button-accent:hover {
  background: var(--pb-accent-hover);
  color: var(--pb-accent-ink);
}

.button-light,
.account-google .button-google {
  background: var(--pb-surface);
  border-color: var(--pb-line);
  color: var(--pb-ink);
}

.button-light:hover,
.account-google .button-google:hover {
  background: var(--pb-soft);
  color: var(--pb-soft-ink);
}

.button-text,
.import-help a {
  color: var(--pb-accent);
}

.button-text:hover,
.import-help a:hover,
.topbar-changelog:hover {
  color: var(--pb-deep-ink);
}

/* Logbook, charts, insights, and aircraft cards. */
.metrics,
.panel,
.source-card,
.review-card,
.column-mapping,
.import-stat-grid,
.import-review-table {
  background: var(--pb-surface);
  border-color: var(--pb-line);
}

.metric-label,
.metric-label svg,
.metric-value small,
.metric-caption,
.panel-heading small,
.chart-legend,
.y-axis,
.bar-label,
.map-caption p,
.logbook-top h2 span,
.search-box svg,
.filter-tab,
.month-filter,
.date-cell small,
.route-cell svg,
.aircraft-cell small,
.hours-cell small,
.source-tag,
.table-footer,
.empty-state,
.page-footer,
.breakdown-label,
.insight-note,
.aircraft-card p,
.aircraft-stats small,
.prototype-note {
  color: var(--pb-muted);
}

.metric-caption .little-pill,
.type-pill.pic {
  background: var(--pb-soft);
  color: var(--pb-soft-ink);
}

.chart-legend i,
.bar.active,
.breakdown-fill {
  background: var(--pb-accent);
}

.bars {
  background: repeating-linear-gradient(
    to top,
    transparent 0,
    transparent calc(33.33% - 1px),
    var(--pb-line) calc(33.33% - 1px),
    var(--pb-line) 33.33%
  );
}

.bar {
  background: var(--pb-deep-muted);
}

.bar-value,
.source-tag.imported {
  color: var(--pb-soft-ink);
}

.breakdown-track {
  background: var(--pb-line);
}

.map-panel {
  background: var(--pb-surface);
}

.map-badge {
  background: var(--pb-deep);
  border-color: var(--pb-line);
  color: var(--pb-deep-muted);
}

.map-label {
  fill: var(--pb-soft-ink);
}

.map-art [fill="#dce6d6"] {
  fill: var(--pb-deep);
}

.map-art [stroke="#dbe2d1"],
.map-art [stroke="#c8d5bd"],
.map-art [stroke="#dce3d2"] {
  stroke: var(--pb-line);
}

.map-art [stroke="#809663"],
.map-art [stroke="#71865a"] {
  stroke: var(--pb-accent);
}

.map-art [stroke="#b8c89d"] {
  stroke: var(--pb-deep-muted);
}

.map-art [fill="#fafcf5"] {
  fill: var(--pb-surface);
}

.map-art [fill="#536d40"] {
  fill: var(--pb-accent);
}

.search-box {
  background: var(--pb-surface);
  border-color: var(--pb-line);
}

.search-box:focus-within {
  border-color: var(--pb-accent);
}

.search-box input {
  color: var(--pb-ink);
}

.search-box input::placeholder,
.form-field input::placeholder,
.form-field textarea::placeholder,
.text-area::placeholder {
  color: var(--pb-muted);
  opacity: 1;
}

.filter-tab.selected {
  border-bottom-color: var(--pb-accent);
  color: var(--pb-accent);
}

.filter-tab:hover {
  color: var(--pb-ink);
}

.flight-table th,
.import-row-labels {
  background: var(--pb-deep);
  color: var(--pb-deep-muted);
}

.flight-table td {
  border-color: var(--pb-line);
}

.flight-table tbody tr:hover {
  background: var(--pb-deep);
}

.type-pill {
  background: var(--pb-deep);
  color: var(--pb-deep-muted);
}

.type-pill.sim {
  background: var(--pb-sim-surface);
  color: var(--pb-sim);
}

.hours-cell,
.empty-state h3 {
  color: var(--pb-ink);
}

.aircraft-card .aircraft-illustration {
  background: var(--pb-deep);
  color: var(--pb-accent);
}

/* Drawers, native form controls, import steps, and review screens. */
dialog {
  background: var(--pb-surface);
  color: var(--pb-ink);
}

dialog::backdrop {
  background: rgb(10 12 15 / 72%);
}

.drawer,
.about-modal {
  background: var(--pb-page);
  box-shadow: -12px 0 55px rgb(0 0 0 / 28%);
}

.drawer-head {
  background: var(--pb-surface);
}

.drawer-head p:not(.eyebrow),
.source-card p,
.step-line,
.input-label,
.helper-copy,
.or-divider,
.sample-card p,
.review-card-top small,
.form-field small,
.form-section-title,
.review-summary,
.about-modal > p:not(.eyebrow),
.import-steps,
.upload-zone p,
.upload-zone > small,
.import-sample p,
.import-help p,
.import-privacy,
.file-summary p,
.mapping-heading > span,
.mapping-row > span small,
.mapping-example,
.ignored-columns,
.import-stat-grid span,
.import-row small,
.review-status span,
.import-pagination span,
.import-total small,
.import-option small {
  color: var(--pb-muted);
}

.source-icon,
.sample-card,
.upload-symbol,
.file-monogram,
.import-option {
  background: var(--pb-soft);
  color: var(--pb-soft-ink);
}

.step-line .current,
.review-summary strong,
.dialog-source,
.import-steps .current {
  color: var(--pb-accent);
}

.step-dot,
.import-steps b {
  border-color: var(--pb-line);
}

.step-line i,
.or-divider::before,
.or-divider::after {
  background: var(--pb-line);
}

.text-area,
.form-field input,
.form-field select,
.form-field textarea,
.mapping-row select {
  background: var(--pb-surface);
  border-color: var(--pb-line);
  color: var(--pb-ink);
  caret-color: var(--pb-accent);
}

select option,
select optgroup {
  background: var(--pb-surface);
  color: var(--pb-ink);
}

input,
.import-row input,
.import-option input {
  accent-color: var(--pb-accent);
}

.form-field input:autofill {
  background: var(--pb-surface);
  color: var(--pb-ink);
}

.form-field input:-webkit-autofill {
  -webkit-box-shadow: 0 0 0 1000px var(--pb-surface) inset;
  -webkit-text-fill-color: var(--pb-ink);
  caret-color: var(--pb-accent);
}

.info-box,
.account-callout,
.registration-notice {
  background: var(--pb-deep);
  border-color: var(--pb-line);
  color: var(--pb-deep-muted);
}

.account-callout h3,
.registration-notice strong {
  color: var(--pb-deep-ink);
}

.registration-notice p {
  color: var(--pb-deep-muted);
}

.import-steps .current b {
  background: var(--pb-accent);
  border-color: var(--pb-accent);
  color: var(--pb-page);
}

.import-steps .complete b {
  background: var(--pb-soft);
  color: var(--pb-soft-ink);
}

.upload-zone {
  background: var(--pb-deep);
  border-color: var(--pb-deep-muted);
}

.upload-zone.drag-over {
  background: var(--pb-soft);
  border-color: var(--pb-accent);
}

.upload-zone h3 {
  color: var(--pb-ink);
}

.review-notes,
.duplicate-note,
.warning-list,
.review-status.muted {
  color: var(--pb-soft-ink);
}

.duplicate {
  opacity: 1;
  color: var(--pb-muted);
}

/* Status colors remain distinct from the champagne controls. */
.success-chip,
.account-status {
  background: var(--pb-success-surface);
  color: var(--pb-success);
}

.review-status,
.account-modal > p.account-notice {
  color: var(--pb-success);
}

.error-box {
  background: var(--pb-danger-surface);
  border-color: var(--pb-error-line);
  color: var(--pb-danger);
}

.has-errors {
  background: var(--pb-danger-surface);
}

.review-status.error,
.account-modal > p.account-error,
.account-modal .account-field-error {
  color: var(--pb-danger);
}

.account-modal input[aria-invalid="true"] {
  border-color: var(--pb-danger);
}

.button-danger {
  background: var(--pb-danger);
  color: var(--pb-page);
}

.button-danger:hover {
  background: #ffd0c7;
  color: var(--pb-page);
}

.account-banner {
  background: var(--pb-soft);
  border-color: var(--pb-line);
  color: var(--pb-soft-ink);
}

.account-modal .account-fine,
.account-google small {
  color: var(--pb-muted);
}

.account-modal > p.account-email {
  color: var(--pb-ink);
}

.google-letter {
  color: #8ab4f8;
}

.toast {
  background: var(--pb-deep);
  color: var(--pb-deep-ink);
  box-shadow: 0 9px 25px rgb(0 0 0 / 32%);
}

.toast button {
  color: var(--pb-accent);
}

/* Disabled controls stay legible without looking actionable. */
button:disabled,
.account-modal button:disabled,
.account-google .button-google:disabled {
  background: var(--pb-line);
  border-color: var(--pb-line);
  color: var(--pb-muted);
  opacity: 1;
  transform: none;
}

button:disabled .google-letter {
  color: var(--pb-muted);
}

.record-fieldset:disabled {
  opacity: 1;
}

.form-field input:disabled,
.form-field select:disabled,
.form-field textarea:disabled,
.mapping-row select:disabled {
  background: var(--pb-deep);
  color: var(--pb-muted);
  -webkit-text-fill-color: var(--pb-muted);
  opacity: 1;
}

@media (max-width: 580px) {
  .sidebar {
    background: var(--pb-deep);
  }

  .nav-item.active {
    background: var(--pb-soft);
    color: var(--pb-accent);
    border-top-color: var(--pb-accent);
  }
}