/* =====================================================================================
   THEME: the one place to change how the whole BackOffice looks.
   Change a value here and every page that uses it changes with it.
   Loaded last (index.html), so these win over the older style files.
   The design guide explains each knob in plain words.

   NAMES FOR THE PARTS OF A PAGE (John 2026-10-23; use these words in code comments, messages and requests):
     Main menu    the side menu with Home, Calendar, Guests ... Admin (.side; on phones the bar of icons)
     Page banner  the page title on the left, action buttons on the right (Note, Money, Task, Guest, search, bell, you) (.tb)
     Nav bar      the row of sub-section pills on every page (.secnav)
     Widgets      everything else on the page (.widget and the cards inside the page)
     Today bar    the "Today at the Park" strip with the weather, the same on every page that shows it (--today-bg)
   ===================================================================================== */
:root{
  /* 1. PAGE: the paper, the ink and the lines */
  --bg:#eef0f7;          /* page background behind the cards (soft lavender gray) */
  --card:#fff;           /* cards, widgets, pop-ups, menus */
  --ink:#1b2140;         /* main text */
  --muted:#5e6d7f;       /* small gray text under titles, hints */
  --ink-2:color-mix(in srgb,var(--ink) 72%,var(--muted));   /* menu and Nav bar text: between main text and gray (follows the theme) */
  --line:#e6e8f2;        /* thin divider lines and borders */
  --on-color:#fff;       /* text and icons sitting on a colored button */
  --qr-ink:var(--ink);   /* QR codes: always dark squares on a light box, so any camera reads them */
  --qr-paper:var(--card);
  --soft:#f1f3f8;        /* quiet fill: tabs, hover, light boxes */
  --hover:#f4f5fb;       /* menu and list rows under the mouse */
  --bar-bg:#cddcf4;      /* Today bar and every Nav bar: a blue that stands out from the page */
  --bar-line:#a9c0e6;    /* their outline */
  --today-bg:var(--bar-bg);   /* Today bar (Today at the Park + weather) */

  /* 2. LOGO COLORS */
  --brand:#1d3658;       /* logo navy */
  --orange:#e9833a;      /* logo orange dot; temperature line on charts */
  --accent:#e9833a;      /* same orange, older name */

  /* 3. PASTEL ACCENTS (the SchoolHub look) */
  --sky:#cdeaf9;         /* "you are here": selected menu item, selected day, selected tab */
  --lav:#d6d4fb;         /* light lavender: small card buttons (See all, Edit) */
  --lav-d:#a5a1f5;       /* lavender: top-bar buttons (+ Note, + Task), Add shift, today ring */
  --lav-dd:#7f79e8;      /* strong lavender: Add buttons on pages, chosen chips */
  --add:var(--lav-dd);   /* every Add button: top bar (+ Note, + Task...) and page Add buttons (John 2026-10-25) */
  --sun:#f8e08a;         /* sunny yellow accent */
  --navy:#1b2140;        /* darkest buttons (same as main text) */

  /* 4. SIGNAL COLORS: good, careful, bad, info */
  --ok:#16a34a;          /* good / done */
  --ok-d:#15803d;        /* good text on a light green tag */
  --amber:#d97706;       /* careful / due soon */
  --warn:#b4531a;        /* error messages, danger buttons */
  --red:#dc2626;         /* bad / overdue / alert badges */
  --red-soft:#fdecec;    /* light red box behind a problem */
  --info:#1d6fd8;        /* information blue */
  --you:#006be6; --you-ring:#ffffff;   /* "you are here" dot on park walks (Style 2026-10-26): its own blue, apart from --info (the Next stop) */
  --info-soft:#e8f1fd;   /* light blue box behind information */
  --blue:#2563eb;        /* links, "More" */
  --teal:#0891b2;
  --slate:#64748b;       /* idle / past gray */
  --slate-l:#94a3b8;     /* light gray: empty, vacant */
  --tbd:#fff3b0;         /* yellow highlight for "to be decided" */

  /* 5. ITEM COLORS: one color per kind of thing, everywhere (cards, dots, stat cards, charts).
        --c-<kind> is the light card background, --c-<kind>-d is the strong color for text, icons, bars. */
  --c-arrive:#dcebfc;   --c-arrive-d:#1d6fd8;    /* arriving guest */
  --c-leave:#fdeacc;    --c-leave-d:#e9833a;     /* leaving guest */
  --c-late-dot:#c2410c;    /* late-report dot, 3:1 on light cards */
  /* chart series colors (Style 2026-10-28): 7 categorical, each 3:1 or better on the card; direct labels always, never color alone */
  --ch-1:#1d6fd8; --ch-2:#c2410c; --ch-3:#0f7a55; --ch-4:#7c3aed; --ch-5:#a16207; --ch-6:#be185d; --ch-7:#0e7490;
  --c-activity:#e4e2fc; --c-activity-d:#5b54d6;  /* bookings, new guests, other activities */
  --c-task:#d9f2f5;     --c-task-d:#0891b2;      /* tasks */
  --c-note:#fbf0c8;     --c-note-d:#b7791f;      /* office notes */
  --c-alert:#fde4e4;    --c-alert-d:#dc2626;     /* alerts */
  --c-shift:#fbe3f0;    --c-shift-d:#db2777;     /* staff shifts */
  --c-event:#dcf5e3;    --c-event-d:#15803d;     /* events nearby */
  --c-anniv:#fdf3d8;    --c-anniv-d:#a16207;     /* stay anniversaries (gold) */
  --c-problem:#f6e3d4;  --c-problem-d:#9a3412;    /* reported problems */
  --c-money:#e8f3d6;    --c-money-d:#4d7c0f;     /* money log, end of day count */

  /* 6. SECTION COLORS: each menu section's own color (its main buttons, its charts unless a chart has its own color).
        --pc-<section> strong, --pcl-<section> light. */
  --pc-home:#1d3658;    --pcl-home:#e8edf4;
  --pc-office:#0e7490;  --pcl-office:#e0f4f8;   /* Calendar */
  --pc-res:#1d6fd8;     --pcl-res:#e8f1fd;      /* Guests */
  --pc-park:#0f766e;    --pcl-park:#e2f5f3;
  --pc-work:#15803d;    --pcl-work:#e7f6ec;
  --pc-money:#a16207;   --pcl-money:#fdf6e0;
  --pc-biz:#9333ea;     --pcl-biz:#f3e8ff;      /* Business */
  --pc-library:#b95309; --pcl-library:#fdf0e3;
  --pc-admin:#475569;   --pcl-admin:#eef0f4;

  /* 7. STAY COLORS: who is on a site (site map, occupancy bar, keys) */
  --stay-monthly:#2563eb;
  --stay-nightly:#16a34a;
  --stay-reserved:#d97706;
  --stay-park:#7c3aed;   /* park use / staff */
  --stay-storage:#9333ea;
  --stay-vacant:#94a3b8;
  /* map color for each kind of site (Admin › Site types), only shown in the map's Kind of site view */
  --type-1:#0d9488; --type-2:#d97706; --type-3:#7c3aed; --type-4:#2563eb; --type-5:#db2777; --type-6:#65a30d;
  /* Park map ground (Park > Park map). Dark themes dim these so the map isn't a bright patch */
  --map-bg:#b2e29d;      /* around the map */
  --map-grass:#cfe9b8;   /* the grass */
  --map-ink:#3f5a2a;     /* "Green space" and row labels on the grass */
  --map-road:#fff;       /* roads between rows */
  --map-lot:#9aa3ad;     /* covered storage lot */
  --map-hwy:#8b939c;     /* the highway strip */
  /* Park Map Studio fills (maps drawn from data, mapdata.js) */
  --map-water:#a8d8f0; --map-sand:#efe1b5; --map-woods:#a7cf8a; --map-tree:#6aa84f; --map-tree-hi:#8cc56f; --map-path:#efe7d2; --map-pave:#dfe3e8;
  --map-edge:rgba(0,0,0,.18); --map-red:#dc2626; --map-purple:#d8c7fb; --map-orange:#d79a55; --map-tan:#e6dcbf; --map-gray:#9ca3af; --map-blue:#93c5fd; --map-white:#ffffff;

  /* 8. SHAPES */
  --radius:16px;         /* tables, small cards */
  --r-card:22px;         /* widgets (the white cards) */
  --btn-r:12px;          /* every action button's corners */
  --shadow:0 4px 18px rgba(40,55,100,.07);   /* soft float under cards */

  /* 9. SIZES */
  --tb-h:44px;           /* top-bar buttons (phones: 40px, below) */
}
@media (max-width:699px){:root{--tb-h:40px}}

/* =====================================================================================
   SCREEN SIZES: the same three widths on every page (John 2026-10-23).
   (CSS cannot use variables inside @media, so copy these exact numbers.)
     Phone    @media (max-width:699px)                       one column; every widget full width, stacked top to bottom
     Tablet   @media (min-width:700px) and (max-width:1199px) icon menu; widgets in up to 2 columns
     Desktop  @media (min-width:1200px)                      full menu + right column; widgets in 2 to 4 columns
   Extra step already in use: under 900px the calendar and Upcoming move above the page.
   Every UI change is checked at 390, 800 and 1300px wide. Content moves or stacks to fit;
   the page never scrolls sideways (only wide tables and the park map scroll inside their own box).
   ===================================================================================== */

/* ---------------------------------------------------------------------------------
   BUTTON SIZES: three sizes, used everywhere (John 2026-10-23).
   Small = buttons inside a card or bar (See all, Edit, Today, section pills, chips).
   Normal = ordinary buttons (forms, Admin, top bar).
   Big = full-width action buttons and pop-up choices (Save, Start, Resolve).
   Not included on purpose: the calendar navigator's own compact controls, the meter
   reading screens (extra-big keys for walking the park), the park map tiles, cards and menu rows.
   --------------------------------------------------------------------------------- */
:root{
  --btn-h-sm:38px;  --btn-fs-sm:14px;     /* small button: height, text size */
  --btn-h:44px;     --btn-fs:15px;        /* normal button */
  --btn-h-lg:54px;  --btn-fs-lg:16px;     /* big button */
  --tb-h:var(--btn-h);                    /* top bar uses the normal size */
}
@media (max-width:699px){:root{--tb-h:40px}}
/* small */
.xbtn,.secnav .sn-p,.secnav .sn-more,.sn-menu .sn-mi,.pchip{min-height:var(--btn-h-sm);padding-top:0;padding-bottom:0;font-size:var(--btn-fs-sm)}
button.chip,.see,.ptab,.fixbtn,.infobtn.more{min-height:var(--btn-h-sm);font-size:var(--btn-fs-sm);line-height:1.45;padding-top:calc((var(--btn-h-sm) - 1lh) / 2 - 1.5px);padding-bottom:calc((var(--btn-h-sm) - 1lh) / 2 - 1.5px)}
.ofnav .ar{width:var(--btn-h-sm);height:var(--btn-h-sm)}
/* normal */
:is(button,.button):is(:not([class]),[class=""],.primary,.danger,.on,.previewing):not(.huge,.link,.chip,.sn-p,.sn-more,.sn-mi,.ptab,.xbtn,.see,.btnw,.opt,.ar,.d,.tdy,.fixbtn,.infobtn):not(.wiz *,#auth *,.wks *,.cal *,.qd *,.calnav *,.tsz *,.keypad *,.pmap *,.mapbar *,.sheetask *),
.mpick button,.mpanes button,.linkgrid button{min-height:var(--btn-h);font-size:var(--btn-fs);line-height:1.45;padding-top:calc((var(--btn-h) - 1lh) / 2 - 1px);padding-bottom:calc((var(--btn-h) - 1lh) / 2 - 1px)}
.mapbar button,.mapbar .button{min-height:var(--btn-h);padding-top:0;padding-bottom:0;font-size:var(--btn-fs)}
/* big */
.btnw,.sheet .opt{min-height:var(--btn-h-lg);padding-top:0;padding-bottom:0;font-size:var(--btn-fs-lg)}

/* ---------------------------------------------------------------------------------
   CHARTS: bars take the color of what they count (an item color), set by the page code
   as --chart. A chart with no item of its own uses its section color.
   --------------------------------------------------------------------------------- */
:root{
  --c-energy:#f3e8ff; --c-energy-d:#9333ea;   /* electricity used (meter charts) */
}
.chart rect.bar{fill:var(--chart,var(--pc))}
.chartkey span{background:var(--chart,var(--pc))}.chartkey .k-empty{background:var(--muted);margin-left:12px}.chart rect.bar.other{fill:var(--muted)}
.hbars .hbar i{background:var(--chart,var(--pc))}

/* Today bar and Nav bars share one color with an outline, so they stand out from the page (John 2026-10-23).
   The chosen pill turns white so it still shows on the blue. */
.secnav,.dstrip{background:var(--bar-bg);box-shadow:inset 0 0 0 1px var(--bar-line)}
.secnav .sn-p.on{background:var(--card)}

/* On/off switch row (ui.js toggleRow): the whole row is tappable; the switch turns the section color when on. */
.tgl{display:flex;align-items:center;justify-content:space-between;gap:12px;min-height:var(--btn-h);margin:10px 0;padding:8px 12px;border:1px solid var(--line);border-radius:var(--btn-r);background:var(--card);cursor:pointer}
.tgl>span{display:flex;flex-direction:column;min-width:0}
.tgl b{font-weight:700;color:var(--ink)}
.tgl small{color:var(--muted)}
.tgl input{position:absolute;opacity:0;width:1px;height:1px;margin:0;pointer-events:none}
.tgl i{flex:none;position:relative;width:46px;height:28px;border-radius:14px;background:var(--line);transition:background .15s}
.tgl i::after{content:"";position:absolute;top:3px;left:3px;width:22px;height:22px;border-radius:50%;background:var(--tgl-knob-off,var(--card));box-shadow:0 1px 3px rgba(0,0,0,.25);transition:transform .15s}
.tgl input:checked+i{background:var(--pc,var(--ok))}
.tgl input:checked+i::after{transform:translateX(18px);background:var(--card)}   /* off knob: --tgl-knob-off (dark themes: --muted, so it shows on the dark track) */
.tgl input:focus-visible+i{outline:2px solid var(--info);outline-offset:2px}

/* Finishing an item (note, task, alert, problem) is always a green "Mark done" button with a check (John 2026-10-23).
   "Close" only ever leaves a pop-up. A finish shows a 6-second toast with Undo instead of asking "are you sure". */
:root{--done:var(--ok-d)}
.btnw.markdone{background:var(--done);border-color:var(--done);color:var(--on-color)}
.toast .tundo{margin-left:10px;padding:4px 12px;min-height:0;border:0;border-radius:var(--btn-r);background:var(--sky);color:var(--ink);font:inherit;font-weight:700;cursor:pointer}
.toast{z-index:1000;display:flex;align-items:center;width:max-content;max-width:calc(100vw - 32px)}.toast[hidden]{display:none}

/* Negative money (format.js moneyHtml): red, like an accountant's ledger (Style 2026-10-25). */
.neg{color:var(--red)}

/* Notices (bell "Needs attention", weather warnings) use the standard card shape: no colored left edge (John 2026-10-23).
   An urgent item takes the problem color, like everywhere else. */
.al{border:0;border-radius:16px}
.al.urgent{background:var(--c-problem)}.al.urgent .ico{color:var(--c-problem-d)}

/* One field height (John 2026-10-25): every one-line box and every dropdown on a screen is the same height.
   Pages: --field-h (44, like a normal button). Pop-ups: --field-h-lg (54, like their big buttons).
   Dropdowns draw their own chevron so Safari and iOS honor the height. Meter screens, the map tools and
   the money pair keep their own sizes on purpose. */
:root{--field-h:var(--btn-h);--field-h-lg:var(--btn-h-lg)}
input:where(:not([type=checkbox],[type=radio],[type=range],[type=color],[type=file],[type=hidden],[type=button],[type=submit])),select{box-sizing:border-box;height:var(--field-h);padding:0 12px;font-size:16px;border:1px solid var(--line);border-radius:var(--btn-r);background-color:var(--card);color:var(--ink)}
select{-webkit-appearance:none;appearance:none;padding-right:36px;background-image:linear-gradient(45deg,transparent 50%,var(--muted) 50%),linear-gradient(135deg,var(--muted) 50%,transparent 50%);background-position:calc(100% - 19px) 50%,calc(100% - 14px) 50%;background-size:5px 5px;background-repeat:no-repeat}
.sheet input:where(:not([type=checkbox],[type=radio],[type=range],[type=color],[type=file],[type=hidden],[type=button],[type=submit])),.sheet select{height:var(--field-h-lg);padding-top:0;padding-bottom:0;font-size:18px}
.sheet select{padding-right:36px}
.padsel select{height:auto}   /* the meter reading screen keeps its big picker */

/* Text boxes (textarea) match the one-line boxes everywhere; pop-ups keep their bigger size */
textarea{box-sizing:border-box;width:100%;font:inherit;font-size:16px;padding:10px;border:1px solid var(--line);border-radius:8px;background:var(--card);color:var(--ink);resize:vertical}
a:not([class]){color:var(--info)}   /* plain text links follow the theme */

/* SPACE (John 2026-10-24): "be considerate of space everywhere... excessive padding for the sake of padding needs to go."
   Containers hug their content; only tap targets keep their sizes (38 / 44 / 54). Card label columns are as wide as their text. */
.xw{padding:16px 18px}
.xwh{margin-bottom:10px}
@media (max-width:699px){.xw{padding:14px}}
.lr{padding:10px 0}
.ag{padding:10px 12px}
.st{padding:12px 14px 14px}
.st .sth{margin-bottom:8px}
.st .stf{margin-top:8px}
.st .dn{width:72px;height:72px}
.sheet{padding:18px 16px calc(18px + env(safe-area-inset-bottom))}
.widget{padding:16px}
.card.d{padding:16px}
#tab-biz-guests .widgets,#tab-biz-revenue .widgets,#tab-biz-work .widgets,#tab-biz-occupancy .widgets{margin-bottom:14px}
@media (max-width:699px){.widget,.card.d{padding:14px}}
/* The chosen tab and switch side get an outline in dark themes so they stand out from the bar (--pick-line, none in light themes) */
.secnav .sn-p.on,.segsw input:checked+span{box-shadow:inset 0 0 0 1px var(--pick-line,transparent)}
/* --new: the "new here" dot and New tag (John 2026-10-26). Set per theme in schema/themes.json: deep orange on light themes, bright orange on dark, 3.8:1 or better on every bar and card */

/* Add another (ui.js repeatGroup): one small card per item, fields in a wrapping row, red outline trash, Add below. */
.rg{display:flex;flex-direction:column;gap:10px;margin:10px 0}
.rgc{padding:8px 12px 12px;border:1px solid var(--line);border-radius:var(--btn-r);background:var(--card)}
.rgh{display:flex;align-items:center;justify-content:space-between;gap:8px;min-height:var(--btn-h-sm)}
.rgh b{color:var(--ink);font-weight:700}
.rgdel{display:inline-grid;place-items:center;width:var(--btn-h);height:var(--btn-h);margin:-4px -8px -4px 0;padding:0;border:0;border-radius:var(--btn-r);background:none;color:var(--red);cursor:pointer}
.rgdel:hover{background:var(--red-soft)}.rgdel:focus-visible{outline:2px solid var(--red);outline-offset:-2px}.rgdel .ico{width:20px;height:20px}
.rgf{display:flex;flex-wrap:wrap;gap:8px 10px}
.rgf label{display:block;margin:0;min-width:0}.rgf input{display:block;width:100%;margin-top:4px;min-height:var(--btn-h)}
.rgf .rg-s{flex:1 1 90px}.rgf .rg-m{flex:2 1 150px}.rgf .rg-l{flex:1 1 100%}
.rg-add[hidden]{display:none}
.toplist li.tap{cursor:pointer}.toplist li.tap:hover{background:var(--hover)}.toplist li.tap b{display:inline-flex;align-items:center;gap:4px}.toplist .st-late{color:var(--c-alert-d)}
.fit .chart svg{height:auto}

/* Fold (Style 2026-10-28): the body under a fold head slides open and shut in place; scroll never moves. */
.fold{display:grid;grid-template-rows:0fr;opacity:0;transition:grid-template-rows .22s ease,opacity .22s ease;overflow-anchor:none}
.fold[data-open]{grid-template-rows:1fr;opacity:1}
.fold>.fold-in{min-height:0;overflow:hidden}
.fold:not([data-open])>.fold-in{visibility:hidden;transition:visibility 0s .22s}
.fold-h .fold-chev,.fold-h .hm-chev,.fold-h .ltchev{transition:transform .22s ease}
.fold-h[data-open] .fold-chev,.fold-h[data-open] .hm-chev{transform:rotate(90deg)}
@media (prefers-reduced-motion:reduce){.fold,.fold>.fold-in,.fold-h .fold-chev,.fold-h .hm-chev,.fold-h .ltchev{transition:none!important}}