/*
 * theme.css — the ROGR design layer on Bootstrap 6.0.0-alpha.1 (go/rogr-kit/web,
 * copied into every service by kit-sync; a service adds only its own app.css
 * after it, never edits this copy).
 *
 * Brand (logomanual): blue #008CD2 (Pantone 639), dark grey #3C4141, light
 * grey #9B9B9B, Open Sans. Bootstrap 6 themes through CSS tokens: every
 * colour below is a light-dark() pair, so one declaration serves both colour
 * modes; theme.js sets data-bs-theme on <html> to the resolved mode.
 * Author CSS lives outside Bootstrap's @layer stack, so these overrides win
 * regardless of order.
 *
 * Contrast bar: text >= 4.5:1, UI edges and focus >= 3:1 on the surface they
 * sit on (WCAG 2.2 AA). Solid buttons rest on #0079b8 (4.74:1 with white);
 * the brand blue #008cd2 itself is kept for marks, links in dark and hover.
 */

@font-face {
  font-family: "Open Sans";
  font-style: normal;
  font-weight: 300 800;
  font-display: swap;
  src: url("fonts/open-sans-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "Open Sans";
  font-style: normal;
  font-weight: 300 800;
  font-display: swap;
  src: url("fonts/open-sans-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* ---------- tokens (Bootstrap 6 root tokens, ROGR values) ---------- */
:root, :host {
  --bs-body-font-family: "Open Sans", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;

  /* primary = the brand blue */
  --bs-primary-base: #008cd2;
  --bs-primary-bg: #0079b8;
  --bs-primary-fg: light-dark(#0079b8, #3fa9e0);
  --bs-primary-fg-emphasis: light-dark(#005f8e, #6cc4f0);
  --bs-primary-bg-subtle: light-dark(#dff1fa, #0a2f43);
  --bs-primary-bg-muted: light-dark(#b9e2f5, #0b4663);
  --bs-primary-border: light-dark(#9bd3ef, #0b5a82);
  --bs-primary-focus-ring: light-dark(color-mix(in oklch, #008cd2 50%, #f3f5f5), color-mix(in oklch, #008cd2 75%, #1f2324));
  --bs-primary-contrast: #ffffff;
  --bs-link-color: var(--bs-primary-fg);
  --bs-link-hover-color: var(--bs-primary-fg-emphasis);

  /* secondary = the brand greys (outline/subtle buttons, muted badges) */
  --bs-secondary-base: #9b9b9b;
  --bs-secondary-bg: light-dark(#e9ecec, #4a5050);
  --bs-secondary-fg: light-dark(#55605f, #c4c7c7);
  --bs-secondary-fg-emphasis: light-dark(#3c4141, #eceeee);
  --bs-secondary-bg-subtle: light-dark(#f8f9f9, #2f3435);
  --bs-secondary-bg-muted: light-dark(#e9ecec, #3c4141);
  --bs-secondary-border: light-dark(#b5bbbb, #767d7d);
  --bs-secondary-contrast: light-dark(#1f2324, #ffffff);

  /* neutral surfaces: body, 1 = navbar/cards/menus, 2 = inset, 3 = hover/active, 4 = lines */
  --bs-bg-body: light-dark(#f3f5f5, #1f2324);
  --bs-bg-1: light-dark(#ffffff, #2a2f30);
  --bs-bg-2: light-dark(#f8f9f9, #262b2c);
  --bs-bg-3: light-dark(#e9ecec, #353a3b);
  --bs-bg-4: light-dark(#d5d9d9, #4a5050);
  --bs-fg-body: light-dark(#1f2324, #eceeee);
  --bs-fg-1: light-dark(#3c4141, #c4c7c7);
  --bs-fg-2: light-dark(#55605f, #9b9b9b);
  --bs-fg-3: light-dark(#7d8283, #858a8b);
  --bs-fg-4: light-dark(#a8adad, #5f6565);
  --bs-border-color: light-dark(#d5d9d9, #4a5050);
  --bs-border-subtle: light-dark(#e9ecec, #353a3b);
  --bs-border-muted: light-dark(#e1e4e4, #2f3435);
  --bs-border-emphasized: light-dark(#b5bbbb, #767d7d);
  --bs-btn-input-bg: light-dark(#ffffff, #1a1e1f);
  --bs-hr-border-color: var(--bs-border-color);

  /* fleet aliases (status text readable in both modes — Bootstrap's own pairs) */
  --rogr-blue: var(--bs-primary-base);
  --rogr-blue-btn: var(--bs-primary-bg);
  --rogr-blue-hover: #006fa6;
  --rogr-blue-active: #00618f;
  --rogr-blue-light: var(--bs-primary-fg);
  --rogr-grey: #3c4141;
  --rogr-grey-light: #9b9b9b;
  --rogr-ok: var(--bs-success-fg);
  --rogr-warn: var(--bs-warning-fg);
  --rogr-err: var(--bs-danger-fg);
  --rogr-surface: var(--bs-bg-1);
  --rogr-surface-2: var(--bs-bg-2);
  --rogr-field: var(--bs-btn-input-bg);
  --rogr-ctrl-line: var(--bs-border-emphasized);
  --rogr-hover: var(--bs-bg-3);
  --rogr-active: var(--bs-primary-bg-subtle);
  --rogr-logo-invert: light-dark(1, 0);

  /* Bootstrap 5 token names the services' app.css files still read (compat until they move) */
  --bs-body-bg: var(--bs-bg-body);
  --bs-body-color: var(--bs-fg-body);
  --bs-emphasis-color: var(--bs-fg-body);
  --bs-secondary-color: var(--bs-fg-2);
  --bs-secondary-text-emphasis: var(--bs-fg-1);
  --bs-tertiary-color: var(--bs-fg-3);
  --bs-tertiary-bg: var(--bs-bg-2);
  --bs-border-radius: var(--bs-radius-5);
  --bs-font-sans-serif: var(--bs-body-font-family);
  --bs-primary: var(--bs-primary-base);
  --bs-danger-text-emphasis: var(--bs-danger-fg-emphasis);
  --bs-success-text-emphasis: var(--bs-success-fg-emphasis);
  --bs-warning-text-emphasis: var(--bs-warning-fg-emphasis);
}

/* Everything below sits in Bootstrap 6's `custom` cascade layer: above its
 * components (so the kit restyles them) and below `utilities`, so a utility
 * such as .mb-0 or .d-none on an element still wins over a kit rule. */
@layer custom {
  /* ---------- base ---------- */
  body { min-height: 100vh; }
  h1, h2, h3, h4, h5, h6 { text-wrap: balance; }
  .tabular, .tabular td, .tabular th { font-variant-numeric: tabular-nums; }
  .clamp-2 { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
  .meta, .muted { color: var(--bs-fg-2); font-size: var(--bs-font-size-sm); }
  .muted a { color: inherit; text-decoration: underline; }
  /* The negative logotype SVG (white + brand blue) flips to dark grey + blue on light surfaces. */
  [data-bs-theme="light"] .brand-mark, [data-bs-theme="light"] .brand-logo { filter: invert(1) hue-rotate(180deg) saturate(1.1); }

  /* ---------- navbar (the kit snippet: web/snippets/navbar.html) ---------- */
  .app-nav {
    --bs-navbar-padding-y: 0.5rem;
    --bs-navbar-min-height: 3.5rem;
    --bs-navbar-color: var(--bs-fg-1);
    --bs-navbar-hover-color: var(--bs-fg-body);
    --bs-navbar-active-color: var(--bs-fg-body);
    --bs-navbar-brand-margin-end: 1.5rem;
    background-color: var(--bs-bg-1);
    border-bottom: 1px solid var(--bs-border-color);
  }
  .app-nav .navbar-nav {
    --bs-nav-link-hover-bg: var(--bs-bg-3);
    --bs-nav-link-active-bg: var(--bs-primary-bg-subtle);
    --bs-nav-link-active-color: var(--bs-fg-body);
  }
  .app-nav .navbar-brand { display: flex; align-items: center; gap: 0.75rem; padding-block: 0.25rem; }
  .brand-mark { height: 26px; width: auto; display: block; }
  .brand-sub { color: var(--bs-fg-2); font-size: var(--bs-font-size-sm); letter-spacing: 0.02em; padding-left: 0.75rem; border-left: 1px solid var(--bs-border-color); line-height: 1.2; white-space: nowrap; }
  /* always-visible tools; the second child after the brand, so Bootstrap's space-between keeps them right.
   * The row never wraps: on a phone with a primary action in the tools the brand sub-title gives way. */
  .app-nav > .container, .app-nav > .container-fluid { flex-wrap: nowrap; }
  .navbar-tools { display: flex; align-items: center; gap: 0.25rem; white-space: nowrap; }
  .navbar-tools .navbar-toggler { margin-left: 0.25rem; }
  @media (width < 480px) { .app-nav:has(.navbar-tools > :nth-child(3)) .brand-sub { display: none; } }
  /* the phone drawer: a surface, the inline form at lg keeps its gap */
  .app-nav .drawer { --bs-drawer-bg: var(--bs-bg-1); --bs-drawer-width: min(20rem, 85vw); }
  .app-nav .drawer-body { gap: 0.75rem; }
  .app-nav .navbar-text { color: var(--bs-fg-2); }
  /* the colour-mode switch (theme.js): an icon trigger whose icon follows the mode, a menu of three */
  .theme-toggle { --bs-btn-color: var(--bs-fg-1); --bs-btn-hover-color: var(--bs-fg-body); --bs-btn-hover-bg: var(--bs-bg-3); }
  .theme-switch .menu { --bs-menu-min-width: 11rem; }
  .theme-switch .menu-item-check { visibility: hidden; }
  .theme-switch .menu-item.active .menu-item-check { visibility: visible; }
  /* submenus in the nav (a nav-link trigger + .menu inside the .nav-item): the same type size
   * as the links, roomier items; the chevron in the trigger turns while the menu is open */
  .app-nav .navbar-nav .menu {
    --bs-menu-font-size: var(--bs-font-size-md);
    --bs-menu-min-width: 12rem;
    --bs-menu-padding-x: 0.375rem;
    --bs-menu-padding-y: 0.375rem;
    --bs-menu-item-padding-x: 0.75rem;
    --bs-menu-item-padding-y: 0.5rem;
  }
  .app-nav .navbar-nav .nav-link > .fa-chevron-down { margin-left: 0.25rem; transition: transform 0.15s ease; }
  .app-nav .navbar-nav .nav-link[aria-expanded="true"] > .fa-chevron-down { transform: rotate(180deg); }
  /* Bootstrap 6 says Floating UI is not used in navbars; alpha.1 still floats the menu over the
   * drawer's content. While the drawer is a real (modal) drawer the submenu opens in place under
   * its link, indented, and pushes the rest down — an accordion, not a popover. The !important
   * beats the inline position Floating UI writes; above the breakpoint the dialog is not modal
   * and the menu floats under the link as on any desktop navbar. */
  .app-nav dialog:modal .navbar-nav .nav-item:has(> .menu) { flex-direction: column; align-items: flex-start; width: 100%; }
  .app-nav dialog:modal .navbar-nav .menu {
    position: static !important;
    inset: auto !important;
    margin: 0 !important;
    transform: none !important;
    width: 100%;
    min-width: 0;
    padding: 0.125rem 0 0.375rem 0.75rem;
    background-color: transparent;
    border: 0;
    border-radius: 0;
    box-shadow: none;
  }

  /* ---------- surfaces ---------- */
  /* Bootstrap 6 alerts carry no outer margin (the docs stack them in a vstack); a
     flash or a form error on its own needs the room below, utilities (mb-0) still win. */
  .alert { margin-bottom: var(--bs-spacer); }
  .menu { --bs-menu-bg: var(--bs-bg-1); --bs-menu-item-active-bg: var(--bs-primary-bg-subtle); --bs-menu-item-active-color: var(--bs-fg-body); }
  .drawer { --bs-drawer-bg: var(--bs-bg-1); }
  .dialog { --bs-dialog-bg: var(--bs-bg-1); }
  .toast { --bs-toast-bg: var(--bs-bg-1); --bs-toast-header-bg: var(--bs-bg-2); }
  .card { --bs-card-bg: var(--bs-bg-1); --bs-card-cap-bg: var(--bs-bg-2); --bs-card-border-radius: var(--bs-radius-5); }
  .card-header { font-weight: var(--bs-font-weight-semibold); }
  /* v6 makes .card-header and .card-body column flexboxes; a template that adds d-flex means a row
     (utilities still win, so flex-column keeps a column) */
  .card-header.d-flex, .card-body.d-flex { flex-direction: row; }
  .list-group { --bs-list-group-bg: var(--bs-bg-1); --bs-list-group-action-hover-bg: var(--bs-bg-3); }
  .table { --bs-table-bg: transparent; }
  .table > thead th { color: var(--bs-fg-2); font-size: var(--bs-font-size-sm); font-weight: var(--bs-font-weight-semibold); }
  .card > .table-responsive > .table { margin-bottom: 0; }
  .card > .table-responsive > .table > tbody > tr:last-child > * { border-bottom: 0; }
  /* the row a link jumped to (#id) and a row whose checkbox is checked read as selected */
  .table > tbody > tr:target > *, .table > tbody > tr:has(> td > .check:checked) > * { --bs-table-bg-state: var(--bs-table-active-bg); }
  .form-control { --bs-control-border-color: var(--bs-border-emphasized); }
  .input-group { --bs-input-group-addon-bg: var(--bs-bg-2); --bs-input-group-addon-border-color: var(--bs-border-emphasized); }
  .form-label { color: var(--bs-fg-2); font-size: var(--bs-font-size-sm); font-weight: var(--bs-font-weight-medium); }
  /* floating labels (label BEFORE the control in v6, control with placeholder=" "): the label is a flex box as tall
     as the wrapper, so an .invalid-feedback kept inside the wrapper would sink it onto the value — pin it to the
     control; a floating textarea gets room for a few lines */
  .form-floating > label { height: var(--bs-form-floating-height); }
  .form-floating > textarea.form-control { height: auto; min-height: 6.5rem; }
  /* a field in an .input-group keeps its .invalid-feedback AFTER the group (the buttons keep their
     corners); Bootstrap only shows a feedback that is a sibling of the control, so show it here */
  .input-group:has(.is-invalid) ~ .invalid-feedback,
  [data-bs-validate] .input-group:has(:user-invalid) ~ .invalid-feedback { display: block; }
  /* a feedback that still sits inside a group wraps under it, not beside the button */
  .input-group:has(> .invalid-feedback, > .valid-feedback) { flex-wrap: wrap; }
  .input-group > .invalid-feedback, .input-group > .valid-feedback { flex: 0 0 100%; }
  /* date picker: input[type=date] + button[data-date-picker] (a calendar icon) in an .input-group;
     theme.js opens the native picker from the button, so the browser's own indicator goes */
  .input-group:has(> [data-date-picker]) > input[type="date"]::-webkit-calendar-picker-indicator { display: none; }
  .input-group:has(> [data-date-picker]) > input[type="date"] { min-width: 0; }
  /* app footer: brand mark + app name left, company + link right */
  .app-footer { margin-top: auto; padding: 1.25rem 0; border-top: 1px solid var(--bs-border-color); color: var(--bs-fg-2); font-size: var(--bs-font-size-sm); }
  .app-footer a { color: inherit; }
  .app-footer .brand-mark { display: inline-block; height: 1.125rem; width: auto; opacity: 0.75; vertical-align: -0.2em; }
  .form-section { margin-top: 1.5rem; padding-top: 1rem; border-top: 1px solid var(--bs-border-color); }
  .form-section > h2, .form-section > h3 { font-size: var(--bs-font-size-md); font-weight: var(--bs-font-weight-semibold); margin-bottom: 0.75rem; }
  .badge { --bs-badge-font-weight: var(--bs-font-weight-semibold); }
  .btn-solid.theme-primary { --bs-btn-hover-bg: var(--rogr-blue-hover); --bs-btn-hover-border-color: var(--rogr-blue-hover); }

  /* ---------- page head, kpi tiles, tiles, list rows ---------- */
  .page-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 0.75rem; margin-bottom: 1.5rem; }
  .page-head h1 { font-size: var(--bs-font-size-2xl); font-weight: var(--bs-font-weight-bold); margin: 0; }
  .kpi-label { color: var(--bs-fg-2); font-size: var(--bs-font-size-xs); text-transform: uppercase; letter-spacing: 0.04em; }
  .kpi-value { font-size: var(--bs-font-size-xl); font-weight: var(--bs-font-weight-semibold); font-variant-numeric: tabular-nums; }
  .kpi-note { color: var(--bs-fg-2); font-size: var(--bs-font-size-xs); }
  /* two KPI tiles per row on a phone: a Czech amount ("173 521,91 Kč") must not wrap inside one */
  @media (width < 480px) { .kpi-value { font-size: 1.05rem; white-space: nowrap; } }
  .kpi-tile { display: block; color: inherit; text-decoration: none; border-radius: var(--bs-radius-5); padding: 0.35rem 0.5rem; margin: -0.35rem -0.5rem; }
  .kpi-tile:hover { background-color: var(--bs-bg-3); color: inherit; text-decoration: none; }
  .kpi-tile:focus-visible { outline: 2px solid var(--bs-primary-base); outline-offset: 2px; }
  .tiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(9rem, 1fr)); gap: 0.75rem; }
  .tile { border: 1px solid var(--bs-border-color); border-radius: var(--bs-radius-5); padding: 0.75rem; background-color: var(--bs-bg-1); }
  .tile-label { color: var(--bs-fg-2); font-size: var(--bs-font-size-xs); text-transform: uppercase; letter-spacing: 0.04em; }
  .tile-value { font-size: 1.05rem; font-weight: var(--bs-font-weight-semibold); }
  .detail-list dt { color: var(--bs-fg-2); font-weight: var(--bs-font-weight-semibold); font-size: var(--bs-font-size-sm); }
  .detail-list dd { margin-bottom: 0.5rem; }
  .list-rows { list-style: none; margin: 0; padding: 0; }
  .list-rows > li + li { border-top: 1px solid var(--bs-border-color); }
  .list-row { display: flex; align-items: center; gap: 0.75rem; min-height: 56px; padding: 0.75rem 1rem; color: var(--bs-fg-body); text-decoration: none; }
  a.list-row:hover, li.list-row:hover { background-color: var(--bs-bg-3); color: var(--bs-fg-body); text-decoration: none; }
  .list-row-main { display: flex; flex-direction: column; min-width: 0; flex: 1; }
  .list-row-title { font-weight: var(--bs-font-weight-semibold); }
  .list-row-sub { color: var(--bs-fg-2); font-size: var(--bs-font-size-sm); }
  .list-row-chevron { color: var(--bs-fg-2); font-size: 1.25rem; }
  .row-dot { flex: 0 0 auto; width: 0.5rem; height: 0.5rem; border-radius: 50%; background-color: var(--bs-fg-3); }
  .row-dot-online, .row-dot-ok { background-color: var(--bs-success-fg); }
  .row-dot-offline, .row-dot-down { background-color: var(--bs-danger-fg); }
  .row-dot-warn { background-color: var(--bs-warning-fg); }
  .segmented a { text-decoration: none; }

  /* ---------- login card ---------- */
  .login-wrap { min-height: 60vh; }
  .login-card { max-width: 420px; width: 100%; align-self: flex-start; }
  .login-logo { height: 40px; width: auto; }

  /* ---------- validation summary (server-side list of field errors) ----------
   * Looks exactly like `.alert.theme-danger` (same tokens, same padding and radius)
   * so a page with both reads as one family; it only adds the list. */
  .error-summary { padding: var(--bs-spacer) var(--bs-spacer); margin-bottom: 1rem; color: var(--bs-danger-fg); background-color: var(--bs-danger-bg-subtle); border: var(--bs-border-width) solid var(--bs-danger-border); border-radius: var(--bs-radius-7); }
  .error-summary ul { margin: 0.35rem 0 0 1.1rem; padding: 0; }
  .error-summary a { color: inherit; }
  /* a field error placed by the server: .is-invalid on the control shows its sibling
     .invalid-feedback (Bootstrap 6 does this itself and paints nothing green) */

  /* ---------- phones: a table as stacked cards (media-query version; Bootstrap 6's
     .table-stacked needs a query container and data-cell labels) ---------- */
  @media (max-width: 767.98px) {
    .table-stack thead { display: none; }
    .table-stack, .table-stack tbody, .table-stack tfoot, .table-stack tr, .table-stack td { display: block; width: 100%; }
    /* a stacked row is a card line: the card header's horizontal padding (1 rem) keeps the text off the edge */
    .table-stack tr { padding: 0.625rem 1rem; border-bottom: 1px solid var(--bs-border-color); }
    .table-stack tbody tr:last-child { border-bottom: 0; }
    /* label left, value right; a value too long for one line wraps as a left-aligned block
       beside the label (the utility .text-end on the cell still right-aligns it) */
    .table-stack td { display: flex; justify-content: space-between; align-items: baseline; gap: 1rem; padding: 0.2rem 0; border: 0; text-align: left; }
    .table-stack td::before { content: attr(data-label); color: var(--bs-fg-2); font-size: var(--bs-font-size-sm); text-align: left; flex: 0 0 40%; }
    .table-stack td:empty { display: none; }
    .table-stack td.stack-primary { display: block; font-weight: var(--bs-font-weight-semibold); }
    .table-stack td.stack-primary::before { display: none; }
    .table-stack td.stack-actions { justify-content: flex-start; padding-top: 0.5rem; }
    .table-stack td.stack-actions::before { display: none; }
    .table-stack td.stack-empty { display: block; text-align: center; }
    .table-stack td.stack-empty::before { display: none; }
    /* a footer (totals): a cell without data-label is one full-width line (its text carries the
       label, e.g. "Celkem 12 000 Kč"), a cell with data-label stays a label/value pair; hide a
       desktop-only caption cell with .d-none.md:d-table-cell */
    .table-stack tfoot tr { border-bottom: 0; }
    .table-stack tfoot td:not([data-label]) { display: block; text-align: left; }
    .table-stack tfoot td:not([data-label])::before { display: none; }
    /* a row state (hover, .table-active, :target, a checked row checkbox) paints the whole stacked row
       with its padding, not the cell boxes inside it (Bootstrap paints cells with an inset shadow) */
    .table-stack > tbody > tr > td { box-shadow: none; }
    .table-stack.table-hover > tbody > tr:hover { background-color: var(--bs-table-hover-bg); }
    .table-stack > tbody > tr.table-active, .table-stack > tbody > tr:target,
    .table-stack > tbody > tr:has(> td > .check:checked) { background-color: var(--bs-table-active-bg); }
  }
}