/* ================================================================
   themes.css — B2E Multi-Theme System
   CSS Custom Properties (colour palette for all themes) +
   Theme Switcher Component

   Load this file alongside style.min.css in header.xhtml.
   Theme is activated by setting data-theme on <html>:
     <html data-theme="dark">
     (no attribute = light / default)
   ================================================================ */

/* ── Light (default) ─────────────────────────────────────────── */
:root {
  --b2e-primary:      #1770EE;
  --b2e-success:      #418526;
  --b2e-danger:       #AA4241;

  --b2e-grafik-yellow:#f3ca40;
  --b2e-cookie-icon-bg: rgb(234, 241, 255);
  --b2e-cookie-toggle-bg: #eaeaea;

  --b2e-text:         #000000;
  --b2e-text-strong:  #484848;
  --b2e-text-muted:   #696969;

  --b2e-bg-page:      #f6f6f6;
  --b2e-bg-surface:   #ffffff;
  --b2e-bg-subtle:    #fdfdfd;
  --b2e-bg-accent:    #F2F7FE;

  /* translucent veil over the surface — full-screen loader overlay */
  --b2e-bg-surface-overlay: rgba(255, 255, 255, 0.4);

  --b2e-border:       #ebebeb;
  --b2e-input-border: #a0a0a0;
  --b2e-shadow:       0 4px 6px rgba(0, 0, 0, 0.10);
  --b2e-company-name: rgba(0, 0, 0, 0.5);
  --b2e-company-border: rgba(0, 0, 0, 0.1);

  /* donut chart segment colours — single source shared by the Chart.js
     donuts (themeScript.js) and their HTML legend swatches (.legend-color-*) */
  --b2e-chart-primary:   rgba(35,120,239,1);
  --b2e-chart-secondary: rgba(235,235,235,1);

  /* grey scale & borders — one token per value, named for its use.
     Consumed via the LESS bridge in style.less. */
  --b2e-bg-muted:            #f7f7f7;   /* subtle filled background: panels, hover, separators */
  --b2e-grey-light:          #eaeaea;   /* light divider borders + subtle highlight fills */
  --b2e-grey-medium:         #d4d4d4;   /* stronger neutral border */
  --b2e-grey:                #c1c1c1;   /* neutral border */
  --b2e-border-cool:         #D2DCE0;   /* bluish separators / carousel borders */
  --b2e-border-cool-strong:  #B0B8BF;   /* darker bluish border */

  /* text greys */
  --b2e-darker-grey:         #808080;
  --b2e-grey1:               #526563;

  --b2e-font-color-on-dark-bg: #fff;
}

/* ── Dark (charcoal / near-black) ────────────────────────────── */
[data-theme="dark"] {
  color-scheme: dark;            /* dark browser chrome: scrollbars, form controls */

  --b2e-primary:      #5C9BEC;
  --b2e-success:      #418526;
  --b2e-danger:       #e06464;

  --b2e-grafik-yellow:#E3BC3B;
  --b2e-cookie-icon-bg: #2d333e;
  --b2e-cookie-toggle-bg: #2d333e;

  --b2e-text:         #c9c9c9;
  --b2e-text-strong:  #d4d4d4;
  --b2e-text-muted:   #8f8f8f;

  --b2e-bg-page:      #181818;
  --b2e-bg-surface:   #232323;
  --b2e-bg-subtle:    #2b2b2b;
  --b2e-bg-accent:    #2f3540;

  /* loader veil — przyciemnia (jasny welon rozjaśniałby i tak ciemną stronę) */
  --b2e-bg-surface-overlay: rgba(0, 0, 0, 0.3);

  --b2e-border:       #383838;
  --b2e-input-border: #a0a0a0;
  --b2e-shadow:       0 4px 6px rgba(0, 0, 0, 0.50);
  --b2e-company-name: rgba(255, 255, 255, 0.55);
  --b2e-company-border: rgba(255, 255, 255, 0.12);

  --b2e-chart-primary:   rgba(92,155,236,1);
  --b2e-chart-secondary: rgba(80,80,80,1);

  /* grey scale & borders — same tokens as light, dark values */
  --b2e-bg-muted:            #282828;
  --b2e-grey-light:          #2d2d2d;
  --b2e-grey-medium:         #373737;
  --b2e-grey:                #3c3c3c;
  --b2e-border-cool:         #323232;
  --b2e-border-cool-strong:  #404040;

  /* text greys */
  --b2e-darker-grey:         #8f8f8f;
  --b2e-grey1:               #9a9a9a;

  --b2e-font-color-on-dark-bg: #fff;
}

/* ================================================================
   THEME SWITCHER BUTTON
   Single toggle button: sun in light mode, moon in dark mode.
   ================================================================ */

#themeSwitcherBtn {
  cursor: pointer;
}

#themeSwitcherBtn::before {
  font-family: "Font Awesome 7 Pro";
  font-weight: 300;
  font-size:   22px;
  color:       #696969;
  content:     "\e28f"; /* sun-bright — Light */
}

[data-theme="dark"] #themeSwitcherBtn::before {
  content: "\f186"; /* moon — Dark */
  color: var(--b2e-text-muted);
}

/* Login / TOTP page background (replaces former inline body style) */
.login-page {
  background: var(--b2e-bg-page);
}

/* Login-page variant: floating round button in the top-right corner */
.login-theme-switch {
  position:      fixed;
  top:           18px;
  right:         18px;
  width:         48px;
  height:        48px;
  border-radius: 50%;
  border:        2px solid var(--b2e-text-muted);
  background:    transparent;
  z-index:       1000;
}

.login-theme-switch:hover { filter: brightness(0.85); }

/* Logo — light theme shows the colour logo, dark theme the white one */
.logo-dark { display: none; }
[data-theme="dark"] .logo-light { display: none; }
[data-theme="dark"] .logo-dark { display: inline; }

[data-theme="dark"] .div-plan-work-calendar-not-working .ui-widget-content{
  background-color: var(--b2e-border);
}

[data-theme="dark"] .div-plan-work-calendar .div-plan-work-calendar-carousel .div-plan-work-calendar-not-working {
  border-color: var(--b2e-bg-surface) !important;
}

[data-theme="dark"] .header-content .header-main-text .header-title-breadcrumb .site-header-text
{
  color: var(--b2e-text);
}

[data-theme="dark"] .footer-div a {
  color: var(--b2e-text);
}

[data-theme="dark"] .wnioski-list-panel .wnioski-zloz-panel {
  box-shadow: inset 0 -1px 0 0 var(--b2e-border);
}

[data-theme="dark"] .podglad-zamknij-okres-btn, [data-theme="dark"] .podglad-zglos-problem-btn {
  color: white !important;
}

[data-theme="dark"] .dokumenty-filtry-btn-flex .filtruj-btn {
  color: white !important;
}

/*DROPDOWNY (selectOneMenu)*/
[data-theme="dark"] .ui-selectonemenu-items-wrapper .ui-selectonemenu-list {
  background-color: var(--b2e-bg-page);
}

[data-theme="dark"] .ui-selectonemenu-items-wrapper .ui-selectonemenu-list li:hover {
  background-color: var(--b2e-bg-surface);
}

[data-theme="dark"] .ui-selectonemenu-items-wrapper .ui-state-highlight {
  background-color: var(--b2e-bg-surface);
}

/*DROPDOWNY (selectCheckboxMenu)*/
[data-theme="dark"] .ui-selectcheckboxmenu-panel {
  background-color: var(--b2e-bg-page);
}

[data-theme="dark"] .ui-selectcheckboxmenu-panel .ui-selectcheckboxmenu-list {
  background-color: var(--b2e-bg-page);
}

[data-theme="dark"] .ui-selectcheckboxmenu-panel .ui-selectcheckboxmenu-list li:hover {
  background-color: var(--b2e-bg-surface);
}

[data-theme="dark"] .ui-selectcheckboxmenu-panel .ui-state-highlight {
  background-color: var(--b2e-bg-page);
}

[data-theme="dark"] .ui-selectcheckboxmenu-panel .ui-selectcheckboxmenu-list-item {
  color: var(--b2e-text-muted);
}

/*LOGOWANIE*/
[data-theme="dark"] .login-btn .ui-button-text {
  color: white;
}
[data-theme="dark"] .ui-messages-error {
  background-color: unset;
  border-color: var(--b2e-danger);
  color: var(--b2e-danger);
}

/*CHECKBOX / RADIOBUTTON / PICKLIST — obramowanie w darkmode*/
[data-theme="dark"] .ui-radiobutton-box {
  border-color: var(--b2e-text-muted, #4f4f4f);
}

[data-theme="dark"] .ui-picklist .ui-picklist-buttons .ui-picklist-buttons-cell .ui-button,
[data-theme="dark"] .ui-picklist .ui-picklist-buttons .ui-picklist-buttons-cell .ui-state-disabled {
  border-color: var(--b2e-text-muted, #4f4f4f);
}

[data-theme="dark"] .ui-chkbox .ui-chkbox-icon {
  border-color: var(--b2e-text-muted, #4f4f4f) !important;
}