@import url('https://fonts.googleapis.com/css2?family=Be+Vietnam+Pro:wght@400;500;600;700;800&display=swap');

:root {
  --vilac-ink: #102b3a;
  --vilac-ink-soft: #244454;
  --vilac-gold: #b58a36;
  --vilac-gold-soft: #f2e7c9;
  --vilac-paper: #fbfaf6;
  --vilac-white: #fff;
  --vilac-muted: #536674;
  --vilac-line: #d8e0e2;
  --vilac-radius-sm: 10px;
  --vilac-radius-md: 16px;
  --vilac-radius-lg: 22px;
  --vilac-shadow: 0 12px 32px rgb(16 43 58 / 12%);
  font-family: 'Be Vietnam Pro', Inter, system-ui, sans-serif;
  color: var(--vilac-ink);
  background: var(--vilac-paper);
  font-synthesis: none;
  text-rendering: optimizeLegibility;
}

html, body, button, input, select, textarea { font-family: 'Be Vietnam Pro', Inter, system-ui, sans-serif; }
button, input, select, textarea { font-size: 14px; }
button, [role='button'], a { -webkit-tap-highlight-color: transparent; }
:focus-visible { outline: 3px solid #d8ad59 !important; outline-offset: 2px; }

/* Map workspace: quiet navy controls, warm surfaces, and clear touch targets. */
body.bg-slate-950 { background: #e9eef0; color: var(--vilac-ink); }
#sidebarPanel {
  color: var(--vilac-ink) !important;
  background: var(--vilac-paper) !important;
  border-color: var(--vilac-line) !important;
  box-shadow: 8px 0 32px rgb(16 43 58 / 14%) !important;
}
#sidebarPanel > div:first-of-type { background: var(--vilac-white) !important; border-color: var(--vilac-line) !important; }
#sidebarPanel > div:first-of-type > div:first-child > div:first-child > div:first-child {
  background: var(--vilac-ink) !important; color: white !important; box-shadow: none !important;
}
#sidebarPanel [class*='bg-slate-950'], #sidebarPanel [class*='bg-slate-900'],
#sidebarPanel [class*='bg-slate-800'], #sidebarPanel [class*='bg-slate-700'],
#sidebarPanel [class*='bg-gradient-to-br'], #sidebarPanel [class*='bg-gradient-to-r'] {
  background: var(--vilac-white) !important;
}
#sidebarPanel [class*='border-slate-'] { border-color: var(--vilac-line) !important; }
#sidebarPanel [class*='text-white'], #sidebarPanel [class*='text-slate-100'],
#sidebarPanel [class*='text-slate-200'], #sidebarPanel [class*='text-slate-300'],
#sidebarPanel [class*='text-slate-400'], #sidebarPanel [class*='text-slate-500'] { color: var(--vilac-muted) !important; }
#sidebarPanel h1, #sidebarPanel h2, #sidebarPanel h3, #sidebarPanel strong,
#sidebarPanel [class*='text-amber-'], #sidebarPanel [class*='text-emerald-'],
#sidebarPanel [class*='text-cyan-'] { color: var(--vilac-ink) !important; }
#sidebarPanel [class*='border-amber-'], #sidebarPanel [class*='border-emerald-'] { border-color: #d9c18e !important; }
#sidebarPanel #kmzStatusContainer { background: #f2f5f4 !important; }
#sidebarPanel #kmzProgressBar { background: var(--vilac-gold) !important; }
#sidebarPanel .tab-nav-btn {
  min-height: 44px; border-radius: var(--vilac-radius-sm) !important;
  background: transparent !important; color: var(--vilac-muted) !important;
  box-shadow: none !important; font-weight: 600 !important;
}
#sidebarPanel .tab-nav-btn.bg-amber-500 {
  background: var(--vilac-ink) !important; color: white !important;
}
#sidebarPanel label { color: var(--vilac-ink-soft) !important; }
#sidebarPanel input:not([type='checkbox']):not([type='file']):not([type='range']),
#sidebarPanel select, #sidebarPanel textarea {
  min-height: 44px; padding: 10px 12px !important; border: 1px solid #b8c7cd !important;
  border-radius: var(--vilac-radius-sm) !important; background: white !important;
  color: var(--vilac-ink) !important; box-shadow: none !important;
}
#sidebarPanel input::placeholder, #sidebarPanel textarea::placeholder { color: #61727d !important; opacity: 1; }
#sidebarPanel input[type='checkbox'] { accent-color: var(--vilac-ink); }
#sidebarPanel button:not(.tab-nav-btn) {
  min-height: 40px; border-radius: var(--vilac-radius-sm) !important;
  box-shadow: none !important; transition: background-color .16s ease, transform .16s ease;
}
#sidebarPanel button[class*='bg-amber-'], #sidebarPanel button[class*='bg-emerald-'],
#sidebarPanel button[class*='bg-red-'], #sidebarPanel button[class*='bg-violet-'] {
  background: var(--vilac-ink) !important; color: white !important; border-color: var(--vilac-ink) !important;
}
#sidebarPanel #parcelResultCard, #sidebarPanel #wgs84ResultBox, #sidebarPanel #panelEstimate > div,
#sidebarPanel #panelEstimate details, #sidebarPanel #communityPanel .community-list {
  border-radius: var(--vilac-radius-md) !important; box-shadow: 0 5px 18px rgb(16 43 58 / 6%);
}
#sidebarPanel #parcelResultCard { border: 1px solid #d9c18e !important; background: white !important; }
#sidebarPanel #parcelResultCard [class*='bg-slate-950'], #sidebarPanel #wgs84ResultBox [class*='bg-slate-950'] { background: #f3f6f5 !important; }
#sidebarPanel #estimateResult > * { border-radius: var(--vilac-radius-md) !important; box-shadow: 0 8px 24px rgb(16 43 58 / 8%); }
#sidebarPanel #estimateResult [class*='text-3xl'], #sidebarPanel #estimateResult [class*='text-4xl'],
#sidebarPanel #estimateResult [class*='text-2xl'] { line-height: 1.12; letter-spacing: -.035em; }
#sidebarPanel > div:last-of-type { background: var(--vilac-white) !important; border-color: var(--vilac-line) !important; }
#sidebarPanel #sheetHandle { background: var(--vilac-paper); }
#sidebarPanel #sheetHandle::before { background: #9eafb5; }
#sidebarPanel #sheetHandle span { color: var(--vilac-muted); }

#topFloatingToolbar > div, #topFloatingToolbar > button {
  border-color: rgb(16 43 58 / 18%) !important; border-radius: 13px !important;
  background: rgb(251 250 246 / 96%) !important; color: var(--vilac-ink) !important;
  box-shadow: 0 8px 24px rgb(16 43 58 / 14%) !important;
  backdrop-filter: blur(10px);
}
#topFloatingToolbar button { min-height: 42px; }
#topFloatingToolbar #btnBaseSatellite, #topFloatingToolbar #btnMapEstimate,
#topFloatingToolbar #btnHelp, .map-tool-button.help-toggle {
  background: var(--vilac-ink) !important; border-color: var(--vilac-ink) !important; color: white !important;
}
#topFloatingToolbar input[type='range'] { accent-color: var(--vilac-gold); }
.map-tool-button, .price-legend { border-color: #c5d0d4; border-radius: 12px; background: var(--vilac-paper); color: var(--vilac-ink); box-shadow: var(--vilac-shadow); }
.price-toggle, .help-toggle { color: var(--vilac-ink); }
.help-sheet { border-color: var(--vilac-line); border-radius: var(--vilac-radius-lg); background: var(--vilac-paper); color: var(--vilac-ink); box-shadow: var(--vilac-shadow); }
.help-kicker { color: #775817; }
.help-steps article { border-color: var(--vilac-line); border-radius: var(--vilac-radius-md); background: white; }
.help-steps article > span { background: var(--vilac-gold-soft); }
.help-close, .help-skip { background: #edf1ef; color: var(--vilac-ink); }
.help-done { background: var(--vilac-ink); color: white; }
#parcelActionSheet, #drawParcelControls { border-color: var(--vilac-line) !important; border-radius: var(--vilac-radius-md) !important; background: var(--vilac-paper) !important; color: var(--vilac-ink) !important; box-shadow: var(--vilac-shadow) !important; }
#parcelActionSheet button, #parcelActionSheet a, #drawParcelControls button { min-height: 42px; border: 1px solid var(--vilac-line); border-radius: var(--vilac-radius-sm) !important; background: white !important; color: var(--vilac-ink) !important; }
#parcelActionSheet #parcelSheetEstimate, #drawParcelControls #drawParcelFinish { background: var(--vilac-ink) !important; color: white !important; }
.community-shell .community-fab { background: var(--vilac-ink); color: white; box-shadow: var(--vilac-shadow); }
.community-dialog { background: rgb(9 27 38 / 62%); }
.community-card { border-color: var(--vilac-line); border-radius: var(--vilac-radius-lg); background: var(--vilac-paper); color: var(--vilac-ink); box-shadow: var(--vilac-shadow); }
.community-card h2 { color: var(--vilac-ink); }
.community-dialog .community-card { border-color: var(--vilac-line); background: var(--vilac-paper); color: var(--vilac-ink); }
.community-dialog .community-card h2 { color: var(--vilac-ink); }
.community-dialog .community-card input, .community-dialog .community-card select,
.community-dialog .community-card textarea { border-color: #b8c7cd; background: white; color: var(--vilac-ink); }
.community-dialog .community-primary { background: var(--vilac-ink); color: white; }
.community-dialog .community-muted { background: #e8eeed; color: var(--vilac-ink); }
.community-dialog .community-tabs button.active { background: var(--vilac-ink); color: white; }
.community-card input, .community-card select, .community-card textarea { border-color: #b8c7cd; border-radius: var(--vilac-radius-sm); background: white; color: var(--vilac-ink); }
.community-primary { background: var(--vilac-ink); color: white; }
.community-muted { background: #e8eeed; color: var(--vilac-ink); }
.community-tabs button { border-color: var(--vilac-line); border-radius: var(--vilac-radius-sm); background: white; color: var(--vilac-ink); }
.community-tabs button.active { background: var(--vilac-ink); color: white; }
.community-status, .community-entry { border: 1px solid var(--vilac-line); border-radius: var(--vilac-radius-sm); background: white; color: var(--vilac-ink); }
.community-note { color: var(--vilac-muted); }

/* Public price and utility pages share the same restrained ink-and-paper system. */
body:has(> .top) { background: var(--vilac-paper); color: var(--vilac-ink); }
.top { height: 68px; border-color: var(--vilac-line); background: var(--vilac-white); }
.brand { color: var(--vilac-ink); }
.brand span { color: #8a6a27; }
.top nav a { color: var(--vilac-ink-soft); }
.wrap { margin-top: 44px; }
h1, h2 { color: var(--vilac-ink); }
.eyebrow { color: #72551d; }
.card, .panel { border-color: var(--vilac-line); border-radius: var(--vilac-radius-md); box-shadow: 0 8px 24px rgb(16 43 58 / 6%); }
.card strong, .total { color: var(--vilac-ink); }
.button { min-height: 46px; border-color: #bdcbd0; border-radius: var(--vilac-radius-sm); color: var(--vilac-ink); }
.button.primary { border-color: var(--vilac-ink); background: var(--vilac-ink); color: white; }
.button.primary:hover { background: #1c3e50; }
input, select, textarea { border-color: #bdcbd0; border-radius: var(--vilac-radius-sm); color: var(--vilac-ink); }
th { background: #eef2f0; color: var(--vilac-ink-soft); }
th, td { border-color: #e3e9e7; }
.unit-list a { border-color: var(--vilac-line); border-radius: var(--vilac-radius-sm); color: var(--vilac-ink); }
.unit-list a span { color: #765b23; }
.disclaimer { border-color: #e6d8b6; background: #f7f1e3; color: #503f1d !important; }
.legal { border-color: var(--vilac-gold); background: #f1f4f1; }
.total { font-size: clamp(32px, 7vw, 44px); line-height: 1.12; }
.fee-list li { border-color: var(--vilac-line); }

@media (max-width: 767px) {
  #sidebarPanel { border-radius: 22px 22px 0 0 !important; border-top: 1px solid var(--vilac-line) !important; }
  #sidebarPanel > div.flex-1 { padding: 12px !important; }
  #sidebarPanel .tab-nav-btn { min-width: 0; padding-inline: 6px !important; font-size: 11px !important; }
  #topFloatingToolbar { right: 8px !important; left: 8px !important; justify-content: flex-end !important; gap: 6px !important; }
  #topFloatingToolbar > div, #topFloatingToolbar > button { max-width: min(100%, 175px); }
  #topFloatingToolbar #btnBaseSatellite, #topFloatingToolbar #btnBaseOsm { padding-inline: 8px !important; font-size: 10px !important; }
  #topFloatingToolbar > div:has(#sliderKmzOpacity) { min-width: 0 !important; max-width: 100%; padding: 5px 8px !important; gap: 6px !important; }
  #topFloatingToolbar > div:has(#sliderKmzOpacity) > span { font-size: 0 !important; }
  #sliderKmzOpacity { width: 84px; }
  .community-card { width: min(640px, calc(100vw - 20px)); max-height: 88dvh; padding: 16px; }
  .community-actions { flex-wrap: wrap; }
  .top { padding-inline: 16px; }
  .top nav { gap: 10px; }
  .wrap { width: min(100% - 28px, 600px); margin-top: 30px; }
}

@media (max-width: 390px) {
  #topFloatingToolbar > div, #topFloatingToolbar > button { max-width: 150px; }
  #topFloatingToolbar #btnBaseSatellite, #topFloatingToolbar #btnBaseOsm { font-size: 9px !important; }
  .top nav a { font-size: 11px; }
  .wrap { width: calc(100% - 24px); }
  .field-grid { grid-template-columns: 1fr; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
}
