/* OrlandoHQ — main.css
 * Theme custom properties + global resets + typography.
 */

/* ---------- Theme 1: Blush & Sage (default) ---------- */
:root,
:root[data-theme="blush"] {
  --color-bg-main:        #FFFFFF;
  --color-bg-secondary:   #F6EEEB;
  --color-bg-card:        #FFFDFC;
  --color-bg-elevated:    #F8F0EE;
  --color-text-primary:   #2F2F2F;
  --color-text-secondary: #695F5A;
  --color-text-muted:     #706762;
  --color-border:         #E8DDD9;
  --color-divider:        #DDD1CD;
  --color-accent-primary: #EFD6D2;
  --color-accent-hover:   #D8A7A0;
  --color-accent-light:   #F7E8E5;
  --color-accent-text:    #7A5E59;
  --color-accent-2:       #bfcabf;
  --color-accent-2-hover: #7E927F;
  --color-accent-2-light: #EEF3EF;
  --color-accent-2-text:  #455645;
  --color-success:        #626F63;
  --color-warning:        #95573A;
  --color-error:          #A7524B;
  --color-info:           #5D705E;
  /* Ink for text sitting on coloured fills — each pair measured ≥4.5:1 */
  --color-on-accent:         #5E4540;
  --color-on-accent-hover:   #1A1B1D;
  --color-on-accent-2:       #455645;
  --color-on-accent-2-hover: #1A1B1D;
  --color-on-status:         #FFFFFF;
  --color-on-cat:            #2F2F2F;
  --color-meter:             #5E7A60;
  --color-meter-soft:         #B5C7B5; --color-success-soft: #B5C7B5; /* pastel fills, outlined in --color-meter / --color-success */
  --color-star:              #B0645C; /* filled rating stars (rose), ≥3:1 on the card */
  --ring-1: var(--chart-1); --ring-2: var(--chart-2); --ring-3: var(--chart-3); /* Home readiness rings: 3 distinct theme hues */
  --ring-1-soft: var(--chart-1-soft); --ring-2-soft: var(--chart-2-soft); --ring-3-soft: var(--chart-3-soft);
  /* Chart series — each ≥3:1 against every surface in this theme */
  /* Charts use only Blush & Sage hues (rose, sage, cocoa, taupe), each ≥3:1 on the card. */
  --chart-1: #B0645C; --chart-2: #5E7A60; --chart-3: #7A5E59; --chart-4: #7E927F;
  --chart-5: #93857D; --chart-6: #3F5240; --chart-7: #8F5A52; --chart-8: #A26A6E;
  /* Pastel chart fills (outlined in the matching --chart-N shade, which carries the 3:1 contrast). */
  --chart-1-soft: #E8B4AE; --chart-2-soft: #B5C7B5; --chart-3-soft: #CDB4A6; --chart-4-soft: #DCE5DA;
  --chart-5-soft: #E2D9D3; --chart-6-soft: #93A894; --chart-7-soft: #D39A93; --chart-8-soft: #E6C6CB;
  --shadow-card:    0 1px 3px rgba(0,0,0,0.04), 0 4px 12px rgba(0,0,0,0.06);
  --shadow-elevated: 0 2px 8px rgba(0,0,0,0.06), 0 8px 24px rgba(0,0,0,0.08);
  /* Itinerary/Calendar categories: only sage, rose, nude and taupe; dark text on each ≥4.5:1. */
  --cat-transport:    #9FB0A0;
  --cat-dining:       #CAD4CA;
  --cat-entertainment:#BF8F88;
  --cat-attraction:   #E6BDB5;
  --cat-hotel:        #F2DEDA;
  --cat-shopping:     #D9BFA6;
  --cat-rest:         #ADA29C;
}

/* ---------- Theme 2: Florida Sunshine ---------- */
:root[data-theme="florida"] {
  --color-bg-main:        #FDFBF9;
  --color-bg-secondary:   #FFF3E0;
  --color-bg-card:        #FFFFFF;
  --color-bg-elevated:    #FFF0D4;
  --color-text-primary:   #1A2832;
  --color-text-secondary: #3D5A6B;
  --color-text-muted:     #5B707A;
  --color-border:         #E0D4C0;
  --color-divider:        #D4C4A8;
  --color-accent-primary: #00A8E8;
  --color-accent-hover:   #0079AA;
  --color-accent-light:   #E0F6FF;
  --color-accent-text:    #005F8A;
  --color-accent-2:       #F6DC9E;
  --color-accent-2-hover: #E8B800;
  --color-accent-2-light: #FFF8D6;
  --color-accent-2-text:  #785C00;
  --color-success:        #2E7962;
  --color-warning:        #C83700;
  --color-error:          #D81717;
  --color-info:           #1B73A3;
  --color-on-accent:         #1A1B1D;
  --color-on-accent-hover:   #FFFFFF;
  --color-on-accent-2:       #785C00;
  --color-on-accent-2-hover: #1A1B1D;
  --color-on-status:         #FFFFFF;
  --color-on-cat:            #1A2832;
  --color-meter:             #0088BF;
  --color-meter-soft:         #8ED1EE; --color-success-soft: #94CFB7; /* pastel fills, outlined in --color-meter / --color-success */
  --color-star:              #B07D00; /* filled rating stars (sunshine gold), ≥3:1 on the card */
  --ring-1: var(--chart-1); --ring-2: var(--chart-2); --ring-3: var(--chart-4); /* Home readiness rings: 3 distinct theme hues */
  --ring-1-soft: var(--chart-1-soft); --ring-2-soft: var(--chart-2-soft); --ring-3-soft: var(--chart-4-soft);
  /* Charts use only Florida hues (ocean, sunshine gold, sunset coral, sea green), each ≥3:1 on the card. */
  --chart-1: #0088BF; --chart-2: #B07D00; --chart-3: #005F8A; --chart-4: #C4512E;
  --chart-5: #2E7962; --chart-6: #8A6400; --chart-7: #3D7FA6; --chart-8: #A86A4B;
  /* Pastel chart fills (outlined in the matching --chart-N shade, which carries the 3:1 contrast). */
  --chart-1-soft: #8ED1EE; --chart-2-soft: #F3D58E; --chart-3-soft: #7FB3D1; --chart-4-soft: #F4AE97;
  --chart-5-soft: #94CFB7; --chart-6-soft: #D6AF5C; --chart-7-soft: #B6D6EA; --chart-8-soft: #EBC3A8;
  /* Itinerary/Calendar categories: only ocean, sky, sea green, sunshine, coral and slate; dark text on each ≥4.5:1. */
  --cat-transport:    #00A8E8;
  --cat-dining:       #52B788;
  --cat-entertainment:#8FD6F2;
  --cat-attraction:   #F6DC9E;
  --cat-hotel:        #FFB4A2;
  --cat-shopping:     #FF7F50;
  --cat-rest:         #8AA6B5;
}

/* ---------- Theme 4: Cool Neutral (v2.0.18) ----------
 * Cool white and grey with slate blue, sea green, steel and teal — clear
 * mid-tones rather than pastels (v2.0.17's warm browns were too muddy). */
:root[data-theme="neutral"] {
  --color-bg-main:        #F7F9FA;
  --color-bg-secondary:   #EAEFF2;
  --color-bg-card:        #FFFFFF;
  --color-bg-elevated:    #F0F4F6;
  --color-text-primary:   #1C2730;
  --color-text-secondary: #3E4C57;
  --color-text-muted:     #52606B;
  --color-border:         #D3DCE2;
  --color-divider:        #C2CDD5;
  --color-accent-primary: #3E5C76;
  --color-accent-hover:   #2C4459;
  --color-accent-light:   #E3EBF2;
  --color-accent-text:    #2F4A61;
  --color-accent-2:       #46705F;
  --color-accent-2-hover: #35594B;
  --color-accent-2-light: #E5F0EC;
  --color-accent-2-text:  #2D5747;
  --color-success:        #3B6F5A;
  --color-warning:        #9A5A16;
  --color-error:          #B03A3A;
  --color-info:           #3E6A8A;
  --color-on-accent:         #FFFFFF;
  --color-on-accent-hover:   #FFFFFF;
  --color-on-accent-2:       #FFFFFF; /* white on sea green 5.6:1 */
  --color-on-accent-2-hover: #FFFFFF;
  --color-on-status:         #FFFFFF;
  --color-on-cat:            #1C2730;
  --color-meter:             #3E6A8A;
  --color-meter-soft:         #A9C2D6; --color-success-soft: #A7CBBC; /* mid-tone fills, outlined in --color-meter / --color-success */
  --color-star:              #4F7FA3; /* filled rating stars (steel blue), >=3:1 on the card */
  --ring-1: var(--chart-1); --ring-2: var(--chart-2); --ring-3: var(--chart-3); /* Home readiness rings: 3 distinct theme hues */
  --ring-1-soft: var(--chart-1-soft); --ring-2-soft: var(--chart-2-soft); --ring-3-soft: var(--chart-3-soft);
  /* Charts use only Cool Neutral hues (slate blue, sea green, steel, teal, charcoal, fern, dusty blue, grey), each >=3:1 on the card. */
  --chart-1: #3E5C76; --chart-2: #3B6F5A; --chart-3: #5A7D9A; --chart-4: #2F7476;
  --chart-5: #4A5560; --chart-6: #5B8757; --chart-7: #6A8CAE; --chart-8: #6B7680;
  /* Mid-tone chart fills, outlined in the matching --chart-N shade. */
  --chart-1-soft: #9FB4C7; --chart-2-soft: #9CC3B2; --chart-3-soft: #B3C9DC; --chart-4-soft: #8FC0C1;
  --chart-5-soft: #A3ABB3; --chart-6-soft: #A9C7A5; --chart-7-soft: #C2D4E6; --chart-8-soft: #C3C9CE;
  --shadow-card:    0 1px 3px rgba(20,35,50,0.05), 0 4px 12px rgba(20,35,50,0.07);
  --shadow-elevated: 0 2px 8px rgba(20,35,50,0.07), 0 8px 24px rgba(20,35,50,0.09);
  /* Itinerary/Calendar categories: blues, greens, teal and greys; dark text on each >=4.5:1. */
  --cat-transport:    #A9C3D9;
  --cat-dining:       #A9CDBE;
  --cat-entertainment:#B9C4CF;
  --cat-attraction:   #C9DAE6;
  --cat-hotel:        #DDE5EA;
  --cat-shopping:     #A6CFCF;
  --cat-rest:         #BCC3C9;
}

/* ---------- Theme 3: Dark Mode ---------- */
:root[data-theme="dark"] {
  --color-bg-main:        #1A1B1D;
  --color-bg-secondary:   #222426;
  --color-bg-card:        #36383b;
  --color-bg-elevated:    #2D2F32;
  --color-text-primary:   #FFFFFF;
  --color-text-secondary: #fcfbf8;
  --color-text-muted:     #dbd8d3;
  --color-border:         #45484D;
  --color-divider:        #3D4045;
  --color-accent-primary: #8E9B84;
  --color-accent-hover:   #A3AE99;
  --color-accent-light:   #394137;
  --color-accent-text:    #dfe5d9;
  --color-accent-2:       #C5A37A;
  --color-accent-2-hover: #D4B68C;
  --color-accent-2-light: #3C3530;
  --color-accent-2-text:  #F2E2C8;
  --color-success:        #91A986;
  --color-warning:        #C5A37A;
  --color-error:          #CE9687;
  --color-info:           #98A3B7;
  --color-on-accent:         #1A1B1D;
  --color-on-accent-hover:   #1A1B1D;
  --color-on-accent-2:       #1A1B1D;
  --color-on-accent-2-hover: #1A1B1D;
  --color-on-status:         #1A1B1D;
  --color-on-cat:            #1A1B1D;
  --color-meter:             #D4B68C;
  --color-meter-soft:         #E1CCAE; --color-success-soft: #BFCDB8; /* pastel fills, outlined in --color-meter / --color-success */
  --color-star:              #D4B68C; /* filled rating stars (camel), ≥3:1 on the card */
  --ring-1: var(--chart-1); --ring-2: var(--chart-2); --ring-3: var(--chart-3); /* Home readiness rings: 3 distinct theme hues */
  --ring-1-soft: var(--chart-1-soft); --ring-2-soft: var(--chart-2-soft); --ring-3-soft: var(--chart-3-soft);
  /* Charts use only Dark-theme hues (sage, camel, clay rose, cream, slate), each ≥3:1 on the card. */
  --chart-1: #A3B899; --chart-2: #D4B68C; --chart-3: #CE9687; --chart-4: #DFE5D9;
  --chart-5: #B5825A; --chart-6: #7E927F; --chart-7: #F2E2C8; --chart-8: #98A3B7;
  /* Pastel chart fills (outlined in the matching --chart-N shade, which carries the 3:1 contrast). */
  --chart-1-soft: #BFCDB8; --chart-2-soft: #E1CCAE; --chart-3-soft: #DDB6AB; --chart-4-soft: #E9EDE4;
  --chart-5-soft: #CBA88C; --chart-6-soft: #A5B3A5; --chart-7-soft: #F6EBD8; --chart-8-soft: #B7BFCD;
  --shadow-card:    0 1px 3px rgba(0,0,0,0.25), 0 4px 12px rgba(0,0,0,0.30);
  --shadow-elevated: 0 2px 8px rgba(0,0,0,0.30), 0 8px 24px rgba(0,0,0,0.40);
  /* Itinerary/Calendar categories: only slate, sage, cream, camel, clay rose, caramel and stone; dark text on each ≥4.5:1. */
  --cat-transport:    #98A3B7;
  --cat-dining:       #8FA784;
  --cat-entertainment:#E3CFAE;
  --cat-attraction:   #C5A37A;
  --cat-hotel:        #C28D85;
  --cat-shopping:     #B5825A;
  --cat-rest:         #94908A;
}

/* Dark-mode scrollbars: a touch darker than the surrounding panel for contrast */
:root[data-theme="dark"] .sidebar,
:root[data-theme="dark"] .modal-body {
  scrollbar-width: thin;
  scrollbar-color: #555a60 #1a1b1d;
}
:root[data-theme="dark"] .sidebar::-webkit-scrollbar,
:root[data-theme="dark"] .modal-body::-webkit-scrollbar { width: 10px; }
:root[data-theme="dark"] .sidebar::-webkit-scrollbar-track,
:root[data-theme="dark"] .modal-body::-webkit-scrollbar-track { background: #1a1b1d; }
:root[data-theme="dark"] .sidebar::-webkit-scrollbar-thumb,
:root[data-theme="dark"] .modal-body::-webkit-scrollbar-thumb {
  background: #555a60;
  border-radius: 6px;
  border: 2px solid #1a1b1d;
}
:root[data-theme="dark"] .sidebar::-webkit-scrollbar-thumb:hover,
:root[data-theme="dark"] .modal-body::-webkit-scrollbar-thumb:hover { background: #6b7077; }

/* ---------- Font size scaling ---------- */
:root[data-fontsize="small"]  { font-size: 14px; }
:root[data-fontsize="default"]{ font-size: 15px; }
:root[data-fontsize="large"]  { font-size: 17px; }

/* ---------- Resets ---------- */
*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
html {
  background: var(--color-bg-main);
  color: var(--color-text-primary);
  transition: background-color 250ms ease, color 250ms ease;
  -webkit-text-size-adjust: 100%;
}
body {
  font-family: 'DM Sans', -apple-system, "Segoe UI", Roboto, sans-serif;
  font-size: 15px;
  line-height: 1.6;
  background: var(--color-bg-main);
  color: var(--color-text-primary);
  min-height: 100vh;
  -webkit-font-smoothing: antialiased;
  /* DM Serif Display has one weight: never fake a thick bold from it. */
  font-synthesis-weight: none;
  -moz-osx-font-smoothing: grayscale;
}
img, svg { display: block; max-width: 100%; }
button { font: inherit; color: inherit; cursor: pointer; background: none; border: 0; padding: 0; }
input, textarea, select {
  font: inherit;
  color: var(--color-text-primary);
  background: var(--color-bg-card);
  border: 1px solid var(--color-border);
  border-radius: 10px;
  padding: 10px 12px;
  width: 100%;
  min-height: 44px;
}
/* Checkboxes/radios should not inherit the full-width text-input styling */
input[type="checkbox"], input[type="radio"] {
  width: auto;
  min-height: 0;
  padding: 0;
  border: 0;
  margin: 0 8px 0 0;
  display: inline-block;
  vertical-align: middle;
  accent-color: var(--color-accent-hover);
}
textarea { min-height: 80px; resize: vertical; line-height: 1.5; }
/* iPadOS/iOS draw date & time boxes at their own built-in width and, when
 * empty, a different height — wider than their column, overlapping the
 * neighbouring field and catching taps meant for it. Pin them to the column. */
input[type="date"], input[type="time"], input[type="datetime-local"] {
  -webkit-appearance: none;
  appearance: none;
  display: block;
  min-width: 0;
  max-width: 100%;
  height: 44px;
  line-height: 1.2;
}
input[type="date"]::-webkit-date-and-time-value,
input[type="time"]::-webkit-date-and-time-value,
input[type="datetime-local"]::-webkit-date-and-time-value { text-align: left; min-height: 1.2em; }
.field { min-width: 0; }
input:focus, textarea:focus, select:focus, button:focus-visible {
  outline: 2px solid var(--color-accent-2);
  outline-offset: 2px;
}
a { color: var(--color-accent-text); text-decoration: none; }
a:hover { text-decoration: underline; }
ul, ol { margin: 0; padding: 0; list-style: none; }

/* ---------- Type scale ---------- */
:root {
  --text-xs: 11px;
  --text-sm: 13px;
  --text-base: 15px;
  --text-md: 17px;
  --text-lg: 20px;
  --text-xl: 26px;
  --text-2xl: 34px;
  --text-3xl: 44px;
}
.display { font-family: 'DM Serif Display', Georgia, serif; font-weight: 400; }
.label-caps { font-size: var(--text-xs); letter-spacing: 0.08em; text-transform: uppercase; color: var(--color-text-muted); }

h1, h2, h3, h4 { margin: 0; line-height: 1.25; }
h1 { font-family: 'DM Serif Display', Georgia, serif; font-size: var(--text-xl); font-weight: 400; }
h2 { font-size: var(--text-lg); font-weight: 600; }
h3 { font-size: var(--text-md); font-weight: 600; }
p { margin: 0; }

.muted { color: var(--color-text-muted); }
.secondary { color: var(--color-text-secondary); }
.text-sm { font-size: var(--text-sm); }
.text-xs { font-size: var(--text-xs); }

.sr-only {
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0,0,0,0); white-space: nowrap; border: 0;
}
.sr-only.focus\:not-sr-only:focus,
.skip-link:focus {
  position: static; width: auto; height: auto;
  clip: auto; white-space: normal; margin: 8px;
  background: var(--color-accent-2); color: var(--color-on-accent-2);
  padding: 8px 12px; border-radius: 8px;
}

/* ---------- App shell layout ---------- */
#app {
  min-height: 100vh;
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
  width: 100%;
}
#main-content {
  flex: 1;
  width: 100%;
  max-width: 100%;
  padding: 16px;
  /* bottom nav (64px) + FAB (56px) + breathing room, so the FAB never sits on the last card */
  padding-bottom: calc(150px + env(safe-area-inset-bottom, 0px));
  min-width: 0;
}
/* Long pasted text (URLs, confirmation strings) wraps instead of pushing the page sideways */
#main-content, .modal-body { overflow-wrap: break-word; }
.tab-panel { animation: fadeSlideIn 200ms ease-out; }
.tab-panel[hidden] { display: none; }

/* Desktop sidebar layout — sidebar is position:fixed at left:0 width:240px.
 * Reserve that space with padding-left on #app, then center #main-content
 * within the remaining viewport. */
@media (min-width: 1024px) {
  #app { padding-left: 240px; }
  #main-content {
    padding: 32px 40px;
    max-width: 1200px;
    margin: 0 auto;
  }
}

/* ---------- Print ----------
 * Print only the page content: no nav, FAB, banners, toasts, filters or buttons.
 * Natural document flow so there are no blank pages. */
@media print {
  @page { margin: 14mm; }
  html, body { background: #fff !important; color: #000 !important; }
  .sidebar, .bottom-nav, .fab, #toast-stack, .modal-backdrop,
  .update-banner, .install-banner, .offline-banner, .skip-link,
  .chip-scroll, .quick-add, .no-print,
  #main-content button:not(.check-box):not(.print-keep) { display: none !important; }
  #app { display: block; padding: 0 !important; min-height: 0; }
  #main-content { padding: 0 !important; max-width: none; margin: 0; }
  .tab-panel { animation: none; }
  .card { box-shadow: none !important; border: 1px solid #bbb !important; background: #fff !important; break-inside: avoid; page-break-inside: avoid; }
  .accordion { break-inside: avoid; }
  .muted, .secondary { color: #444 !important; }
  a { color: #000; text-decoration: underline; }
  input, textarea, select { border: 0 !important; padding: 0 !important; min-height: 0 !important; background: transparent !important; }
  textarea { resize: none; }
}