/* ==========================================================================
   Heliotics Core - application CSS (loaded right after styles.purged.css)
   --------------------------------------------------------------------------
   Everything Heliotics adds or overrides on top of the theme lives here.
   styles.purged.css = the theme (Ynex, purged 2026-07); do not add app rules
   there. Exception: the :root brand palette stays in the theme file, because
   it has to come BEFORE the theme's [data-theme-mode="dark"] block.
   Module CSS (ribbon, sidepanel, valuetiles, ...) and page CSS load after
   this file. Split out of styles.purged.css on 2026-09-27; the move was
   verified equal by computed style on every menu page (light/dark,
   1400/390 px).
   ========================================================================== */

/* Inter font moved to a non-blocking <link> in layouts/base.php (was a render-blocking @import) */

@font-face {
  font-family: "Gyorz";
  src: url("/assets/fonts/gyokz-regular.woff2") format("woff2"),
       url("/assets/fonts/gyokz-regular.woff") format("woff");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Gyorz";
  src: url("/assets/fonts/gyokz-semibold.woff2") format("woff2"),
       url("/assets/fonts/gyokz-semibold.woff") format("woff");
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}
/* extra bold */
@font-face {
  font-family: "Gyorz";
  src: url("/assets/fonts/gyokz-extrabold.woff2") format("woff2"),
       url("/assets/fonts/gyokz-extrabold.woff") format("woff");
  font-weight: 800;
  font-style: normal;
  font-display: swap;
}
@media (max-width: 991.98px) {
  .app-header .horizontal-logo .header-logo img {
    height: 2.6rem;
    line-height: 2.6rem;
  }
}
[data-menu-styles="dark"] .app-sidebar .slide-menu.child1 .side-menu__item:hover {
  color: var(--highlight-color);
}
[data-menu-styles="dark"] .app-sidebar .side-menu__item.active,
[data-menu-styles="dark"] .app-sidebar .side-menu__item:hover {
  color: var(--highlight-color);
}
[data-menu-styles="dark"][data-theme-mode="light"] {
  --menu-bg: rgb(var(--primary-rgb));
  --menu-prime-color: var(--violet-color); /* a3aed1 */
}
[data-header-styles="light"] {
  --header-bg: var(--violet-color);
  --header-border-color: #f3f3f3;
  --header-prime-color: var(--primary-color);
}
.card.custom-card .card-header .card-title {
  position: relative;
  margin-block-end: 0;
  font-size: 0.9375rem;
  font-weight: 700;
}
.form-select option {
  background-color: var(--custom-white);
  color: var(--default-text-color);
  padding: 0.35rem 0.75rem;
  border-radius: 0.25rem;
}
.auth-title {
  color: var(--primary-color) !important;
  font-family: var(--brand-font-family);
  font-weight: 600;
  letter-spacing: 0.3px;
  /* Bigger than the .h2 it used to inherit, and sized for the long titles the
     register and reset screens put through this rule ("Create Account /
     Accept Invitation" stays on two lines). The sign-in screen goes larger
     still - see .auth-frame--hero below. */
  font-size: clamp(1.75rem, 2.2vw, 2.35rem);
  line-height: 1.15;
}
/* Only the plain sign-in screen: its title is two short words and, from xl up,
   the first thing in the column, so it can carry the larger size. Scoped by a
   modifier the markup sets for that screen alone - at this size the longer
   register title wrapped to three lines. */
.auth-frame--hero .auth-title {
  font-size: clamp(1.9rem, 3vw, 3.1rem);
}
@media (min-width: 1200px) {
  .auth-frame {
    margin-top: 0 !important;
  }
  .auth-frame--hero {
    /* The top of the title sits level with the top of the yellow mark
       opposite, so the two columns start at one height. It is derived from
       the logo rather than hand-set: the logo box is 1.0164 x its width,
       which is clamp(180px, 46% of a 5/12 panel = 19.167vw, 360px), and
       after its 3.3% drop the top of its artwork sits 0.2848 of that box
       above the centre line. The title's top sits 82.5px above centre
       untranslated. Hence 82.5px - 0.2895 x the width clamp. */
    transform: translateY(calc(82.5px - 0.2895 * clamp(180px, 19.167vw, 360px)));
  }
  .auth-title {
    margin-bottom: 1.75rem !important;
  }
}
.authentication .auth-center-logo {
  position: relative;
  z-index: 2;
  width: clamp(150px, 40vw, 820px);

  max-width: 70%;
  height: auto;
}
@media (max-width: 575.98px) {
  .auth-frame {
    margin-top: 0 !important;
  }
  .app-header .horizontal-logo {
    display: block !important;
    padding: 0.5rem 0 !important;
  }
  .app-header .header-logo .toggle-logo {
    display: block !important;
  }
  .app-header .header-logo img {
    height: 1rem;
  }
}
/* Left panel background (ties into right panel blue/purple tone) */
.auth-left {
  /*background-color: var(--violet-color);*/
  position: relative;
}
/* The copyright line, pinned to the foot of the column. Absolute, so it adds
   nothing to the height of the centred block above it and cannot move the
   title off the line it shares with the logo. Same quiet grey and size as
   the line under the button. */
.auth-footnote {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 1.4rem;
  margin: 0;
  text-align: center;
  font-size: 0.78rem;
  letter-spacing: 0.2px;
  color: #64748b;
}
/* Make the card feel like a "control panel" */
.auth-left .custom-card {
  border: 0;
  border-radius: 18px;
  box-shadow: 0 18px 50px rgba(0,0,0,0.10), 0 4px 12px rgba(0,0,0,0.05);
  overflow: hidden;
}
/* Card body: clean, light; not a solid teal block */
.auth-left .card-body {
  background: rgba(255,255,255,0.92);
  backdrop-filter: blur(6px);
}
/* Title styling */
.auth-left .h5 {
  color: #0f172a !important;
  letter-spacing: 0.2px;
}
.auth-subtitle {
  color: #64748b;
  margin-top: 0.35rem;
}
/* Primary button: a premium gradient that matches right-side tone */
.auth-left .btn-primary {
  background-color: var(--primary-color);
  border-color: var(--primary-color);
  color: var(--highlight-color) !important;
}
.auth-left .btn-primary:hover {
  filter: brightness(1.03);
}
.authentication .authentication-cover {
  /* Underneath the photo, and the same colour the panel averages out to once
     the photo is there. Without it the panel has nothing of its own while the
     JPEG is still arriving: the colour comes from the blend below, the blend
     needs a backdrop to work on, and Firefox is left showing the scrim over
     the light page background - a grey blind for a few hundred milliseconds.
     Measured from the rendered panel, not picked by eye. */
  background-color: #473072;
  background-image: url(https://core.heliotics.com/assets/images/company-logos/Core.jpg);
  /* The hall is shot in one-point perspective, and its vanishing point is the
     strongest thing on this panel. At `cover` the photo fits the panel width
     exactly, so there is no horizontal slack at all and background-position
     has nothing to move: the aisle ran out at the end of the wordmark, which
     reads as a near miss rather than as a choice. Zooming to 140% buys that
     slack and puts the vanishing point behind the logo, so the perspective
     lines lead to it instead. The extra enlargement costs nothing at this
     blur. These percentages depend on the panel proportions; checked at
     1200x800, 1600x900 and 2560x1440. */
  background-size: 140% auto;
  /* 64% keeps the vanishing point behind the logo, which now sits 3.3% of
     its own height below the panel's centre (see .auth-cover-logo). If the
     logo moves, this has to move with it or the aisle stops leading to it. */
  background-position: 91.7% 64%;
  background-repeat: no-repeat;
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  /* A hairline of the brand yellow on the seam, so the split between the form
     and the photograph reads as a decision rather than as where one thing
     happens to stop. It is the third and last place the yellow appears, after
     the logo and the sign-in button, which closes the palette. */
  border-inline-start: 2px solid var(--highlight-color);
  /* Keeps the duotone blend below from reaching the rest of the page. */
  isolation: isolate;
}
/* The photograph is lit blue-green, which is nowhere near the brand colour, so
   it has always needed pulling towards the purple. A flat translucent tint did
   that by veiling the photo - hence the haze. This recolours it instead: the
   "color" blend takes hue and saturation from this layer and leaves the
   photograph its own luminance, so the blue is gone and the contrast stays.
   The tint follows --primary-color, so a change of brand colour carries here. */
.authentication .authentication-cover:before {
  position: absolute;
  content: "";
  width: 100%;
  height: 100%;
  inset-inline-start: 0;
  inset-inline-end: 0;
  inset-block-start: 0;
  inset-block-end: 0;
  background-color: var(--primary-color);
  mix-blend-mode: color;
  /* A trace of the original light left in the highlights, so the hall still
     reads as a photograph rather than a flat purple silhouette. */
  opacity: 0.88;
}
/* Depth, applied after the recolouring: a vignette behind the logo, because the
   vanishing point of the photo is almost white and the yellow wordmark washes
   out against it, plus a gentle top-and-bottom scrim. */
.authentication .authentication-cover:after {
  position: absolute;
  content: "";
  width: 100%;
  height: 100%;
  inset-inline-start: 0;
  inset-inline-end: 0;
  inset-block-start: 0;
  inset-block-end: 0;
  /* Held just out of focus, so the hall reads as the room the product works
     in rather than as something to look at, and the logo is the only sharp
     thing on this half. This filters the backdrop rather than the element,
     so it reaches the photo and the duotone below but not the logo, which
     sits above on z-index 2 - no extra markup needed. Where
     backdrop-filter is unsupported the panel simply stays sharp. Kept low
     because the 140% framing above already softens the photo on its own -
     3px here on top of that read as mush. */
  backdrop-filter: blur(1.5px) brightness(0.88);
  -webkit-backdrop-filter: blur(1.5px) brightness(0.88);
  background-image:
    /* Wide, and it never reaches zero. An earlier version spanned 62% x 42%
       and faded out to nothing, which gave it an edge - and that edge read as
       a grey smudge sitting around the logo rather than as light. Spread over
       the whole panel it becomes an even darkening instead of a shape:
       measured against the panel edges the step falls from 31 to 2, while the
       wordmark contrast goes up from 5.99:1 to 6.34:1. */
    radial-gradient(
      130% 92% at 50% 48%,
      rgba(23, 5, 51, 0.6) 0%,
      rgba(23, 5, 51, 0.36) 45%,
      rgba(23, 5, 51, 0.16) 100%
    ),
    linear-gradient(
      180deg,
      rgba(23, 5, 51, 0.42) 0%,
      rgba(23, 5, 51, 0.08) 45%,
      rgba(23, 5, 51, 0.5) 100%
    );
}
/* The logo is an SVG on top of the photo, not baked into the JPEG: it stays
   sharp at any panel width and is not cropped by background-size: cover. */
.authentication .authentication-cover .auth-cover-logo {
  position: relative;
  z-index: 2;
  width: clamp(180px, 46%, 360px);
  height: auto;
  /* Dropped by 3.3% of its own height so that the logo and the title
     opposite, top-aligned, are centred on the screen as a pair rather than
     each on its own - the lockup is the taller of the two. A percentage of
     its own height, so it holds at every panel width; the title follows it
     (see .auth-frame in the min-width: 1200px query). */
  transform: translateY(3.3%);
}
.flatpickr-calendar.open {
  z-index: 2060 !important;
}
.app-sidebar {
  width: 15rem;
  height: 100%;
  background: var(--menu-bg);
  border-inline-end: 1px solid var(--menu-border-color);
  position: fixed;
  inset-block-start: 0;
  inset-inline-start: 0;
  font-family: var(--brand-font-family);
  letter-spacing: 1px;
  z-index: 103;
  transition: all 0.05s ease;
}
.app-sidebar .side-menu__item {
  padding: 0.75rem;
  position: relative;
  display: flex;
  align-items: center;
  text-decoration: none;
  font-size: 0.86rem;
  color: var(--menu-prime-color);
  font-weight: 600;
  border-radius: 0.5rem;
}
.app-sidebar .side-menu__label {
  white-space: nowrap;
  color: var(--menu-prime-color);
  position: relative;
  font-size: 0.92rem;
  line-height: 1;
  vertical-align: middle;
}
.sensorboard .card:hover {
  background-color: rgba(0, 193, 212, 0.08);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}
.sensorboard .measured-value:hover,
.sensorboard .measured-value:focus {
  background-color: rgba(0, 193, 212, 0.12);
  outline: none;
}
.measured-value.active {
  background-color: rgba(0, 193, 212, 0.2) !important;
}
/* Title is pinned to the top (not centred) so it sits on the same y on every page,
   whatever the height of the actions on the right or a subtitle below it.
   The 9px offset centres the 22px title against a 38px control band. */
.page-toolbar {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1rem;
  min-height: 56px;
  padding: 12px 0 10px;
}
.page-toolbar .page-title {
  margin-top: 9px;
}
@media (max-width: 767.98px) {
  .page-toolbar { flex-wrap: wrap; }
}
.main-content.app-content {
  min-height: calc(100vh - var(--header-height, 72px));
  /* Pin content to the top. .page is a flex column with justify-content:center
     (for login/error cards); without this, pages shorter than the viewport get
     vertically centered, shifting the page title down a few px (map vs layout). */
  margin-bottom: auto;
}
.page-title {
  margin: 0;
  font-family:var(--brand-font-family);
  font-weight: 600;
  font-size: 1.125rem;
  line-height: 1.2;
}
/* Header action row: search + buttons always side by side (a page that
   forgot d-flex wrapped its button under the search, /reporting). */
.page-toolbar__actions {
  display: flex;
  align-items: center;
  gap: .5rem;
}
@media (max-width: 767.98px) {
  .page-toolbar__actions { flex-wrap: wrap; }
}
/* Header controls share the search box height (38px): buttons, links styled
   as buttons and selects next to it must not be shorter or taller
   (btn-sm = 28-30px looked squashed next to the 38px search). */
.page-toolbar > :not(.page-toolbar__title) .btn:not(.chat-search .btn),
.page-toolbar > .btn {
  height: 38px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  white-space: nowrap;
  font-size: .875rem;
}
.page-toolbar > :not(.page-toolbar__title) .form-select,
.page-toolbar > :not(.page-toolbar__title) > .form-control {
  height: 38px;
}
/* ========================================
   LIGHT MODE COLOR OVERRIDES
   ======================================== */

:root {
  /* New Colors */
  --body-bg-rgb: 225, 217, 237; /* #E1D9ED */
  --default-body-bg-color: rgba(225, 217, 237, 0.4); /* #E1D9ED66 */
  --default-text-color: #0E0E0E;
  
  /* Component Overrides */
  --bg-light-cyan: rgba(0, 193, 212, 0.2); /* #00c1d433 */
  --bg-info-trans: rgba(0, 193, 212, 0.2); /* #00C1D433 */
}
/* Specific component overrides for Light Mode */
.sensorboard .meas.card-body.bg-light {
  background-color: var(--bg-light-cyan) !important;
}
.custom-card.bg-info-transparent {
  background-color: var(--bg-info-trans) !important;
}
.sensorboard .card:hover {
  background-color: rgba(0, 193, 212, 0.08) !important; /* hover only - 20% read as "selected" */
  box-shadow: 0 0 0 1px rgba(0, 193, 212, 0.45), 0 2px 8px rgba(0, 0, 0, 0.08) !important;
}
.page-toolbar .chat-search {
  border: 1px solid #0E0E0E !important;
}
/* Accordion Buttons */
.accordion-button {
  background-color: rgba(76, 18, 161, 0.8) !important; /* #4C12A1CC */
  color: #FEFEFE !important;
}
.accordion-button:not(.collapsed) {
  background-color: rgb(76, 18, 161) !important; /* #4C12A1 */
  color: #FEFEFE !important;
}
.accordion-button::after {
  color: #FEFEFE !important;
}
/* Loading Spinner - Primary Violet + Highlight Yellow */
.chloader {
  color: #4C12A1; /* Primary Violet */
}
.chloader:after {
  color: #FFCD00 !important; /* Highlight Yellow */
  opacity: 1; /* Ensure visibility */
}
/* ========================================
   DARK MODE COLOR OVERRIDES
   ======================================== */

[data-theme-mode="dark"] {
  --default-text-color: #FEFEFE;
  --custom-white: #141414; /* Card background */
  --header-bg: #141414;
  --menu-bg: #141414;
  --menu-prime-color: #FEFEFE;
  
  /* Component Adjustments */
  --bg-light-cyan-dark: rgba(0, 193, 212, 0.8); /* #00C1D4CC */
}
[data-theme-mode="dark"] .text-dark,
[data-theme-mode="dark"] .card.custom-card {
  color: #FEFEFE !important;
}
[data-theme-mode="dark"] .sensorboard .meas.card-body.bg-light {
  background-color: var(--bg-light-cyan-dark) !important;
}
[data-theme-mode="dark"] .custom-card.bg-info-transparent {
  background-color: var(--bg-light-cyan-dark) !important;
}
/* View Switchers (Chart, Data, Analysis) */
[data-theme-mode="dark"] .sensorboard .nav-link {
  color: #bbb;
}
[data-theme-mode="dark"] .sensorboard .nav-link.active {
  color: #FEFEFE !important;
  text-decoration: underline;
  text-decoration-color: #FEFEFE;
}
/* Timeline Buttons (24H, Today, etc.) */
[data-theme-mode="dark"] .btn.btn-primary-light {
  color: #bbb !important;
}
[data-theme-mode="dark"] .btn.btn-primary-light.active,
[data-theme-mode="dark"] .btn.btn-primary-light:hover {
  color: #FEFEFE !important;
}
/* Modal Triggers */
[data-theme-mode="dark"] [data-bs-target="#groupMeasurementsModal"] {
  color: #bbb;
}
[data-theme-mode="dark"] [data-bs-target="#groupMeasurementsModal"]:hover {
  color: #FEFEFE;
}
/* ============================================================
   ADDITIONAL UI REFINEMENTS (LIGHT & DARK MODE)
   ============================================================ */

/* --- LIGHT MODE REFINEMENTS --- */

/* 1. Measurement Cards Background */
.meas.card-body.bg-light.border-primary {
    background-color: rgba(0, 193, 212, 0.2) !important; /* #00c1d433 */
}
/* 2. Accordion Icon Color */
.accordion-button::after {
    color: #0E0E0E !important;
}
/* 3. Alert Rows (Active & Inactive) */
.alert-row.alert-active {
    background-color: rgba(0, 193, 212, 0.2) !important; /* #00c1d433 */
    border-color: rgba(0, 193, 212, 0.2) !important;
}
.alert-row.alert-inactive {
    background-color: rgba(225, 217, 237, 0.4) !important; /* #E1D9ED66 */
    border-color: rgba(225, 217, 237, 0.4) !important;
}
/* --- DARK MODE REFINEMENTS --- */

[data-theme-mode="dark"] {
    /* 4. Dark Mode Body Background */
    --default-body-bg-color: rgba(20, 20, 20, 0.9) !important; /* #141414e6 */
}
/* 5. Active Tile Icon Color */
[data-theme-mode="dark"] .measico.avatar.text-white.bg-primary,
[data-theme-mode="dark"] .measico.avatar.text-white.bg-primary::before {
    color: #FEFEFE !important;
}
/* 6. Navigation Tabs (nav-style-3) */
/* Inactive Tabs */
[data-theme-mode="dark"] .nav.nav-style-3 .nav-link {
    color: rgba(254, 254, 254, 0.6) !important; /* White with 0.6 opacity */
}
/* Active Tab */
[data-theme-mode="dark"] .nav.nav-style-3 .nav-link.active {
    color: #FEFEFE !important;
    border-block-end: 3px solid #FEFEFE !important;
}
/* Hover State */
[data-theme-mode="dark"] .nav.nav-style-3 .nav-link:hover {
    color: #FEFEFE !important;
}
/* Measured Value Styles - dark mode (light mode uses the cyan accent above) */
[data-theme-mode="dark"] .measured-value.active {
    background-color: #FEFEFE !important;
    color: #4C12A1 !important; /* Farba textu */
}
[data-theme-mode="dark"] .sensorboard .measured-value:hover, 
[data-theme-mode="dark"] .sensorboard .measured-value:focus {
    background-color: rgba(254, 254, 254, 0.2) !important; /* #FEFEFE s opacitou 0.2 */
}
/* Dark Mode Refinements */
[data-theme-mode="dark"] .btn-outline-primary {
    color: #FEFEFE !important;
    border-color: #FEFEFE !important;
}
/* native controls (select popups, scrollbars) follow the app theme, not the OS appearance */
:root { color-scheme: light; }
[data-theme-mode="dark"] { color-scheme: dark; }