/* Godzila workspace — consolidated stylesheet.
   Every rule is scoped under .gz-root (+ a component root class) so components stay isolated
   without scope attributes. Loaded once via App.razor. This file currently holds only the
   scaffold (design tokens + shell/disabled states); component rules are appended here as the
   workspace is built, so keep the .gz-root token block in sync with upstream. */

.gz-root {
    --gz-pri: #4c3bcf;
    --gz-pri-d: #3a2ca6;
    --gz-pri-l: #ece9fb;
    --gz-border: #e4e4e9;
    --gz-line: #eef0f3;
    --gz-txt: #23262f;
    --gz-muted: #74747f;
    --gz-bg: #f1f1f5;
    --gz-green: #15803d;
    --gz-green-bg: #e7f6ec;
    --gz-amber: #b45309;
    --gz-amber-bg: #fdf2da;
    --gz-red: #b3261e;
    --gz-red-bg: #fbe9e7;
    --gz-teal: #0d7d8c;
    --gz-teal-bg: #e3f3f4;
    --gz-blue: #2563eb;

    /* Zdroj ponuky. Travelco (naše CK) koralová, TravelData tyrkysová — dva zdroje niesli jeden
       a ten istý tyrkysový štítok, takže sa dali rozoznať iba čítaním textu. */
    --gz-coral: #c2410c;
    --gz-coral-bg: #fdeee6;

    --gz-brand: var(--gz-pri);
    --gz-ok: var(--gz-green);
    --gz-warn: var(--gz-amber);
    --gz-danger: var(--gz-red);
    --gz-info: var(--gz-teal);

    font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
    font-size: 13px;
    color: var(--gz-txt);
    -webkit-font-smoothing: antialiased;
    background: var(--gz-bg);

    margin: -1rem;
    border-radius: 0;
    padding: 0.6rem 0.9rem 1rem;
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
}

.gz-root .gz-panel {
    padding: 0.6rem 0.75rem;
}

/* ==== Workspace: destinations | hotels ==== */
.gz-root .gz-workspace {
    display: grid;
    grid-template-columns: minmax(180px, 240px) minmax(0, 1fr) minmax(280px, 380px);
    gap: 0.6rem;
    align-items: start;
}
@media (max-width: 1400px) {
    /* Detail drops under the table before it gets squeezed to unreadable. */
    .gz-root .gz-workspace {
        grid-template-columns: minmax(180px, 240px) minmax(0, 1fr);
    }
    .gz-root .gz-pane-detail { grid-column: 1 / -1; }
}
@media (max-width: 900px) {
    .gz-root .gz-workspace { grid-template-columns: minmax(0, 1fr); }
    .gz-root .gz-pane-detail { grid-column: auto; }
}

.gz-root .gz-pane {
    background: #fff;
    border: 1px solid var(--gz-border);
    border-radius: 9px;
    padding: 0.5rem 0.6rem 0.6rem;
    /* min-width:0 keeps the grid from overflowing when a hotel name is long. */
    min-width: 0;
}
.gz-root .gz-pane-locations {
    max-height: 30rem;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

/* Capped like its siblings: a destination can return several hundred hotels, and an uncapped
   table pushed the terms section a full screen-height below the fold (found in the browser —
   the layout looks fine until real data arrives). */
.gz-root .gz-pane-hotels {
    max-height: 30rem;
    overflow-y: auto;
}

.gz-root .gz-pane-title {
    font-weight: 600;
    font-size: 12.5px;
    color: var(--gz-muted);
    text-transform: uppercase;
    letter-spacing: 0.03em;
    padding: 0 0 0.4rem;
}
.gz-root .gz-pane-context {
    font-weight: 400;
    text-transform: none;
    letter-spacing: 0;
    color: var(--gz-txt);
}

/* ==== Destination row ==== */
.gz-root .gz-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    grid-template-areas: "main price" "sub price";
    gap: 0 0.5rem;
    align-items: center;
    width: 100%;
    text-align: left;
    background: none;
    border: 1px solid transparent;
    border-radius: 7px;
    padding: 0.35rem 0.5rem;
    cursor: pointer;
    font: inherit;
    color: inherit;
}
.gz-root .gz-row:hover { background: var(--gz-line); }
.gz-root .gz-row.on {
    background: var(--gz-pri-l);
    border-color: var(--gz-pri);
}
.gz-root .gz-row-main { grid-area: main; font-weight: 600; }
.gz-root .gz-row-sub { grid-area: sub; font-size: 11.5px; color: var(--gz-muted); }
.gz-root .gz-row-price { grid-area: price; font-weight: 600; white-space: nowrap; }

.gz-root .gz-hotel-name { font-weight: 600; }

/* ==== Detail pane. Capped and scrollable so the embedded hotel detail (tabs, gallery, reviews)
   cannot push the terms section off the screen. ==== */
.gz-root .gz-pane-detail {
    max-height: 30rem;
    overflow-y: auto;
}
/* The embedded component brings the admin pages' own type scale; keep it from inheriting
   Godzila's 13px base so its tabs and tables stay legible. */
.gz-root .gz-detail-body {
    font-size: 14px;
}

/* ==== Source badge. Travelco coral, TravelData teal — one shared colour meant the two
   sources could only be told apart by reading the label. ==== */
.gz-root .gz-src {
    display: inline-block;
    margin-left: 0.4rem;
    padding: 1px 6px;
    border-radius: 999px;
    font-size: 10.5px;
    font-weight: 600;
    white-space: nowrap;
}
.gz-root .gz-src-travelco { background: var(--gz-coral-bg); color: var(--gz-coral); }
.gz-root .gz-src-traveldata { background: var(--gz-teal-bg); color: var(--gz-teal); }
.gz-root .gz-src-both { background: var(--gz-pri-l); color: var(--gz-pri-d); }

/* ==== Completeness notices ==== */
.gz-root .gz-notice {
    display: flex;
    align-items: baseline;
    gap: 0.4rem;
    padding: 0.35rem 0.55rem;
    border-radius: 7px;
    background: var(--gz-line);
    color: var(--gz-muted);
    font-size: 12px;
}
.gz-root .gz-notice-warn {
    background: var(--gz-amber-bg);
    color: var(--gz-amber);
}
.gz-root .gz-notice-icon { font-size: 12px; }

/* ==== TravelData hotel detail (rows with no internal catalogue entry) ==== */
.gz-root .gz-detail-note {
    font-size: 11.5px;
    color: var(--gz-muted);
    padding: 0 0 0.4rem;
}
.gz-root .gz-td-detail { display: flex; flex-direction: column; gap: 0.5rem; }
.gz-root .gz-td-head { display: flex; align-items: center; flex-wrap: wrap; gap: 0.35rem; }
.gz-root .gz-td-name { font-weight: 600; }
.gz-root .gz-td-rating { color: var(--gz-amber); font-size: 12px; }

.gz-root .gz-td-operators { display: flex; flex-wrap: wrap; gap: 0.3rem; }
.gz-root .gz-td-op {
    display: inline-flex;
    align-items: center;
    min-height: 1.9rem;
    padding: 0.15rem 0.4rem;
    background: #fff;
    border: 1px solid var(--gz-border);
    border-radius: 7px;
    font: inherit;
    font-size: 11.5px;
    color: var(--gz-muted);
    cursor: pointer;
}
.gz-root .gz-td-op:hover:not(:disabled) { background: var(--gz-line); }
.gz-root .gz-td-op.on { border-color: var(--gz-teal); background: var(--gz-teal-bg); color: var(--gz-teal); }
.gz-root .gz-td-op:disabled { opacity: 0.6; cursor: default; }
.gz-root .gz-td-op-logo { height: 1.2rem; width: auto; display: block; }

/* Definition list as a two-column grid: label left, value right, wrapping cleanly in a narrow pane. */
.gz-root .gz-td-facts {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    gap: 0.1rem 0.6rem;
    margin: 0;
    font-size: 12px;
}
.gz-root .gz-td-facts dt { color: var(--gz-muted); }
.gz-root .gz-td-facts dd { margin: 0; overflow-wrap: anywhere; }

/* Feed-authored HTML, sanitized at the mapping boundary. Capped so a long operator description
   cannot push the gallery and the rest of the workspace off screen. */
.gz-root .gz-td-description {
    font-size: 12px;
    line-height: 1.45;
    max-height: 12rem;
    overflow-y: auto;
    border-top: 1px solid var(--gz-line);
    padding-top: 0.4rem;
}
.gz-root .gz-td-description p { margin: 0 0 0.4rem; }
.gz-root .gz-td-description ul { margin: 0 0 0.4rem; padding-left: 1.1rem; }

/* ==== Client conditions ==== */
.gz-root .gz-prefs { display: flex; flex-direction: column; gap: 0.5rem; }
.gz-root .gz-prefs-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.6rem;
}
.gz-root .gz-prefs-actions { display: flex; gap: 0.3rem; }
.gz-root .gz-prefs-cat { display: flex; flex-direction: column; gap: 0.25rem; }
.gz-root .gz-prefs-cat-name {
    font-size: 11px;
    font-weight: 600;
    color: var(--gz-muted);
    text-transform: uppercase;
    letter-spacing: 0.03em;
}
.gz-root .gz-prefs-tags { display: flex; flex-wrap: wrap; gap: 0.35rem; }

.gz-root .gz-tag {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0.2rem 0.4rem 0.2rem 0.55rem;
    border: 1px solid var(--gz-border);
    border-radius: 999px;
    background: #fff;
}
.gz-root .gz-tag.on { border-color: var(--gz-pri); background: var(--gz-pri-l); }
.gz-root .gz-tag-label { display: inline-flex; align-items: center; gap: 0.3rem; }

/* Says out loud that a condition cannot be answered from data, rather than hiding the tag. */
.gz-root .gz-tag-unmapped {
    font-size: 9.5px;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    color: var(--gz-muted);
    border: 1px dashed var(--gz-border);
    border-radius: 999px;
    padding: 0 4px;
}
.gz-root .gz-tag-num { width: 5.5rem; }
.gz-root .gz-tag-unit { font-size: 11px; color: var(--gz-muted); }

.gz-root .gz-tag-groups { display: inline-flex; gap: 2px; }
.gz-root .gz-tag-group {
    width: 1.35rem;
    height: 1.35rem;
    border: 1px solid var(--gz-border);
    border-radius: 50%;
    background: #fff;
    color: var(--gz-muted);
    font: inherit;
    font-size: 12px;
    line-height: 1;
    cursor: pointer;
}
.gz-root .gz-tag-group:hover { background: var(--gz-line); }
.gz-root .gz-tag-group.on {
    background: var(--gz-pri);
    border-color: var(--gz-pri);
    color: #fff;
    font-weight: 700;
}

.gz-root .gz-prefs-summary { display: flex; flex-wrap: wrap; gap: 0.3rem; }
.gz-root .gz-chip {
    font-size: 11.5px;
    padding: 1px 8px;
    border-radius: 999px;
    background: var(--gz-line);
    color: var(--gz-txt);
}
.gz-root .gz-chip-must { background: var(--gz-pri-l); color: var(--gz-pri-d); font-weight: 600; }
.gz-root .gz-chip-avoid { background: var(--gz-red-bg); color: var(--gz-red); }

/* Match against the client's conditions. */
.gz-root .gz-match { display: inline-flex; align-items: baseline; gap: 0.3rem; white-space: nowrap; }
.gz-root .gz-match-rank { font-size: 11px; color: var(--gz-muted); }
.gz-root .gz-match-none { color: var(--gz-muted); }

/* "Not enough data" is muted and italic, never a low percentage and never red: it is the absence of
   a measurement, not a poor one. */
.gz-root .gz-match-nodata {
    font-size: 11.5px;
    font-style: italic;
    color: var(--gz-muted);
}

/* Condition standing. The three counts are coloured apart on purpose: unknown must not read as a
   miss, so it never borrows the red. */
.gz-root .gz-cond { display: inline-flex; gap: 0.4rem; white-space: nowrap; font-size: 12px; }
.gz-root .gz-cond-none { color: var(--gz-muted); }
.gz-root .gz-cond-met { color: var(--gz-green); font-weight: 600; }
.gz-root .gz-cond-unmet { color: var(--gz-red); font-weight: 600; }
.gz-root .gz-cond-unknown { color: var(--gz-muted); }
.gz-root .gz-cond-pref { color: var(--gz-teal); }
.gz-root .gz-cond-avoid { color: var(--gz-amber); }

/* ==== Verification ==== */
.gz-root .gz-terms-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.6rem;
}

.gz-root .gz-verify-cell {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    white-space: nowrap;
}

/* Detail of a failed attempt: small and muted, because it describes our failure, not the offer. */
.gz-root .gz-verify-detail {
    font-size: 11px;
    color: var(--gz-muted);
    max-width: 13rem;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Verdict colours. gz-warn covers both "on request" and "the operator did not answer": neither is
   a no, and neither may borrow the colour that means no. */
.gz-root .gz-ok { color: var(--gz-green); font-weight: 600; }
.gz-root .gz-warn { color: var(--gz-amber); font-weight: 600; }
.gz-root .gz-danger { color: var(--gz-red); font-weight: 600; }
.gz-root .gz-muted { color: var(--gz-muted); }

/* ==== Neutral empty state. Muted, never red: an empty pane is not a negative verdict. ==== */
.gz-root .gz-empty {
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
    padding: 1rem 0.5rem;
    color: var(--gz-muted);
    font-size: 12.5px;
}
.gz-root .gz-empty-hint { font-size: 11.5px; opacity: 0.85; }

/* Flag-off state. Deliberately outside .gz-root: the disabled page must not adopt the
   workspace's negative margin and full-bleed background. */
.gz-disabled {
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
    padding: 1rem 0;
}

/* Weather for the searched term, and the year-round climate strip, in the hotel detail pane.
   Ported from datastage with the panel selector rewritten: that repo's pane is .gz-detail-panel,
   ours is .gz-pane-detail, so the rules would have matched nothing as written.
   The colour bands are a fast visual read only - every cell keeps its number, so nothing depends
   on telling two shades apart. */
/* Počasie na termín v detaile hotela (owner 29.07.) — kompaktný riadok pod status barom. */
.gz-root .gz-pane-detail .gz-hd-weather {
    margin: .4rem 0 0;
    padding: .45rem .65rem;
    background: #f0f7fb;
    border: 1px solid #d7e9f4;
    border-radius: .5rem;
    font-size: .82rem;
    color: #1f4e66;
}
.gz-root .gz-pane-detail .gz-hd-weather-head {
    display: flex;
    align-items: baseline;
    flex-wrap: wrap;
    gap: .3rem .5rem;
    margin-bottom: .3rem;
}
.gz-root .gz-pane-detail .gz-hd-weather-title {
    font-weight: 700;
    color: #14384a;
}
.gz-root .gz-pane-detail .gz-hd-weather-mode {
    font-size: .7rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .02em;
    color: #3982ab;
    background: #dceef8;
    border-radius: .3rem;
    padding: .05rem .35rem;
}
.gz-root .gz-pane-detail .gz-hd-weather-period {
    font-size: .72rem;
    color: #5b7c8d;
}
.gz-root .gz-pane-detail .gz-hd-weather-items {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: .25rem .9rem;
}
.gz-root .gz-pane-detail .gz-hd-weather-warn {
    margin-top: .35rem;
    padding-top: .3rem;
    border-top: 1px solid #d7e9f4;
    color: #8a5a00;
    font-size: .78rem;
}

/* ── Ročný prehľad klímy (owner 30.07.) ─────────────────────────────────────────────
   Panel detailu je úzky (~330 px), 12 mesiacov sa doň nezmestí — preto pásik s vodorovným
   posunom ako na mobile. Farba je len rýchly odhad, číslo v bunke ostáva vždy čitateľné. */
.gz-root .gz-pane-detail .gz-hd-climate {
    margin: .35rem 0 0;
    padding: .45rem .1rem .4rem .65rem;
    background: #f7fafc;
    border: 1px solid #e2ecf2;
    border-radius: .5rem;
}
.gz-root .gz-pane-detail .gz-hd-climate-head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: .5rem;
    padding-right: .55rem;
    margin-bottom: .35rem;
}
.gz-root .gz-pane-detail .gz-hd-climate-title {
    font-size: .82rem;
    font-weight: 700;
    color: #14384a;
}
.gz-root .gz-pane-detail .gz-hd-climate-hint {
    font-size: .66rem;
    color: #8aa4b1;
    white-space: nowrap;
}
.gz-root .gz-pane-detail .gz-hd-climate-scroll {
    overflow-x: auto;
    overflow-y: hidden;
    scroll-snap-type: x proximity;
    padding-bottom: .25rem;
    /* Tenký scrollbar — pásik je nízky a klasický by zjedol tretinu výšky. */
    scrollbar-width: thin;
    scrollbar-color: #c3d7e2 transparent;
}
.gz-root .gz-pane-detail .gz-hd-climate-scroll::-webkit-scrollbar { height: 6px; }
.gz-root .gz-pane-detail .gz-hd-climate-scroll::-webkit-scrollbar-thumb {
    background: #c3d7e2;
    border-radius: 3px;
}
.gz-root .gz-pane-detail .gz-hd-climate-grid {
    border-collapse: separate;
    border-spacing: 2px;
    font-size: .68rem;
    table-layout: fixed;
}
.gz-root .gz-pane-detail .gz-hd-climate-grid th,
.gz-root .gz-pane-detail .gz-hd-climate-grid td {
    width: 46px;
    min-width: 46px;
    text-align: center;
    scroll-snap-align: center;
}
/* Popisky riadkov ostávajú viditeľné aj po odsunutí — bez nich by čísla stratili význam. */
.gz-root .gz-pane-detail .gz-hd-climate-grid th[scope="row"],
.gz-root .gz-pane-detail .gz-hd-climate-grid .gz-cl-corner {
    position: sticky;
    left: 0;
    z-index: 1;
    width: 46px;
    min-width: 46px;
    text-align: left;
    font-weight: 700;
    color: #37596b;
    background: #f7fafc;
    padding-right: .2rem;
}
.gz-root .gz-pane-detail .gz-hd-climate-grid thead th {
    font-size: .64rem;
    font-weight: 700;
    color: #6c8a9a;
    letter-spacing: .02em;
    padding-bottom: .1rem;
}
.gz-root .gz-pane-detail .gz-hd-climate-grid thead th.is-current {
    color: #14384a;
    background: #dfeaf1;
    border-radius: .25rem;
}
.gz-root .gz-pane-detail .gz-hd-climate-grid td {
    padding: .2rem .1rem;
    border-radius: .3rem;
    color: #33414a;
    line-height: 1.25;
    white-space: nowrap;
}
/* Mesiac hľadaného termínu — rámček, nie iná farba: farba už nesie teplotu. */
.gz-root .gz-pane-detail .gz-hd-climate-grid td.is-current {
    box-shadow: inset 0 0 0 2px #14384a;
    font-weight: 700;
}
.gz-root .gz-pane-detail .gz-hd-climate-grid .gz-cl-day { display: block; }
.gz-root .gz-pane-detail .gz-hd-climate-grid .gz-cl-night { display: block; opacity: .75; }
.gz-root .gz-pane-detail .gz-hd-climate-note {
    margin-top: .3rem;
    padding-right: .55rem;
    font-size: .66rem;
    color: #7b95a3;
}

/* Chýbajúci údaj — svetlá stlmená bunka, nikdy nie „0" ani farba nejakej hodnoty.
   POZOR na špecificitu: generické `… .gz-hd-climate-grid td { color }` má (0,3,1), takže
   paletové triedy musia byť písané ako `td.gz-cl-*`, inak sa ich `color` vôbec neuplatní. */
.gz-root .gz-pane-detail td.gz-cl-empty { background: #eef2f4; color: #9fb1bb; }

/* Vzduch: studená → horúca */
.gz-root .gz-pane-detail td.gz-cl-a0 { background: #dbe9f5; }
.gz-root .gz-pane-detail td.gz-cl-a1 { background: #cfe4ee; }
.gz-root .gz-pane-detail td.gz-cl-a2 { background: #fdf0c9; }
.gz-root .gz-pane-detail td.gz-cl-a3 { background: #fcdf9a; }
.gz-root .gz-pane-detail td.gz-cl-a4 { background: #f9c46b; }
.gz-root .gz-pane-detail td.gz-cl-a5 { background: #f5a04f; }
.gz-root .gz-pane-detail td.gz-cl-a6 { background: #ef7d4e; color: #3a1c0c; }

/* Voda */
.gz-root .gz-pane-detail td.gz-cl-s0 { background: #e4f1f8; }
.gz-root .gz-pane-detail td.gz-cl-s1 { background: #cbe7f5; }
.gz-root .gz-pane-detail td.gz-cl-s2 { background: #a8daf2; }
.gz-root .gz-pane-detail td.gz-cl-s3 { background: #7cc8ec; }
.gz-root .gz-pane-detail td.gz-cl-s4 { background: #4fb2e3; }
.gz-root .gz-pane-detail td.gz-cl-s5 { background: #2196d6; color: #04263a; }

/* Zrážky: sucho svetlé → daždivo sýte */
.gz-root .gz-pane-detail td.gz-cl-r0 { background: #eef7f5; }
.gz-root .gz-pane-detail td.gz-cl-r1 { background: #d8efe9; }
.gz-root .gz-pane-detail td.gz-cl-r2 { background: #b6e2d8; }
.gz-root .gz-pane-detail td.gz-cl-r3 { background: #8ed0c4; }
.gz-root .gz-pane-detail td.gz-cl-r4 { background: #5fbcae; color: #06322a; }