/* ============================================================
   SkyTax 3.0 — redesign
   Ładowany JAKO OSTATNI, w View/Themed/Timetax/Elements/head_custom.ctp
   (po timetax.css) — kaskaduje na Bootstrap 3 + Metronic layout2.

   Identyfikacja TimeTax: Granat #0C3183 · Pomarańcz #E7511E
   Font: Open Sans 300/400/700

   Źródło: new_design/index.html
   ============================================================ */

:root {
  --navy: #0C3183;
  --navy-600: #123a99;
  --navy-700: #0a2a6e;
  --navy-800: #082254;
  --orange: rgb(231, 81, 30);
  --orange-600: #cf4413;
  --orange-100: #fdeee7;
  --ink: #1c2434;
  --muted: #6b7488;
  --line: #e4e8f0;
  --bg: #eef1f7;
  --card: #ffffff;
  --green: #179c63;
  --green-bg: #e7f7ef;
  --red: #dc3b4b;
  --teal: #17a2b8;
  --teal-600: #1490a3;
  --shadow: 0 1px 3px rgba(12, 49, 131, .06), 0 8px 24px rgba(12, 49, 131, .06);
  --shadow-sm: 0 1px 2px rgba(12, 49, 131, .08);
  --radius: 14px;
  --radius-sm: 9px;
  --sidebar-w: 210px;
}

/* ============================================================
   1 · LOGOWANIE
   Layout: app/View/Layouts/login.ctp
   Formularz: app/View/Users/login.ctp
   ============================================================ */

body.login {
  margin: 0;
  padding: 0;
  font-family: 'Open Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  background: #fff;
  color: var(--ink);
  font-size: 14px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}

.skytax-login {
  position: fixed;
  inset: 0;
  display: flex;
  background: #fff;
}

/* ---------- Lewa kolumna: hero ---------- */
.login-hero {
  flex: 1;
  position: relative;
  overflow: hidden;
  background: linear-gradient(150deg, var(--navy-700) 0%, var(--navy) 55%, var(--navy-800) 100%);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: 56px;
  color: #fff;
}

.login-hero::after {
  content: "";
  position: absolute;
  left: -120px;
  bottom: -120px;
  width: 340px;
  height: 340px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(231, 81, 30, .35), transparent 70%);
}

.login-hero-top { position: relative; z-index: 2; }

.login-hero-badge {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  background: rgba(255, 255, 255, .12);
  border: 1px solid rgba(255, 255, 255, .18);
  padding: 8px 14px;
  border-radius: 999px!important;
  font-size: 12px;
  font-weight: 600;
}

.login-hero-badge img { height: 18px; }

.login-hero-mid {
  position: relative;
  z-index: 2;
  max-width: 440px;
}

.login-hero-mid h1 {
  font-size: 40px;
  line-height: 1.15;
  font-weight: 800;
  margin: 0 0 16px;
  color: #fff;
}

.login-hero-mid p {
  font-size: 16px;
  color: rgba(255, 255, 255, .78);
  margin: 0;
  font-weight: 300;
}

.login-hero-foot {
  position: relative;
  z-index: 2;
  font-size: 12px;
  color: rgba(255, 255, 255, .55);
}

/* ---------- Prawa kolumna: panel ---------- */
.login-panel {
  width: 520px;
  max-width: 44vw;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 56px 64px;
  position: relative;
  overflow-y: auto;
  /* flex-item bez min-width:0 nie zejdzie poniżej min-content swoich dzieci → poziomy scroll na mobile */
  min-width: 0;
}

.login-panel > * { min-width: 0; }

.login-panel .login-lang {
  position: absolute;
  top: 28px;
  right: 40px;
  display: flex;
  gap: 6px;
  padding: 0;
  text-align: left;
}

.login-logo { margin-bottom: 44px; }
.login-logo img { height: 52px; }

.login-logo .sub {
  margin-top: 15px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .22em;
  color: var(--muted);
  text-transform: uppercase;
}

.login-panel h2,
.login-panel .form-title {
  font-size: 26px;
  font-weight: 700;
  color: var(--navy)!important;
  margin: 0 0 4px;
}

.login-panel .lead {
  color: var(--muted);
  margin: 0 0 30px;
  font-size: 14px;
}

.login-foot {
  font-weight: 500;
  margin-top: auto;
  padding-top: 40px;
  font-size: 11px;
  color: #aeb6c6;
}

/* ---------- Pola formularza ---------- */
.skytax-login .field { margin-bottom: 18px; }

.skytax-login .field label {
  display: block;
  font-size: 12px;
  font-weight: 600;
  color: var(--muted);
  margin-bottom: 7px;
  letter-spacing: .02em;
}

/* Uwaga: FormHelper (ObjectTranslation) owija każde pole w <div class="input email required">
   mimo 'div' => false. Neutralizujemy wrapper, stylujemy dopiero właściwy <input>. */
.skytax-login .field > div.input {
  display: block;
  border: 0;
  background: none;
  padding: 0;
  margin: 0;
  box-shadow: none;
}

.skytax-login input.input,
.skytax-login input[type="text"],
.skytax-login input[type="email"],
.skytax-login input[type="password"] {
  width: 100%;
  height: auto;
  border: 1px solid var(--line);
  background: #fbfcfe;
  border-radius: 10px!important;
  padding: 12px 14px;
  font-size: 14px;
  color: var(--ink);
  box-shadow: none;
  transition: .15s;
}

.skytax-login input.input:focus,
.skytax-login input[type="text"]:focus,
.skytax-login input[type="email"]:focus,
.skytax-login input[type="password"]:focus {
  outline: none;
  border-color: var(--orange);
  background: #fff;
  box-shadow: 0 0 0 3px rgba(231, 81, 30, .12);
}

.login-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
  margin: 6px 0 26px;
}

/* ---------- Checkbox „Zapamiętaj mnie" ---------- */
.skytax-login .check {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  font-size: 13px;
  color: var(--ink);
  cursor: pointer;
  user-select: none;
  font-weight: 400;
  margin: 0;
}

.skytax-login .check input {
  position: absolute;
  opacity: 0;
  width: 0;
  height: 0;
}

.skytax-login .check .box {
  width: 18px;
  height: 18px;
  border: 1.5px solid #c3cbdd;
  border-radius: 5px!important;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: .15s;
  background: #fff;
  font-size: 11px;
  font-weight: 700;
  color: transparent;
}

.skytax-login .check input:checked + .box {
  background: var(--orange);
  border-color: var(--orange);
  color: #fff;
}

/* Zabezpieczenie: gdyby uniform.js jednak owinął checkbox w <div class="checker"><span> */
.skytax-login .check .checker {
  position: absolute;
  opacity: 0;
  width: 0;
  height: 0;
  overflow: hidden;
}

.skytax-login .check:has(input:checked) .box {
  background: var(--orange);
  border-color: var(--orange);
  color: #fff;
}

/* ---------- Przycisk ---------- */
.skytax-login .btn-primary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  width: 100%;
  border: 1px solid transparent;
  border-radius: 10px!important;
  padding: 10px;
  font-size: 15px;
  font-weight: 600;
  line-height: 1;
  background: var(--orange);
  color: #fff;
  box-shadow: 0 2px 8px rgba(231, 81, 30, .28);
  transition: .16s ease;
}
.skytax-login .btn-back {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  width: 100%;
  border: 1px solid transparent;
  border-radius: 10px!important;
  padding: 10px;
  font-size: 15px;
  font-weight: 600;
  line-height: 1;
  background: var(--navy);
  color: #fff;
  box-shadow: 0 2px 8px rgba(231, 81, 30, .28);
  transition: .16s ease;
  margin-top: 10px;
}

.skytax-login .btn-primary:hover,
.skytax-login .btn-primary:focus,
.skytax-login .btn-primary:active {
  background: var(--orange-600);
  border-color: transparent;
  color: #fff;
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(231, 81, 30, .34);
}

/* ---------- Przełącznik języka PL/EN ---------- */
.skytax-login .lang-switch img,
.skytax-login .flag {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 22px;
  border-radius: 5px;
  font-size: 15px;
  border: 1px solid var(--line);
  background: #fff;
  cursor: pointer;
  line-height: 1;
  overflow: hidden;
  margin: 0;
  opacity: 1;
  object-fit: cover;
  transition: .15s;
  padding: 5px;
  border-radius: 5px!important;
}

.skytax-login .lang-switch img.active,
.skytax-login .flag.active {
  border-color: var(--line);
  box-shadow: 0 0 0 2px var(--orange);
}

/* ---------- Linki ---------- */
.skytax-login a { color: var(--navy); text-decoration: none; }
.skytax-login a:hover { color: var(--orange); }
.skytax-login .forget-password {font-weight: 400;}

/* ---------- Mobile ---------- */
@media (max-width: 900px) {
  .skytax-login { flex-direction: column; }
  .login-hero { display: none; }
  .login-panel {
    width: 100%;
    max-width: 100%;
    padding: 40px 24px;
  }
  .login-panel .login-lang { top: 16px; right: 20px; }
}


/* ============================================================
   2 · APP SHELL — sidebar + topbar
   Layout:  app/View/Layouts/bootstrap.ctp
   Logo:    app/View/Themed/Timetax/Elements/logo.ctp
   Topbar:  app/View/Themed/Timetax/Elements/page_top.ctp
   Menu:    app/View/Themed/Timetax/Elements/page_menu.ctp  (po zmianie → ?clearCache=1)

   UWAGA 1: nazwy klas Metronica (.page-sidebar-menu, .nav-item, .nav-toggle,
   .sub-menu) MUSZĄ zostać — layout.min.js wiesza na nich accordion i slimscroll.
   Zmieniamy wyłącznie wygląd. Metronic sypie !important w .page-container
   i .page-content, więc miejscami musimy odpowiedzieć tym samym.

   UWAGA 2 — dotyczy CAŁEGO redesignu: components.min.css zabija zaokrąglenia
   globalnie i z !important:
       a,button,code,div,img,input,label,li,p,pre,select,span,svg,
       table,td,textarea,th,ul { border-radius: 0 !important }
   Dlatego KAŻDY border-radius na tych elementach wymaga !important.
   Pseudo-elementy (::before/::after) reguła nie łapie — tam !important zbędne.
   ============================================================ */

body {
  font-family: 'Open Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  background: var(--bg);
  color: var(--ink);
  /* head.ctp ma inline `body{padding:70px 0 0 0}` pod fixed navbar Metronica.
     Nasz topbar jest sticky (w flow), więc ten zapas tylko robi dziurę. */
  padding-top: 0;
}

/* ---------- Szkielet: sidebar fixed na pełną wysokość, topbar tylko nad treścią ---------- */
.page-sidebar-wrapper {
  position: fixed;
  top: 0;
  left: 0;
  bottom: 0;
  width: var(--sidebar-w);
  z-index: 9996;
  display: flex;
  flex-direction: column;
  background: linear-gradient(180deg, var(--navy) 0%, var(--navy-700) 60%, var(--navy-800) 100%);
  box-shadow: 2px 0 22px rgba(8, 34, 84, .18);
  transition: transform .25s ease;
}

.page-sidebar {
  width: var(--sidebar-w) !important;
  float: none !important;
  margin-right: 0 !important;
  background: none !important;
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  padding: 6px 12px;
  scrollbar-width: thin;
  scrollbar-color: rgba(255, 255, 255, .2) transparent;
  position: fixed;
  top: 100px!important;
}

/* Bootstrap 3 wymusza na .navbar-collapse.collapse `overflow: visible !important`
   powyżej 768px — przez to sidebar nie był własnym kontenerem scrolla i kółko myszy
   nad nim przewijało całą stronę. Dobijamy specyficznością + !important.
   overscroll-behavior: contain odcina łańcuchowanie scrolla do <body> po dojechaniu
   do końca listy. */
.page-sidebar.navbar-collapse.collapse {
  overflow-y: auto !important;
  overflow-x: hidden !important;
  overscroll-behavior: contain;
  /* .page-sidebar jest position:fixed z samym `top` — wtedy wysokość bierze się
     z treści, więc nie ma czego przewijać i kółko myszy leci na <body>.
     `bottom: 0` domyka go do dołu okna i dopiero robi z niego kontener scrolla. */
  bottom: 0;
}

.page-sidebar::-webkit-scrollbar { width: 6px; }
.page-sidebar::-webkit-scrollbar-thumb { background: rgba(255, 255, 255, .18); border-radius: 3px !important; }

.page-content-wrapper {
  float: none !important;
  width: auto !important;
  margin-left: var(--sidebar-w);
}

/* Metronic zakłada fixed navbar i rezerwuje na niego miejsce; nasz topbar jest w flow. */
.page-header-fixed .page-container,
.page-header-fixed.page-header-fixed-mobile .page-container { margin-top: 0 !important; }

/* .page-content-wrapper .page-content ma u Metronica margin-left:195px pod stary
   float-owy sidebar — offset robi teraz .page-content-wrapper, więc zerujemy. */
.page-content-wrapper .page-content {
  /* 70px na górze rekompensuje wysokość przyklejonego paska (.page-header.navbar).
     Wcześniej stało to osobną regułą na końcu pliku i bilo tutejsze `margin: 0`. */
  margin: 70px 0 0 !important;
  padding: 26px 30px 48px !important;
  background: var(--bg) !important;
}

/* ---------- Layout `subframe` ----------
   Widoki otwierane w iframe (prefiks routingu `subframe`, akcje subframe_add /
   subframe_edit — dodawanie/edycja kartoteki, klienta, projektu rekrutacyjnego,
   załączników z poziomu Sprawy, Legalizacji, Leada, Aplikacji, Kampanii)
   renderują się layoutem app/View/Layouts/subframe.ctp. Ma on ten sam szkielet
   klas (.page-container > .page-content-wrapper > .page-content), ale NIE MA
   ani .page-sidebar-wrapper, ani .page-header.navbar.

   Offsety szkieletu wyżej rezerwowały mu więc miejsce na sidebar i topbar,
   których w iframie nie ma: 264px pustego pasa z lewej i 70px u góry.
   Własne `.page-content { margin-left: 0 }` z subframe.ctp przegrywało,
   bo tamtejsza reguła jest bez `!important`.

   Padding i tło zostają — w iframie wyglądają dobrze; zerujemy tylko offsety.
   Reguła jest wyłącznie dokładająca: pełna skorupa (bootstrap.ctp) nie łapie
   `:not(...)`, więc jej układ — łącznie z @media poniżej 900px — bez zmian. */
.page-container:not(:has(> .page-sidebar-wrapper)) > .page-content-wrapper {
  margin-left: 0;
}

.page-container:not(:has(> .page-sidebar-wrapper)) > .page-content-wrapper > .page-content {
  margin-top: 0 !important;
}

/* ---------- Logo na białej „pigułce" ---------- */
.page-logo.sidebar-brand {
  float: none;
  width: auto;
  height: auto;
  padding: 22px 20px 18px;
  display: flex;
  justify-content: center;
  background: none;
}

.page-logo .logo-pill {
  background: #fff;
  border-radius: 12px !important;
  padding: 14px 18px;
  width: 100%;
  display: flex;
  justify-content: center;
  box-shadow: 0 4px 14px rgba(8, 34, 84, .25);
}

.page-logo .logo-pill img {
  height: 34px;
  display: block;
  margin: 0;
  padding: 0;
}

/* ---------- Pozycje menu ---------- */
.page-sidebar-menu { padding: 0 !important; margin: 0; }

.page-sidebar-menu > li > a.nav-link,
.page-sidebar-menu .sub-menu > li > a.nav-link {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 11px 14px;
  border: 0 !important;
  border-radius: 10px !important;
  color: rgba(255, 255, 255, .82);
  font-size: 13.5px;
  font-weight: 600;
  transition: .15s;
  position: relative;
  margin-bottom: 5px!important;
}

.page-sidebar-menu > li > a.nav-link > i {
  width: 18px;
  font-size: 16px;
  flex: none;
  opacity: .9;
  margin: 0;
}

.page-sidebar-menu > li > a.nav-link:hover {
  background: rgba(255, 255, 255, .09);
  color: #fff;
}

.page-sidebar-menu > li.active > a.nav-link,
.page-sidebar-menu > li.open > a.nav-link {
  background: rgba(255, 255, 255, .14);
  color: #fff;
}

/* Pomarańczowy pasek przy aktywnej pozycji */
.page-sidebar-menu > li.active > a.nav-link::before {
  content: "";
  position: absolute;
  left: -12px;
  top: 8px;
  bottom: 8px;
  width: 4px;
  border-radius: 0 4px 4px 0 !important;
  background: var(--orange);
}

.page-sidebar-menu > li.active > a.nav-link > i { color: var(--orange); opacity: 1; }

/* Strzałka rozwijania */
.page-sidebar-menu .arrow {
  margin-left: auto;
  opacity: .7;
}
.page-sidebar-menu .arrow::before{
  color: #fff!important;
}

/* ---------- Submenu ---------- */
.page-sidebar-menu .sub-menu {
  background: none !important;
  padding: 2px 0 !important;
  margin: 0;
}

.page-sidebar-menu .sub-menu > li > a {
  padding: 9px 14px 9px 46px;
  font-size: 13px;
  font-weight: 400;
  color: rgba(255, 255, 255, .68);
  border-radius: 8px !important;
}

.page-sidebar-menu .sub-menu > li:hover > a {
  color: #fff;
  background: rgba(231, 81, 30, .22)!important;
}

.page-sidebar-menu .sub-menu > li.active > a {
  color: #fff;
  background: rgba(231, 81, 30, .22)!important;
  font-weight: 600;
}


.page-sidebar-menu .sub-menu > li.active > a > i,
.page-sidebar-menu .sub-menu > li:hover  > a> i{
  color: var(--orange)
}

.page-sidebar .page-sidebar-menu .sub-menu > li.active > a,
.page-sidebar .page-sidebar-menu .sub-menu > li:hover > a{
  background: rgba(231, 81, 30, .22)!important;
}
/* ---------- Topbar ---------- */
.page-header.navbar {
  position: fixed;
  top: 0;
  z-index: 20;
  width: auto;
  height: 66px !important;
  min-height: 66px !important;
  margin-left: var(--sidebar-w);
  background: rgba(255, 255, 255, .92);
  backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--line);
  display: flex;
  align-items: center;
  gap: 16px;
}

/* Po przeniesieniu logo do sidebara zostaje tu tylko hamburger — na desktopie
   niepotrzebny, a jako pusty flex-item zjadałby gapa. Na mobile `display: contents`
   wypuszcza hamburger prosto do flexa topbara. */
.page-header.navbar .page-header-inner {
  display: none;
  float: none;
}

.page-header.navbar .page-top {
  flex: 1;
  display: flex;
  align-items: center;
  gap: 16px;
  height: auto !important;
  background: none;
  float: none;
  position: static;
  box-shadow: none!important;
}

.welcome_text,
.title-additional {
  display: flex;
  align-items: center;
  gap: 20px;
}

.welcome_text { margin-right: 16px; }

/* Część widoków (np. Documents/index.ctp) nie oddaje przycisków przez `page_buttons`,
   tylko renderuje je w .fixedactions — position:fixed w prawym górnym rogu (timetax.css:306).
   Wtedy flagi i avatar muszą ustąpić im miejsca, żeby się nie nakładały. */
.topbar-actions { margin-left: auto; }

body:has(.fixedactions) .topbar-actions {
  margin-left: 0;
  margin-right: auto;
}

.welcome_text h2 {
  margin: 0;
  padding: 0;
  font-size: 18px;
  font-weight: 700;
  color: var(--ink);
}

.welcome_text .notranslate{
  font-size: 20px;
}

.welcome_text h2 div { display: inline; margin: 0; color: var(--navy); font-weight: 700; }

.welcome_text h2 > small + div { margin-left: 15px; }

.topbar-actions {
  display: flex;
  align-items: center;
  gap: 14px;
}

/* Flagi PL/EN */
.topbar-actions .lang-switch { display: flex; gap: 6px; padding: 0; }

.topbar-actions .lang-switch img {
  width: 30px;
  height: 22px;
  border-radius: 5px !important;
  border: 1px solid var(--line);
  background: #fff;
  cursor: pointer;
  object-fit: cover;
  opacity: 1;
  margin: 0;
  transition: .15s;
  padding: 5px;
}

.topbar-actions .lang-switch img.active {
  border-color: var(--line);
  box-shadow: 0 0 0 2px var(--orange);
}

/* Avatar z inicjałami */
.topbar-actions .avatar {
  width: 38px;
  height: 38px;
  border-radius: 50% !important;
  background: linear-gradient(135deg, var(--navy-600), var(--navy));
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: 13px;
  flex: none;
  user-select: none;
}

/* Przycisk Wyloguj */
.logout_button { position: static !important; }

.logout_button .btn.default {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  background: #fff;
  color: var(--navy);
  border: 1px solid var(--line);
  border-radius: 9px !important;
  padding: 6px 12px;
  font-size: 12px;
  font-weight: 600;
  line-height: 1;
}

.logout_button .btn.default:hover {
  border-color: #c9d2e3;
  background: #f7f9fd;
  color: var(--navy);
}

/* ---------- Stopka ---------- */
/* body ma klasę .page-sidebar-fixed, a Metronic daje jej `.page-footer{margin-left:195px}`
   — trzeba dorównać specyficznością, samo `.page-footer` przegrywa. */
.page-sidebar-fixed .page-footer,
.page-footer {
  margin-left: var(--sidebar-w);
  background: none;
  padding: 18px 30px;
  height: auto;
  color: #aeb6c6;
  font-size: 11px;
  text-align: right;
}

/* Metronic floatuje .page-footer-inner w lewo — przez to text-align nic nie robił. */
.page-footer .page-footer-inner { float: none; display: block; }

/* ---------- Mobile: sidebar chowa się, zostaje hamburger ---------- */
.page-header.navbar .menu-toggler.responsive-toggler { 
  display: none; 
  margin: 0 !important; 
  padding: 5px; 
  border: 1px solid var(--line);
  border-radius: 5px!important;
  width: 30px;
  height: 30px;
}

@media (max-width: 900px) {
  /* Stanem steruje Bootstrapowy collapse: .responsive-toggler dokłada .in na .page-sidebar
     (tak też sprawdza to layout.min.js, który sam zamyka menu po kliknięciu w pozycję).
     Wysuwamy cały wrapper, bo logo siedzi w nim, a nie w .page-sidebar. */
  .page-sidebar-wrapper { transform: translateX(-100%); }

  .page-sidebar-wrapper:has(.page-sidebar.in) {
    transform: none;
    box-shadow: 0 0 0 100vmax rgba(8, 34, 84, .45), 2px 0 22px rgba(8, 34, 84, .3);
  }
  .page-sidebar{
    top: 0!important;
  }
  .page-sidebar.navbar-collapse.in{
    margin: 0!important;
  }
  /* Bootstrap 3 daje .collapse{display:none} poniżej 768px — wrapper i tak jest schowany
     transformem, więc nie pozwalamy mu chować samej treści menu. */
  .page-sidebar { display: block !important; }

  .page-content-wrapper,
  .page-header.navbar,
  .page-footer { margin-left: 0; }

  .page-header.navbar { padding: 0 14px !important; gap: 10px; }
  .page-header.navbar .page-header-inner { display: contents; }
  .page-header.navbar .menu-toggler.responsive-toggler { display: inline-flex; background-image: url(../img/sidebar-toggler-inverse.png) }
  .page-content-wrapper .page-content { padding: 18px 14px 40px !important; }
  .welcome_text h2 { font-size: 15px; }
}


/* ============================================================
   3 · LISTY (DataTables)
   Markup generuje wspólny silnik: app/View/Elements/datatable/index.ctp
   — NIE ruszamy go, bo obsługuje wszystkie listy w aplikacji.
   Kolumny konfigurowane są w PHP w kontrolerach i w rekordach Dview w bazie.

   Struktura, na której pracujemy:
     .portlet.light.bordered            → .card z makiety
       .portlet-title                   → .card-head
         .caption > .caption-subject    → tytuł (pomarańczowy pasek = ::before)
         .actions                       → filtry / przyciski po prawej
       .portlet-body
         .table-responsive
           .dataTables_wrapper
             .dataTables_length         \
             .dt-buttons.btn-group      /  → .toolbar
             table.dataTable            → .tbl
             .dataTables_info           \
             .dataTables_paginate       /  → .tbl-foot
   ============================================================ */

/* ---------- Karta ---------- */
/* Promień dla WSZYSTKICH portletów w jednym miejscu — nie tylko .light.bordered,
   bo część widoków używa gołego .portlet i inaczej miałyby inne zaokrąglenie. */
.portlet { border-radius: 10px !important; }

.portlet.light.bordered {
  background: var(--card);
  border: 1px solid var(--line);
  box-shadow: var(--shadow);
  margin-bottom: 20px;
  padding: 0;
}

.portlet.light > .portlet-title {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  min-height: 0;
  padding: 20px 0;
  margin: 0;
  border-bottom: 1px solid var(--line);
}

.portlet.light > .portlet-title > .caption {
  display: flex;
  align-items: center;
  gap: 9px;
  float: none;
  padding: 0;
  color: var(--navy);
}

/* Pomarańczowy pasek — w makiecie osobny <span class="bar">, tu pseudo-element.
   Pseudo-elementów nie łapie globalny reset border-radius Metronica. */
.portlet.light > .portlet-title > .caption::before {
  content: "";
  width: 4px;
  height: 18px;
  border-radius: 3px;
  background: var(--orange);
  flex: none;
}

.portlet.light > .portlet-title > .caption > .caption-subject {
  font-size: 13px;
  font-weight: 800;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--navy);
  padding: 0;
}

.portlet.light > .portlet-title > .actions {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  float: none;
  padding: 0;
}

.portlet.light > .portlet-body { padding: 18px 22px 22px }

/* Odstępy karty daje .portlet-body (wyżej). Metronic paduje jeszcze wewnętrzny
   .form-body (`padding: 20px`), co dawało podwójny margines — zerujemy. */
.portlet.light .form .form-body { padding: 0 !important; }

/* Pasek akcji na dole formularza — po wyzerowaniu paddingu przyklejał się
   do ostatniego pola. */
.portlet.light .form .form-body .actions { margin-top: 5px !important; }
/* Tylko gdy bezpośrednio nad treścią stoi nagłówek portletu — wtedy potrzebny
   jest odstęp od kreski oddzielającej. Portlety bez .portlet-title zachowują
   padding z reguły wyżej. */
.portlet.light > .portlet-title + .portlet-body.form { padding-top: 18px!important; }

/* ---------- Pasek narzędzi nad tabelą ---------- */
.dataTables_wrapper {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
}

.dataTables_wrapper > .dataTables_length { order: 1; margin: 0; }
.dataTables_wrapper > .dataTables_filter { order: 1; margin: 0 0 0 auto; }
.dataTables_wrapper > .dt-buttons        { order: 2; margin-left: auto; float: none; }
.dataTables_wrapper > table              { order: 3; width: 100% !important; }
.dataTables_wrapper > .dataTables_info   { order: 4; padding: 0; }
.dataTables_wrapper > .dataTables_paginate { order: 5; margin-left: auto; padding: 0; }

.dataTables_length label,
.dataTables_filter label {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0;
  font-size: 13px;
  font-weight: 400;
  color: var(--muted);
}

.dataTables_length select,
.dataTables_filter input {
  width: auto;
  height: auto;
  border: 1px solid var(--line);
  border-radius: 7px !important;
  padding: 5px 8px;
  background: #fff;
  box-shadow: none;
  color: var(--ink);
}

/* Przyciski akcji (Excel, PDF, Kolumny, Reset…) — .mini .btn z makiety */
.dt-buttons.btn-group { display: flex; gap: 6px; flex-wrap: wrap; }

.dt-buttons > .btn.btn-default {
  float: none;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 7px !important;
  color: var(--navy);
  font-size: 12px;
  font-weight: 600;
  padding: 6px 12px;
  box-shadow: none;
}

.dt-buttons > .btn.btn-default:hover,
.dt-buttons > .btn.btn-default:focus {
  border-color: #c9d2e3;
  background: #f7f9fd;
  color: var(--navy);
}

/* ---------- Tabela ---------- */
/* Bootstrap dokłada .table-bordered (kratka) i .table-striped (zebra) —
   makieta ich nie ma, więc zdejmujemy i zostawiamy same poziome linie. */
table.dataTable,
table.dataTable.table-bordered {
  width: 100% !important;
  border: 0;
  border-collapse: collapse !important;
  font-size: 13px;
  margin: 0 !important;
  background-color: #f6f8fc!important;
  border-radius: 10px!important;
}

table.dataTable.table-bordered > thead > tr > th,
table.dataTable.table-bordered > tbody > tr > td { border-left: 0; border-right: 0; }

table.dataTable.table-striped > tbody > tr:nth-of-type(odd),
table.dataTable.table-striped > tbody > tr:nth-of-type(odd) > td { background: transparent; }

table.dataTable > thead > tr > th {
  text-align: left;
  padding: 12px 14px;
  font-size: 11.5px;
  font-weight: 700;
  color: var(--navy);
  letter-spacing: .03em;
  text-transform: uppercase;
  border-bottom: 1px solid var(--line) !important;
  border-radius: 10px!important;
  border-top: 0;
  white-space: nowrap;
}

table.dataTable > tbody > tr > td {
  padding: 13px 14px;
  border-top: 0;
  border-bottom: 1px solid #eef1f7;
  color: var(--ink);
  vertical-align: middle;
}

table.dataTable > tbody > tr:last-child > td { border-bottom: 0; }

table.dataTable.table-hover > tbody > tr:hover,
table.dataTable.table-hover > tbody > tr:hover > td { background: #f7f9fe; }

/* Kolumna, po której aktualnie sortujemy — DataTables podbija jej tło własnymi
   regułami o wysokiej specyficzności (datatables.css: `table.dataTable.display
   tbody tr.odd > .sorting_1` itd.), stąd !important zamiast licytacji selektorami. */
table.dataTable > tbody > tr > td.sorting_1 { background-color: transparent !important; }
table.dataTable.table-hover > tbody > tr:hover > td.sorting_1 { background-color: #f7f9fe !important; }

/* ---------- Stopka tabeli: licznik + paginacja ---------- */
.dataTables_info { font-size: 12.5px; color: var(--muted); }

.dataTables_paginate .pagination { margin: 0; display: flex; gap: 6px; }

.dataTables_paginate .pagination > li > a {
  border: 1px solid var(--line);
  border-radius: 7px !important;
  background: #fff;
  color: var(--navy);
  font-size: 12px;
  font-weight: 600;
  padding: 6px 12px;
  margin: 0;
}

.dataTables_paginate .pagination > li > a:hover {
  border-color: #c9d2e3;
  background: #f7f9fd;
  color: var(--navy);
}

.dataTables_paginate .pagination > li.active > a,
.dataTables_paginate .pagination > li.active > a:hover,
.dataTables_paginate .pagination > li.active > a:focus {
  background: var(--navy);
  border-color: var(--navy);
  color: #fff;
}

.dataTables_paginate .pagination > li.disabled > a,
.dataTables_paginate .pagination > li.disabled > a:hover {
  background: #fff;
  border-color: var(--line);
  color: #c3cbdd;
}

/* ---------- Szerokie tabele przewijają się poziomo w obrębie karty ---------- */
.portlet.light > .portlet-body > .table-responsive {
  overflow-x: auto;
  border: 0;
  margin: 0;
}

/* ---------- Wiersz filtrów ----------
   Uwaga: filtry siedzą w <tfoot> (renderowanym wizualnie nad tbody), a nie w <thead>
   — komórki to <th>, nie <td>. Odpowiednik .filter-row z makiety. */
table.dataTable > tfoot > tr > th,
table.dataTable.table-bordered > tfoot > tr > th {
  padding: 8px 10px;
  background: #fbfcfe;
  border-left: 0;
  border-right: 0;
  border-top: 0;
  border-bottom: 1px solid var(--line);
  font-weight: 400;
}

table.dataTable > tfoot > tr > th input[type="text"],
table.dataTable > tfoot > tr > th select {
  width: 100%;
  min-width: 90px;
  height: auto;
  padding: 7px 10px;
  font-size: 12.5px;
  border: 1px solid var(--line);
  border-radius: 7px !important;
  background: #fff;
  color: var(--ink);
  box-shadow: none;
}

table.dataTable > tfoot > tr > th input[type="text"]:focus,
table.dataTable > tfoot > tr > th select:focus {
  outline: none;
  border-color: var(--orange);
  box-shadow: 0 0 0 3px rgba(231, 81, 30, .12);
}

/* Select2 w wierszu filtrów i w nagłówku karty */
.dataTable .select2-container--bootstrap .select2-selection,
.portlet-title .select2-container--bootstrap .select2-selection {
  border: 1px solid var(--line);
  border-radius: 7px !important;
  box-shadow: none;
  min-height: 34px;
}

/* select2-bootstrap centruje tekst pionowym paddingiem (6px przy height:34px).
   Wyzerowanie paddingu psuło to centrowanie — placeholder lądował przy górnej
   krawędzi. Zamiast dobierać padding pod każdą wysokość, centrujemy flexem:
   działa niezależnie od tego, czy pole ma 34px (filtry) czy 40px (formularze).
   Strzałka jest pozycjonowana absolutnie, więc flex jej nie rusza. */
.select2-container--bootstrap .select2-selection--single {
  display: flex;
  align-items: center;
  height: auto;
  padding: 0 24px 0 12px !important;
}

/* `flex: 1` jest tu istotne: krzyżyk czyszczenia ma `float: right` i siedzi WEWNĄTRZ
   __rendered. Bez tego __rendered kurczy się do treści i krzyżyk przykleja się do
   tekstu zamiast stać przy prawej krawędzi. `min-width: 0` zostawia select2 jego
   przycinanie długich wartości wielokropkiem. */
.select2-container--bootstrap .select2-selection--single .select2-selection__rendered {
  flex: 1;
  min-width: 0;
  line-height: normal;
  padding: 0;
}

/* Bootstrap .table-bordered rysuje kratkę także na <tfoot> i na samej tabeli */
table.dataTable.table-bordered { border: 0; }

.portlet > .portlet-title > .actions > .btn, .portlet > .portlet-title > .actions > .btn-group > .btn, .portlet > .portlet-title > .actions > .btn-group > .btn.btn-sm, .portlet > .portlet-title > .actions > .btn.btn-sm{
  border-radius: 5px!important;
  margin-right: 5px;
}


table.dataTable td{
  font-weight: 400!important;
}

/* ---------- Przyciski w kolumnie „Akcje" ----------
   Markup generowany przez datatable/index.ctp:
     <a class="btn btn-outline btn-sm green defaultAction">Edytuj</a>
     <form style="display:none">…</form>
     <a class="btn btn-outline btn-sm red">Usuń</a>
   Metronic renderuje je jako outline — makieta ma miękkie wypełnienie
   (.btn-soft / .btn-danger-soft). Zawężone do komórek tabeli, żeby nie
   przemalować .btn.green / .btn.red w całej aplikacji. */

/* Komórka akcji trzyma przyciski w jednej linii. Zawężamy przez :has(),
   bo `nowrap` na wszystkich td rozwaliłoby zawijanie nazw i adresów. */
table.dataTable > tbody > tr > td:has(> .btn) { white-space: nowrap; }

/* Kształt — wspólny dla wszystkich przycisków w wierszu */
table.dataTable > tbody > tr > td > .btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin: 2px 6px 2px 0;
  padding: 5px 12px;
  border: 1px solid transparent;
  border-radius: 8px !important;
  font-size: 12px;
  font-weight: 600;
  line-height: 1.35;
  box-shadow: none;
  transition: .15s ease;
}

/* Kolory: Metronic definiuje warianty jako `.btn.green.btn-outline` — trzy klasy.
   Dokładamy .btn-outline i nazwę koloru, żeby wygrać specyficznością zamiast !important.
   Stany :hover Metronica mają o klasę więcej, więc nasze też muszą. */
table.dataTable > tbody > tr > td > .btn,
table.dataTable > tbody > tr > td > .btn.btn-outline.green,
table.dataTable > tbody > tr > td > .btn.btn-outline.blue,
table.dataTable > tbody > tr > td > .btn.btn-outline.default {
  background: #eef2fb!important;
  border-color: transparent;
  color: var(--navy)!important;
}

table.dataTable > tbody > tr > td > .btn:hover,
table.dataTable > tbody > tr > td > .btn:focus,
table.dataTable > tbody > tr > td > .btn.btn-outline.green:hover,
table.dataTable > tbody > tr > td > .btn.btn-outline.green:focus,
table.dataTable > tbody > tr > td > .btn.btn-outline.blue:hover,
table.dataTable > tbody > tr > td > .btn.btn-outline.blue:focus {
  background: #e2e9f8!important;
  border-color: transparent;
  color: var(--navy)!important;
}

/* Akcje destrukcyjne — Metronic oznacza je klasą .red */
table.dataTable > tbody > tr > td > .btn.red,
table.dataTable > tbody > tr > td > .btn.btn-outline.red {
  background: #fdecee!important;
  border-color: transparent;
  color: var(--red)!important;
}

table.dataTable > tbody > tr > td > .btn.red:hover,
table.dataTable > tbody > tr > td > .btn.red:focus,
table.dataTable > tbody > tr > td > .btn.btn-outline.red:hover,
table.dataTable > tbody > tr > td > .btn.btn-outline.red:focus {
  background: #fbdfe2!important;
  border-color: transparent;
  color: var(--red)!important;
}

.dataTables_info{
  font-weight: 400;
}

/* ============================================================
   4 · POLA FORMULARZY
   Kartoteka: app/View/Themed/Timetax/Employees/edit.ctp
   Sprawa:    app/View/Themed/Timetax/Tickets/edit.ctp
   …i każdy inny formularz w portlecie.

   Realny markup (Bootstrap grid + FormHelper):
     .portlet-body.form > .form-body > .row > .col-md-*
       .form-group                      (bywa zagnieżdżony podwójnie)
         <label for="…">
         div.input.text.required        ← wrapper dokładany przez FormHelper
           input.form-control

   Odpowiednik .fld z makiety. Celowo NIE robimy z .form-group flexboksa —
   wewnątrz formularzy siedzą też .input-group i wiersze checkboxów, które
   zmiana trybu layoutu by rozjechała. Wystarczy label jako blok + styl pola.

   Zakres zawężony do .portlet-body.form, żeby nie ruszyć .form-control
   w filtrach tabel, modalach i select2 poza formularzami.
   ============================================================ */

.portlet-body.form .form-group { margin-bottom: 16px; gap:3px; }
.portlet-body.form .form-group > .form-group { margin-bottom: 0; }

.portlet-body.form label {
  margin: 10px;
  font-size: 11.5px;
  font-weight: 600;
  color: var(--muted);
  letter-spacing: .02em;
}

/* FormHelper owija pole w <div class="input text required"> — neutralizujemy,
   żeby nie łapał stylów pola (ta sama pułapka co na logowaniu). */
.portlet-body.form .form-group > div.input {
  display: block;
  border: 0;
  background: none;
  padding: 0;
  margin: 0;
  box-shadow: none;
}

.portlet-body.form .form-control {
  width: 100%;
  height: auto;
  border: 1px solid var(--line);
  border-radius: 9px !important;
  background: #fbfcfe;
  padding: 10px 12px;
  font-size: 13.5px;
  color: var(--ink);
  box-shadow: none;
  transition: .15s;
}

.portlet-body.form .form-control:focus {
  outline: none;
  border-color: var(--orange);
  background: #fff;
  box-shadow: 0 0 0 3px rgba(231, 81, 30, .1);
}

.portlet-body.form textarea.form-control {
  resize: vertical;
}

.portlet-body.form .form-control[readonly],
.portlet-body.form .form-control[disabled] {
  background: #f1f3f8;
  color: var(--muted);
}

/* Select2 — musi wyglądać jak zwykłe pole obok natywnych inputów */
.portlet-body.form .select2-container--bootstrap .select2-selection {
  min-height: 40px;
  border: 1px solid var(--line);
  border-radius: 9px !important;
  background: #fbfcfe;
  box-shadow: none;
}

/* Bez line-height dobieranego pod wysokość pola — pionowe wyrównanie robi flex
   z reguły globalnej wyżej. Tu zostaje sama typografia. */
.portlet-body.form .select2-container--bootstrap .select2-selection--single .select2-selection__rendered {
  color: var(--ink);
  font-size: 13.5px;
}

.portlet-body.form .select2-container--bootstrap.select2-container--focus .select2-selection {
  border-color: var(--orange);
  background: #fff;
  box-shadow: 0 0 0 3px rgba(231, 81, 30, .1);
}

/* Bootstrap 3 buduje .row na floatach — kolumny o różnej wysokości zahaczają
   o siebie i zostawiają dziury (widać po podniesieniu wysokości pól).
   Flex na wierszu wyrównuje kolumny i likwiduje artefakty; procentowe
   szerokości .col-* działają jako flex-itemy bez zmian. Zawężone do formularzy. */
.portlet-body.form:not(:has(.note-add-panel)) > .form-body > .row,
.portlet-body.form:not(:has(.note-add-panel)) > .form-body .row {
  display: flex;
  flex-wrap: wrap;
}


/* ---------- Zakładki ----------
   Markup Metronica: .tabbable-line > ul.nav.nav-tabs > li[.active] > a
   Odpowiednik .tabs/.tab z makiety. Nie zawężam do kartoteki — ten sam
   komponent obsługuje zakładki w Sprawie i gdzie indziej. */
.tabbable-line > .nav.nav-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 2px;
  border-bottom: 1px solid var(--line);
  margin: 0 0 22px;
}

.tabbable-line > .nav.nav-tabs > li { float: none; margin: 0; }

.tabbable-line > .nav.nav-tabs > li > a {
  padding: 12px 18px;
  margin: 0 0 -1px;
  font-size: 13.5px;
  font-weight: 600;
  color: var(--muted);
  background: none;
  border: 0;
  border-bottom: 2.5px solid transparent;
  border-radius: 0 !important;
  transition: .15s;
}

.tabbable-line > .nav.nav-tabs > li > a:hover {
  color: var(--navy);
  background: none;
  border-bottom-color: transparent;
}

/* Metronic maluje aktywną zakładkę własną regułą o 3 klasach — dobijamy do 4. */
.tabbable-line > .nav-tabs > li:hover,
.tabbable-line > .nav.nav-tabs > li.active,
.tabbable-line > .nav.nav-tabs > li.active:hover,
.tabbable-line > .nav.nav-tabs > li.active:focus {
  color: var(--navy);
  background: none;
  border: 0;
  border-bottom: 2.5px solid var(--orange);
}

/* ---------- Przyciski akcji strony (.fixedactions) ----------
   Powrót = ghost, „Zapisz i zamknij" = navy, „Zapisz" = akcja główna (pomarańcz). */
.fixedactions .btn {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  border: 1px solid transparent;
  border-radius: 9px !important;
  padding: 8px 15px;
  font-size: 13px;
  font-weight: 600;
  line-height: 1.2;
  box-shadow: none;
  transition: .16s ease;
}

.fixedactions .btn.default {
  background: #fff;
  border-color: var(--line);
  color: var(--navy);
}

.fixedactions .btn.default:hover,
.fixedactions .btn.default:focus {
  background: #f7f9fd;
  border-color: #c9d2e3;
  color: var(--navy);
}

.fixedactions .btn.blue {
  background: var(--navy);
  border-color: transparent;
  color: #fff;
}

.fixedactions .btn.blue:hover,
.fixedactions .btn.blue:focus {
  background: var(--navy-600);
  border-color: transparent;
  color: #fff;
}

.fixedactions input.btn[name="saveandcontinue"] {
  background: var(--orange);
  border-color: transparent;
  color: #fff;
  box-shadow: 0 2px 8px rgba(231, 81, 30, .28);
}

.fixedactions input.btn[name="saveandcontinue"]:hover,
.fixedactions input.btn[name="saveandcontinue"]:focus {
  background: var(--orange-600);
  border-color: transparent;
  color: #fff;
}


/* ---------- .btn-success → .btn-teal z makiety ----------
   W kartotece (i nie tylko) akcje pomocnicze jadą na Bootstrapowym .btn-success:
     .btn.btn-success.add-group     → „+ Dodaj Telefon / E-Mail / numer podatkowy / Inne"
     .btn.btn-success               → „Kopiuj z adresu zamieszkania"
     .btn.btn-success.refresh-state → ikonka odświeżenia
     .btn.btn-success.make_call     → ikonka telefonu

   Makieta trzyma dla tych akcji turkus #17a2b8 (.btn-teal / .icon-btn.btn-teal),
   nie zieleń — więc nie zmieniamy rodziny koloru, tylko odcień na właściwy
   i dokładamy zaokrąglenie. Reguła jest globalna, bo te same akcje wracają
   na Sprawie i w innych formularzach. */
.btn.btn-success,
.btn.green,
.btn.blue {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  border: none;
  border-radius: 9px !important;
  padding: 8px 14px;
  font-size: 12.5px;
  font-weight: 600;
  line-height: 1.2;
  background: var(--teal);
  color: #fff;
  box-shadow: none;
  transition: .15s ease;
}

.btn.btn-success:hover, .btn.btn-success:focus,
.btn.btn-success:active, .btn.btn-success.active,
.btn.green:hover, .btn.green:focus,
.btn.green:active, .btn.green.active {
  background: var(--teal-600);
  color: #fff;
  outline: none;
}

/* Warianty ikonowe — w makiecie .icon-btn: kwadrat bez etykiety.
   UWAGA: nie wolno tu dopisywać przycisków z tekstem (np. .input-group-btn .btn.green
   od +6mc/+12mc) — sztywne 40×40 przycina im napis. */
.btn.btn-success.refresh-state,
.btn.btn-success.make_call {
  width: 40px;
  height: 40px;
  padding: 0;
  flex: none;
  border-radius: 8px !important;
}


.btn.btn-success.refresh-state > i,
.btn.btn-success.make_call > i { margin: 0; font-size: 14px; }





/* (przeniesione do sekcji 3, przy pozostałych stylach karty) */

/* ============================================================
   5 · CHECKBOXY I RADIO
   uniform.js (Metronic) przejmuje wszystkie pola wyboru i renderuje je
   spritem. Markup po jego obróbce:
       label > div.checker > span[.checked] > input[type=checkbox]
       label > div.radio   > span[.checked] > input[type=radio]
   (na kartotece: 254 z 270 checkboxów).

   Nie zdejmujemy uniforma — gdybyśmy to zrobili, trzeba by go pilnować przy
   każdej dynamicznie dodanej pozycji (klonowane wiersze telefonów, e-maili,
   załączników). Zamiast tego gasimy sprite i rysujemy boks z makiety;
   uniform dalej zarządza stanem, my tylko go malujemy.

   Specyficzność: uniform używa `div.checker span` (0,0,1,2) — nasze selektory
   muszą mieć tyle samo i stać później, stąd konsekwentny prefiks `div.`.
   ============================================================ */

div.checker, div.checker > span, div.checker > span > input,
div.radio,   div.radio   > span, div.radio   > span > input {
  width: 18px;
  height: 18px;
}

/* uniform dokłada własne marginesy do wrappera — kasujemy, odstęp robi gap w etykiecie */
div.checker,
div.radio { margin: 0 !important; }

div.checker > span,
div.radio > span {
  position: relative;
  box-sizing: border-box;
  background-image: none;
  background-color: #fff;
  border: 1.5px solid #c3cbdd;
  border-radius: 5px !important;
  transition: .15s;
}

div.radio > span { border-radius: 50% !important; }

div.checker > span.checked,
div.radio > span.checked {
  background-color: var(--orange);
  border-color: var(--orange);
}

/* Ptaszek i kropka rysowane pseudo-elementem — globalny reset border-radius
   Metronica nie łapie ::after, więc tu !important jest zbędny. */
div.checker > span.checked::after {
  content: "";
  position: absolute;
  left: 5.5px;
  top: 2.05px;
  width: 5px;
  height: 9px;
  border: solid #fff;
  border-width: 0 2px 2px 0;
  transform: rotate(45deg);
}

div.radio > span.checked::after {
  content: "";
  position: absolute;
  inset: 3px;
  border-radius: 50%;
  background: #fff;
}

div.checker.hover > span, div.checker.focus > span,
div.radio.hover > span,   div.radio.focus > span { border-color: var(--orange); }

div.checker.disabled > span, div.checker.disabled > span.checked,
div.radio.disabled > span,   div.radio.disabled > span.checked {
  background-color: #f1f3f8;
  border-color: var(--line);
}

div.checker.disabled > span.checked::after { border-color: var(--muted); }
div.radio.disabled > span.checked::after { background: var(--muted); }

/* Etykieta przy polu wyboru to nie etykieta pola — nie ma być mała i wyszarzona
   (sekcja 4 ustawia taki styl wszystkim <label> w formularzu). */
.portlet-body.form .checkbox > label,
.portlet-body.form .radio > label,
.portlet-body.form label:has(> div.checker),
.portlet-body.form label:has(> div.radio) {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin: 0;
  margin-right: 10px;
  padding-left: 0;
  font-size: 13px;
  font-weight: 400;
  color: var(--ink);
  cursor: pointer;
}

.portlet-body.form .checkbox,
.portlet-body.form .radio { padding-left: 0; }


/* ---------- .input-group (pole + przyciski obok) ----------
   Bootstrap 3 buduje input-group na `display: table`, gdzie .form-control ma
   dostawać szerokość z układu tabelarycznego. Nasza reguła z sekcji 4 daje polu
   `width: 100%`, co w tym trybie wypycha przyciski poza kartę
   (widoczne przy „Data następnego działania": +6mc / +12mc / +7dni / +30dni).
   Przestawiamy grupę na flex — pole się rozciąga, przyciski zawijają. */
.portlet-body.form .input-group {
  display: flex;
  align-items: center;
  gap: 4px;
  width: 100%;
}

.portlet-body.form .input-group > div.input{
  flex: 1;
}

.portlet-body.form .input-group > .form-control {
  flex: 1 1 160px;
  width: auto;
}

.portlet-body.form .input-group .input-group-btn {
  display: flex;
  gap: 6px;
  width: auto;
  font-size: inherit;
  white-space: normal;
}

/* Przyciski skrótów (+6mc / +12mc / +7dni / +30dni) — tylko rozmiar i kształt.
   Kolor zostawiamy wspólnej regule .btn.green / .btn-success wyżej, żeby te same
   akcje pomocnicze wyglądały tak samo w całej aplikacji. */
.portlet-body.form .input-group-btn > .btn {
  width: auto;
  height: auto;
  margin: 0;
  padding: 8px 12px;
  font-size: 12px;
  white-space: nowrap;
}



/* ---------- Checklista „Komplet dokumentów" (Sprawa) ----------
   Markup: .checklist-container … .input-group
             span.input-group-addon.sortable-handle > i.fa-ellipsis-v   ← uchwyt
             span.input-group-addon > div.checkerx > span > input[checkbox]
             textarea.form-control                                       ← etykieta

   Dwie rzeczy specyficzne dla tego komponentu:
   1) Wrapper to `.checkerx`, NIE `.checker` — uniform.js celowo ich nie obsługuje,
      więc reguły z sekcji 5 tu nie działają. Stan czytamy z :has(input:checked).
   2) Tła pozycji NIE ruszamy — ustawia je inline JS przy kliknięciu
      (`$('textarea.form-control', …).css("background-color", color)`), kolor niesie stan.
      Nadpisanie go zabiłoby informację zwrotną.

   Zaznaczone = zielone (jak .chk-row.checked w makiecie), nie pomarańczowe —
   tu kolor znaczy „zrobione", a nie „wybrane". */

/* Uchwyt do przeciągania — bez szarego pudełka Bootstrapa, sama kropkowana rączka */
.checklist-container .input-group-addon.sortable-handle {
  display: flex;
  align-items: center;
  background: none;
  border: 0;
  padding: 0 8px;
  color: #c3cbdd;
  cursor: grab;
  transition: color .15s;
}

.checklist-container .input-group-addon.sortable-handle:hover { color: var(--muted); }
.checklist-container .input-group-addon.sortable-handle:active { cursor: grabbing; }

/* Addon wokół checkboxa też traci ramkę i tło */
#job-application-checklist-sortable  .input-group-addon,
#checklist-sortable .input-group-addon, 
.checklist-container .input-group-addon {
  background: none;
  border: 0;
  padding: 0;
  margin-right: 15px;
  margin-left: -10px;
}

#checklist-sortable .input-group-addon {
  display: flex;
  align-items: center;
}

.checklist-container .checkerx { display: inline-flex; }

#checklist-sortable .checkerx > span, .checklist-container .checkerx > span {
  position: relative;
  display: inline-flex;
  width: 19px;
  height: 19px;
  box-sizing: border-box;
  background: #fff;
  border-radius: 5px !important;
  transition: .15s;
}

/* Natywny input zostaje klikalny na całym boksie, tylko niewidoczny */
.checklist-container .checkerx input[type="checkbox"] {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  opacity: 0;
  cursor: pointer;
}

.checklist-container .checkerx > span:has(input:checked) {
  background: var(--green);
  border-color: var(--green);
}

.checklist-container .checkerx > span:has(input:checked)::after {
visibility: hidden;
}




#ExternalUrlButton.btn{
  height: 40px;
}



/* ---------- Listy sortowalne: uchwyt + kolumna akcji ----------
   Dokumenty, kategorie dokumentów, statusy (spraw / klientów / leadów / zatrudnień).
   Markup wiersza:
     .input-group
       span.input-group-addon.sortable-handle > i        ← uchwyt
       div.inputLike                                     ← nazwa pozycji
       span.input-group-btn > a.btn.green  > i.fa-sign-in   ← edycja
       span.input-group-btn > a.btn.blue   > i.fa-eye       ← podgląd

   UWAGA na pułapkę: te same selektory łapią przyciski skrótów dat (+6mc, +7dni),
   które mają TEKST, nie ikonę. Sztywny kwadrat przyciąłby im napis — dlatego
   rozmiar ikonowy dajemy tylko tym, których jedynym dzieckiem jest <i>. */

/* Uchwyt — jak w checkliście: bez szarego pudełka Bootstrapa */
.portlet-body.form .input-group-addon.sortable-handle {
  display: flex;
  align-items: center;
  background: none;
  border: 0;
  padding: 0 8px;
  color: #c3cbdd;
  cursor: grab;
  transition: color .15s;
  margin-right: 10px;
}

.portlet-body.form .input-group-addon.sortable-handle:hover { color: var(--muted); }
.portlet-body.form .input-group-addon.sortable-handle:active { cursor: grabbing; }

/* Nazwa pozycji — wygląda jak pole, ale nim nie jest */

#customlist-sortable .input-group{
  margin-bottom: 3px;

}

.portlet-body.form .inputLike {
  flex: 1 1 200px;
  min-width: 0;
  padding: 5px 14px;
  border: 1px solid var(--line);
  border-radius: 9px !important;
  background: #fbfcfe;
  font-size: 13.5px;
  color: var(--ink);
}

/* Akcje ikonowe — .icon-btn z makiety. Selektor :has(> i:only-child) celowo
   pomija przyciski z tekstem w tym samym kontenerze. */
.portlet-body.form .input-group-btn > .btn:has(> i:only-child) {
  width: 34px;
  height: 34px;
  padding: 0;
  flex: none;
  border-radius: 8px !important;
  font-size: 14px;
  margin-top:5px;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Kolor: makieta daje akcjom w wierszu miękkie tła (.mini-dl), nie pełne nasycenie
   — przy kilkunastu wierszach pełne kolory dominują nad treścią listy. */
.portlet-body.form .input-group-btn > .btn.green:has(> i:only-child),
.portlet-body.form .input-group-btn > .btn.blue:has(> i:only-child) {
  background: #e7eefb;
  border-color: transparent;
  color: var(--navy);
}

.portlet-body.form .input-group-btn > .btn.green:has(> i:only-child):hover,
.portlet-body.form .input-group-btn > .btn.blue:has(> i:only-child):hover,
.portlet-body.form .input-group-btn > .btn.green:has(> i:only-child):focus,
.portlet-body.form .input-group-btn > .btn.blue:has(> i:only-child):focus {
  background: #d6e2f8;
  border-color: transparent;
  color: var(--navy);
}


/* ---------- Notatki (Sprawa) ----------
   Markup: .todo-tasklist > .todo-tasklist-item.note-styleN.note-style-box
   Baza z Metronica (assets/apps/css/todo-2.min.css), kolory z timetax.css.

   WAŻNE: .note-style1…5 kodują kolor notatki wybrany przez użytkownika —
   ustawiają `background-color` ORAZ `border-left: <kolor> 2px solid`.
   Dlatego NIE używamy skróconego `border:` ani `background:` — nadpisałyby to
   kodowanie. Ustawiamy tylko trzy pozostałe krawędzie i geometrię. */
.todo-tasklist .todo-tasklist-item {
  border-top: 1px solid var(--line);
  border-right: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  border-radius: 9px !important;
  padding: 12px 14px;
  margin-bottom: 10px;
  box-shadow: none;
}

/* Metadane nad treścią notatki */
.todo-tasklist .todo-tasklist-item .todo-tasklist-item-title,
.todo-tasklist .todo-tasklist-item .todo-tasklist-controls {
  font-size: 11.5px;
  color: var(--muted);
}

.todo-tasklist .todo-tasklist-item .todo-tasklist-item-text {
  font-size: 13px;
  color: var(--ink);
}

/* Przycisk „Kolor" — mały, stonowany, nie konkuruje z treścią */
.todo-tasklist .btn.grey-salt {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 11px;
  border: 1px solid var(--line);
  border-radius: 8px !important;
  background: #fff;
  color: var(--navy);
  font-size: 12px;
  font-weight: 600;
  box-shadow: none;
}

.todo-tasklist .btn.grey-salt:hover,
.todo-tasklist .btn.grey-salt:focus {
  background: #f7f9fd;
  border-color: #c9d2e3;
  color: var(--navy);
}

/* Próbki kolorów w rozwijanym menu — .ncolor z makiety */
.note-style-buttons {
  width: 26px;
  height: 20px;
  border: 1.5px solid var(--line);
  border-radius: 6px !important;
  cursor: pointer;
  transition: .15s;
}

.note-style-buttons:hover { transform: translateY(-1px); }






/* Checkbox zaznaczania wiersza to pseudo-element pozycjonowany absolutnie
   (timetax.css: `position:absolute; top:1.2em; left:50%`). Sztywne `top` powodowało,
   że przy wierszu zawijającym się do dwóch linii checkbox zostawał przy górnej
   krawędzi — stąd wcześniejsze korekty `margin-top` dobierane na oko.

   Centrujemy go względem całej komórki. `td` z natury wypełnia wysokość wiersza,
   więc `top: 50%` + translate trafia w środek niezależnie od tego, ile linii ma
   wiersz — bez magicznych liczb. */
table.dataTable td.select-checkbox,
table.dataTable th.select-all-checkbox {
  position: relative;
}

table.dataTable td.select-checkbox::before,
table.dataTable td.select-checkbox::after,
table.dataTable th.select-all-checkbox::before,
table.dataTable th.select-all-checkbox::after {
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  margin: 0!important;
}

table.dataTable.dtr-inline.collapsed > tbody > tr > td:first-child::before, table.dataTable.dtr-inline.collapsed > tbody > tr > th:first-child::before{
  top: 50%;
  transform: translateY(-50%);
  left: 10px!important;
  width: 14px!important;
  height: 14px!important;
}

/* `height: 100%` na <td> nie zadziała — procent potrzebuje rodzica o określonej
   wysokości, a <tr> jej nie ma. `display: flex` byłby jeszcze gorszy: wyjmuje
   komórkę z układu tabeli, więc przestaje się rozciągać do wysokości wiersza.
   Komórka i tak wypełnia wiersz — wystarczy wycentrować zawartość (reguła wyżej). */
table.dataTable td.select-checkbox {
  vertical-align: middle;
  text-align: center;
}

/* ---------- .input-group: przyciski zawsze na wysokość pola ----------
   Wcześniej grupa miała `align-items: center`, więc przyciski zachowywały własną
   wysokość i wisiały po środku — niższe od inputa. Do tego przyciski ikonowe miały
   sztywne `height` (34/40px) i korektę `margin-top`, co tylko maskowało objaw.

   `align-items: stretch` (domyślne dla flexa) sprawia, że wszystkie elementy grupy
   dostają wysokość najwyższego z nich, czyli pola. Warunek: żaden z nich nie może
   mieć jawnej wysokości — `stretch` działa tylko gdy rozmiar poprzeczny to `auto`.
   Dlatego poniżej zerujemy `height` i `margin-top`, zostawiając samą szerokość. */
/* Uwaga: NIE `align-items: stretch` na całej grupie. Część .input-group zawiera
   nie przycisk, lecz np. checkbox z dwuwierszową etykietą („Data ważności" +
   „Ważne bezterminowo" w Dokumentach podatkowych). Przy `stretch` pole daty
   rozciągało się do wysokości tej etykiety i robił się z niego wysoki box.

   Zamiast tego centrujemy zawartość, a rozciągamy WYŁĄCZNIE przyciski i addony —
   te i tak wypełniają wysokość linii, więc równanie z polem dalej działa.
   `flex-wrap` pozwala dłuższej etykiecie zawinąć się zamiast zostać przyciętą. */
.portlet-body.form .input-group:has(.checker) {
  align-items: center;
  flex-wrap: wrap;
}

/* Checkbox doklejony do grupy — nie ma się rozciągać ani rozpychać pola */
.portlet-body.form .input-group > .input.checkbox,
.portlet-body.form .input-group > .checkbox {
  flex: 0 0 auto;
  align-self: center;
  margin: 0 0 0 10px;
}

.portlet-body.form .input-group > .input.checkbox .checkbox,
.portlet-body.form .input-group > .input.checkbox label {
  margin: 0;
  white-space: nowrap;
}

.portlet-body.form .input-group > .input-group-btn,
.portlet-body.form .input-group > .input-group-addon { align-self: stretch; }

.portlet-body.form .input-group-btn > .btn,
.portlet-body.form .input-group-btn > .btn:has(> i:only-child),
.portlet-body.form .input-group-btn > .btn.refresh-state,
.portlet-body.form .input-group-btn > .btn.make_call {
  height: auto;
  align-self: stretch;
  margin-top: 0;
  margin-bottom: 0;
}

/* Ikonowe zachowują szerokość (kwadratowy charakter), wysokość bierze się z pola */
.portlet-body.form .input-group-btn > .btn:has(> i:only-child) {
  width: 34px;
  min-width: 34px;
}

.portlet-body.form .input-group-btn > .btn.refresh-state,
.portlet-body.form .input-group-btn > .btn.make_call {
  width: 40px;
  min-width: 40px;
}

/* Wyjątek: grupy, w których polem jest <textarea>. Takie pole rośnie wielowierszowo
   (checklista „Komplet dokumentów"), a rozciągnięty do trzech linii przycisk kosza
   wygląda jak wysoki prostokąt. Tam zostawiamy naturalną wysokość i centrujemy —
   rozciąganie dotyczy pól jednowierszowych, bo o nie chodziło. */
.portlet-body.form .input-group:has(textarea) .input-group-btn > .btn {
  align-self: center;
  height: 34px;
}

.portlet-body.form .input-group:has(textarea) .input-group-btn > .btn.refresh-state,
.portlet-body.form .input-group:has(textarea) .input-group-btn > .btn.make_call {
  height: 40px;
}


/* ---------- Wskaźnik ładowania DataTables ----------
   Włączany przez `processing: true` w defaults (app/View/Layouts/bootstrap.ctp).
   DataTables sam wstawia .dataTables_processing i przełącza jego widoczność —
   my dajemy tylko wygląd. Listy jadą server-side, więc pojawia się przy
   sortowaniu, filtrowaniu, stronicowaniu i wyszukiwaniu. */
/* UWAGA: nie ustawiamy tu `display`. DataTables pokazuje i chowa ten element
   przez inline `style="display:block|none"`, więc nasza reguła i tak by przegrała,
   a przebicie jej `!important` zablokowałoby chowanie wskaźnika na stałe.
   Dlatego układ opieramy na inline-block + vertical-align, nie na flexie. */
.dataTables_wrapper .dataTables_processing {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 12;
  margin: 0;
  padding: 12px 20px;
  width: auto;
  height: auto;
  border: 1px solid var(--line);
  border-radius: 10px !important;
  background: #fff;
  box-shadow: var(--shadow);
  color: var(--navy);
  font-size: 13px;
  font-weight: 600;
  white-space: nowrap;
}

/* Kręcące się kółko przed napisem. `inline-block` jest konieczne — na elemencie
   inline szerokość i wysokość są ignorowane i kółko wychodzi cienką kreską. */
.dataTables_wrapper .dataTables_processing::before {
  content: "";
  display: inline-block;
  vertical-align: middle;
  margin-right: 10px;
  width: 16px;
  height: 16px;
  border: 2px solid var(--line);
  border-top-color: var(--orange);
  border-radius: 50%;
  animation: skytax-spin .7s linear infinite;
}

@keyframes skytax-spin {
  to { transform: rotate(360deg); }
}

/* Kontener jako punkt odniesienia dla wyśrodkowania wskaźnika.
   (Przygaszania tabeli pod spodem nie robimy — DataTables 1.10 nie dokłada
   na wrapper żadnej klasy stanu, ta pojawiła się dopiero w 2.x.) */
.dataTables_wrapper { position: relative; }

@media (prefers-reduced-motion: reduce) {
  .dataTables_wrapper .dataTables_processing::before { animation: none; }
}


/* ---------- Rozwijana lista select2 ----------
   Panel jest doklejany do <body>, poza .portlet-body.form, więc regułę trzeba
   trzymać globalnie — nie da się jej zawęzić do formularzy czy filtrów.
   Nadpisujemy select2-bootstrap: obramowanie #93a1bb, cień Bootstrapa
   i niebieskie podświetlenie #337ab7. */
.select2-container--bootstrap .select2-dropdown {
  border: 1px solid var(--line);
  border-radius: 10px !important;
  box-shadow: var(--shadow);
  overflow: hidden;
  margin-top: 4px;
}

/* Pole wyszukiwania w rozwijanej liście — jak zwykłe pole formularza */
.select2-container--bootstrap .select2-search--dropdown {
  padding: 8px;
  border-bottom: 1px solid var(--line);
}

.select2-container--bootstrap .select2-search--dropdown .select2-search__field {
  border: 1px solid var(--line);
  border-radius: 8px !important;
  background: #fbfcfe;
  padding: 8px 10px;
  font-size: 13px;
  color: var(--ink);
  box-shadow: none;
}

.select2-container--bootstrap .select2-search--dropdown .select2-search__field:focus {
  outline: none;
  border-color: var(--orange);
  background: #fff;
  box-shadow: 0 0 0 3px rgba(231, 81, 30, .12);
}

/* Lista opcji */
.select2-container--bootstrap .select2-results__options { padding: 6px; }

.select2-container--bootstrap .select2-results__option {
  padding: 9px 12px;
  border-radius: 7px !important;
  font-size: 13px;
  color: var(--ink);
}

/* Kolejność ma znaczenie: pozycja aktualnie wybrana najpierw, podświetlenie po niej —
   dzięki temu przy nawigacji po liście podświetlenie wygrywa nad zaznaczeniem. */
.select2-container--bootstrap .select2-results__option[aria-selected=true] {
  background-color: var(--orange-100);
  color: var(--orange-600);
  font-weight: 600;
}

.select2-container--bootstrap .select2-results__option--highlighted[aria-selected] {
  background-color: #eef2fb;
  color: var(--navy);
}

.select2-container--bootstrap .select2-results__option[aria-disabled=true] {
  color: #aeb6c6;
}

/* Nagłówki grup */
.select2-container--bootstrap .select2-results__group {
  padding: 8px 12px 4px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--muted);
}


/* ---------- Etykiety / badge w tabelach ----------
   Bootstrapowe .label z wariantami koloru, generowane przez renderery kolumn
   DataTables (np. ocena i język w „Oceny formularzy", statusy w innych listach).

   Makieta używa dla nich miękkich, przygaszonych teł (.badge / .badge-case),
   a nie pełnego nasycenia — przy kilkudziesięciu wierszach nasycone plakietki
   przykrywają treść tabeli. Odcień zostaje, bo niesie znaczenie
   (zielony = dobrze, czerwony = problem), zmienia się tylko intensywność.

   Specyficzność: warianty Bootstrapa to `.label-success` (jedna klasa),
   więc `.label.label-success` (dwie) wygrywa pewnie.
   .label-icon i .label-sm zostawiamy — Metronic ma dla nich własne reguły
   dwuklasowe (powiadomienia w topbarze). */
.label {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 3px 9px;
  border-radius: 6px !important;
  font-size: 11.5px;
  font-weight: 700;
  line-height: 1.5;
  white-space: nowrap;
  vertical-align: middle;
}

.label.label-default {
  background-color: #eef1f7;
  color: var(--muted);
}

.label.label-primary {
  background-color: #eef2fb;
  color: var(--navy);
}

.label.label-info {
  background-color: #e6f6f9;
  color: #0f7b8c;
}

.label.label-success {
  background-color: var(--green-bg);
  color: #12734a;
}

.label.label-warning {
  background-color: #fdf3e2;
  color: #9a6510;
}

.label.label-danger,
.label.label-error {
  background-color: #fdecee;
  color: var(--red);
}

/* Etykieta jako link — bez podkreślenia i bez przyciemniania Bootstrapa */
a.label:hover,
a.label:focus { text-decoration: none; filter: brightness(.97); }

/* Ocena „5" ma być wyraźniejsza od „4" — wcześniej robił to magiczny inline
   `style="background:#27ae60"` w kontrolerach ankiet, którego nie dało się
   przestylować (style inline biją każdą regułę bez !important). Zastąpiony
   klasą .label-strong; ten sam odcień, o stopień mocniejszy. */
.label.label-success.label-strong {
  background-color: #cdeedd;
  color: #0d5c3a;
}

/* ---------- Poprawka: przyciski „ikonowe" nie mogą mieć sztywnej szerokości ----------
   Selektor `:has(> i:only-child)` miał wyłapywać przyciski zawierające WYŁĄCZNIE
   ikonę. Nie działa tak: `:only-child` liczy tylko dzieci będące ELEMENTAMI,
   a węzły tekstowe ignoruje. Przez to łapał też np.

       <a class="btn btn-success">SpeedTax <i class="fa fa-arrow-right"></i></a>

   (Tickets/edit.ctp, link do podsumowania SpeedTax) i wciskał napis w 34px.

   CSS nie umie zapytać „czy element nie ma tekstu", więc zamiast zgadywać
   przez :has() dajemy `min-width` + poziomy padding: sama ikona daje kwadrat,
   a przycisk z napisem po prostu rośnie. */
.portlet-body.form .input-group-btn > .btn:has(> i:only-child) {
  width: auto;
  min-width: 34px;
  padding: 0 9px;
}

.portlet-body.form .input-group-btn > .btn.refresh-state,
.portlet-body.form .input-group-btn > .btn.make_call {
  width: auto;
  min-width: 40px;
  padding: 0 10px;
}

/* Ikona obok tekstu potrzebuje odstępu; sama ikona ma go zerować */
.portlet-body.form .input-group-btn > .btn > i { margin: 0; }





/* ---------- Pola wyboru pliku ----------
   Bootstrap 3 nakłada na nie .form-control (`height: 34px` + padding), a sekcja 4
   dokłada własny padding — natywny przycisk renderuje się WEWNĄTRZ pola i się
   nie mieści. W Chrome ledwo widoczne, w Firefoksie („Browse") przycina wyraźnie,
   bo tam to jeden zwarty widget.

   Zamiast dobierać wysokość pod każdą przeglądarkę przejmujemy sam przycisk
   przez ::file-selector-button — wtedy wymiary nie zależą już od natywnych metryk.
   Wsparcie: Chrome 89+, Firefox 82+, Safari 14.1+. */
input[type="file"].form-control,
.portlet-body.form input[type="file"].form-control {
  height: auto;
  min-height: 0;
  padding: 7px 9px;
  line-height: 1.5;
  font-size: 13px;
  background: #fff;
  cursor: pointer;
}

input[type="file"].form-control::file-selector-button {
  margin: 0 10px 0 0;
  padding: 6px 12px;
  border: 1px solid var(--line);
  border-radius: 7px !important;
  background: #eef2fb;
  color: var(--navy);
  font-size: 12px;
  font-weight: 600;
  line-height: 1.2;
  cursor: pointer;
  transition: .15s;
}

input[type="file"].form-control::file-selector-button:hover {
  background: #e2e9f8;
  border-color: #c9d2e3;
}





/* ---------- select2 wielokrotny (tagi) ----------
   Dotyczy wszystkich pól tagowych w aplikacji (widoczność notatki, kampanie,
   odbiorcy itd.), dlatego reguły są globalne — tak jak przy rozwijanej liście.

   Tagi były pozycjonowane `float: left` ze sztywnym `margin: 5px 0 0 6px`
   (select2-bootstrap), więc nie były centrowane, tylko odsunięte od górnej
   krawędzi o stałą wartość — przy wyższym polu wisiały u góry.
   Kontener idzie na flex, dzięki czemu centrowanie działa niezależnie
   od wysokości pola i liczby wierszy tagów. */
.select2-container--bootstrap .select2-selection--multiple {
  min-height: 38px;
  height: auto;
  padding: 4px 6px;
  border: 1px solid var(--line);
  border-radius: 9px !important;
  background: #fbfcfe;
}

.select2-container--bootstrap .select2-selection--multiple .select2-selection__rendered {
  height: 100%;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 5px;
  margin: 0;
  padding: 0;
  overflow: visible;
  white-space: normal;
  text-overflow: clip;
}

/* Sam tag — jak .badge z makiety */
.select2-container--bootstrap .select2-selection--multiple .select2-selection__choice {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  float: none;
  margin: 0;
  padding: 4px 9px;
  /* Obrys w odcieniu ciemniejszym od wypełnienia — samo #eef2fb bywa nie do
     odróżnienia od tła pola tam, gdzie jest ono jasne (np. #fbfcfe albo białe
     po focusie). Neutralny --line jest tu za słaby i tag się zlewa. */
  border: 1px solid #d3ddf3;
  border-radius: 6px !important;
  background: #eef2fb;
  color: var(--navy);
  font-size: 12px;
  font-weight: 600;
  line-height: 1.5;
}

/* Krzyżyk po tekście, nie przed — select2 wstawia go w markupie jako pierwszy,
   więc przesuwamy go `order`. Tekst tagu jest anonimowym flex-itemem (order 0). */
.select2-container--bootstrap .select2-selection--multiple .select2-selection__choice__remove {
  order: 2;
  margin: 0;
  color: var(--navy);
  opacity: .5;
  font-weight: 700;
  line-height: 1;
  transition: .15s;
}

.select2-container--bootstrap .select2-selection--multiple .select2-selection__choice__remove:hover {
  color: var(--red);
  opacity: 1;
}

/* Pole wpisywania obok tagów i placeholder — bez sztywnych marginesów */
.select2-container--bootstrap .select2-selection--multiple .select2-search--inline .select2-search__field {
  height: auto;
  margin: 0;
  padding: 3px 4px;
  font-size: 13px;
  line-height: 1.6;
}

.select2-container--bootstrap .select2-selection--multiple .select2-selection__placeholder {
  float: none;
  margin: 0;
  color: #aeb6c6;
  font-size: 13px;
}

/* Przycisk „wyczyść wszystko". W markupie select2 siedzi WEWNĄTRZ __rendered,
   przed polem wpisywania. Po przestawieniu kontenera na flex `margin-left: auto`
   wypychał go w prawo, ale pole wpisywania szło za nim — przez co ląndował
   w środku pola. Wyjmujemy go z układu i pinujemy do prawej krawędzi. */
.select2-container--bootstrap .select2-selection--multiple {
  position: relative;
}

.select2-container--bootstrap .select2-selection--multiple .select2-selection__clear {
  position: absolute;
  top: 50%;
  right: 10px;
  transform: translateY(-50%);
  margin: 0;
  color: var(--muted);
  font-weight: 700;
  line-height: 1;
  z-index: 1;
}

.select2-container--bootstrap .select2-selection--multiple .select2-selection__clear:hover {
  color: var(--red);
}

/* Miejsce na przycisk, żeby tagi nie wchodziły pod niego */
.select2-container--bootstrap .select2-selection--multiple:has(.select2-selection__clear) {
  padding-right: 26px;
}

.select2-container--bootstrap.select2-container--focus .select2-selection--multiple {
  border-color: var(--orange);
  background: #fff;
  box-shadow: 0 0 0 3px rgba(231, 81, 30, .1);
}




/* ---------- Wybór koloru notatki: dropdown → lista pod polem ----------
   Występuje w 11 widokach, wszędzie z osobnym handlerem JS. Handler wisi jednak
   wyłącznie na klasie `.note-style-buttons`, atrybucie `data-style` i przodku
   `.delete-group` — nie na tym, że próbki siedzą w rozwijanym menu. Dzięki temu
   spłaszczamy je samym CSS-em, bez ruszania markupu ani skryptów.

   ZAKRES: tylko kompozytor nowej notatki. Rozpoznajemy go po `textarea.new-note`;
   istniejące notatki na liście mają `.todo-tasklist-item` i zostają z dropdownem. */
.delete-group:has(textarea.new-note) .row:has(> [class*="col-"] .note-style-buttons) {
  display: flex;
  flex-wrap: wrap;
}

/* Kolejność: pole notatki, zaraz pod nim kolory, dalej reszta w porządku z DOM.
   Kolory są w markupie PRZED textareą, stąd potrzeba jawnego `order`. */
.delete-group:has(textarea.new-note) .row > [class*="col-"] { order: 3; }
.delete-group:has(textarea.new-note) .row > [class*="col-"]:has(textarea.new-note) { order: 1; }
.delete-group:has(textarea.new-note) .row > [class*="col-"]:has(.note-style-buttons) { order: 2; }

.delete-group:has(textarea.new-note) [class*="col-"]:has(.note-style-buttons) > div[style*="float"] {
  float: none !important;
}

.delete-group:has(textarea.new-note) .btn-group:has(.note-style-buttons) {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  float: none !important;
  margin: 2px 0 6px;
}

/* Przycisk rozwijania zostaje w DOM (niesie przetłumaczone „Kolor" z __()),
   ale wygląda i zachowuje się jak zwykła etykieta. */
.delete-group:has(textarea.new-note) .btn-group:has(.note-style-buttons) > .dropdown-toggle {
  padding: 0;
  border: 0;
  background: none;
  box-shadow: none;
  color: var(--muted);
  font-size: 12px;
  font-weight: 600;
  cursor: default;
  pointer-events: none;
}

.delete-group:has(textarea.new-note) .btn-group:has(.note-style-buttons) > .dropdown-toggle > .fa-angle-down {
  display: none;
}

/* Menu przestaje być menu — próbki wyliczone w rzędzie */
.delete-group:has(textarea.new-note) .btn-group:has(.note-style-buttons) > .dropdown-menu {
  display: flex !important;
  position: static;
  float: none;
  gap: 6px;
  min-width: 0;
  margin: 0;
  padding: 0;
  border: 0;
  background: none;
  box-shadow: none;
  text-align: left !important;
}

/* Strzałka (dymek) dropdownu — po spłaszczeniu nie ma czego wskazywać.
   `!important` konieczne: components.min.css ma tam `display: inline-block !important`. */
.delete-group:has(textarea.new-note) .btn-group:has(.note-style-buttons) > .dropdown-menu::before,
.delete-group:has(textarea.new-note) .btn-group:has(.note-style-buttons) > .dropdown-menu::after {
  display: none !important;
}

/* Zaznaczona próbka — JS nadaje .note-styleN kontenerowi .delete-group,
   więc podświetlamy tę, której numer zgadza się z klasą przodka.
   Działa też w dropdownie istniejących notatek. */
.delete-group.note-style1 .note-style-buttons.note-style1,
.delete-group.note-style2 .note-style-buttons.note-style2,
.delete-group.note-style3 .note-style-buttons.note-style3,
.delete-group.note-style4 .note-style-buttons.note-style4,
.delete-group.note-style5 .note-style-buttons.note-style5 {
  border-color: var(--navy);
  box-shadow: 0 0 0 2px rgba(12, 49, 131, .18);
}








/* ---------- Zaawansowane szukanie ----------
   Markup (generowany po stronie JS przez plugin filtrów):
     .advancedConditionsWrapper > .advancedConditions
       .advancedConditionBlock.portlet.box.yellow      ← blok warunków
         .portlet-title > .caption + .actions
         .portlet-body.advancedConditionBody
       .advancedConditionRow > .row > .col-md-3|2|7
         select / select / .input-group > .advancedConditionInputBox + przycisk

   Uwaga: wrapper siedzi w `.portlet-body` BEZ klasy `.form`, więc nie łapią go
   reguły pól z sekcji 4 — pola trzeba tu ostylować osobno.

   Przyciski rozpoznajemy po `data-action`, a nie po kolorze Metronica
   (.green/.blue/.red) — atrybut niesie znaczenie i nie zmieni się przy
   przemalowaniu motywu. */

.advancedConditionsWrapper .advancedConditions {
  margin-top: 14px;
}

/* Blok warunków — z żółtego pudełka Metronica robimy naszą kartę */
.advancedConditionsWrapper .advancedConditionBlock.portlet.box {
  background: #fbfcfe;
  border: 1px solid var(--line);
  border-radius: 12px !important;
  box-shadow: none;
  margin-bottom: 14px;
  padding: 0;
}

.advancedConditionsWrapper .advancedConditionBlock.portlet.box > .portlet-title {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  min-height: 0;
  margin: 0;
  padding: 12px 16px;
  background: none;
  border: 0;
  border-bottom: 1px solid var(--line);
}

.advancedConditionsWrapper .advancedConditionBlock.portlet.box > .portlet-title > .caption {
  display: flex;
  align-items: center;
  gap: 8px;
  float: none;
  padding: 0;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: .05em;
  text-transform: uppercase;
  color: var(--navy);
}

.advancedConditionsWrapper .advancedConditionBlock.portlet.box > .portlet-title > .caption > i {
  color: var(--orange);
  font-size: 13px;
}

.advancedConditionsWrapper .advancedConditionBlock.portlet.box > .portlet-title > .actions {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
  margin-left: auto;
  float: none;
  padding: 0;
}

.advancedConditionsWrapper .advancedConditionBody {
  padding: 14px 16px;
  background: none;
  border: 0;
}

/* Wiersz warunku */
.advancedConditionsWrapper .advancedConditionRow {
  padding-bottom: 10px !important;
}

.advancedConditionsWrapper .advancedConditionRow > .row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
}

.advancedConditionsWrapper .advancedConditionInputBox {
  flex: 1 1 160px;
  min-width: 0;
  margin-right: 5px;
}

/* Pola — powtórzenie stylu z sekcji 4, bo tu nie ma .portlet-body.form */
.advancedConditionsWrapper .form-control {
  width: 100%;
  height: auto;
  border: 1px solid var(--line);
  border-radius: 9px !important;
  background: #fff;
  padding: 8px 11px;
  font-size: 13px;
  color: var(--ink);
  box-shadow: none;
  transition: .15s;
}

.advancedConditionsWrapper .form-control:focus {
  outline: none;
  border-color: var(--orange);
  box-shadow: 0 0 0 3px rgba(231, 81, 30, .1);
}

/* Przyciski — wspólny kształt, kolor wg data-action */
.advancedConditionsWrapper .btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  border: 1px solid transparent;
  border-radius: 8px !important;
  padding: 6px 12px;
  font-size: 12px;
  font-weight: 600;
  line-height: 1.3;
  box-shadow: none;
  transition: .15s;
}

/* Akcja główna */
.advancedConditionsWrapper .btn[data-action="filter"] {
  border-color: transparent;
  background: var(--orange);
  color: #fff;
  box-shadow: 0 2px 8px rgba(231, 81, 30, .28);
}

.advancedConditionsWrapper .btn[data-action="filter"]:hover { border-color: transparent;
  background: var(--orange-600); color: #fff; }

/* Zamknięcie panelu — neutralne */
.advancedConditionsWrapper .btn[data-action="close"] {
  background: #fff;
  border-color: var(--line);
  color: var(--navy);
}

.advancedConditionsWrapper .btn[data-action="close"]:hover { background: #f7f9fd; border-color: #c9d2e3; color: var(--navy); }

/* Akcje destrukcyjne */
.advancedConditionsWrapper .btn[data-action="deleteRow"],
.advancedConditionsWrapper .btn[data-action="deleteBlock"] {
  border-color: transparent;
  background: #fdecee;
  color: var(--red);
}

.advancedConditionsWrapper .btn[data-action="deleteRow"]:hover,
.advancedConditionsWrapper .btn[data-action="deleteBlock"]:hover { border-color: transparent;
  background: #fbdfe2; color: var(--red); }

/* Reszta: dodawanie warunków, reset, wyczyść */
.advancedConditionsWrapper .btn[data-action="addrow"],
.advancedConditionsWrapper .btn[data-action="addandrow"],
.advancedConditionsWrapper .btn[data-action="addorrow"],
.advancedConditionsWrapper .btn[data-action="reset"],
.advancedConditionsWrapper .btn[data-action="clear"] {
  border-color: transparent;
  background: #eef2fb;
  color: var(--navy);
}

.advancedConditionsWrapper .btn[data-action="addrow"]:hover,
.advancedConditionsWrapper .btn[data-action="addandrow"]:hover,
.advancedConditionsWrapper .btn[data-action="addorrow"]:hover,
.advancedConditionsWrapper .btn[data-action="reset"]:hover,
.advancedConditionsWrapper .btn[data-action="clear"]:hover { border-color: transparent;
  background: #e2e9f8; color: var(--navy); }


/* ---------- Natywne <select> (bez select2) ----------
   Część list — np. „Sprawy" w kartotece klienta — ma select zapisanych filtrów
   z klasą `select2`, na którym select2 nigdy się nie inicjuje (brak
   `select2-hidden-accessible` i kontenera obok). Zostaje goły natywny select,
   który odstaje od reszty.

   Zamiast polegać na tym, że JS wszędzie zadziała, stylujemy natywne selecty
   tak, by wyglądały jak nasze pola. `:not(.select2-hidden-accessible)` pomija
   te, które select2 przejął (i tak je ukrywa).
   `:not(.input-sm)` zostawia małe selecty w paskach narzędzi tabel. */
select.form-control:not(.select2-hidden-accessible):not(.input-sm) {
  height: auto;
  border: 1px solid var(--line);
  border-radius: 9px !important;
  background-color: #fbfcfe;
  font-size: 13.5px;
  color: var(--ink);
  box-shadow: none;
  cursor: pointer;
  /* własna strzałka — jak .fld select w makiecie */
  appearance: none;
  -webkit-appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%236b7488' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 12px center;
}

select.form-control:not(.select2-hidden-accessible):not(.input-sm):focus {
  outline: none;
  border-color: var(--orange);
  background-color: #fff;
  box-shadow: 0 0 0 3px rgba(231, 81, 30, .1);
}

select.form-control:not(.select2-hidden-accessible):not(.input-sm)[disabled] {
  background-color: #f1f3f8;
  color: var(--muted);
  cursor: default;
}















/* ============================================================
   DROBNE KOREKTY
   Reguły punktowe, które nie należą do żadnej z sekcji wyżej.
   Te, które miały swoje miejsce (promień .dashboard-stat, marginesy uniformu,
   szerokość pola w zaawansowanym szukaniu, wysokość listy tagów select2,
   odstęp .page-content, układ .welcome_text) zostały przeniesione do sekcji
   tematycznych — zostało tylko to, co jest naprawdę ogólne.
   ============================================================ */

/* Wspólny promień dla przycisków i addonów — Metronic zeruje go globalnie */
.btn,
.input-group-addon { border-radius: 8px !important; }

/* Przyciski skrótów i akcji, które nie są .btn, a mają wyglądać tak samo */
.setDateBtn,
.setDateDaysBtn,
.iframeSelectSingle,
.delete-row {
  border-radius: 8px !important;
  height: 100%;
}

/* Badge nie może się zwężać poniżej treści (ucinało krótkie etykiety) */
.badge { min-width: min-content !important; }

.color-group {
  border-radius: 8px !important;
  margin-bottom: 5px;
}

/* Metronic rysuje kreskę nad treścią zakładek — mamy własne obramowanie karty */
.page-container-bg-solid .tabbable-line > .tab-content { border-top: none !important; }

/* Wiersze wewnątrz opakowania DataTables mają wypełniać szerokość */
.dataTables_wrapper .row { width: 100%; }

/* Gwiazdka „pole wymagane" dziedziczyła wysokość pola i rozpychała etykietę */
.portlet-body .control-label .required,
.portlet-body .form-group .required { height: auto !important; }

/* ---------- select2: wygląd bazowy (globalny) ----------
   Dotąd obramowanie i zaokrąglenie select2 nadawaliśmy tylko w dwóch zakresach:
   w tabelach (.dataTable, .portlet-title) i w formularzach (.portlet-body.form).
   Wszędzie indziej — np. w zaawansowanym szukaniu, gdzie wrapper siedzi
   w `.portlet-body` BEZ `.form` — wracał domyślny, płaski wygląd
   select2-bootstrap (kwadratowe rogi, ramka #ccc).

   Ta reguła jest wspólną bazą. Zakresy powyżej mają wyższą specyficzność,
   więc dalej nadpisują wysokość tam, gdzie potrzebna jest inna (34/40px). */
.select2-container--bootstrap .select2-selection {
  min-height: 38px;
  border: 1px solid var(--line);
  border-radius: 9px !important;
  background: #fbfcfe;
  box-shadow: none;
  transition: .15s;
}

.select2-container--bootstrap.select2-container--focus .select2-selection,
.select2-container--bootstrap.select2-container--open .select2-selection {
  border-color: var(--orange);
  background: #fff;
  box-shadow: 0 0 0 3px rgba(231, 81, 30, .1);
}

.select2-container--bootstrap.select2-container--disabled .select2-selection {
  background: #f1f3f8;
  color: var(--muted);
}

.portlet.box > .portlet-body{
  background-color: transparent!important;
}

/* ---------- Pastelowa paleta kafelków .dashboard-stat ----------
   Druga rodzina kafelków pulpitu (te z dużą ikoną w tle) — 11 wariantów
   kolorystycznych Metronica. Tak samo jak przy .custom-box: jasny odcień
   tej samej barwy plus tekst w kolorze ciemniejszym od tła.

   .dashboard-stat występuje wyłącznie w widokach pulpitu (app/View/Index),
   więc reguły nie muszą być dodatkowo zawężane. */

 /* Metronic ustawia biały tekst i białą ikonę OSOBNO DLA KAŻDEGO wariantu
   (`.dashboard-stat.red .details .number{color:#fff}` — cztery klasy), więc
   reguła zbiorcza przegrywa specyficznością. Zamiast powielać ją dla jedenastu
   wariantów, odpowiadamy !important. */
.dashboard-stat .details .number,
.dashboard-stat .details .desc {
  color: white !important;
}

/* Wspólny kształt kafelka — promień i cień jak w .custom-box na pulpicie */
.dashboard-stat {
  border-radius: 14px !important;
  box-shadow: 0 6px 18px rgba(12, 49, 131, .14);
}

/* Typografia kafelków — wspólna dla obu rodzin (.custom-box i .dashboard-stat) */
.custom-box-text, .custom-box-number {
  font-weight: 300 !important;
}

.custom-box-text, .dashboard-stat .details .desc {
  font-size: 14px !important;
}

.custom-box-item .custom-box-text {
  font-size: 12px !important;
}

/* Zakładka OCR zaczyna się od gołego .col-md-12 (bez karty na wierzchu, inaczej
   niż pozostałe panele), więc treść przykleja się do paska zakładek. */
#ticket-ocr { padding-top: 16px; }


/* ---------- select2: szerokość pól w formularzach ----------
   select2 ustala szerokość kontenera przy inicjalizacji i zapisuje ją INLINE.
   Jeśli element jest wtedy ukryty (np. warianty „Wartość pola" w edycji ankiety
   siedzą w `<div class="model-value" style="display:none">`, odsłanianym przez JS
   dopiero po wyborze typu), nie ma czego zmierzyć i wpada przypadkowa wartość
   w px. Objaw: przy DODAWANIU jest dobrze, przy EDYCJI pole jest malutkie —
   bo tam wartość jest z góry ustawiona i blok odsłania się po inicjalizacji.

   Kontrolki formularza i tak mają wypełniać kolumnę, więc wymuszamy 100%.
   `!important` jest konieczne — nadpisujemy styl inline.

   W .input-group szerokość ma wynikać z flexa, żeby przyciski obok się mieściły. */
.portlet-body.form .form-group .select2-container {
  width: 100% !important;
}

.portlet-body.form .input-group .select2-container {
  width: auto !important;
  flex: 1 1 160px;
  min-width: 0;
}


/* ---------- Opakowania kolumn w flexowanym .row ----------
   Formularze mają `.row { display: flex }`. Kolumny bezpośrednio w wierszu
   dostają swoje 33%/50% od szerokości wiersza i wszystko gra. Problem pojawia
   się, gdy kolumna jest owinięta zwykłym divem, np. w edycji szablonu ankiety:

       .row > .col-md-4 (Model)
             > .col-md-4 (Pole)
             > div.model-value > .col-md-4 (Wartość pola)

   Takie opakowanie jest flex-itemem i kurczy się do treści, więc kolumna
   w środku liczy procent od tej małej szerokości — pole robi się malutkie.

   `display: contents` sprawia, że opakowanie znika z układu, a jego kolumna
   staje się bezpośrednim elementem wiersza i liczy procent poprawnie.
   Ukrywanie nadal działa: jQuery .hide() ustawia inline `display:none`,
   które wygrywa, a .show() tylko je zdejmuje i wraca do `contents`.

   CELOWO tylko `.model-value`, a nie ogólny wzorzec „div opakowujący kolumnę".
   Ogólna wersja miała wyższą specyficzność niż `.hidden-group { display:none }`
   i odsłaniała ukryte wiersze formularzy (puste odpowiedzi w edycji ankiety),
   a przy okazji rozbijała ich wielokolumnowy układ. */
.portlet-body.form .row > .model-value {
  display: contents;
}


/* ---------- Komunikaty walidacji pod polem ----------
   jQuery Validate wstawia etykietę błędu przez `error.insertAfter(element)`,
   czyli zaraz za polem, do którego się odnosi (nigdzie w projekcie nie ma
   własnego `errorPlacement` — head.ctp woła po prostu `$("form").validate()`).

   Przy polach przejętych przez widgety to daje zły efekt: select2 ukrywa
   oryginalny <select> i wstawia swój kontener PO nim, więc etykieta trafia
   pomiędzy — wizualnie NAD widocznym polem:

       <select class="select2-hidden-accessible">   ← ukryty oryginał
       <label class="error">…</label>               ← błąd
       <span class="select2-container">             ← widoczne pole

   Zamiast przestawiać errorPlacement w JS (dotknęłoby walidacji w całej
   aplikacji) przestawiamy kolejność wizualną. Flex włączamy TYLKO gdy w polu
   jest błąd, żeby nie zmieniać układu pozostałych pól. */
.portlet-body.form .form-group > .input:has(> label.error),
.portlet-body.form .form-group > .input:has(> .error-message) {
  display: flex;
  flex-direction: column;
}

.portlet-body.form .form-group > .input > label.error,
.portlet-body.form .form-group > .input > .error-message {
  order: 99;
  margin: 5px 0 0;
}

/* jQuery Validate nie ustawia koloru etykiety błędu samodzielnie */
label.error {
  color: var(--red) !important;
}