/* Shared stylesheet for new hand-authored pages on trees.goinfo.co.il.
 *
 * Every page on this site grew its own <style> block, because the report
 * pages are generated self-contained (generate_dashboard.py and friends
 * write one standalone HTML file each) and the hand-written pages were
 * copied from them. The rules below are the part they all agreed on -
 * the design tokens, the portal bar + header, panels, cards, tables,
 * buttons, the print and small-screen adjustments - pulled out once so a
 * new page can link this file instead of pasting a few hundred lines.
 *
 * Usage in a new page:
 *
 *   <html lang="he" dir="rtl">
 *   <link rel="preconnect" href="https://fonts.googleapis.com">
 *   <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
 *   <link href="https://fonts.googleapis.com/css2?family=Rubik:wght@400;500;600;700&display=swap" rel="stylesheet">
 *   <link rel="stylesheet" href="/statics/assets/site.css">
 *
 * (The Rubik <link> stays in the HTML rather than becoming an @import
 * here - an @import would serialize the font request behind this file's
 * own download.) Page-specific rules go in a <style> block after the
 * link, overriding whatever they need.
 *
 * The generated report pages deliberately keep their inline copies: they
 * are also mailed and saved as standalone files, where an external
 * stylesheet would not resolve. Changing a token here does NOT change
 * them - see CLAUDE.md.
 */

/* ---------- design tokens ---------- */

:root {
    --forest-dark: #1b5e34;
    --forest: #2e7d46;
    --leaf: #4caf50;
    --leaf-light: #a5d6a7;
    --sun: #f5a623;
    --sky: #2ba8e0;
    --berry: #e05353;
    --bark: #a1725c;
    --terracotta: #e08130;
    --bg: #f2f7ee;
    --card: #ffffff;
    --ink: #24331f;
    --ink-soft: #5b6f56;
    --border: #dfe9d8;
    --shadow: rgba(27, 94, 52, 0.16);
    --shadow-soft: rgba(27, 94, 52, 0.10);
}

/* Page themes, matching the יום/לילה/זברה buttons on the report pages
   (which set data-theme on <html> and persist it in localStorage). יום is
   the default palette above. זברה is a high-contrast grayscale mode for
   color-blind and low-vision readers: pure black/white variables plus a
   grayscale filter, to also neutralize the hardcoded pastel accents and
   the header gradient. A page that links this file gets both palettes for
   free; wiring up buttons to switch between them is the page's own job. */
html[data-theme="night"] {
    --bg: #161b16; --card: #232a23; --ink: #e8eee6; --ink-soft: #a9b6a4;
    --border: #3d473c; --forest-dark: #8fce9f; --forest: #6fb583;
    --leaf-light: #3d5c46; --shadow: rgba(0,0,0,0.5); --shadow-soft: rgba(0,0,0,0.35);
}
html[data-theme="night"] .portal-bar a { background: #2f3a2e; }
html[data-theme="night"] .clear-btn { background: var(--card); }
html[data-theme="night"] .clear-btn:hover { background: #2c342b; }
html[data-theme="night"] th { background-color: #2c352b; }
html[data-theme="zebra"] {
    --bg: #ffffff; --card: #ffffff; --ink: #000000; --ink-soft: #2b2b2b;
    --border: #555555; --forest-dark: #000000; --forest: #1a1a1a;
    --leaf: #444444; --leaf-light: #bbbbbb; --terracotta: #333333;
    --shadow: rgba(0,0,0,0.4); --shadow-soft: rgba(0,0,0,0.25);
    filter: grayscale(1) contrast(1.15);
}

/* ---------- base ---------- */

* { box-sizing: border-box; }
body {
    font-family: 'Rubik', 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    background-color: var(--bg);
    color: var(--ink);
    margin: 0;
    padding: 20px;
    font-size: 17px;
    line-height: 1.65;
}
a { color: var(--sky); }
.container { max-width: 1100px; margin: 0 auto; }

/* ---------- header ---------- */

.portal-bar { text-align: center; margin-bottom: 10px; }
.portal-bar a { color: var(--forest-dark); font-size: 13px; font-weight: 500; text-decoration: none; background: #eaf3e6; padding: 6px 16px; border-radius: 999px; display: inline-block; }
.portal-bar a:hover { background: var(--leaf-light); }
header { background: linear-gradient(135deg, var(--forest-dark), var(--forest) 60%, var(--leaf)); color: #fff; padding: 22px 26px; border-radius: 18px; margin-bottom: 25px; box-shadow: 0 8px 20px var(--shadow); }
header a { color: #eafbe7; font-weight: 500; }
header a:hover { color: #fff; }
h1 { margin: 0; font-size: 28px; font-weight: 700; }
.subtitle { margin: 6px 0 0; font-size: 14px; color: #d7ecd2; }
/* Deliberately near-invisible: a provenance stamp, not page furniture. */
.page-created { color: var(--border); font-size: 10px; }

/* ---------- content blocks ---------- */

h2 { color: var(--forest-dark); border-bottom: 3px solid var(--leaf-light); padding-bottom: 8px; font-size: 20px; }
.panel { background: var(--card); padding: 22px; border-radius: 16px; box-shadow: 0 6px 16px var(--shadow-soft); margin-bottom: 25px; }
.panel h2 { margin-top: 0; }
.note, .hint { color: var(--ink-soft); font-size: 14px; margin: 0 0 15px; }

/* Stat cards: a value + label tile. Accent the top border by kind. */
.cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 20px; margin-bottom: 30px; }
.card { background: var(--card); padding: 22px; border-radius: 16px; box-shadow: 0 6px 16px var(--shadow-soft); text-align: center; border-top: 5px solid var(--leaf); }
.card.cut { border-top-color: var(--berry); }
.card.move { border-top-color: var(--sky); }
.card.keep { border-top-color: var(--sun); }
.card.meta { border-top-color: var(--bark); }
.card.canceled { border-top-color: var(--terracotta); }
.card-val { font-size: 30px; font-weight: 700; margin: 10px 0; color: var(--forest-dark); }
.card-lbl { font-size: 14px; color: var(--ink-soft); }

/* Link cards: a whole clickable tile, for navigation grids. */
.links { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(300px, 100%), 1fr)); gap: 16px; margin-top: 16px; }
.link-card { display: block; background: #f7fbf4; border: 1px solid var(--border); border-top: 5px solid var(--leaf); border-radius: 14px; padding: 16px 18px; text-decoration: none; color: inherit; }
.link-card:hover { background: #eef6ea; border-color: var(--leaf-light); box-shadow: 0 6px 16px var(--shadow-soft); }
.link-card.report { border-top-color: var(--sky); }
.link-card.map { border-top-color: var(--sun); }
.link-card.help { border-top-color: var(--bark); }
.link-title { font-weight: 600; font-size: 17px; color: var(--forest-dark); }
.link-desc { font-size: 14px; color: var(--ink-soft); margin-top: 4px; }
html[data-theme="night"] .link-card { background: #1e251e; }
html[data-theme="night"] .link-card:hover { background: #263026; }

.grid-2 { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(480px, 100%), 1fr)); gap: 25px; margin-bottom: 30px; }
footer { text-align: center; color: var(--ink-soft); font-size: 13px; margin: 30px 0 10px; }
footer a { color: var(--forest-dark); }

/* ---------- controls ---------- */

.print-btn { background: var(--forest); color: #fff; border: none; border-radius: 999px; padding: 10px 20px; font-size: 14px; font-weight: 500; cursor: pointer; margin-top: 12px; }
.print-btn:hover { background: var(--forest-dark); }
.export-btn { background: var(--sky); color: #fff; border: none; border-radius: 10px; padding: 10px 18px; font-size: 14px; font-weight: 500; cursor: pointer; }
.export-btn:hover { background: #218cb8; }
.clear-btn { padding: 10px 14px; border: 2px solid var(--border); border-radius: 10px; font-size: 14px; background: #fff; color: var(--ink-soft); cursor: pointer; }
.clear-btn:hover { background: #f7fbf4; border-color: var(--leaf-light); color: var(--forest-dark); }
.tabs { display: flex; flex-wrap: wrap; gap: 8px; margin: 10px 0 15px; }
.tab-btn { background: #eaf3e6; border: none; border-radius: 999px; padding: 9px 18px; font-size: 14px; font-weight: 500; color: var(--forest-dark); cursor: pointer; }
.tab-btn:hover { background: var(--leaf-light); }
.tab-btn.active { background: var(--forest); color: #fff; }
.tab-panel { display: none; }
.tab-panel.active { display: block; }
html[data-theme="night"] .tab-btn { background: #2f3a2e; }

/* ---------- tables ---------- */

.table-scroll { overflow: auto; -webkit-overflow-scrolling: touch; position: relative; max-height: 70vh; }
table { width: 100%; border-collapse: collapse; margin-top: 15px; }
th, td { padding: 12px 14px; text-align: right; border-bottom: 1px solid var(--border); font-size: 15.5px; }
th { background-color: #eef5ea; color: var(--forest-dark); font-weight: 600; white-space: nowrap; }
th[onclick] { cursor: pointer; user-select: none; }
tr:hover { background-color: #f7fbf4; }
html[data-theme="night"] tr:hover { background-color: #2c342b; }

/* ---------- print / small screens ---------- */

@media print {
    .print-btn, .portal-bar { display: none !important; }
    body { background: #fff; padding: 0; }
    .card, .panel { box-shadow: none; }
}
@media (max-width: 640px) {
    body { padding: 10px; font-size: 16px; }
    header { padding: 16px 18px; border-radius: 14px; }
    .panel, .card { padding: 14px; border-radius: 12px; }
    .cards { gap: 12px; }
    th, td { padding: 8px; }
    th { white-space: normal; }
}
